jbc.lol / wafrn
unoffical wafrn mirror wafrn.net
atproto social-network activitypub
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix wafrn98 and wafrnverse

Gabriel Amador García 00520ef2 3393e236

+656 -645
packages/frontend/src/assets/img/wafrn98.webp

This is a binary file and will not be displayed.

packages/frontend/src/assets/img/wafrnverse.webp

This is a binary file and will not be displayed.

+653 -643
packages/frontend/src/assets/themes/wafrn98.css
··· 2 2 theme by vv0ltz 3 3 https://app.wafrn.net/blog/vv0ltz 4 4 */ 5 - /* EVERY BORDER SHOULD BE A SQUARE RAAAAHH */ 6 - *, 7 - .border-round-md { 8 - border-radius: 0px !important; 9 - } 5 + /* EVERY BORDER SHOULD BE A SQUARE RAAAAHH */ 6 + *, 7 + .border-round-md { 8 + border-radius: 0px !important; 9 + } 10 10 11 - :root { 11 + :root { 12 12 13 - /* ELEMENT VARIABLES */ 14 - --main-bgcolor: #008080; 13 + /* ELEMENT VARIABLES */ 14 + --main-bgcolor: #008080; 15 15 16 - --main-textcolor: black; 16 + --main-textcolor: black; 17 17 18 - --container-bordercolor: none; 18 + --container-bordercolor: none; 19 19 20 - --link-textcolor: #00f; 20 + --link-textcolor: #00f; 21 21 22 - --link-textcolor-hover: #00f; 22 + --link-textcolor-hover: #00f; 23 23 24 - --link-textcolor-visited: #452a73; 24 + --link-textcolor-visited: #452a73; 25 25 26 - --button-bgcolor: silver; 26 + --button-bgcolor: silver; 27 27 28 - --button-bgcolor-hover: silver; 28 + --button-bgcolor-hover: silver; 29 29 30 - --button-accent-color: navy; 30 + --button-accent-color: navy; 31 31 32 - --button-accent-color-hover: #00f; 32 + --button-accent-color-hover: #00f; 33 33 34 - --element-bgcolor: silver; 34 + --element-bgcolor: silver; 35 35 36 - --username-textcolor: #00f; 36 + --username-textcolor: #00f; 37 37 38 - --username-textcolor-hover: navy; 38 + --username-textcolor-hover: navy; 39 39 40 - --url-textcolor: navy; 40 + --url-textcolor: navy; 41 41 42 - --popup-textcolor: black; 42 + --popup-textcolor: black; 43 43 44 - --popup-bgcolor: silver; 44 + --popup-bgcolor: silver; 45 45 46 - --color-trans: none !important/*0.37s cubic-bezier(0.77, 0, 0.23, 1)*/; 46 + --color-trans: none !important 47 + /*0.37s cubic-bezier(0.77, 0, 0.23, 1)*/ 48 + ; 47 49 48 - --image-transoff: none !important/*0.37s cubic-bezier(0.88, 0.52, 0.48, 1)*/; 50 + --image-transoff: none !important 51 + /*0.37s cubic-bezier(0.88, 0.52, 0.48, 1)*/ 52 + ; 49 53 50 - --image-trans: none !important/*0.37s cubic-bezier(0.81, -0.19, 0.27, 0.34)*/; 54 + --image-trans: none !important 55 + /*0.37s cubic-bezier(0.81, -0.19, 0.27, 0.34)*/ 56 + ; 51 57 52 - --mat-sys-corner-large: 0px; 58 + --mat-sys-corner-large: 0px; 53 59 54 - --mat-sys-corner-extra-large: 0px; 60 + --mat-sys-corner-extra-large: 0px; 55 61 56 - --mat-sys-corner-extra-large-top: 0px; 62 + --mat-sys-corner-extra-large-top: 0px; 57 63 58 - --mat-sys-corner-large-end: 0px; 64 + --mat-sys-corner-large-end: 0px; 59 65 60 - --mat-sys-corner-extra-small: 0px; 66 + --mat-sys-corner-extra-small: 0px; 61 67 62 - --mat-sys-corner-extra-small-top: 0px; 68 + --mat-sys-corner-extra-small-top: 0px; 63 69 64 - --mat-sys-corner-full: 0px; 70 + --mat-sys-corner-full: 0px; 65 71 66 - --mat-sys-corner-large-start: 0px; 72 + --mat-sys-corner-large-start: 0px; 67 73 68 - --mat-sys-corner-large-top: 0px; 74 + --mat-sys-corner-large-top: 0px; 69 75 70 - --mat-sys-corner-medium: 0px; 76 + --mat-sys-corner-medium: 0px; 71 77 72 - --mat-sys-corner-small: 0px; 78 + --mat-sys-corner-small: 0px; 73 79 74 - --mat-sys-primary: #9a9a9a; 80 + --mat-sys-primary: #9a9a9a; 75 81 76 - --mat-sys-surface-variant: silver; 82 + --mat-sys-surface-variant: silver; 77 83 78 - --mat-sys-on-surface-variant: black; 84 + --mat-sys-on-surface-variant: black; 79 85 80 - --mat-sys-on-surface: black; 86 + --mat-sys-on-surface: black; 81 87 82 - --mat-sys-secondary-container: navy; 88 + --mat-sys-secondary-container: navy; 83 89 84 - --mat-sys-surface-container: silver; 90 + --mat-sys-surface-container: silver; 85 91 86 - --mat-sys-surface-container-high: silver; 92 + --mat-sys-surface-container-high: silver; 87 93 88 - --mat-sys-primary-container: #4c9de0; 94 + --mat-sys-primary-container: #4c9de0; 89 95 90 - --mat-sys-outline: #323232; 96 + --mat-sys-outline: #323232; 91 97 92 - --mat-sys-error: maroon; 98 + --mat-sys-error: maroon; 93 99 94 - --mat-sys-surface: silver; 100 + --mat-sys-surface: silver; 95 101 96 - --info-card-warning-background: #ff6b6b; 102 + --info-card-warning-background: #ff6b6b; 97 103 98 - --mat-sys-on-primary-container: var(--mat-sys-on-surface); 104 + --mat-sys-on-primary-container: var(--mat-sys-on-surface); 99 105 100 - --mat-sys-tertiary: #1084d0; 106 + --mat-sys-tertiary: #1084d0; 101 107 102 - --mat-sys-surface-container-highest: #1084d0; 103 - } 108 + --mat-sys-surface-container-highest: #1084d0; 109 + } 104 110 105 111 106 112 107 - /* BACKGROUND */ 108 - .mat-drawer-content, 109 - .mat-drawer-container { 110 - background-color: var(--main-bgcolor) !important; 111 - } 113 + /* BACKGROUND */ 114 + .mat-drawer-content, 115 + .mat-drawer-container { 116 + background-color: var(--main-bgcolor) !important; 117 + } 112 118 113 - /* LINKS */ 114 - a { 115 - color: var(--link-textcolor); 119 + /* LINKS */ 120 + a { 121 + color: var(--link-textcolor); 116 122 117 - transition: var(--color-trans); 118 - } 123 + transition: var(--color-trans); 124 + } 119 125 120 - a:visited { 121 - color: var(--link-textcolor-visited); 122 - outline: 1px dotted var(--link-textcolor-visited); 123 - } 126 + a:visited { 127 + color: var(--link-textcolor-visited); 128 + outline: 1px dotted var(--link-textcolor-visited); 129 + } 124 130 125 - a:hover { 126 - color: var(--link-textcolor-hover); 131 + a:hover { 132 + color: var(--link-textcolor-hover); 127 133 128 - transition: var(--color-trans); 129 - outline: 1px dotted var(--link-textcolor-hover); 130 - } 134 + transition: var(--color-trans); 135 + outline: 1px dotted var(--link-textcolor-hover); 136 + } 131 137 132 - a:active { 133 - color: var(--link-textcolor-hover); 134 - } 138 + a:active { 139 + color: var(--link-textcolor-hover); 140 + } 135 141 136 - /* RATIO BADGE */ 137 - .ratio-badge { 138 - color: white; 139 - } 142 + /* RATIO BADGE */ 143 + .ratio-badge { 144 + color: white; 145 + } 140 146 141 147 142 - /* BUTTONS - these may be overwritten by the class of the button, see below */ 143 - button { 144 - background-color: var(--button-bgcolor); 148 + /* BUTTONS - these may be overwritten by the class of the button, see below */ 149 + button { 150 + background-color: var(--button-bgcolor); 151 + 152 + border-color: var(--button-accent-color); 145 153 146 - border-color: var(--button-accent-color); 154 + border-style: solid; 147 155 148 - border-style: solid; 156 + border-width: 0px; 149 157 150 - border-width: 0px; 158 + border-radius: 3px; 151 159 152 - border-radius: 3px; 160 + color: var(--main-textcolor); 153 161 154 - color: var(--main-textcolor); 162 + transition: var(--color-trans); 163 + } 155 164 156 - transition: var(--color-trans); 157 - } 165 + button:hover { 166 + background-color: var(--button-bgcolor-hover); 158 167 159 - button:hover { 160 - background-color: var(--button-bgcolor-hover); 168 + color: var(button-accent-color); 161 169 162 - color: var(button-accent-color); 170 + border-color: var(--button-accent-color-hover); 163 171 164 - border-color: var(--button-accent-color-hover); 172 + border-style: solid; 165 173 166 - border-style: solid; 174 + border-width: 0px; 167 175 168 - border-width: 0px; 176 + border-radius: 3px; 169 177 170 - border-radius: 3px; 178 + transition: var(--color-trans); 179 + } 171 180 172 - transition: var(--color-trans); 173 - } 181 + button:active { 182 + background-color: var(--button-bgcolor-hover); 174 183 175 - button:active { 176 - background-color: var(--button-bgcolor-hover); 184 + color: var(--button-accent-color); 177 185 178 - color: var(--button-accent-color); 186 + border-color: var(--button-accent-color-hover); 179 187 180 - border-color: var(--button-accent-color-hover); 188 + border-style: solid; 181 189 182 - border-style: solid; 190 + border-width: 0px; 183 191 184 - border-width: 0px; 192 + border-radius: 3px; 185 193 186 - border-radius: 3px; 194 + transition: var(--color-trans); 187 195 188 - transition: var(--color-trans); 196 + box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080; 197 + } 189 198 190 - box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080; 191 - } 192 - .mat-mdc-raised-button:not(:disabled) { 193 - background: silver; 194 - box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 195 - border: none; 196 - border-radius: 0px; 197 - } 199 + .mat-mdc-raised-button:not(:disabled) { 200 + background: silver; 201 + box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 202 + border: none; 203 + border-radius: 0px; 204 + } 198 205 199 - .mat-mdc-menu-item:not([disabled]) { 200 - color: black; 201 - } 206 + .mat-mdc-menu-item:not([disabled]) { 207 + color: black; 208 + } 202 209 203 - /* .mat-mdc-checkbox .mat-internal-form-field { 210 + /* .mat-mdc-checkbox .mat-internal-form-field { 204 211 color: black; 205 212 } */ 206 - /* SIDE MENU */ 207 - .mat-drawer-inner-container { 208 - background: var(--element-bgcolor); 209 - } 213 + /* SIDE MENU */ 214 + .mat-drawer-inner-container { 215 + background: var(--element-bgcolor); 216 + } 210 217 211 218 212 219 213 - .menu-item-icon { 214 - color: var(--button-accent-color); 215 - } 220 + .menu-item-icon { 221 + color: var(--button-accent-color); 222 + } 216 223 217 - /* LOGO */ 218 - .instance-logo { 219 - content: url("https://cdn.wafrn.net/api/cache/?media=https%3A%2F%2Fmedia.wafrn.net%2F1744406752197_a2cbc3d0300270aa81ee9a6f2b5bfb94df612f5d_processed.webp"); 220 - height: 57px; 221 - } 224 + /* LOGO */ 225 + .instance-logo { 226 + content: url("/assets/img/wafrn98.webp"); 227 + height: 57px; 228 + } 222 229 223 - /* DASHBOARD TITLE */ 224 - div.wafrn-container.mx-1 { 225 - display: none; 230 + /* DASHBOARD TITLE */ 231 + div.wafrn-container.mx-1 { 232 + display: none; 226 233 227 - background-color: var(--main-bgcolor); 228 - } 234 + background-color: var(--main-bgcolor); 235 + } 229 236 230 - div.wafrn-container.mx-1 h3 { 231 - display: none; 237 + div.wafrn-container.mx-1 h3 { 238 + display: none; 232 239 233 - font-family: Arial, sans-serif; 240 + font-family: Arial, sans-serif; 234 241 235 - text-rendering: optimizeLegibility; 236 - } 242 + text-rendering: optimizeLegibility; 243 + } 237 244 238 - /* BUTTONS - use these i think */ 239 - .mat-mdc-unelevated-button.mat-primary { 240 - background-color: var(--button-bgcolor); 245 + /* BUTTONS - use these i think */ 246 + .mat-mdc-unelevated-button.mat-primary { 247 + background-color: var(--button-bgcolor); 241 248 242 - border-color: var(--button-accent-color); 249 + border-color: var(--button-accent-color); 243 250 244 - border-width: 0px; 251 + border-width: 0px; 245 252 246 - color: var(--main-textcolor); 253 + color: var(--main-textcolor); 247 254 248 - transition: var(--color-trans); 255 + transition: var(--color-trans); 249 256 250 - border-radius: 0; 257 + border-radius: 0; 251 258 252 - box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 253 - } 259 + box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 260 + } 254 261 255 - .mat-mdc-unelevated-button.mat-primary:hover { 256 - background-color: var(--button-bgcolor-hover); 262 + .mat-mdc-unelevated-button.mat-primary:hover { 263 + background-color: var(--button-bgcolor-hover); 257 264 258 - border-color: var(--button-accent-color-hover); 265 + border-color: var(--button-accent-color-hover); 259 266 260 - color: var(--main-textcolor); 267 + color: var(--main-textcolor); 261 268 262 - border-width: 0px; 269 + border-width: 0px; 263 270 264 - transition: var(--color-trans); 271 + transition: var(--color-trans); 265 272 266 - border-radius: 0; 273 + border-radius: 0; 267 274 268 - box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 269 - } 275 + box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 276 + } 270 277 271 - .mat-mdc-unelevated-button { 272 - background-color: var(--button-bgcolor); 278 + .mat-mdc-unelevated-button { 279 + background-color: var(--button-bgcolor); 273 280 274 - border-color: var(--button-accent-color); 281 + border-color: var(--button-accent-color); 275 282 276 - border-width: 0px; 283 + border-width: 0px; 277 284 278 - color: var(--main-textcolor); 285 + color: var(--main-textcolor); 279 286 280 - transition: var(--color-trans); 287 + transition: var(--color-trans); 281 288 282 - border-radius: 0; 289 + border-radius: 0; 283 290 284 - box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 285 - } 291 + box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 292 + } 286 293 287 - .mat-mdc-unelevated-button:hover { 288 - background-color: var(--button-bgcolor-hover); 294 + .mat-mdc-unelevated-button:hover { 295 + background-color: var(--button-bgcolor-hover); 289 296 290 - border-color: var(--button-accent-color-hover); 297 + border-color: var(--button-accent-color-hover); 291 298 292 - color: var(--main-textcolor); 299 + color: var(--main-textcolor); 293 300 294 - border-width: 0px; 301 + border-width: 0px; 295 302 296 - transition: var(--color-trans); 303 + transition: var(--color-trans); 297 304 298 - border-radius: 0; 305 + border-radius: 0; 299 306 300 - box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 301 - } 307 + box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 308 + } 302 309 303 - button[aria-label="Go back to the dashboard"] { 304 - background-color: var(--button-bgcolor); 310 + button[aria-label="Go back to the dashboard"] { 311 + background-color: var(--button-bgcolor); 305 312 306 - border-color: var(--button-accent-color); 313 + border-color: var(--button-accent-color); 307 314 308 - color: var(--main-textcolor); 315 + color: var(--main-textcolor); 309 316 310 - transition: var(--color-trans); 311 - } 317 + transition: var(--color-trans); 318 + } 312 319 313 - button[aria-label="Go back to the dashboard"]:hover { 314 - background-color: var(--button-bgcolor-hover); 320 + button[aria-label="Go back to the dashboard"]:hover { 321 + background-color: var(--button-bgcolor-hover); 315 322 316 - border-color: var(--button-accent-color-hover); 323 + border-color: var(--button-accent-color-hover); 317 324 318 - color: var(--main-textcolor); 325 + color: var(--main-textcolor); 319 326 320 - transition: var(--color-trans); 321 - } 327 + transition: var(--color-trans); 328 + } 322 329 323 - /* LOADING - not quite sure this works */ 324 - mat-spinner { 325 - width: 42px; 330 + /* LOADING - not quite sure this works */ 331 + mat-spinner { 332 + width: 42px; 326 333 327 - height: 42px; 328 - } 334 + height: 42px; 335 + } 329 336 330 - circle { 331 - color: black !important; 337 + circle { 338 + color: black !important; 332 339 333 - stroke-dasharray: 77px; 340 + stroke-dasharray: 77px; 334 341 335 - stroke-width: 33px; 336 - } 342 + stroke-width: 33px; 343 + } 337 344 338 - p#if-you-see-this-load-more-posts { 339 - color: var(--main-textcolor); 340 - } 345 + p#if-you-see-this-load-more-posts { 346 + color: var(--main-textcolor); 347 + } 341 348 342 - /* POPUP TOOLTIPS */ 343 - .mdc-tooltip__surface { 344 - background-color: var(--popup-bgcolor) !important; 349 + /* POPUP TOOLTIPS */ 350 + .mdc-tooltip__surface { 351 + background-color: var(--popup-bgcolor) !important; 345 352 346 - color: var(--popup-textcolor) !important; 353 + color: var(--popup-textcolor) !important; 347 354 348 - border-radius: 2px; 349 - } 355 + border-radius: 2px; 356 + } 350 357 351 - /* UNIVERSAL WAFRN CONTAINER */ 352 - .wafrn-container { 353 - background-color: var(--element-bgcolor) !important; 358 + /* UNIVERSAL WAFRN CONTAINER */ 359 + .wafrn-container { 360 + background-color: var(--element-bgcolor) !important; 354 361 355 - color: var(--main-textcolor); 362 + color: var(--main-textcolor); 356 363 357 - border-radius: 0px; 364 + border-radius: 0px; 358 365 359 - border-width: 0px; 366 + border-width: 0px; 360 367 361 - border-style: solid; 368 + border-style: solid; 362 369 363 - border-color: var(--container-bordercolor); 370 + border-color: var(--container-bordercolor); 364 371 365 - box-shadow: none; 366 - } 372 + box-shadow: none; 373 + } 367 374 368 - /* OTHER CONTAINERS (except left sidebar) */ 369 - .p-3 { 370 - background: var(--element-bgcolor); 371 - } 375 + /* OTHER CONTAINERS (except left sidebar) */ 376 + .p-3 { 377 + background: var(--element-bgcolor); 378 + } 372 379 373 - .mat-mdc-table { 374 - background: var(--element-bgcolor) !important; 375 - } 380 + .mat-mdc-table { 381 + background: var(--element-bgcolor) !important; 382 + } 376 383 377 - .mat-mdc-table .mat-mdc-header-cell { 378 - color: var(--main-textcolor); 379 - } 384 + .mat-mdc-table .mat-mdc-header-cell { 385 + color: var(--main-textcolor); 386 + } 380 387 381 - .embed-text { 382 - color: var(--link-textcolor); 383 - } 388 + .embed-text { 389 + color: var(--link-textcolor); 390 + } 384 391 385 - .mat-mdc-paginator { 386 - background: silver; 387 - } 392 + .mat-mdc-paginator { 393 + background: silver; 394 + } 388 395 389 - .mat-expansion-panel { 390 - background: silver; 391 - } 396 + .mat-expansion-panel { 397 + background: silver; 398 + } 392 399 393 - .mat-expansion-panel:not([class*="mat-elevation-z"]) { 394 - box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 395 - border-radius: 0 !important; 396 - } 400 + .mat-expansion-panel:not([class*="mat-elevation-z"]) { 401 + box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 402 + border-radius: 0 !important; 403 + } 397 404 398 - .info-card.info { 399 - background: var(--element-bgcolor) !important; 400 - box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 401 - margin-top: 1rem; 402 - } 405 + .info-card.info { 406 + background: var(--element-bgcolor) !important; 407 + box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 408 + margin-top: 1rem; 409 + } 403 410 404 - .mb-2 { 405 - padding-left: 0 !important; 406 - } 411 + .mb-2 { 412 + padding-left: 0 !important; 413 + } 407 414 408 - app-notifications .post-card hr { 409 - border-color: silver; 410 - } 415 + app-notifications .post-card hr { 416 + border-color: silver; 417 + } 411 418 412 - app-settings .wafrn-container-wide { 413 - background: var(--element-bgcolor); 419 + app-settings .wafrn-container-wide { 420 + background: var(--element-bgcolor); 414 421 415 - padding: 1rem; 422 + padding: 1rem; 416 423 417 - box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff; 418 - } 424 + box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff; 425 + } 419 426 420 - app-settings .mdc-text-field--filled:not(.mdc-text-field--disabled) { 421 - background: white; 427 + app-settings .mdc-text-field--filled:not(.mdc-text-field--disabled) { 428 + background: white; 422 429 423 - box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; 430 + box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; 424 431 425 - border: none !important; 426 - } 432 + border: none !important; 433 + } 427 434 428 - .setting-header, 429 - app-settings h2 { 430 - color: var(--main-textcolor); 431 - } 435 + .setting-header, 436 + app-settings h2 { 437 + color: var(--main-textcolor); 438 + } 432 439 433 - /* PROFILE */ 434 - /* 440 + /* PROFILE */ 441 + /* 435 442 436 443 app-view-blog mat-card.wafrn-container {} 437 444 438 445 app-view-blog img[alt="user avatar"] {} 439 446 440 447 */ 441 - /* UNFOLLOW BUTTON */ 442 - .mat-mdc-unelevated-button.mat-warn { 443 - color: var(--main-textcolor); 448 + /* UNFOLLOW BUTTON */ 449 + .mat-mdc-unelevated-button.mat-warn { 450 + color: var(--main-textcolor); 444 451 445 - background-color: #f44336; 452 + background-color: #f44336; 446 453 447 - transition: var(--color-trans); 448 - } 454 + transition: var(--color-trans); 455 + } 449 456 450 - .mat-mdc-unelevated-button.mat-warn:hover { 451 - background-color: #f44336; 457 + .mat-mdc-unelevated-button.mat-warn:hover { 458 + background-color: #f44336; 452 459 453 - transition: var(--color-trans); 454 - } 460 + transition: var(--color-trans); 461 + } 455 462 456 - /* FOLLOW COUNT */ 457 - /* 463 + /* FOLLOW COUNT */ 464 + /* 458 465 459 466 div.follow-counts {} 460 467 461 468 */ 462 - /* TEXT EDITOR */ 463 - :root .below-editor-toolbar { 464 - --mat-icon-button-icon-color: var(--mat-sys-on-surface); 465 - } 469 + /* TEXT EDITOR */ 470 + :root .below-editor-toolbar { 471 + --mat-icon-button-icon-color: var(--mat-sys-on-surface); 472 + } 466 473 467 - /* CREATE POST */ 468 - :root .mat-mdc-dialog-inner-container { 469 - --mat-sys-primary: #6b6b6b; 474 + /* CREATE POST */ 475 + :root .mat-mdc-dialog-inner-container { 476 + --mat-sys-primary: #6b6b6b; 470 477 471 - --mat-sys-on-surface-variant: black; 478 + --mat-sys-on-surface-variant: black; 472 479 473 - --mat-sys-on-surface: black; 474 - } 480 + --mat-sys-on-surface: black; 481 + } 475 482 476 483 477 484 478 485 479 - /* POSTS */ 480 - /* POST CONTAINER */ 481 - .mat-mdc-card { 482 - color: var(--main-textcolor); 486 + /* POSTS */ 487 + /* POST CONTAINER */ 488 + .mat-mdc-card { 489 + color: var(--main-textcolor); 483 490 484 - border-radius: 2px; 491 + border-radius: 2px; 485 492 486 - border-color: var(--button-accent-color); 493 + border-color: var(--button-accent-color); 487 494 488 - box-shadow: none; 495 + box-shadow: none; 489 496 490 - background: var(--element-bgcolor); 491 - } 497 + background: var(--element-bgcolor); 498 + } 492 499 493 - .mat-mdc-card::after { 494 - border: none; 495 - border-radius: 0; 496 - box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff; 497 - } 500 + .mat-mdc-card::after { 501 + border: none; 502 + border-radius: 0; 503 + box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff; 504 + } 498 505 499 - /* PROFILE TABS */ 500 - .mdc-tab { 501 - box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 506 + /* PROFILE TABS */ 507 + .mdc-tab { 508 + box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 502 509 503 - background-color: var(--element-bgcolor) !important; 504 - } 510 + background-color: var(--element-bgcolor) !important; 511 + } 505 512 506 - .mdc-tab[aria-selected="true"] { 507 - box-shadow: inset -1px 0 #0a0a0a, inset 1px 1px #dfdfdf, inset -2px 0 grey, inset 2px 2px #fff; 508 - } 513 + .mdc-tab[aria-selected="true"] { 514 + box-shadow: inset -1px 0 #0a0a0a, inset 1px 1px #dfdfdf, inset -2px 0 grey, inset 2px 2px #fff; 515 + } 509 516 510 - /* DIVIDER LINE */ 511 - app-post hr { 512 - color: var(--element-bgcolor); 517 + /* DIVIDER LINE */ 518 + app-post hr { 519 + color: var(--element-bgcolor); 513 520 514 - border: 0px; 515 - } 521 + border: 0px; 522 + } 516 523 517 - /* POSTER INFO */ 518 - .original-poster-name { 519 - color: var(--username-textcolor) !important; 524 + /* POSTER INFO */ 525 + .original-poster-name { 526 + color: var(--username-textcolor) !important; 520 527 521 - transition: var(--color-trans); 522 - } 528 + transition: var(--color-trans); 529 + } 523 530 524 - .original-poster-name:hover { 525 - color: var(--username-textcolor-hover) !important; 531 + .original-poster-name:hover { 532 + color: var(--username-textcolor-hover) !important; 526 533 527 - transition: var(--color-trans); 528 - } 534 + transition: var(--color-trans); 535 + } 529 536 530 - .original-poster-url { 531 - color: var(--url-textcolor); 537 + .original-poster-url { 538 + color: var(--url-textcolor); 532 539 533 - font-family: Arial, sans-serif; 540 + font-family: Arial, sans-serif; 534 541 535 - text-rendering: optimizeLegibility; 536 - } 542 + text-rendering: optimizeLegibility; 543 + } 537 544 538 - .avatar { 539 - height: 45px; 545 + .avatar { 546 + height: 45px; 540 547 541 - width: 45px; 542 - } 548 + width: 45px; 549 + } 543 550 544 - .avatar img { 545 - border-radius: 3px; 551 + .avatar img { 552 + border-radius: 3px; 546 553 547 - height: 45px; 554 + height: 45px; 548 555 549 - width: 45px; 550 - } 556 + width: 45px; 557 + } 551 558 552 - .user-name { 553 - color: var(--username-textcolor) !important; 559 + .user-name { 560 + color: var(--username-textcolor) !important; 554 561 555 - transition: var(--color-trans); 556 - } 562 + transition: var(--color-trans); 563 + } 557 564 558 - .user-name:hover { 559 - color: var(--username-textcolor-hover) !important; 565 + .user-name:hover { 566 + color: var(--username-textcolor-hover) !important; 560 567 561 - transition: var(--color-trans); 562 - } 568 + transition: var(--color-trans); 569 + } 563 570 564 - span.user-url { 565 - color: #00f; 571 + span.user-url { 572 + color: #00f; 566 573 567 - font-family: Arial, sans-serif; 574 + font-family: Arial, sans-serif; 568 575 569 - text-rendering: optimizeLegibility; 570 - } 576 + text-rendering: optimizeLegibility; 577 + } 571 578 572 - /* FOLLOW BUTTON */ 573 - button.follow-button { 574 - background: none !important; 579 + /* FOLLOW BUTTON */ 580 + button.follow-button { 581 + background: none !important; 575 582 576 - color: #00f!important; 583 + color: #00f !important; 577 584 578 - border: none !important; 585 + border: none !important; 579 586 580 - transition: var(--color-trans); 581 - } 587 + transition: var(--color-trans); 588 + } 582 589 583 - button.follow-button:hover { 584 - background: none !important; 590 + button.follow-button:hover { 591 + background: none !important; 585 592 586 - color: var(--link-textcolor-hover) !important; 593 + color: var(--link-textcolor-hover) !important; 587 594 588 - border: none !important; 595 + border: none !important; 589 596 590 - transition: var(--color-trans); 591 - } 597 + transition: var(--color-trans); 598 + } 592 599 593 - .mat-mdc-button-persistent-ripple { 594 - display: none; 595 - } 600 + .mat-mdc-button-persistent-ripple { 601 + display: none; 602 + } 596 603 597 - /* NOTES BUTTON */ 598 - .mat-mdc-outlined-button:not(:disabled) { 599 - border-radius: 0; 600 - color: black; 601 - box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 602 - } 604 + /* NOTES BUTTON */ 605 + .mat-mdc-outlined-button:not(:disabled) { 606 + border-radius: 0; 607 + color: black; 608 + box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 609 + } 603 610 604 - .mat-mdc-outlined-button:active { 605 - box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080; 606 - } 611 + .mat-mdc-outlined-button:active { 612 + box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080; 613 + } 607 614 608 - .mdc-button .mdc-button__label { 609 - color: black; 610 - } 615 + .mdc-button .mdc-button__label { 616 + color: black; 617 + } 611 618 612 - /* POST DATE */ 613 - /* 619 + /* POST DATE */ 620 + /* 614 621 615 622 div.date-line {} 616 623 617 624 svg.fa-globe {} 618 625 619 626 */ 620 - /* POST SHARE */ 621 - app-post-actions button:hover { 622 - background: none !important; 627 + /* POST SHARE */ 628 + app-post-actions button:hover { 629 + background: none !important; 623 630 624 - border-width: 0px; 625 - } 631 + border-width: 0px; 632 + } 626 633 627 - svg.fa-share-nodes { 628 - color: var(--button-accent-color); 634 + svg.fa-share-nodes { 635 + color: var(--button-accent-color); 629 636 630 - transition: var(--color-trans); 631 - } 637 + transition: var(--color-trans); 638 + } 632 639 633 - svg.fa-share-nodes:hover { 634 - color: var(--button-accent-color-hover); 640 + svg.fa-share-nodes:hover { 641 + color: var(--button-accent-color-hover); 635 642 636 - transition: var(--color-trans); 637 - } 643 + transition: var(--color-trans); 644 + } 638 645 639 - svg.fa-chevron-down { 640 - color: var(--button-accent-color); 646 + svg.fa-chevron-down { 647 + color: var(--button-accent-color); 641 648 642 - transition: var(--color-trans); 643 - } 649 + transition: var(--color-trans); 650 + } 644 651 645 - svg.fa-chevron-down:hover { 646 - color: var(--button-accent-color-hover); 652 + svg.fa-chevron-down:hover { 653 + color: var(--button-accent-color-hover); 647 654 648 - transition: var(--color-trans); 649 - } 655 + transition: var(--color-trans); 656 + } 650 657 651 - /* CONTENT WARNING */ 652 - #fragment-content-warning { 653 - color: var(--main-textcolor); 658 + /* CONTENT WARNING */ 659 + #fragment-content-warning { 660 + color: var(--main-textcolor); 654 661 655 - font-family: Arial, sans-serif; 662 + font-family: Arial, sans-serif; 656 663 657 - text-rendering: optimizeLegibility; 658 - } 664 + text-rendering: optimizeLegibility; 665 + } 659 666 660 - /* 667 + /* 661 668 662 669 div.fragment-content-warning div.fragment-content {} 663 670 664 671 div.fragment-content-warning button {} 665 672 666 673 */ 667 - /* Post ask*/ 668 - :root .ask-user { 669 - color: var(--mat-sys-on-surface); 670 - } 671 - /* POST TEXT */ 672 - div.wafrn-text-default { 673 - color: var(--main-textcolor); 674 + /* Post ask*/ 675 + :root .ask-user { 676 + color: var(--mat-sys-on-surface); 677 + } 674 678 675 - font-family: Arial, sans-serif; 679 + /* POST TEXT */ 680 + div.wafrn-text-default { 681 + color: var(--main-textcolor); 676 682 677 - text-rendering: optimizeLegibility; 678 - } 683 + font-family: Arial, sans-serif; 679 684 680 - /* MENTIONS */ 681 - :root .mention { 682 - border-radius: 0; 683 - color: white; 684 - } 685 + text-rendering: optimizeLegibility; 686 + } 685 687 686 - a.mention { 687 - color: white; 688 + /* MENTIONS */ 689 + :root .mention { 690 + border-radius: 0; 691 + color: white; 692 + } 688 693 689 - transition: var(--color-trans); 690 - } 694 + a.mention { 695 + color: white; 691 696 692 - a.mention:hover { 693 - color: white; 697 + transition: var(--color-trans); 698 + } 694 699 695 - transition: var(--color-trans); 696 - } 700 + a.mention:hover { 701 + color: white; 697 702 698 - /* MEDIA CONTAINER */ 699 - .media-gallery { 700 - max-width: 100% !important; 703 + transition: var(--color-trans); 704 + } 701 705 702 - height: 100% !important; 706 + /* MEDIA CONTAINER */ 707 + .media-gallery { 708 + max-width: 100% !important; 703 709 704 - display: block; 710 + height: 100% !important; 705 711 706 - margin-left: auto; 712 + display: block; 707 713 708 - margin-right: auto; 709 - } 714 + margin-left: auto; 710 715 711 - /* IMAGES */ 712 - app-wafrn-media img { 713 - filter: brightness(1); 716 + margin-right: auto; 717 + } 718 + 719 + /* IMAGES */ 720 + app-wafrn-media img { 721 + filter: brightness(1); 714 722 715 - transition: var(--image-transoff); 716 - } 723 + transition: var(--image-transoff); 724 + } 717 725 718 - app-wafrn-media img:hover { 719 - filter: brightness(1); 726 + app-wafrn-media img:hover { 727 + filter: brightness(1); 720 728 721 - transition: var(--image-trans); 722 - } 729 + transition: var(--image-trans); 730 + } 723 731 724 732 725 - /* MEDIA DESCRIPTION */ 726 - app-wafrn-media div.media-description { 727 - background-color: var(--element-bgcolor) !important; 733 + /* MEDIA DESCRIPTION */ 734 + app-wafrn-media div.media-description { 735 + background-color: var(--element-bgcolor) !important; 728 736 729 - border-radius: 0px; 737 + border-radius: 0px; 730 738 731 - font-family: Arial, sans-serif; 739 + font-family: Arial, sans-serif; 732 740 733 - text-rendering: optimizeLegibility; 741 + text-rendering: optimizeLegibility; 734 742 735 - font-size: 11px; 736 - } 743 + font-size: 11px; 744 + } 737 745 738 - /* VOTING */ 739 - /* 746 + /* VOTING */ 747 + /* 740 748 741 749 .mdc-linear-progress__bar-inner {} 742 750 743 751 .mdc-linear-progress__buffer-bar {} 744 752 745 753 */ 746 - /* TAGS */ 747 - .woot-tagfield, .woot-tagfield mat-label { 748 - background-color: var(--element-bgcolor) !important; 749 - outline: none !important; 750 - } 751 - 752 - .tag-list { 753 - gap: 0.25rem; 754 - padding-inline: 6px; 755 - } 754 + /* TAGS */ 755 + .woot-tagfield, 756 + .woot-tagfield mat-label { 757 + background-color: var(--element-bgcolor) !important; 758 + outline: none !important; 759 + } 756 760 757 - a.tag { 758 - background-color: silver !important; 761 + .tag-list { 762 + gap: 0.25rem; 763 + padding-inline: 6px; 764 + } 759 765 760 - background-image: linear-gradient(in oklab to right, var(--gradient-colors-dark)); 766 + a.tag { 767 + background-color: silver !important; 761 768 762 - transition: var(--color-trans); 769 + background-image: linear-gradient(in oklab to right, var(--gradient-colors-dark)); 763 770 764 - font-family: Arial, sans-serif; 771 + transition: var(--color-trans); 765 772 766 - text-rendering: optimizeLegibility; 773 + font-family: Arial, sans-serif; 767 774 768 - box-shadow: inset -2px -2px #0a0a0a, inset 1px 1px #0a0a0a, inset 2px 2px #fff, inset -3px -3px grey, inset 3px 3px #dfdfdf; 775 + text-rendering: optimizeLegibility; 769 776 770 - border-radius: 0; 771 - } 777 + box-shadow: inset -2px -2px #0a0a0a, inset 1px 1px #0a0a0a, inset 2px 2px #fff, inset -3px -3px grey, inset 3px 3px #dfdfdf; 772 778 773 - a.tag .tag-text { 774 - color: var(--link-textcolor); 775 - } 779 + border-radius: 0; 780 + } 776 781 777 - a.tag:hover { 778 - color: var(--link-textcolor-hover) !important; 782 + a.tag .tag-text { 783 + color: var(--link-textcolor); 784 + } 779 785 780 - transition: var(--color-trans); 781 - } 786 + a.tag:hover { 787 + color: var(--link-textcolor-hover) !important; 782 788 783 - a.tag:active { 784 - box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080; 785 - } 789 + transition: var(--color-trans); 790 + } 786 791 787 - /* QUOTE POSTS */ 788 - /* Button in quotes */ 789 - .quoted-post .mat-mdc-button-touch-target { 790 - background: var(--button-bgcolor); 791 - box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 792 - } 792 + a.tag:active { 793 + box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080; 794 + } 793 795 794 - /* container of quoted post */ 795 - .quoted-post.quote-collapsed::before { 796 + /* QUOTE POSTS */ 797 + /* Button in quotes */ 798 + .quoted-post .mat-mdc-button-touch-target { 799 + background: var(--button-bgcolor); 800 + box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 801 + } 796 802 797 - box-shadow: none !important; 798 - } 803 + /* container of quoted post */ 804 + .quoted-post.quote-collapsed::before { 799 805 800 - div.quoted-post { 801 - border: 0 !important; 806 + box-shadow: none !important; 807 + } 802 808 803 - border-radius: 0; 809 + div.quoted-post { 810 + border: 0 !important; 804 811 805 - background: white; 812 + border-radius: 0; 806 813 807 - box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a !important; 808 - } 814 + background: white; 809 815 810 - /* CODE CONTAINER IN A POST */ 811 - pre { 816 + box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a !important; 817 + } 812 818 813 - background-color: white !important; 819 + /* CODE CONTAINER IN A POST */ 820 + pre { 814 821 815 - box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a !important; 822 + background-color: white !important; 816 823 817 - border: 0 !important; 818 - } 824 + box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a !important; 819 825 820 - /* REACTS */ 821 - .emoji-container { 822 - background-color: var(--element-bgcolor); 826 + border: 0 !important; 827 + } 823 828 824 - color: var(--main-textcolor); 825 - } 829 + /* REACTS */ 830 + .emoji-container { 831 + background-color: var(--element-bgcolor); 826 832 827 - #emoji-reactions button { 828 - background-color: var(--element-bgcolor); 833 + color: var(--main-textcolor); 834 + } 829 835 830 - border-width: 0px !important; 836 + #emoji-reactions button { 837 + background-color: var(--element-bgcolor); 831 838 832 - transition: var(--color-trans); 839 + border-width: 0px !important; 833 840 834 - fill: var(--main-textcolor); 835 - } 841 + transition: var(--color-trans); 836 842 837 - #emoji-reactions button:hover { 838 - background-color: var(--button-bgcolor-hover); 843 + fill: var(--main-textcolor); 844 + } 845 + 846 + #emoji-reactions button:hover { 847 + background-color: var(--button-bgcolor-hover); 839 848 840 - transition: var(--color-trans); 849 + transition: var(--color-trans); 841 850 842 - fill: var(--main-textcolor); 843 - } 851 + fill: var(--main-textcolor); 852 + } 844 853 845 - #emoji-reactions button:disabled, 846 - button[disabled] { 847 - text-shadow: 1px 1px 0 #fff; 854 + #emoji-reactions button:disabled, 855 + button[disabled] { 856 + text-shadow: 1px 1px 0 #fff; 848 857 849 - box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf !important; 858 + box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf !important; 850 859 851 - background-color: var(--element-bgcolor) !important; 860 + background-color: var(--element-bgcolor) !important; 852 861 853 - opacity: 0.5; 854 - } 862 + opacity: 0.5; 863 + } 855 864 856 - .reacted { 857 - background-color: var(--element-bgcolor) !important; 865 + .reacted { 866 + background-color: var(--element-bgcolor) !important; 858 867 859 - box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080 !important; 860 - } 868 + box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080 !important; 869 + } 861 870 862 - /* 871 + /* 863 872 864 873 #emoji-reactions .mat-mdc-tooltip-trigger {} 865 874 866 875 #emoji-reactions .mat-mdc-tooltip-trigger:hover {} 867 876 868 877 */ 869 - app-emoji-react svg { 870 - fill: var(--main-textcolor); 878 + app-emoji-react svg { 879 + fill: var(--main-textcolor); 871 880 872 - transition: var(--color-trans); 873 - } 881 + transition: var(--color-trans); 882 + } 874 883 875 - app-emoji-react svg:hover { 876 - fill: var(--link-textcolor-hover); 884 + app-emoji-react svg:hover { 885 + fill: var(--link-textcolor-hover); 877 886 878 - transition: var(--color-trans); 879 - } 887 + transition: var(--color-trans); 888 + } 880 889 881 - /* 890 + /* 882 891 883 892 div.emojireact-overlay {} 884 893 885 894 */ 886 - /* POST ACTIONS */ 887 - /* 895 + /* POST ACTIONS */ 896 + /* 888 897 889 898 app-post hr > div a {} 890 899 891 900 app-post hr > div a:hover {} 892 901 893 902 */ 894 - fa-icon[mattooltip="Quote woot"] { 895 - color: var(--main-textcolor); 903 + fa-icon[mattooltip="Quote woot"] { 904 + color: var(--main-textcolor); 896 905 897 - transition: var(--color-trans); 898 - } 906 + transition: var(--color-trans); 907 + } 899 908 900 - fa-icon[mattooltip="Quote woot"]:hover { 901 - color: var(--main-textcolor); 909 + fa-icon[mattooltip="Quote woot"]:hover { 910 + color: var(--main-textcolor); 902 911 903 - transition: var(--color-trans); 904 - } 912 + transition: var(--color-trans); 913 + } 905 914 906 - fa-icon[mattooltip="Quick rewoot"] { 907 - color: var(--main-textcolor); 915 + fa-icon[mattooltip="Quick rewoot"] { 916 + color: var(--main-textcolor); 908 917 909 - transition: var(--color-trans); 910 - } 918 + transition: var(--color-trans); 919 + } 911 920 912 - fa-icon[mattooltip="Quick rewoot"]:hover { 913 - color: var(--main-textcolor); 921 + fa-icon[mattooltip="Quick rewoot"]:hover { 922 + color: var(--main-textcolor); 914 923 915 - transition: var(--color-trans); 916 - } 924 + transition: var(--color-trans); 925 + } 917 926 918 - fa-icon[mattooltip="Delete rewoot"] { 919 - color: var(--main-textcolor); 927 + fa-icon[mattooltip="Delete rewoot"] { 928 + color: var(--main-textcolor); 920 929 921 - transition: var(--color-trans); 922 - } 930 + transition: var(--color-trans); 931 + } 923 932 924 - fa-icon[mattooltip="Delete rewoot"]:hover { 925 - color: var(--main-textcolor); 933 + fa-icon[mattooltip="Delete rewoot"]:hover { 934 + color: var(--main-textcolor); 926 935 927 - transition: var(--color-trans); 928 - } 936 + transition: var(--color-trans); 937 + } 929 938 930 - fa-icon[mattooltip="Reply woot"] { 931 - color: var(--main-textcolor); 939 + fa-icon[mattooltip="Reply woot"] { 940 + color: var(--main-textcolor); 932 941 933 - transition: var(--color-trans); 934 - } 942 + transition: var(--color-trans); 943 + } 935 944 936 - fa-icon[mattooltip="Reply woot"]:hover { 937 - color: var(--main-textcolor); 945 + fa-icon[mattooltip="Reply woot"]:hover { 946 + color: var(--main-textcolor); 938 947 939 - transition: var(--color-trans); 940 - } 948 + transition: var(--color-trans); 949 + } 941 950 942 - fa-icon[mattooltip="Like woot"] { 943 - color: var(--main-textcolor); 951 + fa-icon[mattooltip="Like woot"] { 952 + color: var(--main-textcolor); 944 953 945 - transition: var(--color-trans); 946 - } 954 + transition: var(--color-trans); 955 + } 947 956 948 - fa-icon[mattooltip="Like woot"]:hover { 949 - color: var(--main-textcolor); 957 + fa-icon[mattooltip="Like woot"]:hover { 958 + color: var(--main-textcolor); 950 959 951 - transition: var(--color-trans); 952 - } 960 + transition: var(--color-trans); 961 + } 953 962 954 - fa-icon[mattooltip="Remove like"] { 955 - color: var(--main-textcolor); 963 + fa-icon[mattooltip="Remove like"] { 964 + color: var(--main-textcolor); 956 965 957 - transition: var(--color-trans); 958 - } 966 + transition: var(--color-trans); 967 + } 959 968 960 - fa-icon[mattooltip="Remove like"]:hover { 961 - color: var(--main-textcolor); 969 + fa-icon[mattooltip="Remove like"]:hover { 970 + color: var(--main-textcolor); 962 971 963 - transition: var(--color-trans); 964 - } 972 + transition: var(--color-trans); 973 + } 965 974 966 - fa-icon[mattooltip="Delete woot"] { 967 - color: var(--main-textcolor); 975 + fa-icon[mattooltip="Delete woot"] { 976 + color: var(--main-textcolor); 968 977 969 - transition: var(--color-trans); 970 - } 978 + transition: var(--color-trans); 979 + } 971 980 972 - fa-icon[mattooltip="Delete woot"]:hover { 973 - color: var(--main-textcolor); 981 + fa-icon[mattooltip="Delete woot"]:hover { 982 + color: var(--main-textcolor); 983 + 984 + transition: var(--color-trans); 985 + } 974 986 975 - transition: var(--color-trans); 976 - } 987 + /* The specific part below has a problem causing white on silver text when you go inside the post and see rewoots, the code below applies effect on the feed and notifications rather than opened posts. If you have ideas how to solve this I'll be glad */ 988 + /* "USER REWOOTED/REPLIED POST DIV" */ 989 + .nudge-left { 990 + background: linear-gradient(90deg, navy, #1084d0); 991 + margin-left: -0.9rem !important; 992 + margin-right: -0.9rem; 993 + margin-top: -0.65rem; 994 + padding-left: 1rem; 995 + padding-right: 1rem; 996 + padding-top: 5px; 997 + padding-bottom: 5px; 998 + } 977 999 978 - /* The specific part below has a problem causing white on silver text when you go inside the post and see rewoots, the code below applies effect on the feed and notifications rather than opened posts. If you have ideas how to solve this I'll be glad */ 979 - /* "USER REWOOTED/REPLIED POST DIV" */ 980 - .nudge-left { 981 - background: linear-gradient(90deg, navy, #1084d0); 982 - margin-left: -0.9rem !important; 983 - margin-right: -0.9rem; 984 - margin-top: -0.65rem; 985 - padding-left: 1rem; 986 - padding-right: 1rem; 987 - padding-top: 5px; 988 - padding-bottom: 5px; 989 - } 990 - .nudge-left .user-name, 991 - .post-action, 992 - .ribbon-date, 993 - .ribbon-icon { 994 - color: white !important; 995 - } 1000 + .nudge-left .user-name, 1001 + .post-action, 1002 + .ribbon-date, 1003 + .ribbon-icon { 1004 + color: white !important; 1005 + } 996 1006 997 1007 998 1008 999 - /* IMAGE CW TEXT BACKGROUND, AUDIO */ 1000 - .image-cw-text, 1001 - .v-container, 1002 - .v-media, 1003 - .v-media > iframe { 1004 - background: #808080 !important; 1005 - } 1009 + /* IMAGE CW TEXT BACKGROUND, AUDIO */ 1010 + .image-cw-text, 1011 + .v-container, 1012 + .v-media, 1013 + .v-media>iframe { 1014 + background: #808080 !important; 1015 + } 1006 1016 1007 - :root .footer-links a { 1008 - color: var(--mat-sys-on-surface); 1009 - } 1017 + :root .footer-links a { 1018 + color: var(--mat-sys-on-surface); 1019 + } 1010 1020 1011 - /* Bottom Toolbar */ 1012 - .wafrn-toolbar { 1013 - border-top: 2px outset; 1014 - } 1021 + /* Bottom Toolbar */ 1022 + .wafrn-toolbar { 1023 + border-top: 2px outset; 1024 + } 1015 1025 1016 - :root .new-woot-button { 1017 - --mat-sys-on-primary: silver; 1018 - --mat-sys-primary: navy; 1019 - } 1026 + :root .new-woot-button { 1027 + --mat-sys-on-primary: silver; 1028 + --mat-sys-primary: navy; 1029 + }
+3 -2
packages/frontend/src/assets/themes/wafrnverse.css
··· 98 98 /* WAFRN LOGO --------------------------------------------------------------- */ 99 99 .instance-logo { 100 100 /* filter: hue-rotate(270deg); */ 101 - content: url("https://cdn.wafrn.net/api/cache/?media=https%3A%2F%2Fmedia.wafrn.net%2F1749063617775_1512bf9dc76e226a08df0ece5da0bd11ce5f5c2a_processed.webp"); 101 + content: url("/assets/img/wafrnverse.webp"); 102 102 height: 91px; 103 103 } 104 104 ··· 335 335 border-radius: var(--mat-sys-corner-medium) !important; 336 336 box-shadow: none !important; 337 337 } 338 + 338 339 .ask-content { 339 340 border-radius: var(--mat-sys-corner-medium) !important; 340 341 } ··· 391 392 392 393 .follow-counts { 393 394 background: var(--card-gradient); 394 - } 395 + }