534 lines
15 KiB
CSS
534 lines
15 KiB
CSS
/*
|
|
* 🤖 RADZEN TECH HOLOGRAPHIC THEME 🤖
|
|
* Dark Purple Metallic with Holographic Effects
|
|
* Pixel Perfect Robot/Tech Aesthetic
|
|
*/
|
|
|
|
:root {
|
|
/* Core Theme Colors */
|
|
--tech-primary: #8A2BE2; /* Blue Violet */
|
|
--tech-secondary: #9932CC; /* Dark Orchid */
|
|
--tech-accent: #DA70D6; /* Orchid */
|
|
--tech-highlight: #FF00FF; /* Magenta */
|
|
--tech-neon: #00FFFF; /* Cyan */
|
|
|
|
/* Dark Base Colors */
|
|
--tech-dark-base: #0D0014; /* Ultra Dark Purple */
|
|
--tech-dark-surface: #1A0A2E; /* Dark Purple */
|
|
--tech-dark-card: #16213E; /* Dark Blue Purple */
|
|
--tech-dark-accent: #0F3460; /* Deep Blue */
|
|
|
|
/* Metallic Colors */
|
|
--tech-metallic-silver: #C0C0C0;
|
|
--tech-metallic-gold: #FFD700;
|
|
--tech-metallic-copper: #B87333;
|
|
--tech-metallic-chrome: #E5E5E5;
|
|
|
|
/* Holographic Gradient */
|
|
--holographic-gradient: linear-gradient(45deg,
|
|
#FF0080 0%,
|
|
#7928CA 25%,
|
|
#0070F3 50%,
|
|
#00DFD8 75%,
|
|
#FF0080 100%);
|
|
|
|
/* Glow Effects */
|
|
--tech-glow-primary: 0 0 20px rgba(138, 43, 226, 0.8);
|
|
--tech-glow-secondary: 0 0 30px rgba(153, 50, 204, 0.6);
|
|
--tech-glow-accent: 0 0 15px rgba(218, 112, 214, 0.9);
|
|
--tech-glow-neon: 0 0 25px rgba(0, 255, 255, 0.7);
|
|
|
|
/* Animation Timings */
|
|
--tech-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
--tech-transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
--tech-transition-glow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Holographic Animation Keyframes */
|
|
@keyframes holographic-shift {
|
|
0% { background-position: 0% 50%; }
|
|
25% { background-position: 100% 50%; }
|
|
50% { background-position: 100% 0%; }
|
|
75% { background-position: 0% 0%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
@keyframes tech-pulse {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
box-shadow: var(--tech-glow-primary);
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
box-shadow: var(--tech-glow-secondary);
|
|
}
|
|
}
|
|
|
|
@keyframes neon-flicker {
|
|
0%, 100% { opacity: 1; }
|
|
2% { opacity: 0.8; }
|
|
4% { opacity: 1; }
|
|
8% { opacity: 0.9; }
|
|
10% { opacity: 1; }
|
|
}
|
|
|
|
@keyframes data-stream {
|
|
0% { transform: translateY(-100%); opacity: 0; }
|
|
10% { opacity: 1; }
|
|
90% { opacity: 1; }
|
|
100% { transform: translateY(100vh); opacity: 0; }
|
|
}
|
|
|
|
/* Global Dark Theme Base */
|
|
body {
|
|
background: var(--tech-dark-base) !important;
|
|
background-image:
|
|
radial-gradient(circle at 25% 25%, rgba(138, 43, 226, 0.1) 0%, transparent 50%),
|
|
radial-gradient(circle at 75% 75%, rgba(153, 50, 204, 0.1) 0%, transparent 50%),
|
|
linear-gradient(45deg, transparent 45%, rgba(0, 255, 255, 0.03) 50%, transparent 55%);
|
|
color: var(--tech-metallic-chrome) !important;
|
|
font-family: 'Segoe UI', 'Roboto Mono', 'Courier New', monospace !important;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Radzen Component Overrides */
|
|
.rz-card {
|
|
background: linear-gradient(135deg,
|
|
var(--tech-dark-surface) 0%,
|
|
var(--tech-dark-card) 100%) !important;
|
|
border: 1px solid rgba(138, 43, 226, 0.3) !important;
|
|
border-radius: 12px !important;
|
|
box-shadow:
|
|
0 8px 32px rgba(13, 0, 20, 0.8),
|
|
inset 0 1px 0 rgba(218, 112, 214, 0.2),
|
|
0 0 0 1px rgba(138, 43, 226, 0.1) !important;
|
|
color: var(--tech-metallic-chrome) !important;
|
|
transition: all var(--tech-transition-smooth) !important;
|
|
backdrop-filter: blur(20px) !important;
|
|
}
|
|
|
|
.rz-card:hover {
|
|
transform: translateY(-2px) !important;
|
|
box-shadow:
|
|
0 16px 64px rgba(13, 0, 20, 0.9),
|
|
inset 0 1px 0 rgba(218, 112, 214, 0.4),
|
|
var(--tech-glow-primary) !important;
|
|
border-color: var(--tech-primary) !important;
|
|
}
|
|
|
|
.rz-card-header {
|
|
background: linear-gradient(90deg,
|
|
rgba(138, 43, 226, 0.2) 0%,
|
|
rgba(153, 50, 204, 0.1) 100%) !important;
|
|
border-bottom: 1px solid rgba(218, 112, 214, 0.3) !important;
|
|
color: var(--tech-metallic-chrome) !important;
|
|
font-weight: 600 !important;
|
|
padding: 1rem 1.5rem !important;
|
|
position: relative !important;
|
|
}
|
|
|
|
.rz-card-header::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: var(--holographic-gradient);
|
|
background-size: 200% 100%;
|
|
animation: holographic-shift 3s ease-in-out infinite;
|
|
}
|
|
|
|
.rz-card-body {
|
|
padding: 1.5rem !important;
|
|
background: rgba(22, 33, 62, 0.3) !important;
|
|
}
|
|
|
|
/* Radzen Buttons */
|
|
.rz-button {
|
|
background: linear-gradient(135deg,
|
|
var(--tech-primary) 0%,
|
|
var(--tech-secondary) 100%) !important;
|
|
border: 1px solid var(--tech-accent) !important;
|
|
border-radius: 8px !important;
|
|
color: white !important;
|
|
font-weight: 600 !important;
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 0.5px !important;
|
|
transition: all var(--tech-transition-smooth) !important;
|
|
position: relative !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.rz-button::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -2px;
|
|
left: -2px;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
background: var(--holographic-gradient);
|
|
background-size: 200% 200%;
|
|
border-radius: inherit;
|
|
z-index: -1;
|
|
opacity: 0;
|
|
transition: opacity var(--tech-transition-smooth);
|
|
animation: holographic-shift 2s ease-in-out infinite;
|
|
}
|
|
|
|
.rz-button:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.rz-button:hover {
|
|
transform: translateY(-1px) !important;
|
|
/* box-shadow: var(--tech-glow-primary) !important; */
|
|
/* text-shadow: 0 0 10px rgba(255, 255, 255, 0.8) !important; */
|
|
}
|
|
|
|
.rz-button:active {
|
|
transform: scale(0.98) !important;
|
|
}
|
|
|
|
.rz-button-primary {
|
|
background: linear-gradient(135deg,
|
|
var(--tech-primary) 0%,
|
|
var(--tech-highlight) 100%) !important;
|
|
}
|
|
|
|
.rz-button-secondary {
|
|
background: linear-gradient(135deg,
|
|
var(--tech-dark-accent) 0%,
|
|
var(--tech-secondary) 100%) !important;
|
|
}
|
|
|
|
/* Radzen Data Grid */
|
|
.rz-datatable,
|
|
.rz-grid {
|
|
background: var(--tech-dark-surface) !important;
|
|
border: 1px solid rgba(138, 43, 226, 0.3) !important;
|
|
border-radius: 12px !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.rz-datatable-header,
|
|
.rz-grid-header {
|
|
background: linear-gradient(90deg,
|
|
var(--tech-dark-card) 0%,
|
|
var(--tech-dark-accent) 100%) !important;
|
|
color: var(--tech-metallic-chrome) !important;
|
|
font-weight: 600 !important;
|
|
border-bottom: 2px solid var(--tech-primary) !important;
|
|
}
|
|
|
|
.rz-datatable-header th,
|
|
.rz-grid-header th {
|
|
border-right: 1px solid rgba(138, 43, 226, 0.2) !important;
|
|
padding: 1rem !important;
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 0.5px !important;
|
|
font-size: 0.85rem !important;
|
|
}
|
|
|
|
.rz-datatable-data tr,
|
|
.rz-grid-table tr {
|
|
background: rgba(26, 10, 46, 0.5) !important;
|
|
border-bottom: 1px solid rgba(218, 112, 214, 0.1) !important;
|
|
transition: all var(--tech-transition-fast) !important;
|
|
}
|
|
|
|
.rz-datatable-data tr:hover,
|
|
.rz-grid-table tr:hover {
|
|
background: rgba(138, 43, 226, 0.1) !important;
|
|
box-shadow: inset 0 0 20px rgba(218, 112, 214, 0.1) !important;
|
|
}
|
|
|
|
.rz-datatable-data td,
|
|
.rz-grid-table td {
|
|
border-right: 1px solid rgba(138, 43, 226, 0.1) !important;
|
|
padding: 1rem !important;
|
|
color: var(--tech-metallic-chrome) !important;
|
|
}
|
|
|
|
/* Radzen Form Controls */
|
|
.rz-textbox,
|
|
.rz-dropdown,
|
|
.rz-multiselect,
|
|
.rz-textarea {
|
|
background: rgba(22, 33, 62, 0.8) !important;
|
|
border: 2px solid rgba(138, 43, 226, 0.3) !important;
|
|
border-radius: 8px !important;
|
|
color: var(--tech-metallic-chrome) !important;
|
|
padding: 0.75rem 1rem !important;
|
|
transition: all var(--tech-transition-smooth) !important;
|
|
backdrop-filter: blur(10px) !important;
|
|
}
|
|
|
|
.rz-textbox:focus,
|
|
.rz-dropdown:focus,
|
|
.rz-multiselect:focus,
|
|
.rz-textarea:focus {
|
|
border-color: var(--tech-primary) !important;
|
|
box-shadow:
|
|
var(--tech-glow-primary),
|
|
inset 0 0 20px rgba(138, 43, 226, 0.1) !important;
|
|
outline: none !important;
|
|
background: rgba(22, 33, 62, 1) !important;
|
|
}
|
|
|
|
.rz-textbox::placeholder,
|
|
.rz-dropdown::placeholder,
|
|
.rz-textarea::placeholder {
|
|
color: rgba(192, 192, 192, 0.6) !important;
|
|
font-style: italic !important;
|
|
}
|
|
|
|
/* Radzen Navigation */
|
|
.rz-navigation {
|
|
background: linear-gradient(180deg,
|
|
var(--tech-dark-surface) 0%,
|
|
var(--tech-dark-base) 100%) !important;
|
|
border-right: 1px solid rgba(138, 43, 226, 0.3) !important;
|
|
backdrop-filter: blur(20px) !important;
|
|
}
|
|
|
|
.rz-navigation-item {
|
|
color: var(--tech-metallic-chrome) !important;
|
|
padding: 0.75rem 1.5rem !important;
|
|
transition: all var(--tech-transition-fast) !important;
|
|
border-radius: 0 25px 25px 0 !important;
|
|
margin: 0.25rem 0 !important;
|
|
position: relative !important;
|
|
}
|
|
|
|
.rz-navigation-item:hover {
|
|
background: linear-gradient(90deg,
|
|
rgba(138, 43, 226, 0.2) 0%,
|
|
rgba(153, 50, 204, 0.1) 100%) !important;
|
|
color: var(--tech-accent) !important;
|
|
transform: translateX(5px) !important;
|
|
}
|
|
|
|
.rz-navigation-item.rz-state-active {
|
|
background: linear-gradient(90deg,
|
|
var(--tech-primary) 0%,
|
|
var(--tech-secondary) 100%) !important;
|
|
color: white !important;
|
|
box-shadow: var(--tech-glow-primary) !important;
|
|
}
|
|
|
|
.rz-navigation-item.rz-state-active::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: -1px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 3px;
|
|
background: var(--tech-neon);
|
|
box-shadow: var(--tech-glow-neon);
|
|
animation: neon-flicker 2s infinite;
|
|
}
|
|
|
|
/* Radzen Panels */
|
|
.rz-panel {
|
|
background: var(--tech-dark-surface) !important;
|
|
border: 1px solid rgba(138, 43, 226, 0.3) !important;
|
|
border-radius: 12px !important;
|
|
box-shadow: 0 8px 32px rgba(13, 0, 20, 0.6) !important;
|
|
backdrop-filter: blur(20px) !important;
|
|
}
|
|
|
|
.rz-panel-header {
|
|
background: linear-gradient(90deg,
|
|
var(--tech-dark-card) 0%,
|
|
var(--tech-dark-accent) 100%) !important;
|
|
border-bottom: 1px solid rgba(218, 112, 214, 0.3) !important;
|
|
color: var(--tech-metallic-chrome) !important;
|
|
font-weight: 600 !important;
|
|
padding: 1rem 1.5rem !important;
|
|
position: relative !important;
|
|
}
|
|
|
|
/* Radzen Dialogs */
|
|
.rz-dialog {
|
|
background: linear-gradient(135deg,
|
|
var(--tech-dark-surface) 0%,
|
|
var(--tech-dark-card) 100%) !important;
|
|
border: 2px solid var(--tech-primary) !important;
|
|
border-radius: 16px !important;
|
|
box-shadow:
|
|
0 20px 60px rgba(13, 0, 20, 0.9),
|
|
var(--tech-glow-primary) !important;
|
|
backdrop-filter: blur(30px) !important;
|
|
}
|
|
|
|
.rz-dialog-header {
|
|
background: linear-gradient(90deg,
|
|
rgba(138, 43, 226, 0.3) 0%,
|
|
rgba(153, 50, 204, 0.2) 100%) !important;
|
|
border-bottom: 1px solid rgba(218, 112, 214, 0.4) !important;
|
|
color: var(--tech-metallic-chrome) !important;
|
|
font-weight: 700 !important;
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 1px !important;
|
|
}
|
|
|
|
/* Radzen Notifications */
|
|
.rz-notification {
|
|
background: linear-gradient(135deg,
|
|
var(--tech-dark-surface) 0%,
|
|
var(--tech-dark-card) 100%) !important;
|
|
border: 1px solid var(--tech-primary) !important;
|
|
border-radius: 12px !important;
|
|
color: var(--tech-metallic-chrome) !important;
|
|
box-shadow:
|
|
0 8px 32px rgba(13, 0, 20, 0.8),
|
|
var(--tech-glow-primary) !important;
|
|
backdrop-filter: blur(20px) !important;
|
|
}
|
|
|
|
.rz-notification-success {
|
|
border-color: var(--tech-neon) !important;
|
|
box-shadow: var(--tech-glow-neon) !important;
|
|
}
|
|
|
|
.rz-notification-error {
|
|
border-color: var(--tech-highlight) !important;
|
|
box-shadow: 0 0 25px rgba(255, 0, 255, 0.7) !important;
|
|
}
|
|
|
|
/* Holographic Border Effect */
|
|
.tech-holographic-border {
|
|
position: relative;
|
|
border: 2px solid transparent !important;
|
|
background: linear-gradient(var(--tech-dark-surface), var(--tech-dark-surface)) padding-box,
|
|
var(--holographic-gradient) border-box !important;
|
|
background-size: 200% 200%;
|
|
animation: holographic-shift 3s ease-in-out infinite;
|
|
}
|
|
|
|
/* Tech Grid Pattern Overlay */
|
|
.tech-grid-overlay {
|
|
background-image:
|
|
linear-gradient(rgba(138, 43, 226, 0.1) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(138, 43, 226, 0.1) 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
}
|
|
|
|
/* Scrollbar Styling */
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
background: var(--tech-dark-base);
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: rgba(26, 10, 46, 0.5);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(180deg,
|
|
var(--tech-primary) 0%,
|
|
var(--tech-secondary) 100%);
|
|
border-radius: 6px;
|
|
border: 1px solid rgba(218, 112, 214, 0.3);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: linear-gradient(180deg,
|
|
var(--tech-accent) 0%,
|
|
var(--tech-highlight) 100%);
|
|
box-shadow: var(--tech-glow-accent);
|
|
}
|
|
|
|
/* Loading Spinner Override */
|
|
.rz-spinner {
|
|
border: 3px solid rgba(138, 43, 226, 0.3);
|
|
border-top: 3px solid var(--tech-primary);
|
|
box-shadow: var(--tech-glow-primary);
|
|
}
|
|
|
|
/* Mobile Responsive Adjustments */
|
|
@media (max-width: 768px) {
|
|
.rz-card {
|
|
margin: 0.5rem !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
.rz-button {
|
|
padding: 0.75rem 1.5rem !important;
|
|
font-size: 0.9rem !important;
|
|
}
|
|
|
|
.rz-navigation-item {
|
|
padding: 1rem !important;
|
|
border-radius: 0 20px 20px 0 !important;
|
|
}
|
|
}
|
|
|
|
/* Print Styles */
|
|
@media print {
|
|
body {
|
|
background: white !important;
|
|
color: black !important;
|
|
}
|
|
|
|
.rz-card {
|
|
background: white !important;
|
|
border: 1px solid #ccc !important;
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
/* High Contrast Mode */
|
|
@media (prefers-contrast: high) {
|
|
:root {
|
|
--tech-primary: #FF00FF;
|
|
--tech-secondary: #00FFFF;
|
|
--tech-accent: #FFFF00;
|
|
}
|
|
}
|
|
|
|
/* Reduced Motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* Dark Theme Class for Radzen */
|
|
.dark-theme {
|
|
--rz-primary: var(--tech-primary);
|
|
--rz-secondary: var(--tech-secondary);
|
|
--rz-success: var(--tech-neon);
|
|
--rz-info: var(--tech-accent);
|
|
--rz-warning: var(--tech-metallic-gold);
|
|
--rz-danger: var(--tech-highlight);
|
|
--rz-dark: var(--tech-dark-base);
|
|
--rz-light: var(--tech-metallic-chrome);
|
|
}
|
|
|
|
/* Tech Enhancement Classes */
|
|
.tech-glow {
|
|
box-shadow: var(--tech-glow-primary) !important;
|
|
animation: tech-pulse 2s infinite !important;
|
|
}
|
|
|
|
.tech-holographic {
|
|
background: var(--holographic-gradient) !important;
|
|
background-size: 200% 200% !important;
|
|
animation: holographic-shift 3s ease-in-out infinite !important;
|
|
-webkit-background-clip: text !important;
|
|
background-clip: text !important;
|
|
color: transparent !important;
|
|
}
|
|
|
|
.tech-neon {
|
|
color: var(--tech-neon) !important;
|
|
text-shadow: var(--tech-glow-neon) !important;
|
|
animation: neon-flicker 2s infinite !important;
|
|
} |