extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-01-23 14:28:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve theme preset controls

Browse Source
This commit is contained in:
zombieFox 2019-12-24 15:09:53 +00:00
parent ae8d4c93a6
commit 91e0c6d5d6
3 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/css/theme.css
View File

@ -3,14 +3,13 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
max-width: 6em; max-width: var(--theme-preset-preview-size);
} }
.theme-preset-button .button-text { .theme-preset-button .button-text {
margin-top: 1em; margin-top: 1.25em;
margin-bottom: 1em; margin-bottom: 1.25em;
margin-left: 0; margin-left: 0;
font-size: 0.75em;
} }
.theme-preset-button:after { .theme-preset-button:after {
@ -18,8 +17,8 @@
} }
.theme-preset-preview { .theme-preset-preview {
width: 6em; width: var(--theme-preset-preview-size);
height: 6em; height: var(--theme-preset-preview-size);
position: relative; position: relative;
} }

1
src/css/variables.css
View File

@ -66,6 +66,7 @@
--theme-preset-background-hotpepper-03: 25, 25, 25; --theme-preset-background-hotpepper-03: 25, 25, 25;
--theme-preset-background-hotpepper-04: 25, 25, 25; --theme-preset-background-hotpepper-04: 25, 25, 25;
--theme-preset-accent-hotpepper: 25, 25, 25; --theme-preset-accent-hotpepper: 25, 25, 25;
--theme-preset-preview-size: 6em;
/* header */ /* header */
--header-area-width: 100%; --header-area-width: 100%;
--header-shade-color: var(--theme-color-01); --header-shade-color: var(--theme-color-01);

16
src/index.html
View File

@ -1318,7 +1318,7 @@
<span class="theme-preset-background-04 theme-preset-background-nighttab-04"></span> <span class="theme-preset-background-04 theme-preset-background-nighttab-04"></span>
<span class="theme-preset-accent theme-preset-accent-nighttab"></span> <span class="theme-preset-accent theme-preset-accent-nighttab"></span>
</div> </div>
<span class="button-text">nightTab</span> <span class="button-text small">nightTab</span>
</button> </button>
</div> </div>
<div class="button-wrap form-inline"> <div class="button-wrap form-inline">
@ -1330,7 +1330,7 @@
<span class="theme-preset-background-04 theme-preset-background-midnightblue-04"></span> <span class="theme-preset-background-04 theme-preset-background-midnightblue-04"></span>
<span class="theme-preset-accent theme-preset-accent-midnightblue"></span> <span class="theme-preset-accent theme-preset-accent-midnightblue"></span>
</div> </div>
<span class="button-text">Midnight Blue</span> <span class="button-text small">Midnight Blue</span>
</button> </button>
</div> </div>
<div class="button-wrap form-inline"> <div class="button-wrap form-inline">
@ -1342,7 +1342,7 @@
<span class="theme-preset-background-04 theme-preset-background-bluegum-04"></span> <span class="theme-preset-background-04 theme-preset-background-bluegum-04"></span>
<span class="theme-preset-accent theme-preset-accent-bluegum"></span> <span class="theme-preset-accent theme-preset-accent-bluegum"></span>
</div> </div>
<span class="button-text">Blue Gum</span> <span class="button-text small">Blue Gum</span>
</button> </button>
</div> </div>
<div class="button-wrap form-inline"> <div class="button-wrap form-inline">
@ -1354,7 +1354,7 @@
<span class="theme-preset-background-04 theme-preset-background-sharpmint-04"></span> <span class="theme-preset-background-04 theme-preset-background-sharpmint-04"></span>
<span class="theme-preset-accent theme-preset-accent-sharpmint"></span> <span class="theme-preset-accent theme-preset-accent-sharpmint"></span>
</div> </div>
<span class="button-text">Sharp Mint</span> <span class="button-text small">Sharp Mint</span>
</button> </button>
</div> </div>
<div class="button-wrap form-inline"> <div class="button-wrap form-inline">
@ -1366,7 +1366,7 @@
<span class="theme-preset-background-04 theme-preset-background-snowblue-04"></span> <span class="theme-preset-background-04 theme-preset-background-snowblue-04"></span>
<span class="theme-preset-accent theme-preset-accent-snowblue"></span> <span class="theme-preset-accent theme-preset-accent-snowblue"></span>
</div> </div>
<span class="button-text">Snow Blue</span> <span class="button-text small">Snow Blue</span>
</button> </button>
</div> </div>
<div class="button-wrap form-inline"> <div class="button-wrap form-inline">
@ -1378,7 +1378,7 @@
<span class="theme-preset-background-04 theme-preset-background-coralgreen-04"></span> <span class="theme-preset-background-04 theme-preset-background-coralgreen-04"></span>
<span class="theme-preset-accent theme-preset-accent-coralgreen"></span> <span class="theme-preset-accent theme-preset-accent-coralgreen"></span>
</div> </div>
<span class="button-text">Coral Green</span> <span class="button-text small">Coral Green</span>
</button> </button>
</div> </div>
<div class="button-wrap form-inline"> <div class="button-wrap form-inline">
@ -1390,7 +1390,7 @@
<span class="theme-preset-background-04 theme-preset-background-purplegem-04"></span> <span class="theme-preset-background-04 theme-preset-background-purplegem-04"></span>
<span class="theme-preset-accent theme-preset-accent-purplegem"></span> <span class="theme-preset-accent theme-preset-accent-purplegem"></span>
</div> </div>
<span class="button-text">Purple Gem</span> <span class="button-text small">Purple Gem</span>
</button> </button>
</div> </div>
<div class="button-wrap form-inline"> <div class="button-wrap form-inline">
@ -1402,7 +1402,7 @@
<span class="theme-preset-background-04 theme-preset-background-hotpepper-04"></span> <span class="theme-preset-background-04 theme-preset-background-hotpepper-04"></span>
<span class="theme-preset-accent theme-preset-accent-hotpepper"></span> <span class="theme-preset-accent theme-preset-accent-hotpepper"></span>
</div> </div>
<span class="button-text">Hot Pepper</span> <span class="button-text small">Hot Pepper</span>
</button> </button>
</div> </div>
</div> </div>