Files: 5082cb17fbd73197ca2ec3564039cb09e3dceae8 / app / styles / mcss / hypertabs.mcss
3032 bytesRaw
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 |
Built with git-ssb-web