mirror of
https://github.com/seregonwar/zftpd.git
synced 2026-10-22 11:42:21 -05:00
1103 lines
18 KiB
CSS
1103 lines
18 KiB
CSS
/* ══ MOBILE APP SHELL ═════════════════════════════════════════════════════
|
|
* Touch-first layout for phones and small tablets.
|
|
* ═════════════════════════════════════════════════════════════════════════ */
|
|
|
|
.theme-select-mobile {
|
|
display: none;
|
|
background: var(--sf2);
|
|
color: var(--tx);
|
|
border: 1px solid var(--bd);
|
|
border-radius: 8px;
|
|
padding: 6px 28px 6px 10px;
|
|
font-size: 12px;
|
|
font-family: inherit;
|
|
appearance: none;
|
|
width: 120px;
|
|
}
|
|
|
|
.theme-select-mobile:focus {
|
|
outline: 2px solid var(--ac);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body {
|
|
padding-bottom: calc(76px + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
body::before {
|
|
background-size: auto, 32px 32px, 32px 32px;
|
|
}
|
|
|
|
/* ── Topbar ── */
|
|
.topbar {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
grid-template-areas:
|
|
"brand status"
|
|
"command command";
|
|
align-items: center;
|
|
gap: 10px 12px;
|
|
min-height: 0;
|
|
height: auto;
|
|
padding: 10px 12px 12px;
|
|
}
|
|
|
|
.topbar-left {
|
|
grid-area: brand;
|
|
min-width: 0;
|
|
}
|
|
|
|
.brand {
|
|
gap: 8px;
|
|
}
|
|
|
|
.brand-logo {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.brand-title {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.brand-sub {
|
|
display: none;
|
|
}
|
|
|
|
.topbar-center {
|
|
grid-area: command;
|
|
width: 100%;
|
|
min-width: 0;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 8px;
|
|
}
|
|
|
|
.cmd-trigger {
|
|
width: 100%;
|
|
max-width: none;
|
|
min-width: 0;
|
|
height: 46px;
|
|
border-radius: 10px;
|
|
padding: 0 12px;
|
|
background: var(--sf);
|
|
}
|
|
|
|
.cmd-view {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.cmd-context {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.topbar-tools {
|
|
margin-left: 0;
|
|
gap: 6px;
|
|
}
|
|
|
|
.tb-tool {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.topbar-right {
|
|
grid-area: status;
|
|
justify-content: flex-end;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
.tb-health,
|
|
.theme-dd {
|
|
display: none !important;
|
|
}
|
|
|
|
.theme-btn {
|
|
display: none !important;
|
|
}
|
|
|
|
.theme-select-mobile {
|
|
display: block !important;
|
|
width: 104px;
|
|
height: 34px;
|
|
padding: 0 26px 0 10px;
|
|
border-radius: 10px;
|
|
font-weight: 700;
|
|
background: var(--sf2);
|
|
}
|
|
|
|
.status-pill {
|
|
height: 34px;
|
|
max-width: 116px;
|
|
padding: 0 10px;
|
|
font-size: 11px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.tb-notif-btn {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.tb-dl-pill {
|
|
max-width: 78px;
|
|
}
|
|
|
|
.tb-notif-dd {
|
|
position: fixed;
|
|
top: 74px;
|
|
left: 12px;
|
|
right: 12px;
|
|
width: auto;
|
|
max-height: calc(100vh - 160px);
|
|
}
|
|
|
|
[data-theme="cloud"] .topbar {
|
|
background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
|
|
box-shadow: 0 1px 0 rgba(15, 23, 42, .08), 0 8px 18px rgba(15, 23, 42, .08);
|
|
}
|
|
|
|
/* ── Bottom navigation ── */
|
|
.nav-tabs {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 650;
|
|
display: grid;
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
gap: 4px;
|
|
padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
|
|
border-top: 1px solid var(--bd);
|
|
border-bottom: 0;
|
|
background: var(--topbar-bg, var(--sf));
|
|
box-shadow: 0 -12px 30px rgba(0, 0, 0, .22);
|
|
overflow: visible;
|
|
}
|
|
|
|
.nav-tab {
|
|
min-width: 0;
|
|
height: 58px;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
padding: 6px 2px;
|
|
border: 0;
|
|
border-radius: 12px;
|
|
font-size: 0;
|
|
color: var(--tx3);
|
|
}
|
|
|
|
.nav-tab::after {
|
|
content: attr(data-label);
|
|
display: block;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: currentColor;
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.nav-tab svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.nav-tab.active {
|
|
border-bottom-color: transparent;
|
|
background: var(--tg);
|
|
color: var(--ac);
|
|
text-shadow: none;
|
|
}
|
|
|
|
.nav-tab:focus-visible {
|
|
outline: 2px solid var(--ac);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
[data-theme="cloud"] .nav-tabs {
|
|
background: rgba(255, 255, 255, .96);
|
|
box-shadow: 0 -10px 26px rgba(15, 23, 42, .12);
|
|
}
|
|
|
|
/* ── Shared content rhythm ── */
|
|
.content {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
min-height: auto;
|
|
padding: 14px 12px 18px;
|
|
}
|
|
|
|
.view {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.btn {
|
|
min-height: 40px;
|
|
justify-content: center;
|
|
border-radius: 10px;
|
|
padding: 8px 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.btn.icon-only {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.toast-wrap {
|
|
left: 12px;
|
|
right: 12px;
|
|
bottom: calc(82px + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.toast {
|
|
max-width: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.modal-overlay {
|
|
align-items: flex-end;
|
|
padding: 12px;
|
|
}
|
|
|
|
.modal-panel {
|
|
width: 100%;
|
|
max-height: calc(100vh - 42px);
|
|
border-radius: 16px 16px 12px 12px;
|
|
}
|
|
|
|
.modal-footer {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.modal-footer .btn {
|
|
flex: 1 1 120px;
|
|
}
|
|
|
|
/* ── Explorer toolbar ── */
|
|
.toolbar {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
align-items: stretch;
|
|
gap: 7px;
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.toolbar .tb-sep,
|
|
.toolbar .spacer {
|
|
display: none;
|
|
}
|
|
|
|
.toolbar > .btn,
|
|
.toolbar .sort-select,
|
|
.toolbar .vg {
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: 40px;
|
|
}
|
|
|
|
.toolbar .btn.icon-only {
|
|
width: 100%;
|
|
}
|
|
|
|
#btn-up { order: 1; }
|
|
#btn-ref { order: 2; }
|
|
#btn-upload-trigger { order: 3; grid-column: span 2; }
|
|
#btn-new-folder-trigger { order: 4; grid-column: span 2; }
|
|
#btn-open-selected { order: 5; }
|
|
#btn-download-selected { order: 6; }
|
|
#btn-send-selected { order: 7; }
|
|
#btn-delete-selected { order: 8; }
|
|
|
|
.toolbar .vg {
|
|
order: 9;
|
|
grid-column: span 3;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.toolbar .vg .vb {
|
|
flex: 1 1 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#sort-select {
|
|
order: 10;
|
|
grid-column: span 2;
|
|
font-size: 12px;
|
|
}
|
|
|
|
#sort-dir {
|
|
order: 11;
|
|
}
|
|
|
|
#btn-inspector {
|
|
order: 12;
|
|
}
|
|
|
|
.search-wrap {
|
|
order: 20;
|
|
grid-column: 1 / -1;
|
|
width: 100%;
|
|
}
|
|
|
|
.search {
|
|
width: 100%;
|
|
max-width: none;
|
|
height: 40px;
|
|
padding-left: 34px;
|
|
border-radius: 10px;
|
|
background: var(--sf2);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.breadcrumb {
|
|
padding: 8px 12px;
|
|
gap: 4px;
|
|
}
|
|
|
|
.crumb {
|
|
max-width: 52vw;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding: 5px 8px;
|
|
border-radius: 8px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
/* ── Explorer scene ── */
|
|
.explorer-content {
|
|
padding-top: 12px;
|
|
}
|
|
|
|
.explorer-shell,
|
|
.explorer-shell.inspector-collapsed {
|
|
display: block;
|
|
}
|
|
|
|
.explorer-main {
|
|
width: 100%;
|
|
}
|
|
|
|
.fl-header {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.fl-titlebar {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.fl-count {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.fl-selection:not(:empty) {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.fl-filters {
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
flex-wrap: nowrap;
|
|
gap: 6px;
|
|
overflow-x: auto;
|
|
padding-bottom: 2px;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.fl-filters::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.filter-chip {
|
|
flex: 0 0 auto;
|
|
min-height: 32px;
|
|
padding: 6px 12px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.explorer-metrics {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.explorer-metric {
|
|
min-height: 76px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.explorer-metric span {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.explorer-metric b {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.fl.vg-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.fl.vg-grid .card {
|
|
min-height: 134px;
|
|
padding: 15px 10px 12px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.fl.vg-grid .card:hover {
|
|
transform: none;
|
|
}
|
|
|
|
.c-ico {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
.c-name {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.c-meta {
|
|
min-height: 20px;
|
|
}
|
|
|
|
.fl.vg-list .card {
|
|
min-height: 58px;
|
|
border-radius: 12px;
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.c-right {
|
|
max-width: 42%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dtbl-wrap {
|
|
overflow: visible;
|
|
}
|
|
|
|
.dtbl,
|
|
.dtbl thead,
|
|
.dtbl tbody,
|
|
.dtbl tr,
|
|
.dtbl td {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.dtbl thead {
|
|
display: none;
|
|
}
|
|
|
|
.dtbl tbody tr {
|
|
display: grid;
|
|
grid-template-columns: 36px minmax(0, 1fr) auto;
|
|
grid-template-rows: auto auto;
|
|
gap: 2px 10px;
|
|
margin-bottom: 8px;
|
|
padding: 11px 12px;
|
|
border: 1px solid var(--bd);
|
|
border-radius: 12px;
|
|
background: var(--sf);
|
|
}
|
|
|
|
.dtbl tbody td {
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
.dtbl .t-ic {
|
|
grid-row: 1 / 3;
|
|
grid-column: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
}
|
|
|
|
.dtbl .t-nm {
|
|
grid-column: 2;
|
|
max-width: none;
|
|
min-width: 0;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.dtbl .t-ex {
|
|
grid-column: 3;
|
|
width: auto;
|
|
align-self: start;
|
|
}
|
|
|
|
.dtbl .t-sz {
|
|
grid-column: 2;
|
|
width: auto;
|
|
color: var(--tx2);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.dtbl .t-dt {
|
|
grid-column: 3;
|
|
width: auto;
|
|
text-align: right;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.preview-pane {
|
|
position: fixed;
|
|
left: 10px;
|
|
right: 10px;
|
|
bottom: calc(74px + env(safe-area-inset-bottom));
|
|
top: auto;
|
|
z-index: 640;
|
|
width: auto;
|
|
height: min(72vh, 620px);
|
|
max-height: calc(100vh - 116px);
|
|
min-height: 0;
|
|
border-radius: 16px 16px 12px 12px;
|
|
overflow: auto;
|
|
transform: translateY(calc(100% + 90px));
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: transform .24s ease, opacity .18s ease;
|
|
box-shadow: 0 24px 80px rgba(0, 0, 0, .42);
|
|
}
|
|
|
|
.preview-pane:not(.collapsed) {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.preview-head {
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.preview-title {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.preview-close {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 11px;
|
|
}
|
|
|
|
.preview-body {
|
|
padding: 14px;
|
|
}
|
|
|
|
.preview-hero,
|
|
.preview-media {
|
|
min-height: 180px;
|
|
}
|
|
|
|
.preview-actions .btn {
|
|
flex: 1 1 120px;
|
|
}
|
|
|
|
.metric-grid {
|
|
gap: 10px;
|
|
}
|
|
|
|
.meta-row {
|
|
grid-template-columns: 74px minmax(0, 1fr);
|
|
}
|
|
|
|
.text-preview {
|
|
max-height: 38vh;
|
|
}
|
|
|
|
/* ── Dashboard ── */
|
|
.dash {
|
|
max-width: none;
|
|
gap: 14px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.dash-section {
|
|
padding: 16px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.dash-section-title {
|
|
gap: 9px;
|
|
margin-bottom: 14px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.dash-section-title .dash-see-all {
|
|
padding: 5px 9px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.dash-hero-banner {
|
|
height: 260px;
|
|
}
|
|
|
|
.dash-hero-content {
|
|
align-items: flex-end;
|
|
padding: 18px;
|
|
}
|
|
|
|
.dash-hero-cover {
|
|
width: 94px;
|
|
height: 94px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.dash-hero-title {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.dash-games-row {
|
|
gap: 12px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.dash-game-card {
|
|
width: 138px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.dash-game-cover {
|
|
height: 138px;
|
|
}
|
|
|
|
.dash-grid-2col {
|
|
gap: 14px;
|
|
}
|
|
|
|
.dash-actions-grid {
|
|
gap: 10px;
|
|
}
|
|
|
|
.dash-action-pill {
|
|
padding: 13px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.dash-stats-flex {
|
|
gap: 10px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.dash-stat-ring-container {
|
|
border-radius: 12px;
|
|
padding: 14px 8px;
|
|
}
|
|
|
|
.dash-loc-box {
|
|
width: calc(100vw - 24px);
|
|
max-height: calc(100vh - 44px);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.dash-loc-box-title,
|
|
.dash-loc-actions,
|
|
.dash-loc-list {
|
|
padding-left: 14px;
|
|
padding-right: 14px;
|
|
}
|
|
|
|
.dash-loc-actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dash-loc-list-item {
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
gap: 6px 10px;
|
|
}
|
|
|
|
.dash-loc-drive {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.dash-loc-path {
|
|
flex-basis: calc(100% - 76px);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.dash-loc-size {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.dash-library-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
/* ── Dual pane manager ── */
|
|
.fm-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
height: auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
.fm-panel {
|
|
min-height: 320px;
|
|
max-height: 48vh;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.fm-center {
|
|
position: sticky;
|
|
bottom: calc(78px + env(safe-area-inset-bottom));
|
|
z-index: 20;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
padding: 8px;
|
|
border: 1px solid var(--bd);
|
|
border-radius: 14px;
|
|
background: var(--sf);
|
|
box-shadow: var(--card-shadow);
|
|
}
|
|
|
|
.fm-action-btn {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.fm-row {
|
|
min-height: 44px;
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.fm-row-date {
|
|
display: none;
|
|
}
|
|
|
|
.fm-row-size {
|
|
min-width: 56px;
|
|
}
|
|
|
|
/* ── Downloads ── */
|
|
.dl-container {
|
|
max-width: none;
|
|
}
|
|
|
|
.dl-input-bar {
|
|
flex-direction: column;
|
|
padding: 10px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.dl-url-wrap,
|
|
.dl-dest-btn,
|
|
.dl-start-btn {
|
|
min-height: 44px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.dl-dest-btn,
|
|
.dl-start-btn {
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.dl-card {
|
|
padding: 12px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.dl-card-top,
|
|
.dl-card-stats,
|
|
.dl-card-footer,
|
|
.dl-history-item {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.dl-card-status {
|
|
align-items: flex-start;
|
|
margin-left: 46px;
|
|
}
|
|
|
|
.dl-stat:nth-child(1),
|
|
.dl-stat-center,
|
|
.dl-stat-right {
|
|
min-width: 0;
|
|
flex: 1 1 120px;
|
|
text-align: left;
|
|
}
|
|
|
|
.dl-card-actions {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.dl-card-actions .btn-sm {
|
|
flex: 1;
|
|
justify-content: center;
|
|
min-height: 36px;
|
|
}
|
|
|
|
/* ── Games ── */
|
|
.games-command-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 12px;
|
|
padding: 14px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.games-title-block h1 {
|
|
font-size: 26px;
|
|
}
|
|
|
|
.games-title-block p {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.games-summary {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.games-summary-card {
|
|
padding: 9px;
|
|
}
|
|
|
|
.games-summary-card b {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.games-command-tools {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.games-card-actions .games-btn-repair,
|
|
.games-card-actions .games-btn-danger {
|
|
display: none;
|
|
}
|
|
|
|
.games-install-panel,
|
|
.games-workspace {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.games-install-panel,
|
|
.games-shelf {
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.games-actions-row {
|
|
grid-template-columns: 1fr;
|
|
width: 100%;
|
|
}
|
|
|
|
.games-actions-row .btn,
|
|
.games-install-status {
|
|
width: 100%;
|
|
}
|
|
|
|
.games-input {
|
|
min-height: 44px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.games-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
min-height: 160px;
|
|
gap: 10px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.games-grid.compact {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.games-grid.compact .games-card {
|
|
display: grid;
|
|
grid-template-columns: 76px minmax(0, 1fr);
|
|
}
|
|
|
|
.games-grid.compact .games-card-cover {
|
|
width: 76px;
|
|
height: 100%;
|
|
min-height: 108px;
|
|
aspect-ratio: auto;
|
|
}
|
|
|
|
.games-grid.compact .games-card-body {
|
|
padding: 10px;
|
|
}
|
|
|
|
.games-card {
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.games-card-actions {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.games-empty {
|
|
min-height: 132px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
/* ── Command Center ── */
|
|
.cmd-palette {
|
|
align-items: flex-start;
|
|
padding: 14px 10px calc(90px + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.cmd-card {
|
|
max-height: calc(100vh - 112px);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.cmd-item {
|
|
grid-template-columns: 34px minmax(0, 1fr);
|
|
}
|
|
|
|
.cmd-item-scope {
|
|
display: none;
|
|
}
|
|
|
|
.xfer-tray {
|
|
left: 10px;
|
|
right: 10px;
|
|
max-width: none;
|
|
bottom: calc(84px + env(safe-area-inset-bottom));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 430px) {
|
|
.topbar {
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 9px;
|
|
}
|
|
|
|
.brand-logo {
|
|
width: 34px;
|
|
height: 34px;
|
|
}
|
|
|
|
.brand-title {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.status-pill {
|
|
width: 34px;
|
|
padding: 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
.status-pill .stxt {
|
|
display: none;
|
|
}
|
|
|
|
.theme-select-mobile {
|
|
width: 88px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.topbar-center {
|
|
grid-template-columns: minmax(0, 1fr) repeat(3, 40px);
|
|
}
|
|
|
|
.topbar-tools {
|
|
display: contents;
|
|
}
|
|
|
|
.tb-tool {
|
|
width: 40px;
|
|
height: 44px;
|
|
}
|
|
|
|
.toolbar {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
#btn-upload-trigger,
|
|
#btn-new-folder-trigger,
|
|
.toolbar .vg,
|
|
#sort-select {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.explorer-metrics,
|
|
.fl.vg-grid,
|
|
.games-summary,
|
|
.games-grid,
|
|
.dash-library-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.explorer-metric {
|
|
min-height: 72px;
|
|
}
|
|
|
|
.metric-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.dash-actions-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.dash-stats-flex {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dash-hero-banner {
|
|
height: 220px;
|
|
}
|
|
|
|
.dash-hero-cover {
|
|
display: none;
|
|
}
|
|
|
|
.dash-loc-title-text b {
|
|
white-space: normal;
|
|
}
|
|
|
|
.games-command-tools {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (hover: none) and (pointer: coarse) {
|
|
.btn:hover,
|
|
.tb-tool:hover,
|
|
.nav-tab:hover,
|
|
.fl.vg-grid .card:hover,
|
|
.games-card:hover,
|
|
.dash-game-card:hover {
|
|
transform: none;
|
|
}
|
|
}
|