/* ============================================================================ settings.css -- Settings drawer (gear button + slide-in panel) and the theme / theater / cursor options it controls. Pairs with js/settings.js. Why a new file instead of appending to main.css: main.css is the bought theme (78KB) and has ZERO custom properties -- every colour in it is a literal hex. This file introduces the token layer the theme never had (--ubg-*) and keeps all the light-mode work in one place that can be reverted or diffed on its own. Applied entirely through attributes on , set by the inline snippet in each page's (see settings.js header for why it must be inline): data-theme = "dark" | "light" data-theater = "off" | "on" data-cursor = "sword" | "dot" | "system" data-cursor-color = one of the 6 dot hexes --cursor-color = same hex, for the swatch rings / focus glows ========================================================================= */ /* --------------------------------------------------------------------------- 1. TOKEN LAYER -- dark (the site's existing look, unchanged) Values lifted verbatim from main.css so dark mode renders exactly as before. ------------------------------------------------------------------------ */ :root { --ubg-bg: #100d28; /* main.css:153 body background-color */ --ubg-bg-2: #1a1240; /* main.css:183 body::before gradient stop */ --ubg-bg-3: #241659; --ubg-surface: #171c38; /* main.css:2331 .parent_frame / .infor-first */ --ubg-surface-2: #0f1428; --ubg-card: #27292a; /* main.css:886 .most-popular .item */ --ubg-card-2: #1f2122; --ubg-panel: #12141c; /* search.css:16 dropdown */ --ubg-border: rgba(255, 255, 255, 0.10); --ubg-border-strong: rgba(255, 255, 255, 0.18); --ubg-fill: rgba(255, 255, 255, 0.05); --ubg-fill-2: rgba(255, 255, 255, 0.09); --ubg-text: #ffffff; --ubg-text-dim: #c9ccdd; /* 11.86:1 on --ubg-bg */ --ubg-text-mute: rgba(255, 255, 255, 0.45); --ubg-shadow: rgba(0, 0, 0, 0.45); --ubg-scrim: rgba(4, 4, 14, 0.62); --ubg-accent: #ec6090; --ubg-accent-2: #e6306e; /* 6.0:1 on bg */ /* accent for TEXT sitting on a subtle fill rather than on the page -- the light value is darker than --ubg-accent because a comment card is #ebebed, not white, and the plain accent only reached 4.14:1 there */ --ubg-accent-strong: #ec6090; --ubg-accent-soft: rgba(236, 96, 144, .16); --ubg-accent-ink: #0b0d1a; } /* --ubg-accent-2 is the second stop of the filled-button gradient, so the site keeps the gradient buttons it has always had rather than going flat. It is NOT just "accent, darker": the original button (linear-gradient(135deg,#ec6090,#b5417d) with white text) could not pass at both ends -- white measures 3.16:1 on the bright stop and 5.23:1 on the dark one, and black is the other way round. So each second stop is the DARKEST variant of its hue that still keeps --ubg-accent-ink at >= 4.5:1, which makes the whole sweep legible instead of only half of it. --ubg-accent-ink is the text/icon colour that goes ON a filled accent chip. Black wins on every bright dark-theme accent (white is only 1.4-3.2:1 there); white wins on the darkened light-theme accent. */ /* --------------------------------------------------------------------------- 2. TOKEN LAYER -- light ------------------------------------------------------------------------ */ :root[data-theme="light"] { --ubg-bg: #f4f5fa; --ubg-bg-2: #e9ebf5; --ubg-bg-3: #e2e5f2; --ubg-surface: #ffffff; --ubg-surface-2: #f0f1f7; --ubg-card: #ffffff; --ubg-card-2: #f0f1f7; --ubg-panel: #ffffff; --ubg-border: rgba(16, 18, 40, 0.12); --ubg-border-strong: rgba(16, 18, 40, 0.22); --ubg-fill: rgba(16, 18, 40, 0.045); --ubg-fill-2: rgba(16, 18, 40, 0.085); --ubg-text: #14162b; /* 16.35:1 on bg */ --ubg-text-dim: #4b4f63; /* 7.42:1 on bg */ --ubg-text-mute: rgba(20, 22, 43, 0.55); --ubg-shadow: rgba(16, 18, 40, 0.14); --ubg-scrim: rgba(20, 22, 43, 0.42); /* Darkened until it measured >= 4.5:1 against the page background #f4f5fa -- the worst case here; a card is #fff and scores higher. */ --ubg-accent: #db1559; --ubg-accent-2: #af1147; /* 4.52:1 on bg */ --ubg-accent-strong: #c4174f; /* 4.92:1 on a card */ --ubg-accent-soft: rgba(219, 21, 89, .10); --ubg-accent-ink: #ffffff; } /* --------------------------------------------------------------------------- 3. GEAR BUTTON (injected into nav.main-nav by settings.js) ------------------------------------------------------------------------ */ .ubg-settings-btn { flex: 0 0 auto; width: 44px; height: 44px; margin-left: 12px; display: inline-flex; align-items: center; justify-content: center; /* Deliberately stronger than the panel's other chrome. At --ubg-border / --ubg-fill it was a barely-there grey ring that the user could not pick out of the header, in light mode especially. */ border: 1.5px solid var(--ubg-border-strong); border-radius: 50%; background: var(--ubg-fill-2); color: var(--ubg-text); padding: 0; transition: background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease; } .ubg-settings-btn svg { width: 21px; height: 21px; display: block; /* main.css:236 sets "img { width:100% }" -- this is an , so it is unaffected, but the explicit size keeps it stable if the flex parent ever shrinks. */ } .ubg-settings-btn:hover, .ubg-settings-btn:focus-visible { background: var(--ubg-accent-soft); border-color: var(--ubg-accent); color: var(--ubg-accent); } .ubg-settings-btn:focus-visible { outline: 2px solid var(--ubg-accent); outline-offset: 2px; } .ubg-settings-btn[aria-expanded="true"] { background: var(--ubg-accent-soft); border-color: var(--ubg-accent); color: var(--ubg-accent); transform: rotate(35deg); } /* Order inside nav.main-nav (a flex row): logo, search, GEAR, nav links, hamburger. The gear is appended by JS, so its position comes from here. It deliberately does NOT use `margin-left: auto` to sit at the far right: main.css:483 gives .main-nav `width: 100vw` while its .container parent is inset by the Bootstrap gutter, so the row's right edge is already off screen (body's overflow-x:hidden hides the spill). Anything flushed to that edge is clipped -- the gear was half off the viewport. Sitting it in the gap after the search box keeps it inside the visible area at every width. */ .header-area .main-nav .ubg-settings-btn { order: 2; } .header-area .main-nav .nav { order: 3; } .header-area .main-nav .menu-trigger { order: 4; } @media (max-width: 1300px) { .header-area .main-nav .ubg-settings-btn { width: 40px; height: 40px; margin-left: 8px; margin-right: 6px; } } /* --------------------------------------------------------------------------- 4. DRAWER ------------------------------------------------------------------------ */ .ubg-settings-overlay { position: fixed; inset: 0; background: var(--ubg-scrim); /* The blur is attached to .is-open, not here. A backdrop-filter on a closed, invisible overlay still promotes the whole viewport into a compositing layer and was measurably tinting what rendered underneath it -- the search dropdown came out around 77% opaque with the page showing through, on every page, in both themes. Nothing that is not on screen should be filtering the backdrop. */ opacity: 0; visibility: hidden; /* Above .cmt-notif-stack (comment-notify.css:10, z-index 99999) so a toast cannot land on top of a modal dialog. */ z-index: 100000; transition: opacity .22s ease, visibility 0s linear .22s; } .ubg-settings-overlay.is-open { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 1; visibility: visible; transition: opacity .22s ease, visibility 0s linear 0s; } .ubg-settings-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 100vw; z-index: 100001; display: flex; flex-direction: column; background: var(--ubg-panel); border-left: 1px solid var(--ubg-border); box-shadow: -18px 0 50px var(--ubg-shadow); color: var(--ubg-text); font-family: 'Poppins', sans-serif; transform: translateX(100%); visibility: hidden; overflow-y: auto; overscroll-behavior: contain; transition: transform .26s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .26s; } .ubg-settings-panel.is-open { transform: translateX(0); visibility: visible; transition: transform .26s cubic-bezier(.22, .61, .36, 1), visibility 0s linear 0s; } .ubg-settings-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 16px; border-bottom: 1px solid var(--ubg-border); position: sticky; top: 0; background: var(--ubg-panel); z-index: 1; } .ubg-settings-title { font-size: 17px; font-weight: 600; margin: 0; /* main.css:216 sets "h1..h6 { color:#fff }" at 0,0,1 with no !important, so one class is enough to win. */ color: var(--ubg-text); } .ubg-settings-close { width: 34px; height: 34px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ubg-border); border-radius: 50%; background: transparent; color: var(--ubg-text-dim); font-size: 17px; line-height: 1; padding: 0; transition: background .15s ease, color .15s ease, border-color .15s ease; } .ubg-settings-close:hover, .ubg-settings-close:focus-visible { background: var(--ubg-fill-2); color: var(--ubg-text); border-color: var(--ubg-border-strong); } .ubg-settings-close:focus-visible { outline: 2px solid var(--ubg-accent); outline-offset: 2px; } .ubg-settings-body { padding: 6px 20px 26px; } .ubg-set-group[hidden] { display: none; } .ubg-set-label { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--ubg-text-mute); margin: 20px 0 9px; } .ubg-set-hint { font-size: 12.5px; line-height: 1.5; color: var(--ubg-text-mute); margin: 9px 0 0; } /* --- segmented control --- */ .ubg-seg { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--ubg-border); border-radius: 12px; background: var(--ubg-fill); } .ubg-seg button { flex: 1 1 0; min-width: 0; padding: 9px 6px; border: none; border-radius: 9px; background: transparent; color: var(--ubg-text-dim); font-family: inherit; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .15s ease, color .15s ease; } .ubg-seg button:hover { background: var(--ubg-fill-2); color: var(--ubg-text); } .ubg-seg button:focus-visible { outline: 2px solid var(--ubg-accent); outline-offset: -2px; } .ubg-seg button[aria-pressed="true"] { background: var(--ubg-accent); color: var(--ubg-accent-ink); font-weight: 600; } /* --- colour swatches --- */ .ubg-swatches { display: flex; flex-wrap: wrap; gap: 12px; } .ubg-swatches button { width: 34px; height: 34px; flex: 0 0 auto; padding: 0; border: 2px solid var(--ubg-border); border-radius: 50%; background: var(--ubg-sw); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .ubg-swatches button:hover { transform: scale(1.1); } .ubg-swatches button:focus-visible { outline: 2px solid var(--ubg-text); outline-offset: 3px; } .ubg-swatches button[aria-pressed="true"] { border-color: var(--ubg-panel); box-shadow: 0 0 0 2px var(--ubg-text); } /* Mobile: full width */ @media (max-width: 480px) { .ubg-settings-panel { width: 100vw; border-left: none; } } /* Scroll lock, set on by settings.js while the drawer is open. */ :root.ubg-no-scroll, :root.ubg-no-scroll body { /* overrides main.css:1754 "body { overflow-x: hidden }" */ overflow: hidden !important; } @media (prefers-reduced-motion: reduce) { .ubg-settings-panel, .ubg-settings-overlay, .ubg-settings-btn, .ubg-settings-close, .ubg-seg button, .ubg-swatches button { transition: none !important; } .ubg-settings-btn[aria-expanded="true"], .ubg-swatches button:hover { transform: none; } } /* --------------------------------------------------------------------------- 5. LIGHT MODE -- hunting the hard-coded darks Every rule below is prefixed with :root[data-theme="light"], which adds 0,2,0 of specificity, so it beats the theme's own class selectors without needing !important. ------------------------------------------------------------------------ */ /* 5.1 page canvas ------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; /* also set inline by the head snippet */ } :root[data-theme="light"] body { background-color: var(--ubg-bg); color: var(--ubg-text); } /* The decorative dark gradient (main.css:178) is position:fixed;inset:0 and covers the whole viewport, so leaving it alone would keep the page dark no matter what body's background-color says. */ :root[data-theme="light"] body::before { background: linear-gradient(-45deg, var(--ubg-bg), var(--ubg-bg-2), var(--ubg-bg-3), var(--ubg-bg-2), var(--ubg-bg)); } /* 5.2 text -------------------------------------------------------------- */ :root[data-theme="light"] h1, :root[data-theme="light"] h2, :root[data-theme="light"] h3, :root[data-theme="light"] h4, :root[data-theme="light"] h5, :root[data-theme="light"] h6 { color: var(--ubg-text); /* main.css:216 "color: #fff" */ } :root[data-theme="light"] p, :root[data-theme="light"] li, :root[data-theme="light"] strong, :root[data-theme="light"] em { color: var(--ubg-text); /* main.css:231 "p { color: #fff }" */ } :root[data-theme="light"] a { color: var(--ubg-text-dim); /* main.css:202 "a { color: #CCC }" */ } :root[data-theme="light"] a:hover { color: var(--ubg-accent); /* main.css:206 "a:hover { color: #F99 }" */ } /* 5.3 header ------------------------------------------------------------ */ /* Two different values, exactly as warned: .header-area is transparent (main.css:464) and the sticky state is #1a1a1a (main.css:1810, which sits inside a max-width media query -- the 0,3,0 prefix here wins regardless of source order). */ :root[data-theme="light"] .background-header { background-color: var(--ubg-surface); box-shadow: 0 2px 14px var(--ubg-shadow); } /* The nav pills are set twice: main.css:578 `background-color: #27292a` and again at :2149 with the `background` SHORTHAND, which also plants a `background-image: linear-gradient(45deg,#27292a,#1f2122)`. A higher-specificity `background-color` does NOT remove that image -- the gradient just keeps painting on top of it. The shorthand has to be answered with the shorthand. (Caught by a computed-style dump: the pills stayed dark in light mode while background-color reported #fff.) */ :root[data-theme="light"] .header-area .main-nav .nav li a { background: linear-gradient(45deg, var(--ubg-surface), var(--ubg-surface-2)); color: var(--ubg-text); border: 2px solid var(--ubg-border); /* main.css:2157 glows these in neon cyan, which is invisible on white. */ box-shadow: 0 1px 3px var(--ubg-shadow); } :root[data-theme="light"] .header-area .main-nav .nav li a:hover { background: var(--ubg-accent); border-color: var(--ubg-accent); /* !important overrides main.css:2163 `color: #fff !important` -- that rule forces white text under a neon-cyan hover gradient, which on a light page is white-on-near-white. */ color: var(--ubg-accent-ink) !important; box-shadow: 0 2px 10px var(--ubg-shadow); } /* Related-game link pills inside the description (main.css:2377). Same trap: `color: #fff !important` over a `background:` shorthand gradient of #00f2fe -> #4facfe. White on cyan measures 1.09:1 against a light page. */ :root[data-theme="light"] .infor-first p a { background: var(--ubg-accent); color: var(--ubg-accent-ink) !important; /* overrides main.css:2383 */ box-shadow: 0 2px 10px var(--ubg-shadow); } :root[data-theme="light"] .infor-first p a:hover { color: var(--ubg-accent-ink) !important; /* overrides main.css:2392 */ box-shadow: 0 4px 16px var(--ubg-shadow); } /* Action-bar buttons: main.css:2436 gives them `color: #ddd` on `rgba(255,255,255,.06)` -- light grey on a light card, 1.25:1. */ :root[data-theme="light"] .poki-btn { background: var(--ubg-fill); border-color: var(--ubg-border); color: var(--ubg-text-dim); } :root[data-theme="light"] .poki-btn:hover { background: var(--ubg-accent-soft); border-color: var(--ubg-accent); color: var(--ubg-accent); box-shadow: none; } /* Hamburger bars: main.css:670-701 draws them in the theme's pink. The :not(.active) is load-bearing. main.css:730 turns the MIDDLE bar transparent when the menu is open, which is what forms the X out of the remaining two bars -- and that rule is only 0,4,1. The first version of this override was 0,5,1 and carried no .active qualifier, so it won and painted the middle bar back in: the close button rendered as an X with a horizontal line through it. The open state is handled separately below. */ :root[data-theme="light"] .header-area .main-nav .menu-trigger:not(.active) span, :root[data-theme="light"] .header-area .main-nav .menu-trigger:not(.active) span:before, :root[data-theme="light"] .header-area .main-nav .menu-trigger:not(.active) span:after, :root[data-theme="light"] .background-header .main-nav .menu-trigger:not(.active) span, :root[data-theme="light"] .background-header .main-nav .menu-trigger:not(.active) span:before, :root[data-theme="light"] .background-header .main-nav .menu-trigger:not(.active) span:after { background-color: var(--ubg-text); } /* Open state: only the two diagonals are painted, the middle bar stays transparent so the X has no bar through it. */ :root[data-theme="light"] .header-area .main-nav .menu-trigger.active span:before, :root[data-theme="light"] .header-area .main-nav .menu-trigger.active span:after, :root[data-theme="light"] .background-header .main-nav .menu-trigger.active span:before, :root[data-theme="light"] .background-header .main-nav .menu-trigger.active span:after { background-color: var(--ubg-text); } /* The mobile dropdown is rebuilt wholesale in section 11. */ /* 5.4 inputs -- background, text AND placeholder ------------------------ */ /* The live rule is main.css:2194 (`rgba(39,41,42,.9)` + #fff + a 2px cyan border and a cyan glow), NOT the `burlywood` one at main.css:496 -- that earlier rule is dead code, overridden by :2194 at equal specificity and later source order. The dark field measures 14.62:1 and is left alone. What does need answering here is the neon glow: a cyan box-shadow reads as a smear on a light page, and the cyan border drops to ~1.5:1 on white. */ :root[data-theme="light"] .header-area .main-nav #search input { background-color: var(--ubg-surface); color: var(--ubg-text); border: 1px solid var(--ubg-border); box-shadow: 0 1px 3px var(--ubg-shadow); /* replaces main.css:2203 cyan glow */ } :root[data-theme="light"] .header-area .main-nav #search input:focus { border-color: var(--ubg-accent); /* main.css:2210 #4facfe */ box-shadow: 0 0 0 3px var(--ubg-accent-soft); background: var(--ubg-surface); } :root[data-theme="light"] .header-area .main-nav #search input::placeholder { color: var(--ubg-text-mute); } :root[data-theme="light"] .header-area .main-nav #search i, :root[data-theme="light"] .header-area .main-nav #search input:focus + i, :root[data-theme="light"] .header-area .main-nav #search:hover i { color: var(--ubg-text-dim); /* main.css:2216/2229 cyan */ } :root[data-theme="light"] .comment-form input, :root[data-theme="light"] .comment-form textarea { background: var(--ubg-fill); /* comment.css:68 rgba(255,255,255,.05) */ border-color: var(--ubg-border); color: var(--ubg-text); } :root[data-theme="light"] .comment-form input::placeholder, :root[data-theme="light"] .comment-form textarea::placeholder { color: var(--ubg-text-mute); /* comment.css:91 rgba(255,255,255,.4) */ } :root[data-theme="light"] .comment-form input:focus, :root[data-theme="light"] .comment-form textarea:focus { border-color: var(--ubg-accent); background: var(--ubg-fill-2); } /* 5.5 game page surfaces ----------------------------------------------- */ :root[data-theme="light"] .parent_frame, :root[data-theme="light"] .poki-actionbar, :root[data-theme="light"] .main_game .header-text .infor-first { background: linear-gradient(180deg, var(--ubg-surface), var(--ubg-surface-2)); box-shadow: 0 10px 30px var(--ubg-shadow); } :root[data-theme="light"] .poki-share-menu { background: var(--ubg-surface); border-color: var(--ubg-border); } :root[data-theme="light"] .poki-btn[data-tooltip]::after { background: var(--ubg-text); color: var(--ubg-bg); } :root[data-theme="light"] .most-popular .item { background-color: var(--ubg-card); /* main.css:886 #27292a */ border: 1px solid var(--ubg-border); } /* Ghost / white-filled buttons: .directlink is #27292a with white text, and its :hover flips to a WHITE background with dark text (main.css:1903) -- on a light page that is white-on-white. Both states get flipped. */ :root[data-theme="light"] .directlink { background-color: var(--ubg-card); color: var(--ubg-text); border: 1px solid var(--ubg-border); } :root[data-theme="light"] .directlink:hover { background-color: var(--ubg-accent); color: var(--ubg-accent-ink); } :root[data-theme="light"] .directlink:hover p, :root[data-theme="light"] .directlink:hover i { color: var(--ubg-accent-ink); } /* 5.6 search dropdown (search.css) ------------------------------------- */ :root[data-theme="light"] .search-input .result_search.search-panel { background: var(--ubg-panel); /* search.css:16 #12141c */ border-color: var(--ubg-border); box-shadow: 0 24px 60px var(--ubg-shadow); } :root[data-theme="light"] .search-input .result_search.search-panel::-webkit-scrollbar-thumb { background: var(--ubg-fill-2); border-color: var(--ubg-panel); } /* 5.7 comments (comment.css) ------------------------------------------- */ :root[data-theme="light"] .comment-section { background: var(--ubg-surface); /* comment.css:12 rgba(20,22,40,.72) */ border: 1px solid var(--ubg-border); } :root[data-theme="light"] .comment-item, :root[data-theme="light"] .cmt-reply-box { background: var(--ubg-fill); } /* The :not()s matter. Without them this rule (0,3,0) outranks the accent rules in section 6 (0,1,0) and repaints the ink of anything sitting on a coloured chip with the body text colour. Three separate things were caught this way, each only by a computed-style dump rather than by eye: .comment-count-badge dark navy on pink 3.62:1 .comment-pinned-tag dark navy on pink 3.62:1 .comment-avatar dark navy on a hsl circle 2.07:1 All three want their own ink, so all three are excluded here. */ :root[data-theme="light"] .comment-section, :root[data-theme="light"] .comment-section p, :root[data-theme="light"] .comment-section span:not(.comment-count-badge):not(.comment-pinned-tag), :root[data-theme="light"] .comment-section div:not(.comment-avatar) { color: var(--ubg-text); } /* 5.8 toasts ----------------------------------------------------------- */ :root[data-theme="light"] .ubg-fav-toast, :root[data-theme="light"] .cmt-notif { background: var(--ubg-surface); /* main.css:2696 gradient #1d1533 */ color: var(--ubg-text); border-color: var(--ubg-border); box-shadow: 0 14px 34px var(--ubg-shadow); } /* 5.9 footer ----------------------------------------------------------- */ :root[data-theme="light"] footer, :root[data-theme="light"] .copyright p { color: var(--ubg-text); } /* The footer link chips are `background-color: lightcoral` (main.css:1921) in BOTH themes, and main.css:202 paints links on them in near-white -- 2.59:1, which is why they are hard to read on the live site today. This is the one fix here that is not theme-scoped: the chip colour is the same in dark and light, so the ink has to be too. The coral is left alone; only the text flips, which takes it to 7.46:1. */ .information_website .information_name a { color: #0b0d1a; } .information_website .information_name a:hover { color: #000000; /* 8.10:1 */ } :root[data-theme="light"] .copyright { border-top-color: var(--ubg-border); } /* 5.10 preloader ------------------------------------------------------- */ :root[data-theme="light"] .js-preloader { background-color: rgba(244, 245, 250, 0.99); /* main.css:361 rgba(0,0,0,.99) */ } /* --------------------------------------------------------------------------- 6. ACCENT -- route the hard-coded pink/cyan spots through the token These run in BOTH themes (that is the point of the option), so they are NOT prefixed with data-theme. ------------------------------------------------------------------------ */ /* Gradient, not flat: comment.css:104 already shipped these as a 135deg gradient and losing it flattened the look of the whole comment box. --ubg-accent-2 keeps the sweep while staying legible at both ends (see the token comment in section 1). */ .btn-submit-comment, .btn-cmt-save, .btn-reply-post { /* comment.css:104 gradient #ec6090->#b5417d, :346 #ec6090, :574 #00c2d1 */ background: linear-gradient(135deg, var(--ubg-accent), var(--ubg-accent-2)); color: var(--ubg-accent-ink); } .comment-count-badge { background: var(--ubg-accent); /* comment.css:46, flat by design */ color: var(--ubg-accent-ink); } .btn-submit-comment:hover, .btn-cmt-save:hover, .btn-reply-post:hover { background: linear-gradient(135deg, var(--ubg-accent), var(--ubg-accent-2)); filter: brightness(1.12); } .main_game .header-text .infor-first, .parent_frame, .poki-actionbar { border-color: var(--ubg-accent-soft); /* main.css:2361 rgba(0,242,254,.18) */ } /* --------------------------------------------------------------------------- 7. CURSOR MODES The site does NOT have a two-layer JS cursor -- it paints a single 32x32 PNG (images/cursor.png) through `cursor: url(...)`. The base rule is main.css:97, which lists ~50 bare tag names and ends in !important: html, body, div, span, iframe, h1..h6, p, a, ul, li, header, nav, footer, ... { cursor: url(cursor.png) 0 0, auto !important } Specificity there is 0,0,1. `:root[data-cursor="..."]` is 0,2,0, so the rules below outrank it -- but !important is still REQUIRED, because a declaration without it always loses to one with it regardless of specificity. Every !important in this section is overriding that rule, plus main.css:647 (.menu-trigger), :930, :1899 (.directlink) and :2456 (.poki-actionbar .poki-btn), which set the same PNG without !important. "sword" deliberately emits NOTHING, so the theme's own cursor -- including its per-element hover variants -- is left completely untouched. ------------------------------------------------------------------------ */ /* --- system: hand the OS cursor back. Nothing in this codebase sets `cursor: none` (checked), so only the PNG has to be undone. --- */ :root[data-cursor="system"], :root[data-cursor="system"] * { cursor: auto !important; /* overrides main.css:97, which is !important */ } :root[data-cursor="system"] a, :root[data-cursor="system"] button, :root[data-cursor="system"] [role="button"], :root[data-cursor="system"] .menu-trigger, :root[data-cursor="system"] .poki-btn, :root[data-cursor="system"] .most-popular .item, :root[data-cursor="system"] input[type="submit"], :root[data-cursor="system"] label { cursor: pointer !important; /* overrides main.css:97 and :2456 */ } :root[data-cursor="system"] input[type="text"], :root[data-cursor="system"] textarea { cursor: text !important; /* overrides main.css:97 */ } /* --- dot: a small filled circle. `cursor: url()` cannot read a CSS variable (the data-URI is a separate document), so rather than generating it in JS -- which would flash the sword cursor until the script ran -- there is one rule per palette colour, matched on the data-cursor-color attribute the snippet already sets. Pure CSS, correct from the first paint. Each dot is drawn twice: a faint black outer ring so it stays visible on a light background, and a white inner ring so it stays visible on a dark one. Hotspot is 8 8 (the centre). --- */ :root[data-cursor="dot"][data-cursor-color="#ec6090"], :root[data-cursor="dot"][data-cursor-color="#ec6090"] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='5.8' fill='none' stroke='%23000' stroke-opacity='.45' stroke-width='1'/%3E%3Ccircle cx='8' cy='8' r='4.4' fill='%23ec6090' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 8 8, auto !important; } :root[data-cursor="dot"][data-cursor-color="#00f2fe"], :root[data-cursor="dot"][data-cursor-color="#00f2fe"] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='5.8' fill='none' stroke='%23000' stroke-opacity='.45' stroke-width='1'/%3E%3Ccircle cx='8' cy='8' r='4.4' fill='%2300f2fe' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 8 8, auto !important; } :root[data-cursor="dot"][data-cursor-color="#a77bff"], :root[data-cursor="dot"][data-cursor-color="#a77bff"] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='5.8' fill='none' stroke='%23000' stroke-opacity='.45' stroke-width='1'/%3E%3Ccircle cx='8' cy='8' r='4.4' fill='%23a77bff' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 8 8, auto !important; } :root[data-cursor="dot"][data-cursor-color="#4ecca3"], :root[data-cursor="dot"][data-cursor-color="#4ecca3"] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='5.8' fill='none' stroke='%23000' stroke-opacity='.45' stroke-width='1'/%3E%3Ccircle cx='8' cy='8' r='4.4' fill='%234ecca3' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 8 8, auto !important; } :root[data-cursor="dot"][data-cursor-color="#ffbb33"], :root[data-cursor="dot"][data-cursor-color="#ffbb33"] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='5.8' fill='none' stroke='%23000' stroke-opacity='.45' stroke-width='1'/%3E%3Ccircle cx='8' cy='8' r='4.4' fill='%23ffbb33' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 8 8, auto !important; } :root[data-cursor="dot"][data-cursor-color="#ffffff"], :root[data-cursor="dot"][data-cursor-color="#ffffff"] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='5.8' fill='none' stroke='%23000' stroke-opacity='.55' stroke-width='1.2'/%3E%3Ccircle cx='8' cy='8' r='4.4' fill='%23ffffff' stroke='%23000' stroke-opacity='.35' stroke-width='1'/%3E%3C/svg%3E") 8 8, auto !important; } /* Keep the I-beam on text fields in dot mode -- a dot sitting on the caret makes a field genuinely hard to type in, and sword mode already gets this for free (main.css:97 lists no form elements). The redundant-looking `[data-cursor-color]` is load-bearing. The dot rules above match on TWO attributes, so they score 0,3,0; a plain `:root[data-cursor="dot"] textarea` is only 0,2,1 and loses, !important on both or not. Matching the same two attributes brings these to 0,3,1. (The first attempt here omitted it and the dot still won -- caught by a getComputedStyle dump, not by eye.) */ :root[data-cursor="dot"][data-cursor-color] input, :root[data-cursor="dot"][data-cursor-color] textarea { cursor: text !important; } :root[data-cursor="dot"][data-cursor-color] input[type="submit"], :root[data-cursor="dot"][data-cursor-color] input[type="button"], :root[data-cursor="dot"][data-cursor-color] input[type="checkbox"], :root[data-cursor="dot"][data-cursor-color] input[type="radio"], :root[data-cursor="dot"][data-cursor-color] select { cursor: pointer !important; } /* The panel's own controls are