ada-ui 2.9.5 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +17 -9
- package/css/ada.blue.css +1 -0
- package/css/ada.css +1 -0
- package/css/ada.green.css +1 -0
- package/index.html +1 -0
- package/package.json +3 -3
- package/scss/_ada.theme-base.scss +18 -0
- package/scss/ada.blue.scss +37 -0
- package/scss/ada.green.scss +50 -0
- package/scss/ada.scss +0 -65
- package/css/ada.min.css +0 -1
package/README.md
CHANGED
|
@@ -4,16 +4,24 @@
|
|
|
4
4
|
|
|
5
5
|
## CDN
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
~~~
|
|
7
|
+
https://cdn.jsdelivr.net/gh/tklepzig/Ada@version/css/ada.min.css
|
|
8
|
+
|
|
10
9
|
Replace `version` with the version of your desired release, see https://github.com/tklepzig/Ada/releases (e.g. `2.9.0`)
|
|
10
|
+
|
|
11
|
+
> Attention: Beginning with version 3.0, the filenames don't contain `min` any longer. So the URL should be
|
|
12
|
+
>
|
|
13
|
+
> https://cdn.jsdelivr.net/gh/tklepzig/Ada@3.0.0/css/ada.css
|
|
14
|
+
|
|
11
15
|
## Install
|
|
12
16
|
|
|
13
|
-
|
|
14
|
-
npm install ada-ui --save
|
|
15
|
-
|
|
17
|
+
# Using npm
|
|
18
|
+
npm install ada-ui --save
|
|
19
|
+
|
|
20
|
+
# Using yarn
|
|
21
|
+
yarn add ada-ui
|
|
22
|
+
|
|
23
|
+
## Select a Theme
|
|
24
|
+
|
|
25
|
+
Beginning with version 3.0.0, you can choose between different themes. When using the CSS, ensure to include the correct theme file before the main one, e.g.:
|
|
16
26
|
|
|
17
|
-
|
|
18
|
-
yarn add ada-ui
|
|
19
|
-
~~~
|
|
27
|
+
https://cdn.jsdelivr.net/gh/tklepzig/Ada@3.0.0/css/ada.blue.css
|
package/css/ada.blue.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.warn,.accent,:root{--l-dark: calc(var(--l) - 16%);--l-light: calc(var(--l) + 38%);--bg: hsl(var(--h), var(--s), var(--l-dark));--fg: hsl(var(--h-fg), var(--s-fg), var(--l-fg));--fg-alpha60: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.6);--fg-alpha80: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.8);--default: hsl(var(--h), var(--s), var(--l));--default-alpha10: hsla(var(--h), var(--s), var(--l), 0.1);--default-alpha40: hsla(var(--h), var(--s), var(--l), 0.4);--light: hsl(var(--h), var(--s), var(--l-light));--light-alpha40: hsla(var(--h), var(--s), var(--l-light), 0.4);--light-alpha70: hsla(var(--h), var(--s), var(--l-light), 0.7)}:root{--h: 205;--s: 80%;--l: 23%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.accent{--h: 146;--s: 58%;--l: 20%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.warn{--h: 0;--s: 75%;--l: 29%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}
|
package/css/ada.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
html{font-size:14px;font-family:"Open Sans",sans-serif;font-weight:400}@media screen and (max-width: 1199px){html{font-size:12px}}html,body{height:100%;min-height:100%;margin:0;padding:0;background:var(--bg);color:var(--fg)}h1{font-size:3rem;margin:1rem 0 2rem 0}h2{font-size:2rem;margin:1rem 0 1.5rem 0}.panel>header,.tile>header,h3{font-size:1.5rem;margin:.5rem 0 1.5rem 0}h4{font-weight:400;font-size:1.2rem;margin:.5rem 0 .5rem 0}h1,h2,.panel>header,.tile>header,h3,h4{font-weight:300;text-shadow:0 0 4px var(--light-alpha40);color:var(--fg)}h1.m-0,h2.m-0,.panel>header,.tile>header,h3.m-0,h4.m-0{margin:0}body{font-size:1rem;-webkit-tap-highlight-color:transparent;box-sizing:border-box;padding:.5rem}.panel>footer:after,.tile>footer:after,.panel>footer:before,.tile>footer:before,.panel>header:after,.tile>header:after,.panel>header:before,.tile>header:before{content:"";border-style:solid;border-color:var(--default);position:absolute;height:1rem;width:1rem;z-index:2}.tile>footer:after,.tile>footer:before,.tile>header:after,.tile>header:before{border-color:var(--light-alpha40);height:.75rem;width:.75rem}.button-group{margin:.8rem}.button,.button.icon{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border-radius:.3rem;box-shadow:0 0 10px 0px rgba(0,0,0,.4);outline:none;border:1px solid var(--light-alpha40);color:var(--fg);text-shadow:0 0 4px var(--light-alpha40);font-family:inherit;cursor:pointer;user-select:none;background-color:transparent;vertical-align:middle;transition:border-color .15s ease-in-out,background-color .15s ease-in-out;min-height:min-content;min-width:8rem;padding:.8rem 1.6rem;margin:.8rem;font-size:1.1rem}.button.small,.button.icon{display:grid;justify-items:center;align-items:center;min-width:0;padding:.8rem}.button.icon{border:1px solid transparent;box-shadow:none;background:none}.button.icon>i.material-icons{font-size:20px}.button-group>.button.icon{margin:1px}.button.fill{background-color:var(--default)}.button:focus{border:1px solid var(--light-alpha70)}.button:active{background-color:var(--light-alpha70);border:1px solid var(--default-alpha40)}.button:disabled{opacity:.4;filter:saturate(0.6);cursor:default;color:var(--fg-alpha80);pointer-events:none}.input{border-radius:.3rem;box-shadow:0 0 10px 0px rgba(0,0,0,.4);outline:none;border:1px solid var(--light-alpha40);color:var(--fg);text-shadow:0 0 4px var(--light-alpha40);font-family:inherit;background-color:transparent;transition:border-color .15s ease-in-out;padding:.8rem 1.6rem;margin:.8rem;font-size:1.1rem}.input:focus{border:1px solid var(--light-alpha70)}.input:disabled{opacity:.4;filter:saturate(0.6);cursor:default;color:var(--fg-alpha80);pointer-events:none}.panel,.tile{background:var(--default-alpha10);box-shadow:0 0 20px 1px rgba(0,0,0,.4);border-radius:.3rem;display:grid;grid-template-rows:auto 1fr auto;overflow:auto;margin:.5rem}.panel>header,.tile>header{position:relative;text-align:left;padding:.4rem .6rem}.panel>header:before,.tile>header:before{border-width:2px 0 0 2px;border-radius:.3rem 0 0 0;left:0;top:0}.panel>header:after,.tile>header:after{border-width:2px 2px 0 0;border-radius:0 .3rem 0 0;right:0;top:0}.panel>header:empty,.tile>header:empty{padding:.2rem}.panel>article,.tile>article{z-index:1;padding:0 .6rem;overflow:auto}.panel>article::-webkit-scrollbar,.tile>article::-webkit-scrollbar{width:2px;background:transparent}.panel>article::-webkit-scrollbar-thumb,.tile>article::-webkit-scrollbar-thumb{min-width:1rem;border-style:solid;border-color:transparent;border-width:2px 2px 1px 2px;background:var(--default);box-sizing:border-box;background-clip:padding-box}.panel>footer,.tile>footer{position:relative;text-align:right;padding:.4rem .6rem;font-size:.75rem;color:var(--fg-alpha60)}.panel>footer:before,.tile>footer:before{border-width:0 0 2px 2px;border-radius:0 0 0 .3rem;left:0;bottom:0}.panel>footer:after,.tile>footer:after{border-width:0 2px 2px 0;border-radius:0 0 .3rem 0;right:0;bottom:0}.panel>footer:empty,.tile>footer:empty{padding:.2rem}.tile{margin:.8rem}.tile>header:before{border-width:1px 0 0 1px}.tile>header:after{border-width:1px 1px 0 0}.tile>article{color:var(--fg);text-shadow:0 0 4px var(--light-alpha40)}.tile>footer:before{border-width:0 0 1px 1px}.tile>footer:after{border-width:0 1px 1px 0}.tile.inset{box-shadow:inset 0 0 20px 1px rgba(0,0,0,.4)}.tile.inset>header{color:var(--fg-alpha80)}.tile.inset>header:before,.tile.inset>header:after{opacity:.6}.tile.inset>article{color:var(--fg-alpha80)}.tile.inset footer:before,.tile.inset footer:after{opacity:.6}.spinner{width:100%;height:100%;box-sizing:border-box;position:relative;border-style:solid;border-width:.3em;border-radius:50%;border-color:transparent var(--default);animation:4s rotateOuter linear infinite;box-shadow:0 0 10px 0px rgba(0,0,0,.4) inset}.spinner:before{content:"";position:absolute;top:.2em;left:.2em;right:.2em;bottom:.2em;border-style:inherit;border-width:inherit;border-color:transparent var(--light-alpha70);border-radius:inherit;animation:2s rotateInner linear infinite;box-shadow:0 0 10px 0px rgba(0,0,0,.6) inset}.spinner:after{content:"";position:absolute;top:.7em;left:.7em;right:.7em;bottom:.7em;border-style:inherit;border-width:inherit;border-color:transparent var(--light-alpha40);border-radius:inherit;animation:4s rotateCenter linear infinite}@keyframes rotateOuter{0%{transform:rotate(45deg)}100%{transform:rotate(225deg)}}@keyframes rotateInner{0%{transform:rotate(-90deg)}100%{transform:rotate(-270deg)}}@keyframes rotateCenter{0%{transform:rotate(0)}100%{transform:rotate(180deg)}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.warn,.accent,:root{--l-dark: calc(var(--l) - 16%);--l-light: calc(var(--l) + 38%);--bg: hsl(var(--h), var(--s), var(--l-dark));--fg: hsl(var(--h-fg), var(--s-fg), var(--l-fg));--fg-alpha60: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.6);--fg-alpha80: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.8);--default: hsl(var(--h), var(--s), var(--l));--default-alpha10: hsla(var(--h), var(--s), var(--l), 0.1);--default-alpha40: hsla(var(--h), var(--s), var(--l), 0.4);--light: hsl(var(--h), var(--s), var(--l-light));--light-alpha40: hsla(var(--h), var(--s), var(--l-light), 0.4);--light-alpha70: hsla(var(--h), var(--s), var(--l-light), 0.7)}:root{--h: 132;--s: 92%;--l: 22%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.accent{--h: 64;--s: 87%;--l: 25%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.warn{--h: 0;--s: 75%;--l: 29%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}
|
package/index.html
CHANGED
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
name="viewport"
|
|
11
11
|
content="user-scalable=yes, initial-scale=1.0, maximum-scale=10.0, width=device-width"
|
|
12
12
|
/>
|
|
13
|
+
<link rel="stylesheet" href="css/ada.blue.css" />
|
|
13
14
|
<link rel="stylesheet" href="css/ada.css" />
|
|
14
15
|
<link
|
|
15
16
|
href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ada-ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.1",
|
|
4
4
|
"scripts": {
|
|
5
|
-
"dev": "sass scss
|
|
6
|
-
"build": "rm -rf css && sass scss
|
|
5
|
+
"dev": "sass scss:css --watch",
|
|
6
|
+
"build": "rm -rf css && sass scss:css -s compressed --no-source-map"
|
|
7
7
|
},
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
%colourShades {
|
|
2
|
+
--l-dark: calc(var(--l) - 16%);
|
|
3
|
+
--l-light: calc(var(--l) + 38%);
|
|
4
|
+
|
|
5
|
+
--bg: hsl(var(--h), var(--s), var(--l-dark));
|
|
6
|
+
|
|
7
|
+
--fg: hsl(var(--h-fg), var(--s-fg), var(--l-fg));
|
|
8
|
+
--fg-alpha60: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.6);
|
|
9
|
+
--fg-alpha80: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.8);
|
|
10
|
+
|
|
11
|
+
--default: hsl(var(--h), var(--s), var(--l));
|
|
12
|
+
--default-alpha10: hsla(var(--h), var(--s), var(--l), 0.1);
|
|
13
|
+
--default-alpha40: hsla(var(--h), var(--s), var(--l), 0.4);
|
|
14
|
+
|
|
15
|
+
--light: hsl(var(--h), var(--s), var(--l-light));
|
|
16
|
+
--light-alpha40: hsla(var(--h), var(--s), var(--l-light), 0.4);
|
|
17
|
+
--light-alpha70: hsla(var(--h), var(--s), var(--l-light), 0.7);
|
|
18
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
@import "ada.theme-base";
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
@extend %colourShades;
|
|
5
|
+
|
|
6
|
+
--h: 205;
|
|
7
|
+
--s: 80%;
|
|
8
|
+
--l: 23%;
|
|
9
|
+
|
|
10
|
+
--h-fg: var(--h);
|
|
11
|
+
--s-fg: 100%;
|
|
12
|
+
--l-fg: 89%;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.accent {
|
|
16
|
+
@extend %colourShades;
|
|
17
|
+
|
|
18
|
+
--h: 146;
|
|
19
|
+
--s: 58%;
|
|
20
|
+
--l: 20%;
|
|
21
|
+
|
|
22
|
+
--h-fg: var(--h);
|
|
23
|
+
--s-fg: 100%;
|
|
24
|
+
--l-fg: 89%;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.warn {
|
|
28
|
+
@extend %colourShades;
|
|
29
|
+
|
|
30
|
+
--h: 0;
|
|
31
|
+
--s: 75%;
|
|
32
|
+
--l: 29%;
|
|
33
|
+
|
|
34
|
+
--h-fg: var(--h);
|
|
35
|
+
--s-fg: 100%;
|
|
36
|
+
--l-fg: 89%;
|
|
37
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
@import "ada.theme-base";
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
@extend %colourShades;
|
|
5
|
+
|
|
6
|
+
--h: 132;
|
|
7
|
+
--s: 92%;
|
|
8
|
+
--l: 22%;
|
|
9
|
+
|
|
10
|
+
--h-fg: var(--h);
|
|
11
|
+
--s-fg: 100%;
|
|
12
|
+
--l-fg: 89%;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.accent {
|
|
16
|
+
@extend %colourShades;
|
|
17
|
+
|
|
18
|
+
//TODO which accent color???
|
|
19
|
+
|
|
20
|
+
//another green tone
|
|
21
|
+
--h: 64;
|
|
22
|
+
--s: 87%;
|
|
23
|
+
--l: 25%;
|
|
24
|
+
|
|
25
|
+
//orange
|
|
26
|
+
//--h: 32;
|
|
27
|
+
//--s: 85%;
|
|
28
|
+
//--l: 34%;
|
|
29
|
+
|
|
30
|
+
//blue
|
|
31
|
+
//--h: 212;
|
|
32
|
+
//--s: 50%;
|
|
33
|
+
//--l: 19%;
|
|
34
|
+
|
|
35
|
+
--h-fg: var(--h);
|
|
36
|
+
--s-fg: 100%;
|
|
37
|
+
--l-fg: 89%;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.warn {
|
|
41
|
+
@extend %colourShades;
|
|
42
|
+
|
|
43
|
+
--h: 0;
|
|
44
|
+
--s: 75%;
|
|
45
|
+
--l: 29%;
|
|
46
|
+
|
|
47
|
+
--h-fg: var(--h);
|
|
48
|
+
--s-fg: 100%;
|
|
49
|
+
--l-fg: 89%;
|
|
50
|
+
}
|
package/scss/ada.scss
CHANGED
|
@@ -1,58 +1,3 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
@extend %colourShades;
|
|
3
|
-
|
|
4
|
-
--h: 205;
|
|
5
|
-
--s: 80%;
|
|
6
|
-
--l: 23%;
|
|
7
|
-
|
|
8
|
-
--h-fg: var(--h);
|
|
9
|
-
--s-fg: 100%;
|
|
10
|
-
--l-fg: 89%;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.accent {
|
|
14
|
-
@extend %colourShades;
|
|
15
|
-
|
|
16
|
-
--h: 146;
|
|
17
|
-
--s: 58%;
|
|
18
|
-
--l: 20%;
|
|
19
|
-
|
|
20
|
-
--h-fg: var(--h);
|
|
21
|
-
--s-fg: 100%;
|
|
22
|
-
--l-fg: 89%;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.warn {
|
|
26
|
-
@extend %colourShades;
|
|
27
|
-
|
|
28
|
-
--h: 0;
|
|
29
|
-
--s: 75%;
|
|
30
|
-
--l: 29%;
|
|
31
|
-
|
|
32
|
-
--h-fg: var(--h);
|
|
33
|
-
--s-fg: 100%;
|
|
34
|
-
--l-fg: 89%;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
%colourShades {
|
|
38
|
-
--l-dark: calc(var(--l) - 16%);
|
|
39
|
-
--l-light: calc(var(--l) + 38%);
|
|
40
|
-
|
|
41
|
-
--bg: hsl(var(--h), var(--s), var(--l-dark));
|
|
42
|
-
|
|
43
|
-
--fg: hsl(var(--h-fg), var(--s-fg), var(--l-fg));
|
|
44
|
-
--fg-alpha60: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.6);
|
|
45
|
-
--fg-alpha80: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.8);
|
|
46
|
-
|
|
47
|
-
--default: hsl(var(--h), var(--s), var(--l));
|
|
48
|
-
--default-alpha10: hsla(var(--h), var(--s), var(--l), 0.1);
|
|
49
|
-
--default-alpha40: hsla(var(--h), var(--s), var(--l), 0.4);
|
|
50
|
-
|
|
51
|
-
--light: hsl(var(--h), var(--s), var(--l-light));
|
|
52
|
-
--light-alpha40: hsla(var(--h), var(--s), var(--l-light), 0.4);
|
|
53
|
-
--light-alpha70: hsla(var(--h), var(--s), var(--l-light), 0.7);
|
|
54
|
-
}
|
|
55
|
-
|
|
56
1
|
$font-family: "Open Sans", sans-serif !default;
|
|
57
2
|
|
|
58
3
|
@mixin desktop() {
|
|
@@ -112,8 +57,6 @@ body {
|
|
|
112
57
|
}
|
|
113
58
|
|
|
114
59
|
%header {
|
|
115
|
-
@extend %colourShades;
|
|
116
|
-
|
|
117
60
|
font-weight: 300;
|
|
118
61
|
text-shadow: 0 0 4px var(--light-alpha40);
|
|
119
62
|
color: var(--fg);
|
|
@@ -167,8 +110,6 @@ body {
|
|
|
167
110
|
}
|
|
168
111
|
|
|
169
112
|
.button {
|
|
170
|
-
@extend %colourShades;
|
|
171
|
-
|
|
172
113
|
white-space: nowrap;
|
|
173
114
|
text-overflow: ellipsis;
|
|
174
115
|
overflow: hidden;
|
|
@@ -233,8 +174,6 @@ body {
|
|
|
233
174
|
}
|
|
234
175
|
|
|
235
176
|
.input {
|
|
236
|
-
@extend %colourShades;
|
|
237
|
-
|
|
238
177
|
border-radius: 0.3rem;
|
|
239
178
|
box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.4);
|
|
240
179
|
outline: none;
|
|
@@ -261,8 +200,6 @@ body {
|
|
|
261
200
|
}
|
|
262
201
|
|
|
263
202
|
.panel {
|
|
264
|
-
@extend %colourShades;
|
|
265
|
-
|
|
266
203
|
background: var(--default-alpha10);
|
|
267
204
|
box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.4);
|
|
268
205
|
border-radius: 0.3rem;
|
|
@@ -395,8 +332,6 @@ body {
|
|
|
395
332
|
}
|
|
396
333
|
|
|
397
334
|
.spinner {
|
|
398
|
-
@extend %colourShades;
|
|
399
|
-
|
|
400
335
|
width: 100%;
|
|
401
336
|
height: 100%;
|
|
402
337
|
box-sizing: border-box;
|
package/css/ada.min.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
:root{--h: 205;--s: 80%;--l: 23%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.accent{--h: 146;--s: 58%;--l: 20%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.warn{--h: 0;--s: 75%;--l: 29%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.spinner,.panel,.tile,.input,.button,.button.icon,h1,h2,.panel>header,.tile>header,h3,h4,:root,.accent,.warn{--l-dark: calc(var(--l) - 16%);--l-light: calc(var(--l) + 38%);--bg: hsl(var(--h), var(--s), var(--l-dark));--fg: hsl(var(--h-fg), var(--s-fg), var(--l-fg));--fg-alpha60: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.6);--fg-alpha80: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.8);--default: hsl(var(--h), var(--s), var(--l));--default-alpha10: hsla(var(--h), var(--s), var(--l), 0.1);--default-alpha40: hsla(var(--h), var(--s), var(--l), 0.4);--light: hsl(var(--h), var(--s), var(--l-light));--light-alpha40: hsla(var(--h), var(--s), var(--l-light), 0.4);--light-alpha70: hsla(var(--h), var(--s), var(--l-light), 0.7)}html{font-size:14px;font-family:"Open Sans",sans-serif;font-weight:400}@media screen and (max-width: 1199px){html{font-size:12px}}html,body{height:100%;min-height:100%;margin:0;padding:0;background:var(--bg);color:var(--fg)}h1{font-size:3rem;margin:1rem 0 2rem 0}h2{font-size:2rem;margin:1rem 0 1.5rem 0}.panel>header,.tile>header,h3{font-size:1.5rem;margin:.5rem 0 1.5rem 0}h4{font-weight:400;font-size:1.2rem;margin:.5rem 0 .5rem 0}h1,h2,.panel>header,.tile>header,h3,h4{font-weight:300;text-shadow:0 0 4px var(--light-alpha40);color:var(--fg)}h1.m-0,h2.m-0,.panel>header,.tile>header,h3.m-0,h4.m-0{margin:0}body{font-size:1rem;-webkit-tap-highlight-color:transparent;box-sizing:border-box;padding:.5rem}.panel>footer:after,.tile>footer:after,.panel>footer:before,.tile>footer:before,.panel>header:after,.tile>header:after,.panel>header:before,.tile>header:before{content:"";border-style:solid;border-color:var(--default);position:absolute;height:1rem;width:1rem;z-index:2}.tile>footer:after,.tile>footer:before,.tile>header:after,.tile>header:before{border-color:var(--light-alpha40);height:.75rem;width:.75rem}.button-group{margin:.8rem}.button,.button.icon{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border-radius:.3rem;box-shadow:0 0 10px 0px rgba(0,0,0,.4);outline:none;border:1px solid var(--light-alpha40);color:var(--fg);text-shadow:0 0 4px var(--light-alpha40);font-family:inherit;cursor:pointer;user-select:none;background-color:transparent;vertical-align:middle;transition:border-color .15s ease-in-out,background-color .15s ease-in-out;min-height:min-content;min-width:8rem;padding:.8rem 1.6rem;margin:.8rem;font-size:1.1rem}.button.small,.button.icon{display:grid;justify-items:center;align-items:center;min-width:0;padding:.8rem}.button.icon{border:1px solid transparent;box-shadow:none;background:none}.button.icon>i.material-icons{font-size:20px}.button-group>.button.icon{margin:1px}.button.fill{background-color:var(--default)}.button:focus{border:1px solid var(--light-alpha70)}.button:active{background-color:var(--light-alpha70);border:1px solid var(--default-alpha40)}.button:disabled{opacity:.4;filter:saturate(0.6);cursor:default;color:var(--fg-alpha80);pointer-events:none}.input{border-radius:.3rem;box-shadow:0 0 10px 0px rgba(0,0,0,.4);outline:none;border:1px solid var(--light-alpha40);color:var(--fg);text-shadow:0 0 4px var(--light-alpha40);font-family:inherit;background-color:transparent;transition:border-color .15s ease-in-out;padding:.8rem 1.6rem;margin:.8rem;font-size:1.1rem}.input:focus{border:1px solid var(--light-alpha70)}.input:disabled{opacity:.4;filter:saturate(0.6);cursor:default;color:var(--fg-alpha80);pointer-events:none}.panel,.tile{background:var(--default-alpha10);box-shadow:0 0 20px 1px rgba(0,0,0,.4);border-radius:.3rem;display:grid;grid-template-rows:auto 1fr auto;overflow:auto;margin:.5rem}.panel>header,.tile>header{position:relative;text-align:left;padding:.4rem .6rem}.panel>header:before,.tile>header:before{border-width:2px 0 0 2px;border-radius:.3rem 0 0 0;left:0;top:0}.panel>header:after,.tile>header:after{border-width:2px 2px 0 0;border-radius:0 .3rem 0 0;right:0;top:0}.panel>header:empty,.tile>header:empty{padding:.2rem}.panel>article,.tile>article{z-index:1;padding:0 .6rem;overflow:auto}.panel>article::-webkit-scrollbar,.tile>article::-webkit-scrollbar{width:2px;background:transparent}.panel>article::-webkit-scrollbar-thumb,.tile>article::-webkit-scrollbar-thumb{min-width:1rem;border-style:solid;border-color:transparent;border-width:2px 2px 1px 2px;background:var(--default);box-sizing:border-box;background-clip:padding-box}.panel>footer,.tile>footer{position:relative;text-align:right;padding:.4rem .6rem;font-size:.75rem;color:var(--fg-alpha60)}.panel>footer:before,.tile>footer:before{border-width:0 0 2px 2px;border-radius:0 0 0 .3rem;left:0;bottom:0}.panel>footer:after,.tile>footer:after{border-width:0 2px 2px 0;border-radius:0 0 .3rem 0;right:0;bottom:0}.panel>footer:empty,.tile>footer:empty{padding:.2rem}.tile{margin:.8rem}.tile>header:before{border-width:1px 0 0 1px}.tile>header:after{border-width:1px 1px 0 0}.tile>article{color:var(--fg);text-shadow:0 0 4px var(--light-alpha40)}.tile>footer:before{border-width:0 0 1px 1px}.tile>footer:after{border-width:0 1px 1px 0}.tile.inset{box-shadow:inset 0 0 20px 1px rgba(0,0,0,.4)}.tile.inset>header{color:var(--fg-alpha80)}.tile.inset>header:before,.tile.inset>header:after{opacity:.6}.tile.inset>article{color:var(--fg-alpha80)}.tile.inset footer:before,.tile.inset footer:after{opacity:.6}.spinner{width:100%;height:100%;box-sizing:border-box;position:relative;border-style:solid;border-width:.3em;border-radius:50%;border-color:transparent var(--default);animation:4s rotateOuter linear infinite;box-shadow:0 0 10px 0px rgba(0,0,0,.4) inset}.spinner:before{content:"";position:absolute;top:.2em;left:.2em;right:.2em;bottom:.2em;border-style:inherit;border-width:inherit;border-color:transparent var(--light-alpha70);border-radius:inherit;animation:2s rotateInner linear infinite;box-shadow:0 0 10px 0px rgba(0,0,0,.6) inset}.spinner:after{content:"";position:absolute;top:.7em;left:.7em;right:.7em;bottom:.7em;border-style:inherit;border-width:inherit;border-color:transparent var(--light-alpha40);border-radius:inherit;animation:4s rotateCenter linear infinite}@keyframes rotateOuter{0%{transform:rotate(45deg)}100%{transform:rotate(225deg)}}@keyframes rotateInner{0%{transform:rotate(-90deg)}100%{transform:rotate(-270deg)}}@keyframes rotateCenter{0%{transform:rotate(0)}100%{transform:rotate(180deg)}}
|