diff options
Diffstat (limited to 'static')
-rw-r--r-- | static/style.css | 102 |
1 files changed, 102 insertions, 0 deletions
diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..693eee9 --- /dev/null +++ b/static/style.css | |||
@@ -0,0 +1,102 @@ | |||
1 | @charset "UTF-8"; | ||
2 | |||
3 | :root { | ||
4 | /* Set sans-serif & mono fonts */ | ||
5 | --sans-font: Inter, Lato,Helvetica,"IBM Plex Sans","Roboto","Nimbus Sans L","Noto Sans", "Segoe UI",Arial,Helvetica,"Helvetica Neue",sans-serif; | ||
6 | --mono-font: "mononoki Nerd Font","IBM Plex Mono","Roboto Mono","Ubuntu Mono","Fira Code","Overpass Mono", Monaco,"Droid Sans Mono",monospace; | ||
7 | --bg: #242933; | ||
8 | --accent-bg: rgb(46, 52, 64); | ||
9 | --text: #eceff4; | ||
10 | --text-light: #d8dee9; | ||
11 | --border: #88c0d0; | ||
12 | --accent: #81a1c1; | ||
13 | --accent-light: #bf616a; | ||
14 | --code: #ebcb8b; | ||
15 | --alert: #a3be8c; | ||
16 | --alert-bg: #8fbcbb; | ||
17 | --code-bg: #2e3440; | ||
18 | } | ||
19 | |||
20 | |||
21 | html, body, footer { | ||
22 | background: var(--bg); | ||
23 | color: var(--text); | ||
24 | font-family: var(--sans-font); | ||
25 | justify-content: center; | ||
26 | align-items: center; | ||
27 | display: flex; | ||
28 | } | ||
29 | |||
30 | div.weather-box { | ||
31 | height: 100%; | ||
32 | align-items: center; | ||
33 | display: inline-flex; | ||
34 | } | ||
35 | |||
36 | div.daily-box { | ||
37 | text-align: center; | ||
38 | padding: 1em; | ||
39 | border: 0.5em solid var(--acent-bg); | ||
40 | border-radius: 5%; | ||
41 | box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24); | ||
42 | box-sizing: border-box; | ||
43 | width: 20em; | ||
44 | height: 10em; | ||
45 | overflow-wrap: normal; | ||
46 | float: left; | ||
47 | } | ||
48 | |||
49 | div.hourly-box { | ||
50 | text-align: center; | ||
51 | padding: 1em; | ||
52 | border: 0.5em solid var(--acent-bg); | ||
53 | border-radius: 5%; | ||
54 | box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24); | ||
55 | box-sizing: border-box; | ||
56 | width: 20em; | ||
57 | height: 10em; | ||
58 | overflow-wrap: normal; | ||
59 | } | ||
60 | |||
61 | |||
62 | /*=== Links */ | ||
63 | a { | ||
64 | color: var(--accent); | ||
65 | } | ||
66 | |||
67 | a:hover { | ||
68 | color: var(--accent); | ||
69 | } | ||
70 | |||
71 | input, select, textarea { | ||
72 | margin: 5px; | ||
73 | padding: 5px; | ||
74 | color: var(--text); | ||
75 | border: 1px solid var(--border); | ||
76 | border-radius: 6px; | ||
77 | border-color: var(--border); | ||
78 | background-color: var(--bg); | ||
79 | min-height: 25px; | ||
80 | line-height: 25px; | ||
81 | vertical-align: middle; | ||
82 | } | ||
83 | |||
84 | input:disabled, select:disabled { | ||
85 | color: #aaa; | ||
86 | border-color: var(--border); | ||
87 | } | ||
88 | |||
89 | button { | ||
90 | font-family: var(--sans-font); | ||
91 | } | ||
92 | |||
93 | button.as-link, | ||
94 | button.as-link:hover, | ||
95 | button.as-link:active { | ||
96 | background: transparent; | ||
97 | /* background-color: var(--bg);A*/ | ||
98 | } | ||
99 | |||
100 | button.as-link[disabled] { | ||
101 | color: #ddd !important; | ||
102 | } | ||