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

[design] add more and improve presets

Browse Source
This commit is contained in:
zombieFox 2019-12-24 16:36:19 +00:00
parent cd16723795
commit 2869f1ada0
5 changed files with 106 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/css/theme.css
View File

@ -287,3 +287,23 @@
.theme-preset-accent-coldcube {
background-color: rgb(var(--theme-preset-accent-coldcube))
}
.theme-preset-background-outrun-01 {
background-color: rgb(var(--theme-preset-background-outrun-01))
}
.theme-preset-background-outrun-02 {
background-color: rgb(var(--theme-preset-background-outrun-02))
}
.theme-preset-background-outrun-03 {
background-color: rgb(var(--theme-preset-background-outrun-03))
}
.theme-preset-background-outrun-04 {
background-color: rgb(var(--theme-preset-background-outrun-04))
}
.theme-preset-accent-outrun {
background-color: rgb(var(--theme-preset-accent-outrun))
}

15
src/css/variables.css
View File

@ -71,11 +71,16 @@
--theme-preset-background-hotpepper-03: 25, 25, 25;
--theme-preset-background-hotpepper-04: 25, 25, 25;
--theme-preset-accent-hotpepper: 25, 25, 25;
--theme-preset-background-coldcube-01: 25, 25, 25;
--theme-preset-background-coldcube-02: 25, 25, 25;
--theme-preset-background-coldcube-03: 25, 25, 25;
--theme-preset-background-coldcube-04: 25, 25, 25;
--theme-preset-accent-coldcube: 25, 25, 25;
--theme-preset-background-coldcube-01: 25, 25, 25;
--theme-preset-background-coldcube-02: 25, 25, 25;
--theme-preset-background-coldcube-03: 25, 25, 25;
--theme-preset-background-coldcube-04: 25, 25, 25;
--theme-preset-accent-coldcube: 25, 25, 25;
--theme-preset-background-outrun-01: 25, 25, 25;
--theme-preset-background-outrun-02: 25, 25, 25;
--theme-preset-background-outrun-03: 25, 25, 25;
--theme-preset-background-outrun-04: 25, 25, 25;
--theme-preset-accent-outrun: 25, 25, 25;
--theme-preset-preview-size: 6em;
/* header */
--header-area-width: 100%;

12
src/index.html
View File

@ -1429,6 +1429,18 @@
<span class="button-text small">Cold Cube</span>
</button>
</div>
<div class="button-wrap form-inline">
<button class="control-theme-preset-outrun theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-outrun-01"></span>
<span class="theme-preset-background-02 theme-preset-background-outrun-02"></span>
<span class="theme-preset-background-03 theme-preset-background-outrun-03"></span>
<span class="theme-preset-background-04 theme-preset-background-outrun-04"></span>
<span class="theme-preset-accent theme-preset-accent-outrun"></span>
</div>
<span class="button-text small">Outrun</span>
</button>
</div>
</div>
</div>
<div class="menu-item">

34
src/js/control.js
View File

@ -2539,7 +2539,9 @@ var control = (function() {
theme.render.color.shade();
theme.render.accent.color();
theme.render.radius();
link.groupAndItems();
render.update();
render.class();
}
}, {
element: helper.e(".control-theme-preset-midnightblue"),
@ -2550,7 +2552,9 @@ var control = (function() {
theme.render.color.shade();
theme.render.accent.color();
theme.render.radius();
link.groupAndItems();
render.update();
render.class();
}
}, {
element: helper.e(".control-theme-preset-bluegum"),
@ -2561,7 +2565,9 @@ var control = (function() {
theme.render.color.shade();
theme.render.accent.color();
theme.render.radius();
link.groupAndItems();
render.update();
render.class();
}
}, {
element: helper.e(".control-theme-preset-sharpmint"),
@ -2572,7 +2578,9 @@ var control = (function() {
theme.render.color.shade();
theme.render.accent.color();
theme.render.radius();
link.groupAndItems();
render.update();
render.class();
}
}, {
element: helper.e(".control-theme-preset-snowblue"),
@ -2583,7 +2591,9 @@ var control = (function() {
theme.render.color.shade();
theme.render.accent.color();
theme.render.radius();
link.groupAndItems();
render.update();
render.class();
}
}, {
element: helper.e(".control-theme-preset-chocorum"),
@ -2594,7 +2604,9 @@ var control = (function() {
theme.render.color.shade();
theme.render.accent.color();
theme.render.radius();
link.groupAndItems();
render.update();
render.class();
}
}, {
element: helper.e(".control-theme-preset-coralgreen"),
@ -2605,7 +2617,9 @@ var control = (function() {
theme.render.color.shade();
theme.render.accent.color();
theme.render.radius();
link.groupAndItems();
render.update();
render.class();
}
}, {
element: helper.e(".control-theme-preset-purplegem"),
@ -2616,7 +2630,9 @@ var control = (function() {
theme.render.color.shade();
theme.render.accent.color();
theme.render.radius();
link.groupAndItems();
render.update();
render.class();
}
}, {
element: helper.e(".control-theme-preset-hotpepper"),
@ -2627,7 +2643,9 @@ var control = (function() {
theme.render.color.shade();
theme.render.accent.color();
theme.render.radius();
link.groupAndItems();
render.update();
render.class();
}
}, {
element: helper.e(".control-theme-preset-coldcube"),
@ -2638,7 +2656,22 @@ var control = (function() {
theme.render.color.shade();
theme.render.accent.color();
theme.render.radius();
link.groupAndItems();
render.update();
render.class();
}
}, {
element: helper.e(".control-theme-preset-outrun"),
type: "button",
func: function() {
theme.preset("outrun");
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();
theme.render.radius();
link.groupAndItems();
render.update();
render.class();
}
}, {
element: helper.e(".control-theme-style-dark"),
@ -2824,6 +2857,7 @@ var control = (function() {
theme.render.accent.input.picker();
theme.render.accent.input.quick();
link.groupAndItems();
render.update();
}
}, {
element: helper.e(".control-theme-accent-random-active"),

39
src/js/state.js
View File

@ -392,20 +392,20 @@ var state = (function() {
midnightblue: {
color: {
hsl: {
h: 220,
s: 60,
l: 50
h: 215,
s: 41,
l: 48
},
rgb: {
r: 51,
g: 102,
b: 204
r: 72,
g: 114,
b: 172
}
},
accent: {
r: 255,
g: 0,
b: 119
r: 37,
g: 55,
b: 134
},
radius: 0.5,
style: "dark"
@ -577,6 +577,27 @@ var state = (function() {
},
radius: 0.1,
style: "light"
},
outrun: {
color: {
hsl: {
h: 227,
s: 52,
l: 55
},
rgb: {
r: 80,
g: 106,
b: 199
}
},
accent: {
r: 255,
g: 0,
b: 187
},
radius: 0,
style: "dark"
}
};