324 行
6.8 KiB
CSS
324 行
6.8 KiB
CSS
/* Mobile touch target baseline (44px).
|
|
Keep it as a lightweight opt-in class to avoid breaking desktop layouts. */
|
|
|
|
.touch-target {
|
|
min-height: 44px;
|
|
min-width: 44px;
|
|
}
|
|
|
|
:root {
|
|
--mobile-viewport-height: 100vh;
|
|
--mobile-safe-area-bottom: env(safe-area-inset-bottom, 0px);
|
|
--mobile-page-x: clamp(10px, 3vw, 20px);
|
|
--mobile-page-y: clamp(10px, 2.8vw, 20px);
|
|
--mobile-card-gap: clamp(8px, 2.5vw, 14px);
|
|
--mobile-card-padding: clamp(12px, 3.4vw, 16px);
|
|
--mobile-bottom-nav-height: 68px;
|
|
--mobile-sticky-action-height: 78px;
|
|
--mobile-icon-action-min-height: 72px;
|
|
--mobile-slot-gap: clamp(12px, 3.7vw, 16px);
|
|
--mobile-action-icon-slot: 36px;
|
|
--mobile-me-slot-gap: var(--mobile-slot-gap);
|
|
--mobile-me-action-icon-slot: var(--mobile-action-icon-slot);
|
|
}
|
|
|
|
.page-scaffold.mobile-fixed-action-page {
|
|
animation: none;
|
|
transform: none;
|
|
}
|
|
|
|
@supports (height: 100dvh) {
|
|
:root {
|
|
--mobile-viewport-height: 100dvh;
|
|
}
|
|
}
|
|
|
|
.mobile-card {
|
|
border: 1px solid rgb(228 228 231);
|
|
border-radius: 12px;
|
|
background: rgb(255 255 255);
|
|
box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
|
|
padding: var(--mobile-card-padding);
|
|
}
|
|
|
|
.hyb-mobile-shell .section-panel::before {
|
|
display: none;
|
|
}
|
|
|
|
.mobile-icon-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: var(--mobile-card-gap);
|
|
min-width: 0;
|
|
}
|
|
|
|
.mobile-icon-action {
|
|
min-width: 0;
|
|
min-height: var(--mobile-icon-action-min-height);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: clamp(7px, 2vw, 9px);
|
|
border: 1px solid rgb(228 228 231);
|
|
border-radius: 14px;
|
|
background: rgb(255 255 255);
|
|
color: rgb(24 24 27);
|
|
padding: 8px 4px;
|
|
text-align: center;
|
|
box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
|
|
touch-action: manipulation;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.mobile-icon-action--primary {
|
|
border-color: rgb(191 219 254);
|
|
background: rgb(239 246 255);
|
|
color: rgb(0 57 138);
|
|
}
|
|
|
|
.mobile-icon-action--warning {
|
|
border-color: rgb(253 230 138);
|
|
background: rgb(255 251 235);
|
|
color: rgb(146 64 14);
|
|
}
|
|
|
|
.mobile-icon-action__icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
flex: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
border-radius: 12px;
|
|
background: rgb(255 255 255 / 0.86);
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
box-shadow: 0 1px 2px rgb(15 23 42 / 0.07);
|
|
}
|
|
|
|
.mobile-icon-action__icon svg {
|
|
display: block;
|
|
}
|
|
|
|
.mobile-icon-action__label {
|
|
display: block;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 13px;
|
|
font-weight: 650;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.mobile-adaptive-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
|
|
gap: var(--mobile-card-gap);
|
|
min-width: 0;
|
|
}
|
|
|
|
.mobile-entry-grid,
|
|
.mobile-me-entry-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--mobile-card-gap);
|
|
min-width: 0;
|
|
}
|
|
|
|
.mobile-slot-row,
|
|
.mobile-me-profile-row {
|
|
display: grid;
|
|
grid-template-columns: 44px minmax(0, 1fr);
|
|
column-gap: var(--mobile-slot-gap);
|
|
align-items: center;
|
|
min-width: 0;
|
|
}
|
|
|
|
.mobile-slot-avatar,
|
|
.mobile-me-avatar-slot {
|
|
width: 44px;
|
|
min-width: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.mobile-slot-copy,
|
|
.mobile-me-profile-copy {
|
|
min-width: 0;
|
|
}
|
|
|
|
.mobile-slot-copy > *,
|
|
.mobile-me-profile-copy > * {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mobile-action-link,
|
|
.mobile-me-action-link {
|
|
display: grid;
|
|
grid-template-columns: var(--mobile-action-icon-slot) minmax(0, 1fr);
|
|
column-gap: var(--mobile-slot-gap);
|
|
align-items: center;
|
|
min-width: 0;
|
|
min-height: 48px;
|
|
border: 1px solid rgb(228 228 231);
|
|
border-radius: 10px;
|
|
background: rgb(255 255 255);
|
|
padding: 8px 12px;
|
|
text-align: left;
|
|
box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
|
|
transition: background-color 150ms ease, border-color 150ms ease;
|
|
}
|
|
|
|
.mobile-action-link:hover,
|
|
.mobile-me-action-link:hover {
|
|
background: rgb(250 250 250);
|
|
}
|
|
|
|
.mobile-action-icon,
|
|
.mobile-me-action-icon {
|
|
width: var(--mobile-action-icon-slot);
|
|
height: var(--mobile-action-icon-slot);
|
|
border-radius: 10px;
|
|
background: rgb(244 244 245);
|
|
color: rgb(63 63 70);
|
|
padding: 7px;
|
|
}
|
|
|
|
.mobile-action-icon svg,
|
|
.mobile-me-action-icon svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.mobile-action-copy,
|
|
.mobile-me-action-copy {
|
|
display: block;
|
|
min-width: 0;
|
|
}
|
|
|
|
.mobile-action-copy > *,
|
|
.mobile-me-action-copy > * {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mobile-list-card {
|
|
min-width: 0;
|
|
border: 1px solid rgb(228 228 231);
|
|
border-radius: 12px;
|
|
background: rgb(255 255 255);
|
|
box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
|
|
padding: var(--mobile-card-padding);
|
|
}
|
|
|
|
.mobile-subcard {
|
|
min-width: 0;
|
|
border: 1px solid rgb(228 228 231);
|
|
border-radius: 10px;
|
|
background: rgb(255 255 255);
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.mobile-empty-state {
|
|
min-width: 0;
|
|
border: 1px dashed rgb(228 228 231);
|
|
border-radius: 12px;
|
|
padding: 20px 12px;
|
|
text-align: center;
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
color: rgb(113 113 122);
|
|
}
|
|
|
|
.mobile-info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
|
|
gap: var(--mobile-card-gap);
|
|
min-width: 0;
|
|
}
|
|
|
|
.mobile-field-list {
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.mobile-field-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(4.5rem, 34%) minmax(0, 1fr);
|
|
gap: 0.5rem;
|
|
align-items: start;
|
|
min-width: 0;
|
|
font-size: 0.875rem;
|
|
line-height: 1.5rem;
|
|
}
|
|
|
|
.mobile-field-label {
|
|
color: rgb(113 113 122);
|
|
}
|
|
|
|
.mobile-field-value {
|
|
min-width: 0;
|
|
color: rgb(39 39 42);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.mobile-metric-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.75rem), 1fr));
|
|
gap: var(--mobile-card-gap);
|
|
min-width: 0;
|
|
}
|
|
|
|
.mobile-two-action-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0.5rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.mobile-bottom-nav-surface {
|
|
min-height: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-area-bottom));
|
|
padding: 0.375rem var(--mobile-page-x) calc(0.35rem + var(--mobile-safe-area-bottom));
|
|
-webkit-transform: translateZ(0);
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
.mobile-sticky-action-surface {
|
|
padding: 0.75rem var(--mobile-page-x) max(0.75rem, var(--mobile-safe-area-bottom));
|
|
}
|
|
|
|
@media (max-width: 359px) {
|
|
:root {
|
|
--mobile-page-x: 8px;
|
|
--mobile-card-gap: 6px;
|
|
--mobile-card-padding: 10px;
|
|
--mobile-icon-action-min-height: 68px;
|
|
--mobile-slot-gap: 12px;
|
|
--mobile-action-icon-slot: 34px;
|
|
}
|
|
|
|
.mobile-icon-action__icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 10px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.mobile-icon-action__label {
|
|
font-size: 12px;
|
|
line-height: 17px;
|
|
}
|
|
}
|