Fix: Update all components to match Synthwave design showcase
Co-authored-by: Junie <junie@jetbrains.com>
This commit is contained in:
Junie
+184
-99
@@ -9,7 +9,7 @@
|
||||
--color-synth-cyan: #00f0ff;
|
||||
--color-synth-purple: #7928ca;
|
||||
--color-synth-yellow: #ffbe0b;
|
||||
--color-synth-glass: rgba(13, 2, 33, 0.6);
|
||||
--color-synth-glass: rgba(15, 12, 35, 0.65);
|
||||
|
||||
--font-family-orbitron: 'Orbitron', sans-serif;
|
||||
--font-family-rajdhani: 'Rajdhani', sans-serif;
|
||||
@@ -17,12 +17,68 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-synth-dark: #0d0221;
|
||||
--color-synth-pink: #ff007f;
|
||||
--color-synth-cyan: #00f0ff;
|
||||
--color-synth-purple: #7928ca;
|
||||
--color-synth-yellow: #ffbe0b;
|
||||
--color-synth-glass: rgba(13, 2, 33, 0.6);
|
||||
--primary-color: #ff007f;
|
||||
--secondary-color: #00f0ff;
|
||||
--accent-color: #7928ca;
|
||||
--highlight-color: #ffbe0b;
|
||||
--bg-color: #0d0221;
|
||||
--grid-color: rgba(255, 0, 127, 0.4);
|
||||
--glow-color: rgba(0, 240, 255, 0.6);
|
||||
--blur-quality: 16px;
|
||||
--synth-glass: rgba(15, 12, 35, 0.65);
|
||||
}
|
||||
|
||||
/* Color Theme Presets */
|
||||
.theme-cyber-magenta {
|
||||
--primary-color: #ff007f;
|
||||
--secondary-color: #00f0ff;
|
||||
--accent-color: #7928ca;
|
||||
--highlight-color: #ffbe0b;
|
||||
--grid-color: rgba(255, 0, 127, 0.4);
|
||||
--glow-color: rgba(0, 240, 255, 0.6);
|
||||
}
|
||||
|
||||
.theme-neon-cyan {
|
||||
--primary-color: #00f0ff;
|
||||
--secondary-color: #00ff88;
|
||||
--accent-color: #0077ff;
|
||||
--highlight-color: #e0f7fa;
|
||||
--grid-color: rgba(0, 240, 255, 0.4);
|
||||
--glow-color: rgba(0, 255, 136, 0.6);
|
||||
}
|
||||
|
||||
.theme-sunset-orange {
|
||||
--primary-color: #ff5e00;
|
||||
--secondary-color: #ffb703;
|
||||
--accent-color: #d62828;
|
||||
--highlight-color: #fcbf49;
|
||||
--grid-color: rgba(255, 94, 0, 0.4);
|
||||
--glow-color: rgba(255, 183, 3, 0.6);
|
||||
}
|
||||
|
||||
.theme-matrix-green {
|
||||
--primary-color: #00ff66;
|
||||
--secondary-color: #39ff14;
|
||||
--accent-color: #008000;
|
||||
--highlight-color: #ccff00;
|
||||
--grid-color: rgba(0, 255, 102, 0.4);
|
||||
--glow-color: rgba(57, 255, 20, 0.6);
|
||||
}
|
||||
|
||||
/* High Contrast Mode Overrides */
|
||||
.high-contrast {
|
||||
--bg-color: #000000;
|
||||
--primary-color: #ffff00 !important;
|
||||
--secondary-color: #00ffff !important;
|
||||
--accent-color: #ffffff !important;
|
||||
--highlight-color: #ffffff !important;
|
||||
--grid-color: rgba(0, 255, 255, 0.8) !important;
|
||||
}
|
||||
|
||||
.high-contrast .glass-panel {
|
||||
background: rgba(0, 0, 0, 0.95) !important;
|
||||
border: 2px solid var(--secondary-color) !important;
|
||||
box-shadow: 0 0 15px var(--secondary-color) !important;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -32,17 +88,104 @@
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-synth-dark);
|
||||
background-color: var(--bg-color);
|
||||
color: #f1f5f9;
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
overflow-x: hidden;
|
||||
transition: background-color 0.4s ease;
|
||||
}
|
||||
|
||||
/* Glassmorphism панель */
|
||||
/* Synthwave Background World */
|
||||
.synth-stage {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Sun Graphic */
|
||||
.synth-sun {
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to bottom, #ffbe0b, var(--primary-color), var(--accent-color));
|
||||
box-shadow: 0 0 80px var(--primary-color), 0 0 120px var(--accent-color);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Sun Bars Cutout Effect */
|
||||
.synth-sun::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
transparent 0px,
|
||||
transparent 6px,
|
||||
var(--bg-color) 6px,
|
||||
var(--bg-color) 12px
|
||||
);
|
||||
mask-image: linear-gradient(to bottom, transparent 40%, black 100%);
|
||||
-webkit-mask-image: linear-gradient(to bottom, transparent 40%, black 100%);
|
||||
}
|
||||
|
||||
/* Horizon Silhouette */
|
||||
.synth-mountains {
|
||||
position: absolute;
|
||||
bottom: 45%;
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L0,80 L150,110 L300,50 L450,95 L600,30 L750,85 L900,40 L1050,90 L1200,60 L1200,120 Z' fill='%23080214'/%3E%3C/svg%3E");
|
||||
background-size: cover;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Perspective Grid Floor */
|
||||
.grid-container {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 50%;
|
||||
perspective: 450px;
|
||||
z-index: 3;
|
||||
mask-image: linear-gradient(to top, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
|
||||
-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
|
||||
}
|
||||
|
||||
.grid-plane {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 200%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: rotateX(75deg);
|
||||
background-size: 50px 50px;
|
||||
background-image:
|
||||
linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
|
||||
animation: moveGrid 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes moveGrid {
|
||||
0% { transform: rotateX(75deg) translateY(0); }
|
||||
100% { transform: rotateX(75deg) translateY(50px); }
|
||||
}
|
||||
|
||||
/* Glassmorphism Cards */
|
||||
.glass-panel {
|
||||
background: var(--color-synth-glass);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
background: var(--synth-glass, rgba(15, 12, 35, 0.65));
|
||||
backdrop-filter: blur(var(--blur-quality));
|
||||
-webkit-backdrop-filter: blur(var(--blur-quality));
|
||||
border: 1px solid rgba(0, 240, 255, 0.25);
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.03);
|
||||
border-radius: 16px;
|
||||
@@ -50,26 +193,30 @@ body {
|
||||
}
|
||||
|
||||
.glass-panel:hover {
|
||||
border-color: var(--color-synth-cyan);
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 240, 255, 0.6);
|
||||
border-color: var(--secondary-color);
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6), 0 0 15px var(--glow-color);
|
||||
}
|
||||
|
||||
/* Неоновый текст */
|
||||
/* Neon Text & Glow Effects */
|
||||
.neon-text-primary {
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 5px var(--color-synth-pink), 0 0 15px var(--color-synth-pink);
|
||||
text-shadow: 0 0 5px var(--primary-color), 0 0 15px var(--primary-color);
|
||||
}
|
||||
|
||||
.neon-text-secondary {
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 5px var(--color-synth-cyan), 0 0 15px var(--color-synth-cyan);
|
||||
text-shadow: 0 0 5px var(--secondary-color), 0 0 15px var(--secondary-color);
|
||||
}
|
||||
|
||||
/* Cyber кнопка */
|
||||
.neon-border {
|
||||
box-shadow: 0 0 10px var(--secondary-color);
|
||||
}
|
||||
|
||||
/* Cyber Button Style */
|
||||
.cyber-btn {
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, rgba(255, 0, 127, 0.2), rgba(0, 240, 255, 0.2));
|
||||
border: 1px solid var(--color-synth-cyan);
|
||||
border: 1px solid var(--secondary-color);
|
||||
color: #ffffff;
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
text-transform: uppercase;
|
||||
@@ -95,80 +242,18 @@ body {
|
||||
}
|
||||
|
||||
.cyber-btn:hover {
|
||||
background: var(--color-synth-cyan);
|
||||
color: var(--color-synth-dark);
|
||||
box-shadow: 0 0 20px var(--color-synth-cyan);
|
||||
background: var(--secondary-color);
|
||||
color: #0d0221;
|
||||
box-shadow: 0 0 20px var(--secondary-color);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Synthwave фон с сеткой */
|
||||
.synth-bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
.cyber-btn:focus-visible {
|
||||
outline: 3px solid var(--highlight-color);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.synth-sun {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to bottom, #ffbe0b, var(--color-synth-pink), var(--color-synth-purple));
|
||||
box-shadow: 0 0 60px var(--color-synth-pink), 0 0 100px var(--color-synth-purple);
|
||||
}
|
||||
|
||||
.synth-sun::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
transparent 0px,
|
||||
transparent 4px,
|
||||
var(--color-synth-dark) 4px,
|
||||
var(--color-synth-dark) 8px
|
||||
);
|
||||
mask-image: linear-gradient(to bottom, transparent 40%, black 100%);
|
||||
-webkit-mask-image: linear-gradient(to bottom, transparent 40%, black 100%);
|
||||
}
|
||||
|
||||
.synth-grid {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 40%;
|
||||
perspective: 400px;
|
||||
mask-image: linear-gradient(to top, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
|
||||
-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
|
||||
}
|
||||
|
||||
.synth-grid-plane {
|
||||
width: 100%;
|
||||
height: 200%;
|
||||
transform: rotateX(75deg);
|
||||
background-size: 40px 40px;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(255, 0, 127, 0.3) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 0, 127, 0.3) 1px, transparent 1px);
|
||||
animation: gridMove 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes gridMove {
|
||||
0% { transform: rotateX(75deg) translateY(0); }
|
||||
100% { transform: rotateX(75deg) translateY(40px); }
|
||||
}
|
||||
|
||||
/* Кастомный скроллбар */
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
@@ -177,27 +262,27 @@ body {
|
||||
background: rgba(13, 2, 33, 0.8);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-synth-pink);
|
||||
background: var(--primary-color);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 10px var(--color-synth-pink);
|
||||
box-shadow: 0 0 10px var(--primary-color);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-synth-cyan);
|
||||
background: var(--secondary-color);
|
||||
}
|
||||
|
||||
/* Неоновое свечение */
|
||||
/* Neon glow utilities */
|
||||
.neon-glow-pink {
|
||||
box-shadow: 0 0 10px var(--color-synth-pink), 0 0 20px var(--color-synth-pink);
|
||||
box-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color);
|
||||
}
|
||||
|
||||
.neon-glow-cyan {
|
||||
box-shadow: 0 0 10px var(--color-synth-cyan), 0 0 20px var(--color-synth-cyan);
|
||||
box-shadow: 0 0 10px var(--secondary-color), 0 0 20px var(--secondary-color);
|
||||
}
|
||||
|
||||
/* Светлая тема */
|
||||
/* Light theme overrides */
|
||||
.light-theme {
|
||||
--color-synth-dark: #f0f0f5;
|
||||
--color-synth-glass: rgba(255, 255, 255, 0.7);
|
||||
--bg-color: #f0f0f5;
|
||||
--synth-glass: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.light-theme body,
|
||||
@@ -212,7 +297,7 @@ body {
|
||||
color: #1a1a2e !important;
|
||||
}
|
||||
|
||||
.light-theme .synth-bg {
|
||||
.light-theme .synth-stage {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@@ -230,7 +315,7 @@ body {
|
||||
}
|
||||
|
||||
.light-theme .cyber-btn:hover {
|
||||
background: var(--color-synth-purple) !important;
|
||||
background: var(--accent-color) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user