aboutsummaryrefslogtreecommitdiff
path: root/src/App.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/App.scss')
-rw-r--r--src/App.scss193
1 files changed, 131 insertions, 62 deletions
diff --git a/src/App.scss b/src/App.scss
index 310962b8..f2972eda 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -31,9 +31,12 @@ h4 {
margin: auto;
min-height: 100vh;
max-width: 980px;
- background-color: rgba(0,0,0,0.15);
align-content: flex-start;
}
+.underlay {
+ background-color: rgba(0,0,0,0.15);
+ background-color: var(--underlay, rgba(0,0,0,0.15));
+}
.text-center {
text-align: center;
@@ -75,7 +78,7 @@ button {
border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius);
cursor: pointer;
- box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
+ box-shadow: $fallback--buttonShadow;
box-shadow: var(--buttonShadow);
font-size: 14px;
font-family: sans-serif;
@@ -98,18 +101,39 @@ button {
&:active {
box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
box-shadow: var(--buttonPressedShadow);
+ color: $fallback--text;
+ color: var(--btnPressedText, $fallback--text);
+ background-color: $fallback--fg;
+ background-color: var(--btnPressed, $fallback--fg);
+ i {
+ color: $fallback--text;
+ color: var(--btnPressedText, $fallback--text);
+ }
}
&:disabled {
cursor: not-allowed;
- opacity: 0.5;
+ color: $fallback--text;
+ color: var(--btnDisabledText, $fallback--text);
+ background-color: $fallback--fg;
+ background-color: var(--btnDisabled, $fallback--fg);
+ i {
+ color: $fallback--text;
+ color: var(--btnDisabledText, $fallback--text);
+ }
}
- &.pressed {
- color: $fallback--faint;
- color: var(--faint, $fallback--faint);
- background-color: $fallback--bg;
- background-color: var(--bg, $fallback--bg)
+ &.toggled {
+ color: $fallback--text;
+ color: var(--btnToggledText, $fallback--text);
+ background-color: $fallback--fg;
+ background-color: var(--btnToggled, $fallback--fg);
+ box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
+ box-shadow: var(--buttonPressedShadow);
+ i {
+ color: $fallback--text;
+ color: var(--btnToggledText, $fallback--text);
+ }
}
&.danger {
@@ -121,12 +145,15 @@ button {
}
}
-label.select {
- padding: 0;
+input, textarea, .select, .input {
-}
+ &.unstyled {
+ border-radius: 0;
+ background: none;
+ box-shadow: none;
+ height: unset;
+ }
-input, textarea, .select {
border: none;
border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius);
@@ -140,13 +167,17 @@ input, textarea, .select {
font-family: var(--inputFont, sans-serif);
font-size: 14px;
margin: 0;
- padding: 8px .5em;
box-sizing: border-box;
display: inline-block;
position: relative;
height: 28px;
line-height: 16px;
hyphens: none;
+ padding: 8px .5em;
+
+ &.select {
+ padding: 0;
+ }
&:disabled, &[disabled=disabled] {
cursor: not-allowed;
@@ -160,7 +191,7 @@ input, textarea, .select {
right: 5px;
height: 100%;
color: $fallback--text;
- color: var(--text, $fallback--text);
+ color: var(--inputText, $fallback--text);
line-height: 28px;
z-index: 0;
pointer-events: none;
@@ -198,7 +229,7 @@ input, textarea, .select {
&:checked + label::before {
box-shadow: 0px 0px 2px black inset, 0px 0px 0px 4px $fallback--fg inset;
box-shadow: var(--inputShadow), 0px 0px 0px 4px var(--fg, $fallback--fg) inset;
- background-color: var(--link, $fallback--link);
+ background-color: var(--accent, $fallback--link);
}
&:disabled {
&,
@@ -235,7 +266,7 @@ input, textarea, .select {
display: none;
&:checked + label::before {
color: $fallback--text;
- color: var(--text, $fallback--text);
+ color: var(--inputText, $fallback--text);
}
&:disabled {
&,
@@ -353,6 +384,33 @@ i[class*=icon-] {
height: 50px;
box-sizing: border-box;
+ button {
+ &, i[class*=icon-] {
+ color: $fallback--text;
+ color: var(--btnTopBarText, $fallback--text);
+ }
+
+ &:active {
+ background-color: $fallback--fg;
+ background-color: var(--btnPressedTopBar, $fallback--fg);
+ color: $fallback--text;
+ color: var(--btnPressedTopBarText, $fallback--text);
+ }
+
+ &:disabled {
+ color: $fallback--text;
+ color: var(--btnDisabledTopBarText, $fallback--text);
+ }
+
+ &.toggled {
+ color: $fallback--text;
+ color: var(--btnToggledTopBarText, $fallback--text);
+ background-color: $fallback--fg;
+ background-color: var(--btnToggledTopBar, $fallback--fg)
+ }
+ }
+
+
.logo {
display: flex;
position: absolute;
@@ -487,6 +545,10 @@ main-router {
color: $fallback--faint;
color: var(--panelFaint, $fallback--faint);
}
+ .faint-link {
+ color: $fallback--faint;
+ color: var(--faintLink, $fallback--faint);
+ }
.alert {
white-space: nowrap;
@@ -504,11 +566,35 @@ main-router {
min-height: 0;
box-sizing: border-box;
margin: 0;
- margin-left: .25em;
+ margin-left: .5em;
min-width: 1px;
align-self: stretch;
}
+ button {
+ &, i[class*=icon-] {
+ color: $fallback--text;
+ color: var(--btnPanelText, $fallback--text);
+ }
+
+ &:active {
+ background-color: $fallback--fg;
+ background-color: var(--btnPressedPanel, $fallback--fg);
+ color: $fallback--text;
+ color: var(--btnPressedPanelText, $fallback--text);
+ }
+
+ &:disabled {
+ color: $fallback--text;
+ color: var(--btnDisabledPanelText, $fallback--text);
+ }
+
+ &.toggled {
+ color: $fallback--text;
+ color: var(--btnToggledPanelText, $fallback--text);
+ }
+ }
+
a {
color: $fallback--link;
color: var(--panelLink, $fallback--link)
@@ -774,51 +860,6 @@ nav {
}
}
-.setting-item {
- border-bottom: 2px solid var(--fg, $fallback--fg);
- margin: 1em 1em 1.4em;
- padding-bottom: 1.4em;
-
- > div {
- margin-bottom: .5em;
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- &:last-child {
- border-bottom: none;
- padding-bottom: 0;
- margin-bottom: 1em;
- }
-
- select {
- min-width: 10em;
- }
-
-
- textarea {
- width: 100%;
- max-width: 100%;
- height: 100px;
- }
-
- .unavailable,
- .unavailable i {
- color: var(--cRed, $fallback--cRed);
- color: $fallback--cRed;
- }
-
- .btn {
- min-height: 28px;
- min-width: 10em;
- padding: 0 2em;
- }
-
- .number-input {
- max-width: 6em;
- }
-}
.select-multiple {
display: flex;
.option-list {
@@ -855,3 +896,31 @@ nav {
.btn.btn-default {
min-height: 28px;
}
+
+.animate-spin {
+ animation: spin 2s infinite linear;
+ display: inline-block;
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(359deg);
+ }
+}
+
+.new-status-notification {
+ position:relative;
+ margin-top: -1px;
+ font-size: 1.1em;
+ border-width: 1px 0 0 0;
+ border-style: solid;
+ border-color: var(--border, $fallback--border);
+ padding: 10px;
+ z-index: 1;
+ background-color: $fallback--fg;
+ background-color: var(--panel, $fallback--fg);
+}
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 13:49:00 +0000