diff options
| author | toasted-nutbread <toasted-nutbread@users.noreply.github.com> | 2020-11-19 18:34:41 -0500 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-11-19 18:34:41 -0500 |
| commit | b0a565062524f74b973071f259a2c0d7a577c372 (patch) | |
| tree | a7fee45a8bb880b737ede93a8266d6eb02a8fa2b /ext/mixed | |
| parent | 1588f6210cb41c0a9d9defaa3e0ae71754337cd5 (diff) | |
Update selection indicator (#1044)
* Add new current indicator
* Remove old indicator
Diffstat (limited to 'ext/mixed')
| -rw-r--r-- | ext/mixed/css/display.css | 31 | ||||
| -rw-r--r-- | ext/mixed/display-templates.html | 4 |
2 files changed, 27 insertions, 8 deletions
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; diff --git a/ext/mixed/display-templates.html b/ext/mixed/display-templates.html index e27ce85d..fbfa9303 100644 --- a/ext/mixed/display-templates.html +++ b/ext/mixed/display-templates.html @@ -1,6 +1,7 @@ <!DOCTYPE html><html><head></head><body> <template id="term-entry-template"><div class="entry" data-type="term"> + <div class="entry-current-indicator" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"></div> <div class="entry-header1"> <div class="entry-header2"> <div class="entry-header3"> @@ -9,7 +10,6 @@ <button class="action-button action-add-note pending disabled" data-icon="add-term-kanji" data-mode="term-kanji" title="Add expression (Alt + E)"></button> <button class="action-button action-add-note pending disabled" data-icon="add-term-kana" data-mode="term-kana" title="Add reading (Alt + R)"></button> <button class="action-button action-play-audio" data-icon="play-audio" title="Play audio (Alt + P)"></button> - <span class="action-button action-current-indicator" data-icon="entry-current" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"></span> </div> <div class="term-expression-list"></div> </div> @@ -47,13 +47,13 @@ <template id="term-pitch-accent-character-template"><span class="term-pitch-accent-character"><span class="term-pitch-accent-character-inner"></span></span></template> <template id="kanji-entry-template"><div class="entry" data-type="kanji"> + <div class="entry-current-indicator" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"></div> <div class="entry-header1"> <div class="entry-header2"> <div class="entry-header3"> <div class="actions"> <button class="action-button action-view-note pending disabled" data-icon="view-note" title="View added note (Alt + V)"></button> <button class="action-button action-add-note pending disabled" data-icon="add-term-kanji" data-mode="kanji" title="Add Kanji (Alt + K)"></button> - <span class="action-button action-current-indicator" data-icon="entry-current" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"></span> </div> <div class="kanji-glyph source-text"></div> </div> |