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: FontAwesome
66
          line-height: 1rem
67
          font-weight: 300
68
69
          display: flex
70
          justify-content: center
71
72
          ::before {
73
            content: '\f00d'
74
            /* visibility: visible */
75
          }
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 { 
87
            ::before { visibility: visible }
88
          }
89
          transition: all .2s ease-in
90
        }
91
92
        -selected {
93
          z-index: 0
94
          color: var(--page-color)
95
          background: var(--page-background)
96
97
          a.link {
98
            color: var(--page-color)
99
            text-decoration: none
100
            max-width: calc(100% - 2rem)
101
            cursor: default
102
          }
103
          a.close {
104
            color: var(--page-color)
105
106
            ::before { visibility: visible }
107
            :hover { }
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