204 lines
14 KiB
CSS
204 lines
14 KiB
CSS
/* Logical sizing uses a common physical density for both panels (160 px/in). */
|
|
.thor-preview-frame { min-height: 0; }
|
|
.thor-preview-label, .thor-preview-hinge { width: 100%; }
|
|
.thor-preview-top, .thor-preview-bottom, .dedicated-display-surface, .bottom-display-root { container-type: size; }
|
|
.companion-hud-shell { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse at top, #1c3827, #07110d 70%); }
|
|
.companion-hud-shell .hud-top-right { display: contents; }
|
|
.companion-hud-shell .player-status-panel { position: absolute; top: 12px; left: 12px; width: calc(100% - 24px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
|
|
.companion-hud-shell .player-status-panel__section { padding: 8px; }
|
|
.companion-hud-shell .player-status-panel__section > header, .companion-hud-shell .player-status-panel__empty { font-size: 12px; }
|
|
.companion-hud-shell .player-status-panel__section > header b { min-width: 22px; height: 22px; font-size: 12px; }
|
|
.companion-hud-shell .player-status-panel__icons { justify-content: flex-start; min-height: 44px; }
|
|
.companion-hud-shell .player-status-panel :is(.aura, .timed-effect) { width: 44px; height: 44px; }
|
|
.companion-hud-shell :is(.aura__timer, .timed-effect__timer) { font-size: 11px; }
|
|
.companion-hud-shell .player-status-tooltip { top: 100%; left: 0; width: 100%; font-size: 13px; }
|
|
.companion-hud-shell .player-status-tooltip > header strong { font-size: 14px; }
|
|
.companion-hud-shell .player-status-tooltip p { font-size: 13px; }
|
|
.companion-hud-shell .player-status-tooltip :is(footer, header > span) { font-size: 11px; }
|
|
.companion-hud-shell .hud-bottom-stack { bottom: 76px; width: calc(100% - 16px); }
|
|
.companion-hud-shell .hud-bottom-stack .action-bar { --action-slot-size: 44px; width: min(420px, 100%); margin-top: 12px; }
|
|
.companion-hud-shell .action-slot__binding { min-width: 18px; height: 18px; font-size: 10px; }
|
|
.companion-hud-shell .action-bar__layer-status span { font-size: 11px; }
|
|
.companion-hud-shell .action-bar__detail strong { font-size: 12px; }
|
|
.companion-hud-shell .action-bar__detail span { font-size: 10px; }
|
|
.companion-hud-shell .action-slot__target { font-size: 10px; }
|
|
.companion-hud-shell .party-frame { min-height: 48px; }
|
|
.companion-hud-shell .party-frame__identity strong { font-size: 13px; }
|
|
.companion-hud-shell .party-frame__identity small { font-size: 10px; }
|
|
.companion-hud-shell .party-frame__health { height: 14px; }
|
|
.companion-hud-shell .party-frame__health b, .companion-hud-shell .party-frames > header { font-size: 10px; }
|
|
.companion-hud-shell .party-command-bar button { min-height: 44px; padding-inline: 2px; }
|
|
.companion-hud-shell .party-command-bar strong { font-size: 11px; }
|
|
.companion-hud-shell .party-command-bar kbd { display: none; }
|
|
.companion-hud-shell .hud-minimap__caption strong { font-size: 13px; }
|
|
.companion-hud-shell .hud-minimap__caption span, .companion-hud-shell .target-frame small { font-size: 11px; }
|
|
.companion-hud-shell .dps-meter { position: absolute; top: 116px; left: 12px; bottom: auto; width: min(var(--dps-meter-width, 230px), calc(100% - 24px)); max-height: 64px; font-size: 12px; }
|
|
.companion-hud-shell .experience-bar { bottom: 56px; left: 12px; right: 12px; width: calc(100% - 24px); height: 16px; }
|
|
.companion-hud-shell .experience-bar__label { font-size: 10px; }
|
|
.companion-hud-menus { position: absolute; bottom: max(6px, env(safe-area-inset-bottom)); left: 8px; right: 8px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; pointer-events: auto; z-index: 30; }
|
|
.companion-hud-menus button { min-width: 0; min-height: 44px; padding: 4px; border: 1px solid var(--edge); border-radius: 6px; background: #172b20; color: var(--ink); font-size: 13px; }
|
|
.ui-layout-editor { font-size: 14px; }
|
|
.ui-layout-editor__body { min-height: 0; }
|
|
.ui-layout-editor :is(button, select, input:not([type=checkbox])) { min-height: 44px; }
|
|
.ui-layout-editor > header button { min-width: 44px; }
|
|
.ui-layout-editor__element { flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--edge); }
|
|
.ui-layout-editor__element label { flex: 1 1 120px; margin: 0; }
|
|
.ui-layout-editor__element select { min-width: 78px; }
|
|
.editable-hud__handle { min-width: 44px; min-height: 44px; padding: 6px 8px; font-size: 12px; }
|
|
.editable-hud--editing { min-height: 44px; }
|
|
.editable-hud--editing.editable-hud--selected { z-index: 26; outline: 2px solid var(--gold); }
|
|
.companion-hud-shell .editable-hud--editing.editable-hud--selected { z-index: 40; }
|
|
.companion-hud-shell .dungeon-complete-banner { flex-wrap: wrap; }
|
|
.companion-hud-shell .dungeon-complete-banner p { flex-basis: calc(100% - 42px); }
|
|
.companion-hud-shell .dungeon-complete-banner .button { flex: 1; min-height: 44px; font-size: 13px; }
|
|
.companion-hud-shell .dungeon-complete-banner strong { font-size: 14px; }
|
|
.companion-hud-shell .dungeon-complete-banner small { font-size: 12px; }
|
|
|
|
/* Container queries also work in the stacked preview: the window is not a panel. */
|
|
@container (max-width: 650px) {
|
|
.front-surface--bottom { padding: 10px; font-size: 13px; overflow-y: auto; }
|
|
.companion-panel { grid-template-rows: 44px minmax(0, 1fr) auto; }
|
|
.companion-panel > header > b { font-size: 11px; }
|
|
.companion-panel .front-brand { gap: 6px; }
|
|
.companion-panel .front-brand small { font-size: 8px; }
|
|
.companion-panel .front-brand strong { font-size: 15px; }
|
|
.companion-panel > main { min-height: 0; overflow: auto; padding: 8px 0; gap: 8px; }
|
|
.companion-roster > main { grid-template-columns: minmax(0, 1fr); }
|
|
.companion-selection-card { display: none; }
|
|
.companion-mini-roster { overflow: auto; }
|
|
.companion-mini-roster button { min-height: 48px; padding: 8px; }
|
|
.companion-mini-roster button strong { font-size: 14px; }
|
|
.companion-mini-roster button small { font-size: 11px; }
|
|
.companion-actions { flex-wrap: wrap; padding-top: 6px; }
|
|
.companion-actions button { min-height: 44px; min-width: 100px; font-size: 12px; }
|
|
.companion-dungeons > main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
|
|
.companion-dungeon-role { display: block; }
|
|
.companion-dungeon-role .character-preview { display: none; }
|
|
.companion-dungeon-role h2 { font-size: 17px; }
|
|
.companion-role-options { display: flex; gap: 6px; }
|
|
.companion-role-options button { flex: 1; min-height: 44px; padding: 6px; }
|
|
.companion-role-options strong { font-size: 14px; }
|
|
.companion-role-options small { font-size: 10px; }
|
|
.companion-category-tabs button { min-height: 44px; }
|
|
.companion-category-tabs button strong { font-size: 13px; }
|
|
.companion-create > main { grid-template-columns: 55% minmax(0, 1fr); }
|
|
.companion-create main > .character-preview { min-width: 0; height: 240px; }
|
|
.companion-create h2 { font-size: 24px; }
|
|
.companion-create dl { font-size: 14px; }
|
|
.companion-panel dl dt, .companion-panel dl dd { font-size: 13px; }
|
|
.companion-feature-grid article strong { font-size: 13px; }
|
|
.companion-feature-grid article small { font-size: 11px; }
|
|
.companion-login > footer { font-size: 11px; }
|
|
.companion-login-keyboard.front-surface--bottom { overflow: hidden; }
|
|
.companion-login-keyboard > main { grid-template-rows: 52px minmax(0, 1fr); gap: 6px; padding: 6px 0; overflow: hidden; }
|
|
.login-keyboard-fields button { min-height: 52px; }
|
|
.login-keyboard-fields small { font-size: 9px; }
|
|
.login-keyboard-fields strong { font-size: 15px; }
|
|
.login-keyboard-key { font-size: 14px; }
|
|
.companion-login-keyboard > footer { min-height: 30px; font-size: 10px; }
|
|
.companion-login-keyboard > footer strong { max-width: 52%; font-size: 9px; }
|
|
}
|
|
|
|
@container (min-width: 700px) and (max-width: 1000px) {
|
|
.front-surface--top { padding: 12px; }
|
|
.front-surface--top :is(p, small, label, dt, dd) { font-size: max(11px, 0.7rem); }
|
|
.front-surface--top button { min-height: 44px; }
|
|
.login-title { padding-top: 0; }
|
|
.login-title__crest { width: 34px; height: 34px; }
|
|
.login-title p { margin-top: 7px; font-size: 6px; }
|
|
.login-title h1 { font-size: 38px; }
|
|
.login-title small { display: none; }
|
|
.login-screen { grid-template-rows: minmax(92px, 1fr) auto 24px; }
|
|
.login-form { width: min(560px, calc(100% - 28px)); padding: 16px 20px 12px; }
|
|
.login-form header { margin-bottom: 7px; }
|
|
.login-form header strong { font-size: 23px; }
|
|
.login-form > label { margin-top: 5px; }
|
|
.login-form > input { height: 38px; }
|
|
.login-form__actions { grid-template-columns: 1.15fr 1fr 1fr; margin-top: 9px; }
|
|
.login-form__actions .front-button--primary { grid-column: auto; }
|
|
.login-form__actions .front-button small { display: none; }
|
|
.login-form footer { display: none; }
|
|
.character-select-screen { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: 52px minmax(0, 1fr) 62px; gap: 8px; }
|
|
.roster-header, .character-select-screen > .controller-legend { grid-column: 1 / 3; }
|
|
.roster-list { padding: 10px; }
|
|
.roster-character { min-height: 58px; }
|
|
.roster-character-info { width: min(215px, 42%); padding: 13px; }
|
|
.roster-character-info h1 { font-size: 30px; }
|
|
.roster-footer { padding-top: 6px; }
|
|
.main-menu-screen { grid-template-columns: minmax(0, 1fr) 285px; grid-template-rows: 50px minmax(0, 1fr) 24px; gap: 8px; }
|
|
.main-menu-sidebar { grid-column: 2; grid-row: 2; display: block; max-height: none; overflow-y: auto; }
|
|
.main-menu-character { grid-template-columns: 48px minmax(0, 1fr); gap: 9px; padding: 10px; }
|
|
.main-menu-character__icon { width: 46px; height: 46px; }
|
|
.main-menu-character__summary h1 { font-size: 21px; }
|
|
.main-menu-modes { grid-column: 1; grid-row: 2; padding: 0 2px 8px 0; }
|
|
.main-menu-mode-grid { margin-top: 0; }
|
|
.character-create-screen { grid-template-columns: 225px minmax(220px, 1fr) 260px; grid-template-rows: 50px 3px minmax(0, 1fr) 60px; }
|
|
.creator-header, .creator-progress, .creator-footer { grid-column: 1 / 4; }
|
|
.creator-races { grid-column: 1; }
|
|
.creator-preview-stage { display: block; grid-column: 2; }
|
|
.creator-classes { grid-column: 3; }
|
|
.creator-races, .creator-classes { margin-top: 8px; margin-bottom: 7px; padding: 9px; }
|
|
.creator-races { margin-right: 6px; }
|
|
.creator-classes { margin-left: 6px; }
|
|
.creator-preview-stage { margin: 8px 0 7px; }
|
|
.appearance-preview-stage { display: block; grid-column: 1; }
|
|
.appearance-controls { grid-column: 2 / 4; }
|
|
.creator-footer { gap: 8px; }
|
|
.dungeon-select-screen { grid-template-columns: 260px minmax(0, 1fr); gap: 10px; }
|
|
.dungeon-select-detail { grid-template-columns: 1fr; gap: 10px; }
|
|
.dungeon-select-detail--leaderboard-open { grid-template-columns: 1fr; grid-template-rows: minmax(120px, .8fr) minmax(145px, 1fr); }
|
|
.dungeon-select-map { display: none; }
|
|
.dungeon-select-copy { padding: 8px; }
|
|
.dungeon-role-option { min-height: 48px; }
|
|
.front-surface--top :is(.race-option > span, .class-option strong, .roster-character small, .main-menu-mode small) { font-size: 12px; }
|
|
.race-option > b { font-size: 10px; }
|
|
.creator-classes { grid-template-rows: auto minmax(90px, 1fr) auto auto; overflow-y: auto; }
|
|
.class-summary { max-height: 100px; overflow-y: auto; }
|
|
.class-option small { font-size: 11px; }
|
|
.game-panel :is(p, small, label, dt, dd, em), .game-panel :is(button, select, input) { font-size: 12px; }
|
|
.game-panel :is(button, select, input), .pause-menu__actions .button { min-height: 44px; }
|
|
.game-panel .icon-button { min-width: 44px; }
|
|
.game-panel__footer { font-size: 11px; }
|
|
.game-panel :is(.party-roster strong, .spellbook-ability strong, .inventory-member strong) { font-size: 13px; }
|
|
.game-panel :is(.equipment-slot, .inventory-attributes-tabs button, .bindings-slot) { min-height: 44px; }
|
|
.party-frames { width: 230px; }
|
|
.party-frames > header { font-size: 11px; min-height: 18px; }
|
|
.party-frame { min-height: 48px; }
|
|
.party-frame__identity strong { font-size: 13px; }
|
|
.party-frame__identity small { font-size: 10px; }
|
|
.party-frame__health { height: 14px; }
|
|
.party-frame__health b { font-size: 10px; }
|
|
.party-command-bar strong { font-size: 11px; }
|
|
.party-command-bar kbd { display: none; }
|
|
.dungeon-complete-banner { width: min(610px, calc(100% - 24px)); }
|
|
.dungeon-complete-banner strong { font-size: 14px; }
|
|
.dungeon-complete-banner small { font-size: 11px; }
|
|
.dungeon-complete-banner .button, .defeated-prompt__panel .button { min-height: 44px; font-size: 12px; }
|
|
.defeated-prompt__panel > small { font-size: 11px; }
|
|
.dungeon-results :is(button, select) { min-height: 44px; font-size: 13px; }
|
|
.hud-minimap__caption span, .target-frame :is(small, header span) { font-size: 11px; }
|
|
.hud-minimap__caption strong { font-size: 13px; }
|
|
.target-frame header strong { font-size: 13px; }
|
|
.class-hall-screen { display: grid; grid-template-columns: 230px minmax(0, 1fr); grid-template-rows: 54px minmax(0, 1fr) 24px; gap: 10px; }
|
|
.class-hall-header { grid-column: 1 / 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--front-line); }
|
|
.class-hall-header > div:not(.front-brand) { flex: 1; }
|
|
.class-hall-header .front-brand { flex-direction: row; }
|
|
.class-hall-header > button { padding: 8px 14px; border: 1px solid var(--front-line); border-radius: 6px; color: var(--ink); background: #172b20; }
|
|
.class-hall-character { grid-column: 1; grid-row: 2; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; overflow: hidden; }
|
|
.class-hall-character > .character-preview { height: 100%; min-height: 0; }
|
|
.class-hall-character .character-preview figcaption { display: none; }
|
|
.class-hall-character > div { padding: 10px; }
|
|
.class-hall-character h1 { margin: 4px 0; font-size: 25px; }
|
|
.class-hall-character small { display: block; }
|
|
.class-hall-content { grid-column: 2; grid-row: 2; min-height: 0; overflow: auto; }
|
|
.class-hall-screen > .controller-legend { grid-column: 1 / 3; grid-row: 3; }
|
|
.content-manager-screen { display: grid; grid-template-rows: 60px minmax(0, 1fr) 24px; gap: 12px; }
|
|
.content-manager-header { display: flex; align-items: center; gap: 16px; }
|
|
.content-manager-header .front-brand { flex-direction: row; }
|
|
.content-manager-header > div:not(.front-brand) { flex: 1; }
|
|
.content-manager-main { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 0; gap: 12px; }
|
|
.content-manager-summary, .content-manager-packs { padding: 12px; min-height: 0; overflow: auto; }
|
|
.content-manager-summary h1 { font-size: 26px; line-height: 1.15; }
|
|
.content-manager-summary__actions { flex-wrap: wrap; gap: 8px; }
|
|
}
|