Updated WebUI with Radzen and tailwind css
This commit is contained in:
@@ -0,0 +1,309 @@
|
||||
/* ===================================
|
||||
Seth Discord Bot - Tailwind + Radzen Integration
|
||||
Minimal Radzen Overrides Only
|
||||
=================================== */
|
||||
|
||||
/* ===================================
|
||||
CSS Variables (for Radzen compatibility)
|
||||
=================================== */
|
||||
:root {
|
||||
--primary: #8b5cf6;
|
||||
--primary-dark: #7c3aed;
|
||||
--accent: #d946ef;
|
||||
--success: #10b981;
|
||||
--danger: #ef4444;
|
||||
--warning: #f59e0b;
|
||||
--info: #3b82f6;
|
||||
--bg-primary: #0f172a;
|
||||
--bg-secondary: #1e293b;
|
||||
--bg-tertiary: #334155;
|
||||
--text-primary: #f1f5f9;
|
||||
--text-secondary: #94a3b8;
|
||||
--border-color: #334155;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Performance Optimizations
|
||||
=================================== */
|
||||
* {
|
||||
/* Disable animations for users who prefer reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* GPU acceleration for animated elements */
|
||||
.animate-float,
|
||||
.animate-pulse,
|
||||
.animate-glow {
|
||||
will-change: transform, opacity;
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Global Resets
|
||||
=================================== */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Radzen Layout Overrides
|
||||
=================================== */
|
||||
.rz-layout {
|
||||
min-height: 100vh;
|
||||
background: var(--bg-primary) !important;
|
||||
}
|
||||
|
||||
.rz-sidebar {
|
||||
width: 280px !important;
|
||||
min-width: 280px !important;
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
.rz-body {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.rz-header {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.rz-header {
|
||||
display: flex !important;
|
||||
background: var(--bg-secondary) !important;
|
||||
border-bottom: 1px solid var(--border-color) !important;
|
||||
}
|
||||
|
||||
.rz-sidebar {
|
||||
position: fixed !important;
|
||||
z-index: 1000;
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Radzen Panel Menu (Navigation)
|
||||
=================================== */
|
||||
.rz-panel-menu {
|
||||
background: transparent !important;
|
||||
padding: 0.5rem !important;
|
||||
}
|
||||
|
||||
.rz-panel-menu .rz-navigation-item-wrapper {
|
||||
border-radius: 12px !important;
|
||||
margin: 2px 0 !important;
|
||||
padding: 0.875rem 1rem !important;
|
||||
color: rgba(255, 255, 255, 0.75) !important;
|
||||
transition: all 0.2s ease !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.rz-panel-menu .rz-navigation-item-wrapper:hover {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.rz-panel-menu .rz-navigation-item-wrapper-active {
|
||||
background: rgba(255, 255, 255, 0.15) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.rz-panel-menu .rz-navigation-item-icon {
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
margin-right: 0.75rem !important;
|
||||
}
|
||||
|
||||
.rz-panel-menu .rz-navigation-item-text {
|
||||
font-weight: 500 !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.rz-panel-menu .rz-panel-menu-content {
|
||||
background: transparent !important;
|
||||
padding-left: 0.75rem !important;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Radzen Form Controls
|
||||
=================================== */
|
||||
.rz-textbox,
|
||||
.rz-textarea,
|
||||
.rz-dropdown,
|
||||
.rz-inputtext {
|
||||
background: var(--bg-tertiary) !important;
|
||||
border: 1px solid var(--border-color) !important;
|
||||
border-radius: 12px !important;
|
||||
color: var(--text-primary) !important;
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
|
||||
.rz-textbox:focus-within,
|
||||
.rz-textarea:focus-within,
|
||||
.rz-password:focus-within {
|
||||
border-color: var(--primary) !important;
|
||||
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2) !important;
|
||||
}
|
||||
|
||||
.rz-textbox input::placeholder,
|
||||
.rz-textarea textarea::placeholder {
|
||||
color: #64748b !important;
|
||||
}
|
||||
|
||||
/* Password field */
|
||||
.rz-password {
|
||||
background: var(--bg-tertiary) !important;
|
||||
border: 1px solid var(--border-color) !important;
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
|
||||
.rz-password input {
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Radzen Buttons
|
||||
=================================== */
|
||||
.rz-button {
|
||||
border-radius: 12px !important;
|
||||
font-weight: 500 !important;
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
|
||||
.rz-button:disabled {
|
||||
opacity: 0.5 !important;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Radzen Switch
|
||||
=================================== */
|
||||
.rz-switch.rz-switch-checked .rz-switch-circle {
|
||||
background: var(--primary) !important;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Radzen DataGrid
|
||||
=================================== */
|
||||
.rz-datatable {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
border-radius: 16px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rz-datatable .rz-datatable-thead > tr > th {
|
||||
background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
|
||||
color: white !important;
|
||||
font-weight: 600 !important;
|
||||
border: none !important;
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
.rz-datatable .rz-datatable-data > tr {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.rz-datatable .rz-datatable-data > tr:hover {
|
||||
background: rgba(255, 255, 255, 0.05) !important;
|
||||
}
|
||||
|
||||
.rz-datatable .rz-datatable-data > tr > td {
|
||||
border-color: var(--border-color) !important;
|
||||
padding: 0.875rem 1rem !important;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Radzen Progress Components
|
||||
=================================== */
|
||||
.rz-progressbar {
|
||||
background: var(--bg-tertiary) !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.rz-progressbar-value {
|
||||
background: linear-gradient(90deg, var(--primary), var(--accent)) !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Radzen Card
|
||||
=================================== */
|
||||
.rz-card {
|
||||
background: var(--bg-secondary) !important;
|
||||
border: 1px solid var(--border-color) !important;
|
||||
border-radius: 16px !important;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Radzen Badge
|
||||
=================================== */
|
||||
.rz-badge {
|
||||
border-radius: 8px !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Custom Scrollbar
|
||||
=================================== */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #64748b;
|
||||
}
|
||||
|
||||
/* Thin scrollbar for sidebars */
|
||||
.scrollbar-thin::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Blazor Error UI
|
||||
=================================== */
|
||||
#blazor-error-ui {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Line Clamp Utility (for plugin descriptions)
|
||||
=================================== */
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Console Component Styling
|
||||
=================================== */
|
||||
.console-container {
|
||||
background: #0d1117 !important;
|
||||
border-color: #21262d !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user