mahdahar
97451496c3
- Add new dialog forms for test calc, group, param, and title management - Refactor test_dialog.php to new location (master/tests/) - Update TestDefCalModel, TestDefSiteModel, TestDefTechModel, TestMapModel - Modify Tests controller and Routes for new dialog handlers - Update migration schema for test definitions - Add new styles for v2 test management interface - Include Test Management documentation files
914 lines
18 KiB
CSS
914 lines
18 KiB
CSS
/**
|
|
* CLQMS V2 - Custom Tailwind Design System
|
|
* Premium glassmorphism & modern aesthetics
|
|
*/
|
|
|
|
/* ============================================
|
|
CSS VARIABLES - DESIGN TOKENS
|
|
============================================ */
|
|
:root {
|
|
/* Primary Colors */
|
|
--color-primary: 30 64 175;
|
|
/* Blue 800 */
|
|
--color-primary-hover: 30 58 138;
|
|
/* Blue 900 */
|
|
--color-primary-light: 59 130 246;
|
|
/* Blue 500 */
|
|
|
|
/* Secondary Colors */
|
|
--color-secondary: 29 78 216;
|
|
/* Blue 700 */
|
|
--color-secondary-hover: 30 64 175;
|
|
/* Blue 800 */
|
|
|
|
/* Semantic Colors */
|
|
--color-success: 16 185 129;
|
|
/* Emerald 500 */
|
|
--color-warning: 245 158 11;
|
|
/* Amber 500 */
|
|
--color-error: 239 68 68;
|
|
/* Red 500 */
|
|
--color-info: 14 165 233;
|
|
/* Sky 500 */
|
|
|
|
/* Neutral Colors - Light Theme */
|
|
--color-text: 15 23 42;
|
|
/* Slate 900 */
|
|
--color-text-muted: 100 116 139;
|
|
/* Slate 500 */
|
|
--color-bg: 248 250 252;
|
|
/* Slate 50 */
|
|
--color-surface: 255 255 255;
|
|
/* White */
|
|
--color-border: 226 232 240;
|
|
/* Slate 200 */
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
|
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
|
|
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
|
|
/* Border Radius - Less rounded for modern aesthetic */
|
|
--radius-sm: 0.375rem;
|
|
--radius-md: 0.625rem;
|
|
--radius-lg: 0.75rem;
|
|
--radius-xl: 1rem;
|
|
|
|
/* Transitions */
|
|
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Dark Theme Variables */
|
|
[data-theme="dark"] {
|
|
--color-text: 248 250 252;
|
|
/* Slate 50 */
|
|
--color-text-muted: 148 163 184;
|
|
/* Slate 400 */
|
|
--color-bg: 15 23 42;
|
|
/* Slate 900 */
|
|
--color-surface: 30 41 59;
|
|
/* Slate 800 */
|
|
--color-border: 51 65 85;
|
|
/* Slate 700 */
|
|
}
|
|
|
|
/* ============================================
|
|
BASE STYLES
|
|
============================================ */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
background-color: rgb(var(--color-bg));
|
|
color: rgb(var(--color-text));
|
|
transition: background-color var(--transition-base), color var(--transition-base);
|
|
}
|
|
|
|
/* Smooth transitions for theme switching */
|
|
* {
|
|
transition-property: background-color, border-color, color, fill, stroke;
|
|
transition-duration: var(--transition-base);
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Remove transitions for transforms and opacity (performance) */
|
|
*:where(:not(:has(> *))) {
|
|
transition-property: background-color, border-color, color, fill, stroke, opacity, transform;
|
|
}
|
|
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: rgb(var(--color-bg));
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgb(var(--color-border));
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgb(var(--color-text-muted));
|
|
}
|
|
|
|
/* ============================================
|
|
UTILITY CLASSES
|
|
============================================ */
|
|
|
|
/* Alpine.js cloak */
|
|
[x-cloak] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Glass Effect */
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
[data-theme="dark"] .glass {
|
|
background: rgba(30, 41, 59, 0.8);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* ============================================
|
|
BUTTONS
|
|
============================================ */
|
|
|
|
/* Base Button */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.625rem 1.25rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
line-height: 1.25rem;
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
transition: all var(--transition-base);
|
|
border: none;
|
|
outline: none;
|
|
white-space: nowrap;
|
|
user-select: none;
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Primary Button */
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, rgb(var(--color-primary)), rgb(var(--color-secondary)));
|
|
color: white;
|
|
box-shadow: 0 4px 14px rgba(var(--color-primary), 0.4);
|
|
}
|
|
|
|
.btn-primary:hover:not(:disabled) {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(var(--color-primary), 0.5);
|
|
}
|
|
|
|
.btn-primary:active:not(:disabled) {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Secondary Button */
|
|
.btn-secondary {
|
|
background: rgb(var(--color-secondary));
|
|
color: white;
|
|
box-shadow: 0 4px 14px rgba(var(--color-secondary), 0.4);
|
|
}
|
|
|
|
.btn-secondary:hover:not(:disabled) {
|
|
background: rgb(var(--color-secondary-hover));
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Outline Buttons */
|
|
.btn-outline {
|
|
background: transparent;
|
|
border: 2px solid rgb(var(--color-primary));
|
|
color: rgb(var(--color-primary));
|
|
}
|
|
|
|
.btn-outline:hover:not(:disabled) {
|
|
background: rgb(var(--color-primary));
|
|
color: white;
|
|
}
|
|
|
|
.btn-outline-secondary {
|
|
border-color: rgb(var(--color-secondary));
|
|
color: rgb(var(--color-secondary));
|
|
}
|
|
|
|
.btn-outline-accent {
|
|
border-color: rgb(var(--color-info));
|
|
color: rgb(var(--color-info));
|
|
}
|
|
|
|
.btn-outline-info {
|
|
border-color: rgb(var(--color-info));
|
|
color: rgb(var(--color-info));
|
|
}
|
|
|
|
/* Ghost Button */
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: rgb(var(--color-text));
|
|
}
|
|
|
|
.btn-ghost:hover:not(:disabled) {
|
|
background: rgba(var(--color-text), 0.05);
|
|
}
|
|
|
|
[data-theme="dark"] .btn-ghost:hover:not(:disabled) {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Button Sizes */
|
|
.btn-sm {
|
|
padding: 0.375rem 0.875rem;
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.btn-lg {
|
|
padding: 0.875rem 1.75rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* Button Shapes */
|
|
.btn-square {
|
|
padding: 0.625rem;
|
|
aspect-ratio: 1;
|
|
}
|
|
|
|
.btn-circle {
|
|
padding: 0.625rem;
|
|
aspect-ratio: 1;
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
/* ============================================
|
|
CARDS
|
|
============================================ */
|
|
|
|
.card {
|
|
background: rgb(var(--color-surface));
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-md);
|
|
border: 1px solid rgb(var(--color-border) / 0.5);
|
|
overflow: hidden;
|
|
transition: all var(--transition-base);
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
/* Glass Card */
|
|
.card-glass {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow: var(--shadow-xl);
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
[data-theme="dark"] .card-glass {
|
|
background: rgba(30, 41, 59, 0.8);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Card with gradient border */
|
|
.card-gradient {
|
|
position: relative;
|
|
background: rgb(var(--color-surface));
|
|
border: none;
|
|
}
|
|
|
|
.card-gradient::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: var(--radius-lg);
|
|
padding: 1px;
|
|
background: linear-gradient(135deg, rgb(var(--color-primary)), rgb(var(--color-secondary)));
|
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
mask-composite: exclude;
|
|
}
|
|
|
|
/* Input with icon wrapper */
|
|
.input-icon-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.input-icon-wrapper .input-icon {
|
|
position: absolute;
|
|
left: 0.75rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
pointer-events: none;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.input-icon-wrapper .input {
|
|
padding-left: 2.5rem;
|
|
}
|
|
|
|
/* Input with left icon */
|
|
.input-with-icon-left {
|
|
padding-left: 2.5rem;
|
|
}
|
|
|
|
/* Input with right icon */
|
|
.input-with-icon-right {
|
|
padding-right: 2.5rem;
|
|
}
|
|
|
|
/* ============================================
|
|
INPUTS & FORMS
|
|
============================================ */
|
|
|
|
.input,
|
|
.select,
|
|
.textarea {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
color: rgb(var(--color-text));
|
|
background-color: rgb(var(--color-surface));
|
|
border: 1px solid rgb(var(--color-border));
|
|
border-radius: var(--radius-md);
|
|
transition: all var(--transition-base);
|
|
outline: none;
|
|
height: auto;
|
|
min-height: 42px;
|
|
}
|
|
|
|
/* Input with left icon - increased padding for icon */
|
|
.input.input-with-icon,
|
|
.input-with-icon.input {
|
|
padding-left: 2.75rem;
|
|
}
|
|
|
|
.input:focus,
|
|
.select:focus,
|
|
.textarea:focus {
|
|
border-color: rgb(var(--color-primary));
|
|
box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.15);
|
|
background-color: rgb(var(--color-surface));
|
|
}
|
|
|
|
.input:disabled,
|
|
.select:disabled,
|
|
.textarea:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Input with error */
|
|
.input-error {
|
|
border-color: rgb(var(--color-error));
|
|
}
|
|
|
|
.input-error:focus {
|
|
box-shadow: 0 0 0 3px rgba(var(--color-error), 0.15);
|
|
}
|
|
|
|
/* Checkbox */
|
|
.checkbox {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
border: 2px solid rgb(var(--color-border));
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
transition: all var(--transition-base);
|
|
appearance: none;
|
|
background-color: rgb(var(--color-surface));
|
|
}
|
|
|
|
.checkbox:checked {
|
|
background-color: rgb(var(--color-primary));
|
|
border-color: rgb(var(--color-primary));
|
|
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
.checkbox-sm {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
|
|
/* Label */
|
|
.label {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
.label-text {
|
|
font-size: 0.875rem;
|
|
color: rgb(var(--color-text));
|
|
}
|
|
|
|
.label-text-alt {
|
|
font-size: 0.75rem;
|
|
color: rgb(var(--color-text-muted));
|
|
}
|
|
|
|
/* ============================================
|
|
TABLES
|
|
============================================ */
|
|
|
|
.table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.table thead {
|
|
background: rgb(var(--color-bg));
|
|
border-bottom: 1px solid rgb(var(--color-border));
|
|
}
|
|
|
|
.table th {
|
|
padding: 0.5rem 0.75rem;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
color: rgb(var(--color-text-muted));
|
|
text-transform: uppercase;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.table td {
|
|
padding: 0.5rem 0.75rem;
|
|
border-bottom: 1px solid rgb(var(--color-border) / 0.5);
|
|
}
|
|
|
|
.table tbody tr {
|
|
transition: background-color var(--transition-fast);
|
|
}
|
|
|
|
.table tbody tr:hover {
|
|
background: rgb(var(--color-bg) / 0.5);
|
|
}
|
|
|
|
.table tbody tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Compact Table Variant */
|
|
.table.table-compact th,
|
|
.table.table-compact td {
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.table.table-compact .badge {
|
|
padding: 0.125rem 0.5rem;
|
|
font-size: 0.6875rem;
|
|
}
|
|
|
|
/* ============================================
|
|
BADGES
|
|
============================================ */
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
line-height: 1rem;
|
|
}
|
|
|
|
.badge-primary {
|
|
background: rgba(var(--color-primary), 0.15);
|
|
color: rgb(var(--color-primary));
|
|
}
|
|
|
|
.badge-secondary {
|
|
background: rgba(var(--color-secondary), 0.15);
|
|
color: rgb(var(--color-secondary));
|
|
}
|
|
|
|
.badge-success {
|
|
background: rgba(var(--color-success), 0.15);
|
|
color: rgb(var(--color-success));
|
|
}
|
|
|
|
.badge-warning {
|
|
background: rgba(var(--color-warning), 0.15);
|
|
color: rgb(var(--color-warning));
|
|
}
|
|
|
|
.badge-error {
|
|
background: rgba(var(--color-error), 0.15);
|
|
color: rgb(var(--color-error));
|
|
}
|
|
|
|
.badge-info {
|
|
background: rgba(var(--color-info), 0.15);
|
|
color: rgb(var(--color-info));
|
|
}
|
|
|
|
.badge-ghost {
|
|
background: rgba(var(--color-text), 0.1);
|
|
color: rgb(var(--color-text));
|
|
}
|
|
|
|
.badge-sm {
|
|
padding: 0.125rem 0.5rem;
|
|
font-size: 0.6875rem;
|
|
}
|
|
|
|
/* ============================================
|
|
ALERTS
|
|
============================================ */
|
|
|
|
.alert {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 1rem;
|
|
border-radius: var(--radius-md);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.alert-success {
|
|
background: rgba(var(--color-success), 0.1);
|
|
color: rgb(var(--color-success));
|
|
border: 1px solid rgba(var(--color-success), 0.3);
|
|
}
|
|
|
|
.alert-error {
|
|
background: rgba(var(--color-error), 0.1);
|
|
color: rgb(var(--color-error));
|
|
border: 1px solid rgba(var(--color-error), 0.3);
|
|
}
|
|
|
|
.alert-warning {
|
|
background: rgba(var(--color-warning), 0.1);
|
|
color: rgb(var(--color-warning));
|
|
border: 1px solid rgba(var(--color-warning), 0.3);
|
|
}
|
|
|
|
.alert-info {
|
|
background: rgba(var(--color-info), 0.1);
|
|
color: rgb(var(--color-info));
|
|
border: 1px solid rgba(var(--color-info), 0.3);
|
|
}
|
|
|
|
/* ============================================
|
|
MODALS
|
|
============================================ */
|
|
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
backdrop-filter: blur(4px);
|
|
-webkit-backdrop-filter: blur(4px);
|
|
z-index: 50;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.modal-content {
|
|
background: rgb(var(--color-surface));
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow-2xl);
|
|
max-width: 56rem;
|
|
width: 100%;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
animation: modalEnter var(--transition-slow) ease-out;
|
|
}
|
|
|
|
@keyframes modalEnter {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95) translateY(10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
LOADING SPINNER
|
|
============================================ */
|
|
|
|
.spinner {
|
|
display: inline-block;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
border: 2px solid rgba(var(--color-primary), 0.3);
|
|
border-top-color: rgb(var(--color-primary));
|
|
border-radius: 50%;
|
|
animation: spin 0.6s linear infinite;
|
|
}
|
|
|
|
.spinner-sm {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-width: 2px;
|
|
}
|
|
|
|
.spinner-lg {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-width: 3px;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
AVATAR
|
|
============================================ */
|
|
|
|
.avatar {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.avatar-circle {
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.avatar-rounded {
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
/* ============================================
|
|
DIVIDER
|
|
============================================ */
|
|
|
|
.divider {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin: 1.5rem 0;
|
|
color: rgb(var(--color-text-muted));
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.divider::before,
|
|
.divider::after {
|
|
content: '';
|
|
flex: 1;
|
|
height: 1px;
|
|
background: rgb(var(--color-border));
|
|
}
|
|
|
|
/* ============================================
|
|
DROPDOWN
|
|
============================================ */
|
|
|
|
.dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.dropdown-content {
|
|
position: absolute;
|
|
background: rgb(var(--color-surface));
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-xl);
|
|
border: 1px solid rgb(var(--color-border));
|
|
padding: 0.5rem;
|
|
min-width: 12rem;
|
|
z-index: 50;
|
|
animation: dropdownEnter var(--transition-fast) ease-out;
|
|
}
|
|
|
|
.dropdown-end .dropdown-content {
|
|
right: 0;
|
|
}
|
|
|
|
@keyframes dropdownEnter {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
MENU / NAVIGATION
|
|
============================================ */
|
|
|
|
.menu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.menu li {
|
|
display: block;
|
|
}
|
|
|
|
.menu a,
|
|
.menu button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: var(--radius-md);
|
|
color: rgb(var(--color-text));
|
|
text-decoration: none;
|
|
transition: all var(--transition-fast);
|
|
cursor: pointer;
|
|
border: none;
|
|
background: transparent;
|
|
width: 100%;
|
|
text-align: left;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.menu a:hover,
|
|
.menu button:hover {
|
|
background: rgb(var(--color-bg));
|
|
}
|
|
|
|
.menu a.active {
|
|
background: linear-gradient(135deg, rgb(var(--color-primary)), rgb(var(--color-secondary)));
|
|
color: white;
|
|
box-shadow: 0 4px 12px rgba(var(--color-primary), 0.4);
|
|
}
|
|
|
|
.menu-sm a,
|
|
.menu-sm button {
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
/* ============================================
|
|
SIDEBAR
|
|
============================================ */
|
|
|
|
.sidebar {
|
|
background: linear-gradient(180deg, rgb(30 41 59), rgb(15 23 42));
|
|
color: rgba(255, 255, 255, 0.9);
|
|
transition: width var(--transition-slow), transform var(--transition-slow);
|
|
}
|
|
|
|
[data-theme="dark"] .sidebar {
|
|
background: linear-gradient(180deg, rgb(15 23 42), rgb(0 0 0));
|
|
}
|
|
|
|
.sidebar .menu a,
|
|
.sidebar .menu button {
|
|
color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
.sidebar .menu a:hover,
|
|
.sidebar .menu button:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: white;
|
|
}
|
|
|
|
.sidebar .menu a.active {
|
|
background: linear-gradient(135deg, rgb(var(--color-primary)), rgb(var(--color-secondary)));
|
|
color: white;
|
|
}
|
|
|
|
/* ============================================
|
|
ANIMATIONS
|
|
============================================ */
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
to {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInLeft {
|
|
from {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
to {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInUp {
|
|
from {
|
|
transform: translateY(100%);
|
|
}
|
|
|
|
to {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.animate-fadeIn {
|
|
animation: fadeIn var(--transition-base) ease-out;
|
|
}
|
|
|
|
.animate-slideInRight {
|
|
animation: slideInRight var(--transition-slow) ease-out;
|
|
}
|
|
|
|
.animate-slideInLeft {
|
|
animation: slideInLeft var(--transition-slow) ease-out;
|
|
}
|
|
|
|
.animate-slideInUp {
|
|
animation: slideInUp var(--transition-slow) ease-out;
|
|
}
|
|
|
|
.animate-pulse {
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
/* ============================================
|
|
UTILITY CLASSES
|
|
============================================ */
|
|
|
|
.text-gradient {
|
|
background: linear-gradient(135deg, rgb(var(--color-primary)), rgb(var(--color-secondary)));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.shadow-glow {
|
|
box-shadow: 0 0 20px rgba(var(--color-primary), 0.3);
|
|
}
|
|
|
|
.border-gradient {
|
|
border: 2px solid transparent;
|
|
background-image: linear-gradient(rgb(var(--color-surface)), rgb(var(--color-surface))),
|
|
linear-gradient(135deg, rgb(var(--color-primary)), rgb(var(--color-secondary)));
|
|
background-origin: border-box;
|
|
background-clip: padding-box, border-box;
|
|
} |