global.css (4387B)
1 :root { 2 font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 3 --realm-primary: #25A; 4 } 5 6 *, 7 *::before, 8 *::after { 9 box-sizing: border-box; 10 } 11 12 html, 13 body { 14 margin: 0; 15 padding: 0; 16 } 17 18 .auth-page { 19 min-height: 100vh; 20 display: flex; 21 justify-content: center; 22 align-items: flex-start; 23 padding: 12vh 1.5rem 3rem; 24 background: #fff; 25 } 26 27 .auth-card { 28 width: min(24rem, 100%); 29 padding: 2rem; 30 background: #fff; 31 border-radius: 0; 32 } 33 34 .auth-logo { 35 max-width: 8rem; 36 margin-bottom: 1rem; 37 } 38 39 .auth-card h1 { 40 margin: 0 0 1.5rem; 41 font-size: 1.5rem; 42 font-weight: 400; 43 } 44 45 .auth-field { 46 position: relative; 47 padding-top: 1rem; 48 } 49 50 .auth-input { 51 width: 100%; 52 padding: 0.5rem 0; 53 border: 0; 54 border-bottom: 1pt solid rgba(0, 0, 0, 0.42); 55 border-radius: 0; 56 background: transparent; 57 color: inherit; 58 font: inherit; 59 font-size: 1rem; 60 line-height: 1.5; 61 outline: none; 62 } 63 64 .auth-input:focus { 65 border-bottom-color: var(--realm-primary); 66 } 67 68 .auth-field label { 69 position: absolute; 70 top: 1.5em; 71 left: 0; 72 font-size: 1rem; 73 line-height: 1.5; 74 color: rgba(0, 0, 0, 0.6); 75 pointer-events: none; 76 transform-origin: left top; 77 transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease, opacity 0.15s ease; 78 } 79 80 .auth-input:focus + label, 81 .auth-input:not(:placeholder-shown) + label { 82 top: 0; 83 font-size: 0.85em; 84 font-weight: 500; 85 color: inherit; 86 opacity: 0.8; 87 } 88 89 .auth-identifier { 90 margin: 0 0 0.5rem; 91 color: rgba(0, 0, 0, 0.6); 92 font-size: 0.875rem; 93 } 94 95 .auth-note { 96 margin: 0 0 1rem; 97 color: rgba(0, 0, 0, 0.6); 98 font-size: 0.875rem; 99 line-height: 1.5; 100 } 101 102 .auth-choice { 103 display: flex; 104 align-items: center; 105 gap: 0.5rem; 106 margin-top: 1rem; 107 font-size: 0.875rem; 108 line-height: 1.5; 109 cursor: pointer; 110 } 111 112 .auth-choice input { 113 width: 1rem; 114 height: 1rem; 115 accent-color: var(--realm-primary); 116 } 117 118 .auth-accounts { 119 display: grid; 120 gap: 0.5rem; 121 margin-top: 1rem; 122 } 123 124 .auth-account { 125 display: flex; 126 flex-direction: column; 127 align-items: flex-start; 128 gap: 0.125rem; 129 width: 100%; 130 padding: 0.75rem 0; 131 border: 0; 132 border-bottom: 1pt solid rgba(0, 0, 0, 0.16); 133 border-radius: 0; 134 background: none; 135 color: inherit; 136 font: inherit; 137 text-align: left; 138 cursor: pointer; 139 } 140 141 .auth-account:hover, 142 .auth-account:focus-visible { 143 border-bottom-color: var(--realm-primary); 144 } 145 146 .auth-account:disabled { 147 opacity: 0.5; 148 cursor: default; 149 } 150 151 .auth-account-name { 152 font-size: 1rem; 153 line-height: 1.5; 154 } 155 156 .auth-account-username { 157 color: rgba(0, 0, 0, 0.6); 158 font-size: 0.875rem; 159 line-height: 1.5; 160 } 161 162 .auth-error { 163 margin: 1rem 0 0; 164 color: #d93025; 165 font-size: 0.875rem; 166 line-height: 1.5; 167 } 168 169 .auth-actions { 170 display: flex; 171 justify-content: flex-end; 172 align-items: center; 173 gap: 1rem; 174 margin-top: 1.5rem; 175 } 176 177 .auth-button { 178 padding: 0.75rem 1.5rem; 179 border: 0; 180 border-radius: 0; 181 background: var(--realm-primary); 182 color: #fff; 183 font: inherit; 184 font-size: 0.875rem; 185 letter-spacing: 0.05em; 186 text-transform: uppercase; 187 cursor: pointer; 188 } 189 190 .auth-button:disabled { 191 opacity: 0.5; 192 cursor: default; 193 } 194 195 .auth-link { 196 padding: 0.5rem 0; 197 border: 0; 198 background: none; 199 color: var(--realm-primary); 200 font: inherit; 201 font-size: 0.875rem; 202 cursor: pointer; 203 } 204 205 @media (prefers-color-scheme: dark) { 206 .auth-page { 207 background-color: #222; 208 } 209 210 .auth-card { 211 background-color: #222; 212 color: #fff; 213 } 214 215 .auth-input { 216 border-bottom-color: rgba(255, 255, 255, 0.42); 217 color: #fff; 218 } 219 220 .auth-field label, 221 .auth-identifier, 222 .auth-note, 223 .auth-account-username { 224 color: rgba(255, 255, 255, 0.6); 225 } 226 227 .auth-account { 228 border-bottom-color: rgba(255, 255, 255, 0.16); 229 } 230 231 .auth-error { 232 color: #f28b82; 233 } 234 } 235 236 @media (min-width: 35em) { 237 .auth-page { 238 background-color: #fff; 239 background-image: url('/assets/hex-grid-light.svg'); 240 background-position: center; 241 background-repeat: no-repeat; 242 background-size: cover; 243 } 244 245 .auth-card { 246 box-shadow: 0 0.25em 0.5em #0008; 247 } 248 } 249 250 @media (min-width: 35em) and (prefers-color-scheme: dark) { 251 .auth-page { 252 background-color: #222; 253 background-image: url('/assets/hex-grid-dark.svg'); 254 background-position: center; 255 background-repeat: no-repeat; 256 background-size: cover; 257 } 258 }