git ssb

1
Hypertabs {
2
  display: flex
3
  flex-direction: column
4
5
  height: initial
6
  overflow: hidden
7
8
  nav {
9
    height: 2.3rem
10
    min-height: 2.3rem
11
    background: none
12
13
    display: flex
14
15
    section.tabs {
16
      min-width: 0
17
18
      flex-grow: 1
19
      display: flex
20
21
      div.tab {
22
        flex-grow: 1
23
24
        z-index: 1000
25
        min-width: 3.5rem
26
        max-width: 18rem
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: FontAwesome
62
          line-height: 1rem
63
          font-weight: 300
64
65
          display: flex
66
          justify-content: center
67
68
          ::before {
69
            content: '\f00d'
70
            /* visibility: visible */
71
          }
72
73
          :hover {
74
            background: var(--page-background)
75
            color: var(--page-color)
76
          }
77
        }
78
79
        :hover {
80
          background: var(--app-border-background-mid)
81
          a.link { color: var(--app-border-color) }
82
          a.close { 
83
            ::before { visibility: visible }
84
          }
85
          transition: all .2s ease-in
86
        }
87
88
        -selected {
89
          z-index: 0
90
          color: var(--page-color)
91
          background: var(--page-background)
92
93
          a.link {
94
            color: var(--page-color)
95
            text-decoration: none
96
            max-width: calc(100% - 2rem)
97
            cursor: default
98
          }
99
          a.close {
100
            color: var(--page-color)
101
102
            ::before { visibility: visible }
103
            :hover { }
104
          }
105
106
          :hover {
107
            background: var(--page-background)
108
            a.link { color: var(--page-color) }
109
            transition: none
110
          }
111
        }
112
113
        -notify {
114
          background-color: orange;
115
        }
116
117
      }
118
119
    }
120
  }
121
122
  section.content {
123
    background-color: var(--page-background)
124
    // this brings the scroll-bar in
125
    padding: .5rem .4rem
126
127
    height: 100%
128
    /* needed to stop making nav weird */
129
130
    display: flex
131
132
    div.page {
133
      flex-grow: 1
134
135
      display: flex
136
      /*hack to get give Scroller context it needs */
137
138
      top: 0
139
      bottom: 0
140
      /* stop that stupid thing where tab scrolls the whole page */
141
    }
142
  }
143
}
144