初版成品
This commit is contained in:
+147
-18
@@ -13,7 +13,7 @@
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
--bg-primary: #030712;
|
||||
--bg-primary: #000000;
|
||||
--bg-secondary: rgba(7, 15, 30, 0.72);
|
||||
--border-soft: rgba(148, 163, 184, 0.24);
|
||||
--text-primary: #e2e8f0;
|
||||
@@ -37,9 +37,7 @@ body,
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
background:
|
||||
radial-gradient(circle at top, rgba(14, 165, 233, 0.18), transparent 32%),
|
||||
linear-gradient(180deg, #020617 0%, #030712 45%, #02030a 100%);
|
||||
background: #000000;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
@@ -63,7 +61,7 @@ canvas {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background: radial-gradient(circle at top, rgba(56, 189, 248, 0.08), transparent 34%);
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
.scene-layer {
|
||||
@@ -80,8 +78,7 @@ canvas {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at center, transparent 0%, rgba(2, 6, 23, 0.08) 48%, rgba(2, 6, 23, 0.54) 100%),
|
||||
linear-gradient(180deg, rgba(2, 6, 23, 0.16) 0%, rgba(2, 6, 23, 0.48) 100%);
|
||||
radial-gradient(circle at center, transparent 30%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.9) 100%);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -182,14 +179,23 @@ canvas {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.glass-toolbar {
|
||||
.hud-bottom-container {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 28px;
|
||||
width: min(860px, calc(100% - 24px));
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.glass-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
width: min(860px, calc(100% - 24px));
|
||||
width: 100%;
|
||||
padding: 18px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.22);
|
||||
border-radius: 28px;
|
||||
@@ -198,7 +204,23 @@ canvas {
|
||||
backdrop-filter: blur(20px);
|
||||
box-shadow: 0 18px 56px rgba(2, 6, 23, 0.48);
|
||||
pointer-events: auto;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.footer-credit {
|
||||
font-size: 12px;
|
||||
color: rgba(226, 232, 240, 0.5);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.footer-credit a {
|
||||
color: rgba(226, 232, 240, 0.8);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: text-decoration 160ms ease;
|
||||
}
|
||||
|
||||
.footer-credit a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.toolbar-group {
|
||||
@@ -226,10 +248,20 @@ canvas {
|
||||
|
||||
.segment-control {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 46px;
|
||||
padding: 4px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.16);
|
||||
border-radius: 999px;
|
||||
background: rgba(2, 6, 23, 0.34);
|
||||
transition:
|
||||
border-color 160ms ease,
|
||||
background 160ms ease;
|
||||
}
|
||||
|
||||
.segment-control:hover {
|
||||
border-color: rgba(125, 211, 252, 0.32);
|
||||
background: rgba(15, 23, 42, 0.56);
|
||||
}
|
||||
|
||||
.segment-button {
|
||||
@@ -238,7 +270,11 @@ canvas {
|
||||
background: transparent;
|
||||
color: rgba(226, 232, 240, 0.78);
|
||||
cursor: pointer;
|
||||
padding: 10px 16px;
|
||||
height: 100%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 16px;
|
||||
transition:
|
||||
background 160ms ease,
|
||||
color 160ms ease;
|
||||
@@ -250,13 +286,17 @@ canvas {
|
||||
}
|
||||
|
||||
.toolbar-action {
|
||||
height: 46px;
|
||||
min-height: 46px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: 16px;
|
||||
border-radius: 999px;
|
||||
background: rgba(2, 6, 23, 0.36);
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
padding: 0 16px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition:
|
||||
border-color 160ms ease,
|
||||
background 160ms ease,
|
||||
@@ -288,17 +328,102 @@ canvas {
|
||||
|
||||
.glass-select {
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: 16px;
|
||||
background: rgba(2, 6, 23, 0.36);
|
||||
border-radius: 999px;
|
||||
background-color: rgba(2, 6, 23, 0.36);
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(226, 232, 240, 0.82)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 14px center;
|
||||
background-size: 16px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
color: var(--text-primary);
|
||||
height: 46px;
|
||||
min-height: 46px;
|
||||
outline: none;
|
||||
padding: 0 14px;
|
||||
padding: 0 36px 0 16px;
|
||||
transition:
|
||||
border-color 160ms ease,
|
||||
background-color 160ms ease;
|
||||
}
|
||||
|
||||
.glass-select:hover {
|
||||
border-color: rgba(125, 211, 252, 0.32);
|
||||
background-color: rgba(15, 23, 42, 0.56);
|
||||
}
|
||||
|
||||
.range-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(to right, rgba(56, 189, 248, 0.16) var(--volume-percent, 0%), rgba(2, 6, 23, 0.36) var(--volume-percent, 0%));
|
||||
background-clip: padding-box;
|
||||
transition: border-color 160ms ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.range-wrapper:hover {
|
||||
border-color: rgba(125, 211, 252, 0.32);
|
||||
}
|
||||
|
||||
.range-value {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
font-size: 14px;
|
||||
color: rgba(226, 232, 240, 0.9);
|
||||
font-weight: 500;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.glass-range {
|
||||
accent-color: var(--accent);
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.glass-range::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.glass-range::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.glass-range::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.glass-range::-moz-range-thumb {
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.overlay-fade-enter-active,
|
||||
@@ -340,12 +465,16 @@ canvas {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.glass-toolbar {
|
||||
.hud-bottom-container {
|
||||
bottom: 16px;
|
||||
width: min(520px, calc(100% - 16px));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.glass-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 14px;
|
||||
width: min(520px, calc(100% - 16px));
|
||||
border-radius: 24px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user