/* 바탕: 거의 검정, 강조: 앰버. 색은 이 :root 변수로만 정한다. */ @font-face { font-family: "Gosu UI"; src: url("/ui/fonts/wantedregular.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; } @font-face { font-family: "Gosu UI"; src: url("/ui/fonts/wantedbold.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; } @font-face { font-family: "Gosu Fallback"; src: url("/ui/fonts/notoregular.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; } @font-face { font-family: "Gosu Fallback"; src: url("/ui/fonts/notobold.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; } @font-face { font-family: "Gosu Counter"; src: url("/ui/fonts/counter.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { --laser-bt: #e6edf7; --laser-fx: #ffa641; --laser-left: #45cfff; --laser-right: #ff65bb; } :root { --drum-don: #bb1177; --drum-kat: #2299bb; --drum-roll: #eeaa00; } :root { --catch-edit-field: #0b121b; --catch-edit-curve: #101d28; --catch-edit-grid: #21313d; --catch-edit-hit: #6fe1b8; --catch-edit-path: #52687e; --catch-edit-object: #e8ecf5; --catch-fruit: #fa899a; --catch-droplet: #b9a4ed; --catch-tiny: #86b7bb; --catch-banana: #fabb53; } :root { --sing-golden: #a37b21; --sing-freestyle: #615078; --sing-note: #28556b; --sing-note-text: #ffffff; } #drum-editor { background:var(--bg); color:var(--text); } #drum-editor > p { color:var(--dim); font-size:13px; } #drum-editor [data-field=grid] { background:var(--field); user-select:none; } #drum-editor svg text { font-size:16px; } #drum-editor [data-field=objects] { list-style:none; } #drum-editor [data-field=objects] button[aria-pressed=true] { border-color:var(--accent); color:var(--accent); } #drum-editor [data-field=message] { color:var(--accent); } #sing-editor, #catch-editor { background:var(--bg); color:var(--text); } #sing-editor > p { color:var(--dim); font-size:13px; } #sing-editor [data-field=grid] { background:var(--field); user-select:none; } #sing-editor svg text { font-size:16px; } #sing-editor [data-field=notes] button[aria-pressed=true] { border-color:var(--accent); color:var(--accent); } #sing-editor [data-field=message] { color:var(--accent); } #catch-editor h2 { font-size:22px; } .catch-edit-body > svg { background:var(--catch-edit-field); } #catch-editor [data-field=curve] { background:var(--catch-edit-curve); } #catch-editor [data-field=message] { color:var(--catch-edit-hit); } /* Scrollable content keeps wheel/keyboard navigation without visible scrollbar tracks or thumbs. */ #menu-fps { color: var(--text); } * { scrollbar-width: none !important; } *::-webkit-scrollbar { display: none !important; } :root { color-scheme: dark; --title-bg: #10191d; --title-ink: #edf5f5; --title-dim: #78939c; --title-accent: #38c5d9; --feel: #ffffff; --popup-dim: rgba(0, 0, 0, 0.5); --bg: #0d0d0e; --text: #ececec; --dim: #8a8a8a; --line: #2a2a2d; --field: #18181a; --textbox: #22292a; --textbox-focus: #2e3638; --textbox-border: #66e0ff;--button: #394446; --button-light: #5c6c70; --accent: #00add8; --on-accent: #0d0d0e; --accent-tint: #0a1f26; --hero: #141416; --search: #2c2c31; --scrim: rgba(13, 13, 14, 0.62); --lamp-100: #ffb000; --lamp-100-core: #fff4cf; --challenge: #4cd9a8; --challenge-fail: #ff6666; --challenge-done: #ffffff; --lamp-none: #3a3a3e; --lamp-played: #6a6a6e; --lamp-finish: #c4c4c9; --lamp-fc: #ffd24d; --lamp-fc-glow: #ffb000; --lamp-pf: #3fe6f2; --lamp-pf-core: #eafcff; --lamp-shine: #ffffff; --lamp-clear: #7a7a7a; --lamp-gauge1: #4cd964; --lamp-gauge1-core: #82e493; --lamp-gauge2: #4560ff; --lamp-gauge2-core: #abb7ff; --lamp-gauge3: #d946ef; --lamp-gauge3-core: #eeacf7; --act-save: #1f6f4a; --act-save-line: #34a56f; --act-tune: #7d5b0c; --act-tune-line: #c99a1d; --act-danger: #86292b; --act-danger-line: #c64a4d; --act-run: #5a3fa8; --act-run-line: #8b6fe0; --act-add: #1b5a72; --act-add-line: #2f93b8; --activation: #70858c; --pulse-peak: color-mix(in srgb, var(--accent) 20%, var(--accent-tint)); --pulse-rest: color-mix(in srgb, var(--accent) 10%, var(--accent-tint)); --pulse-peak-song: color-mix(in srgb, var(--accent) 20%, transparent); --pulse-rest-song: color-mix(in srgb, var(--accent) 10%, transparent);--toast: var(--button); --toast-hover: #1f7f9f; --toast-icon: #22292a; --toast-glyph: #ffffff; --toast-check: #8f9fa3; --toast-check-hover: #ffffff; --toast-close-hover: rgba(0, 0, 0, 0.15); --toast-flash: #ffffff; --cursor-body: #ffffff; --cursor-edge: #000000; --cursor-glow: #ff66aa; --menu-band: #323232; --menu-text: #ffffff; --menu-flash: #ffffff; --menu-settings: #555555; --menu-back: #333a5e; --menu-play: #6644cc; --menu-multi: #5e3fba; --menu-edit: #eeaa00; --menu-quit: #ee3399; --chat-bg: rgba(0, 0, 0, 0.8); --chat-alt: rgba(59, 50, 52, 0.2); --chat-name-0: #588c7e; --chat-name-1: #b2a367; --chat-name-2: #c98f65; --chat-name-3: #bc5151; --chat-name-4: #5c8bd6; --chat-name-5: #7f6ab7; --chat-name-6: #a368ad; --chat-name-7: #aa6880; --chat-name-8: #6fad9b; --chat-name-9: #f2e394; --chat-name-10: #f2ae72; --chat-name-11: #f98f8a; --chat-name-12: #7daef4; --chat-name-13: #a691f2; --chat-name-14: #c894d3; --chat-name-15: #d895b0; --chat-name-16: #53c4a1; --chat-name-17: #eace5c; --chat-name-18: #ea8c47; --chat-name-19: #fc4f4f; --chat-name-20: #3d94ea; --chat-name-21: #7760ea; --chat-name-22: #af52c6; --chat-name-23: #e25696; --chat-name-24: #677c66; --chat-name-25: #9b8732; --chat-name-26: #8c5129; --chat-name-27: #8c3030; --chat-name-28: #1f5d91; --chat-name-29: #4335a5; --chat-name-30: #812a96; --chat-name-31: #992861; --note-snap-1: #ffffff; --note-snap-2: #ed1121; --note-snap-3: #8866ee; --note-snap-4: #66ccff; --note-snap-6: #eeaa00; --note-snap-8: #ffcc22; --note-snap-12: #cc6600; --note-snap-16: #6644cc; --note-snap-odd: #b3d944; --note-snap-other: #ff0000; --note-lane-a: #56b4e9; --note-lane-b: #e69f00; --note-lane-special: #f0e442; --note-mine: #f5707d; --note-lift: #6ad2f8; --note-roll: #d088f1; --story-glow: #ffffff; --story-star: #fff4cf; --random-bar: #ffcc22; --random-note: #ff6666; --mod-auto: #66ccff; --mod-faster: #ff6666; --mod-slower: #b2ff66; --mod-other: #ffcc22; } body, dialog { background: var(--bg); color: var(--text); font-family: "Gosu UI", "Gosu Fallback", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; font-size: 15px; line-height: 1.5; } #setup { border: 1px solid var(--line); } #setup::backdrop { background: var(--bg); } #setup h3 { font-size: 28px; margin: 0 0 20px; } #setup h3:focus { outline: none; } #setup-preview-frame iframe { border: 0; } #setup-timing { font-family: "Gosu Counter", "Gosu UI", sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; } #setup footer { border-top: 1px solid var(--line); } #setup-next { background: var(--accent); color: var(--bg); font-weight: 700; } input, select, textarea { font-family: inherit; font-size: inherit; } .hints button, #download-list strong, #selected-heading, .chart-title { font-weight: 700; } #preferences, #display-settings, #audio-settings, #offsets, .room-chat-log { font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; } #result-accuracy, #result-combo, #result-mm-earned, #result-mm-max, .result-judge-count { font-family: "Gosu Counter", sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; } .room-chat-panel { background: var(--chat-bg); color: var(--text); border-left: 1px solid var(--line); } .room-chat-head { border-bottom: 1px solid var(--line); } .room-chat-head h2 { font-size: 16px; } .room-chat-close, .room-chat-settings { font-size: 12px; background: transparent; color: var(--dim); border: 0; } .room-chat-tab { font-size: 13px; background: transparent; color: var(--dim); border: 0; border-bottom: 2px solid transparent; } .room-chat-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); } .room-chat-tab-close, .room-chat-channel { font-size: 13px; background: transparent; color: var(--dim); border: 0; } .room-chat-channel:nth-child(even) { background: var(--chat-alt); } .room-chat-channel[aria-pressed="true"] { color: var(--text); } .room-chat-ticker, .room-chat-popup { background: var(--chat-bg); color: var(--text); border: 1px solid var(--line); font-size: 13px; line-height: 1.6; } .room-chat-resize { cursor: ew-resize; } .room-chat-resize:focus-visible, .room-chat-resize:hover { background: var(--accent); outline: 0; } .room-chat-count { font-size: 12px; color: var(--dim); } .room-chat-message { line-height: 1.6; } .room-chat-compose textarea { font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; font-size: 13px; } .room-chat-message[data-self="true"] .room-chat-name { color: var(--accent); } .room-chat-text[data-action="true"] { font-style: italic; } /* osu!lazer ChatLine: 13 px, alternate rows tinted, names in one of 32 sender colours. */ .room-chat-message { font-size: 13px; } .room-chat-message:nth-child(even) { background: var(--chat-alt); } .room-chat-time { color: var(--dim); font-weight: 600; font-variant-numeric: tabular-nums; } .room-chat-name { font-weight: 700; } .room-chat-name[data-colour="0"] { color: var(--chat-name-0); } .room-chat-name[data-colour="1"] { color: var(--chat-name-1); } .room-chat-name[data-colour="2"] { color: var(--chat-name-2); } .room-chat-name[data-colour="3"] { color: var(--chat-name-3); } .room-chat-name[data-colour="4"] { color: var(--chat-name-4); } .room-chat-name[data-colour="5"] { color: var(--chat-name-5); } .room-chat-name[data-colour="6"] { color: var(--chat-name-6); } .room-chat-name[data-colour="7"] { color: var(--chat-name-7); } .room-chat-name[data-colour="8"] { color: var(--chat-name-8); } .room-chat-name[data-colour="9"] { color: var(--chat-name-9); } .room-chat-name[data-colour="10"] { color: var(--chat-name-10); } .room-chat-name[data-colour="11"] { color: var(--chat-name-11); } .room-chat-name[data-colour="12"] { color: var(--chat-name-12); } .room-chat-name[data-colour="13"] { color: var(--chat-name-13); } .room-chat-name[data-colour="14"] { color: var(--chat-name-14); } .room-chat-name[data-colour="15"] { color: var(--chat-name-15); } .room-chat-name[data-colour="16"] { color: var(--chat-name-16); } .room-chat-name[data-colour="17"] { color: var(--chat-name-17); } .room-chat-name[data-colour="18"] { color: var(--chat-name-18); } .room-chat-name[data-colour="19"] { color: var(--chat-name-19); } .room-chat-name[data-colour="20"] { color: var(--chat-name-20); } .room-chat-name[data-colour="21"] { color: var(--chat-name-21); } .room-chat-name[data-colour="22"] { color: var(--chat-name-22); } .room-chat-name[data-colour="23"] { color: var(--chat-name-23); } .room-chat-name[data-colour="24"] { color: var(--chat-name-24); } .room-chat-name[data-colour="25"] { color: var(--chat-name-25); } .room-chat-name[data-colour="26"] { color: var(--chat-name-26); } .room-chat-name[data-colour="27"] { color: var(--chat-name-27); } .room-chat-name[data-colour="28"] { color: var(--chat-name-28); } .room-chat-name[data-colour="29"] { color: var(--chat-name-29); } .room-chat-name[data-colour="30"] { color: var(--chat-name-30); } .room-chat-name[data-colour="31"] { color: var(--chat-name-31); } .room-chat-meta, .room-chat-status, .room-chat-context { color: var(--dim); } .room-chat-new { color: var(--accent); } /* osu!lazer OsuTextBox with the overlay colours: Background5 fill, Background4 + a 3px Highlight1 border on focus (fill fades 200ms Out), Background1 selection, italic placeholder. */ input, select, .room-chat-compose textarea { background: var(--textbox); color: var(--text); border: 3px solid var(--textbox); caret-color: var(--text); transition: background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } input:focus, select:focus, .room-chat-compose textarea:focus { outline: 0; background: var(--textbox-focus); border-color: var(--textbox-border); } input::selection { background: var(--button-light); } input::placeholder, .room-chat-compose textarea::placeholder { color: var(--dim); font-style: italic; } #settings .settings-row input:is([type="text"], [type="number"], [type="url"], :not([type])) { font-size: 20px; } .settings-row .unit, #offset-total { color: var(--dim); } #medley h3 { font-size: 17px; } #medley-count, #medley-page, .medley-help { color: var(--dim); } .medley-help { font-size: 12px; } .medley-picked-name { font-size: 17px; font-weight: 700; } .medley-picked-chart { color: var(--dim); font-size: 12px; } #medley-songs li { background: var(--pulse-rest); border-left: 4px solid var(--lamp-bar); } .medley-mark { color: var(--accent); font-size: 17px; } #medley-candidates li[aria-disabled="true"] { opacity: 0.4; } #medley-candidates li:focus-visible, #medley-songs li:focus-visible { outline: 1px solid var(--accent); } #medley-search { background: var(--search); border: 2px solid var(--dim); font-size: 17px; } #medley-search:focus { border-color: var(--accent); } /* Decision 30 → osu!lazer ShearedButton: Background3 fill (hue of the accent, saturation 0.1, lightness 0.25), a 2px border fading from that fill to Background1 (lightness 0.4) at the bottom, TorusAlternate 17 → 17px. */ button { background: var(--button); color: var(--text); border: 1px solid var(--button-light); font-family: inherit; font-size: 17px; } /* The search box gets its own lighter fill so it reads as a field over the chart background. */ /* osu!lazer's search box lights its border in the highlight colour while it has focus. */ #search-text { background: var(--search); border: 2px solid var(--dim); font-size: 17px; } #search-text:focus { border-color: var(--accent); } fieldset { border: 1px solid var(--line); } legend, #list-status, #difficulty, dt, #song-list li > span:last-child { color: var(--dim); } #list-pane[aria-busy="true"] #list-status { color: var(--accent); } #catalog-count, #catalog-elapsed { font-variant-numeric: tabular-nums; } #edit-field, #edit-map, #edit-sv canvas { background: var(--field); border: 1px solid var(--line); } #edit-inspector, #edit-charts { border-right: 1px solid var(--line); } #edit-message, #edit-saved, #edit-audio-status { color: var(--dim); } #edit-fb-list button[aria-pressed="true"], #edit-charts button[aria-current="true"], #edit-toolbar button[aria-pressed="true"], #edit-sv-effects button[aria-pressed="true"] { border-color: var(--text); } #edit-retime-modes button[aria-pressed="true"], .edit-retime-pick button[aria-pressed="true"] { border-color: var(--text); } #edit-story-sprites button[aria-pressed="true"], #edit-story-kinds button[aria-pressed="true"], #edit-story-easings button[aria-pressed="true"], #edit-story-ramp[aria-pressed="true"], .edit-story-track button[aria-pressed="true"] { border-color: var(--text); } .edit-story-track button { background: var(--dim); } .edit-story-head { background: var(--accent); } #edit-story-preview { background: var(--field); border: 1px solid var(--line); } #edit-retime-summary { font-variant-numeric: tabular-nums; } #edit-retime-apply { background: var(--act-save); border-color: var(--act-save-line); } #edit-audio-items { background: var(--field); border: 1px solid var(--line); } #edit-audio-items label:hover { background: var(--line); } #edit-audio-items label > span { color: transparent; } #edit-audio-items label:has(:checked) > span { color: var(--accent); } #edit-audio-items label:has(:disabled) { color: var(--dim); } #edit-audio-items label:has(:focus-visible) { outline: 1px solid var(--text); } /* lazer editor BottomBar: timestamp Torus Light 32 (spacing -2), BPM and progress 14 under it, play icon only, speed tabs as text that brighten and turn bold over 200 ms OutQuint. */ #edit-transport { background: var(--field); border-top: 1px solid var(--edge); } #edit-time { background: transparent; border: 0; font-size: 32px; font-weight: 400; letter-spacing: -2px; line-height: 1; font-variant-numeric: tabular-nums; } #edit-time:hover { background: var(--line); } #edit-progress, #edit-clock-bpm { color: var(--dim); font-size: 14px; line-height: 1.2; font-variant-numeric: tabular-nums; } #edit-play { background: transparent; border: 0; } #edit-speed > span { color: var(--dim); font-size: 13px; line-height: 1.2; } #edit-rates button, #edit-rates button[aria-pressed="true"] { background: transparent; border: 0; color: var(--dim); font-size: 14px; line-height: 16px; transition: color 200ms cubic-bezier(0.23, 1, 0.32, 1); } #edit-rates button:hover, #edit-rates button[aria-pressed="true"] { color: var(--text); } #edit-rates button[aria-pressed="true"] { font-weight: 700; } .panel-heading { color: var(--accent); } button[aria-pressed="true"], #settings-tabs button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } /* Editor buttons are tinted by what they do: save, tune, remove, run and add; everything else stays grey. */ #edit-save, #edit-export { background: var(--act-save); border-color: var(--act-save-line); } #edit-sync, #edit-audio { background: var(--act-tune); border-color: var(--act-tune-line); } #edit-keysound-clear, #edit-point-delete, #edit-discard { background: var(--act-danger); border-color: var(--act-danger-line); } #edit-test, #edit-engine { background: var(--act-run); border-color: var(--act-run-line); font-weight: 700; } #edit-fb-add, #edit-bookmark, #edit-keysound-apply, #edit-point-add { background: var(--act-add); border-color: var(--act-add-line); } #edit-save:hover, #edit-export:hover { background: color-mix(in srgb, var(--act-save) 82%, #ffffff); } #edit-sync:hover, #edit-audio:hover { background: color-mix(in srgb, var(--act-tune) 82%, #ffffff); } #edit-keysound-clear:hover, #edit-point-delete:hover, #edit-discard:hover { background: color-mix(in srgb, var(--act-danger) 82%, #ffffff); } #edit-test:hover, #edit-engine:hover { background: color-mix(in srgb, var(--act-run) 82%, #ffffff); } #edit-fb-add:hover:not(:disabled), #edit-bookmark:hover, #edit-keysound-apply:hover, #edit-point-add:hover { background: color-mix(in srgb, var(--act-add) 82%, #ffffff); } /* Inspector text reads like a game panel: bright accent headings, dim names, bold counter-font numbers. */ #edit-inspector h3, #edit-inspector summary { color: var(--accent); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; } #edit-inspector summary { list-style: none; padding: 6px 0; } #edit-inspector summary::-webkit-details-marker { display: none; } #edit-inspector details[open] > summary { color: var(--text); } #edit-inspector label { color: var(--dim); font-size: 13px; } #edit-inspector input, #edit-inspector select { color: var(--text); font-weight: 700; } #edit-inspector input[type="number"] { font-family: "Gosu Counter", "Gosu UI", sans-serif; font-variant-numeric: tabular-nums; } #edit-selected { font-family: "Gosu Counter", "Gosu UI", sans-serif; font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } #edit-keysound-current { color: var(--act-save-line); font-weight: 700; } /* Range windows over the level and length distributions. */ .range-bar { background: var(--line); } .range-bar.in { background: var(--accent); } .range-window { background: var(--accent-tint); border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); } .range-axis, .range-value { color: var(--dim); } /* Settings sliders: osu!lazer ShearedSliderBar, shear 0.2, the nub glides 250ms OutQuint; disabled at 0.3 like lazer. */ .slider { transform: skewX(-11.3deg); } .slider.gauge { transform: none; } .slider input { opacity: 0; } #rate-presets button { transform: translateX(-50%); font-weight: 700; background: transparent; color: var(--text); border: 0; } #rate-presets button.feel-press { transform: translateX(-50%) scale(0.9); } #rate-presets .feel-label, #rate-controls .slider { transform: none; } #rate-presets button[aria-pressed="true"] { color: var(--accent); } #rate-presets button:hover { color: var(--accent); } #rate-presets button:focus-visible { outline: 0; color: var(--accent); } #rate-custom, #pitch-toggle { background: transparent; border: 0; color: var(--dim); transform: none; font-size: 13px; } #rate-custom .feel-label, #pitch-toggle .feel-label { transform: none; } #rate-custom:hover, #pitch-toggle:hover { color: var(--text); } #rate-custom[aria-pressed="true"], #pitch-toggle[aria-pressed="true"] { color: var(--accent); font-weight: 700; } #rate-custom:focus-visible, #pitch-toggle:focus-visible { outline: 0; color: var(--accent); } #time-rate { background: transparent; border: 0; color: var(--accent); font-size: 18px; font-family: ui-monospace, Consolas, monospace; font-weight: 700; } #time-rate:focus { outline: 0; } #rate-value, #rate-input { color: var(--accent); font-size: 18px; font-family: ui-monospace, Consolas, monospace; font-weight: 700; } .slider-fill { background: var(--accent); } .slider-rest { background: var(--line); } .slider-nub { background: var(--text); border: 3px solid var(--accent); } .slider:focus-within .slider-nub { border-color: var(--text); background: var(--accent); } .slider:has(input:disabled) { opacity: 0.3; } .slider-fill, .slider-rest, .slider-nub { transition: left 250ms cubic-bezier(0.23, 1, 0.32, 1), width 250ms cubic-bezier(0.23, 1, 0.32, 1); } /* Every row reserves the bar width so selecting a row does not shift its text. */ /* The selected row's left bar takes its clear lamp colour; no lamp leaves it grey. */ :where(.song-catalog li, #story-charts li, #medley-songs li) { --lamp-bar: var(--line); } [data-lamp="clear"], li:has(.combo-lamp[data-state="clear"]) { --lamp-bar: var(--lamp-finish); } [data-lamp="gauge1"], li:has(.combo-lamp[data-state="gauge1"]) { --lamp-bar: var(--lamp-gauge1); } [data-lamp="gauge2"], li:has(.combo-lamp[data-state="gauge2"]) { --lamp-bar: var(--lamp-gauge2); } [data-lamp="gauge3"], li:has(.combo-lamp[data-state="gauge3"]) { --lamp-bar: var(--lamp-gauge3); } [data-lamp="fullcombo"], li:has(.combo-lamp[data-state="fullcombo"]) { --lamp-bar: var(--lamp-fc); } [data-lamp="perfect"], li:has(.combo-lamp[data-state="perfect"]) { --lamp-bar: var(--lamp-pf); } .song-catalog li { border-left: 4px solid transparent; } /* osu!lazer Panel: rows sit further right by kind (updateXOffset) - a chart 50 px, a closed song 100 px - and move over 400 ms OutQuint. The selected row stays in line with the rest (lazer pulls it 25 px out; it read as a jump, 2026-10-28): its selection layer, fading in over 100 ms and out over 200 ms OutQuint and pulsing with the song (songselect/pulse.js), marks it. Gradients are not allowed, so its flat --pulse-* colours carry the average of lazer's 0-50% accent gradient. */ .song-catalog li { margin-left: 75px; transition: margin-left 400ms cubic-bezier(0.23, 1, 0.32, 1), background 200ms cubic-bezier(0.23, 1, 0.32, 1); } #song-list li[aria-expanded="false"] { margin-left: 125px; } #song-list li[aria-expanded="true"], #song-list li[role="presentation"]:not(.more) { margin-left: 25px; } /* The rail moves opposite to the row on the same curve, so it stays still while the row glides. */ #song-list li.chart-in-song::before, #song-list li.more::before { background: var(--line); transition: left 400ms cubic-bezier(0.23, 1, 0.32, 1); } #song-list li[aria-expanded="true"] { background: var(--pulse-rest-song); transition: margin-left 400ms cubic-bezier(0.23, 1, 0.32, 1), background 100ms cubic-bezier(0.23, 1, 0.32, 1); } .song-catalog li[aria-selected="true"] { background: var(--pulse-rest); border-left-color: var(--lamp-bar); transition: margin-left 400ms cubic-bezier(0.23, 1, 0.32, 1), background 100ms cubic-bezier(0.23, 1, 0.32, 1); } /* The song select list is one straight column, the selected row included. */ #song-list li, #song-list li[aria-expanded], #song-list li[role="presentation"]:not(.more) { margin-left: 25px; } #song-list li.list-spacer { margin-left: 0; } /* Adjacent, uninterrupted light bars with achievement flashes. */ .chart-level { color: var(--accent); font-family: ui-monospace, Consolas, monospace; font-size: 22px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .source-level { color: var(--dim); font-family: ui-monospace, Consolas, monospace; font-size: 17px; font-variant-numeric: tabular-nums; } #source-level { font-size: 22px; } .chart-points, .chart-release { font-variant-numeric: tabular-nums; } .level-col { color: var(--dim); font-variant-numeric: tabular-nums; } .level-col.on, #song-list li[aria-selected="true"] .level-col { color: var(--text); } #level-head > * { white-space: nowrap; } .table-col { color: var(--dim); } #level-head .table-col.on { color: var(--text); } #level-head .level-col.on, #level-head .table-col.on { color: var(--accent); } #level-head .level-col, #level-head .table-col { border: 0; background: transparent; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; } .chart-lamp { color: var(--dim); background: var(--line); } .chart-lamp:not([data-state="none"]):not([data-state="unavailable"]) { background: currentColor; } /* Clear lamp: each step up gets a brighter centre core and a wider glow; perfect shines most. Clear is a flat grey bar. */ /* The lowest lamps read by brightness, never by fill height: height means "cleared only at a slower rate" (data-half below). An empty outline, a dim fill, then a bright fill with a rim. */ .chart-lamp.combo-lamp[data-state="none"] { background: transparent; box-shadow: inset 0 0 0 1px var(--lamp-none); } .chart-lamp.combo-lamp[data-state="played"] { color: var(--lamp-played); background: var(--lamp-played); box-shadow: none; } .chart-lamp.combo-lamp[data-state="clear"] { color: var(--lamp-finish); background: var(--lamp-finish); box-shadow: inset 0 0 0 1px var(--lamp-shine); } .combo-lamp[data-state="gauge1"] { color: var(--lamp-gauge1); background: linear-gradient(currentColor, var(--lamp-gauge1-core) 50%, currentColor); box-shadow: 0 0 2px currentColor, 0 0 3px currentColor; } .combo-lamp[data-state="gauge2"] { color: var(--lamp-gauge2); background: linear-gradient(currentColor, var(--lamp-gauge2-core) 50%, currentColor); box-shadow: 0 0 3px currentColor, 0 0 6px currentColor; } .combo-lamp[data-state="gauge3"] { color: var(--lamp-gauge3); background: linear-gradient(currentColor, var(--lamp-gauge3-core) 50%, currentColor); box-shadow: 0 0 4px currentColor, 0 0 8px currentColor; } .combo-lamp[data-state="fullcombo"] { color: var(--lamp-fc); box-shadow: 0 0 5px var(--lamp-fc-glow), 0 0 12px var(--lamp-fc-glow), 0 0 20px var(--lamp-fc-glow); } /* The flat chart-lamp fill above is more specific, so the face needs the same weight. */ .chart-lamp.combo-lamp[data-state="perfect"] { color: var(--lamp-pf); background: var(--lamp-pf-core); box-shadow: 0 0 5px currentColor, 0 0 12px currentColor, 0 0 22px currentColor, 0 0 34px currentColor; } /* Cleared only below the chosen Time Rate: the lower half lights, the upper half stays an empty lamp. */ /* As specific as the state rules above, so a half lamp keeps its empty upper half in every state. */ .chart-lamp.combo-lamp[data-half] { box-shadow: inset 0 11px 0 var(--line); } /* Full combo and perfect: a glow flash and a white shine down the bar, timed to the song by songselect/pulse.js. Full combo is gold; perfect is a cyan-tinted platinum above it with the widest glow. */ .combo-lamp .lamp-flash, .combo-lamp .lamp-shine { opacity: 0; } .combo-lamp[data-state="fullcombo"] .lamp-flash { box-shadow: 0 0 6px var(--lamp-fc-glow), 0 0 14px var(--lamp-fc-glow), 0 0 26px var(--lamp-fc-glow); } .combo-lamp[data-state="perfect"] .lamp-flash { box-shadow: 0 0 6px currentColor, 0 0 14px currentColor, 0 0 26px currentColor; } .combo-lamp .lamp-shine { background: linear-gradient(transparent, var(--lamp-shine), transparent); } /* Key binding is a keyboard stage: outer white keys, inner light-teal keys, a mint centre key (kept off --accent so a held centre still shows). */ :root { --key-white: #e9e8e8; --key-pink: #8fd9ec; --key-special: #4cd9a8; } .key-lane { background: transparent; border: 0; transform: none; } .key-lane:hover, .key-lane:active { background: transparent; transform: none; } .key-lane:focus-visible { outline: 2px solid var(--accent); } .key-track { background: var(--key-white); border: 2px solid var(--key-white); border-bottom: 5px solid var(--dim); } .key-lane[data-tone="pink"] .key-track { background: var(--key-pink); border-color: var(--key-pink); } .key-lane[data-tone="special"] .key-track { background: var(--key-special); border-color: var(--key-special); } .key-name { color: var(--on-accent); font-size: clamp(11px, 2vw, 18px); font-weight: 700; } .key-number { color: var(--dim); font-size: 12px; } .key-arrow { color: var(--accent); font-size: 40px; line-height: 1; opacity: 0; } .key-lane[aria-current="true"] .key-arrow { opacity: 1; } .key-lane:hover .key-track, .key-lane[aria-current="true"] .key-track { border-color: var(--accent); } .key-lane[data-held] .key-track { background: var(--accent); border-color: var(--accent); } .key-lane[aria-invalid="true"] .key-track { border-color: var(--text); border-style: dashed; } .key-note { background: var(--on-accent); } #key-chord { color: var(--dim); } /* Large lettering and a selection cursor, without button surfaces. */ /* The title's colour sits under #backdrop so the playing song's background shows through the menu. */ body:has(#title:not([hidden])) { background: var(--title-bg); } #title { background: transparent; color: var(--title-ink); } /* The panel appears only while a song background is on screen. */ #app:has(#bg:not([hidden])) #title-menu::before { background: var(--chat-bg); } #title-word { font-family: "Gosu Counter", "Gosu UI", sans-serif; font-size: clamp(100px, 12vw, 160px); font-weight: 700; letter-spacing: -0.06em; line-height: 1; color: var(--title-accent); } #title-menu button { background: transparent; border: 0; color: var(--title-dim); font-weight: 500; white-space: nowrap; transition: color 120ms, transform 120ms; } #title-menu button { font-size: clamp(23px, 2.4vw, 30px); letter-spacing: -1px; } #title-menu button[aria-current="true"] { color: var(--title-ink); } #title-menu button[aria-current="true"] { transform: translateX(12px); } .title-cursor { color: var(--title-accent); font-size: 40px; line-height: 1; transform: translateY(-55%); opacity: 0; } #title-menu button[aria-current="true"] .title-cursor { opacity: 1; } #title-menu button:active { color: var(--title-accent); } #title-menu button:focus-visible { color: var(--title-ink); outline: 0; } @media (max-width: 700px) { #title-word { font-size: clamp(100px, 22vw, 155px); } #title-menu button { font-size: 24px; } } /* osu!lazer SettingsPanel: in from the left over 600 ms OutQuint while fading over 300 ms OutQuint; out the same way. */ #settings { transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); } #settings.away { transform: translateX(calc(-50vw - 50%)); opacity: 0; } #title-web { background: transparent; border: 0; color: var(--text); font-size: 13px; line-height: 1.2; opacity: 0.8; } #title-web:hover, #title-web:focus-visible { opacity: 1; } #title-web:focus-visible { outline: 2px solid var(--accent); } #title-web .title-brand { font-family: "Gosu Counter", "Gosu UI", sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; } .logo-disc { color: var(--line); } .logo-ring { color: var(--accent); } .logo-notes { color: var(--text); } #title-player { background: var(--chat-bg); color: var(--text); text-shadow: 0 1px 2px var(--bg); } #title-time { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; } #title-song b { font-weight: 700; } #title-song em { font-style: normal; font-weight: 700; color: var(--accent); font-family: "Gosu Counter", "Gosu UI", sans-serif; font-size: 20px; line-height: 1.2; font-variant-numeric: tabular-nums; } #title-song em:empty { display: none; } /* Progress bar resizes over 500 ms OutQuint; music buttons take a 60% accent wash on hover (lazer's YellowDark at 0.6). */ .title-track { background: color-mix(in srgb, var(--text) 28%, transparent);transition: height 500ms cubic-bezier(0.23, 1, 0.32, 1); } #title-progress span { background: var(--accent); } #title-progress span::after { background: var(--title-ink); } #title-controls button { background: transparent; color: var(--text); border: 0; } #title-controls button:hover, #title-controls button:focus-visible { background: color-mix(in srgb, var(--accent) 60%, transparent); outline: 0; } /* Volume overlay: 100ms fade, selected meter grows to 1.04 over 500ms (OutExpo), master in the accent. */ #volume { background: var(--scrim); opacity: 0; transition: opacity 100ms linear; } #volume[data-shown] { opacity: 1; } .volume-meter { transform: scale(1); transition: transform 500ms cubic-bezier(0.19, 1, 0.22, 1); } .volume-meter[data-selected] { transform: scale(1.04); } .volume-track { color: var(--line); } .volume-fill { color: var(--text); } .volume-meter[data-volume="master"] .volume-fill { color: var(--accent); } .volume-value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; } .volume-name { background: var(--field); color: var(--dim); font-size: 12px; font-weight: 700; } .volume-meter[data-selected] .volume-name { background: var(--accent-tint); color: var(--text); } /* Bottom bar: the command buttons (이펙터 F1 …) and the status tiles (scroll speed, Time Rate, health …) are one shape, .tile: lazer's ShearedButton, sheared 11.31° with the label upright, a 2px border and radius 7. Defaults stay button grey; an option that differs from its default takes its own option's colour, softly: an 18% tint with a full-colour border, like the pressed buttons of the effector window. Health takes its gauge stage colour. */ .hints .tile { --mod: var(--mod-other); font-size: 13px; font-weight: 700; line-height: 1.2; background: var(--button); border: 2px solid var(--button-light); border-radius: 7px; color: var(--text); transform: skewX(-11.31deg); } .hints .tile[data-mod] { background: color-mix(in srgb, var(--mod) 18%, var(--bg)); border-color: var(--mod); color: var(--text); } :root { --fx-rate: #ffcc22; --fx-sight: #5fe0c0; --fx-lane: #ff9966; } .hints .tile[data-mod="auto"] { --mod: var(--mod-auto); } .hints .tile[data-mod="rate"] { --mod: var(--fx-rate); } .hints .tile[data-mod="sight"] { --mod: var(--fx-sight); } .hints .tile[data-mod="lane"] { --mod: var(--fx-lane); } .hints .tile[data-mod="health0"] { --mod: var(--dim); } .hints .tile[data-mod="health1"] { --mod: var(--lamp-gauge1); } .hints .tile[data-mod="health2"] { --mod: var(--lamp-gauge2); } .hints .tile[data-mod="health3"] { --mod: var(--lamp-gauge3); } /* Each command button is a slightly different tint of the button grey, by its place in the bar; changed options keep their mod colour. */ :root { --tile-1: #39484c; --tile-1-line: #5c757a; --tile-2: #39414c; --tile-2-line: #5c697a; --tile-3: #3c394c; --tile-3-line: #615c7a; --tile-4: #47394c; --tile-4-line: #735c7a; --tile-5: #4c3942; --tile-5-line: #7a5c6b; --tile-6: #4c3c39; --tile-6-line: #7a615c; --tile-7: #4c4739; --tile-7-line: #7a735c; --tile-8: #394c42; --tile-8-line: #5c7a6b; } .hints button.tile:nth-of-type(8n+1):not([data-mod]):not(:active):not(:focus-visible) { background: var(--tile-1); border-color: var(--tile-1-line); } .hints button.tile:nth-of-type(8n+2):not([data-mod]):not(:active):not(:focus-visible) { background: var(--tile-2); border-color: var(--tile-2-line); } .hints button.tile:nth-of-type(8n+3):not([data-mod]):not(:active):not(:focus-visible) { background: var(--tile-3); border-color: var(--tile-3-line); } .hints button.tile:nth-of-type(8n+4):not([data-mod]):not(:active):not(:focus-visible) { background: var(--tile-4); border-color: var(--tile-4-line); } .hints button.tile:nth-of-type(8n+5):not([data-mod]):not(:active):not(:focus-visible) { background: var(--tile-5); border-color: var(--tile-5-line); } .hints button.tile:nth-of-type(8n+6):not([data-mod]):not(:active):not(:focus-visible) { background: var(--tile-6); border-color: var(--tile-6-line); } .hints button.tile:nth-of-type(8n+7):not([data-mod]):not(:active):not(:focus-visible) { background: var(--tile-7); border-color: var(--tile-7-line); } .hints button.tile:nth-of-type(8n+0):not([data-mod]):not(:active):not(:focus-visible) { background: var(--tile-8); border-color: var(--tile-8-line); } /* The effector frame is the one big button; the F1 tile inside has no border or fill of its own. */ .hints .effector button.tile:not([data-mod]):not(:active):not(:focus-visible) { background: transparent; border-color: transparent; } .hints .effector { background: var(--tile-2); border: 2px solid var(--tile-2-line); border-radius: 7px; transform: skewX(-11.31deg); } .hints .effector .tile { transform: none; } /* The exposure time alone is a reference value, not a control: no button frame around it. */ #visibility-group:not(:has(#visibility-summary)) { background: none; border-color: transparent; } .hints button.tile:focus-visible { border-color: var(--accent); outline: 0; } .hints button.tile:active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .hints .tile :is(small, kbd) { font-family: inherit; font-weight: 500; } .hints output.tile small { text-transform: uppercase; border-bottom: 1px solid color-mix(in srgb, currentColor 55%, transparent); } #scroll-summary strong, #rate-summary strong, #visibility-summary strong { font-family: "Gosu Counter", "Gosu UI", sans-serif; font-weight: 700; } #exposure-summary, #mod-summary { font-size: 13px; font-weight: 700; color: var(--text); } #exposure-summary { font-family: "Gosu Counter", "Gosu UI", sans-serif; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; } #exposure-summary b { font-size: 16px; font-weight: 700; } #exposure-summary span { font-size: 11px; font-weight: 700; margin-left: 3px; } #mod-summary .mod-key { background: var(--accent); color: var(--on-accent); font-weight: 900; } #notices > p, #popups > p { background: var(--chat-bg); color: var(--text); font-size: 14px; } #player { font-size: 15px; line-height: 1.2; } .avatar { background-color: var(--button); color: var(--text); } #player .feel-label > span { font-size: 12px; color: var(--dim); } #player .feel-label > span b { color: var(--text); } #sort-options button { font-size: 1.1em; } #key-pad { background: var(--field); border: 1px solid var(--line); } #key-pad:focus { border-color: var(--accent); } #multi-top, #multi-room-info, #multi-rooms, #multi-room-members, #multi-commands, #multi-room-commands { background: var(--scrim); } #multi-rooms button:disabled { opacity: 0.4; } #multi-room-members td { background: var(--field); } #multi-room-members tr.me td { background: var(--pulse-rest); } #multi-room-members .c-slot { color: var(--accent); } .multi-state::before { content: '●'; margin-right: 6px; } .multi-state:empty::before { content: none; } .multi-state:is([data-phase="lobby"], [data-status="ready"], [data-status="finished"]) { color: var(--lamp-gauge1); } .multi-state:is([data-phase="preparing"], [data-phase="arming"]) { color: var(--lamp-100); } .multi-state:is([data-phase="playing"], [data-status="playing"]) { color: var(--lamp-gauge2-core); } .multi-state:is([data-status="aborted"], [data-status="timeout"], [data-status="left"], [data-status="missing"]) { color: var(--mod-faster); } .multi-room-pips i { background: var(--line); } .multi-room-pips i[data-on="true"] { background: var(--accent); } #multi-link::before { background: var(--lamp-clear); } #multi-link[data-state="wait"]::before { background: var(--lamp-100); } #multi-open-create:not(:disabled), #multi-room-commands [data-action="start"]:not(:disabled) { background: var(--accent); color: var(--on-accent); } #multi-open-create:not(:disabled) kbd, #multi-room-commands [data-action="start"]:not(:disabled) kbd { color: var(--on-accent); } /* Detail hero: the chart background fills it; level, chart name and title sit on a dark band at its foot. */ /* Pictures crossfade at full strength inside #backdrop, which alone sets the dim (osu!lazer dims the whole background stack), so two overlapping pictures never add up to a brighter screen. */ #bg { opacity: 0; transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } /* Title: the picture shows its left 90%; a new entry or picture slides in from 75% (main.js dockBackground). */ body:has(#title:not([hidden])) :is(#bg, #bg-old) { transform: translateX(10%); } body:has(#title:not([hidden])) #bg:not(.docked) { transform: translateX(25%); } #bg-old { opacity: 1; } #bg-old.gone { opacity: 0; transition: opacity 0.25s linear; } #bg.shown { opacity: 1; } /* The same brightness as the game: the background dim setting (data-dim, default 75%). */ #backdrop { opacity: calc(1 - attr(data-dim type(), 75) / 100); transition: opacity 500ms cubic-bezier(0.61, 1, 0.88, 1); } #backdrop.instant { transition: none; } /* Tab reveals the artwork at full brightness and clears menus and overlays. */ body.background-view #app > :not(#backdrop) { opacity: 0; } body.background-view #backdrop { opacity: 1; } #bg.instant { transition: none; } /* osu!lazer MainMenu: with the menu buttons open the background sits at Gray(0.8), faded over 500 ms OutSine. */ #title:not([hidden]) ~ #backdrop { opacity: 0.8; } /* Starting a chart (osu!lazer): the row flashes white 40% and clears over 1000 ms OutQuint, song select fades out over 300 ms OutQuint, the background brightens over 800 ms OutQuint and the chart card grows from 0.7 over 650 ms OutQuint while fading in over 500 ms. */ #song-list li.activated { background: var(--activation); transition: none; } #song-list li.released { transition: background 1000ms cubic-bezier(0.23, 1, 0.32, 1), border-color 0.12s ease-out, margin-left 400ms cubic-bezier(0.23, 1, 0.32, 1); } /* The chat drawer resizes the list columns like osu!lazer's ScreenOffsetContainer, which follows its target with Interpolation.DampContinuously at a 100 ms half-life: 1 - 2^(-t / 100 ms), cut at 700 ms (decision of 2026-10-28). */ #songselect { transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), grid-template-columns 700ms linear(0, 0.293 7.1%, 0.5 14.3%, 0.646 21.4%, 0.75 28.6%, 0.823 35.7%, 0.875 42.9%, 0.938 57.1%, 0.969 71.4%, 0.984 85.7%, 1), margin-right 700ms linear(0, 0.293 7.1%, 0.5 14.3%, 0.646 21.4%, 0.75 28.6%, 0.823 35.7%, 0.875 42.9%, 0.938 57.1%, 0.969 71.4%, 0.984 85.7%, 1); } #songselect.leaving { opacity: 0; } /* osu!lazer SongSelect wedges (updateWedgeVisibility): arriving, the title and details wedges slide in from 150 px left and the filter from 150 px right over 600 ms OutQuint, fading in over 200 ms Easing.In; starting a chart sends them back the same way. */ #detail, #list-head { transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms cubic-bezier(0.11, 0, 0.5, 0); } #songselect.entering #detail, #songselect.leaving #detail { transform: translateX(-150px); opacity: 0; } #songselect.entering #list-head, #songselect.leaving #list-head { transform: translateX(150px); opacity: 0; } #songselect.entering #detail, #songselect.entering #list-head { transition: none; } #backdrop.loading { opacity: 1; transition: opacity 800ms cubic-bezier(0.23, 1, 0.32, 1); } #loader { background: var(--field); border: 1px solid var(--line); opacity: 0; transform: scale(0.7); } #loader.shown { opacity: 1; transform: none; transition: transform 650ms cubic-bezier(0.23, 1, 0.32, 1), opacity 500ms cubic-bezier(0.23, 1, 0.32, 1); } /* ContentOut: back to 0.7 over 600 ms and out over 300 ms, both OutQuint. */ #loader.shown.out { opacity: 0; transform: scale(0.7); transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); } #loader-title { font-size: 20px; font-weight: 700; } #loader-chart { color: var(--dim); } #loader-level { white-space: nowrap; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; } #loader-level span { font-size: 13px; } #loader-level b { font-size: 44px; font-weight: 900; } /* Results (osu!lazer ResultsScreen): the screen comes in over 250 ms while the background dims to half. */ #result { transition: opacity 250ms linear; } #hud-preview, #drum-hud-preview { background: var(--field); } #settings-preview-frame { background: var(--field); } #settings-preview > p { color: var(--dim); font-size: 12px; } #hud-preview iframe, #drum-hud-preview iframe { border: 0; } .hud-preview-page { background: var(--field); } #preview-error { color: var(--text); font-size: 14px; } #hud-layout-status, #drum-hud-status { color: var(--dim); font-size: 12px; } #result.entering { opacity: 0; transition: none; } #backdrop.result-dim { opacity: 0.125; transition: opacity 250ms linear; } /* Results use the same flat surfaces and cyan accent as song select. */ :root { --result-kool: #54dded; --result-cool: #a691f2; --result-good: #eace5c; --result-miss: #f98f8a; --result-fast: #75b2f2; --result-slow: #f2c15f; --result-health1: var(--lamp-gauge1); --result-health2: var(--lamp-gauge2); --result-health3: var(--lamp-gauge3); } #result { background: var(--scrim); font-family: "Gosu UI", "Gosu Fallback", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; } #result-heading { color: var(--dim); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; } #result-heading:focus { outline: none; } #result-song { font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; } #result-context { border-left: 1px solid var(--line); } #result-artist { font-size: 15px; } #result-creator, #result-chart-stats { font-size: 12px; } #result-chart-name { color: var(--text); font-size: 15px; font-weight: 500; } #result-flags { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; } /* The challenge chip: mint while it runs, red when it broke, white when it held to the end. */ [data-challenge] { padding: 2px 8px; border-radius: 5px; background: var(--challenge); color: var(--bg); } [data-challenge="fail"] { background: var(--challenge-fail); } [data-challenge="done"] { background: var(--challenge-done); } #result-state { color: var(--accent); font-family: "Gosu Counter", sans-serif; font-size: clamp(32px, 4vw, 48px); font-style: italic; font-weight: 700; letter-spacing: -0.01em; line-height: 1; } #result[data-completed="false"] #result-state { color: var(--result-miss); } #result-run { background: var(--line); border: 1px solid var(--line); font-size: 12px; line-height: 1.5; } #result-run summary { background: var(--accent-tint); color: var(--accent); font-weight: 700; letter-spacing: 0.08em; cursor: pointer; } #result-run summary:hover { color: var(--text); } #result-run summary:focus-visible { outline: 2px solid var(--accent); } #result-run .run-toggle { border: 1px solid currentColor; font-family: "Gosu Counter", sans-serif; font-size: 14px; line-height: 1; } #result-run:not([open]) .run-toggle { transform: rotate(90deg); } .run-slot dt { color: var(--dim); font-size: 10px; font-weight: 500; line-height: 1.2; } .run-slot dd { background: var(--field); border: 1px solid var(--line); } .run-slot strong { color: inherit; font-family: "Gosu Counter", "Gosu UI", sans-serif; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .run-slot small { font-size: 10px; line-height: 1; } .run-slot dd > :last-child { line-height: 1; } .run-slot.run-number strong { font-size: 26px; } .run-slot #result-run-rate { font-size: 16px; } .run-slot[data-compact="true"] #result-offsets { font-size: 20px; } .run-slot[data-active="false"] dd { color: var(--dim); } .run-slot[data-kind="exposure"][data-active="true"] dd { background: var(--field); border-color: var(--line); color: var(--text); } .run-slot[data-active="true"] dd { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); } .run-slot[data-active="true"][data-kind="rate"] dd { background: var(--accent); color: var(--on-accent); } .run-slot[data-active="true"][data-kind="mode"] dd, .run-slot[data-active="true"][data-kind="pause"] dd, .run-slot[data-active="true"][data-kind="offset"] dd { background: var(--field); color: var(--result-slow); border-color: var(--result-slow); } .run-slot[data-active="true"][data-kind="note"] dd { background: var(--field); color: var(--result-cool); border-color: var(--result-cool); } .run-slot[data-stage="1"] dd { background: var(--field); color: var(--result-health1); border-color: var(--result-health1); } .run-slot[data-stage="2"] dd { background: var(--field); color: var(--result-health2); border-color: var(--result-health2); } .run-slot[data-stage="3"] dd { background: var(--field); color: var(--result-health3); border-color: var(--result-health3); } .run-slot #result-health { font-size: 18px; } .run-slot #result-mods, .run-slot #result-note { font-size: 12px; } .run-slot #result-exposure, .run-slot #result-sudden, .run-slot #result-hidden { font-size: 14px; } #result-adjustment-row { color: var(--dim); font-size: 11px; } #result-calibration { color: var(--dim); font-size: 12px; } #result-total dt { color: var(--text); font-size: 12px; letter-spacing: 0.06em; } #result-combo-status { border: 1px solid currentColor; color: var(--accent); font-size: 10px; font-weight: 700; white-space: nowrap; } #result-combo[data-full="true"] { color: var(--accent); } #result-mm-status, #result-performance-status { color: var(--dim); font-size: 12px; font-weight: 400; } #result-performance dt { color: var(--dim); } #result-total .result-mm > dd { color: var(--accent); } #result-ratings { background: var(--bg); border: 1px solid var(--line); } #result-performance dt { font-size: 11px; letter-spacing: 0.04em; } #result-performance dd { color: var(--text); font-size: 16px; font-weight: 700; } #result-total > div > dd { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; line-height: 1.1; } #result-total .result-of { font-family: "Gosu Counter", sans-serif; font-size: clamp(14px, 1.6vw, 18px); font-variant-numeric: tabular-nums; line-height: 1.2; } #result-total .result-mm > dd { font-size: 26px; } #result-total .result-mm .result-of { font-size: 14px; } #result-total .result-value > span { white-space: nowrap; } #result-total #result-points { font-family: "Gosu Counter", sans-serif; font-size: clamp(32px, 3.5vw, 50px); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1.2; } #result-total #result-best-status { color: var(--dim); font-size: 11px; font-weight: 500; line-height: 1.5; } #result-total #result-best-status.improved { color: var(--accent); font-weight: 700; } #result-health-meter[data-stage="1"] { color: var(--result-health1); } #result-health-meter[data-stage="2"] { color: var(--result-health2); } #result-health-meter[data-stage="3"] { color: var(--result-health3); } #result-health-rail { background: color-mix(in srgb, currentColor 15%, var(--field)); } #result-health-fill { background: currentColor; } #result dd { font-variant-numeric: tabular-nums; } #result h2 { font-size: 12px; font-weight: 400; letter-spacing: 0.06em; } #result-comparison { border-top: 1px solid var(--line); } #result-ranking button { font-size: 11px; } #result-ranking { border-top: 1px solid var(--line); } #result-ranking button[aria-pressed="true"] { color: var(--accent); background: var(--accent-tint); border-color: var(--accent); } #result-ranking-condition, #result-ranking-status { font-size: 12px; } #result-ranking-rows { font-size: 13px; font-variant-numeric: tabular-nums; } #result-ranking-rows li { border-bottom: 1px solid var(--line); } #result-ranking-rows li[aria-current="true"] { background: var(--accent-tint); color: var(--accent); font-weight: 700; } #result-ranking-rows li > span:nth-child(2) { text-overflow: ellipsis; white-space: nowrap; } #result-ranking-gap { color: var(--accent); font-size: 12px; } #comparison-status { color: var(--dim); font-size: 12px; } #comparison { font-size: 12px; } #comparison dd { font-size: 20px; font-weight: 700; } #comparison [data-change="better"] { color: var(--accent); } #comparison [data-change="worse"] { color: var(--result-miss); } #comparison-legs p { color: var(--dim); font-size: 12px; } #comparison-legs li { font-variant-numeric: tabular-nums; } #comparison-legs li small { color: var(--dim); } #comparison-legs [data-change="better"] strong { color: var(--accent); } #comparison-legs [data-change="worse"] strong { color: var(--result-miss); } #history li.pickable { cursor: pointer; } #history li.pickable:hover, #result-ranking-rows li.pickable:hover { color: var(--accent); } #history li.ghost, #result-ranking-rows li.ghost { color: var(--accent); font-weight: 700; } .result-grade dt { color: inherit; font-family: "Gosu Counter", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; } .result-judge-count { color: var(--text); font-size: 11px; line-height: 1; } .result-grade[data-grade="kool"] { color: var(--result-kool); } .result-grade[data-grade="cool"] { color: var(--result-cool); } .result-grade[data-grade="good"] { color: var(--result-good); } .result-grade[data-grade="miss"] { color: var(--result-miss); } #result-timing dt { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; } #result-timing dd { font-size: 17px; font-weight: 700; } #result-timing [data-timing="fast"] { color: var(--result-fast); } #result-timing [data-timing="slow"] { color: var(--result-slow); } #result-timeline { background: var(--field); } #result-timeline > span { background: var(--line); } #result-timeline > i[data-grade="good"] { background: var(--result-good); } #result-timeline > i[data-grade="miss"] { background: var(--result-miss); } #result-timeline { cursor: crosshair; } #insight-scatter circle[data-grade="kool"] { fill: var(--result-kool); } #insight-scatter circle[data-grade="cool"] { fill: var(--result-cool); } #insight-scatter circle[data-grade="good"] { fill: var(--result-good); } #insight-scatter circle[data-grade="miss"] { fill: var(--result-miss); } #result-insight text { fill: var(--dim); } #result-insight .rule { stroke: var(--line); stroke-width: .5; } #result-insight .zero { stroke: var(--text); stroke-width: 1; } #insight-trend .line { stroke: var(--dim); } #insight-trend circle.past { fill: var(--dim); } #insight-trend circle.now, #insight-trend text.now { fill: var(--result-kool); } #result-review { background: var(--field); color: var(--text); border: 1px solid var(--line); } #result-review p, .review-hits { font-size: 12px; } #result-review footer { font-size: 11px; } .review-tip { background: var(--field); color: var(--text); border: 1px solid var(--line); font-size: 11px; } .review-key .note { background: var(--result-kool); } .review-key .down { background: var(--result-cool); } .review-key .up { border: 1.5px solid var(--result-cool); background: var(--field); } .review-key .held { background: var(--result-cool); } .review-plot text { fill: var(--text); font-size: 10px; } .review-grid { stroke: var(--line); stroke-width: 1; } .review-note { fill: var(--text); } .review-note[data-grade="kool"] { fill: var(--result-kool); } .review-note[data-grade="cool"] { fill: var(--result-cool); } .review-note[data-grade="good"] { fill: var(--result-good); } .review-note[data-grade="miss"] { fill: var(--result-miss); } .review-note[data-grade="none"] { opacity: .4; } .review-held { stroke: var(--result-cool); stroke-width: 3; } .review-input { stroke: var(--result-cool); stroke-width: 1.5; } .review-input[data-down="true"] { fill: var(--result-cool); } .review-input[data-down="false"] { fill: var(--field); } .review-cursor { stroke: var(--text); stroke-width: 1; stroke-dasharray: 3 3; } .review-hits [data-grade="good"] { color: var(--result-good); } .review-hits [data-grade="miss"] { color: var(--result-miss); } .result-track { background: var(--field); } .result-bar { background: color-mix(in srgb, currentColor 25%, var(--field)); } #result-foot { border-top: 1px solid var(--edge); } #result-foot button { font-size: 15px; font-weight: 700; } #result-foot #retry { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } #result-submission { font-size: 11px; } #result-foot kbd { font-family: inherit; font-size: 11px; } #result-saved, #result-warnings { color: var(--result-miss); font-size: 12px; } @media (max-height: 720px) { #result-total #result-points { font-size: clamp(32px, 3.5vw, 50px); line-height: 1.1; } } @media (max-width: 760px) { #result-context { border-left: 0; } #result-foot { background: var(--bg); } } @media (max-width: 480px) { #result-foot > button { font-size: 12px; } } /* Song select: every info pane sits on the same dim so text reads over the chart background. */ #top, #detail, #list-pane, #commands, #medley-top, #medley-detail, #medley-list, #medley-commands { background: var(--scrim); } #hero-level { white-space: nowrap; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; } #hero-level span { font-size: 11px; } #hero-level b { font-size: 32px; font-weight: 700; } /* A Time Rate other than 1 is a filled accent badge beside the level and on the loader. */ .rate-badge { color: var(--accent); font-family: "Gosu Counter", "Gosu UI", sans-serif;font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } #selected-heading { font-size: 22px; line-height: 1.2; } #history-status, #preview-status { color: var(--dim); } #history li.ranked { font-variant-numeric: tabular-nums; } #history .ranked-rank, #history .ranked-accuracy { color: var(--dim); } #history li.ranked[aria-current="true"] { font-weight: 700; } /* osu!lazer Leaderboard placeholder: 22px text; ScaleTo(0.8) then 1 over 900 ms OutQuint, fading in over 300 ms OutQuint. */ #history-status.placeholder { font-size: 22px; transition: transform 900ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); } #history-status.placeholder.entering { transform: scale(0.8); opacity: 0; transition: none; } #preview-status { font-size: 12px; } #hero { background: var(--hero); } #hero-text { background: var(--scrim); } #song-duration { color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; } #song-duration svg { color: var(--accent); } #duration-label { color: var(--dim); font-size: 10px; } #duration-value { font-family: "Gosu Counter", sans-serif; font-size: 22px; font-weight: 700; } #duration-original { color: var(--dim); font-family: "Gosu Counter", sans-serif; font-size: 15px; font-weight: 700; } #song-duration[data-adjusted="true"] #duration-value { color: var(--accent); } #song-duration:not([data-state="ready"]) #duration-value { color: var(--dim); font-family: inherit; font-size: 12px; font-weight: 400; } #song-notes { color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; } #chart-analysis { color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; } .analysis-column h3, #song-reading { font-size: 11px; font-weight: 600; white-space: nowrap; } #chart-analysis dd, #motor-score { color: var(--text); } #chart-analysis #reading-score { color: var(--accent); } .analysis-column dt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #motor-total, #reading-total { border-top: 1px solid var(--line); } #note-count { color: var(--text); font-size: 16px; } #hold-ratio { color: var(--accent); } #info-density { background: var(--field); } #info-density span { background: var(--accent); } #info-density span[data-spike] { background: var(--result-miss); } #chart-menu, #collection-menu, #chart-collection-list { border: 1px solid var(--line); } #chart-collection-list { background: var(--bg); } #tags-dialog button[aria-pressed="true"] { border-color: var(--text); font-weight: 700; } #collect-heading { color: var(--accent); font-size: 32px; font-weight: 900; } #collect-list li { border: 2px solid transparent; color: var(--text); } #collect-list li:hover { background: var(--button); } #collect-list li[aria-selected="true"] { background: var(--accent-tint); border-color: var(--accent); } #collect-list li:focus-visible { outline: 2px solid var(--text); } #collect-list strong { font-size: 22px; font-weight: 700; } #collect-list .collect-count { font-family: "Gosu Counter", sans-serif; font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 700; color: var(--accent); } #collect-list li[data-earned="true"] strong { color: var(--lamp-pf); } #collect-status, #collect-scope { color: var(--text); font-size: 16px; font-weight: 700; } #collect-rate { color: var(--text); font-family: "Gosu Counter", sans-serif; font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 700; } #chart-menu-name { color: var(--dim); font-size: 12px; } .score-points { font-family: "Gosu Counter", sans-serif; font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.15; } .score-performance [data-off="true"], #result-performance-gosu[data-off="true"] { opacity: 0.35; } /* lazer's ModIcon, as the play HUD draws it: a hexagon in the mod type colour with near-black capitals. */ .score-mods { font-size: 11px; font-weight: 900; line-height: 1; } .score-mods > span { --mod: var(--mod-other); background: var(--mod); color: color-mix(in srgb, var(--mod) 10%, var(--bg)); } .score-mods > [data-mod="auto"] { --mod: var(--mod-auto); } .score-mods > [data-mod="faster"] { --mod: var(--mod-faster); } .score-mods > [data-mod="slower"] { --mod: var(--mod-slower); } .score-performance { border-top: 1px solid color-mix(in srgb, var(--text) 15%, transparent); line-height: 1.2; } .score-model, .score-value small { color: color-mix(in srgb, var(--text) 70%, transparent); font-weight: 400; } .score-model { font-size: 10px; } .score-performance [data-model="gosu"] .score-model { color: color-mix(in srgb, var(--accent) 60%, var(--text)); } .score-value b { color: var(--text); font-family: "Gosu Counter", sans-serif; font-size: 15px; font-variant-numeric: tabular-nums; } .score-value small { font-size: 9px; } .score-date { color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; } .score-meta { color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; } /* Taller record rows keep a shallow shear so upright text stays inside the button. */ button.score-open.feel { transform: skewX(-4.6deg); } button.score-open.feel > .feel-label { transform: skewX(4.6deg); } button.score-open.feel.feel-press { transform: skewX(-4.6deg) scale(0.9); } /* A list condition, not a ranking kind: its own hue instead of the accent of the scope tabs and the order button. */ #history-rate { color: var(--dim); background: transparent; border-color: var(--line); font-size: 11px; } #history-rate:hover { color: var(--mod-other); border-color: var(--mod-other); } #history-rate[aria-pressed="true"] { color: var(--bg); background: var(--mod-other); border-color: var(--mod-other); } /* The order is not a ranking kind, so it does not wear the scope tabs' fill. */ #history-order { color: var(--accent); background: transparent; border-color: color-mix(in srgb, var(--accent) 45%, transparent); } #history-order:hover { border-color: var(--accent); } #score-tip { background: var(--field); border: 1px solid var(--line); font-variant-numeric: tabular-nums; } #score-tip .tip-main { font-size: 14px; } #score-tip .tip-main b { font-weight: 700; } #score-tip .tip-sub { color: var(--dim); font-size: 12px; } #difficulty { color: var(--text); font-size: 15px; } #best { color: var(--accent); font-size: 12px; font-variant-numeric: tabular-nums; } #best-list .best-mm b { font-size: 18px; font-variant-numeric: tabular-nums; } #best-list .best-mm small, #best-list .best-rate { font-size: 14px; font-variant-numeric: tabular-nums; } :root { --score-top: #ffffff; --score-base: var(--text); --score-light: #66e0ff; --score-deep: var(--accent); --score-glow: #09fafd; } /* Time Rate glow, picked 2026-10-21: faster rates turn bluer and glow more (data-glow 0–5). Scores light their leading 9s instead (.nine, 2026-10-29). */ /* Leading 9s, picked 2026-10-28 (osu!lazer GlowingSpriteText σ3, RankText's A flash): the k-th 9 wears 1 + 2k/5 glow layers, a new 9 flashes once over 1200 ms OutQuint. */ .nine[data-nine="0"] { text-shadow: 0 0 0.08em var(--score-glow); } .nine[data-nine="1"] { text-shadow: 0 0 0.08em var(--score-glow), 0 0 0.08em color-mix(in srgb, var(--score-glow) 40%, transparent); } .nine[data-nine="2"] { text-shadow: 0 0 0.08em var(--score-glow), 0 0 0.08em color-mix(in srgb, var(--score-glow) 80%, transparent); } .nine[data-nine="3"] { text-shadow: 0 0 0.08em var(--score-glow), 0 0 0.08em var(--score-glow), 0 0 0.08em color-mix(in srgb, var(--score-glow) 20%, transparent); } .nine[data-nine="4"] { text-shadow: 0 0 0.08em var(--score-glow), 0 0 0.08em var(--score-glow), 0 0 0.08em color-mix(in srgb, var(--score-glow) 60%, transparent); } .nine[data-nine="5"] { text-shadow: 0 0 0.08em var(--score-glow), 0 0 0.08em var(--score-glow), 0 0 0.08em var(--score-glow); } .nine[data-flash]::before { content: "9"; color: var(--score-glow); text-shadow: none; filter: blur(0.44em); transform: scale(1.8); mix-blend-mode: plus-lighter; opacity: 1; } .nine[data-flash="fading"]::before { opacity: 0; transition: opacity 1200ms cubic-bezier(0.23, 1, 0.32, 1); } .rate-glow { color: var(--dim); } /* 1x is left out but keeps its width, so scores line up across rates. */ .rate-glow[data-default] { color: transparent; } .rate-glow[data-glow="1"] { color: color-mix(in srgb, var(--score-light) 52%, var(--dim)); text-shadow: 0 0 0.8px color-mix(in srgb, var(--score-glow) 9%, transparent), 0 0 2.4px color-mix(in srgb, var(--score-glow) 5.4%, transparent); } .rate-glow[data-glow="2"] { color: color-mix(in srgb, var(--score-light) 64%, var(--dim)); text-shadow: 0 0 1.6px color-mix(in srgb, var(--score-glow) 18%, transparent), 0 0 4.8px color-mix(in srgb, var(--score-glow) 10.8%, transparent); } .rate-glow[data-glow="3"] { color: color-mix(in srgb, var(--score-light) 76%, var(--dim)); text-shadow: 0 0 2.4px color-mix(in srgb, var(--score-glow) 27%, transparent), 0 0 7.2px color-mix(in srgb, var(--score-glow) 16.2%, transparent); } .rate-glow[data-glow="4"] { color: color-mix(in srgb, var(--score-light) 88%, var(--dim)); text-shadow: 0 0 3.2px color-mix(in srgb, var(--score-glow) 36%, transparent), 0 0 9.6px color-mix(in srgb, var(--score-glow) 21.6%, transparent); } .rate-glow[data-glow="5"] { color: color-mix(in srgb, var(--score-light) 100%, var(--dim)); text-shadow: 0 0 4px color-mix(in srgb, var(--score-glow) 45%, transparent), 0 0 12px color-mix(in srgb, var(--score-glow) 27%, transparent); } #best-list .best-mm > span:last-child { color: var(--dim); font-variant-numeric: tabular-nums; } :root { --best-box: #3a4446; --best-box-mm: #66e0ff; --best-box-unit: #94c5d1; } #best-list .best-box { background: var(--best-box); } #best-list .best-box b { color: var(--best-box-mm); font-size: 18px; font-variant-numeric: tabular-nums; } #today-list h3 b { color: var(--accent); font-size: 18px; font-variant-numeric: tabular-nums; } #today-list h3 small { font-size: 14px; font-variant-numeric: tabular-nums; } #today-list .today-time, #today-list .today-value small { font-variant-numeric: tabular-nums; } #today-list .today-value b { font-size: 18px; } #today-list .today-kind { background: var(--best-box); } #today-list .today-kind b { color: var(--best-box-mm); font-size: 14px; } #best-list .best-box small { color: var(--best-box-unit); font-size: 12px; } /* Keep the carousel's margin transition when a row loses selection, too. */ .song-catalog li { transition: margin-left 400ms cubic-bezier(0.23, 1, 0.32, 1), background 200ms cubic-bezier(0.23, 1, 0.32, 1), border-color 120ms ease-out; } #info-density > span { transform-origin: bottom; } @media (prefers-reduced-motion: reduce) { #bg, #bg-old.gone, .song-catalog li, #song-list li.released, #songselect, #backdrop, #backdrop.loading, #loader.shown, #loader.shown.out, #result, #backdrop.result-dim, .slider-fill, .slider-rest, .slider-nub, #title-menu button, #settings, #history-status.placeholder { transition: none; } } /* The performance switch (display settings) turns menu motion off as reduced motion does. */ :root[data-performance] :is(#bg, #bg-old.gone, .song-catalog li, #song-list li.released, #songselect, #backdrop, #backdrop.loading, #loader.shown, #loader.shown.out, #result, #backdrop.result-dim, .slider-fill, .slider-rest, .slider-nub, #title-menu button, #settings, #history-status.placeholder) { transition: none; } /* The in-window cursor (cursor.js) replaces the system one. */ :root[data-cursor] *, :root[data-cursor] *::before, :root[data-cursor] *::after { cursor: none !important; } #cursor { background: transparent; border: 0; } .cursor-body { color: var(--cursor-body); } .cursor-shadow, .cursor-inside { color: var(--cursor-edge); opacity: 0.5; } .cursor-glow { color: var(--cursor-glow); } /* Decision 28 → osu!lazer ShearedButton (motion/motion.js): sheared by 0.2 (11.31°) with the label upright and a 2px border; hover brightens over 150 ms OutQuint (lazer's Lighten(0.2), here a 10% white layer because the theme has no filters); pressing shrinks to 0.9 over 2000 ms OutQuint and release springs back over 1000 ms OutElastic; a click flashes 90% white that clears over 800 ms OutQuint. */ button.feel { border-width: 2px; border-radius: 7px; transform: skewX(-11.31deg); transition: transform 1000ms linear(0, 0.272 2.5%, 0.646 5%, 1 7.5%, 1.25 10%, 1.364 12.5%, 1.354 15%, 1.257 17.5%, 1.125 20%, 1 22.5%, 0.912 25%, 0.871 27.5%, 0.875 30%, 0.909 32.5%, 0.956 35%, 1 37.5%, 1.031 40%, 1.046 42.5%, 1.044 45%, 1.032 47.5%, 1.016 50%, 1 52.5%, 0.989 55%, 0.984 57.5%, 0.984 60%, 0.989 62.5%, 0.994 65%, 1 67.5%, 1.004 70%, 1.006 72.5%, 1.006 75%, 1.004 77.5%, 1.002 80%, 1 82.5%, 0.998 87.5%, 0.998 90%, 1 97.5%, 1); } button.feel.feel-press { transform: skewX(-11.31deg) scale(0.9); transition: transform 2000ms cubic-bezier(0.23, 1, 0.32, 1); } .feel-label { transform: skewX(11.31deg); } .feel-hover, .feel-flash { background: var(--feel); opacity: 0; } /* On/off switch (picked 2026-10-28, candidate C): an outlined pill, its dot sliding to the lit side. */ .choice > .switch { background: transparent; border: 1px solid var(--dim); border-radius: 9px; } .switch > i { background: var(--dim); border-radius: 5px; transition: left 150ms cubic-bezier(0.23, 1, 0.32, 1), background 150ms; } .switch[aria-pressed="true"] { border-color: var(--accent); } .switch[aria-pressed="true"] > i { background: var(--accent); } .switch:disabled { opacity: .35; } .gauge-track { background: var(--field); border: 1px solid var(--line); box-sizing: border-box; } /* The fill brightens toward its end (asked for 2026-10-28; gauges are the one place a gradient fill is used). */ .gauge-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, var(--bg)), var(--accent)); } /* Skin choices are upright picture cards: the thumbnail is the point, not a sheared button. */ #skin-picker button { background: var(--field); border: 2px solid var(--line); color: var(--dim); font-size: 13px; transform: none; } #skin-picker button:hover { border-color: var(--button-light); color: var(--text); } #skin-picker button[aria-pressed="true"] { border-color: var(--accent); color: var(--text); } .skin-part-name { background: var(--field); border: 1px solid var(--line); color: var(--dim); transform: none; } .skin-part-name:hover, .skin-part-name[aria-expanded="true"] { border-color: var(--button-light); color: var(--text); } .skin-part-name b { color: var(--text); } .skin-part-choices button { background: var(--field); border: 2px solid var(--line); color: var(--dim); transform: none; } .skin-part-choices button:hover { border-color: var(--button-light); color: var(--text); } .skin-part-choices button[aria-pressed="true"] { border-color: var(--accent); color: var(--text); } .skin-image { background: var(--field); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px 0 8px; color: var(--text); } .gauge-marks > i { background: var(--bg); } /* The bar's fill runs deep blue, the accent, then pale aqua along the whole track. */ .slider.bar { --bar-low: #3a5bd9; --bar-high: #b6f3ff; } .slider.bar > .gauge-fill { background: linear-gradient(90deg, var(--bar-low), var(--accent) 45%, var(--bar-high)); } .slider.bar > .gauge-nub { background: var(--text); } .slider.bar > .gauge-reference { background: var(--text); } .slider.bar:focus-within > .gauge-nub { background: var(--accent); } .slider.gauge:has(input:disabled) { opacity: .35; } /* A setting's number reads in the game's counter face, like the result screen's figures. */ .settings-row output, .settings-row input[type="number"] { color: var(--text); font-family: "Gosu Counter", "Gosu UI", sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; } .feel-hover { transition: opacity 150ms cubic-bezier(0.23, 1, 0.32, 1); } button.feel-hovered > .feel-hover { opacity: 0.1; } .feel-flash { transition: opacity 800ms cubic-bezier(0.23, 1, 0.32, 1); } button.feel-flash-on > .feel-flash { opacity: 0.9; transition: none; } /* OsuTabControl: the selected tab changes over TRANSITION_LENGTH 500 ms OutQuint. */ /* The fill fades over those 500 ms but the label flips at 70 ms, when OutQuint has crossed half way: a fading label is grey on a fading fill, unreadable on either (2026-11-01). */ #settings-tabs button:not(.feel-press) { transition: background 500ms cubic-bezier(0.23, 1, 0.32, 1), color 0s linear 70ms, border-color 500ms cubic-bezier(0.23, 1, 0.32, 1), transform 1000ms linear(0, 0.272 2.5%, 0.646 5%, 1 7.5%, 1.25 10%, 1.364 12.5%, 1.354 15%, 1.257 17.5%, 1.125 20%, 1 22.5%, 0.912 25%, 0.871 27.5%, 0.875 30%, 0.909 32.5%, 0.956 35%, 1 37.5%, 1.031 40%, 1.046 42.5%, 1.044 45%, 1.032 47.5%, 1.016 50%, 1 52.5%, 0.989 55%, 0.984 57.5%, 0.984 60%, 0.989 62.5%, 0.994 65%, 1 67.5%, 1.004 70%, 1.006 72.5%, 1.006 75%, 1.004 77.5%, 1.002 80%, 1 82.5%, 0.998 87.5%, 0.998 90%, 1 97.5%, 1); } /* Decision 29 → osu!lazer screens: a screen fades in over 300 ms OutQuint (SongSelect, MainMenu FADE_IN with the buttons moving back from -800 of 1366); the title leaves over 400 ms InSine, moving its buttons -800. */ #title, #editor { transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); } #title-menu { transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1); } #title.entering, #songselect.entering, #editor.entering { opacity: 0; transition: none; } #title.entering #title-menu { transform: translateX(-58.57vw); transition: none; } #title.leaving-ghost { transition: opacity 400ms cubic-bezier(0.12, 0, 0.39, 0), transform 400ms cubic-bezier(0.12, 0, 0.39, 0); } #title.leaving-ghost.gone { opacity: 0; transform: translateX(-58.57vw); } /* PopupDialog: grows from 0.7 over 750 ms OutElasticHalf while fading in over 500 ms OutQuint; the screen behind dims to 50% over 500 ms OutQuint. */ dialog.popup { transition: transform 750ms linear(0, 0.188 2.5%, 0.388 5%, 0.58 7.5%, 0.75 10%, 0.891 12.5%, 1 15%, 1.077 17.5%, 1.125 20%, 1.149 22.5%, 1.153 25%, 1.144 27.5%, 1.125 30%, 1.102 32.5%, 1.077 35%, 1.053 37.5%, 1.031 40%, 1.014 42.5%, 1 45%, 0.99 47.5%, 0.984 50%, 0.981 52.5%, 0.981 55%, 0.982 57.5%, 0.984 60%, 0.987 62.5%, 0.99 65%, 0.993 67.5%, 0.996 70%, 0.998 72.5%, 1 75%, 1.002 80%, 1.002 90%, 1.001 97.5%, 1), opacity 500ms cubic-bezier(0.23, 1, 0.32, 1); } dialog.popup.entering { transform: scale(0.7); opacity: 0; transition: none; } dialog.popup::backdrop { background: var(--popup-dim); transition: opacity 500ms cubic-bezier(0.23, 1, 0.32, 1); } dialog.popup.entering::backdrop { opacity: 0; transition: none; } /* Leaving (2026-10-25): a screen fades out over 300 ms OutQuint (SongSelect.OnExiting); a popup shrinks to 0.7 over EXIT_DURATION 500 ms Easing.Out while it and its dim fade out OutQuint (PopupDialog.PopOut). Medley, story fade in like song select. The multiplayer screens fade like song select. */ #medley, #story, #multi, #multi-room { transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); } #medley.entering, #story.entering, #multi.entering, #multi-room.entering { opacity: 0; transition: none; } :is(#songselect, #editor, #medley, #story, #multi, #multi-room, #result).leaving-ghost { transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); } :is(#songselect, #editor, #medley, #story, #multi, #multi-room, #result).leaving-ghost.gone { opacity: 0; } dialog.popup.leaving-ghost { transform: none; transition: transform 500ms cubic-bezier(0.5, 1, 0.89, 1), opacity 500ms cubic-bezier(0.23, 1, 0.32, 1); } dialog.popup.leaving-ghost.gone { transform: scale(0.7); opacity: 0; } .popup-dim-ghost { background: var(--popup-dim); transition: opacity 500ms cubic-bezier(0.23, 1, 0.32, 1); } .popup-dim-ghost.gone { opacity: 0; } /* Menus open like osu!lazer OsuMenu: fade in over 280 ms and unroll over 300 ms, both OutQuint; closing fades over 280 ms OutQuint after 50 ms (decision of 2026-10-28). */ :is(#chart-menu, #collection-menu, #edit-audio-items) { transition: opacity 280ms cubic-bezier(0.23, 1, 0.32, 1), clip-path 300ms cubic-bezier(0.23, 1, 0.32, 1); } :is(#chart-menu, #collection-menu, #edit-audio-items).entering { opacity: 0; clip-path: inset(0 0 100% 0); transition: none; } :is(#chart-menu, #collection-menu, #edit-audio-items).leaving-ghost { transition: opacity 280ms cubic-bezier(0.23, 1, 0.32, 1) 50ms; } :is(#chart-menu, #collection-menu, #edit-audio-items).leaving-ghost.gone { opacity: 0; } @media (prefers-reduced-motion: reduce) { :is(#chart-menu, #collection-menu, #edit-audio-items) { transition: none; } } :root[data-performance] :is(#chart-menu, #collection-menu, #edit-audio-items) { transition: none; } @media (prefers-reduced-motion: reduce) { button.feel, button.feel.feel-press, .feel-hover, .feel-flash, #settings-tabs button:not(.feel-press), #title, #editor, #title-menu, #title.leaving-ghost, #medley, #story, #multi, #multi-room, dialog.popup, dialog.popup::backdrop, #song-list li, #song-list li::before, #detail, #list-head, #edit-rates button { transition: none; } } :root[data-performance] :is(button.feel, button.feel.feel-press, .feel-hover, .feel-flash, #settings-tabs button:not(.feel-press), #title, #editor, #title-menu, #title.leaving-ghost, #medley, #story, #multi, #multi-room, dialog.popup, #song-list li, #detail, #list-head, #edit-rates button), :root[data-performance] dialog.popup::backdrop, :root[data-performance] #song-list li::before { transition: none; } #list-position { font-variant-numeric: tabular-nums; } .list-track { background: var(--line); } #list-range-window { background: var(--accent); } #playing-status { color: var(--text); } #playing-message { background: var(--chat-bg); } #playing-chart { color: var(--accent); } #web-play { background: var(--bg); color: var(--text); } #web-play iframe { border: 0; } /* Play-mode controls share the app theme. */ .play-options { border: 0; } .mod-section h3 { font-size: 13px; color: var(--dim); } .mod-section output { color: var(--accent); font-size: 11px; font-weight: normal; } .option-buttons small { font-size: 11px; } .mod-buttons button { background: var(--hero); border: 1px solid var(--line); color: var(--text); font-size: 14px; transition: background-color 150ms, border-color 150ms, transform 150ms; } .mod-buttons button:hover { background: var(--field); border-color: var(--button-light); } .mod-buttons button[aria-pressed="true"] { background: var(--accent-tint); border-color: var(--accent); color: var(--text); } .mod-buttons button:focus-visible { outline: 2px solid var(--text); } .mod-buttons button:disabled, .mod-tuning button:disabled, .mod-buttons button[data-scope][aria-pressed="false"] { opacity: .35; } #mods-dialog button.feel, #mods-dialog .feel-label { transform: none; } #mods-dialog button.feel-press { transform: scale(.97); } .mod-buttons .feel-hover, .mod-buttons .feel-flash { display: none; } .mod-icon { color: var(--activation); transition: color 150ms; } .mod-buttons button:hover .mod-icon, .mod-buttons button[aria-pressed="true"] .mod-icon { color: var(--accent); } .mod-buttons button[data-scope-kind="bar"][aria-pressed="true"] { --accent: var(--random-bar); --accent-tint: color-mix(in srgb, var(--random-bar) 16%, var(--bg)); } .mod-buttons button[data-scope-kind="note"][aria-pressed="true"] { --accent: var(--random-note); --accent-tint: color-mix(in srgb, var(--random-note) 18%, var(--bg)); } .mod-state { color: var(--dim); font-size: 9px; font-weight: bold; letter-spacing: .5px; } [aria-pressed="true"] > .mod-state, [aria-pressed="true"] .feel-label > .mod-state { color: var(--on-accent); background: var(--accent); } .mod-tuning { border-left: 1px solid var(--line); } .mod-tuning .option-buttons { gap: 4px; } .mod-tuning .option-buttons button { font-size: 12px; background: var(--field); border-color: var(--line); } .mod-tuning .option-buttons button[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent); border-color: var(--accent); } .mod-section .health-flow { display: block; margin-top: 0; color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; } .health-cell, .health-thumb { --stage: var(--dim); color: var(--stage); } [data-stage="1"] { --stage: var(--lamp-gauge1); } [data-stage="2"] { --stage: var(--lamp-gauge2); } [data-stage="3"] { --stage: var(--lamp-gauge3); } .health-cell { background: var(--field); border: 1px solid var(--line); } .health-cell[data-on="true"] { background: color-mix(in srgb, var(--stage) 45%, var(--bg)); border-color: var(--stage); color: var(--text); } .health-cell:not([data-stage="0"])::first-letter { font-family: "Gosu Counter", sans-serif; font-variant-numeric: tabular-nums; } .health-cell[data-stage="0"][data-on="true"] { background: var(--field); border-color: var(--line); } .health-thumb { border: 2px solid var(--text); border-radius: 4px; background: var(--field); color: var(--text); } .health-thumb:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } #mods-head { border-bottom: 1px solid var(--line); } #mods-dialog { border: 1px solid var(--line); } #mods-heading { font-size: 25px; } #mods-head button { font-size: 12px; background: transparent; border-color: var(--line); } #mods-dialog #rate-presets button.feel { transform: translateX(-50%); font-size: 13px; } #mods-dialog #rate-presets button.feel-press { transform: translateX(-50%) scale(.97); } @media (max-width: 800px) { .mod-tuning { border-left: 0; } } @media (prefers-reduced-motion: reduce) { .mod-buttons button, .mod-icon { transition: none; } } :root[data-performance] :is(.mod-buttons button, .mod-icon) { transition: none; } /* Toasts (notification.js): osu!lazer Notification. Background3, Background2 on hover over 200 ms OutQuint; the icon column on Background5; SimpleNotification text 14 px medium; check icon Foreground1, Content1 on hover. */ #toasts { background: transparent; border: 0; } #uxedit { background: transparent; border: 0; } #uxedit-hover { border: 1px dashed var(--dim); } #uxedit-select { border: 2px solid var(--accent); } #uxedit-label, #uxedit-count { background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; } #uxedit-handle, .uxedit-guide { background: var(--accent); } #uxedit-note { background: var(--textbox); color: var(--text); border: 1px solid var(--textbox-border); } .toast { transition: translate 150ms cubic-bezier(0.25, 1, 0.5, 1), opacity 200ms linear; } .toast[data-state="enter"] { opacity: 0; } .toast[data-state="forward"] { translate: 400px 0; opacity: 0; transition: translate 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 600ms cubic-bezier(0.22, 1, 0.36, 1); } .toast[data-state="fade"] { opacity: 0; transition: opacity 100ms linear; } .toast[data-state="fling"] { transition: none; } .toast-main { background: var(--toast); transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms cubic-bezier(0.22, 1, 0.36, 1); } .toast[data-state="enter"] .toast-main { transform: translateX(100%); } .toast-main:hover { background: var(--toast-hover); } .toast-icon { background: var(--toast-icon); color: var(--toast-glyph); } .toast-text { color: var(--text); font-size: 14px; font-weight: 500; line-height: 20px; } .toast-text > span:last-child { color: var(--toast-check); } .toast-close { background: transparent; color: var(--toast-check); border: 0; transition: background-color 200ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms cubic-bezier(0.22, 1, 0.36, 1); } .toast-close:hover { background: var(--toast-close-hover); color: var(--toast-check-hover); } .toast-flash { background: var(--toast-flash); opacity: 0; transition: opacity 2000ms cubic-bezier(0.165, 0.84, 0.44, 1); } .toast[data-state="enter"] .toast-flash { opacity: 0.8; transition: none; } /* Long settings choices, osu!lazer OsuDropdown colours: header and menu on Background5, hovered header and pre-selected item Light4, the picked item Background3; a disabled dropdown drops to 30%. Menu fades and grows over 300 ms OutQuint; the chevron flips over 300 ms OutQuint. Items light in 100 ms OutQuint and clear in 600 ms; the hovered item's chevron slides in over 400 ms OutQuint and out over 200 ms In. */ .dropdown-head { background: var(--field); color: var(--text); border: 0; font-size: inherit; } .dropdown-head:hover:not(:disabled) { background: var(--button-light); } .dropdown-head:disabled { opacity: 0.3; } .dropdown-chevron { border-color: var(--text); transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), margin-top 300ms cubic-bezier(0.23, 1, 0.32, 1); } .dropdown-menu { background: var(--field); transition: grid-template-rows 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s 300ms; } .dropdown.open .dropdown-menu { transition: grid-template-rows 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s; } .dropdown-list > button { background: transparent; color: var(--text); font-size: inherit; transition: background-color 600ms cubic-bezier(0.23, 1, 0.32, 1); } .dropdown-list > button[aria-selected="true"] { background: var(--button); transition-duration: 100ms; } .dropdown-list > button[data-pre] { background: var(--button-light); transition-duration: 100ms; } .dropdown-mark { border-color: var(--field); opacity: 0; transition: opacity 200ms linear, transform 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53); } .dropdown-list > button:hover .dropdown-mark { opacity: 1; transform: translate(0, -50%) rotate(-45deg); transition: opacity 400ms cubic-bezier(0.23, 1, 0.32, 1), transform 400ms cubic-bezier(0.23, 1, 0.32, 1); } /* Story: covers of songs not yet cleared stay dim; a new clear develops in. */ .story-photo { background: var(--button); opacity: 1; transition: opacity 1200ms cubic-bezier(0.23, 1, 0.32, 1); } .story-photo[data-state="open"] { opacity: 0.35; } .story-photo[data-state="locked"] { opacity: 0.15; } #story-count { color: var(--dim); } #story-stage { background: var(--button); } #story-cover { transition: opacity 1200ms cubic-bezier(0.23, 1, 0.32, 1), filter 1200ms cubic-bezier(0.23, 1, 0.32, 1); } #story-cover[data-state="open"] { filter: grayscale(1); opacity: 0.6; } .story-fx-copy, .story-fx-flash, .story-fx-dot, .story-fx-star, .story-fx-title, .story-fx-side { mix-blend-mode: plus-lighter; } .story-fx-flash { background: var(--story-glow); } .story-fx-dot { background: radial-gradient(circle, var(--story-glow) 0 4%, color-mix(in srgb, var(--story-glow) 52%, transparent) 4%, transparent 60%); } .story-fx-star { background: var(--story-star); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); } .story-fx-title { color: var(--story-glow); font-size: 20px; } .story-fx-side.left { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent), transparent); } .story-fx-side.right { background: linear-gradient(270deg, color-mix(in srgb, var(--accent) 60%, transparent), transparent); } #story-charts li[aria-selected="true"] { background: var(--pulse-rest); border-left: 4px solid var(--lamp-bar); } /* Clausie's dog: the balloon is the XP search companion's pale yellow tooltip. */ :root { --dog-balloon: #ffffe1; --dog-balloon-text: #1a1a1a; --dog-ball: #d5235a; --dog-heart: #d5235a; --dog-star: #ffc528; --dog-mark: #fc6d01; --dog-sweat: #85b7eb; --dog-dot: #ffffff; --dog-z: #afa9ec; } #dog { cursor: grab; } #dog.dragging { cursor: grabbing; } #dog-balloon { background: var(--dog-balloon); color: var(--dog-balloon-text); border: 1px solid var(--dog-balloon-text); font-size: 13px; line-height: 1.5; cursor: pointer; } #dog .dog-ball, #dog .dog-heart { fill: var(--dog-heart); } #dog .dog-ball { fill: var(--dog-ball); } #dog .dog-star { fill: var(--dog-star); } #dog .dog-mark { fill: var(--dog-mark); } #dog .dog-line { fill: none; stroke: var(--dog-mark); stroke-width: 4; stroke-linecap: round; } #dog .dog-sweat { fill: var(--dog-sweat); } #dog .dog-anger { fill: none; stroke: var(--dog-heart); stroke-width: 4; stroke-linecap: round; } #dog .dog-dot { fill: var(--dog-dot); } #dog .dog-z { fill: var(--dog-z); font-weight: 700; } #dog .dog-woof { fill: var(--dog-mark); font-weight: 700; } .analysis-axis { color: var(--dim); font-size: 10px; } .analysis-bar { background: var(--line); } .analysis-bar i { background: var(--accent); } #reading-score { overflow-wrap: anywhere; } /* 곡 받기: 행은 가는 선으로 나누고, 짚은 행은 필드색으로 밝힌다. 쪽 번호는 카운터 숫자. */ #download-list li { border-bottom: 1px solid var(--line); transition: background-color 200ms cubic-bezier(0.23, 1, 0.32, 1); } #download-list li:hover { background: var(--field); } #download-title { font-size: 18px; color: var(--accent); } #download-list strong { font-size: 16px; } #download-list button:not(.download-preview):not(:disabled) { background: var(--act-save); border-color: var(--act-save-line); } #download-list button:not(.download-preview):not(:disabled):hover { background: color-mix(in srgb, var(--act-save) 82%, #ffffff); } #download-list .download-preview[aria-pressed="true"] { background: var(--mod-other); border-color: var(--mod-other); color: var(--bg); } #download-cancel { background: var(--act-danger); border-color: var(--act-danger-line); } #download-cancel:hover { background: color-mix(in srgb, var(--act-danger) 82%, #ffffff); } #download-summary { font-family: "Gosu Counter", "Gosu UI", sans-serif; font-size: 22px; font-weight: 700; color: var(--accent); } /* Tournament */ #tournament-side, #tournament-match, #tournament-bracket, #tournament-commands { background: var(--scrim); } #tournament h3 { font-size: 17px; } #tournament-summary { font-size: 19px; font-weight: 700; } .tournament-match { background: var(--field); border: 2px solid var(--line); } .tournament-match[aria-current="true"] { border-color: var(--accent); } .tournament-match:focus-visible, .tournament-map:focus-visible, #tournament-roles button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tournament-match[data-done="true"] { background: var(--pulse-rest); } .tournament-seed { color: var(--accent); font-variant-numeric: tabular-nums; } .tournament-wins, .tournament-versus-side b, .tournament-score { font-family: "Gosu Counter", "Gosu UI", sans-serif; font-size: 19px; } .tournament-side[data-winner="true"] .tournament-name, .tournament-side[data-winner="true"] .tournament-wins { color: var(--accent); font-weight: 700; } .tournament-side[data-empty="true"] { opacity: 0.6; } #tournament-roles button[aria-pressed="true"], #tournament-result button[aria-pressed="true"], #tournament-new-form button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); } .tournament-map { background: var(--field); border: 2px solid var(--line); color: var(--text); } .tournament-map[aria-disabled="true"] { opacity: 0.55; } .tournament-map[data-state="ban"] { text-decoration: line-through; } .tournament-map[data-state="pick"], .tournament-map[data-play="true"] { border-color: var(--accent); } .tournament-map b { color: var(--accent); } #tournament-turn { font-size: 17px; font-weight: 700; color: var(--accent); } #tournament-standings b { color: var(--accent); font-family: "Gosu Counter", "Gosu UI", sans-serif; } #tournament-result input, #tournament-new-dialog :is(input, textarea) { background: var(--search); border: 2px solid var(--line); color: var(--text); } #tournament { transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); } /* 이벤트 페이지(/arcade): 게임의 오투잼 스킨(internal/play/o2jam.go)을 따른다. 남색 바탕, 연한 파랑 판에 흰 윗선, 체력바 색띠. 색은 --o2-* 변수로만 쓴다. */ :root { --o2-bg: #070b13; --o2-bed: #0e1624; --o2-plate-top: #1d2d4a; --o2-plate-bottom: #0b1322; --o2-on-top: #4f86df; --o2-on-bottom: #224a9e; --o2-gloss: rgba(255, 255, 255, 0.26); --o2-gloss-end: rgba(255, 255, 255, 0); --o2-rail: #9db1cf; --o2-rail-dark: #34445f; --o2-white: #f5f9ff; --o2-text: #dbe6f7; --o2-light: #8bb8ff; --o2-easy: #31ef7b; --o2-normal: #ffe64a; --o2-hard: #ef083a; --o2-hard-text: #ff6b7d; --o2-coin: #ffe64a; } #arcade { background: var(--o2-bg); color: var(--o2-text); } .arcade-logo { font-family: "Gosu Counter", "Gosu UI", sans-serif; font-size: 112px; font-weight: 700; letter-spacing: -0.06em; line-height: 1; color: var(--o2-light); } .arcade-call { font-family: "Gosu Counter", sans-serif; font-weight: 700; font-size: 44px; color: var(--o2-coin); } .arcade-hint { font-family: "Gosu Counter", sans-serif; font-weight: 700; font-size: 18px; color: var(--o2-coin); } .arcade-load span { background: var(--o2-on-bottom); opacity: 0.3; } @keyframes arcade-load { 0%, 100% { opacity: 0.3; } 35% { opacity: 1; } } @media (prefers-reduced-motion: no-preference) { :root:not([data-performance]) .arcade-load span { animation: arcade-load 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * 80ms); } } .arcade-load.measured span.on { opacity: 1; } :root:not([data-performance]) .arcade-load.measured span { animation: none; } .arcade-extra { font-family: "Gosu Counter", sans-serif; font-weight: 700; font-size: 80px; color: var(--o2-coin); } .arcade-stage { font-family: "Gosu Counter", sans-serif; font-weight: 700; font-size: 34px; line-height: 1; color: var(--o2-light); } .arcade-curtain-top, .arcade-curtain-bottom { background: var(--o2-bg); } .arcade-curtain-line { background: var(--o2-light); } .arcade-curtain-title { font-family: "Gosu Counter", sans-serif; font-weight: 700; font-size: 64px; line-height: 1; letter-spacing: 2px; color: var(--o2-light); } .arcade-side { background: var(--o2-bed); } .arcade-row { background: transparent; border: 0; color: var(--o2-white); font-size: 18px; cursor: pointer; transition: font-size 200ms cubic-bezier(0.23, 1, 0.32, 1), width 200ms cubic-bezier(0.23, 1, 0.32, 1); } .arcade-plate { background: var(--o2-rail-dark); transition: background-color 200ms cubic-bezier(0.23, 1, 0.32, 1); } .plate-base { background: linear-gradient(var(--o2-plate-top), var(--o2-plate-bottom)); } .plate-gloss { background: linear-gradient(var(--o2-gloss), var(--o2-gloss-end)); } .arcade-row:hover .arcade-plate { background: var(--o2-rail); } .arcade-row.selected { font-size: 22px; font-weight: 700; } .plate-on { background: linear-gradient(var(--o2-on-top), var(--o2-on-bottom)); opacity: 0; transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1); } .arcade-row.selected .plate-on { opacity: 1; } .arcade-row.selected .arcade-plate { background: var(--o2-white); } .arcade-row:focus-visible, .arcade-wheel:focus-visible { outline: 2px solid var(--o2-coin); } /* 그 스테이지에서 새로 나오는 곡(서버의 added)은 판 둘레에 은은한 빛을 두른다. 판 모양을 따라가도록 줄 전체에 건다(판이 불투명이라 윤곽은 판이다). */ :root { --o2-glow: rgba(53, 230, 255, 0.95); --o2-added: #35e6ff; } .arcade-row.added { filter: drop-shadow(0 0 2px var(--o2-glow)) drop-shadow(0 0 10px var(--o2-glow)); } .arcade-row.added .arcade-plate, .arcade-row.added:hover .arcade-plate { background: var(--o2-added); } :root[data-performance] .arcade-row.added { filter: none; } .arcade-thumb { background: var(--o2-bed); border: 1px solid var(--o2-rail); } .arcade-jacket { background: var(--o2-rail-dark); border: 2px solid var(--o2-rail); outline: 1px solid var(--o2-rail-dark); } .arcade-level, .arcade-value, .arcade-ms, .arcade-facts, .arcade-best, .arcade-score { font-family: "Gosu Counter", sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; } .arcade-level { font-size: 16px; transition: color 200ms cubic-bezier(0.23, 1, 0.32, 1); } .arcade-meta { font-size: 13px; font-weight: 400; color: var(--o2-text); transition: color 200ms cubic-bezier(0.23, 1, 0.32, 1); } .arcade-row.selected .arcade-meta { color: var(--o2-white); } .arcade-title { font-size: 30px; font-weight: 700; color: var(--o2-white); } .arcade-artist { font-size: 18px; } .arcade-facts { font-size: 18px; } .arcade-chart { color: var(--o2-light); } .arcade-best { font-size: 20px; color: var(--o2-coin); } .arcade-option { font-size: 14px; font-weight: 700; } .arcade-value { font-size: 18px; color: var(--o2-light); } .arcade-ms { font-size: 12px; color: var(--o2-text); } .arcade-ms small { margin-left: 2px; font-size: 10px; } .arcade-genres button:disabled { opacity: .4; cursor: default; } .arcade-label { font-size: 20px; font-weight: 700; color: var(--o2-light); } .arcade-big { font-family: "Gosu Counter", sans-serif; font-weight: 700; font-size: 88px; line-height: 1; color: var(--o2-light); font-variant-numeric: tabular-nums; } .arcade-song { font-size: 22px; font-weight: 700; } .arcade-acc { font-family: "Gosu Counter", sans-serif; font-weight: 700; font-size: 24px; font-variant-numeric: tabular-nums; } .arcade-score { font-size: 22px; } .arcade-played { font-size: 16px; } /* 곡의 배경 그림을 어둡게 깔아 글자 대비를 지킨다(그림 24%). */ .arcade-between.cover { background: linear-gradient(color-mix(in srgb, var(--o2-bg) 76%, transparent), color-mix(in srgb, var(--o2-bg) 76%, transparent)), var(--arcade-bg) center / cover no-repeat; } .arcade-between .arcade-top { font-size: 16px; } .arcade-top.me { color: var(--o2-white); font-weight: 700; } .arcade-team { color: var(--o2-coin); font-weight: 700; } .arcade-who { font-size: 18px; } .arcade-nick { background: var(--o2-plate-top); border: 2px solid var(--o2-rail-dark); color: var(--o2-white); font-size: 18px; font-weight: 700; cursor: pointer; transform: skewX(-11.31deg); transition: border-color 200ms cubic-bezier(0.23, 1, 0.32, 1); } .arcade-nick:hover { border-color: var(--o2-rail); } .arcade-nick:focus-visible { outline: 2px solid var(--o2-coin); } .arcade-nickbox { background: var(--o2-bed); border: 2px solid var(--o2-rail); color: var(--o2-white); font-size: 18px; font-weight: 700; font-family: inherit; } .arcade-nickbox:focus { outline: 2px solid var(--o2-coin); } .arcade-nickbox::placeholder { color: var(--o2-coin); opacity: 1; font-family: "Gosu Counter", sans-serif; font-weight: 700; } .arcade-count dt { font-size: 13px; font-weight: 700; color: var(--o2-light); } .arcade-count dd { font-family: "Gosu Counter", sans-serif; font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; } #arcade-note { color: var(--o2-coin); font-size: 15px; } .arcade-loading { background: linear-gradient(color-mix(in srgb, var(--o2-bg) 60%, transparent), color-mix(in srgb, var(--o2-bg) 60%, transparent)), var(--arcade-bg, none) center / cover no-repeat, var(--o2-bg); } .arcade-confirm { background: color-mix(in srgb, var(--o2-bg) 72%, transparent); } .arcade-ask { background: var(--o2-bed); border: 2px solid var(--o2-rail); } .arcade-ask-name { font-size: 30px; font-weight: 700; color: var(--o2-white); } .arcade-ask-chart { font-family: "Gosu Counter", sans-serif; font-weight: 700; font-size: 20px; color: var(--o2-light); } .arcade-test { font-family: "Gosu Counter", sans-serif; font-weight: 700; font-size: 13px; color: var(--o2-hard-text); } .arcade-rank { font-family: "Gosu Counter", sans-serif; font-weight: 700; font-size: 18px; color: var(--o2-coin); font-variant-numeric: tabular-nums; } .arcade-top { font-size: 14px; color: var(--o2-text); } .arcade-top.watch { cursor: pointer; } .arcade-top.watch:hover, .arcade-top.watch:focus-visible { color: var(--o2-white); } .arcade-top.watch:focus-visible { outline: 2px solid var(--o2-coin); } .arcade-top b { font-family: "Gosu Counter", sans-serif; font-variant-numeric: tabular-nums; } .arcade-top-lamp { font-family: "Gosu Counter", sans-serif; font-size: 11px; font-weight: 700; white-space: nowrap; } .arcade-top-lamp[data-lamp="fullcombo"] { color: var(--lamp-fc); } .arcade-top-lamp[data-lamp="perfect"] { color: var(--lamp-pf); } .arcade-top-grade { font-family: "Gosu Counter", sans-serif; font-variant-numeric: tabular-nums; } .arcade-top-head { font-family: "Gosu Counter", sans-serif; font-size: 11px; font-weight: 700; color: var(--o2-light); } .arcade-top-acc { font-family: "Gosu Counter", sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; } .arcade-key { color: var(--o2-light); font-family: "Gosu Counter", sans-serif; font-size: 11px; font-weight: 700; } .arcade-preview.ranking .arcade-title { font-size: 20px; } .arcade-preview.ranking .arcade-artist { font-size: 14px; }.arcade-pass { background: var(--o2-bed); border: 2px solid var(--o2-rail); color: var(--o2-white); font-size: 22px; font-family: inherit; } .arcade-pass:focus { outline: 2px solid var(--o2-coin); } .arcade-pass::placeholder { color: var(--o2-coin); opacity: 1; font-family: "Gosu Counter", sans-serif; font-weight: 700; } .arcade-gate-note { color: var(--o2-coin); font-size: 15px; } .arcade-genres button { background: var(--o2-plate-top); border: 2px solid var(--o2-rail-dark); color: var(--o2-text); font-size: 13px; font-weight: 700; cursor: pointer; transform: skewX(-11.31deg); transition: background-color 200ms cubic-bezier(0.23, 1, 0.32, 1), border-color 200ms cubic-bezier(0.23, 1, 0.32, 1), color 200ms cubic-bezier(0.23, 1, 0.32, 1); } .arcade-genres button:hover { border-color: var(--o2-rail); } .arcade-genres button.on { background: var(--o2-on-top); border-color: var(--o2-white); color: var(--o2-white); } .arcade-genres button:focus-visible { outline: 2px solid var(--o2-coin); } .arcade-diffs li { background: var(--o2-plate-top); border: 2px solid var(--o2-rail-dark); color: var(--o2-text); cursor: pointer; font-family: "Gosu Counter", sans-serif; font-size: 16px; font-weight: 700; transform: skewX(-11.31deg); transition: background-color 200ms cubic-bezier(0.23, 1, 0.32, 1), border-color 200ms cubic-bezier(0.23, 1, 0.32, 1), color 200ms cubic-bezier(0.23, 1, 0.32, 1); } .arcade-diffs li.on { background: var(--o2-on-top); border-color: var(--o2-white); color: var(--o2-white); } .arcade-diffs li[data-d="EZ"] { border-color: var(--o2-easy); } .arcade-diffs li[data-d="NM"] { border-color: var(--o2-normal); } .arcade-diffs li[data-d="HD"] { border-color: var(--o2-hard); } .arcade-diffs li[data-d="EZ"].on { background: var(--o2-easy); color: var(--o2-bg); } .arcade-diffs li[data-d="NM"].on { background: var(--o2-normal); color: var(--o2-bg); } .arcade-diffs li[data-d="HD"].on { background: var(--o2-hard); color: var(--o2-white); } .arcade-level[data-d="EZ"] { color: var(--o2-easy); } .arcade-level[data-d="NM"] { color: var(--o2-normal); } .arcade-level[data-d="HD"] { color: var(--o2-hard-text); } @media (prefers-reduced-motion: reduce) { .arcade-row, .arcade-plate, .plate-on, .arcade-level, .arcade-meta, .arcade-genres button, .arcade-nick, .arcade-diffs li { transition: none; } } :root[data-performance] :is(.arcade-row, .arcade-plate, .plate-on, .arcade-level, .arcade-meta, .arcade-genres button, .arcade-nick, .arcade-diffs li) { transition: none; }