diff options
Diffstat (limited to 'static/style.css')
| -rw-r--r-- | static/style.css | 155 |
1 files changed, 0 insertions, 155 deletions
diff --git a/static/style.css b/static/style.css deleted file mode 100644 index d6983a6..0000000 --- a/static/style.css +++ /dev/null | |||
| @@ -1,155 +0,0 @@ | |||
| 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, .container { | ||
| 22 | background: var(--bg); | ||
| 23 | color: var(--text); | ||
| 24 | font-family: var(--sans-font); | ||
| 25 | box-sizing: border-box; | ||
| 26 | height: 100%; | ||
| 27 | width: 100%; | ||
| 28 | font-size: 12pt; | ||
| 29 | } | ||
| 30 | |||
| 31 | .content { | ||
| 32 | display: flex; | ||
| 33 | align-items: center; | ||
| 34 | align-content: flex-start; | ||
| 35 | flex-flow: row wrap; | ||
| 36 | margin: 2%; | ||
| 37 | border-radius: 15px; | ||
| 38 | height: 100%; | ||
| 39 | justify-content: center; | ||
| 40 | border: 3px solid var(--accent); | ||
| 41 | } | ||
| 42 | |||
| 43 | div.searchbar { | ||
| 44 | display: flex; | ||
| 45 | align-items: left; | ||
| 46 | justify-content: left; | ||
| 47 | margin-left: 5px; | ||
| 48 | width: 100%; | ||
| 49 | margin-top: 1%; | ||
| 50 | } | ||
| 51 | |||
| 52 | div.current { | ||
| 53 | display: flex; | ||
| 54 | flex-flow: column wrap; | ||
| 55 | height: 15%; | ||
| 56 | flex-shrink: 1; | ||
| 57 | } | ||
| 58 | |||
| 59 | div.current-icon { | ||
| 60 | width: 100%; | ||
| 61 | height: 100%; | ||
| 62 | } | ||
| 63 | |||
| 64 | img.weather-icon { | ||
| 65 | display: inline-block; | ||
| 66 | } | ||
| 67 | |||
| 68 | div.current-temp { | ||
| 69 | display: inline-block; | ||
| 70 | font-size: 18pt; | ||
| 71 | text-align: left; | ||
| 72 | width: 100% | ||
| 73 | } | ||
| 74 | |||
| 75 | div.current-weather { | ||
| 76 | display: inline-block; | ||
| 77 | width: 100%; | ||
| 78 | font-size: 16pt; | ||
| 79 | margin-bottom: 5px; | ||
| 80 | text-align: left; | ||
| 81 | } | ||
| 82 | |||
| 83 | div.current-wind { | ||
| 84 | display: inline-block; | ||
| 85 | width: 100%; | ||
| 86 | font-size: 14pt; | ||
| 87 | text-align: left; | ||
| 88 | } | ||
| 89 | |||
| 90 | div.current-sunrise, div.current-sunset { | ||
| 91 | display: inline-block; | ||
| 92 | width: 100%; | ||
| 93 | font-size: 14pt; | ||
| 94 | } | ||
| 95 | |||
| 96 | div.forecast-header { | ||
| 97 | width: 100%; | ||
| 98 | display: flex; | ||
| 99 | flex-grow: 0; | ||
| 100 | flex-shrink: 1; | ||
| 101 | max-height: 10%; | ||
| 102 | } | ||
| 103 | h2.forecast-header { | ||
| 104 | margin-left: 5px; | ||
| 105 | margin-right: 5px; | ||
| 106 | border-bottom: 1px solid; | ||
| 107 | width: 100% | ||
| 108 | } | ||
| 109 | |||
| 110 | .daily, .hourly { | ||
| 111 | display: flex; | ||
| 112 | flex-flow: row nowrap; | ||
| 113 | align-items: center; | ||
| 114 | overflow-x: scroll; | ||
| 115 | overflow-y: hidden; | ||
| 116 | white-space: nowrap; | ||
| 117 | width: 100%; | ||
| 118 | |||
| 119 | } | ||
| 120 | |||
| 121 | .hourly-box, .daily-box { | ||
| 122 | display: flex; | ||
| 123 | flex-flow: column wrap; | ||
| 124 | flex-grow: 1; | ||
| 125 | justify-content: center; | ||
| 126 | align-items: flex-start; | ||
| 127 | |||
| 128 | padding: 1em; | ||
| 129 | overflow-wrap: normal; | ||
| 130 | min-width: 15%; | ||
| 131 | white-space: normal; | ||
| 132 | margin: 5px; | ||
| 133 | } | ||
| 134 | |||
| 135 | input, select, textarea { | ||
| 136 | margin: 5px; | ||
| 137 | padding: 5px; | ||
| 138 | color: var(--text); | ||
| 139 | border: 1px solid var(--border); | ||
| 140 | border-radius: 6px; | ||
| 141 | border-color: var(--border); | ||
| 142 | background-color: var(--bg); | ||
| 143 | min-height: 25px; | ||
| 144 | line-height: 25px; | ||
| 145 | vertical-align: middle; | ||
| 146 | } | ||
| 147 | |||
| 148 | input:disabled, select:disabled { | ||
| 149 | color: #aaa; | ||
| 150 | border-color: var(--border); | ||
| 151 | } | ||
| 152 | |||
| 153 | button { | ||
| 154 | font-family: var(--sans-font); | ||
| 155 | } | ||
