Improve tag styles (#1431)
* Update tag styles * Refactor _createTag * Update padding
This commit is contained in:
toasted-nutbread
GitHub
parent
75d0d333d8
commit
b778974938
@ -674,73 +674,87 @@ button.action-button[data-icon=source-term]::before {
|
||||
|
||||
/* Tags */
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 0.2em 0.6em 0.3em;
|
||||
font-size: var(--tag-font-size);
|
||||
font-weight: var(--tag-font-weight);
|
||||
line-height: 1.25;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
--tag-color: var(--tag-default-background-color);
|
||||
|
||||
display: inline-flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: stretch;
|
||||
border: none;
|
||||
border-right: none;
|
||||
font-size: 1em;
|
||||
margin: calc(1em / var(--font-size-no-units)) 0.375em calc(1em / var(--font-size-no-units)) 0;
|
||||
}
|
||||
.tag-label {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
background-color: var(--tag-color);
|
||||
border-radius: 0.25em;
|
||||
padding: calc(2.5em / var(--font-size-no-units)) 0.375em calc(2.5em / var(--font-size-no-units)) 0.375em;
|
||||
color: var(--tag-text-color);
|
||||
background-color: var(--tag-default-background-color);
|
||||
border: var(--tag-border-size) var(--tag-border-style) var(--tag-border-color);
|
||||
margin-right: 0.375em;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tag[data-category=name] {
|
||||
background-color: var(--tag-name-background-color);
|
||||
.tag-label-content {
|
||||
font-size: var(--tag-font-size);
|
||||
font-weight: var(--tag-font-weight);
|
||||
}
|
||||
.tag[data-category=expression] {
|
||||
background-color: var(--tag-expression-background-color);
|
||||
.tag-body {
|
||||
position: relative;
|
||||
padding: 0 0.375em 0 0.375em;
|
||||
}
|
||||
.tag[data-category=popular] {
|
||||
background-color: var(--tag-popular-background-color);
|
||||
}
|
||||
.tag[data-category=frequent] {
|
||||
background-color: var(--tag-frequent-background-color);
|
||||
}
|
||||
.tag[data-category=archaism] {
|
||||
background-color: var(--tag-archaism-background-color);
|
||||
}
|
||||
.tag[data-category=dictionary] {
|
||||
background-color: var(--tag-dictionary-background-color);
|
||||
}
|
||||
.tag[data-category=frequency] {
|
||||
background-color: var(--tag-frequency-background-color);
|
||||
}
|
||||
.tag[data-category=partOfSpeech] {
|
||||
background-color: var(--tag-part-of-speech-background-color);
|
||||
}
|
||||
.tag[data-category=search] {
|
||||
background-color: var(--tag-search-background-color);
|
||||
}
|
||||
.tag[data-category=pitch-accent-dictionary] {
|
||||
background-color: var(--tag-pitch-accent-dictionary-background-color);
|
||||
}
|
||||
.tag-inner {
|
||||
.tag-body::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-radius: 0.25em;
|
||||
border: var(--tag-border-size) var(--tag-border-style) var(--tag-color);
|
||||
border-left: none;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.tag-details-disambiguation-list::before {
|
||||
content: 'Only: ';
|
||||
.tag-body-content {
|
||||
position: relative;
|
||||
}
|
||||
.tag-details-disambiguation-list ruby>rt {
|
||||
display: inline;
|
||||
font-size: 1em;
|
||||
}
|
||||
.tag-details-disambiguation-list ruby>rt::before {
|
||||
content: '(';
|
||||
}
|
||||
.tag-details-disambiguation-list ruby>rt::after {
|
||||
content: ')';
|
||||
}
|
||||
.tag-details-disambiguation-list[data-unmatched-expression-count='0'],
|
||||
.tag-details-disambiguation-list:not([data-unmatched-expression-count]) {
|
||||
.tag:not(.tag-has-body)>.tag-body {
|
||||
display: none;
|
||||
}
|
||||
.tag-details-disambiguation:not(:last-child)::after {
|
||||
content: ', ';
|
||||
.tag.tag-has-body>.tag-label {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.tag[data-category=name] {
|
||||
--tag-color: var(--tag-name-background-color);
|
||||
}
|
||||
.tag[data-category=expression] {
|
||||
--tag-color: var(--tag-expression-background-color);
|
||||
}
|
||||
.tag[data-category=popular] {
|
||||
--tag-color: var(--tag-popular-background-color);
|
||||
}
|
||||
.tag[data-category=frequent] {
|
||||
--tag-color: var(--tag-frequent-background-color);
|
||||
}
|
||||
.tag[data-category=archaism] {
|
||||
--tag-color: var(--tag-archaism-background-color);
|
||||
}
|
||||
.tag[data-category=dictionary] {
|
||||
--tag-color: var(--tag-dictionary-background-color);
|
||||
}
|
||||
.tag[data-category=frequency] {
|
||||
--tag-color: var(--tag-frequency-background-color);
|
||||
}
|
||||
.tag[data-category=partOfSpeech] {
|
||||
--tag-color: var(--tag-part-of-speech-background-color);
|
||||
}
|
||||
.tag[data-category=search] {
|
||||
--tag-color: var(--tag-search-background-color);
|
||||
}
|
||||
.tag[data-category=pitch-accent-dictionary] {
|
||||
--tag-color: var(--tag-pitch-accent-dictionary-background-color);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -130,7 +130,8 @@
|
||||
<template id="kanji-reading-template"><dd class="kanji-reading"></dd></template>
|
||||
|
||||
<!-- Tag templates -->
|
||||
<template id="tag-template"><span class="tag"><span class="tag-inner"></span></span></template>
|
||||
<template id="tag-template"><span class="tag"><span class="tag-label"><span class="tag-label-content"></span></span></span></template>
|
||||
<template id="tag-with-body-template"><span class="tag tag-has-body"><span class="tag-label"><span class="tag-label-content"></span></span><span class="tag-body"><span class="tag-body-content"></span></span></span></template>
|
||||
|
||||
<!-- Extra -->
|
||||
<template id="footer-notification-template"><div class="footer-notification scrollbar-inverse">
|
||||
|
||||
@ -413,15 +413,16 @@ class DisplayGenerator {
|
||||
}
|
||||
|
||||
_createTag(details) {
|
||||
const {notes, name, category, redundant} = details;
|
||||
const node = this._templates.instantiate('tag');
|
||||
|
||||
const inner = node.querySelector('.tag-inner');
|
||||
const inner = node.querySelector('.tag-label-content');
|
||||
|
||||
node.title = details.notes;
|
||||
this._setTextContent(inner, details.name);
|
||||
node.dataset.details = details.notes || details.name;
|
||||
node.dataset.category = details.category;
|
||||
if (details.redundant) { node.dataset.redundant = 'true'; }
|
||||
node.title = notes;
|
||||
this._setTextContent(inner, name);
|
||||
node.dataset.details = notes || name;
|
||||
node.dataset.category = category;
|
||||
if (redundant) { node.dataset.redundant = 'true'; }
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
@ -787,6 +787,9 @@ class Display extends EventDispatcher {
|
||||
}
|
||||
|
||||
_showTagNotification(tagNode) {
|
||||
tagNode = tagNode.parentNode;
|
||||
if (tagNode === null) { return; }
|
||||
|
||||
if (this._tagNotification === null) {
|
||||
const node = this._displayGenerator.createEmptyFooterNotification();
|
||||
node.classList.add('click-scannable');
|
||||
@ -1677,7 +1680,7 @@ class Display extends EventDispatcher {
|
||||
this._addMultipleEventListeners(entry, '.action-view-note', 'click', this._onNoteView.bind(this));
|
||||
this._addMultipleEventListeners(entry, '.kanji-link', 'click', this._onKanjiLookup.bind(this));
|
||||
this._addMultipleEventListeners(entry, '.debug-log-link', 'click', this._onDebugLogClick.bind(this));
|
||||
this._addMultipleEventListeners(entry, '.tag', 'click', this._onTagClick.bind(this));
|
||||
this._addMultipleEventListeners(entry, '.tag-label', 'click', this._onTagClick.bind(this));
|
||||
}
|
||||
|
||||
_updateDefinitionTextScanner(options) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user