From 1eed347ffb080831cf81829a58858b1d418a4f54 Mon Sep 17 00:00:00 2001 From: Hampus Date: Fri, 2 Oct 2026 14:15:24 +0200 Subject: [PATCH] fix(premium): follow the light theme on the Plutonium page (#3111) --- .../plutonium_page/PlutoniumPage.module.css | 122 +++++++++++------- 1 file changed, 75 insertions(+), 47 deletions(-) diff --git a/fluxer_app/src/features/premium/components/plutonium_page/PlutoniumPage.module.css b/fluxer_app/src/features/premium/components/plutonium_page/PlutoniumPage.module.css index 392c1595c..290f66150 100644 --- a/fluxer_app/src/features/premium/components/plutonium_page/PlutoniumPage.module.css +++ b/fluxer_app/src/features/premium/components/plutonium_page/PlutoniumPage.module.css @@ -11,8 +11,10 @@ isolation: isolate; container-name: plutonium-page; container-type: size; - background-color: #080811; - color: #fff; + --pl-fg: 255 255 255; + --pl-bg: #080811; + background-color: var(--pl-bg); + color: rgb(var(--pl-fg)); font-family: 'Radio Canada Big', var(--font-sans); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; @@ -26,6 +28,7 @@ --flux-glow-indigo: 99 94 233; --space-panel: 12 12 24; --space-deep-rgb: 8 8 17; + --pl-panel-shadow: rgb(0 0 0 / 0.8); --flux-line-dir: 90deg; --flux-gradient-dir: 100deg; --flux-gradient-fallback: #4641d9; @@ -63,7 +66,7 @@ overflow-y: auto; overscroll-behavior: contain; isolation: isolate; - background-color: #080811; + background-color: var(--pl-bg); background-image: var(--flux-grain), var(--flux-aurora), var(--flux-waves), var(--flux-ink); background-size: 128px 128px, @@ -73,10 +76,10 @@ 100% 100%; background-repeat: repeat, no-repeat, no-repeat, repeat, no-repeat; background-attachment: local; - color: #fff; + color: rgb(var(--pl-fg)); font-size: 1rem; line-height: 1.5; - scrollbar-color: rgb(255 255 255 / 0.2) transparent; + scrollbar-color: rgb(var(--pl-fg) / 0.2) transparent; scrollbar-width: thin; } @@ -121,6 +124,31 @@ radial-gradient(56rem 32rem at 8% -6rem, rgb(var(--flux-glow-indigo) / 0.3), transparent 72%); } +:global(html.theme-light) .root { + --pl-fg: 18 17 34; + --pl-bg: #f6f6fb; +} + +:global(html.theme-light) .scroller { + --brand-primary-light: #4641d9; + --space-panel: 255 255 255; + --space-deep-rgb: 255 255 255; + --pl-panel-shadow: rgb(18 17 34 / 0.18); + --flux-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E"); + --flux-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='640'%3E%3Cg fill='none' stroke='%234641d9' opacity='.075'%3E%3Cpath d='M0 27C40 31 80 34 120 34C160 33 200 27 240 25C280 23 320 22 360 23C400 23 440 28 480 28C520 29 560 27 600 25C640 23 680 19 720 16C760 14 800 11 840 9C880 7 920 3 960 3C1000 3 1040 5 1080 9C1120 13 1160 23 1200 27' stroke-opacity='1'/%3E%3Cpath d='M0 69C40 73 80 75 120 75C160 76 200 72 240 71C280 69 320 67 360 65C400 63 440 60 480 58C520 56 560 55 600 55C640 55 680 59 720 59C760 58 800 56 840 54C880 51 920 44 960 44C1000 43 1040 47 1080 51C1120 55 1160 65 1200 69' stroke-opacity='0.97'/%3E%3Cpath d='M0 106C40 108 80 111 120 113C160 115 200 118 240 117C280 116 320 111 360 106C400 102 440 92 480 89C520 86 560 87 600 88C640 89 680 96 720 97C760 98 800 97 840 96C880 95 920 91 960 91C1000 92 1040 95 1080 97C1120 99 1160 103 1200 106' stroke-opacity='0.87'/%3E%3Cpath d='M0 141C40 142 80 147 120 149C160 152 200 158 240 157C280 156 320 149 360 144C400 140 440 131 480 127C520 124 560 125 600 125C640 126 680 129 720 131C760 133 800 134 840 137C880 139 920 142 960 144C1000 145 1040 145 1080 144C1120 144 1160 141 1200 141' stroke-opacity='0.72'/%3E%3Cpath d='M0 182C40 181 80 185 120 186C160 187 200 189 240 188C280 187 320 183 360 181C400 178 440 175 480 172C520 170 560 167 600 166C640 164 680 162 720 164C760 166 800 173 840 178C880 183 920 191 960 193C1000 195 1040 192 1080 190C1120 188 1160 183 1200 182' stroke-opacity='0.55'/%3E%3Cpath d='M0 228C40 226 80 224 120 222C160 219 200 216 240 215C280 214 320 216 360 217C400 217 440 219 480 218C520 216 560 210 600 208C640 205 680 202 720 204C760 207 800 215 840 220C880 226 920 232 960 235C1000 237 1040 235 1080 233C1120 232 1160 230 1200 228' stroke-opacity='0.38'/%3E%3Cpath d='M0 274C40 271 80 262 120 257C160 252 200 247 240 246C280 245 320 251 360 253C400 255 440 258 480 258C520 258 560 253 600 253C640 252 680 252 720 253C760 255 800 259 840 262C880 264 920 267 960 269C1000 272 1040 275 1080 276C1120 277 1160 277 1200 274' stroke-opacity='0.23'/%3E%3Cpath d='M0 313C40 310 80 299 120 295C160 290 200 286 240 285C280 283 320 286 360 288C400 289 440 291 480 293C520 295 560 298 600 300C640 302 680 305 720 305C760 306 800 302 840 302C880 302 920 302 960 304C1000 306 1040 313 1080 315C1120 316 1160 316 1200 313' stroke-opacity='0.13'/%3E%3Cpath d='M0 345C40 343 80 339 120 336C160 334 200 331 240 329C280 327 320 323 360 323C400 323 440 325 480 329C520 333 560 343 600 347C640 351 680 354 720 354C760 353 800 347 840 345C880 343 920 342 960 343C1000 343 1040 348 1080 348C1120 349 1160 347 1200 345' stroke-opacity='0.1'/%3E%3Cpath d='M0 375C40 375 80 379 120 379C160 378 200 376 240 374C280 371 320 364 360 364C400 363 440 367 480 371C520 375 560 385 600 389C640 393 680 395 720 395C760 396 800 392 840 391C880 389 920 387 960 385C1000 383 1040 380 1080 378C1120 376 1160 375 1200 375' stroke-opacity='0.13'/%3E%3Cpath d='M0 408C40 409 80 416 120 417C160 418 200 417 240 416C280 415 320 411 360 411C400 412 440 415 480 417C520 419 560 423 600 426C640 428 680 431 720 433C760 435 800 438 840 437C880 436 920 431 960 426C1000 422 1040 412 1080 409C1120 406 1160 407 1200 408' stroke-opacity='0.23'/%3E%3Cpath d='M0 445C40 446 80 449 120 451C160 453 200 454 240 457C280 459 320 462 360 464C400 465 440 465 480 464C520 464 560 461 600 461C640 462 680 467 720 469C760 472 800 478 840 477C880 476 920 469 960 464C1000 460 1040 451 1080 447C1120 444 1160 445 1200 445' stroke-opacity='0.38'/%3E%3Cpath d='M0 486C40 484 80 482 120 484C160 486 200 493 240 498C280 503 320 511 360 513C400 515 440 512 480 510C520 508 560 503 600 502C640 501 680 505 720 506C760 507 800 509 840 508C880 507 920 503 960 501C1000 498 1040 495 1080 492C1120 490 1160 487 1200 486' stroke-opacity='0.55'/%3E%3Cpath d='M0 528C40 525 80 522 120 524C160 527 200 535 240 540C280 546 320 552 360 555C400 557 440 555 480 553C520 552 560 550 600 548C640 546 680 544 720 542C760 539 800 536 840 535C880 534 920 536 960 537C1000 537 1040 539 1080 538C1120 536 1160 530 1200 528' stroke-opacity='0.72'/%3E%3Cpath d='M0 573C40 572 80 572 120 573C160 575 200 579 240 582C280 584 320 587 360 589C400 592 440 595 480 596C520 597 560 597 600 594C640 591 680 582 720 577C760 572 800 567 840 566C880 565 920 571 960 573C1000 575 1040 578 1080 578C1120 578 1160 573 1200 573' stroke-opacity='0.87'/%3E%3Cpath d='M0 620C40 622 80 625 120 625C160 626 200 622 240 622C280 622 320 622 360 624C400 626 440 633 480 635C520 636 560 636 600 633C640 630 680 619 720 615C760 610 800 606 840 605C880 603 920 606 960 608C1000 609 1040 611 1080 613C1120 615 1160 618 1200 620' stroke-opacity='0.97'/%3E%3C/g%3E%3C/svg%3E"); + --flux-aurora: + radial-gradient(64rem 30rem at 10% -8rem, rgb(var(--flux-glow-light) / 0.16), transparent 70%), + radial-gradient(56rem 32rem at 92% -6rem, rgb(var(--flux-glow-indigo) / 0.18), transparent 72%); + --flux-ink: linear-gradient(to bottom, hsl(242 60% 98.5%) 0%, hsl(242 50% 96.5%) 45%, hsl(242 45% 94%) 100%); + scrollbar-color: rgb(var(--pl-fg) / 0.25) transparent; +} + +:global(html.theme-light[dir='rtl']) .scroller { + --flux-aurora: + radial-gradient(64rem 30rem at 90% -8rem, rgb(var(--flux-glow-light) / 0.16), transparent 70%), + radial-gradient(56rem 32rem at 8% -6rem, rgb(var(--flux-glow-indigo) / 0.18), transparent 72%); +} + :global(:root:lang(ja)) .scroller { line-break: strict; } @@ -206,12 +234,12 @@ border: 0; border-radius: 999px; background: transparent; - color: #fff; + color: rgb(var(--pl-fg)); cursor: pointer; } .backButton:hover { - background-color: rgb(255 255 255 / 0.08); + background-color: rgb(var(--pl-fg) / 0.08); } .backIcon { @@ -288,7 +316,7 @@ .displayHeading { margin: 0; - color: #fff; + color: rgb(var(--pl-fg)); font-size: var(--pl-text-display); font-weight: 700; line-height: var(--pl-text-display-line-height); @@ -333,7 +361,7 @@ .heroLead { max-width: 42rem; margin: var(--pl-stack) auto 0; - color: rgb(255 255 255 / 0.85); + color: rgb(var(--pl-fg) / 0.85); font-size: var(--pl-text-lead); line-height: 1.55; text-wrap: pretty; @@ -349,14 +377,14 @@ } .price { - color: #fff; + color: rgb(var(--pl-fg)); font-size: var(--pl-text-heading); font-weight: 700; line-height: 1.25; } .priceOr { - color: rgb(255 255 255 / 0.8); + color: rgb(var(--pl-fg) / 0.8); font-size: 1rem; line-height: 1.6; } @@ -439,15 +467,15 @@ } .buttonSecondary { - border: 1px solid rgb(255 255 255 / 0.4); + border: 1px solid rgb(var(--pl-fg) / 0.4); border-radius: 0.625rem; background-color: rgb(var(--space-deep-rgb) / 0.4); - color: #fff; + color: rgb(var(--pl-fg)); } .buttonSecondary:not(:disabled):hover { - border-color: rgb(255 255 255 / 0.5); - background-color: rgb(255 255 255 / 0.06); + border-color: rgb(var(--pl-fg) / 0.5); + background-color: rgb(var(--pl-fg) / 0.06); } .buttonIcon { @@ -506,7 +534,7 @@ padding: 0; border: 0; background: none; - color: rgb(255 255 255 / 0.85); + color: rgb(var(--pl-fg) / 0.85); font-family: inherit; font-size: 0.9375rem; font-weight: 600; @@ -516,7 +544,7 @@ } .textButton:hover { - color: #fff; + color: rgb(var(--pl-fg)); } .textButtonIcon { @@ -528,7 +556,7 @@ .meta { max-width: var(--pl-measure); margin: var(--pl-stack) auto 0; - color: rgb(255 255 255 / 0.65); + color: rgb(var(--pl-fg) / 0.65); font-size: 0.9375rem; line-height: 1.5; text-wrap: pretty; @@ -537,7 +565,7 @@ .notice { max-width: var(--pl-measure); margin: var(--pl-stack) auto 0; - color: rgb(255 255 255 / 0.85); + color: rgb(var(--pl-fg) / 0.85); font-size: 0.9375rem; font-weight: 600; line-height: 1.5; @@ -552,7 +580,7 @@ color: inherit; font: inherit; text-decoration-line: underline; - text-decoration-color: rgb(255 255 255 / 0.4); + text-decoration-color: rgb(var(--pl-fg) / 0.4); text-underline-offset: 4px; cursor: pointer; transition: @@ -561,8 +589,8 @@ } .inlineLink:hover { - color: #fff; - text-decoration-color: #fff; + color: rgb(var(--pl-fg)); + text-decoration-color: rgb(var(--pl-fg)); } .inlineLink::after, @@ -594,10 +622,10 @@ max-width: 80rem; box-sizing: border-box; margin-inline: auto; - border: 1px solid rgb(255 255 255 / 0.09); + border: 1px solid rgb(var(--pl-fg) / 0.09); border-radius: 1.125rem; background-color: rgb(var(--space-panel) / 0.5); - box-shadow: 0 24px 48px -32px rgb(0 0 0 / 0.8); + box-shadow: 0 24px 48px -32px var(--pl-panel-shadow); } .glassPanel::before { @@ -689,7 +717,7 @@ .manageHeading { margin: 0 0 var(--pl-stack); - color: #fff; + color: rgb(var(--pl-fg)); font-size: var(--pl-text-heading); font-weight: 700; line-height: 1.25; @@ -726,7 +754,7 @@ gap: 2rem; margin-inline: auto; padding-block: 2.5rem; - border-block-start: 1px solid rgb(255 255 255 / 0.08); + border-block-start: 1px solid rgb(var(--pl-fg) / 0.08); } .perkRow::before { @@ -774,7 +802,7 @@ .perkTitle { margin: 0; - color: #fff; + color: rgb(var(--pl-fg)); font-size: var(--pl-text-heading); font-weight: 700; line-height: 1.25; @@ -784,7 +812,7 @@ .perkBody { margin: var(--pl-stack) 0 0; - color: rgb(255 255 255 / 0.8); + color: rgb(var(--pl-fg) / 0.8); font-size: var(--pl-text-lead); line-height: 1.55; text-wrap: pretty; @@ -800,7 +828,7 @@ } .footnoteMarker:hover { - color: #fff; + color: rgb(var(--pl-fg)); } .perkArt { @@ -851,7 +879,7 @@ .titleHeading { margin: 0; - color: #fff; + color: rgb(var(--pl-fg)); font-size: var(--pl-text-title); font-weight: 700; line-height: var(--pl-text-title-line-height); @@ -878,9 +906,9 @@ .perkCard { padding: 0.875rem; - border: 1px solid rgb(255 255 255 / 0.08); + border: 1px solid rgb(var(--pl-fg) / 0.08); border-radius: 1rem; - background-color: rgb(255 255 255 / 0.02); + background-color: rgb(var(--pl-fg) / 0.02); } .perkCardHead { @@ -899,7 +927,7 @@ .perkCardLabel { min-width: 0; - color: #fff; + color: rgb(var(--pl-fg)); font-size: 1rem; font-weight: 600; line-height: 1.6; @@ -917,7 +945,7 @@ flex-direction: column; gap: 0.125rem; padding: 0.5rem 0.75rem; - border: 1px solid rgb(255 255 255 / 0.08); + border: 1px solid rgb(var(--pl-fg) / 0.08); border-radius: 0.75rem; } @@ -928,7 +956,7 @@ } .perkCellTerm { - color: rgb(255 255 255 / 0.55); + color: rgb(var(--pl-fg) / 0.55); font-size: 0.9375rem; line-height: 1.5; } @@ -939,13 +967,13 @@ .perkCellValue { margin: 0; - color: rgb(255 255 255 / 0.7); + color: rgb(var(--pl-fg) / 0.7); font-size: 1rem; line-height: 1.6; } .perkCellPremium .perkCellValue { - color: #fff; + color: rgb(var(--pl-fg)); font-weight: 600; } @@ -971,9 +999,9 @@ .tableHead { padding: 1rem; vertical-align: middle; - border: 0 solid rgb(255 255 255 / 0.1); + border: 0 solid rgb(var(--pl-fg) / 0.1); border-bottom-width: 1px; - color: rgb(255 255 255 / 0.7); + color: rgb(var(--pl-fg) / 0.7); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; @@ -995,7 +1023,7 @@ .tableRow { vertical-align: middle; - border: 0 solid rgb(255 255 255 / 0.1); + border: 0 solid rgb(var(--pl-fg) / 0.1); border-bottom-width: 1px; } @@ -1006,7 +1034,7 @@ .tableRowHead { padding: 1.25rem 1rem; vertical-align: middle; - color: #fff; + color: rgb(var(--pl-fg)); font-size: 1rem; font-weight: 600; line-height: 1.6; @@ -1029,14 +1057,14 @@ .tableCell { padding: 1.25rem 1rem; vertical-align: middle; - color: rgb(255 255 255 / 0.6); + color: rgb(var(--pl-fg) / 0.6); font-size: 1.0625rem; line-height: 1.35; text-align: center; } .tableCellPremium { - color: #fff; + color: rgb(var(--pl-fg)); font-weight: 600; } @@ -1053,11 +1081,11 @@ } .booleanIconMuted { - color: rgb(255 255 255 / 0.6); + color: rgb(var(--pl-fg) / 0.6); } .booleanIconMissing { - color: rgb(255 255 255 / 0.3); + color: rgb(var(--pl-fg) / 0.3); } .comparisonActions { @@ -1084,7 +1112,7 @@ .closingBody { max-width: 42rem; margin: var(--pl-stack) auto var(--pl-group); - color: rgb(255 255 255 / 0.85); + color: rgb(var(--pl-fg) / 0.85); font-size: var(--pl-text-lead); line-height: 1.55; text-wrap: pretty; @@ -1104,7 +1132,7 @@ .footnote { max-width: var(--pl-measure); margin: 0 auto; - color: rgb(255 255 255 / 0.65); + color: rgb(var(--pl-fg) / 0.65); font-size: 0.9375rem; line-height: 1.5; text-align: center;