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

[design] improve theme preset preview

Browse Source
This commit is contained in:
zombieFox 2019-12-28 14:12:02 -07:00
parent 737eb22861
commit fb2e6a3fa5
3 changed files with 70 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/css/theme.css
View File

@ -43,26 +43,25 @@
.theme-preset-background-02 {
z-index: 2;
clip-path: polygon(0 40%, 60% 100%, 100% 100%, 100% 0, 0 0);
clip-path: polygon(70% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 70%);
transition-delay: 0s;
}
.theme-preset-background-03 {
z-index: 3;
clip-path: polygon(0 0, 100% 100%, 100% 0);
clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%);
transition-delay: 0s;
}
.theme-preset-background-04 {
z-index: 4;
clip-path: polygon(40% 0, 100% 60%, 100% 0);
clip-path: polygon(100% 30%, 100% 100%, 30% 100%);
transition-delay: 0s;
}
.theme-preset-accent {
clip-path: circle(20% at 100% 100%);
z-index: 5;
clip-path: polygon(100% 70%, 100% 100%, 70% 100%);
transition-delay: var(--layout-duration-02);
}
.theme-preset-font {
@ -71,35 +70,46 @@
flex-direction: column;
justify-content: center;
align-items: center;
transform: scale(1);
transition: transform var(--layout-timing-extra-fast);
}
.theme-preset-font-display {
font-size: 2em;
font-size: 1.6em;
margin-bottom: 0.25em;
}
.theme-preset-font-ui {
font-size: 0.8em;
}
.theme-preset-button:focus .theme-preset-background-02,
.theme-preset-button:hover .theme-preset-background-02 {
clip-path: polygon(0 20%, 80% 100%, 100% 100%, 100% 0, 0 0);
transition-delay: var(--layout-duration-04);
clip-path: polygon(60% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 60%);
transition-delay: var(--layout-duration-01);
}
.theme-preset-button:focus .theme-preset-background-03,
.theme-preset-button:hover .theme-preset-background-03 {
clip-path: polygon(20% 0, 100% 80%, 100% 0);
transition-delay: var(--layout-duration-03);
clip-path: polygon(90% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 90%);
transition-delay: var(--layout-duration-02);
}
.theme-preset-button:focus .theme-preset-background-04,
.theme-preset-button:hover .theme-preset-background-04 {
clip-path: polygon(60% 0, 100% 40%, 100% 0);
transition-delay: var(--layout-duration-02);
clip-path: polygon(100% 20%, 100% 100%, 20% 100%);
transition-delay: var(--layout-duration-03);
}
.theme-preset-button:focus .theme-preset-accent,
.theme-preset-button:hover .theme-preset-accent {
clip-path: polygon(100% 50%, 100% 100%, 50% 100%);
transition-delay: var(--layout-duration-01);
clip-path: circle(30% at 100% 100%);
transition-delay: var(--layout-duration-04);
}
.theme-preset-button:hover .theme-preset-font,
.theme-preset-button:focus .theme-preset-font {
transform: scale(1.1);
}
.theme-preset-background-nighttab-01 {
@ -124,7 +134,7 @@
.theme-preset-font-display-nighttab {
font-family: var(--theme-preset-font-display-nighttab);
color: rgb(var(--theme-preset-accent-nighttab));
color: rgb(var(--theme-preset-font-color-nighttab));
}
.theme-preset-font-ui-nighttab {
@ -154,7 +164,7 @@
.theme-preset-font-display-midnight {
font-family: var(--theme-preset-font-display-midnight);
color: rgb(var(--theme-preset-accent-midnight));
color: rgb(var(--theme-preset-font-color-midnight));
}
.theme-preset-font-ui-midnight {
@ -184,7 +194,7 @@
.theme-preset-font-display-bluegum {
font-family: var(--theme-preset-font-display-bluegum);
color: rgb(var(--theme-preset-accent-bluegum));
color: rgb(var(--theme-preset-font-color-bluegum));
}
.theme-preset-font-ui-bluegum {
@ -214,7 +224,7 @@
.theme-preset-font-display-sharpmint {
font-family: var(--theme-preset-font-display-sharpmint);
color: rgb(var(--theme-preset-accent-sharpmint));
color: rgb(var(--theme-preset-font-color-sharpmint));
}
.theme-preset-font-ui-sharpmint {
@ -244,7 +254,7 @@
.theme-preset-font-display-snowblue {
font-family: var(--theme-preset-font-display-snowblue);
color: rgb(var(--theme-preset-accent-snowblue));
color: rgb(var(--theme-preset-font-color-snowblue));
}
.theme-preset-font-ui-snowblue {
@ -274,7 +284,7 @@
.theme-preset-font-display-chocorum {
font-family: var(--theme-preset-font-display-chocorum);
color: rgb(var(--theme-preset-accent-chocorum));
color: rgb(var(--theme-preset-font-color-chocorum));
}
.theme-preset-font-ui-chocorum {
@ -304,7 +314,7 @@
.theme-preset-font-display-sunburst {
font-family: var(--theme-preset-font-display-sunburst);
color: rgb(var(--theme-preset-accent-sunburst));
color: rgb(var(--theme-preset-font-color-sunburst));
}
.theme-preset-font-ui-sunburst {
@ -334,7 +344,7 @@
.theme-preset-font-display-coralgreen {
font-family: var(--theme-preset-font-display-coralgreen);
color: rgb(var(--theme-preset-accent-coralgreen));
color: rgb(var(--theme-preset-font-color-coralgreen));
}
.theme-preset-font-ui-coralgreen {
@ -364,7 +374,7 @@
.theme-preset-font-display-purplegem {
font-family: var(--theme-preset-font-display-purplegem);
color: rgb(var(--theme-preset-accent-purplegem));
color: rgb(var(--theme-preset-font-color-purplegem));
}
.theme-preset-font-ui-purplegem {
@ -394,7 +404,7 @@
.theme-preset-font-display-hotpepper {
font-family: var(--theme-preset-font-display-hotpepper);
color: rgb(var(--theme-preset-accent-hotpepper));
color: rgb(var(--theme-preset-font-color-hotpepper));
}
.theme-preset-font-ui-hotpepper {
@ -424,7 +434,7 @@
.theme-preset-font-display-steelgrey {
font-family: var(--theme-preset-font-display-steelgrey);
color: rgb(var(--theme-preset-accent-steelgrey));
color: rgb(var(--theme-preset-font-color-steelgrey));
}
.theme-preset-font-ui-steelgrey {
@ -454,7 +464,7 @@
.theme-preset-font-display-outrun {
font-family: var(--theme-preset-font-display-outrun);
color: rgb(var(--theme-preset-accent-outrun));
color: rgb(var(--theme-preset-font-color-outrun));
}
.theme-preset-font-ui-outrun {
@ -484,7 +494,7 @@
.theme-preset-font-display-pumpkin {
font-family: var(--theme-preset-font-display-pumpkin);
color: rgb(var(--theme-preset-accent-pumpkin));
color: rgb(var(--theme-preset-font-color-pumpkin));
}
.theme-preset-font-ui-pumpkin {
@ -514,7 +524,7 @@
.theme-preset-font-display-whoosh {
font-family: var(--theme-preset-font-display-whoosh);
color: rgb(var(--theme-preset-accent-whoosh));
color: rgb(var(--theme-preset-font-color-whoosh));
}
.theme-preset-font-ui-whoosh {
@ -544,7 +554,7 @@
.theme-preset-font-display-eldergold {
font-family: var(--theme-preset-font-display-eldergold);
color: rgb(var(--theme-preset-accent-eldergold));
color: rgb(var(--theme-preset-font-color-eldergold));
}
.theme-preset-font-ui-eldergold {

30
src/index.html
View File

@ -1319,7 +1319,7 @@
<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-font theme-preset-font-nighttab">
<span class="theme-preset-font-display theme-preset-font-display-nighttab">Abcd</span>
<span class="theme-preset-font-display theme-preset-font-display-nighttab">Abc</span>
<span class="theme-preset-font-ui theme-preset-font-ui-nighttab">Xyz - 123</span>
</span>
</div>
@ -1335,7 +1335,7 @@
<span class="theme-preset-background-04 theme-preset-background-midnight-04"></span>
<span class="theme-preset-accent theme-preset-accent-midnight"></span>
<span class="theme-preset-font theme-preset-font-midnight">
<span class="theme-preset-font-display theme-preset-font-display-midnight">Abcd</span>
<span class="theme-preset-font-display theme-preset-font-display-midnight">Abc</span>
<span class="theme-preset-font-ui theme-preset-font-ui-midnight">Xyz - 123</span>
</span>
</div>
@ -1351,7 +1351,7 @@
<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-font theme-preset-font-bluegum">
<span class="theme-preset-font-display theme-preset-font-display-bluegum">Abcd</span>
<span class="theme-preset-font-display theme-preset-font-display-bluegum">Abc</span>
<span class="theme-preset-font-ui theme-preset-font-ui-bluegum">Xyz - 123</span>
</span>
</div>
@ -1367,7 +1367,7 @@
<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-font theme-preset-font-sharpmint">
<span class="theme-preset-font-display theme-preset-font-display-sharpmint">Abcd</span>
<span class="theme-preset-font-display theme-preset-font-display-sharpmint">Abc</span>
<span class="theme-preset-font-ui theme-preset-font-ui-sharpmint">Xyz - 123</span>
</span>
</div>
@ -1383,7 +1383,7 @@
<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-font theme-preset-font-snowblue">
<span class="theme-preset-font-display theme-preset-font-display-snowblue">Abcd</span>
<span class="theme-preset-font-display theme-preset-font-display-snowblue">Abc</span>
<span class="theme-preset-font-ui theme-preset-font-ui-snowblue">Xyz - 123</span>
</span>
</div>
@ -1399,7 +1399,7 @@
<span class="theme-preset-background-04 theme-preset-background-chocorum-04"></span>
<span class="theme-preset-accent theme-preset-accent-chocorum"></span>
<span class="theme-preset-font theme-preset-font-chocorum">
<span class="theme-preset-font-display theme-preset-font-display-chocorum">Abcd</span>
<span class="theme-preset-font-display theme-preset-font-display-chocorum">Abc</span>
<span class="theme-preset-font-ui theme-preset-font-ui-chocorum">Xyz - 123</span>
</span>
</div>
@ -1415,7 +1415,7 @@
<span class="theme-preset-background-04 theme-preset-background-sunburst-04"></span>
<span class="theme-preset-accent theme-preset-accent-sunburst"></span>
<span class="theme-preset-font theme-preset-font-sunburst">
<span class="theme-preset-font-display theme-preset-font-display-sunburst">Abcd</span>
<span class="theme-preset-font-display theme-preset-font-display-sunburst">Abc</span>
<span class="theme-preset-font-ui theme-preset-font-ui-sunburst">Xyz - 123</span>
</span>
</div>
@ -1431,7 +1431,7 @@
<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-font theme-preset-font-coralgreen">
<span class="theme-preset-font-display theme-preset-font-display-coralgreen">Abcd</span>
<span class="theme-preset-font-display theme-preset-font-display-coralgreen">Abc</span>
<span class="theme-preset-font-ui theme-preset-font-ui-coralgreen">Xyz - 123</span>
</span>
</div>
@ -1447,7 +1447,7 @@
<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-font theme-preset-font-purplegem">
<span class="theme-preset-font-display theme-preset-font-display-purplegem">Abcd</span>
<span class="theme-preset-font-display theme-preset-font-display-purplegem">Abc</span>
<span class="theme-preset-font-ui theme-preset-font-ui-purplegem">Xyz - 123</span>
</span>
</div>
@ -1463,7 +1463,7 @@
<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-font theme-preset-font-hotpepper">
<span class="theme-preset-font-display theme-preset-font-display-hotpepper">Abcd</span>
<span class="theme-preset-font-display theme-preset-font-display-hotpepper">Abc</span>
<span class="theme-preset-font-ui theme-preset-font-ui-hotpepper">Xyz - 123</span>
</span>
</div>
@ -1479,7 +1479,7 @@
<span class="theme-preset-background-04 theme-preset-background-steelgrey-04"></span>
<span class="theme-preset-accent theme-preset-accent-steelgrey"></span>
<span class="theme-preset-font theme-preset-font-steelgrey">
<span class="theme-preset-font-display theme-preset-font-display-steelgrey">Abcd</span>
<span class="theme-preset-font-display theme-preset-font-display-steelgrey">Abc</span>
<span class="theme-preset-font-ui theme-preset-font-ui-steelgrey">Xyz - 123</span>
</span>
</div>
@ -1495,7 +1495,7 @@
<span class="theme-preset-background-04 theme-preset-background-outrun-04"></span>
<span class="theme-preset-accent theme-preset-accent-outrun"></span>
<span class="theme-preset-font theme-preset-font-outrun">
<span class="theme-preset-font-display theme-preset-font-display-outrun">Abcd</span>
<span class="theme-preset-font-display theme-preset-font-display-outrun">Abc</span>
<span class="theme-preset-font-ui theme-preset-font-ui-outrun">Xyz - 123</span>
</span>
</div>
@ -1511,7 +1511,7 @@
<span class="theme-preset-background-04 theme-preset-background-pumpkin-04"></span>
<span class="theme-preset-accent theme-preset-accent-pumpkin"></span>
<span class="theme-preset-font theme-preset-font-pumpkin">
<span class="theme-preset-font-display theme-preset-font-display-pumpkin">Abcd</span>
<span class="theme-preset-font-display theme-preset-font-display-pumpkin">Abc</span>
<span class="theme-preset-font-ui theme-preset-font-ui-pumpkin">Xyz - 123</span>
</span>
</div>
@ -1527,7 +1527,7 @@
<span class="theme-preset-background-04 theme-preset-background-whoosh-04"></span>
<span class="theme-preset-accent theme-preset-accent-whoosh"></span>
<span class="theme-preset-font theme-preset-font-whoosh">
<span class="theme-preset-font-display theme-preset-font-display-whoosh">Abcd</span>
<span class="theme-preset-font-display theme-preset-font-display-whoosh">Abc</span>
<span class="theme-preset-font-ui theme-preset-font-ui-whoosh">Xyz - 123</span>
</span>
</div>
@ -1543,7 +1543,7 @@
<span class="theme-preset-background-04 theme-preset-background-eldergold-04"></span>
<span class="theme-preset-accent theme-preset-accent-eldergold"></span>
<span class="theme-preset-font theme-preset-font-eldergold">
<span class="theme-preset-font-display theme-preset-font-display-eldergold">Abcd</span>
<span class="theme-preset-font-display theme-preset-font-display-eldergold">Abc</span>
<span class="theme-preset-font-ui theme-preset-font-ui-eldergold">Xyz - 123</span>
</span>
</div>

30
src/js/theme.js
View File

@ -705,7 +705,6 @@ var theme = (function() {
var preset = mod.preset.all[key];
var shadeSteps = 4;
var lightShift = 12;
var hsl = helper.convertColor.rgb.hsl(preset.color.rgb);
var renderPreview = function(name, index, rgb) {
for (var key in rgb) {
if (rgb[key] < 0) {
@ -722,20 +721,23 @@ var theme = (function() {
};
html.style.setProperty(name + index, rgb.r + ", " + rgb.g + ", " + rgb.b);
};
var rgb = preset.color.rgb;
var hsl = helper.convertColor.rgb.hsl(rgb);
for (var i = 1; i <= shadeSteps; i++) {
var rgb;
if (preset.style == "dark") {
rgb = helper.convertColor.hsl.rgb({
h: hsl.h,
s: hsl.s,
l: hsl.l - (lightShift * i)
});
} else if (preset.style == "light") {
rgb = helper.convertColor.hsl.rgb({
h: hsl.h,
s: hsl.s,
l: hsl.l + (lightShift * i)
});
if (i > 1) {
if (preset.style == "dark") {
rgb = helper.convertColor.hsl.rgb({
h: hsl.h,
s: hsl.s,
l: hsl.l - (lightShift * (i - 1))
});
} else if (preset.style == "light") {
rgb = helper.convertColor.hsl.rgb({
h: hsl.h,
s: hsl.s,
l: hsl.l + (lightShift * (i - 1))
});
};
};
renderPreview("--theme-preset-background-" + key + "-", i, rgb);
};