git ssb

16+

Dominic / patchbay



Tree: fec69b0777e88c6df42090793aa3e1e9fdc142fd

Files: fec69b0777e88c6df42090793aa3e1e9fdc142fd / app / styles / mcss / hypertabs.mcss

3007 bytesRaw
1Hypertabs {
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

Built with git-ssb-web