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