112 lines
2.1 KiB
SCSS
112 lines
2.1 KiB
SCSS
// Import themes
|
|
@use 'themes/themes';
|
|
@use 'themes/spacing';
|
|
@use 'themes/tooltip';
|
|
|
|
:root {
|
|
--main-max-width: 820px; // Default max-width for main content
|
|
}
|
|
|
|
html {
|
|
background-color: var(--background);
|
|
font-size: 62.5%;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
-webkit-font-smoothing: antialiased;
|
|
box-sizing: border-box;
|
|
font-family: var(--font-family);
|
|
font-size: 1.4rem;
|
|
height: 100%;
|
|
margin: 0;
|
|
overflow: hidden; // Prevent body scroll since we handle scrolling in layout
|
|
|
|
&.no-scroll {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
padding-inline-start: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
// Main content styling - now applied within the scrollable container
|
|
.main-content {
|
|
> * {
|
|
max-width: var(--main-max-width);
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
transition: max-width 0.3s ease;
|
|
|
|
// Responsive padding for smaller screens
|
|
@media (max-width: 768px) {
|
|
padding: 0 spacing.$unit;
|
|
}
|
|
|
|
// Wider layout for database pages
|
|
&.database-layout {
|
|
max-width: 1400px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Utility classes for different container widths
|
|
.content--wide {
|
|
max-width: 1200px;
|
|
}
|
|
|
|
.content--narrow {
|
|
max-width: 600px;
|
|
}
|
|
|
|
.content--full {
|
|
max-width: none;
|
|
padding: 0;
|
|
}
|
|
|
|
// Global variables
|
|
$primary-color: #007bff;
|
|
$font-size-base: 16px;
|
|
|
|
// Global mixins
|
|
@mixin button-reset {
|
|
border: none;
|
|
background: none;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
// Toast notification overrides (svelte-sonner)
|
|
[data-sonner-toaster] {
|
|
--normal-bg: var(--toast-bg);
|
|
--normal-text: var(--toast-text);
|
|
--normal-border: var(--toast-border);
|
|
|
|
--success-bg: var(--toast-success-bg);
|
|
--success-text: var(--toast-success-text);
|
|
--success-border: var(--toast-success-text);
|
|
|
|
--error-bg: var(--toast-error-bg);
|
|
--error-text: var(--toast-error-text);
|
|
--error-border: var(--toast-error-text);
|
|
|
|
--warning-bg: var(--toast-warning-bg);
|
|
--warning-text: var(--toast-warning-text);
|
|
--warning-border: var(--toast-warning-text);
|
|
|
|
--info-bg: var(--toast-info-bg);
|
|
--info-text: var(--toast-info-text);
|
|
--info-border: var(--toast-info-text);
|
|
|
|
font-family: var(--font-family);
|
|
z-index: 102; // Above dialogs (101)
|
|
}
|
|
|
|
[data-sonner-toast] {
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
font-size: 1.4rem;
|
|
}
|