global.css (4133B)
1 /* default styles */ 2 * { 3 margin: 0px; 4 padding: 0px; 5 box-sizing: border-box; 6 } 7 body { 8 font-family: Segoe UI, sans-serif; 9 touch-action: manipulation; 10 } 11 input, select, button { 12 padding: 0.3em 0.5em; 13 border-radius: 0.4em; 14 } 15 button { 16 cursor: pointer; 17 } 18 a { 19 text-decoration: none; 20 } 21 a:focus { 22 text-decoration: underline; 23 } 24 @media (hover: hover) { 25 a:hover { 26 text-decoration: underline; 27 } 28 } 29 30 /* remove spinner from numeric inputs */ 31 input[type=number] { 32 -moz-appearance: textfield; 33 appearance: textfield; 34 margin: 0; 35 } 36 input[type=number]::-webkit-inner-spin-button, 37 input[type=number]::-webkit-outer-spin-button { 38 -webkit-appearance: none; 39 margin: 0; 40 } 41 42 /* styles for tables */ 43 table { 44 border-collapse: collapse; 45 width: 100%; 46 text-align: left; 47 } 48 table th, table td { 49 padding: 0.2em; 50 } 51 52 /* empty table message */ 53 table .empty-message td { 54 text-align: center !important; 55 padding: 0.5em; 56 } 57 table .empty-message svg { 58 height: 1em; 59 width: 1em; 60 color: var(--foreground); 61 } 62 63 /* styles for icons */ 64 .icon { 65 height: 2em; 66 border: none; 67 padding: 0em; 68 background-color: #00000000; 69 cursor: pointer; 70 vertical-align: middle; 71 } 72 .icon svg { 73 height: 2em; 74 width: 2em; 75 padding: 0.3em; 76 } 77 78 /* styles for modals */ 79 dialog { 80 margin: auto; 81 border-radius: 5px; 82 } 83 dialog::backdrop { 84 background: #00000080; 85 } 86 87 /* styles for mobile devices */ 88 @media only screen and (max-width: 800px) { 89 input, select, button { 90 font-size: 1em; 91 } 92 } 93 94 /* element colors */ 95 body, input, select, button, option, .icon svg, dialog { 96 color: var(--foreground); 97 } 98 body, dialog { 99 background-color: var(--background1); 100 } 101 button, input, select, option, tr:nth-child(2n) { 102 background-color: var(--background2); 103 } 104 @media (hover: hover) { 105 button:hover, select:hover, input:hover { 106 background-color: var(--background3); 107 } 108 } 109 button:active { 110 background-color: var(--background4); 111 } 112 button, input, select, tr { 113 border: 1px solid var(--background5); 114 } 115 dialog { 116 border: 2px solid var(--background5); 117 } 118 a { 119 color: var(--link); 120 } 121 input:invalid:not(:focus) { 122 border: 1px solid var(--error); 123 } 124 125 /* basic page header style */ 126 header { 127 background-color: var(--theme); 128 padding: 0.5em; 129 display: grid; 130 grid-template-columns: 2em 1fr auto 1fr 2em; 131 grid-template-rows: auto; 132 } 133 header h1 { 134 grid-column: 3; 135 font-size: 2em; 136 font-weight: bold; 137 text-decoration: none; 138 color: #000000; 139 } 140 @media only screen and (max-width: 450px) { 141 /* adjust title size to fit small devices */ 142 header h1 { 143 font-size: 7vw; 144 } 145 } 146 147 /* long-form text styles */ 148 .text { 149 max-width: 800px; 150 margin: auto; 151 font-size: 1.1em; 152 } 153 .text h2 { 154 text-align: center; 155 } 156 .text * + h2, .text :not(h2) + h3 { 157 margin-top: 1em; 158 } 159 .text p, .text ul { 160 margin-bottom: 0.5em; 161 } 162 .text p { 163 line-height: 1.3; 164 } 165 .text li { 166 margin-bottom: 0.2em; 167 margin-left: 1.5em; 168 } 169 170 /* light/default theme */ 171 :root { 172 /* The theme color of the app */ 173 --theme: hsl(30, 100%, 50%); 174 175 /* The background color of the app */ 176 --background1: #ffffff; 177 178 /* The default background color of app elements */ 179 --background2: #f8f8f8; 180 181 /* The background color of focused app elements */ 182 --background3: #f0f0f0; 183 184 /* The background color of active app elements */ 185 --background4: #e8e8e8; 186 187 /* The border color of app elements */ 188 --background5: #e0e0e0; 189 190 /* The foreground color of app elements */ 191 --foreground: #000000; 192 193 /* The color of links */ 194 --link: hsl(210, 100%, 40%); 195 196 /* The error color */ 197 --error: hsl(0, 100%, 40%); 198 } 199 200 /* dark mode */ 201 @media only screen and (prefers-color-scheme: dark) { 202 :root { 203 --background1: hsl(210, 20%, 10%); 204 --background2: hsl(210, 20%, 15%); 205 --background3: hsl(210, 20%, 20%); 206 --background4: hsl(210, 20%, 25%); 207 --background5: hsl(210, 20%, 30%); 208 --foreground: #e8e8e8; 209 --link: hsl(210, 100%, 65%); 210 } 211 } 212 213 /* print media mode */ 214 @media only print { 215 :root { 216 --background1: #ffffff; 217 --background2: #ffffff; 218 --background3: #ffffff; 219 --background4: #ffffff; 220 --background5: #000000; 221 --foreground: #000000; 222 --link: #0000ff; 223 } 224 }