styles.css (7356B)
1 *:focus-visible { 2 /* Technically this is bad and something else should be done to indicate 3 * that something is in focus. 4 */ 5 outline: none; 6 } 7 8 body { 9 background: var(--clrBg); 10 color: var(--clrText); 11 font-family: "Noto Sans", sans-serif; 12 font-size: var(--fsNormal); 13 margin: 0; 14 padding: 0; 15 } 16 17 a { 18 color: var(--clrLink); 19 } 20 a:visited { 21 color: var(--clrLinkVisited); 22 } 23 24 #gsticker { 25 position: absolute; 26 top: 0; 27 left: 0; 28 padding: 15px; 29 } 30 31 /* Navigation */ 32 #nav { 33 border-right: 1px solid var(--clrBorder); 34 padding: 10px; 35 } 36 #nav > div { 37 position: sticky; 38 top: 16px; 39 display: flex; 40 flex-flow: column; 41 } 42 #nav > div > * { 43 margin-bottom: 20px; 44 padding: 10px; 45 position: relative; 46 } 47 #nav > div[data-active] img.active { 48 display: none; 49 } 50 #nav > div[data-active="home"] [role="home"] img.inactive, 51 #nav > div[data-active="explore"] [role="explore"] img.inactive, 52 #nav > div[data-active="notifications"] [role="notifications"] img.inactive { 53 display: none; 54 } 55 #nav > div[data-active="home"] [role="home"] img.active, 56 #nav > div[data-active="explore"] [role="explore"] img.active, 57 #nav > div[data-active="notifications"] [role="notifications"] img.active { 58 display: block; 59 } 60 #app-icon-logo > img { 61 width: 36px; 62 height: 36px; 63 } 64 button.nav > img.icon { 65 width: 28px; 66 height: 28px; 67 } 68 #gnav { 69 display: none; 70 position: fixed; 71 bottom: 55px; 72 right: 55px; 73 z-index: var(--zGlobal); 74 } 75 #gnav button { 76 position: absolute; 77 top: 0; 78 left: 0; 79 font-size: 24px; 80 border-radius: 50%; 81 background: var(--clrText); 82 color: var(--clrBg); 83 padding: 10px; 84 border: transparent 5px solid; 85 transition: top 0.05s linear; 86 transform: translateX(-50%) translateY(-50%); 87 z-index: calc(var(--zGlobal) - 1); 88 } 89 #gnav button > .icon { 90 width: 28px; 91 height: 28px; 92 } 93 #gnav button[role="open-gnav"] { 94 z-index: var(--zGlobal); 95 padding: 15px; 96 } 97 #gnav.open button[role="home"] { 98 top: -300px; 99 } 100 #gnav.open button[role="explore"] { 101 top: -225px; 102 } 103 #gnav.open button[role="notifications"] { 104 top: -150px; 105 } 106 #gnav.open button[role="notifications"] .new-notifications { 107 right: 9px; 108 } 109 #gnav.open button[role="sign-out"] { 110 top: -75px; 111 } 112 113 .new-notifications { 114 position: absolute; 115 top: 10px; 116 right: 13px; 117 border-radius: 13px; 118 background: #20ff00; 119 color: white; 120 font-weight: 800; 121 width: 5px; 122 height: 5px; 123 } 124 125 /* Application Framework */ 126 #container { 127 display: flex; 128 flex-flow: row; 129 } 130 #view { 131 flex-shrink: 0; 132 border-right: 1px solid var(--clrBorder); 133 width: 750px; 134 min-height: 100vh; 135 } 136 #view header { 137 position: sticky; 138 top: 0; 139 z-index: var(--zHeader); 140 background: var(--clrBg); 141 } 142 #view header > label { 143 padding: 15px; 144 font-size: 22px; 145 font-weight: 800; 146 display: block; 147 } 148 149 /* Events & Content */ 150 .event { 151 display: flex; 152 flex-direction: row; 153 padding: 15px; 154 transition: background-color 0.2s linear; 155 } 156 .event:hover { 157 background-color: var(--clrPanel); 158 } 159 .loading-events { 160 text-align: center; 161 padding: 15px; 162 } 163 .loader { 164 width: 28px; 165 height: 28px; 166 display: block; 167 margin: 0 auto; 168 position: relative; 169 } 170 .loader img { 171 display: block; 172 width: 100%; 173 height: 100%; 174 animation: spin 1s linear infinite; 175 } 176 @keyframes spin { 177 100% { 178 transform: rotate(360deg); 179 } 180 } 181 .userpic { /* TODO remove .userpic and use helper class */ 182 flex-shrink: 1; 183 } 184 .pfp { 185 width: 64px; 186 height: 64px; 187 position: relative; 188 border-radius: 50%; 189 z-index: var(--zPFP); 190 object-fit: cover; 191 } 192 .pfp.deleted { 193 font-size: 32px; 194 color: var(--clrBg); 195 background: var(--clrText); 196 } 197 .pfp.deleted > i { 198 top: 40%; 199 left: 50%; 200 position: relative; 201 transform: translateX(-50%) translateY(-50%); 202 } 203 204 .event-content { 205 flex: 1; 206 padding-left: 15px; 207 } 208 .event-content > .info { 209 display: inline-block; 210 } 211 .event-content > .info button[role="view-event"] { 212 margin-left: 10px; 213 opacity: 0; 214 transition: opacity 0.2s linear; 215 } 216 .event:hover .event-content > .info button[role="view-event"] { 217 opacity: 0.6; 218 } 219 .username { 220 font-weight: 800; 221 font-size: var(--fsReduced); 222 } 223 .chatroom-name { 224 font-weight: bold; 225 } 226 .deleted-comment { 227 margin-top: 10px; 228 } 229 .line-bot { 230 width: 3px; 231 height: 100%; 232 position: relative; 233 top: -7px; 234 left: calc(50% - 1px); 235 background-color: var(--clrBorder); 236 } 237 .quote { 238 margin-left: 10px; 239 padding: 10px; 240 display: block; 241 } 242 243 #replying-to { 244 max-height: 200px; 245 overflow-y: scroll; 246 } 247 248 #replybox { 249 margin-top: 10px; 250 border-top: 1px solid var(--clrBorder); 251 } 252 253 .timestamp, .replying-to, .shared-by { 254 font-size: var(--fsSmall); 255 color: var(--clrTextLight); 256 } 257 .comment { 258 word-break: break-word; 259 } 260 261 .inline-img { 262 width: 100%; 263 max-height: 300px; 264 object-fit: contain; 265 } 266 267 .action-bar > button { 268 margin-right: 25px; 269 opacity: 0.5; 270 } 271 .reactions { 272 margin-bottom: 15px; 273 } 274 275 .reaction-group { 276 display: inline-flex; 277 align-items: center; 278 border: 2px solid var(--clrBorder); 279 padding: 4px; 280 border-radius: 5px; 281 } 282 283 .reaction-group img { 284 width: 18px; 285 height: 18px; 286 object-fit: cover; 287 border-radius: 50%; 288 margin-left: -8px; 289 vertical-align: top; 290 } 291 292 .reaction-group img:first-of-type { 293 margin-left: 0px; 294 } 295 296 .reaction-emoji { 297 margin-right: 4px; 298 } 299 300 .action-bar button.icon { 301 transition: opacity 0.3s linear; 302 } 303 .action-bar button.icon:hover { 304 opacity: 1; 305 } 306 .action-bar button.heart:hover { 307 /* TODO fix heart color */ 308 } 309 310 details.cw summary { 311 cursor: pointer; 312 outline: none; 313 margin-bottom: 10px; 314 } 315 316 /* Thread Expansion */ 317 .thread-collapsed { 318 padding: 7px; 319 } 320 .thread-summary { 321 text-align: center; 322 } 323 .thread-summary img.icon { 324 opacity: 0.6; 325 position: relative; 326 top: 1px; 327 } 328 329 /* Modal */ 330 .modal { 331 position: fixed; 332 z-index: var(--zModal); 333 left: 0; 334 top: 0; 335 width: 100%; 336 height: 100%; 337 background: rgba(0,0,0,0.4); 338 opacity: 1; 339 transition: opacity 0.2s linear; 340 } 341 .modal.closed { 342 opacity: 0; 343 pointer-events: none; 344 } 345 .modal-content { 346 padding: 20px; 347 overflow: auto; 348 border-radius: 15px; 349 background: var(--clrPanel); 350 max-width: 700px; 351 margin: 0 auto; 352 margin-top: 35px; 353 } 354 .modal header { 355 display: flex; 356 } 357 .modal header label { 358 font-weight: 800; 359 font-size: var(--fsEnlarged); 360 flex: 1; 361 } 362 .modal header button { 363 font-size: 24px; 364 } 365 366 /* Post & Reply */ 367 #newpost { 368 padding: 0px 15px 15px; 369 display: flex; 370 flex-direction: row; 371 border-bottom: solid 1px var(--clrBorder); 372 } 373 #newpost > :first-child { 374 width: 64px; 375 } 376 #newpost > :last-child { 377 padding-left: 15px; 378 flex: 1; 379 } 380 textarea.post-input { 381 display: block; 382 width: 100%; 383 border: none; 384 background: transparent; 385 color: var(--clrText); 386 font-size: var(--fsEnlarged); 387 font-family: var(--ffDefault); 388 margin: 10px 0; 389 padding: 0; 390 box-sizing: border-box; 391 resize: vertical; 392 } 393 394 .post-tools { 395 text-align: right; 396 } 397 .post-tools > button.icon { 398 margin-right: 10px; 399 opacity: 0.5; 400 } 401 .post-tools > button.icon.cw.active { 402 opacity: 1.0; 403 } 404 input[type="text"].cw { 405 border: none; 406 border-bottom: solid 2px var(--clrWarn); 407 font-size: var(--fsReduced); 408 background: transparent; 409 color: var(--clrText); 410 } 411 412 /* Profile */ 413 414 .pfp.jumbo { 415 width: 128px; 416 height: 128px; 417 } 418 [role="profile-info"] { 419 padding: 15px; 420 padding-top: 0; 421 } 422 .profile-tools { 423 flex: 1; 424 text-align: right; 425 } 426 .profile-tools > button { 427 vertical-align: middle; 428 } 429 .profile-tools > button.icon { 430 margin-right: 20px; 431 } 432 p[role="profile-desc"] { 433 margin-bottom: 0; 434 } 435 label[role="profile-nip5"] { 436 margin-top: 15px; 437 font-weight: 800; 438 display: block; 439 } 440 441 @media (prefers-color-scheme: dark) { 442 .icon.svg { 443 filter: invert(1); 444 } 445 } 446