aboutsummaryrefslogtreecommitdiff
path: root/ext/mixed/css
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-01-29 22:12:24 -0500
committerGitHub <noreply@github.com>2021-01-29 22:12:24 -0500
commit588d8a681a34da5777520096a11d5eea74fc2251 (patch)
tree7ae18e7b64f9a22ab17f2e34be59231d62a110d7 /ext/mixed/css
parent04cf4ec8d58f3f0802973d1527f173b3926b62d0 (diff)
Display notification style updates (#1327)
* Add scrollbar-inverse styles * Update notification styles to support better overflowing
Diffstat (limited to 'ext/mixed/css')
-rw-r--r--ext/mixed/css/display.css46
1 files changed, 43 insertions, 3 deletions
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index ce5cac6c..4a1e2324 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -129,6 +129,8 @@
--scrollbar-thumb-color: #c1c1c1;
--scrollbar-track-color: #f1f1f1;
+ --scrollbar-inverse-thumb-color: #444444;
+ --scrollbar-inverse-track-color: #2f2f2f;
--progress-bar-track-color: #cccccc;
--progress-bar-indicator-color: var(--accent-color);
@@ -188,6 +190,8 @@
--scrollbar-thumb-color: #444444;
--scrollbar-track-color: #2f2f2f;
+ --scrollbar-inverse-thumb-color: #c1c1c1;
+ --scrollbar-inverse-track-color: #f1f1f1;
--progress-bar-track-color: #3a3a3a;
--progress-bar-indicator-color: var(--accent-color);
@@ -298,6 +302,27 @@ a {
:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-corner {
background-color: var(--scrollbar-track-color);
}
+:root .scrollbar-inverse {
+ scrollbar-color: var(--scrollbar-inverse-humb-color) var(--scrollbar-inverse-track-color);
+}
+:root .scrollbar-inverse::-webkit-scrollbar {
+ width: auto;
+}
+:root .scrollbar-inverse::-webkit-scrollbar-button {
+ height: 0;
+}
+:root .scrollbar-inverse::-webkit-scrollbar-thumb {
+ background-color: var(--scrollbar-inverse-thumb-color);
+}
+:root .scrollbar-inverse::-webkit-scrollbar-track {
+ background-color: var(--scrollbar-inverse-thumb-color);
+}
+:root .scrollbar-inverse::-webkit-scrollbar-track-piece {
+ background-color: var(--scrollbar-inverse-track-color);
+}
+:root .scrollbar-inverse::-webkit-scrollbar-corner {
+ background-color: var(--scrollbar-inverse-track-color);
+}
.scrollbar-spacer {
display: inline-block;
overflow-x: hidden;
@@ -352,6 +377,7 @@ a {
flex-flow: row nowrap;
justify-content: center;
flex: 1 1 auto;
+ max-width: 100%;
}
.content-footer {
width: var(--main-content-size);
@@ -1498,15 +1524,18 @@ button.action-button[data-icon=source-term]::before {
.footer-notification {
display: flex;
flex-flow: row nowrap;
- align-items: center;
+ align-items: flex-start;
pointer-events: auto;
border-radius: 0.25em;
background-color: var(--notification-background-color);
box-shadow: 0 0.125em 0.25em 0 var(--notification-shadow-color);
color: var(--notification-text-color);
margin: 0.5em;
- padding: 0.5em 0.75em;
+ padding: 0;
transition: opacity var(--animation-duration) ease-out;
+ position: relative;
+ overflow: auto;
+ max-height: calc(0.5em * 2 + var(--line-height) * 4 * 1em);
}
.footer-notification[hidden] {
display: flex;
@@ -1515,7 +1544,18 @@ button.action-button[data-icon=source-term]::before {
}
.footer-notification-body {
flex: 1 1 auto;
- padding-right: 0.5em;
+ padding: 0.5em 0.75em;
+}
+.footer-notification-close-button-container {
+ align-self: stretch;
+ display: flex;
+ flex-flow: column nowrap;
+ align-items: center;
+ justify-content: center;
+ padding: 0.25em 0.75em 0.25em 0;
+ position: sticky;
+ top: 0;
+ right: 0;
}
button.footer-notification-close-button,
button.footer-notification-close-button:focus,