mirror of
https://github.com/shadoll/www.shadoll.git
synced 2026-08-28 03:28:32 +00:00
833 lines
19 KiB
CSS
833 lines
19 KiB
CSS
/* ===== CSS Custom Properties ===== */
|
|
:root {
|
|
/* Default palette - Purple/Pink/Blue */
|
|
--gradient-color-1: #667eea;
|
|
--gradient-color-2: #764ba2;
|
|
--gradient-color-3: #f093fb;
|
|
--gradient-color-4: #4facfe;
|
|
|
|
/* Animation timings (can be overridden via speed multiplier) */
|
|
--speed-multiplier: 1;
|
|
--gradient-duration: calc(15s / var(--speed-multiplier));
|
|
--logo-shake-duration: calc(3s / var(--speed-multiplier));
|
|
--logo-rotate-duration: calc(8s / var(--speed-multiplier));
|
|
--logo-tilt-duration: calc(4s / var(--speed-multiplier));
|
|
--neon-duration: calc(2s / var(--speed-multiplier));
|
|
--color-change-duration: calc(5s / var(--speed-multiplier));
|
|
--explosion-duration: calc(3s / var(--speed-multiplier));
|
|
}
|
|
|
|
/* ===== Color Palettes ===== */
|
|
|
|
/* Default: Purple/Pink/Blue */
|
|
.palette--default {
|
|
--gradient-color-1: #667eea;
|
|
--gradient-color-2: #764ba2;
|
|
--gradient-color-3: #f093fb;
|
|
--gradient-color-4: #4facfe;
|
|
}
|
|
|
|
/* Blue/Yellow - Ocean Sunset */
|
|
.palette--blue-yellow {
|
|
--gradient-color-1: #1e3c72;
|
|
--gradient-color-2: #2a5298;
|
|
--gradient-color-3: #f4d03f;
|
|
--gradient-color-4: #16a085;
|
|
}
|
|
|
|
/* Dark - Deep Space */
|
|
.palette--dark {
|
|
--gradient-color-1: #0f2027;
|
|
--gradient-color-2: #203a43;
|
|
--gradient-color-3: #2c5364;
|
|
--gradient-color-4: #0a0e27;
|
|
}
|
|
|
|
/* Light - Pastel Dream */
|
|
.palette--light {
|
|
--gradient-color-1: #ffecd2;
|
|
--gradient-color-2: #fcb69f;
|
|
--gradient-color-3: #ff9a9e;
|
|
--gradient-color-4: #fad0c4;
|
|
}
|
|
|
|
/* Fire - Red/Orange/Yellow */
|
|
.palette--fire {
|
|
--gradient-color-1: #ff0844;
|
|
--gradient-color-2: #ffb199;
|
|
--gradient-color-3: #ff6a00;
|
|
--gradient-color-4: #ee0979;
|
|
}
|
|
|
|
/* Nature - Green/Teal */
|
|
.palette--nature {
|
|
--gradient-color-1: #11998e;
|
|
--gradient-color-2: #38ef7d;
|
|
--gradient-color-3: #20E2D7;
|
|
--gradient-color-4: #29ffc6;
|
|
}
|
|
|
|
/* ===== Reset & Base Styles ===== */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
}
|
|
|
|
/* ===== Background Styles ===== */
|
|
.background {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 0;
|
|
background: linear-gradient(45deg, var(--gradient-color-1), var(--gradient-color-2));
|
|
}
|
|
|
|
/* Animated Background */
|
|
.background--animated {
|
|
animation: gradientShift var(--gradient-duration) ease infinite;
|
|
background-size: 400% 400%;
|
|
}
|
|
|
|
/* Gradient Types */
|
|
.background--linear {
|
|
background: linear-gradient(45deg, var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-3), var(--gradient-color-4));
|
|
}
|
|
|
|
.background--radial {
|
|
background: radial-gradient(circle at center, var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-3), var(--gradient-color-4));
|
|
}
|
|
|
|
.background--conic {
|
|
background: conic-gradient(from 0deg at 50% 50%, var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-3), var(--gradient-color-4), var(--gradient-color-1));
|
|
}
|
|
|
|
/* ===== Background Animations ===== */
|
|
@keyframes gradientShift {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
filter: hue-rotate(0deg);
|
|
}
|
|
25% {
|
|
background-position: 50% 100%;
|
|
filter: hue-rotate(90deg);
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
filter: hue-rotate(180deg);
|
|
}
|
|
75% {
|
|
background-position: 50% 0%;
|
|
filter: hue-rotate(270deg);
|
|
}
|
|
100% {
|
|
background-position: 0% 50%;
|
|
filter: hue-rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* ===== Logo Container ===== */
|
|
.logo-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 10;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.logo {
|
|
width: 100vmin;
|
|
height: 100vmin;
|
|
filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
|
|
}
|
|
|
|
/* SVG groups for proper scaling and positioning */
|
|
.logo-element {
|
|
transform-origin: center;
|
|
transform-box: fill-box;
|
|
}
|
|
|
|
/* ===== Full Logo Animations ===== */
|
|
|
|
/* Shake Animation */
|
|
.logo--shake {
|
|
animation: shake var(--logo-shake-duration) ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes shake {
|
|
0%, 100% {
|
|
transform: translate(0, 0) rotate(0deg);
|
|
}
|
|
10% {
|
|
transform: translate(-2px, -2px) rotate(-1deg);
|
|
}
|
|
20% {
|
|
transform: translate(2px, 2px) rotate(1deg);
|
|
}
|
|
30% {
|
|
transform: translate(-2px, 2px) rotate(-1deg);
|
|
}
|
|
40% {
|
|
transform: translate(2px, -2px) rotate(1deg);
|
|
}
|
|
50% {
|
|
transform: translate(-2px, -2px) rotate(-1deg);
|
|
}
|
|
60% {
|
|
transform: translate(2px, 2px) rotate(1deg);
|
|
}
|
|
70% {
|
|
transform: translate(-2px, 2px) rotate(-1deg);
|
|
}
|
|
80% {
|
|
transform: translate(2px, -2px) rotate(1deg);
|
|
}
|
|
90% {
|
|
transform: translate(-2px, -2px) rotate(-1deg);
|
|
}
|
|
}
|
|
|
|
/* Rotate Animation */
|
|
.logo--rotate {
|
|
animation: rotate var(--logo-rotate-duration) linear infinite;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Tilt Animation */
|
|
.logo--tilt {
|
|
animation: tilt var(--logo-tilt-duration) ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes tilt {
|
|
0%, 100% {
|
|
transform: perspective(400px) rotateY(0deg) rotateX(0deg);
|
|
}
|
|
25% {
|
|
transform: perspective(400px) rotateY(15deg) rotateX(-10deg);
|
|
}
|
|
50% {
|
|
transform: perspective(400px) rotateY(0deg) rotateX(10deg);
|
|
}
|
|
75% {
|
|
transform: perspective(400px) rotateY(-15deg) rotateX(-10deg);
|
|
}
|
|
}
|
|
|
|
/* Interactive Tilt - responds to cursor/gyroscope, controlled by JavaScript */
|
|
.logo--interactive {
|
|
transition: transform 0.15s ease-out;
|
|
will-change: transform;
|
|
}
|
|
|
|
/* All Full Logo Animations Combined */
|
|
.logo--all {
|
|
animation:
|
|
shake var(--logo-shake-duration) ease-in-out infinite,
|
|
rotate calc(var(--logo-rotate-duration) * 2) linear infinite,
|
|
tilt calc(var(--logo-tilt-duration) * 1.5) ease-in-out infinite;
|
|
}
|
|
|
|
/* ===== Internal Element Animations ===== */
|
|
|
|
/* Neon Blinking */
|
|
.logo-element--neon {
|
|
animation: neonBlink var(--neon-duration) ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes neonBlink {
|
|
0%, 100% {
|
|
filter: drop-shadow(0 0 2px currentColor) drop-shadow(0 0 5px currentColor);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 0 20px currentColor) drop-shadow(0 0 30px currentColor);
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
/* Color Change */
|
|
.logo-element-l--color {
|
|
animation: colorChangeL var(--color-change-duration) ease-in-out infinite;
|
|
}
|
|
|
|
.logo-element-s--color {
|
|
animation: colorChangeS var(--color-change-duration) ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes colorChangeL {
|
|
0%, 100% {
|
|
fill: #222;
|
|
}
|
|
25% {
|
|
fill: #667eea;
|
|
}
|
|
50% {
|
|
fill: #f093fb;
|
|
}
|
|
75% {
|
|
fill: #4facfe;
|
|
}
|
|
}
|
|
|
|
@keyframes colorChangeS {
|
|
0%, 100% {
|
|
fill: #dc2108;
|
|
}
|
|
25% {
|
|
fill: #f093fb;
|
|
}
|
|
50% {
|
|
fill: #ffd700;
|
|
}
|
|
75% {
|
|
fill: #00ff00;
|
|
}
|
|
}
|
|
|
|
/* Explosion Animation */
|
|
.logo-element-l--explosion {
|
|
animation: explosionL var(--explosion-duration) ease-in-out infinite;
|
|
transform-origin: center;
|
|
}
|
|
|
|
.logo-element-s--explosion {
|
|
animation: explosionS var(--explosion-duration) ease-in-out infinite;
|
|
transform-origin: center;
|
|
}
|
|
|
|
@keyframes explosionL {
|
|
0%, 100% {
|
|
transform: translate(0, 0) scale(1) rotate(0deg);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: translate(30px, -30px) scale(1.5) rotate(45deg);
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@keyframes explosionS {
|
|
0%, 100% {
|
|
transform: translate(0, 0) scale(1) rotate(0deg);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: translate(-30px, 30px) scale(1.5) rotate(-45deg);
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
/* Pulse Animation (bonus) */
|
|
.logo-element--pulse {
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: scale(1.1);
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
/* All Element Animations Combined */
|
|
.logo-element--all {
|
|
animation:
|
|
neonBlink var(--neon-duration) ease-in-out infinite,
|
|
pulse calc(var(--neon-duration) * 1.5) ease-in-out infinite;
|
|
}
|
|
|
|
.logo-element-l--all {
|
|
animation:
|
|
colorChangeL var(--color-change-duration) ease-in-out infinite,
|
|
explosionL var(--explosion-duration) ease-in-out infinite,
|
|
neonBlink var(--neon-duration) ease-in-out infinite;
|
|
}
|
|
|
|
.logo-element-s--all {
|
|
animation:
|
|
colorChangeS var(--color-change-duration) ease-in-out infinite,
|
|
explosionS var(--explosion-duration) ease-in-out infinite,
|
|
neonBlink var(--neon-duration) ease-in-out infinite;
|
|
}
|
|
|
|
/* Individual S paths */
|
|
.s-path-1, .s-path-2 {
|
|
transform-origin: center;
|
|
}
|
|
|
|
.s-path-1--fly {
|
|
animation: flyPath1 var(--explosion-duration) ease-in-out infinite;
|
|
}
|
|
|
|
.s-path-2--fly {
|
|
animation: flyPath2 var(--explosion-duration) ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes flyPath1 {
|
|
0%, 100% {
|
|
transform: translate(0, 0) rotate(0deg);
|
|
}
|
|
50% {
|
|
transform: translate(-40px, 40px) rotate(-180deg);
|
|
}
|
|
}
|
|
|
|
@keyframes flyPath2 {
|
|
0%, 100% {
|
|
transform: translate(0, 0) rotate(0deg);
|
|
}
|
|
50% {
|
|
transform: translate(-40px, -40px) rotate(180deg);
|
|
}
|
|
}
|
|
|
|
/* ===== Toast Notification ===== */
|
|
.toast {
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-100px);
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
|
|
color: #fff;
|
|
padding: 16px 24px;
|
|
border-radius: 16px;
|
|
font-size: 14px;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
box-shadow:
|
|
0 8px 32px rgba(0, 0, 0, 0.3),
|
|
0 2px 8px rgba(0, 0, 0, 0.2),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.3),
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
|
z-index: 1002;
|
|
opacity: 0;
|
|
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
pointer-events: none;
|
|
backdrop-filter: blur(40px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(40px) saturate(180%);
|
|
border: 1px solid rgba(255, 255, 255, 0.25);
|
|
min-width: 200px;
|
|
}
|
|
|
|
.toast.show {
|
|
transform: translateX(-50%) translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.toast-title {
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
color: rgba(255, 255, 255, 0.95);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.toast-message {
|
|
font-size: 13px;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
}
|
|
|
|
/* ===== Help Button ===== */
|
|
.help-button {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
width: 44px;
|
|
height: 44px;
|
|
padding: 0;
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
border: 2px solid transparent;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
z-index: 1001;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
backdrop-filter: none;
|
|
box-shadow: none;
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.help-button:hover {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
color: #fff;
|
|
transform: scale(1.1);
|
|
box-shadow:
|
|
0 8px 32px rgba(0, 0, 0, 0.2),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.4),
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
|
backdrop-filter: blur(40px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(40px) saturate(180%);
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.help-button:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* ===== Help Window ===== */
|
|
.help-window {
|
|
position: fixed;
|
|
top: 80px;
|
|
right: 20px;
|
|
width: 500px;
|
|
max-width: calc(100vw - 40px);
|
|
max-height: calc(100vh - 120px);
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
|
|
border: 1px solid rgba(255, 255, 255, 0.25);
|
|
border-radius: 20px;
|
|
box-shadow:
|
|
0 8px 32px rgba(0, 0, 0, 0.3),
|
|
0 2px 8px rgba(0, 0, 0, 0.2),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.3),
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
|
backdrop-filter: blur(40px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(40px) saturate(180%);
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
transform: translateY(-20px) scale(0.95);
|
|
pointer-events: none;
|
|
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
overflow: hidden;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
}
|
|
|
|
.help-window.show {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.help-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px 24px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.help-header h2 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
|
|
.help-close {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
|
|
color: #fff;
|
|
font-size: 24px;
|
|
line-height: 1;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.help-close:hover {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
transform: rotate(90deg);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.help-content {
|
|
padding: 20px 24px;
|
|
max-height: calc(100vh - 220px);
|
|
overflow-y: auto;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.help-content::-webkit-scrollbar {
|
|
width: 10px;
|
|
}
|
|
|
|
.help-content::-webkit-scrollbar-track {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 5px;
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.help-content::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.15));
|
|
border-radius: 5px;
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.help-content::-webkit-scrollbar-thumb:hover {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.25));
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.help-section {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.help-section:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.help-section h3 {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
margin: 0 0 12px 0;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.help-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 0;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.help-item kbd {
|
|
display: inline-block;
|
|
min-width: 28px;
|
|
padding: 4px 8px;
|
|
margin: 0 6px;
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
border-radius: 6px;
|
|
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.95);
|
|
box-shadow:
|
|
0 2px 4px rgba(0, 0, 0, 0.2),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.25);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.help-item kbd:hover {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.15));
|
|
border-color: rgba(255, 255, 255, 0.4);
|
|
transform: translateY(-1px);
|
|
box-shadow:
|
|
0 4px 8px rgba(0, 0, 0, 0.3),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.35);
|
|
}
|
|
|
|
.help-item kbd:active {
|
|
transform: translateY(0);
|
|
box-shadow:
|
|
0 1px 2px rgba(0, 0, 0, 0.2),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.help-section-url {
|
|
margin-top: 32px;
|
|
padding-top: 24px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.help-code {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
margin-bottom: 16px;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.help-params {
|
|
display: grid;
|
|
gap: 8px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.help-params div {
|
|
padding: 6px 0;
|
|
}
|
|
|
|
.help-params strong {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-weight: 600;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
/* ===== Footer ===== */
|
|
.footer {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 998;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.footer p {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* ===== Responsive Design ===== */
|
|
@media (max-width: 768px) {
|
|
.logo {
|
|
width: 100vmin;
|
|
height: 100vmin;
|
|
}
|
|
|
|
.toast {
|
|
top: 15px;
|
|
padding: 12px 20px;
|
|
font-size: 13px;
|
|
max-width: 80%;
|
|
}
|
|
|
|
.help-window {
|
|
top: 70px;
|
|
right: 10px;
|
|
width: calc(100vw - 20px);
|
|
max-height: calc(100vh - 100px);
|
|
}
|
|
|
|
.help-header {
|
|
padding: 16px 20px;
|
|
}
|
|
|
|
.help-header h2 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.help-content {
|
|
padding: 16px 20px;
|
|
}
|
|
|
|
.footer p {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.help-button {
|
|
font-size: 20px;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.logo {
|
|
width: 100vmin;
|
|
height: 100vmin;
|
|
}
|
|
|
|
.toast {
|
|
top: 12px;
|
|
padding: 10px 16px;
|
|
font-size: 12px;
|
|
max-width: 90%;
|
|
}
|
|
|
|
.help-button {
|
|
font-size: 18px;
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
|
|
.help-window {
|
|
top: 60px;
|
|
right: 8px;
|
|
width: calc(100vw - 16px);
|
|
max-height: calc(100vh - 80px);
|
|
}
|
|
|
|
.help-header {
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.help-header h2 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.help-content {
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.help-item {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.help-item kbd {
|
|
font-size: 12px;
|
|
padding: 3px 6px;
|
|
}
|
|
|
|
.help-code {
|
|
font-size: 11px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.footer {
|
|
bottom: 12px;
|
|
}
|
|
|
|
.footer p {
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
/* ===== Accessibility ===== */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|