Spaces:
Running
Running
File size: 3,683 Bytes
3771f05 58ae54b 3771f05 58ae54b 3771f05 58ae54b 3771f05 58ae54b 3771f05 58ae54b 3771f05 58ae54b 3771f05 58ae54b 3771f05 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
/* style.css — Elevated Visuals */
:root {
--glass-bg: rgba(20, 20, 25, 0.7);
--glass-border: rgba(255, 255, 255, 0.08);
--primary: #8b5cf6;
--primary-glow: rgba(139, 92, 246, 0.4);
}
body {
background-color: #0f1115;
overflow-x: hidden;
}
/* === OPTIMIZED BACKGROUND FX === */
.fx-noise {
position: fixed;
top: 0; left: 0; width: 100vw; height: 100vh;
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cmVjdCB3aWR0aD0iMjAwJSIgaGVpZ2h0PSIyMDAlIiBmaWxsPSJodHNsKDAsIDAlLCAwJSkiLz48cmVjdCB3aWR0aD0iMjAwJSIgaGVpZ2h0PSIyMDAlIiBmaWxsPSJ0cmFuc3BhcmVudCIgZmlsdGVyPSJ1cmwoI24pIiBvcGFjaXR5PSIwLjA1Ii8+PGZpbHRlciBpZD0ibiI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuODUiIG51bU9jdGF2ZXM9IjMiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48L2ZpbHRlcj48L3N2Zz4=');
opacity: 0.4;
pointer-events: none;
z-index: 0;
}
.fx-glow {
position: fixed;
top: -20%; right: -10%;
width: 600px; height: 600px;
background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
filter: blur(80px);
z-index: 0;
animation: pulse 8s ease-in-out infinite alternate;
}
@keyframes pulse {
0% { opacity: 0.3; transform: scale(1); }
100% { opacity: 0.6; transform: scale(1.1); }
}
/* === GLASS COMPONENTS === */
.glass-panel {
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 1rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.glass-panel:hover {
border-color: rgba(139, 92, 246, 0.2);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
/* === BUTTONS === */
.btn-primary {
background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%);
color: white;
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(255,255,255,0.1);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(139, 92, 246, 0.5);
filter: brightness(1.1);
}
.btn-primary:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
filter: grayscale(0.5);
}
/* === SYNTAX HIGHLIGHTING (Simple) === */
.token-string { color: #a5d6ff; }
.token-tag { color: #7ee787; }
.token-key { color: #d2a8ff; }
/* === SCROLLBARS === */
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: rgba(0,0,0,0.2);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.1);
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.2);
}
/* === TOASTS === */
.toast {
background: rgba(20, 20, 20, 0.95);
border: 1px solid #333;
color: white;
padding: 12px 24px;
border-radius: 8px;
font-size: 0.9rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
animation: slideIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
display: flex;
align-items: center;
gap: 8px;
}
.toast-success { border-left: 4px solid #10b981; }
.toast-error { border-left: 4px solid #ef4444; }
@keyframes slideIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* === LOADER === */
.spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
} |