mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-03-01 16:31:24 +01:00
[design] add more presets
This commit is contained in:
zombieFox
parent
b3a217d748
commit
a89738e98c
@ -108,24 +108,24 @@
|
||||
background-color: rgb(var(--theme-preset-accent-nighttab))
|
||||
}
|
||||
|
||||
.theme-preset-background-midnightblue-01 {
|
||||
background-color: rgb(var(--theme-preset-background-midnightblue-01))
|
||||
.theme-preset-background-midnight-01 {
|
||||
background-color: rgb(var(--theme-preset-background-midnight-01))
|
||||
}
|
||||
|
||||
.theme-preset-background-midnightblue-02 {
|
||||
background-color: rgb(var(--theme-preset-background-midnightblue-02))
|
||||
.theme-preset-background-midnight-02 {
|
||||
background-color: rgb(var(--theme-preset-background-midnight-02))
|
||||
}
|
||||
|
||||
.theme-preset-background-midnightblue-03 {
|
||||
background-color: rgb(var(--theme-preset-background-midnightblue-03))
|
||||
.theme-preset-background-midnight-03 {
|
||||
background-color: rgb(var(--theme-preset-background-midnight-03))
|
||||
}
|
||||
|
||||
.theme-preset-background-midnightblue-04 {
|
||||
background-color: rgb(var(--theme-preset-background-midnightblue-04))
|
||||
.theme-preset-background-midnight-04 {
|
||||
background-color: rgb(var(--theme-preset-background-midnight-04))
|
||||
}
|
||||
|
||||
.theme-preset-accent-midnightblue {
|
||||
background-color: rgb(var(--theme-preset-accent-midnightblue))
|
||||
.theme-preset-accent-midnight {
|
||||
background-color: rgb(var(--theme-preset-accent-midnight))
|
||||
}
|
||||
|
||||
.theme-preset-background-bluegum-01 {
|
||||
@ -327,3 +327,43 @@
|
||||
.theme-preset-accent-outrun {
|
||||
background-color: rgb(var(--theme-preset-accent-outrun))
|
||||
}
|
||||
|
||||
.theme-preset-background-pumpkin-01 {
|
||||
background-color: rgb(var(--theme-preset-background-pumpkin-01))
|
||||
}
|
||||
|
||||
.theme-preset-background-pumpkin-02 {
|
||||
background-color: rgb(var(--theme-preset-background-pumpkin-02))
|
||||
}
|
||||
|
||||
.theme-preset-background-pumpkin-03 {
|
||||
background-color: rgb(var(--theme-preset-background-pumpkin-03))
|
||||
}
|
||||
|
||||
.theme-preset-background-pumpkin-04 {
|
||||
background-color: rgb(var(--theme-preset-background-pumpkin-04))
|
||||
}
|
||||
|
||||
.theme-preset-accent-pumpkin {
|
||||
background-color: rgb(var(--theme-preset-accent-pumpkin))
|
||||
}
|
||||
|
||||
.theme-preset-background-whoosh-01 {
|
||||
background-color: rgb(var(--theme-preset-background-whoosh-01))
|
||||
}
|
||||
|
||||
.theme-preset-background-whoosh-02 {
|
||||
background-color: rgb(var(--theme-preset-background-whoosh-02))
|
||||
}
|
||||
|
||||
.theme-preset-background-whoosh-03 {
|
||||
background-color: rgb(var(--theme-preset-background-whoosh-03))
|
||||
}
|
||||
|
||||
.theme-preset-background-whoosh-04 {
|
||||
background-color: rgb(var(--theme-preset-background-whoosh-04))
|
||||
}
|
||||
|
||||
.theme-preset-accent-whoosh {
|
||||
background-color: rgb(var(--theme-preset-accent-whoosh))
|
||||
}
|
||||
|
||||
@ -31,11 +31,11 @@
|
||||
--theme-preset-background-nighttab-03: 25, 25, 25;
|
||||
--theme-preset-background-nighttab-04: 25, 25, 25;
|
||||
--theme-preset-accent-nighttab: 25, 25, 25;
|
||||
--theme-preset-background-midnightblue-01: 25, 25, 25;
|
||||
--theme-preset-background-midnightblue-02: 25, 25, 25;
|
||||
--theme-preset-background-midnightblue-03: 25, 25, 25;
|
||||
--theme-preset-background-midnightblue-04: 25, 25, 25;
|
||||
--theme-preset-accent-midnightblue: 25, 25, 25;
|
||||
--theme-preset-background-midnight-01: 25, 25, 25;
|
||||
--theme-preset-background-midnight-02: 25, 25, 25;
|
||||
--theme-preset-background-midnight-03: 25, 25, 25;
|
||||
--theme-preset-background-midnight-04: 25, 25, 25;
|
||||
--theme-preset-accent-midnight: 25, 25, 25;
|
||||
--theme-preset-background-bluegum-01: 25, 25, 25;
|
||||
--theme-preset-background-bluegum-02: 25, 25, 25;
|
||||
--theme-preset-background-bluegum-03: 25, 25, 25;
|
||||
@ -86,6 +86,16 @@
|
||||
--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-background-pumpkin-01: 25, 25, 25;
|
||||
--theme-preset-background-pumpkin-02: 25, 25, 25;
|
||||
--theme-preset-background-pumpkin-03: 25, 25, 25;
|
||||
--theme-preset-background-pumpkin-04: 25, 25, 25;
|
||||
--theme-preset-accent-pumpkin: 25, 25, 25;
|
||||
--theme-preset-background-whoosh-01: 25, 25, 25;
|
||||
--theme-preset-background-whoosh-02: 25, 25, 25;
|
||||
--theme-preset-background-whoosh-03: 25, 25, 25;
|
||||
--theme-preset-background-whoosh-04: 25, 25, 25;
|
||||
--theme-preset-accent-whoosh: 25, 25, 25;
|
||||
--theme-preset-preview-size: 6em;
|
||||
/* header */
|
||||
--header-area-width: 100%;
|
||||
|
||||
@ -1322,15 +1322,15 @@
|
||||
</button>
|
||||
</div>
|
||||
<div class="button-wrap form-inline">
|
||||
<button class="control-theme-preset-midnightblue theme-preset-button button mb-0" tabindex="-1">
|
||||
<button class="control-theme-preset-midnight theme-preset-button button mb-0" tabindex="-1">
|
||||
<div class="theme-preset-preview">
|
||||
<span class="theme-preset-background-01 theme-preset-background-midnightblue-01"></span>
|
||||
<span class="theme-preset-background-02 theme-preset-background-midnightblue-02"></span>
|
||||
<span class="theme-preset-background-03 theme-preset-background-midnightblue-03"></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-background-01 theme-preset-background-midnight-01"></span>
|
||||
<span class="theme-preset-background-02 theme-preset-background-midnight-02"></span>
|
||||
<span class="theme-preset-background-03 theme-preset-background-midnight-03"></span>
|
||||
<span class="theme-preset-background-04 theme-preset-background-midnight-04"></span>
|
||||
<span class="theme-preset-accent theme-preset-accent-midnight"></span>
|
||||
</div>
|
||||
<span class="button-text small">Midnight Blue</span>
|
||||
<span class="button-text small">Midnight</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="button-wrap form-inline">
|
||||
@ -1453,6 +1453,30 @@
|
||||
<span class="button-text small">Outrun</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="button-wrap form-inline">
|
||||
<button class="control-theme-preset-pumpkin theme-preset-button button mb-0" tabindex="-1">
|
||||
<div class="theme-preset-preview">
|
||||
<span class="theme-preset-background-01 theme-preset-background-pumpkin-01"></span>
|
||||
<span class="theme-preset-background-02 theme-preset-background-pumpkin-02"></span>
|
||||
<span class="theme-preset-background-03 theme-preset-background-pumpkin-03"></span>
|
||||
<span class="theme-preset-background-04 theme-preset-background-pumpkin-04"></span>
|
||||
<span class="theme-preset-accent theme-preset-accent-pumpkin"></span>
|
||||
</div>
|
||||
<span class="button-text small">Pumpkin</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="button-wrap form-inline">
|
||||
<button class="control-theme-preset-whoosh theme-preset-button button mb-0" tabindex="-1">
|
||||
<div class="theme-preset-preview">
|
||||
<span class="theme-preset-background-01 theme-preset-background-whoosh-01"></span>
|
||||
<span class="theme-preset-background-02 theme-preset-background-whoosh-02"></span>
|
||||
<span class="theme-preset-background-03 theme-preset-background-whoosh-03"></span>
|
||||
<span class="theme-preset-background-04 theme-preset-background-whoosh-04"></span>
|
||||
<span class="theme-preset-accent theme-preset-accent-whoosh"></span>
|
||||
</div>
|
||||
<span class="button-text small">Whoosh</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
|
||||
@ -2544,10 +2544,10 @@ var control = (function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-theme-preset-midnightblue"),
|
||||
element: helper.e(".control-theme-preset-midnight"),
|
||||
type: "button",
|
||||
func: function() {
|
||||
theme.preset("midnightblue");
|
||||
theme.preset("midnight");
|
||||
theme.style.check();
|
||||
theme.render.color.shade();
|
||||
theme.render.accent.color();
|
||||
@ -2686,6 +2686,32 @@ var control = (function() {
|
||||
render.update();
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-theme-preset-pumpkin"),
|
||||
type: "button",
|
||||
func: function() {
|
||||
theme.preset("pumpkin");
|
||||
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-preset-whoosh"),
|
||||
type: "button",
|
||||
func: function() {
|
||||
theme.preset("whoosh");
|
||||
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"),
|
||||
path: "theme.style",
|
||||
|
||||
@ -389,7 +389,7 @@ var state = (function() {
|
||||
radius: 0.25,
|
||||
style: "dark"
|
||||
},
|
||||
midnightblue: {
|
||||
midnight: {
|
||||
color: {
|
||||
hsl: {
|
||||
h: 215,
|
||||
@ -572,7 +572,7 @@ var state = (function() {
|
||||
},
|
||||
accent: {
|
||||
r: 255,
|
||||
g: 136,
|
||||
g: 221,
|
||||
b: 0
|
||||
},
|
||||
radius: 0.6,
|
||||
@ -619,6 +619,48 @@ var state = (function() {
|
||||
},
|
||||
radius: 0,
|
||||
style: "dark"
|
||||
},
|
||||
pumpkin: {
|
||||
color: {
|
||||
hsl: {
|
||||
h: 198,
|
||||
s: 0,
|
||||
l: 46
|
||||
},
|
||||
rgb: {
|
||||
r: 117,
|
||||
g: 117,
|
||||
b: 117
|
||||
}
|
||||
},
|
||||
accent: {
|
||||
r: 238,
|
||||
g: 119,
|
||||
b: 34
|
||||
},
|
||||
radius: 0.2,
|
||||
style: "dark"
|
||||
},
|
||||
whoosh: {
|
||||
color: {
|
||||
hsl: {
|
||||
h: 307,
|
||||
s: 100,
|
||||
l: 59
|
||||
},
|
||||
rgb: {
|
||||
r: 254,
|
||||
g: 45,
|
||||
b: 230
|
||||
}
|
||||
},
|
||||
accent: {
|
||||
r: 238,
|
||||
g: 238,
|
||||
b: 34
|
||||
},
|
||||
radius: 1.2,
|
||||
style: "dark"
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user