diff options
| -rw-r--r-- | ext/mixed/css/display.css | 46 | ||||
| -rw-r--r-- | ext/mixed/display-templates.html | 6 |
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> |