95 lines
2.2 KiB
CSS
95 lines
2.2 KiB
CSS
/* Modern Hospital Theme - Glassmorphism & Gradient */
|
|
:root {
|
|
--primary-color: #0d6efd;
|
|
--secondary-color: #6c757d;
|
|
--background-start: #e0eafc;
|
|
--background-end: #cfdef3;
|
|
--glass-bg: rgba(255, 255, 255, 0.25);
|
|
--glass-border: rgba(255, 255, 255, 0.18);
|
|
--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(135deg, var(--background-start) 0%, var(--background-end) 100%);
|
|
min-height: 100vh;
|
|
font-family: 'Inter', sans-serif; /* Recommended modern font */
|
|
}
|
|
|
|
/* Glassmorphism Card Utility */
|
|
.glass-card {
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
border: 1px solid var(--glass-border);
|
|
box-shadow: var(--glass-shadow);
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
}
|
|
|
|
/* Loading button animation */
|
|
.btn-loading {
|
|
position: relative;
|
|
pointer-events: none;
|
|
opacity: 0.8;
|
|
}
|
|
.btn-loading::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
border: 2px solid transparent;
|
|
border-top-color: currentColor;
|
|
border-radius: 50%;
|
|
animation: button-loading-spinner 1s ease infinite;
|
|
}
|
|
@keyframes button-loading-spinner {
|
|
from { transform: rotate(0turn); }
|
|
to { transform: rotate(1turn); }
|
|
}
|
|
|
|
/* Sidebar & Wrapper Layout */
|
|
#wrapper {
|
|
overflow-x: hidden;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.glass-sidebar {
|
|
min-height: 100vh;
|
|
width: 250px;
|
|
background: rgba(255, 255, 255, 0.4);
|
|
backdrop-filter: blur(15px);
|
|
-webkit-backdrop-filter: blur(15px);
|
|
border-right: 1px solid var(--glass-border);
|
|
transition: margin 0.25s ease-out;
|
|
}
|
|
|
|
.glass-sidebar .list-group-item {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.glass-sidebar .list-group-item:hover, .active-menu {
|
|
background: rgba(13, 110, 253, 0.1) !important;
|
|
color: var(--primary-color) !important;
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
#page-content-wrapper {
|
|
min-width: 100vw;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
#page-content-wrapper {
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
#wrapper.toggled #sidebar-wrapper {
|
|
margin-left: -250px;
|
|
}
|