2159 lines
50 KiB
CSS
2159 lines
50 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@plugin '@tailwindcss/forms' {
|
|
strategy: class;
|
|
}
|
|
|
|
@plugin '@tailwindcss/typography';
|
|
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@source "../views";
|
|
@source "../../../extensions/**/*.blade.php";
|
|
|
|
/* =============================================================================
|
|
FONT DEFINITIONS
|
|
============================================================================= */
|
|
|
|
@font-face {
|
|
font-family: 'Figtree';
|
|
src: url('../fonts/Figtree/Figtree-VariableFont_wght.ttf') format('truetype');
|
|
font-display: swap;
|
|
unicode-range: U+0000-00FF;
|
|
font-style: normal;
|
|
font-weight: 200 800;
|
|
}
|
|
|
|
/* =============================================================================
|
|
PERFORMANCE OPTIMIZATIONS - CRITICAL FIXES
|
|
============================================================================= */
|
|
|
|
/* Remove excessive GPU layers and fix blur issues */
|
|
* {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
/* Remove blanket translateZ(0) that causes blur */
|
|
}
|
|
|
|
/* Only apply GPU acceleration to elements that truly need it */
|
|
.needs-gpu-acceleration {
|
|
will-change: transform, opacity;
|
|
transform: translateZ(0);
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
/* =============================================================================
|
|
THEME CONFIGURATION
|
|
============================================================================= */
|
|
|
|
@theme {
|
|
--font-sans: "Figtree", "Poppins", "Nunito", ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
|
|
@theme inline {
|
|
/* Branding Colors */
|
|
--color-primary: hsl(var(--color-primary));
|
|
--color-secondary: hsl(var(--color-secondary));
|
|
|
|
/* Neutral Colors */
|
|
--color-neutral: hsl(var(--color-neutral));
|
|
|
|
/* Text Colors */
|
|
--color-base: hsl(var(--color-base));
|
|
--color-muted: hsl(var(--color-muted));
|
|
--color-inverted: hsl(var(--color-inverted));
|
|
|
|
/* State Colors */
|
|
--color-success: hsl(var(--color-success));
|
|
--color-error: hsl(var(--color-error));
|
|
--color-warning: hsl(var(--color-warning));
|
|
--color-inactive: hsl(var(--color-inactive));
|
|
--color-info: hsl(var(--color-info));
|
|
|
|
/* Background Colors */
|
|
--color-background: hsl(var(--color-background));
|
|
--color-background-secondary: hsl(var(--color-background-secondary));
|
|
}
|
|
|
|
/* =============================================================================
|
|
BASE STYLES
|
|
============================================================================= */
|
|
|
|
@layer base {
|
|
*,
|
|
::after,
|
|
::before,
|
|
::backdrop,
|
|
::file-selector-button {
|
|
border-color: var(--color-gray-200, currentColor);
|
|
}
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* =============================================================================
|
|
UTILITIES - OPTIMIZED
|
|
============================================================================= */
|
|
|
|
@utility text-nowrap {
|
|
text-wrap: nowrap;
|
|
}
|
|
|
|
@utility text-wrap {
|
|
text-wrap: wrap;
|
|
}
|
|
|
|
/* Line clamp utilities - removed excessive containment */
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.line-clamp-3 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.line-clamp-4 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 4;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.prose ul {
|
|
list-style-type: disc !important;
|
|
padding-left: 1.5rem !important;
|
|
margin: 1rem 0 !important;
|
|
}
|
|
|
|
.prose ol {
|
|
list-style-type: decimal !important;
|
|
padding-left: 1.5rem !important;
|
|
margin: 1rem 0 !important;
|
|
}
|
|
|
|
.prose li {
|
|
margin: 0.5rem 0 !important;
|
|
display: list-item !important;
|
|
}
|
|
|
|
/* Untuk dark mode */
|
|
.dark .prose ul,
|
|
.dark .prose ol {
|
|
list-style-type: disc !important;
|
|
padding-left: 1.5rem !important;
|
|
}
|
|
|
|
.dark .prose ol {
|
|
list-style-type: decimal !important;
|
|
}
|
|
|
|
/* Custom scrollbar - simplified */
|
|
.custom-scrollbar {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--color-neutral) transparent;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background-color: var(--color-neutral);
|
|
border-radius: 9999px;
|
|
border: 1px solid transparent;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--color-primary);
|
|
}
|
|
|
|
/* =============================================================================
|
|
OPTIMIZED ANIMATION CLASSES - FIXED BLUR ISSUES
|
|
============================================================================= */
|
|
|
|
/* Remove excessive will-change and translateZ from animations */
|
|
.animate-fade-in-up {
|
|
animation: fadeInUp 0.6s ease-out forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
.animate-fade-in-down {
|
|
animation: fadeInDown 0.6s ease-out forwards;
|
|
}
|
|
|
|
.animate-fade-in-left {
|
|
animation: fadeInLeft 0.7s ease-out forwards;
|
|
}
|
|
|
|
.animate-fade-in-right {
|
|
animation: fadeInRight 0.7s ease-out forwards;
|
|
}
|
|
|
|
.form-fade-in {
|
|
animation: fade-in 0.8s ease-out forwards;
|
|
}
|
|
|
|
/* Only apply GPU acceleration to complex animations */
|
|
.animated-gradient {
|
|
background-size: 200% 200%;
|
|
animation: gradient-animation 10s ease infinite;
|
|
will-change: background-position;
|
|
}
|
|
|
|
.animate-gradient-flow {
|
|
animation: gradient-flow 3s ease infinite;
|
|
}
|
|
|
|
.cta-breathe {
|
|
animation: breathe 4s ease-in-out infinite;
|
|
}
|
|
|
|
.particle {
|
|
animation: float-particle 8s ease-in-out infinite;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
.reveal-on-scroll {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
}
|
|
|
|
.reveal-on-scroll.revealed {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Animation delays - removed translateZ(0) */
|
|
.animation-delay-100 { animation-delay: 0.1s; }
|
|
.animation-delay-200 { animation-delay: 0.2s; }
|
|
.animation-delay-300 { animation-delay: 0.3s; }
|
|
.animation-delay-400 { animation-delay: 0.4s; }
|
|
.animation-delay-600 { animation-delay: 0.6s; }
|
|
|
|
.animate-fade-in-up-delay-1 { animation-delay: 0.2s; }
|
|
.animate-fade-in-up-delay-2 { animation-delay: 0.4s; }
|
|
.animate-fade-in-up-delay-3 { animation-delay: 0.6s; }
|
|
.animate-fade-in-up-delay-4 { animation-delay: 0.8s; }
|
|
|
|
/* =============================================================================
|
|
KEYFRAME ANIMATIONS - SIMPLIFIED
|
|
============================================================================= */
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInLeft {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInRight {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes gradient-animation {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
@keyframes gradient-text {
|
|
0%, 100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
|
|
@keyframes gradient-flow {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
@keyframes float-particle {
|
|
0%, 100% {
|
|
transform: translateY(0) scale(1);
|
|
opacity: 0.3;
|
|
}
|
|
25% {
|
|
transform: translateY(-20px) scale(1.2);
|
|
opacity: 0.7;
|
|
}
|
|
50% {
|
|
transform: translateY(-10px) scale(0.8);
|
|
opacity: 0.5;
|
|
}
|
|
75% {
|
|
transform: translateY(-30px) scale(1.1);
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
@keyframes breathe {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.02); }
|
|
}
|
|
|
|
@keyframes blob {
|
|
0% { transform: translate(0, 0) scale(1); }
|
|
33% { transform: translate(30px, -50px) scale(1.1); }
|
|
66% { transform: translate(-20px, 20px) scale(0.9); }
|
|
100% { transform: translate(0, 0) scale(1); }
|
|
}
|
|
|
|
/* =============================================================================
|
|
COMPONENT STYLES - FIXED BLUR & PERFORMANCE
|
|
============================================================================= */
|
|
|
|
/* Hero title - removed excessive GPU layers */
|
|
.hero-title {
|
|
background: linear-gradient(45deg, hsl(var(--color-primary)), hsl(var(--color-secondary)), hsl(var(--color-primary)));
|
|
background-size: 200% 200%;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: gradient-text 3s ease-in-out infinite;
|
|
}
|
|
|
|
/* Magnetic effect - simplified */
|
|
[data-magnetic] {
|
|
transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
}
|
|
|
|
/* Navigation link styles */
|
|
x-navigation-link svg {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* =============================================================================
|
|
FORM STYLES - SIMPLIFIED
|
|
============================================================================= */
|
|
|
|
.form-input-container {
|
|
position: relative;
|
|
}
|
|
|
|
.form-input {
|
|
border: 1px solid hsl(var(--color-neutral));
|
|
border-radius: 0.375rem;
|
|
outline: none;
|
|
background: hsl(var(--color-background-secondary) / 0.5);
|
|
transition: border-color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
|
|
box-shadow 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
width: 100%;
|
|
padding: 0.625rem;
|
|
font-size: 0.875rem;
|
|
color: hsl(var(--color-base));
|
|
}
|
|
|
|
.form-input:focus {
|
|
border-color: hsl(var(--color-primary));
|
|
box-shadow: 0 0 0 2px hsl(var(--color-primary) / 0.3);
|
|
}
|
|
|
|
.form-input::placeholder {
|
|
color: hsl(var(--color-base) / 0.4);
|
|
}
|
|
|
|
.form-input-label {
|
|
position: absolute;
|
|
top: 0.625rem;
|
|
left: 0.625rem;
|
|
color: #a3a3a3;
|
|
pointer-events: none;
|
|
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
}
|
|
|
|
.form-input:focus + .form-input-label,
|
|
.form-input:not(:placeholder-shown) + .form-input-label {
|
|
transform: translateY(-22px);
|
|
font-size: 12px;
|
|
color: hsl(var(--color-primary));
|
|
}
|
|
|
|
.form-radio:checked {
|
|
background-color: var(--color-primary);
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.form-radio:focus {
|
|
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
|
|
}
|
|
|
|
/* =============================================================================
|
|
HOVER EFFECTS - OPTIMIZED FOR RESPONSIVENESS
|
|
============================================================================= */
|
|
|
|
/* Category cards - improved hover without blur */
|
|
.category-card {
|
|
transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
}
|
|
|
|
.category-card:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.category-card:hover .category-icon svg {
|
|
filter: drop-shadow(0 0 10px hsl(var(--color-primary)));
|
|
}
|
|
|
|
.category-card:hover .category-icon {
|
|
transform: scale(1.1) rotate(15deg);
|
|
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.category-card img {
|
|
transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
}
|
|
|
|
.category-card:hover img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.feature-card {
|
|
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
}
|
|
|
|
.feature-card:hover {
|
|
background: linear-gradient(135deg, hsl(var(--color-background-secondary))/50, hsl(var(--color-primary))/5);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Group hover effects - simplified */
|
|
.group:hover .group-hover\:scale-110 {
|
|
transform: scale(1.1);
|
|
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.group\/btn:hover .group-hover\/btn\:translate-x-1 {
|
|
transform: translateX(0.25rem);
|
|
transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
}
|
|
|
|
.group\/btn:hover .group-hover\/btn\:scale-110 {
|
|
transform: scale(1.1);
|
|
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.group\/nav:hover .group-hover\/nav\:translate-x-1 {
|
|
transform: translateX(0.25rem);
|
|
transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
}
|
|
|
|
.group\/radio:hover .group-hover\/radio\:translate-x-1 {
|
|
transform: translateX(0.25rem);
|
|
transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
}
|
|
|
|
.group\/radio:hover .group-hover\/radio\:opacity-100 {
|
|
opacity: 1;
|
|
transition: opacity 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
}
|
|
|
|
/* =============================================================================
|
|
BUTTON IMPROVEMENTS - BETTER CLICK HANDLING
|
|
============================================================================= */
|
|
|
|
.btn-primary {
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.btn-primary:active {
|
|
transform: translateY(0);
|
|
transition-duration: 0.1s;
|
|
}
|
|
|
|
.btn-primary:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
transform: none !important;
|
|
}
|
|
|
|
/* Loading state for buttons */
|
|
.btn-loading {
|
|
pointer-events: none;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.btn-loading::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: -8px 0 0 -8px;
|
|
border: 2px solid transparent;
|
|
border-top-color: currentColor;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* =============================================================================
|
|
RESPONSIVE FIXES
|
|
============================================================================= */
|
|
|
|
/* Better mobile touch targets */
|
|
@media (max-width: 768px) {
|
|
.btn-primary,
|
|
.category-card,
|
|
.feature-card {
|
|
min-height: 44px; /* Better touch target */
|
|
}
|
|
|
|
/* Reduce complex animations on mobile */
|
|
.particle {
|
|
display: none;
|
|
}
|
|
|
|
.animated-gradient {
|
|
animation-duration: 15s;
|
|
}
|
|
|
|
/* Prevent hover states on touch devices */
|
|
.category-card:hover,
|
|
.feature-card:hover {
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
/* Better desktop interactions */
|
|
@media (min-width: 769px) {
|
|
/* Enable smooth hover only on devices that support it */
|
|
@media (hover: hover) {
|
|
.category-card:hover {
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Reduce motion for accessibility */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
::before,
|
|
::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
|
|
.reveal-on-scroll {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
|
|
.particle {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* =============================================================================
|
|
LOADING STATES & SKELETON
|
|
============================================================================= */
|
|
|
|
.skeleton {
|
|
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
|
background-size: 200% 100%;
|
|
animation: skeleton-loading 1.5s infinite;
|
|
}
|
|
|
|
/* Enhanced skeleton shimmer for dark themes */
|
|
.skeleton-shimmer {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: hsl(var(--neutral) / 0.2);
|
|
}
|
|
|
|
.skeleton-shimmer::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
hsl(var(--neutral) / 0.3) 50%,
|
|
transparent 100%
|
|
);
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
@keyframes skeleton-loading {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
|
|
/* Status badge pulse animation for active states */
|
|
.status-pulse {
|
|
animation: status-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes status-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.7; }
|
|
}
|
|
|
|
/* Smooth page transitions for Livewire navigate */
|
|
[wire\:navigate] {
|
|
view-transition-name: page;
|
|
}
|
|
|
|
::view-transition-old(page) {
|
|
animation: fade-out 150ms ease-out;
|
|
}
|
|
|
|
::view-transition-new(page) {
|
|
animation: fade-in 150ms ease-in;
|
|
}
|
|
|
|
@keyframes fade-out {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; }
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
/* =============================================================================
|
|
BUTTON LOADING SPINNER
|
|
============================================================================= */
|
|
|
|
.loader {
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
background: url('/themes/lucentui/5582262.png') no-repeat center/contain;
|
|
animation: loader-spin 1s linear infinite;
|
|
}
|
|
|
|
/* Use filter to match button text color when inside colored buttons */
|
|
.loader-inherit {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
.loader-sm {
|
|
width: 0.875em;
|
|
height: 0.875em;
|
|
}
|
|
|
|
.loader-lg {
|
|
width: 1.25em;
|
|
height: 1.25em;
|
|
}
|
|
|
|
@keyframes loader-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* =============================================================================
|
|
CRITICAL PERFORMANCE FIXES
|
|
============================================================================= */
|
|
|
|
/* Remove excessive containment and layers */
|
|
.category-card,
|
|
.feature-card {
|
|
/* Only add containment where truly needed */
|
|
contain: layout;
|
|
}
|
|
|
|
/* Optimize text rendering */
|
|
.hero-title,
|
|
h1, h2, h3, h4, h5, h6 {
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* Optimize images */
|
|
img {
|
|
image-rendering: auto;
|
|
-webkit-user-drag: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Better scroll performance */
|
|
.custom-scrollbar {
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* =============================================================================
|
|
EASYMDE STYLES
|
|
============================================================================= */
|
|
|
|
@import './easymde.css';
|
|
|
|
/* =============================================================================
|
|
ADMINLTE-STYLE CSS FRAMEWORK
|
|
Based on AdminLTE v4 (Bootstrap 5) styling patterns
|
|
https://github.com/ColorlibHQ/AdminLTE
|
|
============================================================================= */
|
|
|
|
/* AdminLTE CSS Variables */
|
|
:root {
|
|
/* AdminLTE Color Palette */
|
|
--lte-primary: #0d6efd;
|
|
--lte-primary-rgb: 13, 110, 253;
|
|
--lte-secondary: #6c757d;
|
|
--lte-secondary-rgb: 108, 117, 125;
|
|
--lte-success: #198754;
|
|
--lte-success-rgb: 25, 135, 84;
|
|
--lte-info: #0dcaf0;
|
|
--lte-info-rgb: 13, 202, 240;
|
|
--lte-warning: #ffc107;
|
|
--lte-warning-rgb: 255, 193, 7;
|
|
--lte-danger: #dc3545;
|
|
--lte-danger-rgb: 220, 53, 69;
|
|
--lte-light: #f8f9fa;
|
|
--lte-light-rgb: 248, 249, 250;
|
|
--lte-dark: #212529;
|
|
--lte-dark-rgb: 33, 37, 41;
|
|
|
|
/* AdminLTE Card Shadow */
|
|
--lte-card-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
--lte-card-shadow-hover: 0 0 2px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
|
|
/* AdminLTE Transitions */
|
|
--lte-transition-speed: 0.3s;
|
|
--lte-transition-fn: ease-in-out;
|
|
|
|
/* AdminLTE Body Colors */
|
|
--lte-body-bg: #f4f6f9;
|
|
--lte-body-color: #212529;
|
|
--lte-border-color: #dee2e6;
|
|
|
|
/* AdminLTE Card */
|
|
--lte-card-bg: #ffffff;
|
|
--lte-card-border-radius: 0.25rem;
|
|
--lte-card-border-color: rgba(0, 0, 0, 0.125);
|
|
|
|
/* AdminLTE Input */
|
|
--lte-input-border-color: #ced4da;
|
|
--lte-input-focus-border-color: #86b7fe;
|
|
--lte-input-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
|
}
|
|
|
|
/* Dark mode variables */
|
|
.dark, [data-theme="dark"] {
|
|
--lte-body-bg: #343a40;
|
|
--lte-body-color: #e9ecef;
|
|
--lte-border-color: #495057;
|
|
--lte-card-bg: #3c4248;
|
|
--lte-card-border-color: rgba(255, 255, 255, 0.075);
|
|
--lte-input-border-color: #495057;
|
|
--lte-card-shadow: 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* AdminLTE Card Component */
|
|
.lte-card {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
word-wrap: break-word;
|
|
background-color: var(--lte-card-bg);
|
|
background-clip: border-box;
|
|
border: 1px solid var(--lte-card-border-color);
|
|
border-radius: var(--lte-card-border-radius);
|
|
box-shadow: var(--lte-card-shadow);
|
|
margin-bottom: 1rem;
|
|
transition: box-shadow var(--lte-transition-speed) var(--lte-transition-fn);
|
|
}
|
|
|
|
.lte-card:hover {
|
|
box-shadow: var(--lte-card-shadow-hover);
|
|
}
|
|
|
|
.lte-card-header {
|
|
padding: 0.75rem 1.25rem;
|
|
margin-bottom: 0;
|
|
background-color: transparent;
|
|
border-bottom: 1px solid var(--lte-card-border-color);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.lte-card-header .lte-card-title {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
font-weight: 400;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.lte-card-header .lte-card-title i,
|
|
.lte-card-header .lte-card-title svg {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.lte-card-tools {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.lte-card-body {
|
|
flex: 1 1 auto;
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.lte-card-footer {
|
|
padding: 0.75rem 1.25rem;
|
|
background-color: transparent;
|
|
border-top: 1px solid var(--lte-card-border-color);
|
|
}
|
|
|
|
/* Card Variants */
|
|
.lte-card-primary {
|
|
border-top: 3px solid var(--lte-primary);
|
|
}
|
|
|
|
.lte-card-success {
|
|
border-top: 3px solid var(--lte-success);
|
|
}
|
|
|
|
.lte-card-warning {
|
|
border-top: 3px solid var(--lte-warning);
|
|
}
|
|
|
|
.lte-card-danger {
|
|
border-top: 3px solid var(--lte-danger);
|
|
}
|
|
|
|
.lte-card-info {
|
|
border-top: 3px solid var(--lte-info);
|
|
}
|
|
|
|
/* Card Outline Variants */
|
|
.lte-card-outline-primary {
|
|
border: 1px solid var(--lte-primary);
|
|
border-top-width: 3px;
|
|
}
|
|
|
|
.lte-card-outline-success {
|
|
border: 1px solid var(--lte-success);
|
|
border-top-width: 3px;
|
|
}
|
|
|
|
.lte-card-outline-warning {
|
|
border: 1px solid var(--lte-warning);
|
|
border-top-width: 3px;
|
|
}
|
|
|
|
.lte-card-outline-danger {
|
|
border: 1px solid var(--lte-danger);
|
|
border-top-width: 3px;
|
|
}
|
|
|
|
/* AdminLTE Buttons */
|
|
.lte-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
background-color: transparent;
|
|
border: 1px solid transparent;
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 1rem;
|
|
border-radius: 0.25rem;
|
|
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
|
|
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
}
|
|
|
|
.lte-btn:focus, .lte-btn:focus-visible {
|
|
outline: 0;
|
|
box-shadow: 0 0 0 0.25rem rgba(var(--lte-primary-rgb), 0.25);
|
|
}
|
|
|
|
.lte-btn:disabled, .lte-btn.disabled {
|
|
opacity: 0.65;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.lte-btn-sm {
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.875rem;
|
|
border-radius: 0.2rem;
|
|
}
|
|
|
|
.lte-btn-lg {
|
|
padding: 0.5rem 1rem;
|
|
font-size: 1.25rem;
|
|
border-radius: 0.3rem;
|
|
}
|
|
|
|
.lte-btn-primary {
|
|
color: #fff;
|
|
background-color: var(--lte-primary);
|
|
border-color: var(--lte-primary);
|
|
}
|
|
|
|
.lte-btn-primary:hover {
|
|
color: #fff;
|
|
background-color: #0b5ed7;
|
|
border-color: #0a58ca;
|
|
}
|
|
|
|
.lte-btn-primary:focus {
|
|
box-shadow: 0 0 0 0.25rem rgba(var(--lte-primary-rgb), 0.5);
|
|
}
|
|
|
|
.lte-btn-secondary {
|
|
color: #fff;
|
|
background-color: var(--lte-secondary);
|
|
border-color: var(--lte-secondary);
|
|
}
|
|
|
|
.lte-btn-secondary:hover {
|
|
color: #fff;
|
|
background-color: #5c636a;
|
|
border-color: #565e64;
|
|
}
|
|
|
|
.lte-btn-success {
|
|
color: #fff;
|
|
background-color: var(--lte-success);
|
|
border-color: var(--lte-success);
|
|
}
|
|
|
|
.lte-btn-success:hover {
|
|
color: #fff;
|
|
background-color: #157347;
|
|
border-color: #146c43;
|
|
}
|
|
|
|
.lte-btn-danger {
|
|
color: #fff;
|
|
background-color: var(--lte-danger);
|
|
border-color: var(--lte-danger);
|
|
}
|
|
|
|
.lte-btn-danger:hover {
|
|
color: #fff;
|
|
background-color: #bb2d3b;
|
|
border-color: #b02a37;
|
|
}
|
|
|
|
.lte-btn-warning {
|
|
color: #000;
|
|
background-color: var(--lte-warning);
|
|
border-color: var(--lte-warning);
|
|
}
|
|
|
|
.lte-btn-warning:hover {
|
|
color: #000;
|
|
background-color: #ffca2c;
|
|
border-color: #ffc720;
|
|
}
|
|
|
|
.lte-btn-info {
|
|
color: #000;
|
|
background-color: var(--lte-info);
|
|
border-color: var(--lte-info);
|
|
}
|
|
|
|
.lte-btn-info:hover {
|
|
color: #000;
|
|
background-color: #31d2f2;
|
|
border-color: #25cff2;
|
|
}
|
|
|
|
/* Outline Buttons */
|
|
.lte-btn-outline-primary {
|
|
color: var(--lte-primary);
|
|
border-color: var(--lte-primary);
|
|
}
|
|
|
|
.lte-btn-outline-primary:hover {
|
|
color: #fff;
|
|
background-color: var(--lte-primary);
|
|
}
|
|
|
|
.lte-btn-outline-secondary {
|
|
color: var(--lte-secondary);
|
|
border-color: var(--lte-secondary);
|
|
}
|
|
|
|
.lte-btn-outline-secondary:hover {
|
|
color: #fff;
|
|
background-color: var(--lte-secondary);
|
|
}
|
|
|
|
.lte-btn-outline-success {
|
|
color: var(--lte-success);
|
|
border-color: var(--lte-success);
|
|
}
|
|
|
|
.lte-btn-outline-success:hover {
|
|
color: #fff;
|
|
background-color: var(--lte-success);
|
|
}
|
|
|
|
.lte-btn-outline-danger {
|
|
color: var(--lte-danger);
|
|
border-color: var(--lte-danger);
|
|
}
|
|
|
|
.lte-btn-outline-danger:hover {
|
|
color: #fff;
|
|
background-color: var(--lte-danger);
|
|
}
|
|
|
|
/* App Button (AdminLTE specific) */
|
|
.lte-btn-app {
|
|
position: relative;
|
|
padding: 15px 5px;
|
|
margin: 0 0 10px 10px;
|
|
min-width: 80px;
|
|
height: 70px;
|
|
text-align: center;
|
|
color: var(--lte-secondary);
|
|
border: 1px solid var(--lte-border-color);
|
|
background-color: var(--lte-light);
|
|
font-size: 12px;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.lte-btn-app > .lte-icon,
|
|
.lte-btn-app > svg {
|
|
font-size: 20px;
|
|
display: block;
|
|
}
|
|
|
|
.lte-btn-app:hover {
|
|
background: var(--lte-primary);
|
|
color: #fff;
|
|
border-color: var(--lte-primary);
|
|
}
|
|
|
|
/* AdminLTE Form Controls */
|
|
.lte-form-control {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
color: var(--lte-body-color);
|
|
background-color: var(--lte-card-bg);
|
|
background-clip: padding-box;
|
|
border: 1px solid var(--lte-input-border-color);
|
|
appearance: none;
|
|
border-radius: 0.25rem;
|
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
}
|
|
|
|
.lte-form-control:focus {
|
|
color: var(--lte-body-color);
|
|
background-color: var(--lte-card-bg);
|
|
border-color: var(--lte-input-focus-border-color);
|
|
outline: 0;
|
|
box-shadow: var(--lte-input-focus-shadow);
|
|
}
|
|
|
|
.lte-form-control::placeholder {
|
|
color: var(--lte-secondary);
|
|
opacity: 1;
|
|
}
|
|
|
|
.lte-form-control:disabled {
|
|
background-color: var(--lte-light);
|
|
opacity: 1;
|
|
}
|
|
|
|
.lte-form-control-sm {
|
|
min-height: calc(1.5em + 0.5rem + 2px);
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.875rem;
|
|
border-radius: 0.2rem;
|
|
}
|
|
|
|
.lte-form-control-lg {
|
|
min-height: calc(1.5em + 1rem + 2px);
|
|
padding: 0.5rem 1rem;
|
|
font-size: 1.25rem;
|
|
border-radius: 0.3rem;
|
|
}
|
|
|
|
/* AdminLTE Form Select */
|
|
.lte-form-select {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0.375rem 2.25rem 0.375rem 0.75rem;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
color: var(--lte-body-color);
|
|
background-color: var(--lte-card-bg);
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-position: right 0.75rem center;
|
|
background-size: 16px 12px;
|
|
border: 1px solid var(--lte-input-border-color);
|
|
border-radius: 0.25rem;
|
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
appearance: none;
|
|
}
|
|
|
|
.lte-form-select:focus {
|
|
border-color: var(--lte-input-focus-border-color);
|
|
outline: 0;
|
|
box-shadow: var(--lte-input-focus-shadow);
|
|
}
|
|
|
|
/* AdminLTE Input Group */
|
|
.lte-input-group {
|
|
position: relative;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
}
|
|
|
|
.lte-input-group > .lte-form-control,
|
|
.lte-input-group > .lte-form-select {
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
width: 1%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.lte-input-group-text {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
color: var(--lte-body-color);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
background-color: var(--lte-light);
|
|
border: 1px solid var(--lte-input-border-color);
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
/* AdminLTE Badges */
|
|
.lte-badge {
|
|
display: inline-block;
|
|
padding: 0.35em 0.65em;
|
|
font-size: 0.75em;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
color: #fff;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
vertical-align: baseline;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.lte-badge-primary { background-color: var(--lte-primary); }
|
|
.lte-badge-secondary { background-color: var(--lte-secondary); }
|
|
.lte-badge-success { background-color: var(--lte-success); }
|
|
.lte-badge-danger { background-color: var(--lte-danger); }
|
|
.lte-badge-warning { background-color: var(--lte-warning); color: #000; }
|
|
.lte-badge-info { background-color: var(--lte-info); color: #000; }
|
|
.lte-badge-light { background-color: var(--lte-light); color: #000; }
|
|
.lte-badge-dark { background-color: var(--lte-dark); }
|
|
|
|
/* AdminLTE Alerts */
|
|
.lte-alert {
|
|
position: relative;
|
|
padding: 1rem 1rem;
|
|
margin-bottom: 1rem;
|
|
border: 1px solid transparent;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.lte-alert-primary {
|
|
color: #084298;
|
|
background-color: #cfe2ff;
|
|
border-color: #b6d4fe;
|
|
}
|
|
|
|
.lte-alert-success {
|
|
color: #0f5132;
|
|
background-color: #d1e7dd;
|
|
border-color: #badbcc;
|
|
}
|
|
|
|
.lte-alert-warning {
|
|
color: #664d03;
|
|
background-color: #fff3cd;
|
|
border-color: #ffecb5;
|
|
}
|
|
|
|
.lte-alert-danger {
|
|
color: #842029;
|
|
background-color: #f8d7da;
|
|
border-color: #f5c2c7;
|
|
}
|
|
|
|
.lte-alert-info {
|
|
color: #055160;
|
|
background-color: #cff4fc;
|
|
border-color: #b6effb;
|
|
}
|
|
|
|
.lte-alert-dismissible {
|
|
padding-right: 3rem;
|
|
}
|
|
|
|
.lte-alert-dismissible .lte-btn-close {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 2;
|
|
padding: 1.25rem 1rem;
|
|
}
|
|
|
|
/* AdminLTE Callout (AdminLTE specific) */
|
|
.lte-callout {
|
|
padding: 1.25rem;
|
|
margin-bottom: 1.25rem;
|
|
border: 1px solid var(--lte-border-color);
|
|
border-left-width: 5px;
|
|
border-radius: 0.25rem;
|
|
background-color: var(--lte-card-bg);
|
|
}
|
|
|
|
.lte-callout-primary { border-left-color: var(--lte-primary); }
|
|
.lte-callout-success { border-left-color: var(--lte-success); }
|
|
.lte-callout-warning { border-left-color: var(--lte-warning); }
|
|
.lte-callout-danger { border-left-color: var(--lte-danger); }
|
|
.lte-callout-info { border-left-color: var(--lte-info); }
|
|
|
|
.lte-callout h5 {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.lte-callout p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* AdminLTE Progress Bars */
|
|
.lte-progress {
|
|
display: flex;
|
|
height: 1rem;
|
|
overflow: hidden;
|
|
font-size: 0.75rem;
|
|
background-color: #e9ecef;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.lte-progress-bar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
color: #fff;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
background-color: var(--lte-primary);
|
|
transition: width 0.6s ease;
|
|
}
|
|
|
|
.lte-progress-bar-striped {
|
|
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
background-size: 1rem 1rem;
|
|
}
|
|
|
|
.lte-progress-bar-animated {
|
|
animation: progress-bar-stripes 1s linear infinite;
|
|
}
|
|
|
|
@keyframes progress-bar-stripes {
|
|
0% { background-position-x: 1rem; }
|
|
}
|
|
|
|
.lte-progress-sm {
|
|
height: 0.5rem;
|
|
}
|
|
|
|
.lte-progress-xs {
|
|
height: 0.25rem;
|
|
}
|
|
|
|
/* AdminLTE Tables */
|
|
.lte-table {
|
|
width: 100%;
|
|
margin-bottom: 1rem;
|
|
color: var(--lte-body-color);
|
|
vertical-align: top;
|
|
border-color: var(--lte-border-color);
|
|
}
|
|
|
|
.lte-table > :not(caption) > * > * {
|
|
padding: 0.5rem 0.5rem;
|
|
background-color: transparent;
|
|
border-bottom-width: 1px;
|
|
box-shadow: inset 0 0 0 9999px transparent;
|
|
}
|
|
|
|
.lte-table > tbody {
|
|
vertical-align: inherit;
|
|
}
|
|
|
|
.lte-table > thead {
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.lte-table-striped > tbody > tr:nth-of-type(odd) > * {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.lte-table-hover > tbody > tr:hover > * {
|
|
background-color: rgba(0, 0, 0, 0.075);
|
|
}
|
|
|
|
.lte-table-bordered > :not(caption) > * {
|
|
border-width: 1px 0;
|
|
}
|
|
|
|
.lte-table-bordered > :not(caption) > * > * {
|
|
border-width: 0 1px;
|
|
}
|
|
|
|
/* AdminLTE Small Box (Widget) */
|
|
.lte-small-box {
|
|
border-radius: 0.25rem;
|
|
box-shadow: var(--lte-card-shadow);
|
|
display: block;
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.lte-small-box > .lte-inner {
|
|
padding: 10px;
|
|
}
|
|
|
|
.lte-small-box > .lte-inner > h3 {
|
|
font-size: 2.2rem;
|
|
font-weight: 700;
|
|
margin: 0 0 10px 0;
|
|
white-space: nowrap;
|
|
padding: 0;
|
|
}
|
|
|
|
.lte-small-box > .lte-inner > p {
|
|
font-size: 1rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.lte-small-box > .lte-icon {
|
|
color: rgba(0, 0, 0, 0.15);
|
|
z-index: 0;
|
|
}
|
|
|
|
.lte-small-box > .lte-icon > svg {
|
|
font-size: 90px;
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 15px;
|
|
transition: transform var(--lte-transition-speed) var(--lte-transition-fn);
|
|
}
|
|
|
|
.lte-small-box:hover > .lte-icon > svg {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.lte-small-box > .lte-small-box-footer {
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
color: rgba(255, 255, 255, 0.8);
|
|
display: block;
|
|
padding: 3px 0;
|
|
position: relative;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
.lte-small-box > .lte-small-box-footer:hover {
|
|
background-color: rgba(0, 0, 0, 0.15);
|
|
color: #fff;
|
|
}
|
|
|
|
/* Small Box Color Variants */
|
|
.lte-small-box.bg-primary { background-color: var(--lte-primary) !important; color: #fff; }
|
|
.lte-small-box.bg-success { background-color: var(--lte-success) !important; color: #fff; }
|
|
.lte-small-box.bg-warning { background-color: var(--lte-warning) !important; color: #000; }
|
|
.lte-small-box.bg-danger { background-color: var(--lte-danger) !important; color: #fff; }
|
|
.lte-small-box.bg-info { background-color: var(--lte-info) !important; color: #000; }
|
|
|
|
/* AdminLTE Info Box */
|
|
.lte-info-box {
|
|
box-shadow: var(--lte-card-shadow);
|
|
border-radius: 0.25rem;
|
|
background-color: var(--lte-card-bg);
|
|
display: flex;
|
|
margin-bottom: 1rem;
|
|
min-height: 80px;
|
|
padding: 0.5rem;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.lte-info-box .lte-info-box-icon {
|
|
border-radius: 0.25rem;
|
|
align-items: center;
|
|
display: flex;
|
|
font-size: 1.875rem;
|
|
justify-content: center;
|
|
text-align: center;
|
|
width: 70px;
|
|
}
|
|
|
|
.lte-info-box .lte-info-box-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
line-height: 1.8;
|
|
flex: 1;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.lte-info-box .lte-info-box-text,
|
|
.lte-info-box .lte-progress-description {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.lte-info-box .lte-info-box-number {
|
|
display: block;
|
|
font-weight: 700;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
/* AdminLTE Modal Overlay */
|
|
.lte-modal-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 1040;
|
|
transition: opacity 0.15s linear;
|
|
}
|
|
|
|
.lte-modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1050;
|
|
display: none;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
outline: 0;
|
|
}
|
|
|
|
.lte-modal-dialog {
|
|
position: relative;
|
|
width: auto;
|
|
margin: 0.5rem;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
.lte-modal-dialog {
|
|
max-width: 500px;
|
|
margin: 1.75rem auto;
|
|
}
|
|
}
|
|
|
|
.lte-modal-content {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
pointer-events: auto;
|
|
background-color: var(--lte-card-bg);
|
|
background-clip: padding-box;
|
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
border-radius: 0.3rem;
|
|
outline: 0;
|
|
}
|
|
|
|
.lte-modal-header {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem 1rem;
|
|
border-bottom: 1px solid var(--lte-border-color);
|
|
border-top-left-radius: calc(0.3rem - 1px);
|
|
border-top-right-radius: calc(0.3rem - 1px);
|
|
}
|
|
|
|
.lte-modal-title {
|
|
margin-bottom: 0;
|
|
line-height: 1.5;
|
|
font-weight: 500;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.lte-modal-body {
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.lte-modal-footer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding: 0.75rem;
|
|
border-top: 1px solid var(--lte-border-color);
|
|
border-bottom-right-radius: calc(0.3rem - 1px);
|
|
border-bottom-left-radius: calc(0.3rem - 1px);
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* AdminLTE Nav Tabs */
|
|
.lte-nav-tabs {
|
|
border-bottom: 1px solid var(--lte-border-color);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding-left: 0;
|
|
margin-bottom: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.lte-nav-tabs .lte-nav-link {
|
|
display: block;
|
|
padding: 0.5rem 1rem;
|
|
color: var(--lte-body-color);
|
|
text-decoration: none;
|
|
border: 1px solid transparent;
|
|
border-top-left-radius: 0.25rem;
|
|
border-top-right-radius: 0.25rem;
|
|
margin-bottom: -1px;
|
|
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
|
}
|
|
|
|
.lte-nav-tabs .lte-nav-link:hover,
|
|
.lte-nav-tabs .lte-nav-link:focus {
|
|
border-color: #e9ecef #e9ecef var(--lte-border-color);
|
|
isolation: isolate;
|
|
}
|
|
|
|
.lte-nav-tabs .lte-nav-link.active {
|
|
color: var(--lte-primary);
|
|
background-color: var(--lte-card-bg);
|
|
border-color: var(--lte-border-color) var(--lte-border-color) var(--lte-card-bg);
|
|
}
|
|
|
|
/* AdminLTE Dropdown */
|
|
.lte-dropdown-menu {
|
|
position: absolute;
|
|
z-index: 1000;
|
|
display: none;
|
|
min-width: 10rem;
|
|
padding: 0.5rem 0;
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
color: var(--lte-body-color);
|
|
text-align: left;
|
|
list-style: none;
|
|
background-color: var(--lte-card-bg);
|
|
background-clip: padding-box;
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
border-radius: 0.25rem;
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
|
|
}
|
|
|
|
.lte-dropdown-menu.show {
|
|
display: block;
|
|
}
|
|
|
|
.lte-dropdown-item {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0.25rem 1rem;
|
|
clear: both;
|
|
font-weight: 400;
|
|
color: var(--lte-body-color);
|
|
text-align: inherit;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
background-color: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
.lte-dropdown-item:hover,
|
|
.lte-dropdown-item:focus {
|
|
color: #1e2125;
|
|
background-color: #e9ecef;
|
|
}
|
|
|
|
.lte-dropdown-divider {
|
|
height: 0;
|
|
margin: 0.5rem 0;
|
|
overflow: hidden;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* AdminLTE Spinner */
|
|
.lte-spinner {
|
|
display: inline-block;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
vertical-align: text-bottom;
|
|
border: 0.25em solid currentColor;
|
|
border-right-color: transparent;
|
|
border-radius: 50%;
|
|
animation: spinner-border 0.75s linear infinite;
|
|
}
|
|
|
|
.lte-spinner-sm {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-width: 0.2em;
|
|
}
|
|
|
|
@keyframes spinner-border {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* AdminLTE Tooltip */
|
|
.lte-tooltip {
|
|
position: absolute;
|
|
z-index: 1080;
|
|
display: block;
|
|
margin: 0;
|
|
font-family: inherit;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
text-align: left;
|
|
text-decoration: none;
|
|
text-shadow: none;
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
word-break: normal;
|
|
word-spacing: normal;
|
|
white-space: normal;
|
|
line-break: auto;
|
|
font-size: 0.875rem;
|
|
word-wrap: break-word;
|
|
opacity: 0;
|
|
}
|
|
|
|
.lte-tooltip.show {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.lte-tooltip-inner {
|
|
max-width: 200px;
|
|
padding: 0.25rem 0.5rem;
|
|
color: #fff;
|
|
text-align: center;
|
|
background-color: #000;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
/* AdminLTE Utilities */
|
|
.lte-text-primary { color: var(--lte-primary) !important; }
|
|
.lte-text-secondary { color: var(--lte-secondary) !important; }
|
|
.lte-text-success { color: var(--lte-success) !important; }
|
|
.lte-text-danger { color: var(--lte-danger) !important; }
|
|
.lte-text-warning { color: var(--lte-warning) !important; }
|
|
.lte-text-info { color: var(--lte-info) !important; }
|
|
.lte-text-muted { color: var(--lte-secondary) !important; }
|
|
|
|
.lte-bg-primary { background-color: var(--lte-primary) !important; }
|
|
.lte-bg-secondary { background-color: var(--lte-secondary) !important; }
|
|
.lte-bg-success { background-color: var(--lte-success) !important; }
|
|
.lte-bg-danger { background-color: var(--lte-danger) !important; }
|
|
.lte-bg-warning { background-color: var(--lte-warning) !important; }
|
|
.lte-bg-info { background-color: var(--lte-info) !important; }
|
|
.lte-bg-light { background-color: var(--lte-light) !important; }
|
|
.lte-bg-dark { background-color: var(--lte-dark) !important; }
|
|
|
|
/* Gradient backgrounds */
|
|
.lte-bg-gradient-primary {
|
|
background: linear-gradient(180deg, #4a8eff 0%, var(--lte-primary) 100%) !important;
|
|
}
|
|
|
|
.lte-bg-gradient-success {
|
|
background: linear-gradient(180deg, #28a96c 0%, var(--lte-success) 100%) !important;
|
|
}
|
|
|
|
.lte-bg-gradient-danger {
|
|
background: linear-gradient(180deg, #e85d6c 0%, var(--lte-danger) 100%) !important;
|
|
}
|
|
|
|
.lte-bg-gradient-warning {
|
|
background: linear-gradient(180deg, #ffd966 0%, var(--lte-warning) 100%) !important;
|
|
}
|
|
|
|
.lte-bg-gradient-info {
|
|
background: linear-gradient(180deg, #4ce9ff 0%, var(--lte-info) 100%) !important;
|
|
}
|
|
|
|
/* AdminLTE Transitions & Animations */
|
|
.lte-fade-in {
|
|
animation: lte-fade-in 0.3s ease-out;
|
|
}
|
|
|
|
.lte-slide-in-up {
|
|
animation: lte-slide-in-up 0.3s ease-out;
|
|
}
|
|
|
|
.lte-slide-in-down {
|
|
animation: lte-slide-in-down 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes lte-fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes lte-slide-in-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes lte-slide-in-down {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* AdminLTE Elevations/Shadows */
|
|
.lte-elevation-0 { box-shadow: none !important; }
|
|
.lte-elevation-1 { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important; }
|
|
.lte-elevation-2 { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12) !important; }
|
|
.lte-elevation-3 { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.10) !important; }
|
|
.lte-elevation-4 { box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 0, 0, 0.05) !important; }
|
|
|
|
/* Direct Chat (AdminLTE specific) */
|
|
.lte-direct-chat-messages {
|
|
overflow-y: auto;
|
|
padding: 10px;
|
|
height: 250px;
|
|
}
|
|
|
|
.lte-direct-chat-msg {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.lte-direct-chat-text {
|
|
border-radius: 5px;
|
|
padding: 5px 10px;
|
|
position: relative;
|
|
background: var(--lte-light);
|
|
border: 1px solid var(--lte-border-color);
|
|
color: var(--lte-body-color);
|
|
}
|
|
|
|
.lte-direct-chat-primary .lte-direct-chat-text {
|
|
background: var(--lte-primary);
|
|
border-color: var(--lte-primary);
|
|
color: #fff;
|
|
}
|
|
|
|
/* AdminLTE Timeline */
|
|
.lte-timeline {
|
|
position: relative;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.lte-timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 4px;
|
|
background: var(--lte-border-color);
|
|
left: 31px;
|
|
margin: 0;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.lte-timeline > li {
|
|
position: relative;
|
|
margin-right: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.lte-timeline > li > .lte-timeline-item {
|
|
margin-left: 60px;
|
|
margin-right: 15px;
|
|
margin-top: 0;
|
|
background: var(--lte-card-bg);
|
|
border: 1px solid var(--lte-border-color);
|
|
border-radius: 3px;
|
|
padding: 0;
|
|
box-shadow: var(--lte-card-shadow);
|
|
}
|
|
|
|
.lte-timeline > li > .lte-fa,
|
|
.lte-timeline > li > svg {
|
|
width: 30px;
|
|
height: 30px;
|
|
font-size: 15px;
|
|
line-height: 30px;
|
|
position: absolute;
|
|
color: #666;
|
|
background: var(--lte-border-color);
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
left: 18px;
|
|
top: 0;
|
|
}
|
|
|
|
/* AdminLTE Close Button */
|
|
.lte-btn-close {
|
|
box-sizing: content-box;
|
|
width: 1em;
|
|
height: 1em;
|
|
padding: 0.25em 0.25em;
|
|
color: #000;
|
|
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
|
|
border: 0;
|
|
border-radius: 0.25rem;
|
|
opacity: 0.5;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.lte-btn-close:hover {
|
|
color: #000;
|
|
text-decoration: none;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.lte-btn-close:focus {
|
|
outline: 0;
|
|
box-shadow: 0 0 0 0.25rem rgba(var(--lte-primary-rgb), 0.25);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Dark mode close button */
|
|
.dark .lte-btn-close {
|
|
filter: invert(1) grayscale(100%) brightness(200%);
|
|
}
|
|
|
|
/* =============================================================================
|
|
LUCENTUI VISUAL ENHANCEMENTS
|
|
============================================================================= */
|
|
|
|
/* Focus-visible states for keyboard accessibility */
|
|
:focus-visible {
|
|
outline: 2px solid hsl(var(--color-primary));
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
:focus:not(:focus-visible) {
|
|
outline: none;
|
|
}
|
|
|
|
/* Status glow for running/active states */
|
|
.status-glow-success {
|
|
box-shadow: 0 0 10px hsl(var(--color-success) / 0.5);
|
|
animation: glow-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes glow-pulse {
|
|
0%, 100% { box-shadow: 0 0 10px hsl(var(--color-success) / 0.3); }
|
|
50% { box-shadow: 0 0 20px hsl(var(--color-success) / 0.6); }
|
|
}
|
|
|
|
/* Table row hover with left border indicator */
|
|
.table-row-hover {
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.table-row-hover:hover {
|
|
background-color: hsl(var(--color-primary) / 0.05);
|
|
box-shadow: inset 3px 0 0 hsl(var(--color-primary));
|
|
}
|
|
|
|
/* Empty state floating animation */
|
|
.empty-state-float {
|
|
animation: empty-float 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes empty-float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
|
|
/* Skeleton pulse variant */
|
|
.skeleton-pulse {
|
|
animation: skeleton-pulse-anim 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes skeleton-pulse-anim {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
/* Interactive lift for cards */
|
|
.interactive-lift {
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.interactive-lift:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.interactive-lift:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Form error shake animation */
|
|
@keyframes input-shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-4px); }
|
|
75% { transform: translateX(4px); }
|
|
}
|
|
|
|
.form-error-shake {
|
|
animation: input-shake 0.3s ease-in-out;
|
|
}
|
|
|
|
/* Ripple effect for buttons */
|
|
.ripple {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ripple::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
background-image: radial-gradient(circle, hsl(var(--color-primary)) 10%, transparent 10.01%);
|
|
background-repeat: no-repeat;
|
|
background-position: 50%;
|
|
transform: scale(10, 10);
|
|
opacity: 0;
|
|
transition: transform 0.4s, opacity 0.8s;
|
|
}
|
|
|
|
.ripple:active::after {
|
|
transform: scale(0, 0);
|
|
opacity: 0.2;
|
|
transition: 0s;
|
|
}
|
|
|
|
/* Striped progress bar animation */
|
|
.progress-striped {
|
|
background-image: linear-gradient(
|
|
45deg,
|
|
rgba(255, 255, 255, 0.15) 25%,
|
|
transparent 25%,
|
|
transparent 50%,
|
|
rgba(255, 255, 255, 0.15) 50%,
|
|
rgba(255, 255, 255, 0.15) 75%,
|
|
transparent 75%,
|
|
transparent
|
|
);
|
|
background-size: 1rem 1rem;
|
|
animation: progress-stripes 1s linear infinite;
|
|
}
|
|
|
|
@keyframes progress-stripes {
|
|
0% { background-position: 1rem 0; }
|
|
100% { background-position: 0 0; }
|
|
}
|
|
|
|
/* Indeterminate progress bar */
|
|
.progress-indeterminate {
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
hsl(var(--color-primary)) 50%,
|
|
transparent 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: indeterminate-slide 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes indeterminate-slide {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
|
|
/* Button glow on hover */
|
|
.btn-glow:hover {
|
|
box-shadow: 0 0 20px hsl(var(--color-primary) / 0.4);
|
|
}
|
|
|
|
/* =============================================================================
|
|
VISUAL POLISH ENHANCEMENTS
|
|
============================================================================= */
|
|
|
|
/* Card arrow hover animation - slides right on hover */
|
|
.card-arrow-animate {
|
|
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
|
|
color 0.15s ease;
|
|
}
|
|
|
|
.group:hover .card-arrow-animate,
|
|
a:hover .card-arrow-animate {
|
|
transform: translateX(4px);
|
|
color: hsl(var(--color-primary));
|
|
}
|
|
|
|
/* Status card hover enhancement - subtle lift and glow */
|
|
.status-card-hover {
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.status-card-hover:hover {
|
|
transform: scale(1.02);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
/* Sidebar active indicator bar */
|
|
.nav-active-bar {
|
|
position: relative;
|
|
}
|
|
|
|
.nav-active-bar::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 3px;
|
|
height: 60%;
|
|
background: hsl(var(--color-primary));
|
|
border-radius: 0 2px 2px 0;
|
|
}
|
|
|
|
/* Reduced motion support */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.status-glow-success,
|
|
.empty-state-float,
|
|
.skeleton-pulse,
|
|
.status-pulse,
|
|
.progress-striped,
|
|
.progress-indeterminate,
|
|
.ripple::after,
|
|
.interactive-lift,
|
|
.form-error-shake,
|
|
.card-arrow-animate,
|
|
.status-card-hover,
|
|
[wire\:navigate],
|
|
::view-transition-old(page),
|
|
::view-transition-new(page) {
|
|
animation: none !important;
|
|
transition: none !important;
|
|
}
|
|
}
|