Files: 5b17ba2a85122774945850eeb89c50eaded5c446 / app / html / tabs.mcss
1921 bytesRaw
1 | /* TODO depricate this carefully (see styles/mcss/hypertabs.mcss) */ |
2 | /* NOTE there are some active styles in here still */ |
3 | |
4 | Hypertabs { |
5 | position: fixed |
6 | top: 0 |
7 | right: 0 |
8 | left: 0 |
9 | bottom: 0 |
10 | |
11 | display: flex |
12 | flex-direction: column |
13 | |
14 | height: 100% /* needed to stop scroller blowing out */ |
15 | overflow: hidden |
16 | |
17 | nav { |
18 | display: flex |
19 | |
20 | background: linear-gradient(to bottom, #efefef, #e5e5e5) |
21 | |
22 | section.tabs { |
23 | flex-grow: 1 |
24 | display: flex |
25 | min-width: 0 |
26 | |
27 | div.tab { |
28 | flex-grow: 1 |
29 | |
30 | display: flex |
31 | align-items: center |
32 | justify-content: space-between |
33 | |
34 | min-width: 3.5rem |
35 | font-size: .9rem |
36 | background-color: #efefef |
37 | overflow: hidden |
38 | |
39 | padding: 0 |
40 | margin-left: .6rem |
41 | border: 1px gainsboro solid |
42 | border-bottom: none |
43 | |
44 | -selected { |
45 | color: #222 |
46 | $backgroundPrimary |
47 | |
48 | a.link { |
49 | max-width: calc(100% - 2rem) |
50 | } |
51 | } |
52 | |
53 | -notify { |
54 | background-color: orange; |
55 | } |
56 | |
57 | |
58 | a { |
59 | color: #666 |
60 | |
61 | :hover { |
62 | color: #0088cc |
63 | text-decoration: none |
64 | } |
65 | } |
66 | |
67 | a.link { |
68 | flex-grow: 1 |
69 | flex-shrink: 0 |
70 | overflow-x: hidden |
71 | min-width: 0 |
72 | max-width: calc(100% - 1.4rem) |
73 | white-space: nowrap |
74 | text-overflow: ellipsis |
75 | |
76 | padding: .5rem 0 .5rem .6rem |
77 | } |
78 | |
79 | } |
80 | |
81 | } |
82 | |
83 | div.navExtra { |
84 | z-index: 1000 |
85 | padding-bottom: calc(var(--app-border-width)/2) |
86 | |
87 | display: grid |
88 | grid-auto-flow: column |
89 | grid-gap: .5rem |
90 | align-items: center |
91 | |
92 | margin: 0 .5rem |
93 | } |
94 | } |
95 | |
96 | section.content { |
97 | display: flex |
98 | |
99 | height: 100% /* needed to stop making nav weird */ |
100 | |
101 | div.page { |
102 | flex-grow: 1 |
103 | |
104 | display: flex /*hack to get give Scroller context it needs */ |
105 | } |
106 | } |
107 | } |
108 | |
109 |
Built with git-ssb-web