From b0a565062524f74b973071f259a2c0d7a577c372 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Thu, 19 Nov 2020 18:34:41 -0500
Subject: Update selection indicator (#1044)

* Add new current indicator

* Remove old indicator
---
 ext/mixed/css/display.css | 31 +++++++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

(limited to 'ext/mixed/css')

diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 67017306..6986696f 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -55,6 +55,9 @@
     --progress-bar-active-transition-start-delay: 0.0625s;
     --progress-bar-animation-duration: 2s;
 
+    --entry-current-indicator: calc(4em / var(--font-size-no-units));
+    --entry-current-indicator-transition-duration: 0.125s;
+
     /* Colors */
     --background-color: #ffffff;
     --glossary-image-background-color: #eeeeee;
@@ -101,6 +104,7 @@
 
     --progress-bar-track-color: #cccccc;
     --progress-bar-indicator-color: #0275d8;
+    --entry-current-indicator-color: #0275d8;
 }
 :root[data-yomichan-theme=dark] {
     /* Colors */
@@ -149,6 +153,7 @@
 
     --progress-bar-track-color: #3a3a3a;
     --progress-bar-indicator-color: #0275d8;
+    --entry-current-indicator-color: #0275d8;
 }
 
 
@@ -435,9 +440,6 @@ button.action-button {
     background-repeat: no-repeat;
     background-size: contain;
 }
-.action-button[data-icon=entry-current]::before {
-    background-image: url("/mixed/img/entry-current.svg");
-}
 .action-button[data-icon=view-note]::before {
     background-image: url("/mixed/img/view-note.svg");
 }
@@ -522,6 +524,26 @@ button.action-button {
     padding: var(--entry-vertical-padding) var(--entry-horizontal-padding);
     position: relative;
 }
+.entry>.entry-current-indicator {
+    display: block;
+    position: absolute;
+    left: calc(-1 * var(--main-content-horizontal-padding));
+    top: 0;
+    bottom: 0;
+    width: 0;
+    background-color: var(--entry-current-indicator-color);
+    visibility: hidden;
+    transition:
+        width var(--entry-current-indicator-transition-duration) linear,
+        visibility 0s linear var(--entry-current-indicator-transition-duration);
+}
+.entry.entry-current>.entry-current-indicator {
+    width: var(--entry-current-indicator);
+    visibility: visible;
+    transition:
+        width var(--entry-current-indicator-transition-duration) linear,
+        visibility 0s linear 0s;
+}
 .term-expression .kanji-link {
     border-bottom: var(--expression-thin-border-size) dashed var(--dark-border-color);
     color: var(--default-text-color);
@@ -536,9 +558,6 @@ button.action-button {
 .term-expression[data-frequency=rare]>.term-expression-text .kanji-link {
     color: var(--very-light-text-color);
 }
-.entry:not(.entry-current) .action-current-indicator {
-    display: none;
-}
 .entry-header2,
 .entry-header3 {
     display: inline;
-- 
cgit v1.2.3