summaryrefslogtreecommitdiff
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
parent04cf4ec8d58f3f0802973d1527f173b3926b62d0 (diff)
Display notification style updates (#1327)
* Add scrollbar-inverse styles * Update notification styles to support better overflowing
-rw-r--r--ext/mixed/css/display.css46
-rw-r--r--ext/mixed/display-templates.html6
2 files changed, 47 insertions, 5 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,
diff --git a/ext/mixed/display-templates.html b/ext/mixed/display-templates.html
index 2d363b7b..6b744271 100644
--- a/ext/mixed/display-templates.html
+++ b/ext/mixed/display-templates.html
@@ -136,9 +136,11 @@
<template id="tag-template"><span class="tag"><span class="tag-inner"></span></span></template>
<!-- Extra -->
-<template id="footer-notification-template"><div class="footer-notification">
+<template id="footer-notification-template"><div class="footer-notification scrollbar-inverse">
<div class="footer-notification-body"></div>
- <button class="footer-notification-close-button"><span class="footer-notification-close-button-icon icon" data-icon="cross"></span></button>
+ <div class="footer-notification-close-button-container">
+ <button class="footer-notification-close-button"><span class="footer-notification-close-button-icon icon" data-icon="cross"></span></button>
+ </div>
</div></template>
<template id="footer-notification-tag-details-template" data-remove-whitespace-text="true">
<div class="tag-details"></div>