git ssb

1
Hypertabs {
2
  display: flex
3
  flex-direction: column
4
5
  top: var(--app-border-width)
6
  bottom: var(--app-border-width)
7
  left: var(--app-border-width)
8
  right: var(--app-border-width)
9
10
  height: initial
11
12
  nav {
13
    height: 2.3rem
14
    min-height: 2.3rem
15
    background: none
16
17
    display: flex
18
19
    section.tabs {
20
      min-width: 0
21
22
      flex-grow: 1
23
      display: flex
24
25
      div.tab {
26
        flex-grow: 1
27
28
        z-index: 1000
29
        min-width: 3.5rem
30
        max-width: 18rem
31
        font-size: .9rem
32
        background: rgba(0, 0, 0, 0)
33
          
34
        overflow: hidden
35
36
        padding: 0
37
        border: none
38
        margin: 0 .3rem 0 0 
39
40
        display: flex
41
        align-items: center
42
        justify-content: space-between
43
44
        a {
45
          color: var(--app-border-color)
46
          outline: none
47
          :hover { text-decoration: none }
48
        }
49
50
        a.link {
51
          flex-grow: 1
52
          flex-shrink: 0
53
          overflow-x: hidden
54
          min-width: 0
55
          max-width: calc(100% - 1.4rem)
56
          white-space: nowrap
57
          text-overflow: ellipsis
58
59
          padding: .45rem 0 .45rem .6rem
60
          /* padding: 0 0 var(--app-border-width) .6rem */
61
        }
62
63
        a.close {
64
          visibility: hidden
65
          font-family: monospace
66
          font-weight: 600
67
          line-height: 1rem
68
69
          width: .9rem
70
          height: .9rem
71
          /* border-radius: 1rem */
72
73
          margin-right: .3rem
74
75
          display: flex
76
          justify-content: center
77
78
          :hover {
79
            background: var(--page-background)
80
            color: var(--page-color)
81
          }
82
        }
83
84
        :hover {
85
          background: var(--app-border-background-mid)
86
          a.link { color: var(--app-border-color) }
87
          a.close { visibility: visible }
88
          transition: all .2s ease-in
89
        }
90
91
        -selected {
92
          z-index: 0
93
          color: var(--page-color)
94
          background: var(--page-background)
95
96
          a.link {
97
            color: var(--page-color)
98
            text-decoration: none
99
            max-width: calc(100% - 2rem)
100
            cursor: default
101
          }
102
          a.close {
103
            visibility: visible
104
            color: var(--page-color)
105
106
            :hover {
107
            }
108
          }
109
110
          :hover {
111
            background: var(--page-background)
112
            a.link { color: var(--page-color) }
113
            transition: none
114
          }
115
        }
116
117
        -notify {
118
          background-color: orange;
119
        }
120
121
      }
122
123
    }
124
125
    div.navExtra {
126
      z-index: 1000
127
      padding-bottom: calc(var(--app-border-width)/2)
128
      display: flex
129
      align-items: center
130
    }
131
  }
132
133
  section.content {
134
    background-color: var(--page-background)
135
    // this brings the scroll-bar in
136
    padding: .5rem .4rem
137
138
    height: 100% /* needed to stop making nav weird */
139
140
    display: flex
141
142
    div.page {
143
      flex-grow: 1
144
145
      display: flex /*hack to get give Scroller context it needs */
146
    }
147
  }
148
}
149
150