Commit 21be5e60c2dcc1845a9e7d20861c40e6b2ec6922
first pass css-properties restyle
mix irving committed on 6/16/2018, 7:43:47 AMParent: 344e29c28aafd900060f6c4a6eda8b01b1c1cd3a
Files changed
app/html/app.mcss | changed |
app/styles/mcss/hypertabs.mcss | changed |
app/styles/mcss/scrollbar.mcss | changed |
app/styles/mcss/app-theme-vars.mcss | added |
app/styles/mixins.js | changed |
app/html/app.mcss | ||
---|---|---|
@@ -1,11 +1,13 @@ | ||
1 | 1 … | App { |
2 … | + background-color: var(--app-border-background) | |
2 | 3 … | position: absolute |
3 | 4 … | |
4 | 5 … | top: 0 |
5 | 6 … | bottom: 0 |
6 | 7 … | left: 0 |
7 | 8 … | right: 0 |
9 … | + | |
8 | 10 … | overflow: hidden |
9 | 11 … | min-height: 0px |
10 | 12 … | } |
11 | 13 … |
app/styles/mcss/hypertabs.mcss | ||
---|---|---|
@@ -1,69 +1,87 @@ | ||
1 | 1 … | Hypertabs { |
2 | 2 … | display: flex |
3 | 3 … | flex-direction: column |
4 | 4 … | |
5 | - height: 100% /* needed to stop scroller blowing out */ | |
5 … | + top: var(--app-border-width) | |
6 … | + bottom: var(--app-border-width) | |
7 … | + left: var(--app-border-width) | |
8 … | + right: var(--app-border-width) | |
6 | 9 … | |
10 … | + height: initial | |
11 … | + | |
7 | 12 … | nav { |
8 | 13 … | display: flex |
9 | 14 … | |
10 | - background: linear-gradient(to bottom, #efefef, #e5e5e5) | |
15 … | + background: none | |
11 | 16 … | |
12 | 17 … | section.tabs { |
13 | - padding: .5rem 0 0 .5rem | |
18 … | + min-width: 0 | |
14 | 19 … | |
15 | 20 … | flex-grow: 1 |
16 | 21 … | display: flex |
17 | - min-width: 0 | |
18 | 22 … | |
19 | 23 … | div.tab { |
20 | 24 … | flex-grow: 1 |
21 | 25 … | |
22 | - display: flex | |
23 | - align-items: center | |
24 | - justify-content: space-between | |
25 | - | |
26 | 26 … | min-width: 3.5rem |
27 | 27 … | font-size: .9rem |
28 | - background-color: #efefef | |
28 … | + background: rgba(0, 0, 0, 0) | |
29 … | + | |
29 | 30 … | overflow: hidden |
30 | 31 … | |
31 | 32 … | padding: 0 |
32 | - margin-left: .3rem | |
33 | 33 … | border: none |
34 … | + margin: 0 .3rem 0 0 | |
34 | 35 … | |
36 … | + display: flex | |
37 … | + align-items: center | |
38 … | + justify-content: space-between | |
39 … | + | |
40 … | + transition: all .1s ease-in | |
41 … | + | |
35 | 42 … | :hover { |
36 | - background-color: #f8f8f8 | |
43 … | + background: var(--app-border-background-mid) | |
44 … | + | |
45 … | + a.link { | |
46 … | + color: var(--app-border-color) | |
47 … | + } | |
48 … | + | |
37 | 49 … | a.close { |
38 | 50 … | visibility: visible |
39 | 51 … | } |
40 | 52 … | } |
41 | 53 … | |
42 | 54 … | -selected { |
43 | - color: #222 | |
44 | - background-color: #fff | |
55 … | + color: var(--page-color) | |
56 … | + background: var(--page-background) | |
45 | 57 … | |
46 | - :hover { | |
47 | - background-color: #fff | |
48 | - } | |
49 | - | |
50 | 58 … | a.link { |
59 … | + color: var(--page-color) | |
51 | 60 … | text-decoration: none |
52 | 61 … | max-width: calc(100% - 2rem) |
62 … | + cursor: default | |
53 | 63 … | } |
54 | 64 … | a.close { |
55 | 65 … | visibility: visible |
56 | 66 … | } |
67 … | + | |
68 … | + :hover { | |
69 … | + background: var(--page-background) | |
70 … | + | |
71 … | + a.link { | |
72 … | + color: var(--page-color) | |
73 … | + } | |
74 … | + } | |
75 … | + | |
57 | 76 … | } |
58 | 77 … | |
59 | 78 … | -notify { |
60 | 79 … | background-color: orange; |
61 | 80 … | } |
62 | 81 … | |
63 | - | |
64 | 82 … | a { |
65 | - color: #666 | |
83 … | + color: var(--app-border-color) | |
66 | 84 … | |
67 | 85 … | :hover { |
68 | 86 … | text-decoration: none |
69 | 87 … | } |
@@ -78,8 +96,9 @@ | ||
78 | 96 … | white-space: nowrap |
79 | 97 … | text-overflow: ellipsis |
80 | 98 … | |
81 | 99 … | padding: .45rem 0 .45rem .6rem |
100 … | + /* padding: 0 0 var(--app-border-width) .6rem */ | |
82 | 101 … | } |
83 | 102 … | |
84 | 103 … | a.close { |
85 | 104 … | visibility: hidden |
@@ -105,21 +124,23 @@ | ||
105 | 124 … | |
106 | 125 … | } |
107 | 126 … | |
108 | 127 … | div.navExtra { |
109 | - padding-top: .2rem | |
128 … | + padding-bottom: var(--app-border-width) | |
110 | 129 … | display: flex |
111 | 130 … | align-items: center |
112 | 131 … | } |
113 | 132 … | } |
114 | 133 … | |
115 | 134 … | section.content { |
116 | - // this margin brings the scroll-bar in | |
117 | - margin: .5rem .4rem | |
118 | - display: flex | |
135 … | + background-color: var(--page-background) | |
136 … | + // this brings the scroll-bar in | |
137 … | + padding: .5rem .4rem | |
119 | 138 … | |
120 | 139 … | height: 100% /* needed to stop making nav weird */ |
121 | 140 … | |
141 … | + display: flex | |
142 … | + | |
122 | 143 … | div.page { |
123 | 144 … | flex-grow: 1 |
124 | 145 … | |
125 | 146 … | display: flex /*hack to get give Scroller context it needs */ |
app/styles/mcss/scrollbar.mcss | ||
---|---|---|
@@ -4,12 +4,12 @@ | ||
4 | 4 … | width: 8px |
5 | 5 … | } |
6 | 6 … | |
7 | 7 … | ::-webkit-scrollbar-thumb { |
8 | - background-color: rgba(65, 3, 82, 0.48) | |
8 … | + background-color: var(--scrollbar-color) | |
9 | 9 … | |
10 | 10 … | :hover { |
11 | - background-color: rgba(65, 3, 82, 0.55) | |
11 … | + background-color: var(--scrollbar-color-hover) | |
12 | 12 … | } |
13 | 13 … | } |
14 | 14 … | |
15 | 15 … | ::-webkit-scrollbar-track { |
app/styles/mcss/app-theme-vars.mcss | ||
---|---|---|
@@ -1,0 +1,13 @@ | ||
1 … | +App { | |
2 … | + | |
3 … | + --app-border-background: rgb(0, 0, 0) | |
4 … | + --app-border-background-mid: rgba(218, 139, 255, 0.47) | |
5 … | + --app-border-width: .3rem | |
6 … | + --app-border-color: rgb(255, 255, 255) | |
7 … | + | |
8 … | + --page-background: rgb(255, 255, 255) | |
9 … | + --page-color: #222 | |
10 … | + | |
11 … | + --scrollbar-color: rgba(65, 3, 82, 0.48) | |
12 … | + --scrollbar-color-hover: rgba(65, 3, 82, 0.55) | |
13 … | +} |
Built with git-ssb-web