网页优化
This commit is contained in:
tianmo committed
1 parent
49dd3b9472
commit
f4e69707c3
23 files changed
+123
-235
No files matched your search
@@ -211,6 +211,14 @@ html[data-theme="dark"] .icon-moon { display: none; }
|
||||
|
||||
.btn-ghost:hover { border-color: color-mix(in srgb, var(--cyan) 45%, var(--border)); transform: translateY(-1px); }
|
||||
|
||||
.btn-download {
|
||||
background: linear-gradient(135deg, #1976d2, #4fc1ff);
|
||||
color: #fff;
|
||||
box-shadow: 0 10px 26px rgba(25, 118, 210, .28);
|
||||
}
|
||||
|
||||
.btn-download:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(25, 118, 210, .36); }
|
||||
|
||||
.btn-sm { padding: 8px 15px; font-size: 13px; border-radius: 9px; }
|
||||
|
||||
.link-arrow {
|
||||
@@ -1282,123 +1290,6 @@ html[data-theme="light"] .viewer {
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
||||
.mode-visual {
|
||||
position: relative;
|
||||
height: 190px;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background:
|
||||
linear-gradient(130deg, color-mix(in srgb, var(--accent) 15%, var(--panel-2)), transparent 62%),
|
||||
radial-gradient(240px 180px at 78% 22%, color-mix(in srgb, var(--cyan) 15%, transparent), transparent 70%),
|
||||
var(--panel-2);
|
||||
}
|
||||
|
||||
.mode-visual::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: .32;
|
||||
background-image:
|
||||
linear-gradient(color-mix(in srgb, var(--text-dim) 12%, transparent) 1px, transparent 1px),
|
||||
linear-gradient(90deg, color-mix(in srgb, var(--text-dim) 12%, transparent) 1px, transparent 1px);
|
||||
background-size: 28px 28px;
|
||||
mask-image: linear-gradient(to bottom right, #000, transparent 78%);
|
||||
}
|
||||
|
||||
.pose-ring {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: 0 0 44px color-mix(in srgb, var(--accent) 18%, transparent);
|
||||
}
|
||||
|
||||
.pose-bone {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
height: 7px;
|
||||
width: 138px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent-2) 75%, #fff));
|
||||
transform-origin: 12% 50%;
|
||||
box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 35%, transparent);
|
||||
}
|
||||
|
||||
.pose-bone::before,
|
||||
.pose-bone::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
border: 5px solid var(--panel);
|
||||
background: #fff;
|
||||
transform: translateY(-50%);
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
|
||||
}
|
||||
|
||||
.pose-bone::before { left: -8px; }
|
||||
.pose-bone::after { right: -8px; }
|
||||
.pose-bone.b1 { transform: translate(-46px, -48px) rotate(24deg); }
|
||||
.pose-bone.b2 { transform: translate(-18px, 3px) rotate(-28deg); }
|
||||
.pose-bone.b3 { transform: translate(-56px, -21px) rotate(67deg); }
|
||||
|
||||
.motion-line {
|
||||
position: absolute;
|
||||
left: 18%;
|
||||
right: 18%;
|
||||
top: 50%;
|
||||
height: 2px;
|
||||
transform: rotate(-9deg);
|
||||
background: linear-gradient(90deg, transparent, var(--cyan), transparent);
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.motion-dot {
|
||||
position: absolute;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
border-radius: 17px;
|
||||
border: 1px solid color-mix(in srgb, var(--cyan) 45%, var(--border));
|
||||
background: color-mix(in srgb, var(--panel) 86%, transparent);
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
|
||||
}
|
||||
|
||||
.motion-dot::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 13px;
|
||||
top: 14px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
||||
box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .12);
|
||||
}
|
||||
|
||||
.motion-dot.d1 { left: 18%; top: 24px; transform: rotate(-14deg) scale(.72); opacity: .45; }
|
||||
.motion-dot.d2 { left: 42%; top: 64px; transform: rotate(6deg); }
|
||||
.motion-dot.d3 { right: 18%; top: 34px; transform: rotate(16deg) scale(.78); opacity: .55; }
|
||||
|
||||
.mode-file {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 14px;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid color-mix(in srgb, var(--cyan) 42%, var(--border));
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--panel) 86%, transparent);
|
||||
color: var(--cyan);
|
||||
font: 700 10.5px/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace;
|
||||
letter-spacing: .12em;
|
||||
}
|
||||
|
||||
.mode-copy { padding: 24px; }
|
||||
|
||||
.mode-label {
|
||||
@@ -1458,6 +1349,5 @@ html[data-theme="light"] .viewer {
|
||||
@media (max-width: 520px) {
|
||||
.safety-band { padding: 42px 0; }
|
||||
.safety-grid li { padding: 18px 18px 18px 54px; }
|
||||
.mode-visual { height: 170px; }
|
||||
.mode-copy { padding: 20px; }
|
||||
}
|
||||
Reference in new issue
Block a user