Android build v1.1.7
This commit is contained in:
Warren H
+199
@@ -1433,6 +1433,14 @@ textarea:focus-visible,
|
||||
display: none;
|
||||
}
|
||||
|
||||
.game-shell.settings-shell {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.game-shell.settings-shell > .app-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.auth-shell {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@@ -1988,6 +1996,14 @@ h2 {
|
||||
outline-color: var(--gold);
|
||||
}
|
||||
|
||||
.settings-nav {
|
||||
align-items: stretch;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.settings-tabs,
|
||||
.talent-page-tabs {
|
||||
display: grid;
|
||||
@@ -1996,6 +2012,10 @@ h2 {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.settings-tabs {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.settings-tabs button,
|
||||
.talent-page-tabs button {
|
||||
background: #15161c;
|
||||
@@ -2025,9 +2045,15 @@ h2 {
|
||||
height: calc(100dvh - 92px);
|
||||
}
|
||||
|
||||
.settings-shell .settings-screen {
|
||||
height: calc(100dvh - 12px);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.settings-tab-panel {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.settings-bindings-panel {
|
||||
@@ -2045,6 +2071,7 @@ h2 {
|
||||
.settings-bindings-panel .binding-list {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.equipment-screen .gear-summary,
|
||||
@@ -6962,6 +6989,178 @@ h2 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.settings-screen {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.settings-shell .settings-screen {
|
||||
height: calc(100dvh - 12px);
|
||||
}
|
||||
|
||||
.settings-nav {
|
||||
gap: 6px;
|
||||
grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.settings-tabs {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.settings-tabs button,
|
||||
.settings-back-button {
|
||||
font-size: 7px;
|
||||
min-height: 32px;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.settings-tab-panel {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.dual-screen-settings,
|
||||
.controller-preferences {
|
||||
gap: 10px;
|
||||
margin: 8px 0 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.dual-screen-settings.settings-tab-panel,
|
||||
.controller-preferences.settings-tab-panel {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.dual-screen-settings {
|
||||
align-items: start;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(214px, auto);
|
||||
}
|
||||
|
||||
.dual-screen-settings h2,
|
||||
.settings-heading h2 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dual-screen-settings p:not(.eyebrow),
|
||||
.controller-preferences p:not(.eyebrow) {
|
||||
font-size: 14px;
|
||||
line-height: 1.15;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.dual-screen-settings > small {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.dual-screen-actions {
|
||||
align-content: start;
|
||||
align-self: start;
|
||||
gap: 7px;
|
||||
min-width: 214px;
|
||||
}
|
||||
|
||||
.dual-screen-actions button,
|
||||
.controller-preferences button {
|
||||
min-height: 32px;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.controller-preferences {
|
||||
align-items: stretch;
|
||||
align-content: start;
|
||||
grid-template-columns: minmax(0, 1fr) repeat(2, minmax(158px, auto));
|
||||
}
|
||||
|
||||
.controller-preferences h3 {
|
||||
color: var(--ink);
|
||||
font-family: var(--pixel-font);
|
||||
font-size: 10px;
|
||||
line-height: 1.35;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.controller-icon-options {
|
||||
gap: 6px;
|
||||
grid-template-columns: minmax(112px, 1fr) repeat(3, minmax(104px, auto));
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.controller-icon-options > span {
|
||||
font-size: 7px;
|
||||
}
|
||||
|
||||
.controller-icon-options button {
|
||||
font-size: 6px;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.controller-style-preview .controller-face-icon {
|
||||
height: 18px;
|
||||
min-width: 18px;
|
||||
}
|
||||
|
||||
.controller-style-preview .controller-face-playstation {
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.settings-bindings-panel .settings-heading {
|
||||
padding: 4px 0 5px;
|
||||
}
|
||||
|
||||
.settings-heading > p {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.settings-heading .eyebrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.binding-tabs {
|
||||
gap: 7px;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.binding-tabs button {
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.binding-list {
|
||||
gap: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.binding-list button {
|
||||
min-height: 24px;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.binding-list button > span {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.binding-list kbd {
|
||||
font-size: 6px;
|
||||
min-height: 18px;
|
||||
}
|
||||
|
||||
.binding-list .controller-face-icon {
|
||||
font-size: 10px;
|
||||
height: 17px;
|
||||
min-width: 17px;
|
||||
}
|
||||
|
||||
.binding-list .controller-face-playstation {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.settings-footer {
|
||||
font-size: 13px;
|
||||
margin-top: 6px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.settings-footer .text-button {
|
||||
padding: 6px 9px;
|
||||
}
|
||||
|
||||
.dungeon-card {
|
||||
gap: 12px;
|
||||
grid-template-columns: 72px 1fr;
|
||||
|
||||
+1
-1
@@ -456,7 +456,7 @@ function App() {
|
||||
const canShowCloudSync = account.id !== -1 && cloudSync.available
|
||||
|
||||
return (
|
||||
<main className={`game-shell ${screen === 'dungeons' || screen === 'raids' ? 'dungeon-shell' : ''} ${screen === 'customize' ? 'workshop-shell' : ''}`}>
|
||||
<main className={`game-shell ${screen === 'dungeons' || screen === 'raids' ? 'dungeon-shell' : ''} ${screen === 'customize' ? 'workshop-shell' : ''} ${screen === 'settings' ? 'settings-shell' : ''}`}>
|
||||
<header className="topbar app-header">
|
||||
<button
|
||||
className="brand-button"
|
||||
|
||||
@@ -91,33 +91,28 @@ export function SettingsScreen({ onBack }: { onBack: () => void }) {
|
||||
|
||||
return (
|
||||
<section className="content-screen settings-screen">
|
||||
<div className="screen-heading">
|
||||
<div>
|
||||
<p className="eyebrow">Game Options</p>
|
||||
<h1>Settings</h1>
|
||||
</div>
|
||||
<button className="back-button" onClick={onBack} type="button">Back</button>
|
||||
<div className="settings-nav">
|
||||
<button className="back-button settings-back-button" onClick={onBack} type="button">Back</button>
|
||||
<nav className="settings-tabs" role="tablist" aria-label="Settings sections">
|
||||
{([
|
||||
{ key: 'display', label: 'Display' },
|
||||
{ key: 'input', label: 'Input' },
|
||||
{ key: 'bindings', label: 'Bindings' },
|
||||
] as const).map((tab) => (
|
||||
<button
|
||||
aria-selected={settingsTab === tab.key}
|
||||
className={settingsTab === tab.key ? 'selected' : ''}
|
||||
key={tab.key}
|
||||
onClick={() => setSettingsTab(tab.key)}
|
||||
role="tab"
|
||||
type="button"
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<nav className="settings-tabs" role="tablist" aria-label="Settings sections">
|
||||
{([
|
||||
{ key: 'display', label: 'Display' },
|
||||
{ key: 'input', label: 'Input' },
|
||||
{ key: 'bindings', label: 'Bindings' },
|
||||
] as const).map((tab) => (
|
||||
<button
|
||||
aria-selected={settingsTab === tab.key}
|
||||
className={settingsTab === tab.key ? 'selected' : ''}
|
||||
key={tab.key}
|
||||
onClick={() => setSettingsTab(tab.key)}
|
||||
role="tab"
|
||||
type="button"
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{settingsTab === 'display' && (
|
||||
<section className="dual-screen-settings settings-tab-panel">
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user