aboutsummaryrefslogtreecommitdiff
path: root/src/App.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/App.scss')
-rw-r--r--src/App.scss139
1 files changed, 92 insertions, 47 deletions
diff --git a/src/App.scss b/src/App.scss
index ab025d63..1c4c8941 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,16 +1,18 @@
// stylelint-disable rscss/class-format
-@import './_variables.scss';
+/* stylelint-disable no-descending-specificity */
+@import "./variables";
+@import "./panel";
:root {
--navbar-height: 3.5rem;
--post-line-height: 1.4;
// Z-Index stuff
- --ZI_media_modal: 90000;
- --ZI_modals_popovers: 85000;
- --ZI_modals: 80000;
- --ZI_navbar_popovers: 75000;
- --ZI_navbar: 70000;
- --ZI_popovers: 60000;
+ --ZI_media_modal: 9000;
+ --ZI_modals_popovers: 8500;
+ --ZI_modals: 8000;
+ --ZI_navbar_popovers: 7500;
+ --ZI_navbar: 7000;
+ --ZI_popovers: 6000;
}
html {
@@ -117,20 +119,35 @@ h4 {
margin: 0;
}
-i[class*=icon-],
-.svg-inline--fa {
+.iconLetter {
+ display: inline-block;
+ text-align: center;
+ font-weight: 1000;
+}
+
+i[class*="icon-"],
+.svg-inline--fa,
+.iconLetter {
color: $fallback--icon;
color: var(--icon, $fallback--icon);
}
+.button-unstyled:hover,
+a:hover {
+ > i[class*="icon-"],
+ > .svg-inline--fa,
+ > .iconLetter {
+ color: var(--text);
+ }
+}
+
nav {
z-index: var(--ZI_navbar);
- color: var(--topBarText);
background-color: $fallback--fg;
background-color: var(--topBar, $fallback--fg);
color: $fallback--faint;
color: var(--faint, $fallback--faint);
- box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
+ box-shadow: 0 0 4px rgb(0 0 0 / 60%);
box-shadow: var(--topBarShadow);
box-sizing: border-box;
height: var(--navbar-height);
@@ -141,6 +158,11 @@ nav {
grid-area: sidebar;
}
+#modal {
+ position: absolute;
+ z-index: var(--ZI_modals);
+}
+
.column.-scrollable {
top: var(--navbar-height);
position: sticky;
@@ -170,25 +192,28 @@ nav {
}
.underlay {
- grid-column-start: 1;
- grid-column-end: span 3;
- grid-row-start: 1;
- grid-row-end: 1;
+ grid-column: 1 / span 3;
+ grid-row: 1 / 1;
pointer-events: none;
- background-color: rgba(0, 0, 0, 0.15);
- background-color: var(--underlay, rgba(0, 0, 0, 0.15));
+ background-color: rgb(0 0 0 / 15%);
+ background-color: var(--underlay, rgb(0 0 0 / 15%));
z-index: -1000;
}
.app-layout {
--miniColumn: 25rem;
- --maxiColumn: minmax(var(--miniColumn), 45rem);
+ --maxiColumn: 45rem;
--columnGap: 1em;
--status-margin: 0.75em;
+ --effectiveSidebarColumnWidth: minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)));
+ --effectiveNotifsColumnWidth: minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn)));
+ --effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn)));
position: relative;
display: grid;
- grid-template-columns: var(--miniColumn) var(--maxiColumn);
+ grid-template-columns:
+ var(--effectiveSidebarColumnWidth)
+ var(--effectiveContentColumnWidth);
grid-template-areas: "sidebar content";
grid-template-rows: 1fr;
box-sizing: border-box;
@@ -205,8 +230,7 @@ nav {
display: grid;
grid-template-columns: 100%;
box-sizing: border-box;
- grid-row-start: 1;
- grid-row-end: 1;
+ grid-row: 1 / 1;
margin: 0 calc(var(--___columnMargin) / 2);
padding: calc(var(--___columnMargin)) 0;
row-gap: var(--___columnMargin);
@@ -281,16 +305,25 @@ nav {
align-content: start;
}
- &.-reverse:not(.-wide):not(.-mobile) {
- grid-template-columns: var(--maxiColumn) var(--miniColumn);
+ &.-reverse:not(.-wide, .-mobile) {
+ grid-template-columns:
+ var(--effectiveContentColumnWidth)
+ var(--effectiveSidebarColumnWidth);
grid-template-areas: "content sidebar";
}
&.-wide {
- grid-template-columns: var(--miniColumn) var(--maxiColumn) var(--miniColumn);
+ grid-template-columns:
+ var(--effectiveSidebarColumnWidth)
+ var(--effectiveContentColumnWidth)
+ var(--effectiveNotifsColumnWidth);
grid-template-areas: "sidebar content notifs";
&.-reverse {
+ grid-template-columns:
+ var(--effectiveNotifsColumnWidth)
+ var(--effectiveContentColumnWidth)
+ var(--effectiveSidebarColumnWidth);
grid-template-areas: "notifs content sidebar";
}
}
@@ -301,11 +334,8 @@ nav {
padding: 0;
.column {
- margin-left: 0;
- margin-right: 0;
padding-top: 0;
- margin-top: var(--navbar-height);
- margin-bottom: 0;
+ margin: var(--navbar-height) 0 0 0;
}
.panel-heading,
@@ -354,7 +384,7 @@ nav {
background: transparent;
}
- i[class*=icon-],
+ i[class*="icon-"],
.svg-inline--fa {
color: $fallback--text;
color: var(--btnText, $fallback--text);
@@ -365,12 +395,15 @@ nav {
}
&:hover {
- box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
+ box-shadow: 0 0 4px rgb(255 255 255 / 30%);
box-shadow: var(--buttonHoverShadow);
}
&:active {
- box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset;
+ box-shadow:
+ 0 0 4px 0 rgb(255 255 255 / 30%),
+ 0 1px 0 0 rgb(0 0 0 / 20%) inset,
+ 0 -1px 0 0 rgb(255 255 255 / 20%) inset;
box-shadow: var(--buttonPressedShadow);
color: $fallback--text;
color: var(--btnPressedText, $fallback--text);
@@ -403,7 +436,10 @@ nav {
color: var(--btnToggledText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnToggled, $fallback--fg);
- box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset;
+ box-shadow:
+ 0 0 4px 0 rgb(255 255 255 / 30%),
+ 0 1px 0 0 rgb(0 0 0 / 20%) inset,
+ 0 -1px 0 0 rgb(255 255 255 / 20%) inset;
box-shadow: var(--buttonPressedShadow);
svg,
@@ -468,7 +504,10 @@ textarea,
border: none;
border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius);
- box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 0 2px 0 rgba(0, 0, 0, 1) inset;
+ box-shadow:
+ 0 1px 0 0 rgb(0 0 0 / 20%) inset,
+ 0 -1px 0 0 rgb(255 255 255 / 20%) inset,
+ 0 0 2px 0 rgb(0 0 0 / 100%) inset;
box-shadow: var(--inputShadow);
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
@@ -486,13 +525,13 @@ textarea,
padding: 0 var(--_padding);
&:disabled,
- &[disabled=disabled],
+ &[disabled="disabled"],
&.disabled {
cursor: not-allowed;
opacity: 0.5;
}
- &[type=range] {
+ &[type="range"] {
background: none;
border: none;
margin: 0;
@@ -500,7 +539,7 @@ textarea,
flex: 1;
}
- &[type=radio] {
+ &[type="radio"] {
display: none;
&:checked + label::before {
@@ -520,7 +559,7 @@ textarea,
+ label::before {
flex-shrink: 0;
display: inline-block;
- content: '';
+ content: "";
transition: box-shadow 200ms;
width: 1.1em;
height: 1.1em;
@@ -540,7 +579,7 @@ textarea,
}
}
- &[type=checkbox] {
+ &[type="checkbox"] {
display: none;
&:checked + label::before {
@@ -559,7 +598,7 @@ textarea,
+ label::before {
flex-shrink: 0;
display: inline-block;
- content: '✓';
+ content: "✓";
transition: color 200ms;
width: 1.1em;
height: 1.1em;
@@ -599,10 +638,10 @@ option {
}
.hide-number-spinner {
- -moz-appearance: textfield;
+ appearance: textfield;
- &[type=number]::-webkit-inner-spin-button,
- &[type=number]::-webkit-outer-spin-button {
+ &[type="number"]::-webkit-inner-spin-button,
+ &[type="number"]::-webkit-outer-spin-button {
opacity: 0;
display: none;
}
@@ -634,8 +673,6 @@ option {
}
}
-@import './panel.scss';
-
.fa {
color: grey;
}
@@ -651,7 +688,7 @@ option {
max-width: 10em;
min-width: 1.7em;
height: 1.3em;
- padding: 0.15em 0.15em;
+ padding: 0.15em;
vertical-align: middle;
font-weight: normal;
font-style: normal;
@@ -746,17 +783,24 @@ option {
}
.fa-scale-110 {
- &.svg-inline--fa {
+ &.svg-inline--fa,
+ &.iconLetter {
font-size: 1.1em;
}
}
.fa-old-padding {
- &.svg-inline--fa {
+ &.iconLetter,
+ &.svg-inline--fa,
+ &-layer {
padding: 0 0.3em;
}
}
+.veryfaint {
+ opacity: 0.25;
+}
+
.login-hint {
text-align: center;
@@ -842,3 +886,4 @@ option {
.fade-leave-active {
opacity: 0;
}
+/* stylelint-enable no-descending-specificity */
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-12-01 17:59:18 +0000