mirror of
https://github.com/kiddin9/op-packages.git
synced 2026-08-02 07:29:28 +08:00
5791 lines
142 KiB
CSS
5791 lines
142 KiB
CSS
:root {
|
|
/* ===== Core Design Tokens ===== */
|
|
--base-hue: 260;
|
|
--base-chroma: 0.25;
|
|
--danger-base: 15;
|
|
--l: 80%;
|
|
--c: 0.25;
|
|
|
|
/* ===== Neutral Color System ===== */
|
|
--neutral-50: oklch(98% 0.01 var(--base-hue));
|
|
--neutral-100: oklch(95% 0.015 var(--base-hue));
|
|
--neutral-200: oklch(90% 0.02 var(--base-hue));
|
|
--neutral-300: oklch(85% 0.025 var(--base-hue));
|
|
--neutral-400: oklch(75% 0.03 var(--base-hue));
|
|
--neutral-500: oklch(65% 0.035 var(--base-hue));
|
|
--neutral-600: oklch(55% 0.04 var(--base-hue));
|
|
--neutral-700: oklch(45% 0.045 var(--base-hue));
|
|
--neutral-800: oklch(35% 0.05 var(--base-hue));
|
|
--neutral-900: oklch(25% 0.055 var(--base-hue));
|
|
|
|
/* ===== Spacing Scale ===== */
|
|
--space-unit: 4px;
|
|
--space-xs: calc(var(--space-unit) * 1); /* 4px */
|
|
--space-sm: calc(var(--space-unit) * 2); /* 8px */
|
|
--space-md: calc(var(--space-unit) * 4); /* 16px */
|
|
--space-lg: calc(var(--space-unit) * 6); /* 24px */
|
|
--space-xl: calc(var(--space-unit) * 8); /* 32px */
|
|
--space-2xl: calc(var(--space-unit) * 12); /* 48px */
|
|
--space-3xl: calc(var(--space-unit) * 16); /* 64px */
|
|
|
|
/* ===== Typography Scale ===== */
|
|
--text-xs: 0.75rem; /* 12px */
|
|
--text-sm: 0.875rem; /* 14px */
|
|
--text-base: 1rem; /* 16px */
|
|
--text-lg: 1.125rem; /* 18px */
|
|
--text-xl: 1.25rem; /* 20px */
|
|
--text-2xl: 1.5rem; /* 24px */
|
|
--text-3xl: 1.875rem; /* 30px */
|
|
--text-4xl: 2.25rem; /* 36px */
|
|
|
|
/* ===== Motion System ===== */
|
|
--ease-linear: linear;
|
|
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
|
|
/* Animation durations */
|
|
--duration-fast: 150ms;
|
|
--duration-normal: 250ms;
|
|
--duration-slow: 350ms;
|
|
--duration-very-slow: 500ms;
|
|
|
|
/* ===== Shadow System ===== */
|
|
/* Base elevation levels */
|
|
--shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.05);
|
|
--shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px oklch(0% 0 0 / 0.1);
|
|
--shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 0.1), 0 4px 6px -4px oklch(0% 0 0 / 0.1);
|
|
--shadow-xl: 0 20px 25px -5px oklch(0% 0 0 / 0.1), 0 8px 10px -6px oklch(0% 0 0 / 0.1);
|
|
|
|
/* Emphasis shadows */
|
|
--shadow-focus: 0 0 0 3px color-mix(in oklch, var(--accent-color), transparent 70%);
|
|
--shadow-ring: 0 0 0 4px color-mix(in oklch, var(--accent-color), transparent 80%);
|
|
|
|
/* State backgrounds (subtle) */
|
|
--state-success-bg: color-mix(in oklch, var(--state-success), transparent 90%);
|
|
--state-info-bg: color-mix(in oklch, var(--state-info), transparent 90%);
|
|
--state-warning-bg: color-mix(in oklch, var(--state-warning), transparent 90%);
|
|
--state-danger-bg: color-mix(in oklch, var(--state-danger), transparent 90%);
|
|
|
|
/* State borders */
|
|
--state-success-border: color-mix(in oklch, var(--state-success), transparent 70%);
|
|
--state-danger-border: color-mix(in oklch, var(--state-danger), transparent 70%);
|
|
--active-bg: oklch(var(--l) var(--base-chroma) var(--base-hue));
|
|
|
|
/* ===== Surface Elevation System ===== */
|
|
/* Base surfaces */
|
|
--surface: var(--card-bg);
|
|
--surface-elevated: color-mix(in oklch, var(--card-bg), white 10%);
|
|
--surface-high: color-mix(in oklch, var(--card-bg), white 20%);
|
|
--surface-highest: color-mix(in oklch, var(--card-bg), white 30%);
|
|
|
|
/* Floating surfaces */
|
|
--surface-floating: color-mix(in oklch, var(--card-bg), white 15%);
|
|
--surface-modal: color-mix(in oklch, var(--card-bg), white 25%);
|
|
|
|
/* ===== Glassmorphism Effects ===== */
|
|
--glass-blur: blur(20px);
|
|
--glass-blur-light: blur(12px);
|
|
--glass-blur-small: blur(10px);
|
|
--glass-blur-mini: blur(6px);
|
|
--glass-opacity: 0.85;
|
|
|
|
/* ===== Radius System ===== */
|
|
--radius: 20px;
|
|
--radius-small: 12px;
|
|
--radius-mini: 8px;
|
|
--radius-full: 9999px;
|
|
--radius-pill: 50px;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--base-hue: 260;
|
|
--base-chroma: 0.25;
|
|
--danger-base: 15;
|
|
--base-hue-1: 20;
|
|
--base-hue-2: 200;
|
|
--base-hue-3: 135;
|
|
--base-hue-4: 80;
|
|
--base-hue-5: 270;
|
|
--base-hue-6: 170;
|
|
--base-hue-7: 340;
|
|
--l: 80%;
|
|
--c: 0.25;
|
|
|
|
--glass-border: 1px solid oklch(100% 0 0 / 0.1);
|
|
--border-color: oklch(40% var(--base-chroma) var(--base-hue));
|
|
--border-light: 1px solid oklch(60% 0.05 var(--base-hue) / 0.3);
|
|
--border-strong: 1px solid oklch(70% 0.1 var(--base-hue) / 0.6);
|
|
--glow-primary: oklch(82% 0.32 var(--base-hue));
|
|
--glow-secondary: oklch(78% 0.28 calc(var(--base-hue) + 10));
|
|
--breath-animation: breath 3s ease-in-out infinite;
|
|
|
|
--breathing-glow: 0 0 20px oklch(70% 0.3 var(--base-hue) / 0.6),
|
|
0 0 40px oklch(70% 0.25 var(--base-hue) / 0.4),
|
|
0 0 60px oklch(70% 0.2 var(--base-hue) / 0.3);
|
|
|
|
--border-glow: 0 2px 8px 1px color-mix(in oklch, var(--glow-primary), transparent 40%),
|
|
0 4px 24px 2px color-mix(in oklch, var(--glow-secondary), transparent 60%),
|
|
inset 0 0 12px color-mix(in oklch, var(--glow-primary), transparent 70%);
|
|
|
|
--shadow-inset:
|
|
2px 0 6px -2px color-mix(in oklch, var(--bg-container), black 30%),
|
|
-2px 0 6px -2px color-mix(in oklch, var(--bg-container), black 30%),
|
|
0 2px 6px -2px color-mix(in oklch, var(--bg-container), black 30%),
|
|
0 -2px 6px -2px color-mix(in oklch, var(--bg-container), black 30%);
|
|
|
|
--breathing-animation: breathing 3s ease-in-out infinite;
|
|
--shadow-intensity: 0.25;
|
|
--text-shadow: 0 1px 2px oklch(0% 0 0 / 0.3);
|
|
--transition-speed: 0.3s;
|
|
--highlight-intensity: 0.8;
|
|
|
|
--bg-body: oklch(40% var(--base-chroma) var(--base-hue) / 90%);
|
|
--bg-container: oklch(30% var(--base-chroma) var(--base-hue));
|
|
--text-primary: oklch(95% 0 0);
|
|
--accent-color: oklch(70% 0.2 calc(var(--base-hue) + 0));
|
|
--accent-secondary: oklch(68% 0.22 calc(var(--base-hue) + 180));
|
|
--accent-tertiary: oklch(72% 0.18 calc(var(--base-hue) + 120));
|
|
--card-bg: oklch(25% var(--base-chroma) var(--base-hue));
|
|
--header-bg: oklch(35% var(--base-chroma) var(--base-hue));
|
|
--color-white-strong: oklch(98% 0.02 250);
|
|
|
|
--btn-primary-bg: oklch(50% 0.18 var(--base-hue));
|
|
--btn-primary-hover: color-mix(in oklch, var(--btn-primary-bg), white 12%);
|
|
--btn-success-bg: oklch(55% 0.22 140);
|
|
--btn-info-bg: oklch(55% 0.22 220);
|
|
--btn-warning-bg: oklch(65% 0.18 80);
|
|
--btn-danger-bg: oklch(55% 0.25 var(--danger-base));
|
|
|
|
--item-hover-bg: color-mix(in oklch, var(--btn-primary-bg), white 15%);
|
|
--item-hover-shadow: 0 4px 12px oklch(0 0 0 / 0.4);
|
|
--drag-over-bg: oklch(35% 0.05 var(--base-hue) / 0.3);
|
|
--drag-over-shadow: 0 0 25px oklch(var(--base-hue) 0.2 0.4 / 0.3);
|
|
|
|
--text-secondary: oklch(75% 0.03 0);
|
|
--success-text: oklch(75% 0.22 140);
|
|
--info-text: oklch(75% 0.22 220);
|
|
--warning-text: oklch(80% 0.22 80);
|
|
--danger-text: oklch(70% 0.28 30);
|
|
|
|
--ocean-bg: oklch(48% 0.32 calc(var(--base-hue) + 220));
|
|
--forest-bg: oklch(42% 0.32 calc(var(--base-hue) + 140));
|
|
--rose-bg: oklch(48% 0.32 calc(var(--base-hue) + 350));
|
|
--lavender-bg: oklch(46% 0.32 calc(var(--base-hue) + 270));
|
|
--sand-bg: oklch(45% 0.32 calc(var(--base-hue) + 60));
|
|
|
|
--transition: all 0.25s ease;
|
|
|
|
--primary-color: var(--accent-color);
|
|
--secondary-color: var(--btn-primary-bg);
|
|
--background: var(--bg-body);
|
|
--text-color: var(--text-primary);
|
|
|
|
--color-red: oklch(65% 0.25 25);
|
|
--color-orange: oklch(75% 0.2 55);
|
|
--color-yellow: oklch(85% 0.2 90);
|
|
--color-green: oklch(75% 0.25 140);
|
|
--color-blue: oklch(65% 0.25 240);
|
|
--color-indigo: oklch(55% 0.3 280);
|
|
--color-violet: oklch(65% 0.3 310);
|
|
|
|
--color-cyan: oklch(80% 0.15 200);
|
|
--color-magenta: oklch(70% 0.3 330);
|
|
--color-pink: oklch(75% 0.25 350);
|
|
--color-brown: oklch(55% 0.1 45);
|
|
--color-gray: oklch(55.75% 0.0165 244.9);
|
|
--color-black: oklch(20% 0.02 0);
|
|
--color-white: oklch(95% 0.01 0);
|
|
|
|
--glow-border: 1px solid color-mix(in oklch, var(--glow-primary), transparent 20%);
|
|
|
|
--glow-shadow-default:
|
|
0 2px 8px 1px color-mix(in oklch, var(--glow-primary), transparent 40%),
|
|
0 4px 24px 2px color-mix(in oklch, var(--glow-secondary), transparent 60%),
|
|
inset 0 0 12px color-mix(in oklch, var(--glow-primary), transparent 70%),
|
|
0 0 20px 6px oklch(82% 0.32 260 / 0);
|
|
|
|
--glow-shadow-hover:
|
|
0 4px 16px 2px color-mix(in oklch, var(--glow-primary), transparent 30%),
|
|
0 8px 32px 4px color-mix(in oklch, var(--glow-secondary), transparent 50%),
|
|
inset 0 0 24px color-mix(in oklch, var(--glow-primary), transparent 60%),
|
|
0 0 28px 8px oklch(82% 0.32 260 / 0.7);
|
|
|
|
--glow-shadow-breath-start:
|
|
0 2px 8px 1px color-mix(in oklch, var(--glow-primary), transparent 40%),
|
|
0 4px 24px 2px color-mix(in oklch, var(--glow-secondary), transparent 60%),
|
|
inset 0 0 12px color-mix(in oklch, var(--glow-primary), transparent 70%),
|
|
0 0 8px 2px oklch(90% 0.4 260 / 0.3);
|
|
|
|
--glow-shadow-breath-middle:
|
|
0 1px 4px 0.5px color-mix(in oklch, var(--glow-primary), transparent 60%),
|
|
0 2px 12px 1px color-mix(in oklch, var(--glow-secondary), transparent 80%),
|
|
inset 0 0 6px color-mix(in oklch, var(--glow-primary), transparent 85%),
|
|
0 0 16px 3px oklch(95% 0.45 260 / 0.9);
|
|
|
|
--glow-primary-hover: oklch(88% 0.35 var(--base-hue));
|
|
--glow-secondary-hover: oklch(85% 0.3 calc(var(--base-hue) + 15));
|
|
|
|
}
|
|
|
|
@keyframes breathing {
|
|
0%, 100% {
|
|
box-shadow:
|
|
0 2px 8px 1px color-mix(in oklch, var(--glow-primary), transparent 40%),
|
|
0 4px 24px 2px color-mix(in oklch, var(--glow-secondary), transparent 60%),
|
|
inset 0 0 12px color-mix(in oklch, var(--glow-primary), transparent 70%);
|
|
}
|
|
50% {
|
|
box-shadow:
|
|
0 4px 16px 2px color-mix(in oklch, var(--glow-primary), transparent 30%),
|
|
0 8px 32px 4px color-mix(in oklch, var(--glow-secondary), transparent 50%),
|
|
inset 0 0 24px color-mix(in oklch, var(--glow-primary), transparent 60%);
|
|
}
|
|
}
|
|
|
|
@keyframes section-breath {
|
|
|
|
0%,
|
|
100% {
|
|
box-shadow: var(--glow-shadow-breath-start);
|
|
}
|
|
|
|
50% {
|
|
box-shadow: var(--glow-shadow-breath-middle);
|
|
}
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--base-hue: 200;
|
|
--base-chroma: 0.25;
|
|
--danger-base: 15;
|
|
--base-hue-1: 220;
|
|
--base-hue-2: 280;
|
|
--base-hue-3: 315;
|
|
--base-hue-4: 260;
|
|
--base-hue-5: 350;
|
|
--base-hue-6: 290;
|
|
--base-hue-7: 40;
|
|
--l: 60%;
|
|
--c: 0.25;
|
|
|
|
--glass-border: 1px solid oklch(0% 0 0 / 0.05);
|
|
--border-light: 1px solid oklch(90% 0.02 var(--base-hue) / 0.4);
|
|
--border-strong: 1px solid oklch(70% 0.1 var(--base-hue) / 0.6);
|
|
|
|
--breathing-glow: 0 0 15px oklch(85% 0.2 var(--base-hue) / 0.4),
|
|
0 0 30px oklch(85% 0.15 var(--base-hue) / 0.3),
|
|
0 0 45px oklch(85% 0.1 var(--base-hue) / 0.2);
|
|
|
|
--border-glow: 0 0 8px oklch(85% 0.2 var(--base-hue) / 0.4),
|
|
0 0 16px oklch(90% 0.25 var(--base-hue) / 0.3);
|
|
|
|
--shadow-inset:
|
|
2px 0 6px -2px color-mix(in oklch, var(--bg-container), black 20%),
|
|
-2px 0 6px -2px color-mix(in oklch, var(--bg-container), black 20%),
|
|
0 2px 6px -2px color-mix(in oklch, var(--bg-container), black 20%),
|
|
0 -2px 6px -2px color-mix(in oklch, var(--bg-container), black 20%);
|
|
|
|
--breathing-animation: breathing 3s ease-in-out infinite;
|
|
--shadow-intensity: 0.15;
|
|
--text-shadow: 0 1px 2px oklch(0% 0 0 / 0.1);
|
|
--transition-speed: 0.3s;
|
|
--highlight-intensity: 0.6;
|
|
|
|
--bg-body: oklch(95% var(--base-chroma) var(--base-hue) / 90%);
|
|
--bg-container: oklch(99% var(--base-chroma) var(--base-hue));
|
|
--text-primary: oklch(25% var(--base-chroma) var(--base-hue));
|
|
--accent-color: oklch(60% 0.2 calc(var(--base-hue) + 60));
|
|
--accent-secondary: oklch(58% 0.25 calc(var(--base-hue) + 180));
|
|
--accent-tertiary: oklch(62% 0.2 calc(var(--base-hue) + 120));
|
|
--card-bg: oklch(96% var(--base-chroma) var(--base-hue));
|
|
--header-bg: oklch(88% var(--base-chroma) var(--base-hue));
|
|
--border-color: oklch(85% 0.03 var(--base-hue));
|
|
--color-white-strong: oklch(99% 0.015 95);
|
|
|
|
--btn-primary-bg: oklch(60% 0.35 var(--base-hue));
|
|
--btn-primary-hover: color-mix(in oklch, var(--btn-primary-bg), black 12%);
|
|
--btn-success-bg: oklch(75% 0.25 140);
|
|
--btn-info-bg: oklch(65% 0.3 220);
|
|
--btn-warning-bg: oklch(65% 0.25 80);
|
|
--btn-danger-bg: oklch(55% 0.35 var(--danger-base));
|
|
|
|
--item-hover-bg: color-mix(in oklch, var(--btn-primary-bg), white 25%);
|
|
--item-hover-shadow: 0 2px 15px oklch(0 0 0 / 0.15);
|
|
--drag-over-bg: oklch(92% 0.01 var(--base-hue) / 0.3);
|
|
--drag-over-shadow: 0 0 20px oklch(0 0 0 / 0.1);
|
|
|
|
--text-secondary: oklch(45% 0.03 0);
|
|
--success-text: oklch(40% 0.25 140);
|
|
--info-text: oklch(40% 0.25 220);
|
|
--warning-text: oklch(45% 0.25 80);
|
|
--danger-text: oklch(45% 0.35 30);
|
|
|
|
--ocean-bg: oklch(85% 0.18 calc(var(--base-hue) + 220));
|
|
--forest-bg: oklch(82% 0.18 calc(var(--base-hue) + 140));
|
|
--rose-bg: oklch(88% 0.18 calc(var(--base-hue) + 350));
|
|
--lavender-bg: oklch(86% 0.18 calc(var(--base-hue) + 270));
|
|
--sand-bg: oklch(85% 0.18 calc(var(--base-hue) + 60));
|
|
|
|
--transition: all 0.25s ease;
|
|
|
|
--primary-color: var(--accent-color);
|
|
--secondary-color: var(--btn-primary-bg);
|
|
--background: var(--bg-body);
|
|
--text-color: var(--text-primary);
|
|
|
|
--highlight-color: oklch(90% 0.15 calc(var(--base-hue) + 90));
|
|
--soft-highlight: oklch(85% 0.1 calc(var(--base-hue) + 90));
|
|
|
|
--color-red: oklch(55% 0.3 25);
|
|
--color-orange: oklch(65% 0.25 55);
|
|
--color-yellow: oklch(75% 0.25 90);
|
|
--color-green: oklch(65% 0.3 140);
|
|
--color-blue: oklch(55% 0.3 240);
|
|
--color-indigo: oklch(45% 0.35 280);
|
|
--color-violet: oklch(55% 0.35 310);
|
|
|
|
--color-cyan: oklch(70% 0.2 200);
|
|
--color-magenta: oklch(60% 0.35 330);
|
|
--color-pink: oklch(65% 0.3 350);
|
|
--color-brown: oklch(45% 0.15 45);
|
|
--color-gray: oklch(55.75% 0.0165 244.9);
|
|
--color-black: oklch(15% 0.05 0);
|
|
--color-white: oklch(98% 0.01 0);
|
|
}
|
|
|
|
/* ===============================
|
|
Bootstrap-Lite Utility Classes
|
|
=============================== */
|
|
|
|
/* ==== Display ==== */
|
|
.d-none { display: none; }
|
|
.d-inline { display: inline; }
|
|
.d-inline-block { display: inline-block; }
|
|
.d-block { display: block; }
|
|
.d-grid { display: grid; }
|
|
.d-table { display: table; }
|
|
.d-flex { display: flex; }
|
|
.d-inline-flex { display: inline-flex; }
|
|
|
|
/* ==== Flex ==== */
|
|
.flex-row { flex-direction: row; }
|
|
.flex-row-reverse { flex-direction: row-reverse; }
|
|
.flex-column { flex-direction: column; }
|
|
.flex-column-reverse { flex-direction: column-reverse; }
|
|
.flex-wrap { flex-wrap: wrap; }
|
|
.flex-nowrap { flex-wrap: nowrap; }
|
|
.justify-content-start { justify-content: flex-start; }
|
|
.justify-content-end { justify-content: flex-end; }
|
|
.justify-content-center { justify-content: center; }
|
|
.justify-content-between { justify-content: space-between; }
|
|
.justify-content-around { justify-content: space-around; }
|
|
.justify-content-evenly { justify-content: space-evenly; }
|
|
.align-items-start { align-items: flex-start; }
|
|
.align-items-end { align-items: flex-end; }
|
|
.align-items-center { align-items: center; }
|
|
.align-items-baseline { align-items: baseline; }
|
|
.align-items-stretch { align-items: stretch; }
|
|
.flex-fill { flex: 1 1 auto; }
|
|
.flex-grow-0 { flex-grow: 0; }
|
|
.flex-grow-1 { flex-grow: 1; }
|
|
.flex-shrink-0 { flex-shrink: 0; }
|
|
.flex-shrink-1 { flex-shrink: 1; }
|
|
.order-first { order: -1; }
|
|
.order-0 { order: 0; }
|
|
.order-1 { order: 1; }
|
|
.order-2 { order: 2; }
|
|
.order-3 { order: 3; }
|
|
.order-4 { order: 4; }
|
|
.order-5 { order: 5; }
|
|
.order-last { order: 6; }
|
|
|
|
/* ==== Gap Utilities ==== */
|
|
.gap-0 { gap: 0; }
|
|
.gap-1 { gap: var(--space-xs); }
|
|
.gap-2 { gap: var(--space-sm); }
|
|
.gap-3 { gap: var(--space-md); }
|
|
.gap-4 { gap: var(--space-lg); }
|
|
.gap-5 { gap: var(--space-xl); }
|
|
|
|
.row-gap-0 { row-gap: 0; }
|
|
.row-gap-1 { row-gap: var(--space-xs); }
|
|
.row-gap-2 { row-gap: var(--space-sm); }
|
|
.row-gap-3 { row-gap: var(--space-md); }
|
|
|
|
.column-gap-0 { column-gap: 0; }
|
|
.column-gap-1 { column-gap: var(--space-xs); }
|
|
.column-gap-2 { column-gap: var(--space-sm); }
|
|
.column-gap-3 { column-gap: var(--space-md); }
|
|
|
|
/* ==== Spacing (Margin) ==== */
|
|
.m-0 { margin: 0; }
|
|
.m-1 { margin: var(--space-xs); }
|
|
.m-2 { margin: var(--space-sm); }
|
|
.m-3 { margin: var(--space-md); }
|
|
.m-4 { margin: var(--space-lg); }
|
|
.m-5 { margin: var(--space-xl); }
|
|
.mt-0 { margin-top: 0; }
|
|
.mt-1 { margin-top: var(--space-xs); }
|
|
.mt-2 { margin-top: var(--space-sm); }
|
|
.mt-3 { margin-top: var(--space-md); }
|
|
.mt-4 { margin-top: var(--space-lg); }
|
|
.mt-5 { margin-top: var(--space-xl); }
|
|
.mb-0 { margin-bottom: 0; }
|
|
.mb-1 { margin-bottom: var(--space-xs); }
|
|
.mb-2 { margin-bottom: var(--space-sm); }
|
|
.mb-3 { margin-bottom: var(--space-md); }
|
|
.mb-4 { margin-bottom: var(--space-lg); }
|
|
.mb-5 { margin-bottom: var(--space-xl); }
|
|
.ms-0 { margin-left: 0; }
|
|
.ms-1 { margin-left: var(--space-xs); }
|
|
.ms-2 { margin-left: var(--space-sm); }
|
|
.ms-3 { margin-left: var(--space-md); }
|
|
.ms-4 { margin-left: var(--space-lg); }
|
|
.ms-5 { margin-left: var(--space-xl); }
|
|
.me-0 { margin-right: 0; }
|
|
.me-1 { margin-right: var(--space-xs); }
|
|
.me-2 { margin-right: var(--space-sm); }
|
|
.me-3 { margin-right: var(--space-md); }
|
|
.me-4 { margin-right: var(--space-lg); }
|
|
.me-5 { margin-right: var(--space-xl); }
|
|
|
|
/* ==== Spacing (Padding) ==== */
|
|
.p-0 { padding: var(--space-xs); }
|
|
.p-1 { padding: var(--space-xs); }
|
|
.p-2 { padding: var(--space-sm); }
|
|
.p-3 { padding: var(--space-md); }
|
|
.p-4 { padding: var(--space-lg); }
|
|
.p-5 { padding: var(--space-xl); }
|
|
.pt-0 { padding-top: var(--space-xs); }
|
|
.pt-1 { padding-top: var(--space-xs); }
|
|
.pt-2 { padding-top: var(--space-sm); }
|
|
.pt-3 { padding-top: var(--space-md); }
|
|
.pt-4 { padding-top: var(--space-lg); }
|
|
.pt-5 { padding-top: var(--space-xl); }
|
|
.pb-0 { padding-bottom: var(--space-xs); }
|
|
.pb-1 { padding-bottom: var(--space-xs); }
|
|
.pb-2 { padding-bottom: var(--space-sm); }
|
|
.pb-3 { padding-bottom: var(--space-md); }
|
|
.pb-4 { padding-bottom: var(--space-lg); }
|
|
.pb-5 { padding-bottom: var(--space-xl); }
|
|
.ps-0 { padding-left: var(--space-xs); }
|
|
.ps-1 { padding-left: var(--space-xs); }
|
|
.ps-2 { padding-left: var(--space-sm); }
|
|
.ps-3 { padding-left: var(--space-md); }
|
|
.ps-4 { padding-left: var(--space-lg); }
|
|
.ps-5 { padding-left: var(--space-xl); }
|
|
.pe-0 { padding-right: var(--space-xs); }
|
|
.pe-1 { padding-right: var(--space-xs); }
|
|
.pe-2 { padding-right: var(--space-sm); }
|
|
.pe-3 { padding-right: var(--space-md); }
|
|
.pe-4 { padding-right: var(--space-lg); }
|
|
.pe-5 { padding-right: var(--space-xl); }
|
|
|
|
/* ==== Width & Height ==== */
|
|
.w-25 { width: 25%; }
|
|
.w-50 { width: 50%; }
|
|
.w-75 { width: 75%; }
|
|
.w-100 { width: 100%; }
|
|
.w-auto { width: auto; }
|
|
|
|
.h-25 { height: 25%; }
|
|
.h-50 { height: 50%; }
|
|
.h-75 { height: 75%; }
|
|
.h-100 { height: 100%; }
|
|
.h-auto { height: auto; }
|
|
|
|
.vw-100 { width: 100vw; }
|
|
.vh-100 { height: 100vh; }
|
|
|
|
.min-vw-100 { min-width: 100vw; }
|
|
.min-vh-100 { min-height: 100vh; }
|
|
|
|
.max-vw-100 { max-width: 100vw; }
|
|
.max-vh-100 { max-height: 100vh; }
|
|
|
|
/* ==== Typography ==== */
|
|
.fs-xs { font-size: var(--text-xs); }
|
|
.fs-sm { font-size: var(--text-sm); }
|
|
.fs-base { font-size: var(--text-base); }
|
|
.fs-lg { font-size: var(--text-lg); }
|
|
.fs-xl { font-size: var(--text-xl); }
|
|
.fs-2xl { font-size: var(--text-2xl); }
|
|
.fs-3xl { font-size: var(--text-3xl); }
|
|
.fs-4xl { font-size: var(--text-4xl); }
|
|
.fw-bold { font-weight: 700; }
|
|
.fw-normal { font-weight: 400; }
|
|
.fst-italic { font-style: italic; }
|
|
.fst-normal { font-style: normal; }
|
|
.text-start { text-align: left; }
|
|
.text-center { text-align: center; }
|
|
.text-end { text-align: right; }
|
|
|
|
/* ==== Color & Background ==== */
|
|
.text-primary { color: var(--accent-color); }
|
|
.text-secondary { color: var(--accent-secondary); }
|
|
.text-tertiary { color: var(--accent-tertiary); }
|
|
.text-success { color: var(--success-text); }
|
|
.text-info { color: var(--info-text); }
|
|
.text-warning { color: var(--warning-text); }
|
|
.text-danger { color: var(--danger-text); }
|
|
.text-muted { color: var(--neutral-500); }
|
|
|
|
.bg-primary { background-color: var(--accent-color); }
|
|
.bg-secondary { background-color: var(--accent-secondary); }
|
|
.bg-tertiary { background-color: var(--accent-tertiary); }
|
|
.bg-success-subtle { background: var(--state-success-bg); }
|
|
.bg-info-subtle { background: var(--state-info-bg); }
|
|
.bg-warning-subtle { background: var(--state-warning-bg); }
|
|
.bg-danger-subtle { background: var(--state-danger-bg); }
|
|
.bg-body { background: var(--bg-body); }
|
|
.bg-container { background: var(--bg-container); }
|
|
.bg-card { background: var(--card-bg); }
|
|
|
|
/* ==== Borders & Radius ==== */
|
|
.border { border: 1px solid var(--border-color); }
|
|
.border-light { border: var(--border-light); }
|
|
.border-strong { border: var(--border-strong); }
|
|
.rounded { border-radius: var(--radius); }
|
|
.rounded-sm { border-radius: var(--radius-mini); }
|
|
.rounded-md { border-radius: var(--radius-small); }
|
|
.rounded-lg { border-radius: var(--radius); }
|
|
.rounded-pill { border-radius: var(--radius-pill); }
|
|
.rounded-full { border-radius: var(--radius-full); }
|
|
|
|
/* ==== Shadow & Elevation ==== */
|
|
.shadow-sm { box-shadow: var(--shadow-sm); }
|
|
.shadow { box-shadow: var(--shadow-md); }
|
|
.shadow-lg { box-shadow: var(--shadow-lg); }
|
|
.shadow-xl { box-shadow: var(--shadow-xl); }
|
|
.shadow-inset { box-shadow: var(--shadow-inset); }
|
|
.shadow-focus { box-shadow: var(--shadow-focus); }
|
|
.shadow-ring { box-shadow: var(--shadow-ring); }
|
|
|
|
/* ==== Position ==== */
|
|
.position-relative { position: relative; }
|
|
.position-absolute { position: absolute; }
|
|
.position-fixed { position: fixed; }
|
|
.position-sticky { position: sticky; }
|
|
|
|
/* ==== Z-index ==== */
|
|
.z-n1 { z-index: -1; }
|
|
.z-0 { z-index: 0; }
|
|
.z-1 { z-index: 1; }
|
|
.z-2 { z-index: 2; }
|
|
.z-3 { z-index: 3; }
|
|
.z-999 { z-index: 999; }
|
|
.z-1000 { z-index: 1000; }
|
|
.z-max { z-index: 9999; }
|
|
|
|
/* ==== Opacity ==== */
|
|
.opacity-0 { opacity: 0; }
|
|
.opacity-25 { opacity: 0.25; }
|
|
.opacity-50 { opacity: 0.5; }
|
|
.opacity-75 { opacity: 0.75; }
|
|
.opacity-100 { opacity: 1; }
|
|
|
|
/* ==== Visibility ==== */
|
|
.visible { visibility: visible; }
|
|
.invisible { visibility: hidden; }
|
|
|
|
/* ==== Overflow ==== */
|
|
.overflow-auto { overflow: auto; }
|
|
.overflow-hidden { overflow: hidden; }
|
|
.overflow-visible { overflow: visible; }
|
|
.overflow-scroll { overflow: scroll; }
|
|
.overflow-x-auto { overflow-x: auto; }
|
|
.overflow-y-auto { overflow-y: auto; }
|
|
.overflow-x-hidden { overflow-x: hidden; }
|
|
.overflow-y-hidden { overflow-y: hidden; }
|
|
|
|
/* ==== Cursor ==== */
|
|
.cursor-pointer { cursor: pointer; }
|
|
.cursor-default { cursor: default; }
|
|
.cursor-not-allowed { cursor: not-allowed; }
|
|
.cursor-text { cursor: text; }
|
|
.cursor-move { cursor: move; }
|
|
.cursor-grab { cursor: grab; }
|
|
.cursor-grabbing { cursor: grabbing; }
|
|
|
|
/* ==== Object Fit ==== */
|
|
.object-fit-contain { object-fit: contain; }
|
|
.object-fit-cover { object-fit: cover; }
|
|
.object-fit-fill { object-fit: fill; }
|
|
.object-fit-none { object-fit: none; }
|
|
.object-fit-scale-down { object-fit: scale-down; }
|
|
|
|
/* ==== User Select ==== */
|
|
.user-select-none { user-select: none; }
|
|
.user-select-all { user-select: all; }
|
|
.user-select-auto { user-select: auto; }
|
|
|
|
/* ==== Pointer Events ==== */
|
|
.pointer-events-none { pointer-events: none; }
|
|
.pointer-events-auto { pointer-events: auto; }
|
|
|
|
/* ==== Text Transform ==== */
|
|
.text-lowercase { text-transform: lowercase; }
|
|
.text-uppercase { text-transform: uppercase; }
|
|
.text-capitalize { text-transform: capitalize; }
|
|
|
|
/* ==== Text Decoration ==== */
|
|
.text-decoration-none { text-decoration: none; }
|
|
.text-decoration-underline { text-decoration: underline; }
|
|
.text-decoration-line-through { text-decoration: line-through; }
|
|
|
|
/* ==== White Space ==== */
|
|
.white-space-normal { white-space: normal; }
|
|
.white-space-nowrap { white-space: nowrap; }
|
|
.white-space-pre { white-space: pre; }
|
|
.white-space-pre-line { white-space: pre-line; }
|
|
.white-space-pre-wrap { white-space: pre-wrap; }
|
|
|
|
/* ==== Word Break ==== */
|
|
.word-break-normal { word-break: normal; }
|
|
.word-break-all { word-break: break-all; }
|
|
.word-break-word { word-break: break-word; }
|
|
.word-wrap-normal { word-wrap: normal; }
|
|
.word-wrap-break-word { word-wrap: break-word; }
|
|
|
|
/* ==== Line Height ==== */
|
|
.lh-1 { line-height: 1; }
|
|
.lh-sm { line-height: 1.25; }
|
|
.lh-base { line-height: 1.5; }
|
|
.lh-lg { line-height: 2; }
|
|
|
|
/* ==== Aspect Ratio ==== */
|
|
.aspect-ratio-1-1 { aspect-ratio: 1/1; }
|
|
.aspect-ratio-16-9 { aspect-ratio: 16/9; }
|
|
.aspect-ratio-4-3 { aspect-ratio: 4/3; }
|
|
.aspect-ratio-21-9 { aspect-ratio: 21/9; }
|
|
|
|
/* ==== Grid ==== */
|
|
.grid { display: grid; }
|
|
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
|
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
.grid-cols-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
|
|
.grid-cols-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
|
|
|
|
/* ==== Color Classes ==== */
|
|
.text-red { color: var(--color-red); }
|
|
.text-orange { color: var(--color-orange); }
|
|
.text-yellow { color: var(--color-yellow); }
|
|
.text-green { color: var(--color-green); }
|
|
.text-blue { color: var(--color-blue); }
|
|
.text-indigo { color: var(--color-indigo); }
|
|
.text-violet { color: var(--color-violet); }
|
|
.text-cyan { color: var(--color-cyan); }
|
|
.text-magenta { color: var(--color-magenta); }
|
|
.text-pink { color: var(--color-pink); }
|
|
.text-brown { color: var(--color-brown); }
|
|
.text-gray { color: var(--color-gray); }
|
|
.text-black { color: var(--color-black); }
|
|
.text-white { color: var(--color-white); }
|
|
|
|
.bg-red { background-color: var(--color-red); }
|
|
.bg-orange { background-color: var(--color-orange); }
|
|
.bg-yellow { background-color: var(--color-yellow); }
|
|
.bg-green { background-color: var(--color-green); }
|
|
.bg-blue { background-color: var(--color-blue); }
|
|
.bg-indigo { background-color: var(--color-indigo); }
|
|
.bg-violet { background-color: var(--color-violet); }
|
|
.bg-cyan { background-color: var(--color-cyan); }
|
|
.bg-magenta { background-color: var(--color-magenta); }
|
|
.bg-pink { background-color: var(--color-pink); }
|
|
.bg-brown { background-color: var(--color-brown); }
|
|
.bg-gray { background-color: var(--color-gray); }
|
|
.bg-black { background-color: var(--color-black); }
|
|
.bg-white { background-color: var(--color-white); }
|
|
|
|
/* ==== Animation Classes ==== */
|
|
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: .5; }
|
|
}
|
|
|
|
.animate-spin { animation: spin 1s linear infinite; }
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.animate-bounce { animation: bounce 1s infinite; }
|
|
@keyframes bounce {
|
|
0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
|
|
50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
|
|
}
|
|
|
|
/* ==== Glass / Frosted ==== */
|
|
.glass { backdrop-filter: var(--glass-blur); background: color-mix(in oklch, var(--card-bg), transparent 15%); border: var(--glass-border); }
|
|
.glass-light { backdrop-filter: var(--glass-blur-light); }
|
|
|
|
/* ==== Transition & Animation ==== */
|
|
.transition { transition: var(--transition); }
|
|
.transition-fast { transition: all var(--duration-fast) var(--ease-out); }
|
|
.transition-slow { transition: all var(--duration-slow) var(--ease-in-out); }
|
|
.animate-breath { animation: var(--breathing-animation); }
|
|
|
|
/* ==== Example of Responsive Breakpoint Prefixes ==== */
|
|
@media (min-width: 640px) {
|
|
.sm\:d-flex { display: flex; }
|
|
.sm\:gap-2 { gap: var(--space-sm); }
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.md\:d-flex { display: flex; }
|
|
.md\:gap-3 { gap: var(--space-md); }
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.lg\:d-flex { display: flex; }
|
|
.lg\:gap-4 { gap: var(--space-lg); }
|
|
}
|
|
|
|
.navbar-container {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-left: 15rem;
|
|
padding: 10px 5px;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
height: 60px;
|
|
min-height: 60px;
|
|
box-sizing: border-box;
|
|
z-index: 2;
|
|
}
|
|
|
|
.navbar-left,
|
|
.navbar-right {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 15px;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.navbar-container {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
padding-left: 5px;
|
|
margin-top: -2px;
|
|
}
|
|
|
|
.navbar-container::before {
|
|
display: none;
|
|
}
|
|
|
|
.navbar-left,
|
|
.navbar-right {
|
|
gap: 11.5px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 769px) and (max-width: 1633px) {
|
|
.navbar-container {
|
|
margin-left: calc(15rem - 32px);
|
|
width: calc(100% - 15rem + 32px);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1701px) {
|
|
.navbar-container {
|
|
margin-left: 15rem;
|
|
width: calc(100% - 15rem);
|
|
}
|
|
}
|
|
|
|
.ip-container {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
height: 100%;
|
|
z-index: 1;
|
|
padding: 15px 20px;
|
|
min-width: 300px;
|
|
transition: all 0.3s ease;
|
|
gap: 20px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.imgBox {
|
|
width: 60px;
|
|
height: 40px;
|
|
min-width: 60px;
|
|
min-height: 40px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.imgBox img#flag {
|
|
width: 75px !important;
|
|
height: 55px !important;
|
|
object-fit: contain;
|
|
display: block;
|
|
}
|
|
|
|
.imgBox .loading {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: transparent;
|
|
z-index: 10;
|
|
}
|
|
|
|
.imgBox .loading img {
|
|
max-width: 50px;
|
|
max-height: 50px;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
.ip-container .ip-text {
|
|
line-height: 1.4;
|
|
min-width: 180px;
|
|
transform: translateY(3px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ip-container #d-ip {
|
|
color: var(--color-green);
|
|
!important;
|
|
font-family: 'Comic Neue', cursive !important;
|
|
font-weight: 900;
|
|
font-size: 15px;
|
|
position: relative;
|
|
left: 1em;
|
|
margin-bottom: 3px;
|
|
text-indent: -0.7ch;
|
|
}
|
|
|
|
.ip-container #ipip {
|
|
color: #FF00FF !important;
|
|
font-family: 'Comic Neue', cursive !important;
|
|
font-weight: bold;
|
|
font-size: 15px;
|
|
display: block;
|
|
margin-top: 3px;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.ip-container {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.nav-icon {
|
|
align-items: center;
|
|
background: transparent;
|
|
border-radius: 6px;
|
|
box-shadow: 0 4px 4px 2px #00ffff9a;
|
|
cursor: pointer;
|
|
display: flex;
|
|
height: 40px;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
position: relative;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
width: 40px;
|
|
}
|
|
|
|
.nav-icon img {
|
|
height: 40px;
|
|
left: 50%;
|
|
object-fit: cover;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
transition: filter 0.2s ease-in-out;
|
|
width: 40px;
|
|
}
|
|
|
|
.nav-icon:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 8px 3px #00ffff9a;
|
|
}
|
|
|
|
.nav-icon:hover img {
|
|
filter: drop-shadow(0 0 5px cyan);
|
|
transform: translate(-50%, -50%) scale(1.05);
|
|
}
|
|
|
|
.site-icon {
|
|
cursor: pointer;
|
|
height: 48px;
|
|
position: relative;
|
|
width: 48px;
|
|
}
|
|
|
|
.site-icon img {
|
|
border-radius: 50%;
|
|
height: 48px;
|
|
left: 0;
|
|
object-fit: cover;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 48px;
|
|
}
|
|
|
|
.site-icon img#github-normal,
|
|
.site-icon img#github-gray {
|
|
height: 55px;
|
|
width: 55px;
|
|
}
|
|
|
|
.navbar-right .site-icon {
|
|
position: relative;
|
|
top: 3px;
|
|
}
|
|
|
|
@media (max-width: 1044px) {
|
|
.site-icon {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
#result-overlay {
|
|
backdrop-filter: blur(4px);
|
|
background: var(--bg-container);
|
|
border-radius: 8px;
|
|
color: var(--color-white-strong);
|
|
display: none;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
right: 2%;
|
|
top: 50%;
|
|
max-width: 90%;
|
|
padding: 16px 8px;
|
|
pointer-events: none;
|
|
position: fixed;
|
|
text-align: center;
|
|
transform: translateY(-50%);
|
|
word-break: break-word;
|
|
z-index: 9999;
|
|
writing-mode: vertical-rl;
|
|
text-orientation: mixed;
|
|
height: auto;
|
|
white-space: nowrap;
|
|
border: var(--glass-border);
|
|
box-shadow: var(--border-glow);
|
|
}
|
|
|
|
@font-face {
|
|
font-display: swap;
|
|
font-family: 'Fredoka One';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: url('/luci-static/spectra/fonts/fredoka-v16-latin-700.woff2') format('woff2');
|
|
}
|
|
|
|
.royal-style {
|
|
align-items: center;
|
|
animation: textColorChange 3s infinite linear;
|
|
box-sizing: border-box;
|
|
display: inline-flex;
|
|
font-family: 'Fredoka One', cursive !important;
|
|
font-size: 35px;
|
|
font-weight: 700;
|
|
justify-content: center;
|
|
letter-spacing: 2px;
|
|
line-height: 1.1;
|
|
min-width: 220px;
|
|
padding: 2px 5px;
|
|
text-decoration: none !important;
|
|
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2),
|
|
-2px -2px 5px rgba(255, 255, 255, 0.5);
|
|
transition: all 0.3s;
|
|
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.royal-style:hover {
|
|
filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
|
|
transform: skew(-5deg);
|
|
}
|
|
|
|
.inner {
|
|
display: none !important;
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
.block h4 {
|
|
font-size: 0.7rem !important;
|
|
}
|
|
|
|
.block {
|
|
padding: 0.3rem !important;
|
|
}
|
|
|
|
.block img {
|
|
width: 36px !important;
|
|
}
|
|
}
|
|
|
|
@supports (-webkit-touch-callout: none) {
|
|
.main {
|
|
min-height: 100vh;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.main {
|
|
min-height: 100vh;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
#homeproxy,
|
|
#realtime,
|
|
#networkIcon {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.main-left .sidenav-header {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (max-width: 1380px) {
|
|
#ipip {
|
|
display: inline-block;
|
|
max-width: 180px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px),
|
|
(max-width: 1680px) and (min-width: 769px) {
|
|
.weather-card {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
#cityNameDisplay,
|
|
#weatherText {
|
|
font-family: 'Fredoka One', cursive !important;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.navbar-left,
|
|
.ip-container,
|
|
.weather-card,
|
|
.navbar-right {
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.cbi-section,
|
|
.main-left {
|
|
background-color: var(--bg-container);
|
|
}
|
|
|
|
body {
|
|
color: var(--text-primary) !important;
|
|
background-color: var(--card-bg);
|
|
}
|
|
|
|
.tr.cbi-rowstyle-2 {
|
|
background-color: var(--card-bg) !important;
|
|
}
|
|
|
|
.controls .pager.center {
|
|
background-color: var(--card-bg) !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.app-container_status-label_bg {
|
|
background-color: var(--card-bg) !important;
|
|
}
|
|
|
|
.container .table-wrapper .table-heade {
|
|
background-color: var(--bg-container) !important;
|
|
}
|
|
|
|
fieldset.cbi-section>textarea,
|
|
div#command-output>textarea {
|
|
background-color: var(--bg-container) !important;
|
|
color: var(--text-primary) !important;
|
|
border: 1px solid var(--border-color) !important;
|
|
border-radius: var(--radius) !important;
|
|
padding: 12px !important;
|
|
}
|
|
|
|
div.nft-chain-hook {
|
|
margin-left: 10px !important;
|
|
padding-left: 10px !important;
|
|
}
|
|
|
|
div.nav-container>button.btn_styles {
|
|
color: white !important;
|
|
}
|
|
|
|
.block.pure-g {
|
|
background-color: var(--card-bg) !important;
|
|
}
|
|
|
|
.developer-container {
|
|
background-color: var(--bg-container) !important;
|
|
}
|
|
|
|
.developer-container img,
|
|
.developer-container i {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
#logo.royal-style {
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
.detail-item span {
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.detail-item span i {
|
|
color: var(--accent-color) !important;
|
|
}
|
|
|
|
#mode-popup .button-grid button span,
|
|
#mode-popup .button-grid button {
|
|
color: white !important;
|
|
}
|
|
|
|
.nav-container .btn_styles,
|
|
.nav-container .btn_styles * {
|
|
color: white !important;
|
|
}
|
|
|
|
.icon-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
.app-icon-btn {
|
|
background: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
width: 40px;
|
|
height: 40px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: black;
|
|
font-size: 20px;
|
|
box-shadow: 0 4px 4px 2px #00ffff9a;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.app-icon-btn:hover {
|
|
filter: drop-shadow(0 0 5px cyan);
|
|
box-shadow: 0 4px 6px 2px #00ffffd0;
|
|
}
|
|
|
|
.app-icon-btn:active {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.app-icon-btn i {
|
|
color: black;
|
|
pointer-events: none;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
[data-theme="dark"] .app-icon-btn {
|
|
background: var(--color-white-strong);
|
|
box-shadow: 0 4px 4px 2px #00ffff9a;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.icon-group {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.announcement-content.scrolling {
|
|
animation-duration: 45000ms !important;
|
|
}
|
|
|
|
.cbi-value:hover,
|
|
.cbi-section-table tr.cbi-section-table-row:hover td {
|
|
background-color: var(--bg-container) !important;
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
[data-theme="dark"] .cbi-dropdown[open]>.open::before,
|
|
[data-theme="dark"] .cbi-dropdown>.open::before {
|
|
color: var(--color-white-strong) !important;
|
|
}
|
|
|
|
.action span,
|
|
.action .roots .root,
|
|
.action .roots_tit {
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.tooltip-trigger svg path,
|
|
.card-header .settings-wrapper .settings-btn .btn_settings svg path,
|
|
.card-header .settings-wrapper .settings-btn .rotation svg path {
|
|
fill: var(--accent-color) !important;
|
|
}
|
|
|
|
.tooltip-trigger:hover svg path,
|
|
.card-header .settings-wrapper .settings-btn:hover svg path,
|
|
.card-header .settings-wrapper .settings-btn .rotation:hover svg path {
|
|
fill: var(--success-text) !important;
|
|
}
|
|
|
|
.cbi-value > .cbi-value-field > span:first-child {
|
|
display: inline-block;
|
|
width: 150px;
|
|
min-width: 150px;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.app-container,
|
|
.reusable-card {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.app-container:hover,
|
|
.reusable-card:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.cbi-input-select::-webkit-scrollbar-thumb {
|
|
background-color: var(--accent-color) !important;
|
|
border-radius: 10px !important;
|
|
}
|
|
|
|
.cbi-input-select::-webkit-scrollbar-track {
|
|
background-color: color-mix(in oklch, var(--header-bg), transparent 75%) !important;
|
|
}
|
|
|
|
.cbi-input-select::-webkit-scrollbar {
|
|
width: 8px !important;
|
|
}
|
|
|
|
.cbi-input-select {
|
|
border-radius: 12px !important;
|
|
border: var(--border-strong) !important;
|
|
scrollbar-color: var(--accent-color) color-mix(in oklch, var(--header-bg), transparent 75%) !important;
|
|
scrollbar-width: thin !important;
|
|
transition: border-radius 0.2s ease;
|
|
}
|
|
|
|
textarea {
|
|
border: var(--border-strong) !important;
|
|
}
|
|
|
|
textarea:focus {
|
|
border: 1px solid var(--bg-container);
|
|
box-shadow: 0 0 4px 0 var(--bg-container);
|
|
outline: none;
|
|
}
|
|
|
|
.nav-container .btn_styles:nth-child(6) {
|
|
background-color: #0bc5ea !important;
|
|
border-color: #0bc5ea !important;
|
|
background-image: none !important;
|
|
box-shadow: none !important;
|
|
opacity: 1 !important;
|
|
transition: all 0.3s ease !important;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.nav-container .btn_styles:nth-child(6):hover {
|
|
transform: scale(1.05);
|
|
background-color: #00a3c4 !important;
|
|
}
|
|
|
|
.nav-container .btn_styles:nth-child(7) {
|
|
background-color: #ed64a6 !important;
|
|
border-color: #ed64a6 !important;
|
|
background-image: none !important;
|
|
box-shadow: none !important;
|
|
opacity: 1 !important;
|
|
transition: all 0.3s ease !important;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.nav-container .btn_styles:nth-child(7):hover {
|
|
transform: scale(1.05);
|
|
background-color: #d53f8c !important;
|
|
}
|
|
|
|
[data-theme="dark"] .control-card {
|
|
border: var(--glow-border);
|
|
box-shadow: var(--glow-shadow-default);
|
|
transition: all 0.25s ease-out;
|
|
animation: section-breath 5s ease-in-out infinite !important;
|
|
}
|
|
|
|
[data-theme="dark"] .control-card:hover {
|
|
--glow-primary: var(--glow-primary-hover);
|
|
--glow-secondary: var(--glow-secondary-hover);
|
|
box-shadow: var(--glow-shadow-hover);
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
.reusable-card>.card-body>.content>.info>.status>span {
|
|
color: var(--text-primary) !important;
|
|
background-color: var(--card-bg) !important;
|
|
}
|
|
|
|
.glass-effect {
|
|
background: color-mix(in oklch, var(--bg-container), transparent calc(100% - (var(--glass-opacity, 0.85) * 100%)));
|
|
backdrop-filter: var(--glass-blur, blur(20px));
|
|
-webkit-backdrop-filter: var(--glass-blur, blur(20px));
|
|
border: var(--glass-border, 1px solid rgba(255, 255, 255, 0.1));
|
|
border-radius: var(--radius, 20px);
|
|
}
|
|
|
|
.glass-light {
|
|
--glass-opacity: 0.7;
|
|
--glass-blur: blur(12px);
|
|
}
|
|
|
|
.glass-medium {
|
|
--glass-opacity: 0.85;
|
|
--glass-blur: blur(20px);
|
|
}
|
|
|
|
.glass-heavy {
|
|
--glass-opacity: 0.9;
|
|
--glass-blur: blur(30px);
|
|
}
|
|
|
|
.glass-card {
|
|
background: color-mix(in oklch, var(--card-bg), transparent 30%);
|
|
backdrop-filter: var(--glass-blur, blur(20px));
|
|
-webkit-backdrop-filter: var(--glass-blur, blur(20px));
|
|
border: var(--glass-border, 1px solid rgba(255, 255, 255, 0.1));
|
|
border-radius: var(--radius, 20px);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.glass-header {
|
|
background: color-mix(in oklch, var(--header-bg), transparent 40%);
|
|
backdrop-filter: var(--glass-blur, blur(20px));
|
|
-webkit-backdrop-filter: var(--glass-blur, blur(20px));
|
|
border-bottom: var(--glass-border, 1px solid rgba(255, 255, 255, 0.1));
|
|
}
|
|
|
|
.glass-button {
|
|
background: color-mix(in oklch, var(--btn-primary-bg), transparent 20%);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: var(--radius, 20px);
|
|
transition: all var(--transition-speed, 0.3s) ease;
|
|
}
|
|
|
|
.glass-button:hover {
|
|
background: color-mix(in oklch, var(--btn-primary-hover), transparent 10%);
|
|
backdrop-filter: blur(15px);
|
|
-webkit-backdrop-filter: blur(15px);
|
|
}
|
|
|
|
.glass-input {
|
|
background: color-mix(in oklch, var(--bg-container), transparent 50%);
|
|
backdrop-filter: blur(15px);
|
|
-webkit-backdrop-filter: blur(15px);
|
|
border: var(--glass-border, 1px solid rgba(255, 255, 255, 0.1));
|
|
border-radius: calc(var(--radius, 20px) - 4px);
|
|
}
|
|
|
|
.glass-modal {
|
|
background: color-mix(in oklch, var(--bg-container), transparent 20%);
|
|
backdrop-filter: blur(25px);
|
|
-webkit-backdrop-filter: blur(25px);
|
|
border: var(--glass-border, 1px solid rgba(255, 255, 255, 0.1));
|
|
border-radius: var(--radius, 20px);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.card-container .feature-card {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
position: relative !important;
|
|
padding: 20px !important;
|
|
}
|
|
|
|
.card-container .header {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
margin-right: 15px !important;
|
|
position: relative !important;
|
|
}
|
|
|
|
.card-container .icon-svg {
|
|
width: 48px !important;
|
|
height: 48px !important;
|
|
}
|
|
|
|
.card-container .content {
|
|
flex: 1 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.card-container .footer {
|
|
position: absolute !important;
|
|
top: 12px !important;
|
|
right: 12px !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.card-container .right-arrow {
|
|
margin-left: 15px !important;
|
|
width: 24px !important;
|
|
height: 24px !important;
|
|
}
|
|
|
|
.card-container .feature-card.blue .footer {
|
|
top: 10px !important;
|
|
right: 12px !important;
|
|
bottom: auto !important;
|
|
}
|
|
|
|
.btn,
|
|
.cbi-button,
|
|
.item::after {
|
|
font-size: .75rem;
|
|
display: inline-block;
|
|
width: auto !important;
|
|
padding: 0.4rem 0.8rem;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
transition: all var(--transition-speed) ease;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
color: var(--color-white-strong);
|
|
border: none !important;
|
|
border-radius: calc(var(--radius) - 4px) !important;
|
|
background-color: var(--btn-primary-bg);
|
|
background-image: none;
|
|
-webkit-appearance: none;
|
|
-ms-touch-action: manipulation;
|
|
touch-action: manipulation;
|
|
position: relative;
|
|
overflow: hidden;
|
|
min-width: max-content;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.btn::before,
|
|
.cbi-button::before,
|
|
.item::after::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, var(--glow-primary), transparent);
|
|
transition: left 0.5s ease;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.btn:hover::before,
|
|
.cbi-button:hover::before,
|
|
.item:hover::after::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.cbi-button-up,
|
|
.cbi-button-down {
|
|
font-size: 1rem;
|
|
display: inline-block;
|
|
min-width: 0;
|
|
padding: 0.4rem 0.8rem;
|
|
font-size: 0;
|
|
color: transparent !important;
|
|
border-radius: calc(var(--radius) - 4px);
|
|
background: var(--btn-primary-bg);
|
|
transition: all var(--transition-speed) ease;
|
|
flex-shrink: 0;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 16px 16px;
|
|
text-indent: -9999px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cbi-button-up {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.cbi-button-down {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='m7.247 11.14-4.796-5.481c-.566-.647-.106-1.659.753-1.659h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.cbi-button:not(select) {
|
|
-webkit-appearance: none !important;
|
|
}
|
|
|
|
.btn:hover,
|
|
.btn:focus,
|
|
.btn:active,
|
|
.cbi-button:hover,
|
|
.cbi-button:focus,
|
|
.cbi-button:active,
|
|
.item:hover::after,
|
|
.item:focus::after,
|
|
.item:active::after,
|
|
.cbi-page-actions .cbi-button-apply+.cbi-button-save:hover,
|
|
.cbi-page-actions .cbi-button-apply+.cbi-button-save:focus,
|
|
.cbi-page-actions .cbi-button-apply+.cbi-button-save:active {
|
|
text-decoration: none;
|
|
outline: 0
|
|
}
|
|
|
|
.btn:hover,
|
|
.btn:focus,
|
|
.cbi-button:hover,
|
|
.cbi-button:focus,
|
|
.item:hover::after,
|
|
.item:focus::after {
|
|
background-color: var(--btn-primary-hover);
|
|
box-shadow: var(--glow-shadow-hover);
|
|
transform: translateY(-1px);
|
|
border-color: var(--glow-primary);
|
|
}
|
|
|
|
.btn:active,
|
|
.cbi-button:active,
|
|
.item:active::after {
|
|
box-shadow: var(--glow-shadow-default);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.cbi-button-up:hover,
|
|
.cbi-button-up:focus {
|
|
background-color: var(--btn-primary-hover);
|
|
box-shadow: var(--glow-shadow-hover);
|
|
transform: translateY(-1px);
|
|
transition: all var(--transition-speed) ease;
|
|
}
|
|
|
|
.cbi-button-up:active {
|
|
box-shadow: var(--glow-shadow-default);
|
|
transform: scaleY(-1) translateY(0);
|
|
}
|
|
|
|
.btn:disabled,
|
|
.cbi-button:disabled {
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
opacity: .5;
|
|
box-shadow: none
|
|
}
|
|
|
|
.alert-message [class="btn"],
|
|
.modal div[class="btn"],
|
|
.cbi-button-find,
|
|
.cbi-button-link,
|
|
.cbi-button-up,
|
|
.cbi-button-down,
|
|
.cbi-button-neutral,
|
|
.cbi-button[name="zero"],
|
|
.cbi-button[name="restart"],
|
|
.cbi-button[onclick="hide_empty(this)"] {
|
|
font-weight: bold;
|
|
color: var(--color-white-strong) !important;
|
|
background-color: var(--color-pink);
|
|
}
|
|
|
|
.alert-message [class="btn"]:hover,
|
|
.modal div[class="btn"]:hover,
|
|
.cbi-button-find:hover,
|
|
.cbi-button-link:hover,
|
|
.cbi-button-up:hover,
|
|
.cbi-button-down:hover,
|
|
.cbi-button-neutral:hover,
|
|
.cbi-button[name="zero"]:hover,
|
|
.cbi-button[name="restart"]:hover,
|
|
.cbi-button[onclick="hide_empty(this)"]:hover {
|
|
background-color: color-mix(in oklch, var(--color-pink), white 12%);
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.btn.primary,
|
|
.cbi-page-actions .cbi-button-save,
|
|
.cbi-page-actions .cbi-button-apply+.cbi-button-save,
|
|
.cbi-button-add,
|
|
.cbi-button-save,
|
|
.cbi-button-positive,
|
|
.cbi-button-link,
|
|
.cbi-button[value="Enable"],
|
|
.cbi-button[value="Scan"],
|
|
.cbi-button[value^="Back"],
|
|
.cbi-button-neutral[onclick="handleConfig(event)"] {
|
|
font-weight: normal;
|
|
color: var(--color-white-strong) !important;
|
|
background-color: var(--btn-info-bg);
|
|
}
|
|
|
|
.btn.primary:hover,
|
|
.cbi-page-actions .cbi-button-save:hover,
|
|
.cbi-page-actions .cbi-button-apply+.cbi-button-save:hover,
|
|
.cbi-button-add:hover,
|
|
.cbi-button-save:hover,
|
|
.cbi-button-positive:hover,
|
|
.cbi-button-link:hover,
|
|
.cbi-button[value="Enable"]:hover,
|
|
.cbi-button[value="Scan"]:hover,
|
|
.cbi-button[value^="Back"]:hover,
|
|
.cbi-button-neutral[onclick="handleConfig(event)"]:hover {
|
|
background-color: color-mix(in oklch, var(--btn-info-bg), white 12%);
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.cbi-section-actions .cbi-button-edit,
|
|
.cbi-button-edit,
|
|
.cbi-button-reload,
|
|
.cbi-button-action,
|
|
.cbi-button-up,
|
|
.cbi-button-down,
|
|
.cbi-button[value="Submit"],
|
|
.cbi-button[value="Upload"],
|
|
.cbi-button[onclick="addKey(event)"] {
|
|
font-weight: normal;
|
|
color: var(--color-white-strong) !important;
|
|
background-color: var(--color-cyan);
|
|
}
|
|
|
|
.cbi-section-actions .cbi-button-edit:hover,
|
|
.cbi-button-edit:hover,
|
|
.cbi-button-reload:hover,
|
|
.cbi-button-action:hover,
|
|
.cbi-button-up:hover,
|
|
.cbi-button-down:hover,
|
|
.cbi-button[value="Submit"]:hover,
|
|
.cbi-button[value="Upload"]:hover,
|
|
.cbi-button[onclick="addKey(event)"]:hover {
|
|
background-color: color-mix(in oklch, var(--color-cyan), white 12%);
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.btn.danger,
|
|
.cbi-section-remove>.cbi-button,
|
|
.cbi-button-remove,
|
|
.cbi-button-negative,
|
|
.cbi-button[value="Stop"],
|
|
.cbi-button[value="Kill"],
|
|
.cbi-button[onclick="reboot(this)"],
|
|
.cbi-button-neutral[value="Restart"] {
|
|
font-weight: normal;
|
|
color: var(--color-white-strong);
|
|
background-color: var(--color-red) !important;
|
|
}
|
|
|
|
.cbi-page-actions .cbi-button-apply,
|
|
.cbi-button[value$="Apply"],
|
|
.cbi-button-apply {
|
|
font-weight: normal;
|
|
color: var(--color-white-strong) !important;
|
|
background-color: var(--btn-success-bg);
|
|
}
|
|
|
|
.cbi-page-actions .cbi-button-apply:hover,
|
|
.cbi-button[value$="Apply"]:hover,
|
|
.cbi-button-apply:hover {
|
|
background-color: color-mix(in oklch, var(--btn-success-bg), white 12%);
|
|
color: var(--color-white) !important;
|
|
}
|
|
|
|
.cbi-button-reset {
|
|
font-weight: normal;
|
|
color: var(--color-white-strong);
|
|
background-color: var(--btn-warning-bg);
|
|
}
|
|
|
|
.cbi-button-reset:hover {
|
|
background-color: color-mix(in oklch, var(--btn-warning-bg), white 12%);
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.btn[value="Dismiss"],
|
|
.cbi-button[value="Terminate"],
|
|
.cbi-button[value="Reset"],
|
|
.cbi-button[value="Disabled"],
|
|
.cbi-button[onclick^="iface_reconnect"],
|
|
.cbi-button[onclick="handleReset(event)"],
|
|
.cbi-button-neutral[value="Disable"] {
|
|
font-weight: normal;
|
|
color: var(--color-white-strong);
|
|
border: var(--glow-border);
|
|
background-color: var(--color-orange);
|
|
}
|
|
|
|
.cbi-button-success,
|
|
.cbi-button-download {
|
|
font-weight: normal;
|
|
color: var(--color-white-strong);
|
|
border: var(--glow-border);
|
|
background-color: var(--btn-success-bg);
|
|
}
|
|
|
|
.cbi-button[value="Find"],
|
|
.cbi-button[value="Reload"],
|
|
.cbi-button[value="Refresh"],
|
|
.cbi-button[value="Info"] {
|
|
background-color: var(--color-cyan);
|
|
color: var(--color-white-strong);
|
|
border: var(--glow-border);
|
|
}
|
|
|
|
.cbi-button[value="Advanced"],
|
|
.cbi-button[value="Settings"],
|
|
.cbi-button[value="Configure"] {
|
|
background-color: var(--color-violet);
|
|
color: var(--color-white-strong);
|
|
border: var(--glow-border);
|
|
}
|
|
|
|
.cbi-button[value="Test"],
|
|
.cbi-button[value="Try"],
|
|
.cbi-button[value="Demo"] {
|
|
background-color: var(--color-pink);
|
|
color: var(--color-white-strong);
|
|
border: var(--glow-border);
|
|
}
|
|
|
|
.cbi-button-remove:hover {
|
|
background-color: color-mix(in oklch, var(--btn-danger-bg), black 10%) !important;
|
|
box-shadow: var(--glow-shadow-hover);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.cbi-button+.cbi-button {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
[data-theme="dark"] .cbi-button:hover {
|
|
animation: var(--breath-animation);
|
|
}
|
|
|
|
[data-theme="dark"] .tabs *,
|
|
[data-theme="dark"] .cbi-tabmenu * {
|
|
animation: none !important;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
.btn,
|
|
.cbi-button,
|
|
.cbi-dropdown>.open,
|
|
.cbi-dropdown>.more {
|
|
padding: 0.35rem 0.7rem;
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
.cbi-button-up,
|
|
.cbi-button-down {
|
|
padding: 0.35rem 0.7rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
|
|
.btn,
|
|
.cbi-button,
|
|
.cbi-dropdown>.open,
|
|
.cbi-dropdown>.more {
|
|
padding: 0.3rem 0.6rem;
|
|
font-size: 0.65rem;
|
|
}
|
|
}
|
|
|
|
.cbi-dropdown {
|
|
display: inline-flex !important;
|
|
position: relative !important;
|
|
overflow: visible !important;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.cbi-dropdown.btn.cbi-button.cbi-button-apply {
|
|
height: 2.2rem !important;
|
|
line-height: 1.2 !important;
|
|
font-size: 0.75rem !important;
|
|
padding: 0 0.8rem !important;
|
|
}
|
|
|
|
.cbi-page-actions {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
#add_link_div {
|
|
background-color: var(--bg-container) !important;
|
|
border-radius: var(--radius) !important;
|
|
z-index: 10000 !important;
|
|
border: var(--border-strong) !important;
|
|
box-shadow: 0 0 10px var(--card-bg) !important;
|
|
}
|
|
|
|
#main .btns,
|
|
#page .btns {
|
|
display: flex !important;
|
|
justify-content: space-between !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
#main .app-btn,
|
|
#page .app-btn {
|
|
flex: 1 !important;
|
|
margin: 0 0.5rem !important;
|
|
min-width: auto !important;
|
|
}
|
|
|
|
#actioner .btns {
|
|
display: flex !important;
|
|
justify-content: space-between !important;
|
|
width: 100% !important;
|
|
margin-top: 1rem !important;
|
|
}
|
|
|
|
#actioner .cbi-button {
|
|
flex: 1 !important;
|
|
margin: 0 0.5rem !important;
|
|
min-width: auto !important;
|
|
}
|
|
|
|
.app-tags {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
margin-left: 0.2rem !important;
|
|
margin-top: 1rem !important;
|
|
font-size: 1rem !important;
|
|
}
|
|
|
|
.app-tags .tag {
|
|
margin: 0 0.1rem !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.app-tags .block {
|
|
margin: 0 0.1rem !important;
|
|
padding: 0 !important;
|
|
background: none !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
animation: none !important;
|
|
}
|
|
|
|
.app-tags .block:last-child {
|
|
display: none !important;
|
|
}
|
|
|
|
div>div[style*="display:grid"] {
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
width: fit-content !important;
|
|
}
|
|
|
|
.cbi-section-actions div {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.cbi-value-field label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.cbi-input-select:focus {
|
|
border-bottom-left-radius: 0 !important;
|
|
border-bottom-right-radius: 0 !important;
|
|
}
|
|
|
|
.cbi-dropdown {
|
|
transition: border-radius 0.2s ease;
|
|
}
|
|
|
|
.cbi-dropdown[open] {
|
|
border-bottom-left-radius: 0 !important;
|
|
border-bottom-right-radius: 0 !important;
|
|
}
|
|
|
|
.cbi-dropdown[open]>ul.dropdown {
|
|
border-top-left-radius: 0 !important;
|
|
border-top-right-radius: 0 !important;
|
|
margin-top: -1px !important;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#logo.royal-style {
|
|
font-size: 1.7rem !important;
|
|
}
|
|
}
|
|
|
|
.cbi-dynlist>.item>span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
border-radius: 12px !important;
|
|
box-sizing: border-box !important;
|
|
padding-right: 2.5rem !important;
|
|
}
|
|
|
|
.cbi-dynlist>.item::after {
|
|
border-radius: 0 12px 12px 0 !important;
|
|
width: 2.2rem !important;
|
|
right: 0;
|
|
}
|
|
|
|
.cbi-dynlist>.add-item input[type="text"] {
|
|
|
|
min-width: 17.88rem;
|
|
padding-right: 0.5rem !important;
|
|
}
|
|
|
|
.cbi-dynlist>.add-item .cbi-button-add {
|
|
border-radius: 0 12px 12px 0 !important;
|
|
}
|
|
|
|
.cbi-value-field .cbi-dropdown, .cbi-value-field .cbi-input-select, .cbi-value input[type="text"], .cbi-value input[type="password"] {
|
|
min-width: 20rem;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
#core_status,
|
|
.cbi-value-field input[readonly] {
|
|
border-radius: 12px !important;
|
|
}
|
|
|
|
.cbi-input-select:focus {
|
|
border-bottom-left-radius: 0 !important;
|
|
border-bottom-right-radius: 0 !important;
|
|
}
|
|
|
|
.cbi-dropdown:not(.btn):not(.cbi-button):not(.cbi-button-apply)[open] {
|
|
border-bottom-left-radius: 0 !important;
|
|
border-bottom-right-radius: 0 !important;
|
|
}
|
|
|
|
.cbi-dropdown[open]>ul.dropdown {
|
|
border-top-left-radius: 0 !important;
|
|
border-top-right-radius: 0 !important;
|
|
margin-top: -1px !important;
|
|
}
|
|
|
|
.cbi-input-password {
|
|
border-radius: 12px 0 0 12px !important;
|
|
border-right: none !important;
|
|
}
|
|
|
|
.cbi-value-field>div>.control-group>.cbi-input-password+.cbi-button.cbi-button-neutral {
|
|
border-radius: 0 12px 12px 0 !important;
|
|
border-left: none !important;
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
.control-group {
|
|
display: inline-flex !important;
|
|
align-items: stretch !important;
|
|
}
|
|
|
|
.modal textarea,
|
|
#syslog {
|
|
background: var(--bg-container) !important;
|
|
border-radius: 6px !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.controls > div .control-group input[type="text"] {
|
|
border-radius: 12px 0 0 12px !important;
|
|
height: 2.5rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.controls > div .control-group .cbi-button {
|
|
border-radius: 0 12px 12px 0 !important;
|
|
height: 2.5rem;
|
|
line-height: 2.5rem;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.diag-action {
|
|
margin-left: 8px !important;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#add_link_div {
|
|
width: 95%;
|
|
padding: 15px;
|
|
}
|
|
}
|
|
|
|
#edit-modal .uk-modal-close-default {
|
|
position: static !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
#edit-modal .uk-modal-header .uk-icon-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.uk-modal-dialog {
|
|
background: var(--bg-container) !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
[data-theme="dark"] .uk-modal-dialog {
|
|
border: var(--glass-border) !important;
|
|
box-shadow: var(--border-glow) !important;
|
|
}
|
|
|
|
.uk-card-default .uk-card-title {
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.uk-card {
|
|
background: var(--card-bg) !important;
|
|
border: var(--border-strong) !important;
|
|
color: var(--text-primary) !important;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
#controlPanel .uk-card-hover:hover {
|
|
transform: scale(1.02);
|
|
box-shadow: var(--glow-shadow-default);
|
|
}
|
|
|
|
.uk-modal-footer,
|
|
.uk-modal-header {
|
|
background-color: var(--header-bg) !important;
|
|
color: var(--text-primary) !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.uk-modal-body {
|
|
background-color: var(--card-bg);
|
|
}
|
|
|
|
#themeUpdateConfirmModal #themeCopyCommand,
|
|
#themeUpdateStatusModal #themeLogOutput {
|
|
background: color-mix(in oklch, var(--card-bg), transparent 20%);
|
|
color: var(--text-primary) !important;
|
|
border-radius: var(--radius-small) !important;
|
|
border: var(--border-strong) !important;
|
|
}
|
|
|
|
#cityInput {
|
|
background: var(--card-bg) !important;
|
|
color: var(--text-primary) !important;
|
|
border: var(--border-strong) !important;
|
|
border-radius: var(--radius-small) !important;
|
|
}
|
|
|
|
#themeUpdateConfirmModal #themeCurrentVersionInfo,
|
|
#themeUpdateConfirmModal #themeLatestVersionInfo {
|
|
border-radius: var(--radius-medium, 12px) !important;
|
|
overflow: visible;
|
|
}
|
|
|
|
.language-modal-header {
|
|
background-color: var(--header-bg) !important;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20px 30px 15px;
|
|
}
|
|
|
|
.language-modal-header-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.language-modal-flag {
|
|
width: 50px;
|
|
height: 35px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.language-modal-title {
|
|
margin: 0;
|
|
font-size: 1.3rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.language-modal-body {
|
|
padding: 20px 30px;
|
|
}
|
|
|
|
.language-form-label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-weight: 500;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.language-voice-container {
|
|
margin-top: 25px;
|
|
}
|
|
|
|
.language-checkbox-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.language-modal-footer {
|
|
background-color: var(--header-bg) !important;
|
|
padding: 20px 30px;
|
|
border: none !important;
|
|
}
|
|
|
|
.language-modal-footer-buttons {
|
|
display: flex;
|
|
gap: 12px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
#languageSelect option,
|
|
#voiceSelect option {
|
|
color: var(--text-primary) !important;
|
|
background: color-mix(in oklch, var(--card-bg), transparent 20%);
|
|
}
|
|
|
|
.advanced-color-control-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.advanced-color-control-modal.active {
|
|
display: flex;
|
|
}
|
|
|
|
.advanced-color-control-modal-content {
|
|
background:
|
|
color-mix(in oklch, var(--bg-container), transparent var(--glass-opacity)),
|
|
linear-gradient(
|
|
135deg,
|
|
color-mix(in oklch, var(--glow-primary), transparent 98%) 0%,
|
|
transparent 30%,
|
|
color-mix(in oklch, var(--glow-secondary), transparent 98%) 100%
|
|
);
|
|
backdrop-filter: var(--glass-blur);
|
|
-webkit-backdrop-filter: var(--glass-blur);
|
|
border: var(--glow-border);
|
|
border-radius: var(--radius);
|
|
width: 90%;
|
|
max-width: 800px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
padding: 30px;
|
|
position: relative;
|
|
box-shadow: var(--shadow-inset);
|
|
}
|
|
|
|
.advanced-color-control-close-btn {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
width: 34px;
|
|
height: 34px;
|
|
background: color-mix(in oklch, var(--bg-container), transparent 30%);
|
|
backdrop-filter: var(--glass-blur);
|
|
-webkit-backdrop-filter: var(--glass-blur);
|
|
border: var(--border-strong);
|
|
border-radius: 50%;
|
|
font-size: 18px;
|
|
color: var(--text-primary);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: var(--glow-shadow-default);
|
|
}
|
|
|
|
.advanced-color-control-close-btn:hover {
|
|
background: color-mix(in oklch, var(--bg-container), transparent 45%);
|
|
border-color: var(--glow-primary);
|
|
color: var(--btn-danger-bg);
|
|
transform: scale(1.15) rotate(90deg);
|
|
box-shadow: var(--glow-shadow-hover);
|
|
animation: none;
|
|
}
|
|
|
|
.advanced-color-control-close-btn:not(:hover) {
|
|
animation: var(--breathing-animation);
|
|
}
|
|
|
|
.advanced-color-control-close-btn:active {
|
|
transform: scale(0.95) rotate(90deg);
|
|
transition: transform 0.1s ease;
|
|
}
|
|
|
|
.advanced-color-controls-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 30px;
|
|
}
|
|
|
|
.advanced-color-control-section {
|
|
background:
|
|
color-mix(in oklch, var(--card-bg), transparent 30%),
|
|
linear-gradient(
|
|
135deg,
|
|
color-mix(in oklch, var(--glow-primary), transparent 97%) 0%,
|
|
transparent 50%
|
|
);
|
|
backdrop-filter: var(--glass-blur);
|
|
-webkit-backdrop-filter: var(--glass-blur);
|
|
border: var(--border-strong);
|
|
border-radius: var(--radius);
|
|
padding: 25px;
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.advanced-color-control-section:hover {
|
|
transform: translateY(-2px);
|
|
transition: all var(--transition-speed) ease;
|
|
}
|
|
|
|
[data-theme="dark"] .advanced-color-control-modal-content {
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-theme="dark"] .advanced-color-control-modal-content {
|
|
animation: var(--breath-animation);
|
|
}
|
|
|
|
.advanced-color-control-section-title {
|
|
font-size: 18px;
|
|
margin-bottom: 10px;
|
|
color: var(--accent-secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.advanced-color-control-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.advanced-color-control-label {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.advanced-color-control-label i {
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.advanced-color-control-value {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.advanced-color-control-value {
|
|
color: var(--accent-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.advanced-color-control-slider-container {
|
|
position: relative;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.advanced-color-control-slider {
|
|
-webkit-appearance: none;
|
|
width: 100%;
|
|
height: 8px;
|
|
border-radius: 10px;
|
|
background: linear-gradient(to right,
|
|
oklch(50% 0.05 var(--base-hue)),
|
|
oklch(50% 0.05 calc(var(--base-hue) + 60)),
|
|
oklch(50% 0.05 calc(var(--base-hue) + 120)),
|
|
oklch(50% 0.05 calc(var(--base-hue) + 180)),
|
|
oklch(50% 0.05 calc(var(--base-hue) + 240)),
|
|
oklch(50% 0.05 calc(var(--base-hue) + 300)),
|
|
oklch(50% 0.05 calc(var(--base-hue) + 360)));
|
|
outline: none;
|
|
}
|
|
|
|
.advanced-color-control-slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
background: var(--accent-color);
|
|
cursor: pointer;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
|
border: 2px solid var(--color-white-strong);
|
|
}
|
|
|
|
.advanced-color-control-slider.chroma {
|
|
background: linear-gradient(to right,
|
|
oklch(50% 0 var(--base-hue)),
|
|
oklch(50% 0.15 var(--base-hue)),
|
|
oklch(50% 0.3 var(--base-hue)));
|
|
}
|
|
|
|
.advanced-color-control-slider.lightness {
|
|
background: linear-gradient(to right,
|
|
oklch(10% var(--base-chroma) var(--base-hue)),
|
|
oklch(50% var(--base-chroma) var(--base-hue)),
|
|
oklch(90% var(--base-chroma) var(--base-hue)));
|
|
}
|
|
|
|
.advanced-color-control-reset-btn {
|
|
background: var(--btn-danger-bg);
|
|
color: var(--color-white-strong);
|
|
border: none;
|
|
padding: 8px 18px;
|
|
border-radius: var(--radius);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
width: 100%;
|
|
margin-top: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
line-height: 1.2;
|
|
}
|
|
.advanced-color-control-reset-btn:hover {
|
|
background: color-mix(in oklch, var(--btn-danger-bg), white 12%);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.advanced-color-control-save-btn {
|
|
background: var(--btn-success-bg);
|
|
color: var(--color-white-strong);
|
|
border: none;
|
|
padding: 8px 18px;
|
|
border-radius: var(--radius);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
width: 100%;
|
|
margin-top: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.advanced-color-control-save-btn:hover {
|
|
background: color-mix(in oklch, var(--btn-success-bg), white 12%);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.advanced-color-preview-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.advanced-color-contrast-badge.contrast-excellent {
|
|
background: var(--btn-success-bg);
|
|
}
|
|
|
|
.advanced-color-contrast-badge.contrast-good {
|
|
background: var(--color-blue);
|
|
}
|
|
|
|
.advanced-color-contrast-badge.contrast-fair {
|
|
background: var(--btn-warning-bg);
|
|
}
|
|
|
|
.advanced-color-contrast-badge.contrast-poor {
|
|
background: var(--btn-danger-bg);
|
|
}
|
|
|
|
.advanced-color-preview-display {
|
|
width: 100%;
|
|
height: 150px;
|
|
margin-top: -4px;
|
|
border-radius: var(--radius);
|
|
background: oklch(var(--l, 50%) var(--base-chroma, 0.25) var(--base-hue, 260));
|
|
border: var(--border-strong);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.advanced-color-preview-display::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(135deg,
|
|
rgba(255,255,255,0.2) 0%,
|
|
rgba(255,255,255,0) 50%);
|
|
}
|
|
|
|
.advanced-color-info-group {
|
|
width: 100%;
|
|
background: color-mix(in oklch, var(--card-bg), transparent 60%);
|
|
border-radius: var(--radius);
|
|
padding: 20px;
|
|
border: var(--border-strong);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.advanced-color-info-group:hover {
|
|
background: color-mix(in oklch, var(--card-bg), transparent 30%);
|
|
backdrop-filter: blur(28px);
|
|
transform: scale(1.02);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
|
|
}
|
|
|
|
[data-theme="dark"] .advanced-color-preview-display,
|
|
[data-theme="dark"] .advanced-color-info-group {
|
|
box-shadow: var(--border-glow) !important;
|
|
}
|
|
|
|
.advanced-color-info-label {
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
color: var(--accent-tertiary);
|
|
}
|
|
|
|
.advanced-color-info-value {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
margin-bottom: 15px;
|
|
word-break: break-all;
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.advanced-color-contrast-badge {
|
|
display: inline-block;
|
|
padding: 8px 15px;
|
|
color: var(--color-white-strong);
|
|
border-radius: 20px;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.advanced-color-control-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.advanced-color-control-buttons button {
|
|
flex: 1;
|
|
}
|
|
|
|
.preset-colors-title {
|
|
font-size: 16px;
|
|
margin-top: -4px;
|
|
margin-bottom: 15px;
|
|
color: var(--accent-secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.preset-colors-section {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.preset-colors-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 8px;
|
|
justify-items: center;
|
|
}
|
|
|
|
.preset-color-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: none;
|
|
background: transparent;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
padding: 0;
|
|
}
|
|
|
|
.preset-color-btn:hover {
|
|
transform: scale(1.15);
|
|
}
|
|
|
|
.preset-color-btn:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.preset-color-circle {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
border: 2px solid color-mix(in oklch, var(--text-primary), transparent 70%);
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.preset-color-btn:hover .preset-color-circle {
|
|
border: var(--glass-border);
|
|
box-shadow: var(--border-glow);
|
|
}
|
|
|
|
.advanced-color-control-header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
margin-bottom: 25px;
|
|
text-align: left;
|
|
width: 100%;
|
|
}
|
|
|
|
.advanced-color-control-logo-left {
|
|
flex-shrink: 0;
|
|
width: 131px;
|
|
height: 131px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.advanced-color-control-logo-left svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
transition: transform .45s cubic-bezier(0.4, 0, 0.2, 1),
|
|
filter .45s ease;
|
|
filter:
|
|
drop-shadow(0 0 12px color-mix(in oklch, var(--glow-primary), transparent 70%))
|
|
drop-shadow(0 0 25px color-mix(in oklch, var(--glow-secondary), transparent 80%));
|
|
}
|
|
|
|
.advanced-color-control-title-left {
|
|
flex: 1;
|
|
text-align: left;
|
|
}
|
|
|
|
.advanced-color-control-modal-title {
|
|
font-size: 28px;
|
|
margin-bottom: 8px;
|
|
text-align: left;
|
|
color: var(--accent-color);
|
|
font-weight: 800;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.advanced-color-control-subtitle {
|
|
color: var(--accent-tertiary);
|
|
font-size: 16px;
|
|
margin: 0;
|
|
font-weight: 400;
|
|
opacity: 0.85;
|
|
line-height: 1.4;
|
|
overflow-wrap: break-word;
|
|
word-wrap: break-word;
|
|
hyphens: auto;
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.advanced-color-control-header-left {
|
|
gap: 16px;
|
|
}
|
|
|
|
.advanced-color-control-logo-left {
|
|
width: 115px;
|
|
height: 115px;
|
|
}
|
|
|
|
.advanced-color-control-modal-title {
|
|
font-size: 26px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.advanced-color-control-subtitle {
|
|
font-size: 14px;
|
|
line-height: 1.3;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.advanced-color-control-subtitle {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.advanced-color-control-header-left {
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.advanced-color-control-logo-left {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
.advanced-color-control-modal-title {
|
|
font-size: 22px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.advanced-color-control-subtitle {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.advanced-color-control-header-left {
|
|
gap: 12px;
|
|
}
|
|
|
|
.advanced-color-control-logo-left {
|
|
width: 85px;
|
|
height: 85px;
|
|
}
|
|
|
|
.advanced-color-control-modal-title {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.advanced-color-control-subtitle {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
[data-theme="dark"] .advanced-color-control-logo-left svg {
|
|
filter:
|
|
drop-shadow(0 0 16px color-mix(in oklch, var(--glow-primary), transparent 40%))
|
|
drop-shadow(0 0 32px color-mix(in oklch, var(--glow-secondary), transparent 50%));
|
|
}
|
|
|
|
[data-theme="light"] .advanced-color-control-logo-left svg {
|
|
filter:
|
|
drop-shadow(0 0 8px color-mix(in oklch, var(--glow-primary), transparent 80%))
|
|
drop-shadow(0 0 16px color-mix(in oklch, var(--glow-secondary), transparent 90%));
|
|
}
|
|
|
|
.advanced-color-control-logo-left:hover svg {
|
|
transform: scale(1.04);
|
|
filter:
|
|
drop-shadow(0 0 18px color-mix(in oklch, var(--glow-primary), transparent 50%))
|
|
drop-shadow(0 0 35px color-mix(in oklch, var(--glow-secondary), transparent 60%));
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.preset-colors-grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 6px;
|
|
}
|
|
|
|
.preset-color-btn {
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
|
|
.preset-color-circle {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.preset-colors-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.advanced-color-controls-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.advanced-color-control-modal-content {
|
|
padding: 20px;
|
|
}
|
|
|
|
.advanced-color-control-buttons {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.music-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1050;
|
|
display: none;
|
|
border: var(--glass-border);
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: var(--shadow-inset);
|
|
}
|
|
|
|
.music-modal.active {
|
|
display: flex;
|
|
}
|
|
|
|
.modal-overlay {
|
|
display: none;
|
|
}
|
|
|
|
.music-modal-content {
|
|
background-color: var(--bg-container);
|
|
border-radius: var(--radius);
|
|
width: 90%;
|
|
max-width: 1300px;
|
|
height: 70%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0 10px 30px var(--shadow-color);
|
|
overflow: hidden;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 14px 22px;
|
|
background: var(--header-bg);
|
|
gap: 16px;
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24px;
|
|
flex: 1;
|
|
}
|
|
|
|
.header-sections {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.section-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
cursor: default;
|
|
color: var(--text-secondary);
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
transition: all var(--transition-speed) ease;
|
|
}
|
|
|
|
.section-label.active {
|
|
color: var(--text-primary);
|
|
background: var(--accent-color);
|
|
}
|
|
|
|
.playlist-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px 16px;
|
|
background: var(--header-bg);
|
|
}
|
|
|
|
.playlist-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 0;
|
|
}
|
|
|
|
.lyrics-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
padding: 8px 16px;
|
|
margin-top: 15px !important;
|
|
}
|
|
|
|
.modal-title {
|
|
margin: 0;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 1.3rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.modal-body {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.music-layout {
|
|
display: flex;
|
|
height: calc(100% - 60px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.playlist-section,
|
|
.lyrics-section {
|
|
height: 100%;
|
|
}
|
|
|
|
.playlist-section {
|
|
width: 25%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: var(--bg-container);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.section-header h6 {
|
|
margin: 0;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.playlist-controls, .lyrics-controls {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.playlist-container {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: 0;
|
|
background-color: var(--bg-primary);
|
|
}
|
|
|
|
.playlist {
|
|
counter-reset: list-item;
|
|
}
|
|
|
|
.playlist-item {
|
|
cursor: pointer;
|
|
transition: background-color var(--transition-speed), transform 0.2s;
|
|
padding: 1rem 1.5rem;
|
|
color: var(--text-primary);
|
|
background-color: var(--card-bg);
|
|
border: var(--border-strong);
|
|
border-left: 3px solid var(--border-color);
|
|
margin-bottom: 4px;
|
|
border-radius: var(--radius-small);
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
padding-left: 3.5rem;
|
|
min-height: 3rem;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.playlist-item::before {
|
|
content: counter(list-item);
|
|
counter-increment: list-item;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 30px;
|
|
height: 30px;
|
|
background: linear-gradient( 135deg, oklch(60% 0.3 270), oklch(65% 0.35 280), oklch(70% 0.3 290) );
|
|
border-radius: 50%;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--color-white-strong);
|
|
opacity: 0.8;
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: 1;
|
|
transition: all var(--transition-speed);
|
|
}
|
|
|
|
.playlist-item.active::before {
|
|
background:var(--color-pink) !important;
|
|
box-shadow: var(--glow-shadow-default);
|
|
color: var(--color-white-strong);
|
|
opacity: 1;
|
|
}
|
|
|
|
.playlist-item.paused::before {
|
|
background: var(--color-red) !important;
|
|
color: var(--color-white-strong);
|
|
}
|
|
|
|
.playlist-item:hover::before {
|
|
background: var(--color-cyan) !important;
|
|
color: var(--color-white-strong);
|
|
transform: translateY(-50%) scale(1.1);
|
|
opacity: 1;
|
|
}
|
|
|
|
.playlist-item:hover {
|
|
background-color: var(--accent-tertiary) !important;
|
|
color: var(--color-white-strong);
|
|
box-shadow: var(--item-hover-shadow);
|
|
transform: translateX(5px) scale(1.02);
|
|
border-color: var(--accent-tertiary);
|
|
}
|
|
|
|
.playlist-item.active {
|
|
background: var(--color-blue);
|
|
color: var(--color-white-strong);
|
|
border-color: var(--color-blue);
|
|
z-index: 2;
|
|
}
|
|
|
|
.playlist-item-thumb {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 6px;
|
|
object-fit: cover;
|
|
background-color: var(--card-bg);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.playlist-item-info {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
}
|
|
|
|
.playlist-item-title {
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-bottom: 4px;
|
|
font-size: 1.1em;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.playlist-item-artist {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.delete-item {
|
|
opacity: 0.6;
|
|
transition: opacity var(--transition-speed);
|
|
color: var(--text-primary);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.delete-item:hover {
|
|
opacity: 1;
|
|
background-color: var(--accent-color);
|
|
}
|
|
|
|
.text-truncate {
|
|
display: inline-block;
|
|
width: 100%;
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
word-break: break-word;
|
|
font-size: 1.1em;
|
|
line-height: 1.4;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.text-muted {
|
|
color: var(--text-secondary);
|
|
font-size: 1.2em;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.lyrics-section {
|
|
width: 75%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
background-color: var(--card-bg);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.lyrics-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
background-color: var(--bg-primary);
|
|
}
|
|
|
|
.current-song {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
font-size: 2em;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
text-shadow:
|
|
1px 1px 0 oklch(20% 0 0 / 0.6),
|
|
2px 2px 1px oklch(20% 0 0 / 0.4),
|
|
3px 3px 2px oklch(20% 0 0 / 0.3);
|
|
}
|
|
|
|
.visualizer-container {
|
|
position: relative;
|
|
height: 180px;
|
|
min-height: 60px;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
transition: all var(--transition-speed) ease;
|
|
background-color: var(--bg-primary);
|
|
}
|
|
|
|
#audioVisualizer {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.player-controls {
|
|
background: var(--header-bg);
|
|
border-top: var(--border-light);
|
|
padding: 16px 24px;
|
|
}
|
|
|
|
.control-section {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.left-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 30px;
|
|
}
|
|
|
|
.playback-controls {
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: center;
|
|
}
|
|
|
|
.artist-image-container {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.artist-image {
|
|
width: 45px;
|
|
height: 45px;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
|
border: 2px solid rgba(255,255,255,0.1);
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.artist-image:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.artist-image .default-avatar {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.artist-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.artist-image.loading img {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.artist-image.loading::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,0.3);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.lyrics-section.expanded {
|
|
width: 100%;
|
|
}
|
|
|
|
.playlist-section.hidden,
|
|
.lyrics-title.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.lyrics-section.with-background .lyrics-content {
|
|
background-position: 50% 50%;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.lyrics-content .bg-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.lyrics-controls {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translate(-100%, -50%);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 30px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
z-index: 10;
|
|
transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
|
|
visibility 0.5s cubic-bezier(0.4, 0, 0.2, 1),
|
|
transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.lyrics-section:hover .lyrics-controls {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translate(0, -50%);
|
|
}
|
|
|
|
.lyrics-download-btn,
|
|
.lyrics-color-btn,
|
|
.image-source-btn,
|
|
.lyrics-source-btn,
|
|
.lyrics-speed-btn,
|
|
.bg-toggle {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
background: var(--header-bg);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
color: var(--text-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
[data-theme="dark"] .advanced-color-contrast-badge,
|
|
[data-theme="dark"] .advanced-color-control-reset-btn,
|
|
[data-theme="dark"] .advanced-color-control-save-btn,
|
|
[data-theme="dark"] .lyrics-download-btn,
|
|
[data-theme="dark"] .control-btn,
|
|
[data-theme="dark"] .lyrics-color-btn,
|
|
[data-theme="dark"] .image-source-btn,
|
|
[data-theme="dark"] .lyrics-source-btn,
|
|
[data-theme="dark"] .lyrics-speed-btn,
|
|
[data-theme="dark"] .bg-toggle {
|
|
border: var(--glass-border);
|
|
box-shadow: var(--border-glow);
|
|
}
|
|
|
|
.lyrics-download-btn:hover,
|
|
.lyrics-color-btn:hover,
|
|
.image-source-btn:hover,
|
|
.lyrics-source-btn:hover,
|
|
.lyrics-speed-btn:hover,
|
|
.bg-toggle:hover {
|
|
transform: scale(1.1);
|
|
background: var(--accent-tertiary) !important;
|
|
color: var(--color-white-strong);
|
|
animation: var(--breath-animation);
|
|
}
|
|
|
|
.image-source-btn i,
|
|
.lyrics-source-btn i,
|
|
.lyrics-speed-btn i,
|
|
.bg-toggle i {
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
.bg-toggle.active {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
.lyrics-download-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.download-info {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.download-song-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: var(--text-color);
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.download-song-artist {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.download-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.download-option-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
color: var(--text-color);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.download-option-btn:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-color: var(--accent-color);
|
|
}
|
|
|
|
.download-option-btn.active {
|
|
background: var(--accent-color);
|
|
border-color: var(--accent-color);
|
|
color: white;
|
|
}
|
|
|
|
.download-option-btn i {
|
|
width: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.download-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.download-cancel, .download-confirm {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.download-cancel {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.download-cancel:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.download-confirm {
|
|
background: var(--accent-color);
|
|
color: white;
|
|
}
|
|
|
|
.download-confirm:disabled {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: var(--text-secondary);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.download-confirm:not(:disabled):hover {
|
|
background: var(--accent-hover);
|
|
}
|
|
|
|
.download-panel,
|
|
.color-panel,
|
|
.image-source-panel,
|
|
.source-panel,
|
|
.speed-panel {
|
|
position: fixed;
|
|
background: var(--bg-container);
|
|
border: var(--border-light);
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
|
z-index: 100000;
|
|
min-width: 350px;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.color-options {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.color-option {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 8px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.color-option:hover {
|
|
background: var(--accent-tertiary);
|
|
}
|
|
|
|
.color-option.selected {
|
|
border-color: var(--accent-primary);
|
|
background: var(--accent-secondary);
|
|
}
|
|
|
|
.color-preview {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
margin-bottom: 4px;
|
|
border: var(--border-light);
|
|
}
|
|
|
|
.color-option span {
|
|
font-size: 12px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.color-option.selected span,
|
|
.color-option:hover span {
|
|
color: white;
|
|
}
|
|
|
|
.speed-title {
|
|
font-size: 14px;
|
|
color: var(--accent-color);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.speed-value {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: var(--accent-color);
|
|
text-align: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.speed-controls {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.speed-btn {
|
|
padding: 4px 8px;
|
|
border: 1px solid var(--border-color);
|
|
background: var(--bg-body);
|
|
color: var(--text-primary);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.speed-btn:hover {
|
|
background: var(--accent-color);
|
|
color: white;
|
|
}
|
|
|
|
.speed-btn.reset {
|
|
background: var(--color-red);
|
|
color: white;
|
|
flex-basis: 100%;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.image-source-panel .source-title,
|
|
.source-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: var(--accent-color);
|
|
margin-bottom: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.image-source-panel .source-options ,
|
|
.source-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.image-source-panel .source-option,
|
|
.source-option {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
padding: 6px;
|
|
border-radius: 4px;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.image-source-panel .source-option:hover,
|
|
.source-option:hover {
|
|
background: var(--item-hover-bg);
|
|
color: white;
|
|
}
|
|
|
|
.image-source-panel .source-option input[type="radio"] ,
|
|
.source-option input[type="radio"] {
|
|
margin: 0;
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.image-source-panel .source-actions,
|
|
.source-actions {
|
|
text-align: center;
|
|
}
|
|
|
|
.image-source-panel .source-confirm ,
|
|
.source-confirm {
|
|
padding: 6px 16px;
|
|
background: var(--accent-color);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.image-source-panel .source-confirm:hover,
|
|
.source-confirm:hover {
|
|
background: var(--btn-primary-hover);
|
|
}
|
|
|
|
.info-display {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
margin: 0;
|
|
}
|
|
|
|
.time-display {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
white-space: nowrap;
|
|
min-width: 90px;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.music-progress-container {
|
|
width: 200px;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.music-progress {
|
|
height: 8px;
|
|
background-color: var(--color-white);
|
|
border-radius: 2px;
|
|
overflow: visible;
|
|
}
|
|
|
|
.music-progress-bar {
|
|
height: 100%;
|
|
background-color: var(--accent-color);
|
|
border-radius: 2px;
|
|
width: 0%;
|
|
transition: width 0.1s;
|
|
position: relative;
|
|
}
|
|
|
|
.music-progress-bar::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background-color: var(--accent-color);
|
|
border: 2px solid var(--color-white);
|
|
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.music-progress-bar[style*="width: 0%"]::after,
|
|
.music-progress-bar[style*="width:0%"]::after {
|
|
display: none;
|
|
}
|
|
|
|
.music-progress-container:hover .music-progress-bar::after {
|
|
transform: translateY(-50%) scale(1.2);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.control-btn {
|
|
background-color: var(--bg-body);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
color: var(--text-primary);
|
|
width: 35px;
|
|
height: 35px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all var(--transition-speed);
|
|
position: relative;
|
|
}
|
|
|
|
.control-btn:hover {
|
|
background-color: var(--item-hover-bg);
|
|
color: var(--color-white);
|
|
animation: var(--breath-animation);
|
|
}
|
|
|
|
.play-pause-btn {
|
|
background-color: var(--accent-color);
|
|
width: 45px;
|
|
height: 45px;
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.play-pause-btn:hover {
|
|
background-color: var(--btn-primary-hover);
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 16px 24px;
|
|
background: var(--header-bg);
|
|
border-top: var(--border-light);
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.cancel-btn {
|
|
background-color: var(--bg-quaternary);
|
|
border: var(--border-light);
|
|
color: var(--text-primary);
|
|
padding: 8px 16px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: background-color var(--transition-speed);
|
|
}
|
|
|
|
.cancel-btn:hover {
|
|
background-color: var(--item-hover-bg);
|
|
}
|
|
|
|
.volume-control {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.volume-panel-container {
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 48px;
|
|
margin-bottom: 10px;
|
|
background-color: var(--card-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 0.5rem;
|
|
padding: 15px 10px;
|
|
width: 40px;
|
|
min-height: 150px;
|
|
box-shadow: 0 4px 10px var(--border-color);
|
|
z-index: 1000;
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.volume-slider-wrapper {
|
|
position: relative;
|
|
height: 100px;
|
|
width: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
}
|
|
|
|
#volumeSlider {
|
|
width: 100px;
|
|
height: 6px;
|
|
transform-origin: center;
|
|
transform: rotate(-90deg);
|
|
position: relative;
|
|
background: linear-gradient(to right,
|
|
oklch(54.9% 0.245 293.6) 0%,
|
|
oklch(54.9% 0.245 293.6) var(--volume, 100%),
|
|
oklch(100% 0 0 / 20%) var(--volume, 100%),
|
|
oklch(100% 0 0 / 20%) 100%);
|
|
border-radius: 3px;
|
|
outline: none;
|
|
-webkit-appearance: none;
|
|
accent-color: var(--accent-color);
|
|
cursor: pointer;
|
|
}
|
|
|
|
#volumeSlider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background: oklch(54.9% 0.245 293.6);
|
|
cursor: pointer;
|
|
border: 2px solid oklch(100% 0 0);
|
|
box-shadow: 0 2px 4px oklch(0% 0 0 / 30%);
|
|
}
|
|
|
|
#volumeSlider::-moz-range-thumb {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background: oklch(54.9% 0.245 293.6);
|
|
cursor: pointer;
|
|
border: 2px solid oklch(100% 0 0);
|
|
box-shadow: 0 2px 4px oklch(0% 0 0 / 30%);
|
|
}
|
|
|
|
.volume-percentage {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--accent-color);
|
|
background: oklch(54.9% 0.245 293.6 / 0.15);
|
|
padding: 3px 8px;
|
|
border-radius: 12px;
|
|
width: 34px;
|
|
text-align: center;
|
|
margin-top: 5px;
|
|
box-sizing: border-box;
|
|
border: 1px solid oklch(54.9% 0.245 293.6 / 0.3);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 20px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.header-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.fullscreen-btn.active {
|
|
background-color: var(--accent-color);
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.music-modal.fullscreen .music-modal-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.music-modal.fullscreen .header-controls {
|
|
position: relative;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.playlist-container::-webkit-scrollbar,
|
|
.lyrics-container::-webkit-scrollbar {
|
|
width: 8px;
|
|
background: transparent;
|
|
}
|
|
|
|
.playlist-container::-webkit-scrollbar-track,
|
|
.lyrics-container::-webkit-scrollbar-track {
|
|
background: var(--header-bg);
|
|
border-radius: 4px;
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.playlist-container::-webkit-scrollbar-thumb,
|
|
.lyrics-container::-webkit-scrollbar-thumb {
|
|
background: var(--accent-color);
|
|
border-radius: 4px;
|
|
transition: all var(--transition-speed) ease;
|
|
}
|
|
|
|
.playlist-container::-webkit-scrollbar-thumb:hover,
|
|
.lyrics-container::-webkit-scrollbar-thumb:hover {
|
|
background: var(--accent-color);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.lyrics-content.has-background-image .lyrics-container {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.lyrics-content.has-background-image .lyrics-container::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.playlist-container,
|
|
.lyrics-container {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--accent-color) var(--header-bg);
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
.visualizer-container::-webkit-scrollbar {
|
|
width: 6px;
|
|
background: transparent;
|
|
}
|
|
|
|
.visualizer-container::-webkit-scrollbar-track {
|
|
background: var(--header-bg);
|
|
border-radius: 3px;
|
|
margin: 2px 0;
|
|
}
|
|
|
|
.visualizer-container::-webkit-scrollbar-thumb {
|
|
background: var(--accent-color);
|
|
border-radius: 3px;
|
|
transition: all var(--transition-speed) ease;
|
|
}
|
|
|
|
.visualizer-container::-webkit-scrollbar-thumb:hover {
|
|
background: var(--accent-color);
|
|
}
|
|
|
|
.visualizer-container {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--accent-color) var(--header-bg);
|
|
}
|
|
|
|
.playlist-container,
|
|
.lyrics-container,
|
|
.visualizer-container {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.playlist-container::-webkit-scrollbar,
|
|
.lyrics-container::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
.playlist-container,
|
|
.lyrics-container {
|
|
scrollbar-width: thin;
|
|
}
|
|
}
|
|
|
|
.control-btn i,
|
|
.header-btn i,
|
|
.playlist-controls i,
|
|
.lyrics-controls i,
|
|
.playback-controls i,
|
|
.volume-control i {
|
|
font-size: 1.2em;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.play-pause-btn i {
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
.volume-control i {
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
.control-btn,
|
|
.header-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.bi::before,
|
|
.fa::before {
|
|
line-height: 1;
|
|
}
|
|
|
|
.playlist-controls .control-btn i,
|
|
.lyrics-controls .control-btn i {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
#speedToggle {
|
|
min-width: 50px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
border: var(--border-light);
|
|
background-color: var(--bg-body);
|
|
}
|
|
|
|
#speedToggle:hover {
|
|
background-color: var(--item-hover-bg);
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.lyrics-container {
|
|
flex: none;
|
|
height: 80%;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
transition: all var(--transition-speed) ease;
|
|
background-color: var(--bg-primary);
|
|
}
|
|
|
|
.lyric-line {
|
|
opacity: 1;
|
|
color: var(--text-primary);
|
|
font-size: 1.4rem;
|
|
font-weight: 500;
|
|
transition: all 0.4s ease;
|
|
margin: 12px 0;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
line-height: 1.6;
|
|
padding: 8px 16px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.lyric-line.highlight {
|
|
color: var(--text-primary);
|
|
font-size: 1.8rem;
|
|
font-weight: 700;
|
|
background: color-mix(in oklch, var(--accent-color), transparent 92%);
|
|
border: var(--border-strong);
|
|
box-shadow: var(--breathing-glow);
|
|
transform: scale(1.02);
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.lyric-line, .lyric-line.plain-line {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.lyric-line .char {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
margin: 0 4px;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
font-weight: inherit;
|
|
color: var(--text-primary);
|
|
opacity: 0.9;
|
|
text-shadow: var(--text-shadow);
|
|
}
|
|
|
|
.lyrics-content.has-background-image .lyric-line.plain-line,
|
|
.lyrics-content.has-background-image .lyric-line .char {
|
|
color: oklch(var(--lyrics-lightness, 85%) var(--lyrics-chroma, 0.18) var(--lyrics-hue, 0));
|
|
opacity: 0.9;
|
|
text-shadow:
|
|
1px 1px 0 oklch(20% 0 0 / 0.6),
|
|
2px 2px 1px oklch(20% 0 0 / 0.4),
|
|
3px 3px 2px oklch(20% 0 0 / 0.3);
|
|
}
|
|
|
|
.lyrics-content.has-background-image .lyric-line .char.played {
|
|
color: oklch(var(--l) var(--c) 0) !important;
|
|
opacity: 1;
|
|
transform: scale(0.95);
|
|
filter: grayscale(0.3);
|
|
text-shadow:
|
|
1px 1px 0 oklch(20% 0 0 / 0.6),
|
|
2px 2px 1px oklch(20% 0 0 / 0.4),
|
|
3px 3px 2px oklch(20% 0 0 / 0.3);
|
|
}
|
|
|
|
.lyrics-content.has-background-image .lyric-line .char.active,
|
|
.lyrics-content.has-background-image .lyric-line .char.played,
|
|
.lyrics-content.has-background-image .lyric-line.plain-line.highlight,
|
|
.lyrics-content.has-background-image .lyric-line.plain-line.active {
|
|
color: oklch(95% 0.2 var(--lyrics-hue, 0));
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
.lyrics-content.has-background-image .lyric-line.highlight .char.active {
|
|
opacity: 1;
|
|
color: transparent;
|
|
background: linear-gradient(135deg,
|
|
oklch(calc(var(--l) + 15%) calc(var(--c) + 0.3) calc(var(--base-hue) + 0)) 0%,
|
|
oklch(calc(var(--l) + 20%) calc(var(--c) + 0.4) calc(var(--base-hue) + 60)) 25%,
|
|
oklch(calc(var(--l) + 25%) calc(var(--c) + 0.35) calc(var(--base-hue) + 120)) 50%,
|
|
oklch(calc(var(--l) + 20%) calc(var(--c) + 0.4) calc(var(--base-hue) + 180)) 75%,
|
|
oklch(calc(var(--l) + 15%) calc(var(--c) + 0.3) calc(var(--base-hue) + 240)) 100%);
|
|
background-size: 300% 300%;
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: shimmer 2s ease-in-out infinite;
|
|
position: relative;
|
|
z-index: 3;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.lyrics-content.has-background-image .lyric-line.highlight .char.active::before {
|
|
content: attr(data-char);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
color: transparent;
|
|
text-shadow:
|
|
1px 1px 0 oklch(20% 0 0 / 0.6),
|
|
2px 2px 1px oklch(20% 0 0 / 0.4),
|
|
3px 3px 2px oklch(20% 0 0 / 0.3);
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.lyrics-content.has-background-image .lyric-line.highlight {
|
|
color: var(--text-primary);
|
|
font-size: 1.8rem;
|
|
font-weight: 700;
|
|
transform: scale(1.02);
|
|
position: relative;
|
|
z-index: 2;
|
|
background: transparent !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.lyric-line .char.played {
|
|
color: oklch(var(--l) var(--c) 0) !important;
|
|
opacity: 1;
|
|
transform: scale(0.95);
|
|
filter: grayscale(0.3);
|
|
}
|
|
|
|
.lyric-line.highlight .char.active.lang-zh-production {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.lyric-line.highlight .char.active.lang-other-production {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.lyric-line.highlight .char.active.lang-mix-production {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.lyric-line.highlight .char.active.lang-zh {
|
|
transform: scale(1.4);
|
|
}
|
|
|
|
.lyric-line.highlight .char.active.lang-other {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.lyric-line.highlight .char.active.lang-mix {
|
|
transform: scale(1.3);
|
|
}
|
|
|
|
.lyric-line.highlight .char.active {
|
|
opacity: 1;
|
|
color: transparent;
|
|
background: linear-gradient(135deg,
|
|
oklch(calc(var(--l) + 15%) calc(var(--c) + 0.3) calc(var(--base-hue) + 0)) 0%,
|
|
oklch(calc(var(--l) + 20%) calc(var(--c) + 0.4) calc(var(--base-hue) + 60)) 25%,
|
|
oklch(calc(var(--l) + 25%) calc(var(--c) + 0.35) calc(var(--base-hue) + 120)) 50%,
|
|
oklch(calc(var(--l) + 20%) calc(var(--c) + 0.4) calc(var(--base-hue) + 180)) 75%,
|
|
oklch(calc(var(--l) + 15%) calc(var(--c) + 0.3) calc(var(--base-hue) + 240)) 100%);
|
|
background-size: 300% 300%;
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: shimmer 2s ease-in-out infinite;
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
|
|
.char.space {
|
|
display: inline;
|
|
min-width: 0.6em;
|
|
margin: 0 2px;
|
|
}
|
|
|
|
.lyric-line .word {
|
|
display: inline-block;
|
|
margin: 0 8px;
|
|
}
|
|
|
|
.lyric-line .word .char {
|
|
margin: 0 2px;
|
|
display: inline;
|
|
}
|
|
|
|
.lyric-line.highlight .word.active {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0%, 100% {
|
|
background-position: 0% 50%;
|
|
filter: hue-rotate(0deg);
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
filter: hue-rotate(20deg);
|
|
}
|
|
}
|
|
|
|
@keyframes textPop {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px) scale(0.9);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
.lyric-line.enter-active {
|
|
animation: textPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
#no-lyrics {
|
|
text-align: center;
|
|
color: var(--text-primary);
|
|
padding: 3rem 2rem;
|
|
font-size: 1.6rem;
|
|
font-weight: 300;
|
|
opacity: 0.8;
|
|
font-style: italic;
|
|
}
|
|
|
|
.lyrics-content.has-background-image #no-lyrics {
|
|
color: var(--color-white-strong);
|
|
text-shadow: var(--text-shadow);
|
|
}
|
|
|
|
.lyrics-loading {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 200px;
|
|
color: var(--text-primary);
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.lyrics-content.has-background-image .lyrics-loading {
|
|
color: var(--color-white-strong);
|
|
text-shadow: var(--text-shadow);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.lyric-line {
|
|
font-size: 1.2rem;
|
|
margin: 8px 0;
|
|
padding: 6px 12px;
|
|
}
|
|
|
|
.lyric-line.highlight {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.lyric-line.highlight .char.active {
|
|
transform: scale(1.3);
|
|
}
|
|
|
|
.music-modal-content {
|
|
width: 95%;
|
|
height: 90%;
|
|
}
|
|
|
|
.music-layout {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.playlist-section, .lyrics-section {
|
|
width: 100%;
|
|
}
|
|
|
|
.playlist-section {
|
|
height: 40%;
|
|
}
|
|
|
|
.lyrics-section {
|
|
height: 60%;
|
|
}
|
|
|
|
.control-section {
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.info-display {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.music-progress-container {
|
|
flex: 1;
|
|
margin: 0 16px;
|
|
}
|
|
|
|
.volume-slider-container {
|
|
min-width: 80px;
|
|
}
|
|
|
|
.volume-slider {
|
|
width: 60px;
|
|
}
|
|
|
|
.left-controls {
|
|
gap: 8px;
|
|
}
|
|
}
|
|
|
|
.overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 10000;
|
|
}
|
|
|
|
#floatingLyrics {
|
|
position: fixed;
|
|
top: 1%;
|
|
left: 4.5%;
|
|
background: var(--bg-container);
|
|
padding: 15px 10px;
|
|
border-radius: 20px;
|
|
backdrop-filter: var(--glass-blur);
|
|
display: none;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
cursor: grab;
|
|
transition: opacity 0.3s ease;
|
|
writing-mode: vertical-rl;
|
|
text-orientation: mixed;
|
|
line-height: 2;
|
|
z-index: 9999;
|
|
flex-direction: column;
|
|
gap: 0.5em;
|
|
width: 230px;
|
|
min-height: 500px;
|
|
resize: none;
|
|
overflow: auto;
|
|
user-select: none;
|
|
border: 1px solid var(--border-color, #999);
|
|
}
|
|
|
|
@keyframes float {
|
|
from {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
to {
|
|
transform: translateY(-10px);
|
|
}
|
|
}
|
|
|
|
@keyframes breath {
|
|
0%,
|
|
100% {
|
|
--glow-primary: oklch(85% 0.32 var(--base-hue));
|
|
box-shadow: 0 0 10px 2px color-mix(in oklch, var(--glow-primary), transparent 50%),
|
|
inset 0 -10px 20px color-mix(in oklch, var(--glow-primary), transparent 70%);
|
|
}
|
|
|
|
50% {
|
|
--glow-primary: oklch(85% 0.45 240deg);
|
|
box-shadow: 0 0 20px 4px color-mix(in oklch, oklch(85% 0.45 240deg), transparent 30%),
|
|
inset 0 -15px 30px color-mix(in oklch, oklch(85% 0.45 240deg), transparent 50%);
|
|
}
|
|
}
|
|
|
|
[data-theme="dark"] #floatingLyrics {
|
|
--glow-primary: oklch(88% 0.35 var(--base-hue));
|
|
--glow-secondary: oklch(85% 0.3 calc(var(--base-hue) + 15));
|
|
border: 1px solid color-mix(in oklch, var(--glow-primary), transparent 10%);
|
|
box-shadow: 0 0 12px 2px color-mix(in oklch, var(--glow-primary), transparent 40%),
|
|
inset 0 -12px 24px color-mix(in oklch, var(--glow-primary), transparent 60%);
|
|
animation: float 3s ease-in-out infinite alternate,
|
|
breath 4s ease-in-out infinite;
|
|
}
|
|
|
|
[data-theme="dark"] #floatingLyrics:hover {
|
|
animation-play-state: paused;
|
|
--glow-primary: oklch(92% 0.38 var(--base-hue));
|
|
box-shadow: 0 0 20px 4px color-mix(in oklch, var(--glow-primary), transparent 30%),
|
|
inset 0 -15px 30px color-mix(in oklch, var(--glow-primary), transparent 50%);
|
|
}
|
|
|
|
#floatingLyrics.visible {
|
|
display: flex;
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
cursor: move;
|
|
}
|
|
|
|
#floatingLyrics #floatingCurrentSong.vertical-title {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: var(--accent-color);
|
|
writing-mode: vertical-rl;
|
|
white-space: nowrap;
|
|
padding: 0.5em 0;
|
|
margin-right: 0.5em;
|
|
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3),
|
|
0px -1px 2px rgba(255, 255, 255, 0.4);
|
|
|
|
}
|
|
|
|
#floatingLyrics .vertical-lyrics {
|
|
writing-mode: vertical-rl;
|
|
text-combine-upright: all;
|
|
overflow-x: hidden;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
#floatingLyrics .char {
|
|
font-size: 1.6rem;
|
|
transition: transform 0.3s ease;
|
|
display: inline-block;
|
|
position: relative;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.floating-controls {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 0.8em;
|
|
margin-right: 0.8em;
|
|
order: -1;
|
|
}
|
|
|
|
.ctrl-btn {
|
|
background: var(--bg-body);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
border-radius: 50%;
|
|
width: 36px;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-primary);
|
|
transition: all 0.3s ease;
|
|
backdrop-filter: blur(5px);
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.ctrl-btn:hover {
|
|
background: var(--accent-color);
|
|
color: var(--color-white-strong);
|
|
transform: scale(1.1);
|
|
transform-origin: center center;
|
|
}
|
|
|
|
.ctrl-btn i {
|
|
font-size: 1.6rem;
|
|
display: block;
|
|
vertical-align: middle;
|
|
line-height: 1;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.ctrl-btn.clicked {
|
|
transform: scale(0.9);
|
|
background: rgba(50, 205, 50, 0.5);
|
|
}
|
|
|
|
#currentSong.vertical-title {
|
|
margin-top: 0.5em;
|
|
border-right: none;
|
|
padding-right: 0;
|
|
padding-bottom: 0.8em;
|
|
margin-right: 0;
|
|
writing-mode: horizontal-tb;
|
|
}
|
|
|
|
.vertical-lyrics {
|
|
margin-top: 0.5em;
|
|
overflow-x: hidden;
|
|
max-width: 100%;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.char {
|
|
transition: all 0.3s ease;
|
|
display: inline-block;
|
|
margin-right: 2px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
#floatingLyrics .char.active {
|
|
color: var(--accent-color);
|
|
animation: bounce-scale 0.6s ease-out;
|
|
transform: scale(1.3);
|
|
position: relative;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
@keyframes bounce-scale {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.3);
|
|
}
|
|
|
|
70% {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.char.played {
|
|
|
|
transform: scale(1) !important;
|
|
}
|
|
|
|
.char.active {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.char[data-start]+.char[data-start] {
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.lyrics-loading {
|
|
position: relative;
|
|
min-height: 100px;
|
|
}
|
|
|
|
#noLyricsFloating {
|
|
width: min-content;
|
|
max-width: 4em;
|
|
text-align: center;
|
|
color: var(--text-primary) !important;
|
|
line-height: 1.2;
|
|
font-size: 1.5rem;
|
|
padding: 10px 5px !important;
|
|
letter-spacing: 0.2em;
|
|
writing-mode: vertical-rl;
|
|
text-orientation: upright;
|
|
}
|
|
|
|
@keyframes glow {
|
|
0% {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.heart {
|
|
position: absolute;
|
|
font-size: 2rem;
|
|
color: #ff69b4;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
z-index: 9999;
|
|
animation: heartAnimation 1s ease-in-out forwards;
|
|
}
|
|
|
|
@keyframes heartAnimation {
|
|
0% {
|
|
transform: scale(1) translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.5) translateY(-50px);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: scale(0) translateY(-100px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.uk-modal-close-default,
|
|
#fullscreen-toggle {
|
|
top: 20px !important;
|
|
right: 20px !important;
|
|
width: 34px !important;
|
|
height: 34px !important;
|
|
background: color-mix(in oklch, var(--bg-container), transparent 50%) !important;
|
|
backdrop-filter: var(--glass-blur) !important;
|
|
-webkit-backdrop-filter: var(--glass-blur) !important;
|
|
border: var(--border-strong) !important;
|
|
border-radius: 50% !important;
|
|
color: var(--text-primary) !important;
|
|
transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
box-shadow: var(--glow-shadow-default) !important;
|
|
}
|
|
|
|
.uk-modal-close-default:hover,
|
|
#fullscreen-toggle:hover {
|
|
background: color-mix(in oklch, var(--accent-color), transparent 85%) !important;
|
|
border-color: var(--glow-primary) !important;
|
|
color: var(--btn-danger-bg) !important;
|
|
transform: scale(1.15) rotate(90deg);
|
|
box-shadow: var(--glow-shadow-hover);
|
|
animation: none;
|
|
}
|
|
|
|
[data-theme="dark"] #control-panel-modal,
|
|
.uk-modal-close-default:not(:hover),
|
|
#fullscreen-toggle:not(:hover) {
|
|
animation: var(--breathing-animation);
|
|
}
|
|
|
|
[data-theme="dark"] .uk-modal-close-default,
|
|
[data-theme="dark"] #fullscreen-toggle {
|
|
--glow-intensity: 0.8;
|
|
}
|
|
|
|
[data-theme="light"] .uk-modal-close-default,
|
|
[data-theme="light"] #fullscreen-toggle {
|
|
animation: none !important;
|
|
}
|
|
|
|
.uk-modal-close-default:active,
|
|
#fullscreen-toggle:active {
|
|
transform: scale(0.95) rotate(90deg);
|
|
transition-duration: 0.1s;
|
|
}
|
|
|
|
.uk-modal-title .uk-icon {
|
|
position: relative;
|
|
top: -4px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.toast-message {
|
|
position: fixed;
|
|
left: 20px;
|
|
padding: 12px 16px;
|
|
background: var(--sand-bg);
|
|
color: white;
|
|
border-radius: 8px;
|
|
z-index: 200000;
|
|
width: 350px;
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
backdrop-filter: blur(2px);
|
|
transform: translateY(0);
|
|
opacity: 0;
|
|
animation: scrollUp 12s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
|
display: inline-block;
|
|
margin-bottom: 10px;
|
|
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
|
|
@keyframes scrollUp {
|
|
0% {
|
|
top: 90%;
|
|
opacity: 0;
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
}
|
|
|
|
80% {
|
|
top: 50%;
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
top: 45%;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.toast-message.exiting {
|
|
animation: fadeOut 0.3s forwards;
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
to {
|
|
opacity: 0;
|
|
transform: translateY(-20px) scale(0.95);
|
|
}
|
|
}
|
|
|
|
.toast-message-content {
|
|
padding: 6px 20px 6px 8px;
|
|
color: white;
|
|
}
|
|
|
|
.toast-close-btn {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 10px;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: none;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.2s, background 0.2s;
|
|
}
|
|
|
|
.toast-close-btn::before,
|
|
.toast-close-btn::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 12px;
|
|
height: 2px;
|
|
background: white;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
.toast-close-btn::before {
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
}
|
|
|
|
.toast-close-btn::after {
|
|
transform: translate(-50%, -50%) rotate(-45deg);
|
|
}
|
|
|
|
.weather-close-btn:hover {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.toast-message:hover .toast-close-btn {
|
|
opacity: 0.7;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.toast-message:hover .toast-close-btn:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.toast-message-icon {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 3px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.toast-message.error {
|
|
background: linear-gradient(145deg, #ff4444, #cc0000);
|
|
}
|
|
|
|
.toast-message.warning {
|
|
background: linear-gradient(145deg, #ffc107, #ffab00);
|
|
}
|
|
|
|
.toast-message.info {
|
|
background: linear-gradient(145deg, #2196F3, #1976D2);
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.toast-message {
|
|
width: calc(100% - 20px);
|
|
left: 10px;
|
|
}
|
|
}
|
|
|
|
[data-theme="dark"] .advanced-color-info-label,
|
|
[data-theme="dark"] .preset-colors-title,
|
|
[data-theme="dark"] .advanced-color-control-section-title,
|
|
[data-theme="dark"] .advanced-color-control-modal-title,
|
|
[data-theme="dark"] .advanced-color-control-subtitle {
|
|
position: relative;
|
|
color: color-mix(in oklch, var(--glow-primary), white 20%);
|
|
text-shadow: 0 0 5px color-mix(in oklch, var(--glow-primary), transparent 40%),
|
|
0 0 15px color-mix(in oklch, var(--glow-primary), transparent 70%);
|
|
animation: text-glow-pulse 3s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes text-glow-pulse {
|
|
0% {
|
|
text-shadow: 0 0 5px color-mix(in oklch, var(--glow-primary), transparent 40%),
|
|
0 0 15px color-mix(in oklch, var(--glow-primary), transparent 70%);
|
|
}
|
|
|
|
100% {
|
|
text-shadow: 0 0 10px color-mix(in oklch, var(--glow-primary), transparent 30%),
|
|
0 0 25px color-mix(in oklch, var(--glow-primary), transparent 60%);
|
|
}
|
|
}
|
|
|
|
.custom-tooltip {
|
|
font-family: "NotoColorEmojiFlags";
|
|
position: fixed;
|
|
z-index: 2147483647 !important;
|
|
padding: 6px 12px;
|
|
font-size: 0.8rem;
|
|
line-height: 1.4;
|
|
background-color: color-mix(in oklch, var(--accent-color), transparent 10%);
|
|
color: var(--color-white-strong);
|
|
border-radius: var(--radius-small);
|
|
box-shadow: 0 4px 12px oklch(0% 0 0 / 0.15);
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
transform: translateY(5px);
|
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
backdrop-filter: var(--glass-blur, blur(10px));
|
|
border: var(--glass-border);
|
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.custom-tooltip.active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.custom-tooltip::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
}
|
|
|
|
.custom-tooltip[data-placement="top"]::after {
|
|
bottom: -6px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-width: 6px 6px 0 6px;
|
|
border-color: color-mix(in oklch, var(--accent-color), transparent 10%) transparent transparent transparent;
|
|
}
|
|
|
|
.custom-tooltip[data-placement="bottom"]::after {
|
|
top: -6px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-width: 0 6px 6px 6px;
|
|
border-color: transparent transparent color-mix(in oklch, var(--accent-color), transparent 10%) transparent;
|
|
}
|
|
|
|
[data-theme="dark"] .custom-tooltip {
|
|
background-color: color-mix(in oklch, var(--accent-tertiary), transparent 10%);
|
|
}
|
|
|
|
[data-theme="dark"] .custom-tooltip[data-placement="top"]::after {
|
|
border-color: color-mix(in oklch, var(--accent-tertiary), transparent 10%) transparent transparent transparent;
|
|
}
|
|
|
|
[data-theme="dark"] .custom-tooltip[data-placement="bottom"]::after {
|
|
border-color: transparent transparent color-mix(in oklch, var(--accent-tertiary), transparent 10%) transparent;
|
|
}
|
|
|
|
@keyframes tooltip-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(5px) scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
.custom-tooltip.active {
|
|
animation: tooltip-fade-in 0.2s ease forwards;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.custom-tooltip {
|
|
max-width: min(200px, 80vw);
|
|
word-break: break-word;
|
|
white-space: normal;
|
|
text-align: center;
|
|
padding: 8px 12px;
|
|
font-size: 0.9rem;
|
|
}
|
|
}
|
|
|
|
[data-theme="dark"] .uk-select:not([multiple]):not([size]) {
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16' viewBox='0 0 24 16'%3e%3cpolygon fill='rgba(255, 255, 255, 0.7)' points='12 1 9 6 15 6'/%3e%3cpolygon fill='rgba(255, 255, 255, 0.7)' points='12 13 9 8 15 8'/%3e%3c/svg%3e") !important;
|
|
}
|
|
|
|
[data-theme="dark"] .uk-button:hover {
|
|
border: var(--glass-border);
|
|
box-shadow: var(--border-glow);
|
|
}
|
|
|
|
.zoom-icon {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 1.2rem;
|
|
color: color-mix(in oklch, var(--accent-color), transparent 15%);
|
|
opacity: 0;
|
|
transition: opacity 0.25s ease;
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
}
|
|
|
|
.artist-image:hover .zoom-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
@keyframes uk-scale-up {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.7);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.uk-modal-dialog-scale {
|
|
animation: uk-scale-up 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
|
}
|
|
|
|
div[style*="position: absolute"][style*="z-index: 9999999"] {
|
|
background-color: color-mix(in oklch, var(--card-bg), transparent 15%) !important;
|
|
color: var(--text-primary) !important;
|
|
border: var(--border-light) !important;
|
|
border-radius: var(--radius-mini) !important;
|
|
backdrop-filter: var(--glass-blur) !important;
|
|
-webkit-backdrop-filter: var(--glass-blur) !important;
|
|
}
|
|
|
|
.announcement-banner {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
}
|
|
|
|
.wrapper span {
|
|
position: fixed;
|
|
bottom: -180px;
|
|
width: 50px;
|
|
height: 50px;
|
|
z-index: 9999;
|
|
background-color: var(--accent-color);
|
|
border-radius: var(--radius-mini);
|
|
backdrop-filter: var(--glass-blur-mini);
|
|
-webkit-backdrop-filter: var(--glass-blur-mini);
|
|
box-shadow:
|
|
0 0 50px cyan,
|
|
0 0 100px cyan,
|
|
0 0 150px cyan,
|
|
0 0 200px cyan;
|
|
animation: floating 15s linear infinite;
|
|
}
|
|
|
|
.wrapper span:nth-child(1) {
|
|
left: 60px;
|
|
animation-delay: 0.6s;
|
|
}
|
|
|
|
.wrapper span:nth-child(2) {
|
|
left: 10%;
|
|
width: 60px;
|
|
height: 60px;
|
|
animation-delay: 3s;
|
|
}
|
|
|
|
.wrapper span:nth-child(3) {
|
|
left: 20%;
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
.wrapper span:nth-child(4) {
|
|
left: 30%;
|
|
width: 80px;
|
|
height: 80px;
|
|
animation-delay: 5s;
|
|
}
|
|
|
|
.wrapper span:nth-child(5) {
|
|
left: 40%;
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
.wrapper span:nth-child(6) {
|
|
left: 50%;
|
|
animation-delay: 7s;
|
|
}
|
|
|
|
.wrapper span:nth-child(7) {
|
|
left: 60%;
|
|
width: 100px;
|
|
height: 100px;
|
|
animation-delay: 6s;
|
|
}
|
|
|
|
.wrapper span:nth-child(8) {
|
|
left: 70%;
|
|
animation-delay: 8s;
|
|
}
|
|
|
|
.wrapper span:nth-child(9) {
|
|
left: 80%;
|
|
width: 90px;
|
|
height: 90px;
|
|
animation-delay: 6s;
|
|
}
|
|
|
|
.wrapper span:nth-child(10) {
|
|
left: 90%;
|
|
animation-delay: 4s;
|
|
}
|
|
|
|
@keyframes floating {
|
|
0% {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
90% {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(-1200px) rotate(360deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.node-wrapper .drag-handle {
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.model_btn {
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
width: 40px !important;
|
|
height: 40px !important;
|
|
background: var(--accent-color) !important;
|
|
border-radius: 50% !important;
|
|
cursor: pointer !important;
|
|
position: fixed !important;
|
|
right: 25px !important;
|
|
bottom: 20px !important;
|
|
z-index: 1000 !important;
|
|
transition: all 0.3s ease !important;
|
|
}
|
|
|
|
.model_btn:hover {
|
|
background: var(--accent-tertiary) !important;
|
|
transform: scale(1.1) !important;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
|
|
}
|
|
|
|
.model_btn svg {
|
|
filter: brightness(0) invert(1) !important;
|
|
}
|
|
|
|
.module-settings__btn {
|
|
line-height: 1 !important;
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: var(--bg-container);
|
|
padding: 5px 20px 0 20px !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.modal-title {
|
|
color: var(--accent-color) !important;
|
|
}
|
|
|
|
.module-settings__name,
|
|
.module-settings__desc {
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.module-settings .module-settings__header {
|
|
background-image: none !important;
|
|
background: color-mix(in oklch, var(--accent-tertiary), transparent 20%) !important;
|
|
color: var(--color-white-strong) !important;
|
|
}
|
|
|
|
.module-settings__sub {
|
|
color: var(--color-white-strong) !important;
|
|
}
|
|
|
|
.module-settings__item {
|
|
background-color: var(--card-bg) !important;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.module-settings__item:hover {
|
|
background-color: var(--accent-color) !important;
|
|
}
|
|
|
|
.module-settings__item:hover .module-settings__name span,
|
|
.module-settings__item:hover .module-settings__desc {
|
|
color: var(--color-white-strong) !important;
|
|
}
|
|
|
|
.module-settings__toggle-all {
|
|
background-color: var(--btn-primary-bg) !important;
|
|
color: var(--color-white-strong) !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.module-settings__btn.module-settings__btn--secondary {
|
|
background-color: #6c757d !important;
|
|
color: var(--color-white-strong) !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.modal-container .modal-header .modal-close {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.modal-container .modal-header .modal-close:hover {
|
|
color: var(--color-white-strong) !important;
|
|
background: color-mix(in oklch, var(--accent-tertiary), transparent 20%) !important;
|
|
}
|
|
|
|
.modal-footer {
|
|
border: none !important;
|
|
}
|
|
|
|
#add_link_div, #reassign_group_div,
|
|
#set_node_div {
|
|
background: var(--bg-container) !important;
|
|
border-radius: var(--radius-mini);
|
|
border: var(--border-strong) !important;
|
|
}
|
|
|
|
.lv-dropdown-display,
|
|
.dropdown-list,
|
|
.custom-dropdown {
|
|
background-color: var(--card-bg) !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.lv-dropdown-panel .lv-item-label,
|
|
.cbi-dropdown-value,
|
|
.cbi-value-field span {
|
|
font-family: "NotoColorEmojiFlags" !important;
|
|
}
|
|
|
|
.lv-arrow-down-small {
|
|
border-top: 5px solid var(--text-primary) !important;
|
|
}
|
|
|
|
.lv-arrow-right {
|
|
border-left: 5px solid var(--text-primary) !important;
|
|
}
|
|
|
|
.cbi-listvalue-panel li[data-key]:hover,
|
|
.custom-dropdown .dropdown-item:hover {
|
|
background-color: var(--accent-color) !important;
|
|
color: var(--color-white-strong) !important;
|
|
}
|
|
|
|
[id*="passwall"][id*="node"] .lv-group-title {
|
|
border: var(--border-strong) !important;
|
|
background: var(--card-bg) !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
[id*="tcp_node.panel"],
|
|
[id*="udp_node.panel"] {
|
|
background: var(--bg-container) !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
[id*="tcp_node.display"],
|
|
[id*="udp_node.display"] {
|
|
border: var(--border-strong) !important;
|
|
background-color: var(--card-bg) !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.lv-dropdown-display .lv-arrow-down {
|
|
display: none;
|
|
}
|
|
|
|
.cbi-listvalue-panel li[data-key],
|
|
.lv-dropdown-search {
|
|
border: var(--border-strong) !important;
|
|
border-radius: var(--radius-mini);
|
|
}
|
|
|
|
.custom-dropdown:hover .selected-display {
|
|
background-color: var(--card-bg) !important;
|
|
}
|
|
|
|
#cbi-openclash-groups {
|
|
background: color-mix(in oklch, var(--bg-container), transparent 20%) !important;
|
|
border-radius: var(--radius-mini);
|
|
}
|
|
|
|
.lv-dropdown-panel::-webkit-scrollbar {
|
|
width: 12px;
|
|
}
|
|
|
|
.lv-dropdown-panel::-webkit-scrollbar-track {
|
|
background-color: color-mix(in oklch, var(--header-bg), transparent 20%);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.lv-dropdown-panel::-webkit-scrollbar-thumb {
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
border-radius: 6px;
|
|
background-color: var(--accent-color);
|
|
}
|
|
|
|
.lv-dropdown-panel::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--accent-tertiary);
|
|
}
|
|
|
|
#tab-header-openclash-rule_providers,
|
|
#tab-header-openclash-rule_provider_config,
|
|
#tab-header-openclash-game_config,
|
|
#tab-header-openclash-dns_servers,
|
|
#tab-header-openclash-servers,
|
|
#tab-header-openclash-proxy-provider,
|
|
#tab-header-openclash-groups {
|
|
background: color-mix(in oklch, var(--bg-container), transparent 20%) !important;
|
|
}
|
|
|
|
.cbi-input-file::file-selector-button {
|
|
background-color: var(--btn-primary-bg);
|
|
color: var(--color-white-strong);
|
|
border: none;
|
|
padding: 0.4rem 0.8rem;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all var(--transition-speed) ease;
|
|
}
|
|
|
|
.cbi-input-file::file-selector-button:hover {
|
|
background-color: var(--btn-primary-hover);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
ul:has(> li:only-child):has(.checkbox_switch):has(.app-update-menu-item) {
|
|
z-index: 10;
|
|
background: color-mix(in oklch, var(--bg-container), transparent 20%) !important;
|
|
width: 220px;
|
|
padding: 10px 14px;
|
|
border-radius: 12px;
|
|
margin-top: -10px !important;
|
|
}
|
|
|
|
.animated-box {
|
|
width: 50px;
|
|
height: 50px;
|
|
margin: 10px;
|
|
background: linear-gradient(45deg, oklch(68% 0.2 25), oklch(88% 0.18 95));
|
|
border-radius: 10px;
|
|
position: absolute;
|
|
animation: complex-animation 5s infinite alternate ease-in-out;
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
|
|
z-index: 9998;
|
|
}
|
|
|
|
@keyframes complex-animation {
|
|
0% {
|
|
transform: rotate(0deg) scale(1);
|
|
background: linear-gradient(45deg, oklch(68% 0.2 25), oklch(88% 0.18 95));
|
|
}
|
|
25% {
|
|
transform: rotate(45deg) scale(1.2);
|
|
background: linear-gradient(135deg, oklch(70% 0.15 255), oklch(75% 0.15 145));
|
|
}
|
|
50% {
|
|
transform: rotate(90deg) scale(0.8);
|
|
background: linear-gradient(225deg, oklch(65% 0.18 320), oklch(70% 0.18 55));
|
|
}
|
|
75% {
|
|
transform: rotate(135deg) scale(1.5);
|
|
background: linear-gradient(315deg, oklch(75% 0.15 250), oklch(65% 0.2 320));
|
|
}
|
|
100% {
|
|
transform: rotate(180deg) scale(1);
|
|
background: linear-gradient(45deg, oklch(68% 0.2 25), oklch(88% 0.18 95));
|
|
}
|
|
}
|
|
|
|
.snowflake {
|
|
position: absolute;
|
|
top: -10px;
|
|
width: 10px;
|
|
height: 10px;
|
|
background-color: white;
|
|
border-radius: 50%;
|
|
animation: fall linear infinite;
|
|
z-index: 9998;
|
|
}
|
|
|
|
@keyframes fall {
|
|
0% { transform: translateY(0) rotate(0deg); }
|
|
100% { transform: translateY(100vh) rotate(360deg); }
|
|
}
|
|
|
|
#packages .tr.cbi-section-table-titles .th:first-child {
|
|
border-top-left-radius: 10px;
|
|
}
|
|
|
|
#packages .tr.cbi-section-table-titles .th:last-child {
|
|
border-top-right-radius: 10px;
|
|
}
|
|
|
|
.tr.cbi-section-table-titles .th {
|
|
background-color: var(--header-bg) !important;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.cbi-section-table-descr {
|
|
display: none
|
|
}
|
|
|
|
[id^="tab-header-openclash-"] ul li a {
|
|
text-align: center !important;
|
|
display: flex !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
color: var(--text-color) !important;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
[id^="tab-header-openclash-"] ul li a:hover {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
|
|
[id^="tab-header-openclash-"] ul {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.progress_bar_bg,
|
|
[id^="tab-header-openclash-"] ul li.cbi-tab-disabled {
|
|
background-color: var(--header-bg) !important;
|
|
color: var(--text-color) !important;
|
|
border: var(--border-strong) !important;
|
|
}
|
|
|
|
.text_show {
|
|
color: var(--text-color) !important;
|
|
}
|
|
|
|
.sub_setting img {
|
|
width: 25px;
|
|
height: 25px;
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
transition: filter 0.2s ease, transform 0.2s ease !important;
|
|
}
|
|
|
|
#icon_arrow {
|
|
filter: invert(39%) sepia(95%) saturate(746%)
|
|
hue-rotate(185deg) brightness(94%) contrast(92%) !important;
|
|
}
|
|
|
|
#icon_wrench {
|
|
filter: invert(62%) sepia(85%) saturate(524%)
|
|
hue-rotate(5deg) brightness(101%) contrast(97%) !important;
|
|
}
|
|
|
|
.sub_setting img:hover {
|
|
filter: invert(48%) sepia(98%) saturate(2130%)
|
|
hue-rotate(345deg) brightness(95%) contrast(101%) !important;
|
|
transform: scale(1.15);
|
|
}
|
|
|
|
.sub_setting img:active {
|
|
filter: brightness(85%);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.sub_setting img.disabled {
|
|
filter: grayscale(100%) opacity(50%);
|
|
cursor: default;
|
|
}
|
|
|
|
#tab-header ul.cbi-tabmenu {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
#tab:has(textarea[id="cbid.openclash.config.clog"]) {
|
|
border: var(--border-strong) !important;
|
|
background-color: var(--bg-container) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
#tab:has(textarea[id="cbid.openclash.config.clog"]) #tab-content,
|
|
#tab:has(textarea[id="cbid.openclash.config.clog"]) #tab-header {
|
|
background-color: var(--header-bg) !important;
|
|
color: var(--text-color) !important;
|
|
}
|
|
|
|
.CodeMirror {
|
|
background: var(--bg-container) !important;
|
|
color: var(--text-color) !important;
|
|
}
|
|
|
|
.CodeMirror-linenumber,
|
|
.cm-s-material .CodeMirror-guttermarker, .cm-s-material .CodeMirror-guttermarker-subtle, .cm-s-material .CodeMirror-linenumber {
|
|
color: var(--text-color) !important;
|
|
}
|
|
|
|
.CodeMirror-activeline-background {
|
|
background: color-mix(in oklch, var(--neutral-200), transparent 20%) !important;
|
|
}
|
|
|
|
.CodeMirror-gutters {
|
|
background-color: var(--header-bg) !important;
|
|
color: var(--text-color) !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.cm-s-material .cm-comment {
|
|
color: var(--text-color) !important;
|
|
}
|
|
|
|
.cm-s-material .cm-string,
|
|
.cm-s-idea span.cm-variable {
|
|
color: var(--color-pink) !important;
|
|
}
|
|
|
|
.cm-s-idea span.cm-number,
|
|
.cm-s-material-log .cm-number {
|
|
color: var(--color-orange) !important;
|
|
}
|
|
|
|
#tab-content::-webkit-scrollbar {
|
|
width: 10px;
|
|
}
|
|
|
|
#tab-content::-webkit-scrollbar-track {
|
|
background: color-mix(in oklch, var(--header-bg), transparent 20%) !important;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
#tab-content::-webkit-scrollbar-thumb {
|
|
background-color: var(--accent-color);
|
|
border-radius: 5px;
|
|
border: var(--border-strong) !important;
|
|
}
|
|
|
|
#tab-content::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--color-pink);
|
|
}
|
|
|
|
#tab-content {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--accent-color) var(--header-bg);
|
|
}
|
|
|
|
#tab-header-openclash-dns_servers ul li.cbi-tab::after,
|
|
#tab-header .cbi-tabmenu li::after,
|
|
#tab-header .cbi-tabmenu li:hover::after,
|
|
#tab-header .cbi-tabmenu li.cbi-tab::after,
|
|
#tab-header .cbi-tabmenu li.cbi-tab-disabled::after,
|
|
[id^="tab-header-openclash-"] ul li::after,
|
|
[id^="tab-header-openclash-"] ul li:hover::after,
|
|
[id^="tab-header-openclash-"] ul li[class~="cbi-tab"]::after,
|
|
[id^="tab-header-openclash-"] ul li.cbi-tab::after,
|
|
[id^="tab-header-openclash-"] ul li.cbi-tab-disabled::after,
|
|
[id^="tab-header-openclash-"] ul li.cbi-tab-active::after {
|
|
border: var(--border-strong) !important;
|
|
display: none !important;
|
|
content: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
[data-theme="dark"] #tab-header ul.cbi-tabmenu li.cbi-tab-disabled a,
|
|
[data-theme="dark"] #tab-header-openclash-game_config ul li.cbi-tab-disabled a,
|
|
[data-theme="dark"] #tab-header-openclash-rule_providers ul li.cbi-tab-disabled a,
|
|
[data-theme="dark"] #tab-header-openclash-rule_provider_config ul li.cbi-tab-disabled a,
|
|
[data-theme="dark"] #tab-header-openclash-game_config ul li.cbi-tab-disabled a,
|
|
[data-theme="dark"] #tab-header-openclash-servers ul li.cbi-tab-disabled a,
|
|
[data-theme="dark"] #tab-header-openclash-proxy-provider ul li.cbi-tab-disabled a,
|
|
[data-theme="dark"] #tab-header-openclash-groups ul li.cbi-tab-disabled a,
|
|
[data-theme="dark"] #tab-header-openclash-dns_servers ul li.cbi-tab-disabled a {
|
|
color: var(--color-white-strong) !important;
|
|
}
|
|
|
|
#tab-header ul.cbi-tabmenu li.cbi-tab,
|
|
[id^="tab-header"][id*="openclash"] ul li.cbi-tab {
|
|
background-color: var(--accent-color) !important;
|
|
border: var(--border-strong) !important;
|
|
color: var(--color-white-strong) !important;
|
|
}
|
|
|
|
#tab-header ul.cbi-tabmenu li.cbi-tab-disabled {
|
|
background: var(--bg-body) !important;
|
|
color: var(--color-white-strong) !important;
|
|
}
|
|
|
|
#tab-header-openclash-game_config ul li.cbi-tab-disabled:hover,
|
|
#tab-header-openclash-rule_providers ul li.cbi-tab-disabled:hover,
|
|
#tab-header-openclash-rule_provider_config ul li.cbi-tab-disabled:hover,
|
|
#tab-header-openclash-game_config ul li.cbi-tab-disabled:hover,
|
|
#tab-header-openclash-servers ul li.cbi-tab-disabled:hover,
|
|
#tab-header-openclash-proxy-provider ul li.cbi-tab-disabled:hover,
|
|
#tab-header-openclash-groups ul li.cbi-tab-disabled:hover,
|
|
#tab-header-openclash-dns_servers ul li.cbi-tab-disabled:hover,
|
|
#tab-header ul.cbi-tabmenu li.cbi-tab-disabled:hover {
|
|
background: var(--neutral-200) !important;
|
|
color: var(--color-white-strong) !important;
|
|
}
|
|
|
|
.radio-button {
|
|
display: flex !important;
|
|
gap: var(--space-sm) !important;
|
|
flex-wrap: wrap !important;
|
|
align-items: center !important;
|
|
}
|
|
|
|
.radio-button input[type="radio"] {
|
|
display: none !important;
|
|
}
|
|
|
|
.radio-button label {
|
|
display: inline-block !important;
|
|
padding: 8px 16px !important;
|
|
border-radius: (--radius-small) !important;
|
|
background: color-mix(in oklch, var(--bg-container), transparent 20%) !important;
|
|
border: var(--border-strong) !important;
|
|
color: var(--text-primary) !important;
|
|
font-size: var(--text-sm) !important;
|
|
cursor: pointer !important;
|
|
transition: all 0.25s var(--ease-in-out) !important;
|
|
user-select: none !important;
|
|
}
|
|
|
|
.radio-button label:hover {
|
|
background-color: var(--accent-tertiary) !important;
|
|
color: var(--color-white) !important;
|
|
}
|
|
|
|
.radio-button input[type="radio"]:checked + label {
|
|
background-color: var(--accent-color) !important;
|
|
color: var(--color-white) !important;
|
|
}
|
|
|
|
.radio-button label:active {
|
|
transform: scale(0.97) !important;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.oc input[type="radio"]:checked + .cbi-button-option {
|
|
height: 30px !important;
|
|
min-height: 30px !important;
|
|
line-height: 30px !important;
|
|
}
|
|
}
|
|
|
|
.cbi-section .table>.tr:nth-of-type(2n),
|
|
.cbi-section-node>.cbi-value:nth-of-type(2n),
|
|
.cbi-map>div>.cbi-section>.cbi-section-node>.cbi-value:nth-of-type(2n),
|
|
.cbi-tabcontainer>.cbi-value:nth-of-type(2n),
|
|
.cbi-map>.cbi-section .cbi-value:nth-of-type(2n),
|
|
table>tbody>tr:nth-of-type(2n),
|
|
div>.table>.tr:nth-of-type(2n) {
|
|
background: color-mix(in oklch, var(--card-bg), transparent 20%);
|
|
}
|
|
|
|
.table[data-idref]>.tr:nth-of-type(2n),
|
|
table:not(:has(tbody))>tr:nth-of-type(2n),
|
|
.table:not(:has(tbody))>.tr:nth-of-type(2n),
|
|
.cbi-rowstyle-2 {
|
|
background: color-mix(in oklch, var(--bg-container), transparent 20%);
|
|
}
|
|
|
|
.cbi-section .table>.tr:nth-of-type(2n):hover,
|
|
.cbi-section-node>.cbi-value:nth-of-type(2n):hover,
|
|
.cbi-map>div>.cbi-section>.cbi-section-node>.cbi-value:nth-of-type(2n):hover,
|
|
.cbi-tabcontainer>.cbi-value:nth-of-type(2n):hover,
|
|
.cbi-map>.cbi-section .cbi-value:nth-of-type(2n):hover,
|
|
table>tbody>tr:nth-of-type(2n):hover,
|
|
div>.table>.tr:nth-of-type(2n):hover {
|
|
background: color-mix(in oklch, var(--bg-container), transparent 20%) !important;
|
|
}
|
|
|
|
.table[data-idref]>.tr:nth-of-type(2n):hover,
|
|
table:not(:has(tbody))>tr:nth-of-type(2n):hover,
|
|
.table:not(:has(tbody))>.tr:nth-of-type(2n):hover,
|
|
.cbi-rowstyle-2:hover {
|
|
background: color-mix(in oklch, var(--card-bg), transparent 20%) !important;
|
|
}
|
|
|
|
#cbi-homeproxy-config-main_udp_node,
|
|
.cbi-value[data-name="main_udp_node"] {
|
|
background: color-mix(in oklch, var(--card-bg), transparent 20%);
|
|
}
|
|
|
|
.action .tips {
|
|
transform: translateY(-24px);
|
|
}
|
|
|
|
.label-item p.label_info,
|
|
.label-item label span {
|
|
color: var(--text-color) !important;
|
|
}
|
|
|
|
.networkIcon,
|
|
.interfaceIcon,
|
|
.left .computerIcon {
|
|
filter: brightness(0) saturate(100%) invert(28%) sepia(76%) saturate(5712%) hue-rotate(193deg) brightness(96%) contrast(93%);
|
|
}
|
|
|
|
.select-editable select {
|
|
background: none !important;
|
|
}
|
|
|
|
.select-editable option {
|
|
background: color-mix(in oklch, var(--card-bg), transparent 20%);
|
|
color: var(--text-color) !important;
|
|
}
|
|
|
|
.select-editable {
|
|
border: var(--border-strong) !important;
|
|
}
|
|
|
|
a[href*="istoreos.com"] {
|
|
position: relative !important;
|
|
top: 10px !important;
|
|
transition: all 0.3s ease !important;
|
|
}
|
|
|
|
a[href*="istoreos.com"]:hover {
|
|
color: var(--active-bg) !important;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.card-container {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
padding-right: 0 !important;
|
|
box-sizing: border-box !important;
|
|
display: grid !important;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
|
|
gap: 15px !important;
|
|
margin: 0 auto !important;
|
|
}
|
|
|
|
.feature-card {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
.network-container {
|
|
margin-top: 0 !important;
|
|
margin-bottom: 20px !important;
|
|
}
|
|
|
|
.cbi-map-descr img {
|
|
width: 60px;
|
|
height: 60px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.table.cbi-section-table td,
|
|
.table.cbi-section-table th {
|
|
padding-left: 20px !important;
|
|
}
|
|
|
|
.cbi-section:has(.cbi-section-table.table),
|
|
.cbi-tblsection:has(.cbi-section-table.table) {
|
|
overflow-x: hidden;
|
|
}
|
|
}
|
|
|
|
span.label[data-style="inactive"] {
|
|
display: none !important;
|
|
}
|
|
|
|
:not(pre)>code, :not(pre)>kbd, :not(pre)>samp {
|
|
background-color: var(--card-bg) !important;
|
|
}
|
|
|
|
.cbi-section h3 {
|
|
color: var(--accent-color);
|
|
margin: 18px 0 8px 12px;
|
|
padding: 8px 0 8px 8px;
|
|
}
|
|
|
|
#maincontent > .alert-message[style*="display:flex"],
|
|
div#maincontent > div.alert-message.fade-in.warning[style*="display:flex"] {
|
|
position: fixed !important;
|
|
top: 50% !important;
|
|
left: 50% !important;
|
|
transform: translate(-50%, -50%) !important;
|
|
z-index: 9999 !important;
|
|
width: 500px !important;
|
|
max-width: 80% !important;
|
|
margin: 0 !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
.nft-table > h3 {
|
|
margin-top: 25px !important;
|
|
margin-bottom: 20px !important;
|
|
}
|
|
|
|
#view .cbi-section:not(:has(h3)):has(> div:nth-child(2):empty) {
|
|
display: none !important;
|
|
}
|
|
|
|
.right-box .card-header .settings-wrapper .settings-btn .device-manage-btn {
|
|
background-color: var(--card-bg) !important;
|
|
border: var(--border-strong) !important;
|
|
}
|
|
|
|
.right-box .reusable-card .card-body .info_content .ip_info .ip_item .ip_action .ip_tag svg path,
|
|
.right-box .card-header .settings-wrapper .settings-btn .device-manage-btn .device-manage-icon path {
|
|
fill: var(--color-blue) !important;
|
|
}
|
|
|
|
#cbi-dockerd div[class*="status"]:not([class*="other"]):not([id*="status"]) {
|
|
padding: 0 8px !important;
|
|
}
|
|
|
|
#cbi-dockerd .pure-g.status .block {
|
|
background-color: var(--bg-container) !important;
|
|
display: block !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
#cbi-dockerd .pure-g.status .block.pure-g {
|
|
display: -webkit-box !important;
|
|
display: -webkit-flex !important;
|
|
display: -ms-flexbox !important;
|
|
display: flex !important;
|
|
-webkit-flex-flow: row nowrap !important;
|
|
-ms-flex-flow: row nowrap !important;
|
|
flex-flow: row nowrap !important;
|
|
}
|
|
|
|
#cbi-dockerd .pure-g.status .block > [class*="pure-u-"] {
|
|
display: inline-block !important;
|
|
float: none !important;
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
#cbi-dockerd .pure-g.status .block .pure-u-3-5 {
|
|
background: transparent !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
#cbi-dockerd .pure-g.status .block .pure-u-3-5 h4,
|
|
#cbi-dockerd .pure-g.status .block .pure-u-3-5 a,
|
|
#cbi-dockerd .pure-g.status .block .pure-u-3-5 span {
|
|
background: transparent !important;
|
|
}
|
|
|
|
#cbi-dockerd .pure-u-1-4:nth-child(1) .img-con img {
|
|
filter: brightness(0) saturate(100%) invert(54%) sepia(98%) saturate(427%) hue-rotate(98deg) brightness(95%) contrast(87%) !important;
|
|
}
|
|
|
|
#cbi-dockerd .pure-u-1-4:nth-child(2) .img-con img {
|
|
filter: brightness(0) saturate(100%) invert(46%) sepia(99%) saturate(2180%) hue-rotate(176deg) brightness(95%) contrast(91%) !important;
|
|
}
|
|
|
|
#cbi-dockerd .pure-u-1-4:nth-child(3) .img-con img {
|
|
filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(527%) hue-rotate(224deg) brightness(95%) contrast(91%) !important;
|
|
}
|
|
|
|
#cbi-dockerd .pure-u-1-4:nth-child(4) .img-con img {
|
|
filter: brightness(0) saturate(100%) invert(40%) sepia(98%) saturate(527%) hue-rotate(324deg) brightness(95%) contrast(91%) !important;
|
|
}
|
|
|
|
::placeholder {
|
|
color: var(--text-secondary) !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.cbi-input-select[id*="sing-box-"][id*="_logview"] {
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
.cbi-map > .cbi-section > #log_textarea,
|
|
.cbi-map > .cbi-section > div:last-child {
|
|
margin-right: 15px !important;
|
|
}
|
|
|
|
.cbi-map > .cbi-section > #log_textarea > pre[wrap="pre"] {
|
|
padding-right: 3px !important;
|
|
}
|
|
|
|
:where(body) :where(.cbi-map) :where(h3[name="content"]) {
|
|
margin-left: -20px !important;
|
|
}
|
|
|
|
|