Display button updates (#1945)
* Use span rather than div for button badges * Update action button icons * Rename class * Update current entry indicator
This commit is contained in:
toasted-nutbread
GitHub
parent
dfddf3792e
commit
6661933d47
|
|
@ -627,7 +627,7 @@ button.action-button[hidden] {
|
|||
-webkit-filter var(--animation-duration) linear,
|
||||
background-color var(--animation-duration) linear;
|
||||
}
|
||||
button.collapsible-action-button[hidden] {
|
||||
button.action-button-collapsible[hidden] {
|
||||
display: none;
|
||||
}
|
||||
button.action-button:disabled {
|
||||
|
|
@ -653,34 +653,18 @@ button.action-button:active {
|
|||
background-color: var(--action-button-active-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
button.action-button[data-icon]::before {
|
||||
content: '';
|
||||
width: var(--action-button-size);
|
||||
height: var(--action-button-size);
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
button.action-button[data-icon=view-note]::before {
|
||||
background-image: url('/images/view-note.svg');
|
||||
}
|
||||
button.action-button[data-icon=add-term-kanji]::before {
|
||||
background-image: url('/images/add-term-kanji.svg');
|
||||
}
|
||||
button.action-button[data-icon=add-term-kana]::before {
|
||||
background-image: url('/images/add-term-kana.svg');
|
||||
}
|
||||
button.action-button[data-icon=play-audio]::before {
|
||||
background-image: url('/images/play-audio.svg');
|
||||
}
|
||||
button.action-button[data-icon=source-term]::before {
|
||||
background-image: url('/images/source-term.svg');
|
||||
}
|
||||
.action-view-tags>.icon {
|
||||
.icon[data-icon=view-note] { background-image: url('/images/view-note.svg'); }
|
||||
.icon[data-icon=add-term-kanji] { background-image: url('/images/add-term-kanji.svg'); }
|
||||
.icon[data-icon=add-term-kana] { background-image: url('/images/add-term-kana.svg'); }
|
||||
.icon[data-icon=play-audio] { background-image: url('/images/play-audio.svg'); }
|
||||
.icon[data-icon=source-term] { background-image: url('/images/source-term.svg'); }
|
||||
.icon[data-icon=entry-current] { background-image: url('/images/entry-current.svg'); }
|
||||
.action-icon {
|
||||
display: block;
|
||||
width: var(--action-button-size);
|
||||
height: var(--action-button-size);
|
||||
}
|
||||
.action-icon:not(.color-icon) {
|
||||
background-color: var(--text-color);
|
||||
}
|
||||
:root[data-result-output-mode=merge] .entry[data-type=term] .actions>button.action-button.action-play-audio {
|
||||
|
|
@ -1048,14 +1032,10 @@ button.action-button[data-icon=source-term]::before {
|
|||
:root:not([data-popup-current-indicator-mode=asterisk]) .entry-current-indicator-icon {
|
||||
display: none;
|
||||
}
|
||||
.entry-current-indicator-icon::before {
|
||||
content: '';
|
||||
.entry-current-indicator-icon>.icon {
|
||||
width: var(--action-button-size);
|
||||
height: var(--action-button-size);
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url('/images/entry-current.svg');
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -228,6 +228,14 @@ body {
|
|||
mask-size: var(--icon-size);
|
||||
mask-image: var(--icon-image);
|
||||
}
|
||||
.icon.color-icon {
|
||||
-webkit-mask-image: none;
|
||||
mask-image: none;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: var(--icon-size);
|
||||
background-image: var(--icon-image);
|
||||
}
|
||||
.icon[data-icon=none] { --icon-image: linear-gradient(transparent, transparent); }
|
||||
.icon[data-icon=profile] { --icon-image: url(/images/profile.svg); }
|
||||
.icon[data-icon=cog] { --icon-image: url(/images/cog.svg); }
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@
|
|||
<div class="entry-current-indicator" title="Current entry"><span class="entry-current-indicator-inner"></span></div>
|
||||
<div class="entry-header">
|
||||
<div class="actions">
|
||||
<button class="action-button collapsible-action-button action-view-tags" hidden disabled><span class="icon" data-icon="tag"></span></button>
|
||||
<button class="action-button action-view-note" hidden disabled data-icon="view-note" title="View added note" data-hotkey='["viewNote","title","View added note ({0})"]' data-menu-position="left below h-cover v-cover"><div class="action-button-badge icon" hidden></div></button>
|
||||
<button class="action-button action-add-note" hidden disabled data-icon="add-term-kanji" data-mode="term-kanji" title="Add expression" data-hotkey='["addNoteTermKanji","title","Add expression ({0})"]'></button>
|
||||
<button class="action-button action-add-note" hidden disabled data-icon="add-term-kana" data-mode="term-kana" title="Add reading" data-hotkey='["addNoteTermKana","title","Add reading ({0})"]'></button>
|
||||
<button class="action-button action-play-audio" data-icon="play-audio" title="Play audio" data-title-default="Play audio" data-hotkey='["playAudio",["title","data-title-default"],"Play audio ({0})"]' data-menu-position="left below h-cover v-cover"><div class="action-button-badge icon" hidden></div></button>
|
||||
<span class="entry-current-indicator-icon" title="Current entry"></span>
|
||||
<button class="action-button action-button-collapsible action-view-tags" hidden disabled><span class="action-icon icon" data-icon="tag"></span></button>
|
||||
<button class="action-button action-view-note" hidden disabled title="View added note" data-hotkey='["viewNote","title","View added note ({0})"]' data-menu-position="left below h-cover v-cover"><span class="action-icon icon color-icon" data-icon="view-note"></span><span class="action-button-badge icon" hidden></span></button>
|
||||
<button class="action-button action-add-note" hidden disabled data-mode="term-kanji" title="Add expression" data-hotkey='["addNoteTermKanji","title","Add expression ({0})"]'><span class="action-icon icon color-icon" data-icon="add-term-kanji"></span></button>
|
||||
<button class="action-button action-add-note" hidden disabled data-mode="term-kana" title="Add reading" data-hotkey='["addNoteTermKana","title","Add reading ({0})"]'><span class="action-icon icon color-icon" data-icon="add-term-kana"></span></button>
|
||||
<button class="action-button action-play-audio" title="Play audio" data-title-default="Play audio" data-hotkey='["playAudio",["title","data-title-default"],"Play audio ({0})"]' data-menu-position="left below h-cover v-cover"><span class="action-icon icon color-icon" data-icon="play-audio"></span><span class="action-button-badge icon" hidden></span></button>
|
||||
<span class="entry-current-indicator-icon" title="Current entry"><span class="icon color-icon" data-icon="entry-current"></span></span>
|
||||
</div>
|
||||
<div class="headword-list"></div>
|
||||
<div class="headword-list-details">
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
</span>
|
||||
</div>
|
||||
<div class="headword-details">
|
||||
<button class="action-button action-play-audio" data-icon="play-audio" title="Play audio" data-title-default="Play audio" data-hotkey='["playAudio",["title","data-title-default"],"Play audio ({0})"]' data-menu-position="right below h-cover v-cover"><div class="action-button-badge icon" hidden></div></button>
|
||||
<button class="action-button action-play-audio" title="Play audio" data-title-default="Play audio" data-hotkey='["playAudio",["title","data-title-default"],"Play audio ({0})"]' data-menu-position="right below h-cover v-cover"><span class="action-icon icon color-icon" data-icon="play-audio"></span><span class="action-button-badge icon" hidden></span></button>
|
||||
</div>
|
||||
</div></template>
|
||||
<template id="definition-item-template" data-remove-whitespace-text="true"><li class="definition-item">
|
||||
|
|
@ -91,9 +91,9 @@
|
|||
<div class="entry-current-indicator" title="Current entry"><span class="entry-current-indicator-inner"></span></div>
|
||||
<div class="entry-header">
|
||||
<div class="actions">
|
||||
<button class="action-button action-view-note" hidden disabled data-icon="view-note" title="View added note" data-hotkey='["viewNote","title","View added note ({0})"]'></button>
|
||||
<button class="action-button action-add-note" hidden disabled data-icon="add-term-kanji" data-mode="kanji" title="Add kanji" data-hotkey='["addNoteKanji","title","Add kanji ({0})"]'></button>
|
||||
<span class="entry-current-indicator-icon" title="Current entry"></span>
|
||||
<button class="action-button action-view-note" hidden disabled title="View added note" data-hotkey='["viewNote","title","View added note ({0})"]'><span class="action-icon icon color-icon" data-icon="view-note"></span></button>
|
||||
<button class="action-button action-add-note" hidden disabled data-mode="kanji" title="Add kanji" data-hotkey='["addNoteKanji","title","Add kanji ({0})"]'><span class="action-icon icon color-icon" data-icon="add-term-kanji"></span></button>
|
||||
<span class="entry-current-indicator-icon" title="Current entry"><span class="icon color-icon" data-icon="entry-current"></span></span>
|
||||
</div>
|
||||
<div class="kanji-glyph-container">
|
||||
<span class="headword-current-indicator"></span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user