102 lines
2.9 KiB
CSS
102 lines
2.9 KiB
CSS
/* CSS Variables for theming */
|
|
:root {
|
|
--primary-color: #a02c8d;
|
|
--success-color: #27ae60;
|
|
--danger-color: #e74c3c;
|
|
--warning-color: #f39c12;
|
|
--secondary-color: #ba6cdf;
|
|
--dark-color: #2e053f;
|
|
--light-color: #efcef0;
|
|
--border-radius: 4px;
|
|
--transition: all 0.3s ease;
|
|
--header-height: 60px;
|
|
|
|
/* Responsive width variables */
|
|
--container-max-width: 100%;
|
|
--content-padding: 20px;
|
|
--mobile-padding: 15px;
|
|
|
|
/* Breakpoints for consistency */
|
|
--mobile-breakpoint: 768px;
|
|
--tablet-breakpoint: 1024px;
|
|
--desktop-breakpoint: 1200px;
|
|
|
|
/* Z-Index Scale - DO NOT MODIFY WITHOUT UPDATING ALL REFERENCES
|
|
* Base Layer: 1-999 (Map controls, markers, standard UI)
|
|
* Header Layer: 10001 (Main navigation header)
|
|
* Dropdown Layer: 12100-12199 (Search results, unified search, doc search)
|
|
* Modal Layer: 12000-12099 (Standard modals)
|
|
* Mobile UI Layer: 12150-12199 (Mobile dropdowns, nocodb dropdowns)
|
|
* Form Layer: 12200-12249 (Edit footer, move controls)
|
|
* Popup Layer: 12250-12299 (Shift popups, tooltips)
|
|
* Notification Layer: 12300-12399 (Status messages, alerts)
|
|
* Admin Layer: 12400-12499 (Admin sidebars)
|
|
* Loading Layer: 12500-12599 (Loading overlays)
|
|
* Confirmation Layer: 12600-12699 (Confirmation modals)
|
|
* QR Layer: 13000-13099 (QR code modals)
|
|
* Update Layer: 15000+ (Cache-busting notifications - highest priority)
|
|
*/
|
|
}
|
|
|
|
/* Authentication loading states */
|
|
body.authenticating {
|
|
overflow: hidden;
|
|
background: #ffffff; /* Clean white background during auth */
|
|
}
|
|
|
|
body.authenticating #app.app-hidden {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: none; /* No transition while hiding */
|
|
transform: translateY(10px); /* Slight offset for smooth entrance */
|
|
}
|
|
|
|
body.authenticated #app {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
|
|
}
|
|
|
|
/* Enhanced loading overlay for authentication */
|
|
body.authenticating .loading-overlay {
|
|
background-color: rgba(255, 255, 255, 0.98);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
/* Base styles */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
color: var(--dark-color);
|
|
background-color: var(--light-color);
|
|
width: 100%;
|
|
overflow-x: hidden; /* Prevent horizontal scrolling */
|
|
}
|
|
|
|
/* Badge styles */
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
vertical-align: baseline;
|
|
border-radius: 0.375rem;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.temp-badge {
|
|
background-color: var(--warning-color);
|
|
color: white;
|
|
}
|