Style adjustments (#537)
* Remove newlines for term-definition-item-template * Update how action button icons are styled * Fix spacing * Group text colors together * Correct image styles * Fix missing </span>
This commit is contained in:
toasted-nutbread
GitHub
parent
c61a87b152
commit
4d2e5b93f4
@ -54,8 +54,8 @@
|
||||
<hr>
|
||||
|
||||
<div id="navigation-header" class="navigation-header" hidden><div class="navigation-header-actions">
|
||||
<button class="action-button action-previous"><img src="/mixed/img/source-term.svg" class="icon-image" title="Source term (Alt + B)" alt></button>
|
||||
<button class="action-button action-next"><img src="/mixed/img/source-term.svg" class="icon-image" title="Next term (Alt + F)" alt></button>
|
||||
<button class="action-button action-previous" data-icon="source-term" title="Source term (Alt + B)"></button>
|
||||
<button class="action-button action-next" data-icon="source-term" title="Next term (Alt + F)"></button>
|
||||
</div></div><div class="navigation-header-spacer"></div>
|
||||
|
||||
<div id="content"></div>
|
||||
|
||||
@ -17,8 +17,8 @@
|
||||
<div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div>
|
||||
|
||||
<div id="navigation-header" class="navigation-header" hidden><div class="navigation-header-actions">
|
||||
<button class="action-button action-previous"><img src="/mixed/img/source-term.svg" class="icon-image" title="Source term (Alt + B)" alt></button>
|
||||
<button class="action-button action-next"><img src="/mixed/img/source-term.svg" class="icon-image" title="Next term (Alt + F)" alt></button>
|
||||
<button class="action-button action-previous" data-icon="source-term" title="Source term (Alt + B)"></button>
|
||||
<button class="action-button action-next" data-icon="source-term" title="Next term (Alt + F)"></button>
|
||||
</div></div><div class="navigation-header-spacer"></div>
|
||||
|
||||
<div id="definitions"></div>
|
||||
|
||||
@ -27,13 +27,12 @@
|
||||
--default-text-color: #333333;
|
||||
--light-text-color: #777777;
|
||||
--very-light-text-color: #999999;
|
||||
--popuplar-kanji-text-color: #0275d8;
|
||||
|
||||
--light-border-color: #eeeeee;
|
||||
--medium-border-color: #dddddd;
|
||||
--dark-border-color: #777777;
|
||||
|
||||
--popuplar-kanji-text-color: #0275d8;
|
||||
|
||||
--pitch-accent-annotation-color: #000000;
|
||||
|
||||
--tag-text-color: #ffffff;
|
||||
@ -58,13 +57,12 @@
|
||||
--default-text-color: #d4d4d4;
|
||||
--light-text-color: #888888;
|
||||
--very-light-text-color: #666666;
|
||||
--popuplar-kanji-text-color: #0275d8;
|
||||
|
||||
--light-border-color: #2f2f2f;
|
||||
--medium-border-color: #3f3f3f;
|
||||
--dark-border-color: #888888;
|
||||
|
||||
--popuplar-kanji-text-color: #0275d8;
|
||||
|
||||
--pitch-accent-annotation-color: #ffffff;
|
||||
|
||||
--tag-text-color: #e1e1e1;
|
||||
@ -173,14 +171,14 @@ h2 {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navigation-header:not([data-has-previous=true]) .navigation-header-actions .action-previous>img,
|
||||
.navigation-header:not([data-has-next=true]) .navigation-header-actions .action-next>img {
|
||||
.navigation-header:not([data-has-previous=true]) .navigation-header-actions .action-button.action-previous:before,
|
||||
.navigation-header:not([data-has-next=true]) .navigation-header-actions .action-button.action-next:before {
|
||||
opacity: 0.25;
|
||||
-webkit-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.action-next>img {
|
||||
.action-button.action-next:before {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
@ -234,18 +232,18 @@ h2 {
|
||||
padding-right: 0.72em;
|
||||
}
|
||||
|
||||
.actions .disabled {
|
||||
.action-button.disabled {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.actions .disabled img {
|
||||
.action-button.disabled:before {
|
||||
-webkit-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.actions .pending {
|
||||
.action-button.pending {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@ -274,10 +272,32 @@ button.action-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-image {
|
||||
.action-button[data-icon]:before {
|
||||
content: "";
|
||||
width: 1.14285714em; /* 14px => 16px */
|
||||
height: 1.14285714em; /* 14px => 16px */
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.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");
|
||||
}
|
||||
.action-button[data-icon=add-term-kanji]:before {
|
||||
background-image: url("/mixed/img/add-term-kanji.svg");
|
||||
}
|
||||
.action-button[data-icon=add-term-kana]:before {
|
||||
background-image: url("/mixed/img/add-term-kana.svg");
|
||||
}
|
||||
.action-button[data-icon=play-audio]:before {
|
||||
background-image: url("/mixed/img/play-audio.svg");
|
||||
}
|
||||
.action-button[data-icon=source-term]:before {
|
||||
background-image: url("/mixed/img/source-term.svg");
|
||||
}
|
||||
|
||||
.term-expression .kanji-link {
|
||||
@ -358,7 +378,7 @@ button.action-button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tag-list>.tag:not(:last-child) {
|
||||
.tag-list>.tag {
|
||||
margin-right: 0.375em;
|
||||
}
|
||||
|
||||
@ -505,7 +525,7 @@ button.action-button {
|
||||
}
|
||||
|
||||
.term-definition-disambiguation-list:after {
|
||||
content: " only)";
|
||||
content: " only) ";
|
||||
}
|
||||
|
||||
.term-definition-disambiguation+.term-definition-disambiguation:before {
|
||||
|
||||
@ -5,11 +5,11 @@
|
||||
<div class="entry-header2">
|
||||
<div class="entry-header3">
|
||||
<div class="actions">
|
||||
<button class="action-button action-view-note pending disabled"><img src="/mixed/img/view-note.svg" class="icon-image" title="View added note (Alt + V)" alt></button>
|
||||
<button class="action-button action-add-note pending disabled" data-mode="term-kanji"><img src="/mixed/img/add-term-kanji.svg" class="icon-image" title="Add expression (Alt + E)" alt></button>
|
||||
<button class="action-button action-add-note pending disabled" data-mode="term-kana"><img src="/mixed/img/add-term-kana.svg" class="icon-image" title="Add reading (Alt + R)" alt></button>
|
||||
<button class="action-button action-play-audio"><img src="/mixed/img/play-audio.svg" class="icon-image" title="Play audio (Alt + P)" alt></button>
|
||||
<span class="action-button action-current-indicator"><img src="/mixed/img/entry-current.svg" class="icon-image current" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)" alt></span>
|
||||
<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="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>
|
||||
@ -24,15 +24,11 @@
|
||||
<pre class="debug-info"></pre>
|
||||
</div></template>
|
||||
<template id="term-expression-template"><div class="term-expression"><span class="term-expression-text source-text"></span><div class="term-expression-details">
|
||||
<button class="action-button action-play-audio"><img src="/mixed/img/play-audio.svg" class="icon-image" title="Play audio" alt></button>
|
||||
<button class="action-button action-play-audio" data-icon="play-audio" title="Play audio"></button>
|
||||
<div class="tags tag-list"></div>
|
||||
<div class="frequencies tag-list"></div>
|
||||
</div></div></template>
|
||||
<template id="term-definition-item-template"><li class="term-definition-item">
|
||||
<div class="term-definition-tag-list tag-list"></div>
|
||||
<div class="term-definition-disambiguation-list"></div>
|
||||
<ul class="term-glossary-list"></ul>
|
||||
</li></template>
|
||||
<template id="term-definition-item-template"><li class="term-definition-item"><div class="term-definition-tag-list tag-list"></div><div class="term-definition-disambiguation-list"></div><ul class="term-glossary-list"></ul></li></template>
|
||||
<template id="term-definition-disambiguation-template"><span class="term-definition-disambiguation"></span></template>
|
||||
<template id="term-glossary-item-template"><li class="term-glossary-item"><span class="term-glossary-separator"> </span><span class="term-glossary"></span></li></template>
|
||||
<template id="term-glossary-item-image-template"><li class="term-glossary-item" data-has-image="true"><span class="term-glossary-separator"> </span><span class="term-glossary"><a class="term-glossary-image-link" target="_blank" rel="noreferrer noopener"><span class="term-glossary-image-container"><span class="term-glossary-image-aspect-ratio-sizer"></span><img class="term-glossary-image" alt="" /><span class="term-glossary-image-container-overlay"></span></span><span class="term-glossary-image-link-text">Image</span></a> <span class="term-glossary-image-description"></span></span></li></template>
|
||||
@ -55,9 +51,9 @@
|
||||
<div class="entry-header2">
|
||||
<div class="entry-header3">
|
||||
<div class="actions">
|
||||
<button class="action-button action-view-note pending disabled"><img src="/mixed/img/view-note.svg" class="icon-image" title="View added note (Alt + V)" alt></button>
|
||||
<button class="action-button action-add-note pending disabled" data-mode="kanji"><img src="/mixed/img/add-term-kanji.svg" class="icon-image" title="Add Kanji (Alt + K)" alt></button>
|
||||
<span class="action-button action-current-indicator"><img src="/mixed/img/entry-current.svg" class="icon-image current" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)" alt></span>
|
||||
<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>
|
||||
@ -92,7 +88,7 @@
|
||||
<template id="kanji-reading-template"><dd class="kanji-reading"></dd></template>
|
||||
|
||||
<template id="tag-template"><span class="tag"><span class="tag-inner"></span></span></template>
|
||||
<template id="tag-frequency-template"><span class="tag" data-category="frequency"><span class="tag-inner"><span class="term-frequency-dictionary-name"></span><span class="term-frequency-separator"></span><span class="term-frequency-value"></span></span></template>
|
||||
<template id="tag-frequency-template"><span class="tag" data-category="frequency"><span class="tag-inner"><span class="term-frequency-dictionary-name"></span><span class="term-frequency-separator"></span><span class="term-frequency-value"></span></span></span></template>
|
||||
<template id="tag-search-template"><span class="tag" data-category="search"></span></template>
|
||||
|
||||
</body></html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user