Files
xiaobaifupan/next/frontend/src/shared/styles/mobile.css
T

167 lines
2.8 KiB
CSS

@media (max-width: 1023px) {
.dialog-backdrop {
align-items: end;
padding: 0;
}
.dialog,
.dialog-wide {
width: 100%;
max-height: calc(100vh - var(--s-44));
border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.btn,
.icon-button {
min-height: var(--touch-height);
}
.icon-button {
width: var(--touch-height);
}
.membership-lock {
align-items: stretch;
flex-direction: column;
}
.app-shell {
padding-left: 0;
padding-bottom: var(--shell-mobile-nav-height);
}
.sidebar,
.statusbar,
.desktop-only,
.market-details {
display: none;
}
.topbar {
gap: var(--s-8);
padding: 0 var(--s-10);
}
.topbar-title {
font-size: var(--font-13);
}
.identity-cluster .tag,
.account-name,
.date-control .icon-button {
display: none;
}
.mobile-account-label {
display: inline;
}
.market-strip-row {
gap: var(--s-12);
overflow-x: auto;
padding-right: var(--s-10);
padding-left: var(--s-10);
white-space: nowrap;
}
.market-toggle {
display: none;
}
.page-frame {
min-height: calc(100vh - var(--shell-topbar-height) - var(--shell-summary-height) - var(--shell-mobile-nav-height));
padding: var(--s-12) var(--s-10);
}
.page-header {
align-items: flex-start;
gap: var(--s-4);
flex-direction: column;
}
.mobile-nav {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: var(--z-mobile-nav);
height: var(--shell-mobile-nav-height);
display: grid;
grid-template-columns: repeat(5, 1fr);
padding-bottom: env(safe-area-inset-bottom);
border-top: var(--s-1) solid var(--color-border);
background: var(--color-surface);
}
.mobile-nav-item {
min-width: 0;
display: grid;
place-items: center;
color: var(--color-text-secondary);
font-size: var(--font-11);
}
.mobile-nav-item.router-link-active {
color: var(--color-primary);
font-weight: var(--weight-600);
}
.status-grid {
grid-template-columns: 1fr 1fr;
}
.comparison-row {
grid-template-columns: minmax(0, 1fr) var(--s-64) var(--s-64);
}
.search-layout {
grid-template-columns: 1fr;
}
.search-results {
max-height: none;
border-right: 0;
padding-right: 0;
}
.search-preview {
display: none;
}
.auth-view {
align-items: start;
padding-top: var(--s-34);
}
.auth-panel {
box-shadow: none;
}
.system-header,
.system-header > div:first-child {
align-items: flex-start;
flex-direction: column;
}
.system-tabs {
width: 100%;
margin-left: 0;
overflow-x: auto;
}
.system-grid,
.model-grid {
grid-template-columns: 1fr;
}
.credential-row,
.selection-grid {
grid-template-columns: 1fr;
align-items: stretch;
}
.member-editor {
position: static;
}
}