extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-12-01 04:23:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve theme colour controls

Browse Source
This commit is contained in:
zombieFox 2020-01-07 17:34:32 -07:00
parent fb30222c42
commit 70e5fbf91d
4 changed files with 91 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/form.css
View File

@ -1233,6 +1233,8 @@ input[type="range"]:disabled::-moz-range-progress {
display: inline-flex;
justify-content: flex-start;
align-items: stretch;
position: relative;
z-index: 1;
}
.form-group .form-group-text,

17
src/css/menu.css
View File

@ -27,9 +27,12 @@
width: 100%;
max-height: 100%;
overflow-y: auto;
box-shadow: var(--layout-shadow-bottom-large);
pointer-events: all;
transition: background-color var(--layout-timing-extra-fast);
transition: box-shadow var(--layout-timing-extra-fast);
}
.is-menu-open .menu-area {
box-shadow: var(--layout-shadow-bottom-large);
}
.is-edge .menu-area {
@ -88,6 +91,16 @@
.menu-item-form {
padding: 0 0 2em 2em;
z-index: 1;
}
.menu-item-form-sticky {
background-color: rgb(var(--theme-color-01));
margin: -2em -1em 0 -1em;
padding: 2em 1em 1em 1em;
position: sticky;
top: 0;
z-index: 2;
}
.menu-nav-button {

4
src/css/typography.css
View File

@ -6,7 +6,7 @@ h5,
h6 {
margin: 0 0 1em 0;
font-weight: normal;
line-height: 1.5;
line-height: 1.6;
color: rgb(var(--theme-color-18));
}
@ -57,7 +57,7 @@ h6 {
p {
color: rgb(var(--theme-color-16));
margin: 0;
line-height: 1.5;
line-height: 1.6;
}
p:not(:last-child) {

141
src/index.html
View File

@ -1428,6 +1428,78 @@
<h1 class="menu-item-header-text">Colour</h1>
</div>
<div class="menu-item-form">
<div class="menu-item-form-sticky">
<p>Colour shades</p>
<div class="form-group form-group-block form-group-border form-group-border-theme-color mb-0">
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-10"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-09"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-08"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-07"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-06"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-05"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-04"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-03"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-02"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-01"></div>
</div>
<div class="form-group-text form-group-text-borderless form-group-item-small">
<div class="theme-color-box theme-color"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-01"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-02"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-03"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-04"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-05"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-06"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-07"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-08"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-09"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-10"></div>
</div>
</div>
</div>
<p class="control-theme-color-helper form-helper small">Backgrounds, Bookmarks and Modals use shades from the left.</p>
<p class="control-theme-color-helper form-helper small">Text and form elements use shades from the right.</p>
<p class="control-theme-color-helper form-helper small">For a light look switch to the Light Style and then select a Shade colour.</p>
<hr>
<div class="input-wrap">
<label for="control-theme-color-rgb-picker">Primary colour</label>
<div class="form-group form-group-block mb-0">
@ -1504,75 +1576,6 @@
<div class="button-wrap">
<button class="control-theme-color-contrast-dark-default button mb-0" tabindex="-1">Default dark shade contrast</button>
</div>
<hr>
<div class="form-group form-group-block form-group-border form-group-border-theme-color">
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-10"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-09"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-08"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-07"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-06"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-05"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-04"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-03"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-02"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-01"></div>
</div>
<div class="form-group-text form-group-text-borderless form-group-item-small">
<div class="theme-color-box theme-color"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-01"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-02"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-03"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-04"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-05"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-06"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-07"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-08"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-09"></div>
</div>
<div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-pos-10"></div>
</div>
</div>
<p class="control-theme-color-helper form-helper small">Backgrounds, Bookmarks and Modals use shades from the left.</p>
<p class="control-theme-color-helper form-helper small">Text and form elements use shades from the right.</p>
<p class="control-theme-color-helper form-helper small">For a light look switch to the Light Style and then select a Shade colour.</p>
</div>
</div>
<div class="menu-item">