122 lines
2.4 KiB
CSS
122 lines
2.4 KiB
CSS
/* Modern UI Styles for DN-WRS */
|
|
|
|
:root {
|
|
--primary: #4361ee;
|
|
--primary-hover: #3a56d4;
|
|
--secondary: #7209b7;
|
|
--success: #4cc9f0;
|
|
--info: #4895ef;
|
|
--warning: #f72585;
|
|
--danger: #ef233c;
|
|
--dark: #2b2d42;
|
|
--light: #f8f9fa;
|
|
--glass: rgba(255, 255, 255, 0.7);
|
|
--glass-border: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
background: linear-gradient(135deg, #f6f8fd 0%, #f1f4f9 100%);
|
|
background-attachment: fixed;
|
|
color: var(--dark);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Glassmorphism */
|
|
.glass-card {
|
|
background: var(--glass);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
border: 1px solid var(--glass-border);
|
|
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
|
|
}
|
|
|
|
.card {
|
|
border: none;
|
|
border-radius: 1.25rem;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* Navbar */
|
|
.navbar-custom {
|
|
background: rgba(255, 255, 255, 0.8) !important;
|
|
backdrop-filter: blur(10px);
|
|
border-bottom: 1px solid var(--glass-border);
|
|
}
|
|
|
|
.navbar-brand {
|
|
font-size: 1.5rem;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn {
|
|
border-radius: 0.75rem;
|
|
padding: 0.6rem 1.5rem;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--primary);
|
|
border: none;
|
|
box-shadow: 0 4px 14px 0 rgba(67, 97, 238, 0.3);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--primary-hover);
|
|
transform: scale(1.02);
|
|
box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
|
|
}
|
|
|
|
/* Table */
|
|
.table {
|
|
border-collapse: separate;
|
|
border-spacing: 0 0.5rem;
|
|
}
|
|
|
|
.table tr {
|
|
background: white;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
|
|
border-radius: 0.75rem;
|
|
}
|
|
|
|
.table td, .table th {
|
|
padding: 1rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.table thead th {
|
|
background: transparent;
|
|
border: none;
|
|
text-transform: uppercase;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 1px;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fadeIn 0.6s ease-out forwards;
|
|
}
|
|
|
|
/* Stats Cards */
|
|
.stats-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 12px;
|
|
margin-bottom: 1rem;
|
|
} |