/* DEEPMINE UI v4 — settings page styles (设置 · data-mode="settings"). Markup: management-panels.mjs renderAudioSettings (声音) + renderSettingsPanel (语言, 画面与手感, 关于). Three .list cards of .list-row items: icon tile, title + description, trailing control. Live hooks updated in place by mobile.mjs (never re-rendered by polling): input.switch[role=switch][data-setting] input[type=range][data-volume] + output#*-volume-value button.audio-preview[data-audio-preview] p.audio-status[data-audio-status] small[data-motion-support] v10.1: button.audio-music-next[data-music-next] (「下一首」) and span[data-music-track] (current track caption) Disabled state is the native `disabled` attribute, so every state below keys off :disabled / :checked. The preview buttons compose .btn.btn--secondary; only their layout is styled here. */ @layer pages { #sheet[data-mode="settings"] #sheet-body { padding-bottom: 20px; } /* Every group's heading is the first child of its
, so restore the shared 20px rhythm between groups and keep the tight top margin only for the first group. */ #sheet[data-mode="settings"] .settings-group > .section-head { margin-top: 20px; } #sheet[data-mode="settings"] .settings-group:first-child > .section-head { margin-top: 4px; } /* ───────────── Rows ───────────── */ #sheet[data-mode="settings"] .settings-card .list-row { min-height: 64px; gap: 12px; padding: 10px 14px; } #sheet[data-mode="settings"] .settings-card .list-icon { width: 40px; height: 40px; border-radius: var(--r-md); transition: border-color var(--dur-2), box-shadow var(--dur-2), background var(--dur-2); } #sheet[data-mode="settings"] .settings-card .list-icon .gi { width: 28px; height: 28px; transition: filter var(--dur-2); } #sheet[data-mode="settings"] .settings-card .list-title { overflow-wrap: break-word; } #sheet[data-mode="settings"] .settings-card .list-sub { text-wrap: pretty; } /* Toggle rows: the whole row is the label, so the full width toggles the switch. */ #sheet[data-mode="settings"] .setting-row { cursor: pointer; transition: background var(--dur-2); } #sheet[data-mode="settings"] .setting-row:active { background: rgb(255 255 255 / .035); } #sheet[data-mode="settings"] .setting-row .switch { margin-left: 4px; } /* On: the tile lights up jade so the state reads at a glance even without the switch. */ #sheet[data-mode="settings"] .setting-row:has(.switch:checked) .setting-icon { background: radial-gradient(circle at 50% 30%, #3b7d60, #1f4c3a 80%); border-color: rgb(134 224 181 / .5); box-shadow: var(--hl-top), 0 0 14px -4px rgb(80 200 140 / .6); } #sheet[data-mode="settings"] .setting-row:has(.switch:not(:checked)) .setting-icon .gi { filter: saturate(.55) brightness(.92); } /* Unavailable (sound off, or the OS already reduces motion): the control and its tile dim, the description that explains the state stays at full contrast. */ #sheet[data-mode="settings"] .setting-row:has(.switch:disabled) { cursor: not-allowed; } #sheet[data-mode="settings"] .setting-row:has(.switch:disabled):active { background: none; } #sheet[data-mode="settings"] .setting-row:has(.switch:disabled) .list-title { color: var(--text-3); } #sheet[data-mode="settings"] .setting-row:has(.switch:disabled) .setting-icon { opacity: .55; } #sheet[data-mode="settings"] .setting-row:has(.switch:disabled) .setting-icon .gi { filter: saturate(.2); } /* reduceMotion locked ON by the system: keep it legible, it is information, not an error. */ #sheet[data-mode="settings"] .setting-row:has(.switch:disabled:checked) .list-title { color: var(--text-1); } #sheet[data-mode="settings"] .setting-row:has(.switch:disabled:checked) .setting-icon { opacity: .8; } #sheet[data-mode="settings"] .setting-row:has(.switch:disabled:checked) .list-sub { color: var(--jade-300); } /* ───────────── Sound master + mixer ───────────── Sound off disables each control (native :disabled styles below and in components.css); the container is never faded, so the status sentence explaining why stays readable. */ #sheet[data-mode="settings"] .audio-mixer { display: grid; gap: 12px; padding: 4px 14px 14px; } /* Volume sliders */ #sheet[data-mode="settings"] .setting-volume { display: grid; gap: 2px; min-width: 0; padding: 10px 12px 6px; border-radius: var(--r-md); background: var(--surface-inset); border: 1px solid var(--line-1); box-shadow: inset 0 2px 6px rgb(0 0 0 / .35); } #sheet[data-mode="settings"] .setting-volume-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; font-size: var(--fs-13); font-weight: 700; color: var(--text-2); } #sheet[data-mode="settings"] .setting-volume-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #sheet[data-mode="settings"] .setting-volume output { flex: none; min-width: 3.4em; text-align: right; font: 800 16px/1 var(--font-display); color: var(--gold-100); font-variant-numeric: tabular-nums; white-space: nowrap; } /* 44px touch height; the negative margin keeps the visual rhythm of a 32px row. */ #sheet[data-mode="settings"] .setting-volume input[type="range"] { height: 44px; margin: -6px 0; --fill: 50%; } #sheet[data-mode="settings"] .setting-volume input[type="range"]::-webkit-slider-runnable-track { height: 10px; background: linear-gradient(180deg, rgb(255 255 255 / .35), transparent 60%) 0 0 / var(--fill) 100% no-repeat, linear-gradient(90deg, var(--gold-500), var(--gold-200)) 0 0 / var(--fill) 100% no-repeat, var(--bg-1); box-shadow: inset 0 1px 3px rgb(0 0 0 / .7), 0 1px 0 rgb(255 255 255 / .05); } #sheet[data-mode="settings"] .setting-volume input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -8px; } #sheet[data-mode="settings"] .setting-volume input[type="range"]::-moz-range-track { height: 10px; background: var(--bg-1); } #sheet[data-mode="settings"] .setting-volume input[type="range"]::-moz-range-progress { height: 10px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--gold-500), var(--gold-200)); } /* Disabled (sound off): the slider greys out; its label and value stay readable captions. */ #sheet[data-mode="settings"] .setting-volume:has(input:disabled) .setting-volume-head { color: var(--text-3); } #sheet[data-mode="settings"] .setting-volume:has(input:disabled) output { color: var(--text-3); } #sheet[data-mode="settings"] .setting-volume input[type="range"]:disabled { opacity: 1; filter: saturate(0) brightness(.75); } /* Preview buttons (.btn.btn--secondary): a 2×2 grid, glyph then label, label may wrap to two lines. */ #sheet[data-mode="settings"] .audio-preview-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #sheet[data-mode="settings"] .audio-preview { justify-content: flex-start; gap: 8px; min-width: 0; padding: 4px 12px 4px 8px; font-size: var(--fs-13); line-height: 1.2; text-align: left; white-space: normal; } #sheet[data-mode="settings"] .audio-preview > span { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: break-word; } #sheet[data-mode="settings"] .audio-preview .audio-preview-play { flex: none; width: 26px; height: 26px; margin: 0; } /* Latin/Cyrillic labels ("Активировать талант") need the room on narrow phones: slimmer padding, one size down. */ @media (max-width: 359px) { :root:not(:lang(zh)) #sheet[data-mode="settings"] .audio-preview { gap: 6px; padding-inline: 6px 8px; font-size: var(--fs-12); hyphens: auto; -webkit-hyphens: auto; } :root:not(:lang(zh)) #sheet[data-mode="settings"] .audio-preview .audio-preview-play { width: 22px; height: 22px; } } /* Status line (text rewritten live by mobile.mjs). */ #sheet[data-mode="settings"] .audio-status { display: flex; align-items: center; gap: 8px; min-height: 20px; margin: 0 2px; font-size: var(--fs-12); line-height: 1.4; color: var(--text-3); } #sheet[data-mode="settings"] .audio-status::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-4); } #sheet[data-mode="settings"] .settings-card:has([data-setting="sound"]:checked) .audio-status { color: var(--jade-200); } #sheet[data-mode="settings"] .settings-card:has([data-setting="sound"]:checked) .audio-status::before { background: var(--jade-300); box-shadow: 0 0 8px var(--jade-400); } /* ───────────── 背景音乐 / 矿场环境声 beds (v10.1) ───────────── Each bed is its switch row, then a tinted body: 「下一首」 (music only) and its volume slider. The slider and the switch follow the sound state through the native :disabled styles; 「下一首」 is never disabled (it picks the track). */ #sheet[data-mode="settings"] .audio-bed { display: grid; border-top: 1px solid var(--line-1); } #sheet[data-mode="settings"] .audio-bed-body { display: grid; gap: 10px; padding: 2px 14px 14px 22px; background: linear-gradient(180deg, rgb(4 14 10 / .3), rgb(4 14 10 / .1)); } #sheet[data-mode="settings"] .audio-music [data-music-track] { color: var(--gold-200); font-weight: 700; } #sheet[data-mode="settings"] .audio-music:has(.switch:not(:checked)) [data-music-track] { color: inherit; font-weight: 400; } #sheet[data-mode="settings"] .audio-music-next { justify-self: start; gap: 8px; min-height: 44px; padding: 4px 16px 4px 10px; font-size: var(--fs-13); } #sheet[data-mode="settings"] .audio-music-next .audio-preview-play { flex: none; width: 24px; height: 24px; margin: 0; } /* ───────────── 关于 link rows ───────────── */ #sheet[data-mode="settings"] .link-row { transition: background var(--dur-2); } #sheet[data-mode="settings"] .link-row:active { background: rgb(255 255 255 / .04); } #sheet[data-mode="settings"] .link-row .list-trail .icon { width: 18px; height: 18px; color: var(--gold-300); transition: transform var(--dur-2) var(--ease-out); } #sheet[data-mode="settings"] .link-row:active .list-trail .icon { transform: translateX(3px); } @media (hover: hover) and (pointer: fine) { #sheet[data-mode="settings"] .link-row:hover { background: rgb(255 255 255 / .03); } #sheet[data-mode="settings"] .link-row:hover .list-trail .icon { transform: translateX(3px); } } #sheet[data-mode="settings"] .link-row .list-icon .currency-icon { width: 26px; height: 26px; } #sheet[data-mode="settings"] .settings-signature { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; font: 700 11px/1.2 var(--font-display); letter-spacing: .14em; color: var(--text-3); } #sheet[data-mode="settings"] .settings-signature .gi { width: 20px; height: 20px; opacity: .7; filter: saturate(.6); } /* Narrow phones */ @media (max-width: 359px) { #sheet[data-mode="settings"] .settings-card .list-row { gap: 10px; padding-inline: 12px; } #sheet[data-mode="settings"] .settings-card .list-icon { width: 36px; height: 36px; } #sheet[data-mode="settings"] .settings-card .list-icon .gi { width: 26px; height: 26px; } #sheet[data-mode="settings"] .audio-mixer { padding-inline: 12px; } #sheet[data-mode="settings"] .audio-bed-body { padding-inline: 12px; } } @media (max-height: 640px) { #sheet[data-mode="settings"] .settings-card .list-row { min-height: 58px; padding-block: 8px; } } /* ───────────── 语言 (locale picker) ───────────── Markup: management-panels.mjs renderLocalePicker — a .list-row (globe tile, title, reload hint) over .locale-picker.seg.seg--pills > button[data-set-locale][aria-pressed] (native names; pressed = current, gold). A grid instead of the wrapping pill row keeps the seven names aligned: three columns on most phones, two at 320 px. */ #sheet[data-mode="settings"] .locale-row .list-icon .icon { width: 24px; height: 24px; } #sheet[data-mode="settings"] .locale-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; padding: 0 14px 14px; } #sheet[data-mode="settings"] .locale-picker > button { min-width: 0; padding-inline: 8px; } @media (max-width: 359px) { #sheet[data-mode="settings"] .locale-picker { padding-inline: 12px; } } }