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

[design] add more presets

Browse Source
This commit is contained in:
zombieFox 2019-12-24 15:32:52 +00:00
parent 91e0c6d5d6
commit cd16723795
5 changed files with 138 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/css/theme.css
View File

@ -188,6 +188,26 @@
background-color: rgb(var(--theme-preset-accent-snowblue))
}
.theme-preset-background-chocorum-01 {
background-color: rgb(var(--theme-preset-background-chocorum-01))
}
.theme-preset-background-chocorum-02 {
background-color: rgb(var(--theme-preset-background-chocorum-02))
}
.theme-preset-background-chocorum-03 {
background-color: rgb(var(--theme-preset-background-chocorum-03))
}
.theme-preset-background-chocorum-04 {
background-color: rgb(var(--theme-preset-background-chocorum-04))
}
.theme-preset-accent-chocorum {
background-color: rgb(var(--theme-preset-accent-chocorum))
}
.theme-preset-background-coralgreen-01 {
background-color: rgb(var(--theme-preset-background-coralgreen-01))
}
@ -247,3 +267,23 @@
.theme-preset-accent-hotpepper {
background-color: rgb(var(--theme-preset-accent-hotpepper))
}
.theme-preset-background-coldcube-01 {
background-color: rgb(var(--theme-preset-background-coldcube-01))
}
.theme-preset-background-coldcube-02 {
background-color: rgb(var(--theme-preset-background-coldcube-02))
}
.theme-preset-background-coldcube-03 {
background-color: rgb(var(--theme-preset-background-coldcube-03))
}
.theme-preset-background-coldcube-04 {
background-color: rgb(var(--theme-preset-background-coldcube-04))
}
.theme-preset-accent-coldcube {
background-color: rgb(var(--theme-preset-accent-coldcube))
}

10
src/css/variables.css
View File

@ -51,6 +51,11 @@
--theme-preset-background-snowblue-03: 25, 25, 25;
--theme-preset-background-snowblue-04: 25, 25, 25;
--theme-preset-accent-snowblue: 25, 25, 25;
--theme-preset-background-chocorum-01: 25, 25, 25;
--theme-preset-background-chocorum-02: 25, 25, 25;
--theme-preset-background-chocorum-03: 25, 25, 25;
--theme-preset-background-chocorum-04: 25, 25, 25;
--theme-preset-accent-chocorum: 25, 25, 25;
--theme-preset-background-coralgreen-01: 25, 25, 25;
--theme-preset-background-coralgreen-02: 25, 25, 25;
--theme-preset-background-coralgreen-03: 25, 25, 25;
@ -66,6 +71,11 @@
--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-preview-size: 6em;
/* header */
--header-area-width: 100%;

24
src/index.html
View File

@ -1369,6 +1369,18 @@
<span class="button-text small">Snow Blue</span>
</button>
</div>
<div class="button-wrap form-inline">
<button class="control-theme-preset-chocorum theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-chocorum-01"></span>
<span class="theme-preset-background-02 theme-preset-background-chocorum-02"></span>
<span class="theme-preset-background-03 theme-preset-background-chocorum-03"></span>
<span class="theme-preset-background-04 theme-preset-background-chocorum-04"></span>
<span class="theme-preset-accent theme-preset-accent-chocorum"></span>
</div>
<span class="button-text small">Choco Rum</span>
</button>
</div>
<div class="button-wrap form-inline">
<button class="control-theme-preset-coralgreen theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
@ -1405,6 +1417,18 @@
<span class="button-text small">Hot Pepper</span>
</button>
</div>
<div class="button-wrap form-inline">
<button class="control-theme-preset-coldcube theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-coldcube-01"></span>
<span class="theme-preset-background-02 theme-preset-background-coldcube-02"></span>
<span class="theme-preset-background-03 theme-preset-background-coldcube-03"></span>
<span class="theme-preset-background-04 theme-preset-background-coldcube-04"></span>
<span class="theme-preset-accent theme-preset-accent-coldcube"></span>
</div>
<span class="button-text small">Cold Cube</span>
</button>
</div>
</div>
</div>
<div class="menu-item">

22
src/js/control.js
View File

@ -2585,6 +2585,17 @@ var control = (function() {
theme.render.radius();
render.update();
}
}, {
element: helper.e(".control-theme-preset-chocorum"),
type: "button",
func: function() {
theme.preset("chocorum");
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();
theme.render.radius();
render.update();
}
}, {
element: helper.e(".control-theme-preset-coralgreen"),
type: "button",
@ -2618,6 +2629,17 @@ var control = (function() {
theme.render.radius();
render.update();
}
}, {
element: helper.e(".control-theme-preset-coldcube"),
type: "button",
func: function() {
theme.preset("coldcube");
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();
theme.render.radius();
render.update();
}
}, {
element: helper.e(".control-theme-style-dark"),
path: "theme.style",

42
src/js/state.js
View File

@ -473,6 +473,27 @@ var state = (function() {
radius: 0,
style: "light"
},
chocorum: {
color: {
hsl: {
h: 25,
s: 29,
l: 48
},
rgb: {
r: 159,
g: 118,
b: 87
}
},
accent: {
r: 196,
g: 0,
b: 66
},
radius: 0.75,
style: "dark"
},
coralgreen: {
color: {
hsl: {
@ -535,6 +556,27 @@ var state = (function() {
},
radius: 0.6,
style: "dark"
},
coldcube: {
color: {
hsl: {
h: 203,
s: 30,
l: 50
},
rgb: {
r: 89,
g: 136,
b: 165
}
},
accent: {
r: 74,
g: 120,
b: 148
},
radius: 0.1,
style: "light"
}
};