alex/yomichan
1
Fork 0
Code Releases Activity

Improve settings item button styles (#1155)

Browse Source 
* Improve styles for settings-item-button

* Add hover/active styles to settings-item-button

* Use consistent phrasing for setting buttons and include ellipsis
This commit is contained in:
toasted-nutbread 2020-12-21 19:21:03 -05:00 committed by GitHub
parent 18043babeb
commit 8203f11e89
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
ext/bg/css/settings2.css
View File

@ -610,13 +610,6 @@ h3 {
.settings-item:not([hidden]) {
display: block;
}
.settings-item-button {
cursor: pointer;
}
a.settings-item-button {
color: var(--text-color-default);
text-decoration: none;
}
.settings-item-outer {
display: block;
width: 100%;
@ -694,6 +687,30 @@ a.settings-item-button {
:root:not([data-advanced=true]) .advanced-only {
display: none;
}
.settings-item.settings-item-button,
a.settings-item.settings-item-button {
cursor: pointer;
color: var(--text-color-default);
text-decoration: none;
background-color: transparent;
transition: background-color var(--animation-duration) ease-in-out;
}
.settings-item.settings-item-button>.settings-item-inner,
.settings-item.settings-item-button>.settings-item-inner>.settings-item-left,
.settings-item.settings-item-button>.settings-item-inner>.settings-item-right {
margin-top: 0;
}
.settings-item.settings-item-button:hover,
.settings-item.settings-item-button:active {
background-color: var(--background-color);
}
.settings-item.settings-item-button .icon-button>.icon-button-inner>.icon {
transition: background-color var(--animation-duration) ease-in-out;
}
.settings-item.settings-item-button:hover .icon-button>.icon-button-inner>.icon,
.settings-item.settings-item-button:active .icon-button>.icon-button-inner>.icon {
background-color: var(--accent-color);
}
/* Settings item groups */

18
ext/bg/settings2.html
View File

@ -97,7 +97,7 @@
</div></div>
<div class="settings-item settings-item-button" data-modal-action="show,profiles"><div class="settings-item-inner">
<div class="settings-item-left">
<div class="settings-item-label">Adjust profiles</div>
<div class="settings-item-label">Configure profiles&hellip;</div>
</div>
<div class="settings-item-right open-panel-button-container">
<button class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
@ -112,7 +112,7 @@
<div class="settings-group">
<div class="settings-item settings-item-button" data-modal-action="show,dictionaries"><div class="settings-item-inner">
<div class="settings-item-left">
<div class="settings-item-label">Configure installed and enabled dictionaries</div>
<div class="settings-item-label">Configure installed and enabled dictionaries&hellip;</div>
</div>
<div class="settings-item-right open-panel-button-container">
<button class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
@ -258,7 +258,7 @@
</div></div>
<div class="settings-item settings-item-button" data-modal-action="show,secondary-search-dictionaries"><div class="settings-item-inner">
<div class="settings-item-left">
<div class="settings-item-label">Secondary dictionaries</div>
<div class="settings-item-label">Secondary dictionaries&hellip;</div>
</div>
<div class="settings-item-right open-panel-button-container">
<button class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
@ -576,7 +576,7 @@
</div>
<div class="settings-item settings-item-button" data-modal-action="show,custom-css"><div class="settings-item-inner">
<div class="settings-item-left">
<div class="settings-item-label">Custom CSS</div>
<div class="settings-item-label">Configure custom CSS&hellip;</div>
</div>
<div class="settings-item-right open-panel-button-container">
<button class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
@ -797,7 +797,7 @@
</div></div>
<div class="settings-item settings-item-button" data-modal-action="show,audio-sources"><div class="settings-item-inner">
<div class="settings-item-left">
<div class="settings-item-label">Audio playback sources</div>
<div class="settings-item-label">Configure audio playback sources&hellip;</div>
</div>
<div class="settings-item-right open-panel-button-container">
<button class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
@ -848,7 +848,7 @@
</div></div>
<div class="settings-item settings-item-button advanced-only" data-modal-action="show,scanning-inputs"><div class="settings-item-inner">
<div class="settings-item-left">
<div class="settings-item-label">Configure advanced scanning inputs <span class="light no-wrap">(<span class="scanning-input-count">#</span> defined)</span></div>
<div class="settings-item-label">Configure advanced scanning inputs&hellip; <span class="light no-wrap">(<span class="scanning-input-count">#</span> defined)</span></div>
</div>
<div class="settings-item-right open-panel-button-container">
<button class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
@ -965,7 +965,7 @@
</div></div>
<div class="settings-item settings-item-button advanced-only" data-modal-action="show,input-action-prevention"><div class="settings-item-inner">
<div class="settings-item-left">
<div class="settings-item-label">Configure input action prevention</div>
<div class="settings-item-label">Configure input action prevention&hellip;</div>
</div>
<div class="settings-item-right open-panel-button-container">
<button class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
@ -1318,7 +1318,7 @@
</div>
<div class="settings-item settings-item-button" data-modal-action="show,anki-cards"><div class="settings-item-inner">
<div class="settings-item-left">
<div class="settings-item-label">Configure Anki card format</div>
<div class="settings-item-label">Configure Anki card format&hellip;</div>
</div>
<div class="settings-item-right open-panel-button-container">
<button class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
@ -1326,7 +1326,7 @@
</div></div>
<div class="settings-item settings-item-button advanced-only" data-modal-action="show,anki-card-templates"><div class="settings-item-inner">
<div class="settings-item-left">
<div class="settings-item-label">Configure Anki card templates</div>
<div class="settings-item-label">Configure Anki card templates&hellip;</div>
</div>
<div class="settings-item-right open-panel-button-container">
<button class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>

2
ext/bg/welcome.html
View File

@ -63,7 +63,7 @@
<div class="settings-item-children settings-item-children-group">
<div class="settings-item settings-item-button" data-modal-action="show,dictionaries"><div class="settings-item-inner">
<div class="settings-item-left">
<div class="settings-item-label">Install or remove dictionaries</div>
<div class="settings-item-label">Install or remove dictionaries&hellip;</div>
</div>
<div class="settings-item-right open-panel-button-container">
<button class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>