update themes and global styles

This commit is contained in:
Justin Edmund 2025-09-23 22:10:01 -07:00
parent 0c03332988
commit 53df1db2bc
3 changed files with 24 additions and 15 deletions

View file

@ -10,7 +10,7 @@
html {
background-color: var(--background);
font-size: 62.5%;
// height: 100%;
height: 100%;
}
body {
@ -19,6 +19,8 @@ body {
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;
@ -31,20 +33,24 @@ ul {
list-style: none;
}
main {
max-width: var(--main-max-width);
margin: 0 auto;
width: 100%;
transition: max-width 0.3s ease;
// Main content styling - now applied within the scrollable container
.main-content {
> * {
max-width: var(--main-max-width);
margin: 0 auto;
width: 100%;
padding: 0 spacing.$unit-2x; // Only horizontal padding, vertical handled by layout
transition: max-width 0.3s ease;
// Responsive padding for smaller screens
@media (max-width: 768px) {
padding: 0 spacing.$unit;
}
// Responsive padding for smaller screens
@media (max-width: 768px) {
padding: 0 spacing.$unit;
}
// Wider layout for database pages
&.database-layout {
max-width: 1400px;
// Wider layout for database pages
&.database-layout {
max-width: 1400px;
}
}
}

View file

@ -7,8 +7,9 @@ $card-border: 0.5px solid rgba(0, 0, 0, 0.18);
// Elevation
$page-elevation: 0 0 4px rgba(0, 0, 0, 0.06);
$dialog-elevation: 0 1px 8px rgba(0, 0, 0, 0.16);
$card-elevation: 0 1px 3px rgba(0, 0, 0, 0.1);
$dialog-elevation: 0 0 12px rgba(0, 0, 0, 0.16);
$card-elevation: 0 0 4px rgba(0, 0, 0, 0.12);
$card-elevation-hover: 0 0 8px rgba(0, 0, 0, 0.12);
// Shadows
$hover-stroke: 1px solid rgba(0, 0, 0, 0.1);

View file

@ -30,6 +30,7 @@
--spacing-2xl: #{spacing.$unit-14x};
--background: #{colors.$page--bg--light};
--background-rgb: 245, 245, 245; // RGB values for grey-90
--page-hover: #{colors.$page--hover--light};
--grid-rep-hover: #{colors.$grid--rep--hover--light};
@ -280,6 +281,7 @@
[data-theme='dark'] {
--background: #{colors.$page--bg--dark};
--background-rgb: 25, 25, 25; // RGB values for grey-15
--page-hover: #{colors.$page--hover--dark};
--grid-rep-hover: #{colors.$grid--rep--hover--dark};