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