Settings v2 headings improvements (#1148)
* Improve spacing on h2 * Add icons to headings * Clarify font-size
This commit is contained in:
parent
f5ae0f1f3d
commit
8747a29f9f
@ -232,7 +232,8 @@ h2 {
|
||||
font-size: 1.125em;
|
||||
font-weight: normal;
|
||||
line-height: 1.5;
|
||||
margin: 1.75em 0 0.9em;
|
||||
padding: 0.9em 0;
|
||||
margin: 0.85em 0 0;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1em;
|
||||
@ -246,6 +247,17 @@ h3 {
|
||||
width: 100%;
|
||||
align-items: baseline;
|
||||
}
|
||||
.heading-container-icon {
|
||||
flex: 0 0 auto;
|
||||
align-self: center;
|
||||
margin: 0.85em 0.75em 0 0;
|
||||
}
|
||||
.heading-container-icon>.icon {
|
||||
display: block;
|
||||
background-color: var(--button-icon-color);
|
||||
width: var(--outline-item-icon-size);
|
||||
height: var(--outline-item-icon-size);
|
||||
}
|
||||
.heading-container-left {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
@ -253,7 +265,7 @@ h3 {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.heading-sub-text {
|
||||
font-size: 0.88888888em;
|
||||
font-size: calc(1em / 1.125);
|
||||
color: var(--text-color-light);
|
||||
}
|
||||
.heading-link-light {
|
||||
|
@ -72,7 +72,10 @@
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<h2 id="profile">Profile</h2>
|
||||
<div class="heading-container">
|
||||
<div class="heading-container-icon"><span class="icon" data-icon="profile"></span></div>
|
||||
<div class="heading-container-left"><h2 id="profile">Profile</h2></div>
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
|
||||
<div class="settings-item-left">
|
||||
@ -102,7 +105,10 @@
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<h2 id="dictionaries">Dictionaries <span class="heading-sub-text no-wrap" data-modal-action="show,dictionaries">(<span id="dictionary-install-count">#</span> installed)</span></h2>
|
||||
<div class="heading-container">
|
||||
<div class="heading-container-icon"><span class="icon" data-icon="book"></span></div>
|
||||
<div class="heading-container-left"><h2 id="dictionaries">Dictionaries <span class="heading-sub-text no-wrap" data-modal-action="show,dictionaries">(<span id="dictionary-install-count">#</span> installed)</span></h2></div>
|
||||
</div>
|
||||
<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">
|
||||
@ -174,7 +180,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="general">General</h2>
|
||||
<div class="heading-container">
|
||||
<div class="heading-container-icon"><span class="icon" data-icon="cog"></span></div>
|
||||
<div class="heading-container-left"><h2 id="general">General</h2></div>
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<div class="settings-item"><div class="settings-item-inner">
|
||||
<div class="settings-item-left">
|
||||
@ -268,7 +277,10 @@
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<h2 id="popup">Popup</h2>
|
||||
<div class="heading-container">
|
||||
<div class="heading-container-icon"><span class="icon" data-icon="popup"></span></div>
|
||||
<div class="heading-container-left"><h2 id="popup">Popup</h2></div>
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<div class="settings-item"><div class="settings-item-inner">
|
||||
<div class="settings-item-left">
|
||||
@ -410,7 +422,10 @@
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<h2 id="popup-appearance">Popup Appearance</h2>
|
||||
<div class="heading-container">
|
||||
<div class="heading-container-icon"><span class="icon" data-icon="palette"></span></div>
|
||||
<div class="heading-container-left"><h2 id="popup-appearance">Popup Appearance</h2></div>
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
|
||||
<div class="settings-item-left">
|
||||
@ -569,7 +584,10 @@
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<h2 id="popup-size">Popup Position & Size</h2>
|
||||
<div class="heading-container">
|
||||
<div class="heading-container-icon"><span class="icon" data-icon="popup-size"></span></div>
|
||||
<div class="heading-container-left"><h2 id="popup-size">Popup Position & Size</h2></div>
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<div class="settings-item">
|
||||
<div class="settings-item-inner settings-item-inner-wrappable">
|
||||
@ -745,7 +763,10 @@
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<h2 id="audio">Audio</h2>
|
||||
<div class="heading-container">
|
||||
<div class="heading-container-icon"><span class="icon" data-icon="speaker"></span></div>
|
||||
<div class="heading-container-left"><h2 id="audio">Audio</h2></div>
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<div class="settings-item"><div class="settings-item-inner">
|
||||
<div class="settings-item-left">
|
||||
@ -784,7 +805,10 @@
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<h2 id="scanning">Scanning</h2>
|
||||
<div class="heading-container">
|
||||
<div class="heading-container-icon"><span class="icon" data-icon="scanning"></span></div>
|
||||
<div class="heading-container-left"><h2 id="scanning">Scanning</h2></div>
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<div class="settings-item">
|
||||
<div class="settings-item-inner settings-item-inner-wrappable">
|
||||
@ -951,6 +975,7 @@
|
||||
|
||||
<div>
|
||||
<div class="heading-container">
|
||||
<div class="heading-container-icon"><span class="icon" data-icon="text-parsing"></span></div>
|
||||
<div class="heading-container-left"><h2 id="text-parsing">Text Parsing</h2></div>
|
||||
<div class="heading-container-right"><a class="more-toggle more-only heading-link-light" data-parent-distance="3">Info…</a></div>
|
||||
</div>
|
||||
@ -1024,6 +1049,7 @@
|
||||
|
||||
<div>
|
||||
<div class="heading-container">
|
||||
<div class="heading-container-icon"><span class="icon" data-icon="translation"></span></div>
|
||||
<div class="heading-container-left"><h2 id="translation">Translation</h2></div>
|
||||
<div class="heading-container-right"><a class="more-toggle more-only heading-link-light" data-parent-distance="3">Info…</a></div>
|
||||
</div>
|
||||
@ -1139,6 +1165,7 @@
|
||||
|
||||
<div>
|
||||
<div class="heading-container">
|
||||
<div class="heading-container-icon"><span class="icon" data-icon="note-card"></span></div>
|
||||
<div class="heading-container-left"><h2 id="anki">Anki</h2></div>
|
||||
<div class="heading-container-right"><a class="more-toggle more-only heading-link-light" data-parent-distance="3">Info…</a></div>
|
||||
</div>
|
||||
@ -1307,7 +1334,10 @@
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<h2 id="shortcuts">Shortcuts</h2>
|
||||
<div class="heading-container">
|
||||
<div class="heading-container-icon"><span class="icon" data-icon="keyboard"></span></div>
|
||||
<div class="heading-container-left"><h2 id="shortcuts">Shortcuts</h2></div>
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<div class="settings-item"><div class="settings-item-inner">
|
||||
<div class="settings-item-left">
|
||||
@ -1335,7 +1365,10 @@
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<h2 id="backup">Backup</h2>
|
||||
<div class="heading-container">
|
||||
<div class="heading-container-icon"><span class="icon" data-icon="backup"></span></div>
|
||||
<div class="heading-container-left"><h2 id="backup">Backup</h2></div>
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<div class="settings-item"><div class="settings-item-inner">
|
||||
<div class="settings-item-left">
|
||||
@ -1364,7 +1397,10 @@
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<h2 id="security" class="advanced-only">Security</h2>
|
||||
<div class="heading-container advanced-only">
|
||||
<div class="heading-container-icon"><span class="icon" data-icon="lock"></span></div>
|
||||
<div class="heading-container-left"><h2 id="security">Security</h2></div>
|
||||
</div>
|
||||
<div class="settings-group advanced-only">
|
||||
<div class="settings-item">
|
||||
<div class="settings-item-inner settings-item-inner-wrappable">
|
||||
|
Loading…
Reference in New Issue
Block a user