aboutsummaryrefslogtreecommitdiff
path: root/ext/mixed/css
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-11-18 20:06:02 -0500
committerGitHub <noreply@github.com>2020-11-18 20:06:02 -0500
commite9075e24e16e64b2116f66dab9cf59cb7ee01361 (patch)
tree5fb11a9eb4d38afd4130d4ca6f7f1bd4708637a2 /ext/mixed/css
parenta48ac37815016c820b2b2a7e79788fed07ae191f (diff)
Update progress indicator styles (#1042)
Diffstat (limited to 'ext/mixed/css')
-rw-r--r--ext/mixed/css/display.css85
1 files changed, 85 insertions, 0 deletions
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 09fc5703..24d143fc 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -45,6 +45,12 @@
--sidebar-button-icon-size-no-units: 16;
--sidebar-button-icon-size: calc(1em * (var(--sidebar-button-icon-size-no-units) / var(--font-size-no-units)));
+ --progress-bar-height-no-units: 4;
+ --progress-bar-height: calc(1em * (var(--progress-bar-height-no-units) / var(--font-size-no-units)));
+ --progress-bar-active-transition-duration: 0.125s;
+ --progress-bar-active-transition-start-delay: 0.0625s;
+ --progress-bar-animation-duration: 2s;
+
/* Colors */
--background-color: #ffffff;
--glossary-image-background-color: #eeeeee;
@@ -88,6 +94,9 @@
--scrollbar-thumb-color: #c1c1c1;
--scrollbar-track-color: #f1f1f1;
+
+ --progress-bar-track-color: #cccccc;
+ --progress-bar-indicator-color: #0275d8;
}
:root[data-yomichan-theme=dark] {
/* Colors */
@@ -133,6 +142,9 @@
--scrollbar-thumb-color: #444444;
--scrollbar-track-color: #2f2f2f;
+
+ --progress-bar-track-color: #3a3a3a;
+ --progress-bar-indicator-color: #0275d8;
}
@@ -1004,3 +1016,76 @@ button.action-button {
.kanji-glossary {
color: var(--dark-text-color);
}
+
+
+/* Progress bar */
+@keyframes progress-bar-indeterminant1a {
+ 0% { left: 0; }
+ 25% { left: 0; }
+ 75% { left: 100%; }
+ 100% { left: 100%; }
+}
+@keyframes progress-bar-indeterminant1b {
+ 0% { right: 100%; }
+ 50% { right: 0; }
+ 100% { right: 0; }
+}
+@keyframes progress-bar-indeterminant2a {
+ 0% { left: 0; }
+ 25% { left: 0; }
+ 100% { left: 100%; }
+}
+@keyframes progress-bar-indeterminant2b {
+ 0% { right: 100%; }
+ 75% { right: 0; }
+ 100% { right: 0; }
+}
+.progress-bar-indeterminant {
+ display: block;
+ width: 100%;
+ height: 0;
+ background-color: var(--progress-bar-indicator-color);
+ position: relative;
+ transition:
+ height var(--progress-bar-active-transition-duration) linear var(--progress-bar-active-transition-duration),
+ background-color var(--progress-bar-active-transition-duration) linear;
+}
+.progress-bar-indeterminant[data-active=true] {
+ height: var(--progress-bar-height);
+ background-color: var(--progress-bar-track-color);
+ transition:
+ height var(--progress-bar-active-transition-duration) linear var(--progress-bar-active-transition-start-delay),
+ background-color 0s linear;
+}
+.progress-bar-indeterminant[hidden]:not([data-active=true]) {
+ display: none;
+}
+.progress-bar-indeterminant::before,
+.progress-bar-indeterminant::after {
+ content: "";
+ display: block;
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ right: 100%;
+ background-color: var(--progress-bar-indicator-color);
+ animation: none;
+}
+.progress-bar-indeterminant:not([hidden])::before {
+ animation:
+ progress-bar-indeterminant1a var(--progress-bar-animation-duration) infinite ease-in-out var(--progress-bar-active-transition-start-delay),
+ progress-bar-indeterminant1b var(--progress-bar-animation-duration) infinite ease-in-out var(--progress-bar-active-transition-start-delay);
+}
+.progress-bar-indeterminant:not([hidden])::after {
+ animation:
+ progress-bar-indeterminant2a var(--progress-bar-animation-duration) infinite ease-in-out calc(var(--progress-bar-active-transition-start-delay) + 0.375 * var(--progress-bar-animation-duration)),
+ progress-bar-indeterminant2b var(--progress-bar-animation-duration) infinite ease-in-out calc(var(--progress-bar-active-transition-start-delay) + 0.375 * var(--progress-bar-animation-duration));
+}
+.top-progress-bar-container {
+ position: sticky;
+ top: 0;
+ height: 0;
+ pointer-events: none;
+ z-index: 10;
+}