Initial commit: mail-server with WebFlux backend and Angular v22 Synthwave frontend
Co-authored-by: Junie <junie@jetbrains.com>
This commit is contained in:
Junie
@@ -0,0 +1,254 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;800;900&family=Rajdhani:wght@400;500;600;700&family=Fira+Code:wght@400;500;600&display=swap');
|
||||
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-synth-dark: #0d0221;
|
||||
--color-synth-darker: #0a0118;
|
||||
--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);
|
||||
|
||||
--font-family-orbitron: 'Orbitron', sans-serif;
|
||||
--font-family-rajdhani: 'Rajdhani', sans-serif;
|
||||
--font-family-fira-code: 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
: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);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-synth-dark);
|
||||
color: #f1f5f9;
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Glassmorphism панель */
|
||||
.glass-panel {
|
||||
background: var(--color-synth-glass);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
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;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
/* Неоновый текст */
|
||||
.neon-text-primary {
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 5px var(--color-synth-pink), 0 0 15px var(--color-synth-pink);
|
||||
}
|
||||
|
||||
.neon-text-secondary {
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 5px var(--color-synth-cyan), 0 0 15px var(--color-synth-cyan);
|
||||
}
|
||||
|
||||
/* Cyber кнопка */
|
||||
.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);
|
||||
color: #ffffff;
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
transition: all 0.2s ease;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cyber-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.cyber-btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.cyber-btn:hover {
|
||||
background: var(--color-synth-cyan);
|
||||
color: var(--color-synth-dark);
|
||||
box-shadow: 0 0 20px var(--color-synth-cyan);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Synthwave фон с сеткой */
|
||||
.synth-bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.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); }
|
||||
}
|
||||
|
||||
/* Кастомный скроллбар */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(13, 2, 33, 0.8);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-synth-pink);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 10px var(--color-synth-pink);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-synth-cyan);
|
||||
}
|
||||
|
||||
/* Неоновое свечение */
|
||||
.neon-glow-pink {
|
||||
box-shadow: 0 0 10px var(--color-synth-pink), 0 0 20px var(--color-synth-pink);
|
||||
}
|
||||
|
||||
.neon-glow-cyan {
|
||||
box-shadow: 0 0 10px var(--color-synth-cyan), 0 0 20px var(--color-synth-cyan);
|
||||
}
|
||||
|
||||
/* Светлая тема */
|
||||
.light-theme {
|
||||
--color-synth-dark: #f0f0f5;
|
||||
--color-synth-glass: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.light-theme body,
|
||||
.light-theme {
|
||||
background-color: #f0f0f5 !important;
|
||||
color: #1a1a2e !important;
|
||||
}
|
||||
|
||||
.light-theme .glass-panel {
|
||||
background: rgba(255, 255, 255, 0.8) !important;
|
||||
border-color: rgba(121, 40, 202, 0.3) !important;
|
||||
color: #1a1a2e !important;
|
||||
}
|
||||
|
||||
.light-theme .synth-bg {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.light-theme .neon-text-primary,
|
||||
.light-theme .neon-text-secondary {
|
||||
text-shadow: none !important;
|
||||
color: #1a1a2e !important;
|
||||
}
|
||||
|
||||
.light-theme input,
|
||||
.light-theme .cyber-btn {
|
||||
background: rgba(255, 255, 255, 0.9) !important;
|
||||
color: #1a1a2e !important;
|
||||
border-color: rgba(121, 40, 202, 0.4) !important;
|
||||
}
|
||||
|
||||
.light-theme .cyber-btn:hover {
|
||||
background: var(--color-synth-purple) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.light-theme a,
|
||||
.light-theme span,
|
||||
.light-theme p,
|
||||
.light-theme h1,
|
||||
.light-theme h2,
|
||||
.light-theme label {
|
||||
color: #1a1a2e !important;
|
||||
}
|
||||
|
||||
.light-theme .text-slate-200,
|
||||
.light-theme .text-slate-300,
|
||||
.light-theme .text-slate-400 {
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
.light-theme .bg-synth-darker\/80 {
|
||||
background-color: rgba(255, 255, 255, 0.9) !important;
|
||||
}
|
||||
Reference in New Issue
Block a user