mirror of
https://github.com/zombieFox/nightTab.git
synced 2024-12-26 00:29:02 +01:00
[feature] add theme font controls
This commit is contained in:
parent
aec2fa333d
commit
afd64919af
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nighttab",
|
||||
"version": "4.5.0",
|
||||
"version": "4.6.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nighttab",
|
||||
"version": "4.5.0",
|
||||
"version": "4.6.0",
|
||||
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
@ -12,13 +12,12 @@ body {
|
||||
color: rgb(var(--theme-style-text));
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
font-family: var(--font-regular);
|
||||
font-family: var(--font-ui);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
/* transition: background-color var(--layout-timing-extra-fast); */
|
||||
}
|
||||
|
||||
html.is-background-color-by-theme,
|
||||
|
@ -8,7 +8,7 @@ input[type="submit"] {
|
||||
margin: 0 0 1em 0;
|
||||
color: rgb(var(--button-text));
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
font-family: var(--font-ui);
|
||||
min-height: 2.5em;
|
||||
line-height: 1;
|
||||
border: 0;
|
||||
@ -151,6 +151,10 @@ button [class*=" icon-"],
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button-slim {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button [class^="button-"],
|
||||
button [class*=" button-"],
|
||||
.button [class^="button-"],
|
||||
|
@ -2,7 +2,7 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
font-family: var(--font-fjalla);
|
||||
font-family: var(--font-display);
|
||||
color: rgb(var(--theme-style-text));
|
||||
width: 100%;
|
||||
min-height: 2.5em;
|
||||
|
@ -2,7 +2,7 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
font-family: var(--font-fjalla);
|
||||
font-family: var(--font-display);
|
||||
color: rgb(var(--theme-style-text));
|
||||
width: 100%;
|
||||
min-height: 2.5em;
|
||||
|
@ -32,7 +32,7 @@ select {
|
||||
margin: 0 0 1em 0;
|
||||
color: rgb(var(--form-label));
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
font-family: var(--font-ui);
|
||||
line-height: 2;
|
||||
min-height: 2.5em;
|
||||
min-width: 0;
|
||||
@ -94,7 +94,7 @@ textarea {
|
||||
color: rgb(var(--form-input-text));
|
||||
font-size: 1em;
|
||||
line-height: 1.6;
|
||||
font-family: var(--font-regular);
|
||||
font-family: var(--font-ui);
|
||||
height: 10em;
|
||||
min-height: 2.5em;
|
||||
min-width: 0;
|
||||
@ -172,7 +172,7 @@ input[type="text"] {
|
||||
margin: 0 0 1em 0;
|
||||
color: rgb(var(--form-input-text));
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
font-family: var(--font-ui);
|
||||
line-height: 1.6em;
|
||||
height: 2.5em;
|
||||
min-width: 0;
|
||||
@ -329,7 +329,7 @@ input[type="radio"]+label {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
font-family: var(--font-ui);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -600,7 +600,7 @@ input[type="range"] {
|
||||
margin: 0;
|
||||
color: rgb(var(--theme-style-text));
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
font-family: var(--font-ui);
|
||||
display: block;
|
||||
height: 2.5em;
|
||||
width: 100%;
|
||||
@ -857,7 +857,7 @@ input[type="range"]:disabled::-moz-range-progress {
|
||||
margin: 0;
|
||||
color: rgb(var(--button-text));
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
font-family: var(--font-ui);
|
||||
min-height: 2.5em;
|
||||
line-height: 1;
|
||||
border: 0;
|
||||
@ -1444,7 +1444,7 @@ input[type="range"]:disabled::-moz-range-progress {
|
||||
color: rgb(var(--form-input-text));
|
||||
min-width: 4em;
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
font-family: var(--font-ui);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
@ -2,7 +2,7 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
font-family: var(--font-fjalla);
|
||||
font-family: var(--font-display);
|
||||
color: rgb(var(--theme-style-text));
|
||||
width: 100%;
|
||||
min-height: 2.5em;
|
||||
|
@ -81,7 +81,6 @@
|
||||
}
|
||||
|
||||
.group-name-text {
|
||||
font-family: var(--font-fjalla);
|
||||
margin-bottom: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
@ -123,6 +123,7 @@
|
||||
flex-direction: column;
|
||||
z-index: 3;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
transition: background-color var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast);
|
||||
}
|
||||
@ -563,8 +564,7 @@
|
||||
}
|
||||
|
||||
.link-display-letter {
|
||||
padding-top: 8%;
|
||||
font-family: var(--font-fjalla);
|
||||
font-family: var(--font-display);
|
||||
color: rgb(var(--theme-accent));
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
@ -602,7 +602,7 @@
|
||||
.link-display-name {
|
||||
margin: 0;
|
||||
font-size: var(--link-item-display-name-size);
|
||||
font-family: var(--font-regular);
|
||||
font-family: var(--font-ui);
|
||||
color: rgb(var(--theme-color-12));
|
||||
display: none;
|
||||
transition: color var(--layout-timing-extra-fast);
|
||||
@ -873,7 +873,7 @@
|
||||
.link-url-text {
|
||||
margin: 0;
|
||||
font-size: 0.7em;
|
||||
font-family: var(--font-regular);
|
||||
font-family: var(--font-ui);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
@ -50,10 +50,6 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-heading {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.modal-heading:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
@ -50,7 +50,7 @@
|
||||
border-radius: calc(var(--theme-radius) * 2);
|
||||
color: rgb(var(--theme-color-18));
|
||||
font-size: 0.8em;
|
||||
font-family: var(--font-regular);
|
||||
font-family: var(--font-ui);
|
||||
text-align: center;
|
||||
position: relative;
|
||||
display: block;
|
||||
|
@ -2,7 +2,7 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
font-family: var(--font-fjalla);
|
||||
font-family: var(--font-display);
|
||||
color: rgb(var(--theme-color-14));
|
||||
width: 100%;
|
||||
min-height: 2.5em;
|
||||
|
@ -12,32 +12,34 @@ h6 {
|
||||
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
font-family: var(--font-fjalla);
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.2em;
|
||||
font-family: var(--font-regular);
|
||||
font-family: var(--font-ui);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1em;
|
||||
font-family: var(--font-regular);
|
||||
font-family: var(--font-ui);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1em;
|
||||
font-family: var(--font-regular);
|
||||
font-family: var(--font-ui);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1em;
|
||||
font-family: var(--font-bold);
|
||||
font-family: var(--font-ui);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.75em;
|
||||
font-family: var(--font-bold);
|
||||
font-family: var(--font-ui);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
@ -66,12 +68,18 @@ b,
|
||||
caption,
|
||||
strong {
|
||||
color: rgb(var(--theme-style-text));
|
||||
font-family: var(--font-bold);
|
||||
font-family: var(--font-ui);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(var(--theme-color-16));
|
||||
text-decoration: none;
|
||||
text-decoration: underline;
|
||||
transition: text-decoration var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
a:link,
|
||||
@ -80,30 +88,18 @@ a:visited {
|
||||
}
|
||||
|
||||
a:focus {
|
||||
text-decoration: none;
|
||||
text-decoration-color: rgb(var(--theme-style-text));
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: rgb(var(--theme-style-text));
|
||||
text-decoration: underline;
|
||||
text-decoration-color: rgb(var(--theme-accent));
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: rgb(var(--theme-style-text));
|
||||
}
|
||||
|
||||
.a-underline {
|
||||
padding-bottom: var(--layout-line-width);
|
||||
border-bottom-width: calc(var(--layout-line-width) / 2);
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: rgb(var(--theme-color-06));
|
||||
transition: color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
.a-underline:hover {
|
||||
text-decoration: none;
|
||||
border-bottom-color: rgb(var(--theme-accent));
|
||||
text-decoration-color: rgb(var(--theme-style-text));
|
||||
}
|
||||
|
||||
ol,
|
||||
@ -151,7 +147,8 @@ table thead tr th {
|
||||
padding: 0.5em;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
font-family: var(--font-bold);
|
||||
font-family: var(--font-ui);
|
||||
font-weight: bold;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
@ -265,10 +265,8 @@
|
||||
inset 0 0 0 calc(var(--layout-line-width) * 4) rgba(var(--theme-accent), 0.1),
|
||||
inset 0 0 0 calc(var(--layout-line-width) * 8) rgba(var(--theme-accent), 0.1);
|
||||
/* font */
|
||||
--font-regular: "Open Sans Regular", sans-serif;
|
||||
--font-bold: "Open Sans Bold", sans-serif;
|
||||
--font-light: "Open Sans Light", sans-serif;
|
||||
--font-fjalla: "Fjalla One Regular", sans-serif;
|
||||
--font-display: "Fjalla One Regular", sans-serif;
|
||||
--font-ui: "Open Sans Regular", sans-serif;
|
||||
/* z index */
|
||||
--z-index-background: 1000;
|
||||
--z-index-link: 2000;
|
||||
|
@ -144,14 +144,14 @@
|
||||
|
||||
<div class="menu-nav">
|
||||
<div class="menu-nav-area-tab menu-nav-area-grow mb-0 list-unstyled">
|
||||
<button class="menu-nav-button control-menu-layout button mb-0 active" tabindex="-1">Layout</button>
|
||||
<button class="menu-nav-button control-menu-header button mb-0" tabindex="-1">Header</button>
|
||||
<button class="menu-nav-button control-menu-groups button mb-0" tabindex="-1">Groups</button>
|
||||
<button class="menu-nav-button control-menu-bookmarks button mb-0" tabindex="-1">Bookmarks</button>
|
||||
<button class="menu-nav-button control-menu-theme button mb-0" tabindex="-1">Theme</button>
|
||||
<button class="menu-nav-button control-menu-background button mb-0" tabindex="-1">Background</button>
|
||||
<button class="menu-nav-button control-menu-data button mb-0" tabindex="-1">Data</button>
|
||||
<button class="menu-nav-button control-menu-nightTab button mb-0" tabindex="-1">nightTab</button>
|
||||
<button class="menu-nav-button control-menu-layout button button-slim mb-0 active" tabindex="-1">Layout</button>
|
||||
<button class="menu-nav-button control-menu-header button button-slim mb-0" tabindex="-1">Header</button>
|
||||
<button class="menu-nav-button control-menu-groups button button-slim mb-0" tabindex="-1">Groups</button>
|
||||
<button class="menu-nav-button control-menu-bookmarks button button-slim mb-0" tabindex="-1">Bookmarks</button>
|
||||
<button class="menu-nav-button control-menu-theme button button-slim mb-0" tabindex="-1">Theme</button>
|
||||
<button class="menu-nav-button control-menu-background button button-slim mb-0" tabindex="-1">Background</button>
|
||||
<button class="menu-nav-button control-menu-data button button-slim mb-0" tabindex="-1">Data</button>
|
||||
<button class="menu-nav-button control-menu-nightTab button button-slim mb-0" tabindex="-1">nightTab</button>
|
||||
</div>
|
||||
<div class="menu-nav-area-close">
|
||||
<button class="menu-nav-button control-menu-close button mb-0" tabindex="-1"><span class="icon-close"></span></button>
|
||||
@ -1495,6 +1495,28 @@
|
||||
<p class="control-theme-style-light-helper form-helper small">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Fonts</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="input-wrap">
|
||||
<label for="control-theme-font-display">Display font</label>
|
||||
<input id="control-theme-font-display" class="control-theme-font-display mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Google font name" tabindex="-1">
|
||||
</div>
|
||||
<p class="control-theme-font-helper form-helper small">Use a <a href="https://fonts.google.com/" target="_blank">Google Font</a> to customise the Clock, Date, Group names and Bookmark Letters.</p>
|
||||
<p class="control-theme-font-helper form-helper small">Paste in a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Fredoka One" or "Comfortaa"</p>
|
||||
<p class="control-theme-font-helper form-helper small">Clear the field to use the default font "Fjalla".</p>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<label for="control-theme-font-ui">UI font</label>
|
||||
<input id="control-theme-font-ui" class="control-theme-font-ui mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Google font name" tabindex="-1">
|
||||
</div>
|
||||
<p class="control-theme-font-helper form-helper small">Use a <a href="https://fonts.google.com/" target="_blank">Google Font</a> to customise the Bookmark name, URL and form elements.</p>
|
||||
<p class="control-theme-font-helper form-helper small">Paste in a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto" or "Source Sans Pro"</p>
|
||||
<p class="control-theme-font-helper form-helper small">Clear the field to use the default font "Open Sans".</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Color</h1>
|
||||
@ -1856,11 +1878,11 @@
|
||||
</div>
|
||||
<hr>
|
||||
<div class="p-wrap">
|
||||
<p>Project repository on <a href="https://github.com/zombieFox/nightTab" class="a-underline" target="_blank" tabindex="-1">Github</a>.</p>
|
||||
<p>Project repository on <a href="https://github.com/zombieFox/nightTab" target="_blank" tabindex="-1">Github</a>.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="p-wrap">
|
||||
<p>For feedback and support, submit an <a href="https://github.com/zombieFox/nightTab/issues" class="a-underline" target="_blank" tabindex="-1">Issues.</a></p>
|
||||
<p>For feedback and support, submit an <a href="https://github.com/zombieFox/nightTab/issues" target="_blank" tabindex="-1">Issues.</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -2535,6 +2535,8 @@ var control = (function() {
|
||||
type: "button",
|
||||
func: function() {
|
||||
theme.preset("nighttab");
|
||||
theme.render.font.display();
|
||||
theme.render.font.ui();
|
||||
theme.style.check();
|
||||
theme.render.color.shade();
|
||||
theme.render.accent.color();
|
||||
@ -2548,6 +2550,8 @@ var control = (function() {
|
||||
type: "button",
|
||||
func: function() {
|
||||
theme.preset("midnight");
|
||||
theme.render.font.display();
|
||||
theme.render.font.ui();
|
||||
theme.style.check();
|
||||
theme.render.color.shade();
|
||||
theme.render.accent.color();
|
||||
@ -2561,6 +2565,8 @@ var control = (function() {
|
||||
type: "button",
|
||||
func: function() {
|
||||
theme.preset("bluegum");
|
||||
theme.render.font.display();
|
||||
theme.render.font.ui();
|
||||
theme.style.check();
|
||||
theme.render.color.shade();
|
||||
theme.render.accent.color();
|
||||
@ -2574,6 +2580,8 @@ var control = (function() {
|
||||
type: "button",
|
||||
func: function() {
|
||||
theme.preset("sharpmint");
|
||||
theme.render.font.display();
|
||||
theme.render.font.ui();
|
||||
theme.style.check();
|
||||
theme.render.color.shade();
|
||||
theme.render.accent.color();
|
||||
@ -2587,6 +2595,8 @@ var control = (function() {
|
||||
type: "button",
|
||||
func: function() {
|
||||
theme.preset("snowblue");
|
||||
theme.render.font.display();
|
||||
theme.render.font.ui();
|
||||
theme.style.check();
|
||||
theme.render.color.shade();
|
||||
theme.render.accent.color();
|
||||
@ -2600,6 +2610,8 @@ var control = (function() {
|
||||
type: "button",
|
||||
func: function() {
|
||||
theme.preset("chocorum");
|
||||
theme.render.font.display();
|
||||
theme.render.font.ui();
|
||||
theme.style.check();
|
||||
theme.render.color.shade();
|
||||
theme.render.accent.color();
|
||||
@ -2613,6 +2625,8 @@ var control = (function() {
|
||||
type: "button",
|
||||
func: function() {
|
||||
theme.preset("sunburst");
|
||||
theme.render.font.display();
|
||||
theme.render.font.ui();
|
||||
theme.style.check();
|
||||
theme.render.color.shade();
|
||||
theme.render.accent.color();
|
||||
@ -2626,6 +2640,8 @@ var control = (function() {
|
||||
type: "button",
|
||||
func: function() {
|
||||
theme.preset("coralgreen");
|
||||
theme.render.font.display();
|
||||
theme.render.font.ui();
|
||||
theme.style.check();
|
||||
theme.render.color.shade();
|
||||
theme.render.accent.color();
|
||||
@ -2639,6 +2655,8 @@ var control = (function() {
|
||||
type: "button",
|
||||
func: function() {
|
||||
theme.preset("purplegem");
|
||||
theme.render.font.display();
|
||||
theme.render.font.ui();
|
||||
theme.style.check();
|
||||
theme.render.color.shade();
|
||||
theme.render.accent.color();
|
||||
@ -2652,6 +2670,8 @@ var control = (function() {
|
||||
type: "button",
|
||||
func: function() {
|
||||
theme.preset("hotpepper");
|
||||
theme.render.font.display();
|
||||
theme.render.font.ui();
|
||||
theme.style.check();
|
||||
theme.render.color.shade();
|
||||
theme.render.accent.color();
|
||||
@ -2665,6 +2685,8 @@ var control = (function() {
|
||||
type: "button",
|
||||
func: function() {
|
||||
theme.preset("steelgrey");
|
||||
theme.render.font.display();
|
||||
theme.render.font.ui();
|
||||
theme.style.check();
|
||||
theme.render.color.shade();
|
||||
theme.render.accent.color();
|
||||
@ -2678,6 +2700,8 @@ var control = (function() {
|
||||
type: "button",
|
||||
func: function() {
|
||||
theme.preset("outrun");
|
||||
theme.render.font.display();
|
||||
theme.render.font.ui();
|
||||
theme.style.check();
|
||||
theme.render.color.shade();
|
||||
theme.render.accent.color();
|
||||
@ -2691,6 +2715,8 @@ var control = (function() {
|
||||
type: "button",
|
||||
func: function() {
|
||||
theme.preset("pumpkin");
|
||||
theme.render.font.display();
|
||||
theme.render.font.ui();
|
||||
theme.style.check();
|
||||
theme.render.color.shade();
|
||||
theme.render.accent.color();
|
||||
@ -2704,6 +2730,8 @@ var control = (function() {
|
||||
type: "button",
|
||||
func: function() {
|
||||
theme.preset("whoosh");
|
||||
theme.render.font.display();
|
||||
theme.render.font.ui();
|
||||
theme.style.check();
|
||||
theme.render.color.shade();
|
||||
theme.render.accent.color();
|
||||
@ -2951,6 +2979,20 @@ var control = (function() {
|
||||
theme.render.accent.input.hex();
|
||||
link.groupAndItems();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-theme-font-display"),
|
||||
path: "theme.font.display",
|
||||
type: "text",
|
||||
func: function() {
|
||||
theme.font.delay.display();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-theme-font-ui"),
|
||||
path: "theme.font.ui",
|
||||
type: "text",
|
||||
func: function() {
|
||||
theme.font.delay.ui();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-background-color-by-theme"),
|
||||
path: "background.color.by",
|
||||
|
@ -15,7 +15,7 @@ var edge = (function() {
|
||||
}, 100);
|
||||
},
|
||||
remove: function() {
|
||||
window.clearTimeout(_tick);
|
||||
clearTimeout(_tick);
|
||||
_tick = null;
|
||||
}
|
||||
};
|
||||
|
@ -243,6 +243,10 @@ var state = (function() {
|
||||
b: 160
|
||||
}
|
||||
},
|
||||
font: {
|
||||
display: "",
|
||||
ui: ""
|
||||
},
|
||||
style: "dark",
|
||||
radius: 0.25
|
||||
},
|
||||
|
179
src/js/theme.js
179
src/js/theme.js
@ -1,7 +1,9 @@
|
||||
var theme = (function() {
|
||||
|
||||
var mod = {};
|
||||
var _timerFontDisplay = null;
|
||||
var _timerFontUi = null;
|
||||
|
||||
var mod = {};
|
||||
|
||||
mod.style = {
|
||||
light: function() {
|
||||
@ -109,8 +111,18 @@ var theme = (function() {
|
||||
set: function(name) {
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
path: "theme.accent.current",
|
||||
newValue: mod.preset.all[name].accent
|
||||
path: "theme.style",
|
||||
newValue: mod.preset.all[name].style
|
||||
});
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
path: "theme.font.display",
|
||||
newValue: mod.preset.all[name].font.display
|
||||
});
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
path: "theme.font.ui",
|
||||
newValue: mod.preset.all[name].font.ui
|
||||
});
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
@ -119,8 +131,8 @@ var theme = (function() {
|
||||
});
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
path: "theme.style",
|
||||
newValue: mod.preset.all[name].style
|
||||
path: "theme.accent.current",
|
||||
newValue: mod.preset.all[name].accent
|
||||
});
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
@ -130,6 +142,10 @@ var theme = (function() {
|
||||
},
|
||||
all: {
|
||||
nighttab: {
|
||||
font: {
|
||||
display: "",
|
||||
ui: ""
|
||||
},
|
||||
color: {
|
||||
hsl: {
|
||||
h: 222,
|
||||
@ -151,16 +167,20 @@ var theme = (function() {
|
||||
style: "dark"
|
||||
},
|
||||
midnight: {
|
||||
font: {
|
||||
display: "Gugi",
|
||||
ui: "Lato"
|
||||
},
|
||||
color: {
|
||||
hsl: {
|
||||
h: 215,
|
||||
s: 41,
|
||||
l: 48
|
||||
h: 222,
|
||||
s: 42,
|
||||
l: 46
|
||||
},
|
||||
rgb: {
|
||||
r: 72,
|
||||
g: 114,
|
||||
b: 172
|
||||
r: 68,
|
||||
g: 98,
|
||||
b: 168
|
||||
}
|
||||
},
|
||||
accent: {
|
||||
@ -172,6 +192,10 @@ var theme = (function() {
|
||||
style: "dark"
|
||||
},
|
||||
bluegum: {
|
||||
font: {
|
||||
display: "Alatsi",
|
||||
ui: "Source Sans Pro"
|
||||
},
|
||||
color: {
|
||||
hsl: {
|
||||
h: 217,
|
||||
@ -193,6 +217,10 @@ var theme = (function() {
|
||||
style: "dark"
|
||||
},
|
||||
sharpmint: {
|
||||
font: {
|
||||
display: "Unica One",
|
||||
ui: "Montserrat"
|
||||
},
|
||||
color: {
|
||||
hsl: {
|
||||
h: 157,
|
||||
@ -214,6 +242,10 @@ var theme = (function() {
|
||||
style: "dark"
|
||||
},
|
||||
snowblue: {
|
||||
font: {
|
||||
display: "Righteous",
|
||||
ui: "Raleway"
|
||||
},
|
||||
color: {
|
||||
hsl: {
|
||||
h: 217,
|
||||
@ -235,6 +267,10 @@ var theme = (function() {
|
||||
style: "light"
|
||||
},
|
||||
chocorum: {
|
||||
font: {
|
||||
display: "Odibee Sans",
|
||||
ui: "Roboto Condensed"
|
||||
},
|
||||
color: {
|
||||
hsl: {
|
||||
h: 25,
|
||||
@ -256,6 +292,10 @@ var theme = (function() {
|
||||
style: "dark"
|
||||
},
|
||||
sunburst: {
|
||||
font: {
|
||||
display: "Fredoka One",
|
||||
ui: "Muli"
|
||||
},
|
||||
color: {
|
||||
hsl: {
|
||||
h: 54,
|
||||
@ -277,6 +317,10 @@ var theme = (function() {
|
||||
style: "light"
|
||||
},
|
||||
coralgreen: {
|
||||
font: {
|
||||
display: "Poiret One",
|
||||
ui: "Lato"
|
||||
},
|
||||
color: {
|
||||
hsl: {
|
||||
h: 184,
|
||||
@ -298,6 +342,10 @@ var theme = (function() {
|
||||
style: "dark"
|
||||
},
|
||||
purplegem: {
|
||||
font: {
|
||||
display: "Calistoga",
|
||||
ui: "Source Sans Pro"
|
||||
},
|
||||
color: {
|
||||
hsl: {
|
||||
h: 301,
|
||||
@ -319,6 +367,10 @@ var theme = (function() {
|
||||
style: "light"
|
||||
},
|
||||
hotpepper: {
|
||||
font: {
|
||||
display: "Big Shoulders Display",
|
||||
ui: "Montserrat"
|
||||
},
|
||||
color: {
|
||||
hsl: {
|
||||
h: 0,
|
||||
@ -340,6 +392,10 @@ var theme = (function() {
|
||||
style: "dark"
|
||||
},
|
||||
steelgrey: {
|
||||
font: {
|
||||
display: "Abel",
|
||||
ui: "Raleway"
|
||||
},
|
||||
color: {
|
||||
hsl: {
|
||||
h: 214,
|
||||
@ -361,6 +417,10 @@ var theme = (function() {
|
||||
style: "light"
|
||||
},
|
||||
outrun: {
|
||||
font: {
|
||||
display: "Major Mono Display",
|
||||
ui: "Roboto Condensed"
|
||||
},
|
||||
color: {
|
||||
hsl: {
|
||||
h: 227,
|
||||
@ -382,6 +442,10 @@ var theme = (function() {
|
||||
style: "dark"
|
||||
},
|
||||
pumpkin: {
|
||||
font: {
|
||||
display: "Girassol",
|
||||
ui: "Muli"
|
||||
},
|
||||
color: {
|
||||
hsl: {
|
||||
h: 198,
|
||||
@ -403,6 +467,10 @@ var theme = (function() {
|
||||
style: "dark"
|
||||
},
|
||||
whoosh: {
|
||||
font: {
|
||||
display: "Monoton",
|
||||
ui: "Lato"
|
||||
},
|
||||
color: {
|
||||
hsl: {
|
||||
h: 307,
|
||||
@ -537,6 +605,75 @@ var theme = (function() {
|
||||
}
|
||||
};
|
||||
|
||||
render.font = {
|
||||
delay: {
|
||||
display: function() {
|
||||
clearTimeout(_timerFontDisplay);
|
||||
_timerFontDisplay = setTimeout(render.font.display, 300);
|
||||
},
|
||||
ui: function() {
|
||||
clearTimeout(_timerFontUi);
|
||||
_timerFontUi = setTimeout(render.font.ui, 300);
|
||||
}
|
||||
},
|
||||
display: function() {
|
||||
var name = state.get.current().theme.font.display.trim().replace(/\s+/g, "+");
|
||||
var html = helper.e("html");
|
||||
var link = helper.e(".theme-font-display-link");
|
||||
if (link) {
|
||||
link.remove();
|
||||
};
|
||||
html.style.removeProperty("--font-display");
|
||||
if (name != "") {
|
||||
var head = helper.e("head");
|
||||
var link = helper.makeNode({
|
||||
tag: "link",
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "theme-font-display-link"
|
||||
}, {
|
||||
key: "href",
|
||||
value: "https://fonts.googleapis.com/css?family=" + name + ":100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap"
|
||||
}, {
|
||||
key: "rel",
|
||||
value: "stylesheet"
|
||||
}]
|
||||
});
|
||||
head.appendChild(link);
|
||||
html.style.setProperty("--font-display", "\"" + state.get.current().theme.font.display.trim().replace(/\s\s+/g, " ") + "\"" + ", \"Fjalla One Regular\", sans-serif");
|
||||
};
|
||||
},
|
||||
ui: function() {
|
||||
var name = state.get.current().theme.font.ui.trim().replace(/\s+/g, "+");
|
||||
var html = helper.e("html");
|
||||
var link = helper.eA(".theme-font-ui-link");
|
||||
if (link.length > 0) {
|
||||
link.forEach(function(arrayItem, item) {
|
||||
arrayItem.remove();
|
||||
});
|
||||
html.style.removeProperty("--font-ui");
|
||||
};
|
||||
if (name != "") {
|
||||
var head = helper.e("head");
|
||||
var link = helper.makeNode({
|
||||
tag: "link",
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "theme-font-ui-link"
|
||||
}, {
|
||||
key: "href",
|
||||
value: "https://fonts.googleapis.com/css?family=" + name + ":100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap"
|
||||
}, {
|
||||
key: "rel",
|
||||
value: "stylesheet"
|
||||
}]
|
||||
});
|
||||
head.appendChild(link);
|
||||
html.style.setProperty("--font-ui", "\"" + state.get.current().theme.font.ui.trim().replace(/\s\s+/g, " ") + "\"" + ", \"Open Sans Regular\", sans-serif");
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
render.preset = function() {
|
||||
var html = helper.e("html");
|
||||
for (var key in mod.preset.all) {
|
||||
@ -617,10 +754,29 @@ var theme = (function() {
|
||||
mod.preset.set(name);
|
||||
};
|
||||
|
||||
var font = {
|
||||
delay: {
|
||||
display: function() {
|
||||
render.font.delay.display();
|
||||
},
|
||||
ui: function() {
|
||||
render.font.delay.ui();
|
||||
}
|
||||
},
|
||||
display: function() {
|
||||
render.font.display();
|
||||
},
|
||||
ui: function() {
|
||||
render.font.ui();
|
||||
}
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
style.check();
|
||||
accent.random();
|
||||
mod.accent.random();
|
||||
render.font.display();
|
||||
render.font.ui();
|
||||
render.color.shade();
|
||||
render.accent.color();
|
||||
render.radius();
|
||||
@ -634,6 +790,7 @@ var theme = (function() {
|
||||
render: render,
|
||||
style: style,
|
||||
accent: accent,
|
||||
font: font,
|
||||
preset: preset
|
||||
};
|
||||
|
||||
|
@ -722,6 +722,13 @@ var update = (function() {
|
||||
show: true
|
||||
};
|
||||
return data;
|
||||
},
|
||||
"4.6.0": function(data) {
|
||||
data.state.theme.font = {
|
||||
display: "",
|
||||
ui: ""
|
||||
};
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
var version = (function() {
|
||||
|
||||
var current = "4.5.0";
|
||||
var current = "4.6.0";
|
||||
|
||||
var name = "Naughty Goose";
|
||||
|
||||
|
@ -2,7 +2,7 @@
|
||||
"name": "nightTab",
|
||||
"short_name": "nightTab",
|
||||
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
|
||||
"version": "4.5.0",
|
||||
"version": "4.6.0",
|
||||
"manifest_version": 2,
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "index.html"
|
||||
|
Loading…
Reference in New Issue
Block a user