update themes and global styles
This commit is contained in:
parent
0c03332988
commit
53df1db2bc
3 changed files with 24 additions and 15 deletions
32
src/app.scss
32
src/app.scss
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
|
|
|
|||
Loading…
Reference in a new issue