Files: 5b1b2d4716e2359e97b1954627726823ece10ec4 / app / html / tabs.mcss
2163 bytesRaw
1 | Hypertabs { |
2 | display: flex |
3 | flex-direction: column |
4 | |
5 | height: 100% /* needed to stop scroller blowing out */ |
6 | |
7 | nav { |
8 | display: flex |
9 | |
10 | background: linear-gradient(to bottom, #efefef, #e5e5e5) |
11 | |
12 | section.tabs { |
13 | flex-grow: 1 |
14 | display: flex |
15 | min-width: 0 |
16 | |
17 | div.tab { |
18 | flex-grow: 1 |
19 | |
20 | display: flex |
21 | align-items: center |
22 | justify-content: space-between |
23 | |
24 | min-width: 3.5rem |
25 | font-size: .9rem |
26 | background-color: #efefef |
27 | overflow: hidden |
28 | |
29 | padding: 0 |
30 | margin-left: .6rem |
31 | border: 1px gainsboro solid |
32 | border-bottom: none |
33 | |
34 | :hover { |
35 | a.close { |
36 | visibility: visible |
37 | } |
38 | } |
39 | |
40 | -selected { |
41 | color: #222 |
42 | background-color: #fff |
43 | |
44 | a.link { |
45 | max-width: calc(100% - 2rem) |
46 | } |
47 | a.close { |
48 | visibility: visible |
49 | } |
50 | } |
51 | |
52 | -notify { |
53 | background-color: orange; |
54 | } |
55 | |
56 | |
57 | a { |
58 | color: #666 |
59 | |
60 | :hover { |
61 | color: #0088cc |
62 | text-decoration: none |
63 | } |
64 | } |
65 | |
66 | a.link { |
67 | flex-grow: 1 |
68 | flex-shrink: 0 |
69 | overflow-x: hidden |
70 | min-width: 0 |
71 | max-width: calc(100% - 1.4rem) |
72 | white-space: nowrap |
73 | text-overflow: ellipsis |
74 | |
75 | padding: .5rem 0 .5rem .6rem |
76 | } |
77 | |
78 | a.close { |
79 | visibility: hidden |
80 | font-family: monospace |
81 | line-height: 1rem |
82 | width: .9rem |
83 | height: .9rem |
84 | /* border-radius: 1rem */ |
85 | |
86 | margin-right: .3rem |
87 | |
88 | display: flex |
89 | justify-content: center |
90 | |
91 | :hover { |
92 | background: #aaaaaa |
93 | color: #fff |
94 | font-weight: 600 |
95 | } |
96 | } |
97 | |
98 | } |
99 | |
100 | } |
101 | |
102 | div.navExtra { |
103 | display: flex |
104 | align-items: center |
105 | } |
106 | } |
107 | |
108 | section.content { |
109 | display: flex |
110 | |
111 | height: 100% /* needed to stop making nav weird */ |
112 | |
113 | div.page { |
114 | flex-grow: 1 |
115 | |
116 | display: flex /*hack to get give Scroller context it needs */ |
117 | |
118 | padding-top: .2rem |
119 | } |
120 | } |
121 | } |
122 | |
123 |
Built with git-ssb-web