1
This commit is contained in:
192
src/index.css
192
src/index.css
@@ -34,7 +34,17 @@
|
||||
0 8px 18px rgba(255, 91, 132, 0.1);
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: #0a0a0a;
|
||||
color: #f4f4f5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@@ -554,6 +564,10 @@ body {
|
||||
|
||||
.platform-main-shell {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.platform-main-shell::before {
|
||||
@@ -581,6 +595,9 @@ body {
|
||||
|
||||
.platform-page-stage {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 100%;
|
||||
border: 1px solid var(--platform-page-border);
|
||||
border-radius: 2rem;
|
||||
@@ -592,13 +609,18 @@ body {
|
||||
.platform-tab-panel-stack {
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.platform-tab-panel {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
@@ -612,6 +634,8 @@ body {
|
||||
|
||||
.platform-surface {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--platform-surface-border);
|
||||
border-radius: 1.75rem;
|
||||
@@ -858,6 +882,8 @@ body {
|
||||
|
||||
.platform-bottom-nav {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: var(--platform-bottom-nav-height);
|
||||
gap: var(--platform-bottom-nav-gap);
|
||||
border: 1px solid var(--platform-desktop-panel-border);
|
||||
@@ -873,6 +899,7 @@ body {
|
||||
.platform-bottom-nav__button {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
min-height: calc(
|
||||
var(--platform-bottom-nav-height) - var(--platform-bottom-nav-padding) * 2
|
||||
@@ -894,6 +921,7 @@ body {
|
||||
.platform-bottom-nav__button-content {
|
||||
display: flex;
|
||||
min-height: 100%;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -996,6 +1024,7 @@ body {
|
||||
|
||||
.platform-desktop-shell {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--platform-desktop-shell-border);
|
||||
border-radius: 2.6rem;
|
||||
@@ -1005,6 +1034,75 @@ body {
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
@media (max-width: 639px) {
|
||||
:root {
|
||||
--platform-bottom-nav-height: 3.25rem;
|
||||
--platform-bottom-nav-padding: 0.18rem;
|
||||
--platform-bottom-nav-gap: 0.12rem;
|
||||
--platform-bottom-nav-radius: 1rem;
|
||||
--platform-bottom-nav-button-radius: 0.88rem;
|
||||
--platform-bottom-nav-icon-size: 0.98rem;
|
||||
--platform-bottom-nav-icon-shell-size: 1.42rem;
|
||||
--platform-bottom-nav-label-size: 10px;
|
||||
--platform-bottom-nav-label-tracking: 0.08em;
|
||||
--platform-bottom-nav-content-gap: 0.18rem;
|
||||
}
|
||||
|
||||
.platform-page-stage {
|
||||
border-radius: 1.35rem;
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--platform-page-border) 72%,
|
||||
transparent
|
||||
);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.platform-surface {
|
||||
border-radius: 1.4rem;
|
||||
}
|
||||
|
||||
.platform-pill {
|
||||
padding: 0.3rem 0.68rem;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.platform-tab-panel {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.platform-bottom-nav__label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.platform-mobile-entry-shell,
|
||||
.platform-mobile-entry-shell > *,
|
||||
.platform-mobile-home-stage,
|
||||
.platform-mobile-home-stage > *,
|
||||
.platform-mobile-home-stage section {
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.platform-mobile-home-stage {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: calc(100vw - 1rem);
|
||||
}
|
||||
|
||||
.platform-mobile-home-stage .platform-surface--hero {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.platform-mobile-hero-secondary {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.platform-bottom-nav {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.platform-desktop-shell::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -1949,6 +2047,100 @@ body {
|
||||
border-color: var(--platform-success-border) !important;
|
||||
}
|
||||
|
||||
/* 结果页亮色主题细节：只接管旧深色工具类，不改变页面结构。 */
|
||||
.platform-theme--light .platform-result-hero {
|
||||
border-color: var(--platform-surface-border) !important;
|
||||
background: radial-gradient(
|
||||
circle at top left,
|
||||
rgba(255, 204, 219, 0.34),
|
||||
transparent 34%
|
||||
),
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 248, 250, 0.9)) !important;
|
||||
color: var(--platform-text-strong) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.84),
|
||||
0 18px 42px rgba(222, 82, 124, 0.1);
|
||||
}
|
||||
|
||||
.platform-theme--light
|
||||
.platform-result-hero
|
||||
:where([class*='text-white'], [class*='text-cyan-50']) {
|
||||
color: var(--platform-text-strong) !important;
|
||||
}
|
||||
|
||||
.platform-theme--light
|
||||
.platform-result-hero
|
||||
:where([class*='bg-white/10'], [class*='bg-white/12']) {
|
||||
border: 1px solid var(--platform-subpanel-border);
|
||||
background: var(--platform-subpanel-fill) !important;
|
||||
color: var(--platform-text-base) !important;
|
||||
}
|
||||
|
||||
.platform-theme--light
|
||||
.platform-remap-surface
|
||||
:where(
|
||||
[class~='bg-white/52'],
|
||||
[class~='bg-white/72'],
|
||||
[class~='bg-white/78'],
|
||||
[class~='bg-white/86'],
|
||||
[class~='bg-white/90']
|
||||
) {
|
||||
background: var(--platform-subpanel-fill) !important;
|
||||
}
|
||||
|
||||
.platform-theme--light
|
||||
.platform-remap-surface
|
||||
:where(
|
||||
[class~='bg-amber-600'],
|
||||
[class~='bg-cyan-600'],
|
||||
[class~='bg-cyan-200']
|
||||
) {
|
||||
border-color: var(--platform-button-primary-border) !important;
|
||||
background: var(--platform-button-primary-fill) !important;
|
||||
color: var(--platform-button-primary-text) !important;
|
||||
box-shadow: 0 12px 26px rgba(255, 91, 132, 0.16);
|
||||
}
|
||||
|
||||
.platform-theme--light .map-modal-overlay {
|
||||
background: rgba(73, 45, 56, 0.24) !important;
|
||||
}
|
||||
|
||||
.platform-theme--light .map-modal-shell {
|
||||
background: var(--platform-modal-fill);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.78),
|
||||
0 24px 70px rgba(131, 77, 98, 0.2) !important;
|
||||
}
|
||||
|
||||
.platform-theme--light .map-modal-backdrop {
|
||||
opacity: 0.18;
|
||||
filter: saturate(0.82) brightness(1.28);
|
||||
}
|
||||
|
||||
.platform-theme--light .map-modal-shade {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.7),
|
||||
rgba(255, 247, 250, 0.88)
|
||||
) !important;
|
||||
}
|
||||
|
||||
.platform-theme--light .map-info-panel,
|
||||
.platform-theme--light .map-room-cell {
|
||||
color: var(--platform-text-base) !important;
|
||||
--frame-base: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.platform-theme--light .map-room-cell {
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.78),
|
||||
0 10px 22px rgba(132, 90, 106, 0.08);
|
||||
}
|
||||
|
||||
.platform-theme--light .map-modal-shell svg line {
|
||||
stroke: rgba(217, 53, 112, 0.32);
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user