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

[feature] add font weight and style controls

Browse Source
This commit is contained in:
zombieFox 2020-01-01 17:11:40 -07:00
parent 47f86a9532
commit c9e0d01969
35 changed files with 696 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "nighttab",
"version": "4.6.3",
"version": "4.7.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "nighttab",
"version": "4.6.3",
"version": "4.7.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": {

4
src/css/base.css
View File

@ -12,7 +12,9 @@ body {
color: rgb(var(--theme-style-text));
font-size: 1rem;
line-height: 1.6;
font-family: var(--font-ui);
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
display: flex;
flex-direction: column;
justify-content: center;

4
src/css/button.css
View File

@ -8,7 +8,9 @@ input[type="submit"] {
margin: 0 0 1em 0;
color: rgb(var(--button-text));
font-size: 1em;
font-family: var(--font-ui);
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
min-height: 2.5em;
line-height: 1;
border: 0;

4
src/css/clock.css
View File

@ -2,7 +2,9 @@
margin: 0;
padding: 0;
font-size: 1em;
font-family: var(--font-display);
font-family: var(--theme-font-display-name);
font-weight: var(--theme-font-display-weight);
font-style: var(--theme-font-display-style);
color: rgb(var(--theme-style-text));
width: 100%;
min-height: 2.5em;

4
src/css/date.css
View File

@ -2,7 +2,9 @@
margin: 0;
padding: 0;
font-size: 1em;
font-family: var(--font-display);
font-family: var(--theme-font-display-name);
font-weight: var(--theme-font-display-weight);
font-style: var(--theme-font-display-style);
color: rgb(var(--theme-style-text));
width: 100%;
min-height: 2.5em;

92
src/css/fonts.css
View File

@ -1,90 +1,66 @@
/* open sans */
@font-face {
font-family: "Open Sans Bold";
src: url("../fonts/open-sans/open-sans-bold.eot");
src: url("../fonts/open-sans/open-sans-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-bold.woff2") format("woff2"), url("../fonts/open-sans/open-sans-bold.woff") format("woff"), url("../fonts/open-sans/open-sans-bold.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Open Sans Regular";
src: url("../fonts/open-sans/open-sans-regular.eot");
src: url("../fonts/open-sans/open-sans-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-regular.woff2") format("woff2"), url("../fonts/open-sans/open-sans-regular.woff") format("woff"), url("../fonts/open-sans/open-sans-regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Open Sans Light";
font-family: "Open Sans";
src: url("../fonts/open-sans/open-sans-light.eot");
src: url("../fonts/open-sans/open-sans-light.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-light.woff2") format("woff2"), url("../fonts/open-sans/open-sans-light.woff") format("woff"), url("../fonts/open-sans/open-sans-light.ttf") format("truetype");
font-weight: normal;
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "Open Sans Bold Italic";
src: url("../fonts/open-sans/open-sans-bold-italic.eot");
src: url("../fonts/open-sans/open-sans-bold-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-bold-italic.woff2") format("woff2"), url("../fonts/open-sans/open-sans-bold-italic.woff") format("woff"), url("../fonts/open-sans/open-sans-bold-italic.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Open Sans Italic";
src: url("../fonts/open-sans/open-sans-italic.eot");
src: url("../fonts/open-sans/open-sans-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-italic.woff2") format("woff2"), url("../fonts/open-sans/open-sans-italic.woff") format("woff"), url("../fonts/open-sans/open-sans-italic.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Open Sans Light Italic";
font-family: "Open Sans";
src: url("../fonts/open-sans/open-sans-light-italic.eot");
src: url("../fonts/open-sans/open-sans-light-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-light-italic.woff2") format("woff2"), url("../fonts/open-sans/open-sans-light-italic.woff") format("woff"), url("../fonts/open-sans/open-sans-light-italic.ttf") format("truetype");
font-weight: normal;
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "Open Sans";
src: url("../fonts/open-sans/open-sans-regular.eot");
src: url("../fonts/open-sans/open-sans-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-regular.woff2") format("woff2"), url("../fonts/open-sans/open-sans-regular.woff") format("woff"), url("../fonts/open-sans/open-sans-regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Open Sans Semi Bold Italic";
font-family: "Open Sans";
src: url("../fonts/open-sans/open-sans-italic.eot");
src: url("../fonts/open-sans/open-sans-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-italic.woff2") format("woff2"), url("../fonts/open-sans/open-sans-italic.woff") format("woff"), url("../fonts/open-sans/open-sans-italic.ttf") format("truetype");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "Open Sans";
src: url("../fonts/open-sans/open-sans-semi-bold-italic.eot");
src: url("../fonts/open-sans/open-sans-semi-bold-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-semi-bold-italic.woff2") format("woff2"), url("../fonts/open-sans/open-sans-semi-bold-italic.woff") format("woff"), url("../fonts/open-sans/open-sans-semi-bold-italic.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: "Open Sans Semi Bold";
font-family: "Open Sans";
src: url("../fonts/open-sans/open-sans-semi-bold.eot");
src: url("../fonts/open-sans/open-sans-semi-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-semi-bold.woff2") format("woff2"), url("../fonts/open-sans/open-sans-semi-bold.woff") format("woff"), url("../fonts/open-sans/open-sans-semi-bold.ttf") format("truetype");
font-weight: normal;
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "Open Sans Condensed Bold";
src: url("../fonts/open-sans/open-sans-condensed-bold.eot");
src: url("../fonts/open-sans/open-sans-condensed-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-condensed-bold.woff2") format("woff2"), url("../fonts/open-sans/open-sans-condensed-bold.woff") format("woff"), url("../fonts/open-sans/open-sans-condensed-bold.ttf") format("truetype");
font-weight: normal;
font-family: "Open Sans";
src: url("../fonts/open-sans/open-sans-bold.eot");
src: url("../fonts/open-sans/open-sans-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-bold.woff2") format("woff2"), url("../fonts/open-sans/open-sans-bold.woff") format("woff"), url("../fonts/open-sans/open-sans-bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Open Sans Condensed Light Italic";
src: url("../fonts/open-sans/open-sans-condensed-light-italic.eot");
src: url("../fonts/open-sans/open-sans-condensed-light-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-condensed-light-italic.woff2") format("woff2"), url("../fonts/open-sans/open-sans-condensed-light-italic.woff") format("woff"), url("../fonts/open-sans/open-sans-condensed-light-italic.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Open Sans Condensed Light";
src: url("../fonts/open-sans/open-sans-condensed-light.eot");
src: url("../fonts/open-sans/open-sans-condensed-light.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-condensed-light.woff2") format("woff2"), url("../fonts/open-sans/open-sans-condensed-light.woff") format("woff"), url("../fonts/open-sans/open-sans-condensed-light.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-family: "Open Sans";
src: url("../fonts/open-sans/open-sans-bold-italic.eot");
src: url("../fonts/open-sans/open-sans-bold-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-bold-italic.woff2") format("woff2"), url("../fonts/open-sans/open-sans-bold-italic.woff") format("woff"), url("../fonts/open-sans/open-sans-bold-italic.ttf") format("truetype");
font-weight: 700;
font-style: italic;
}
/* fjalla one */

28
src/css/form.css
View File

@ -32,7 +32,9 @@ select {
margin: 0 0 1em 0;
color: rgb(var(--form-label));
font-size: 1em;
font-family: var(--font-ui);
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
line-height: 2;
min-height: 2.5em;
min-width: 0;
@ -94,7 +96,9 @@ textarea {
color: rgb(var(--form-input-text));
font-size: 1em;
line-height: 1.6;
font-family: var(--font-ui);
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
height: 10em;
min-height: 2.5em;
min-width: 0;
@ -172,7 +176,9 @@ input[type="text"] {
margin: 0 0 1em 0;
color: rgb(var(--form-input-text));
font-size: 1em;
font-family: var(--font-ui);
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
line-height: 1.6em;
height: 2.5em;
min-width: 0;
@ -329,7 +335,9 @@ input[type="radio"]+label {
padding: 0;
margin: 0;
font-size: 1em;
font-family: var(--font-ui);
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
cursor: pointer;
display: flex;
flex-direction: row;
@ -600,7 +608,9 @@ input[type="range"] {
margin: 0;
color: rgb(var(--theme-style-text));
font-size: 1em;
font-family: var(--font-ui);
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
display: block;
height: 2.5em;
width: 100%;
@ -857,7 +867,9 @@ input[type="range"]:disabled::-moz-range-progress {
margin: 0;
color: rgb(var(--button-text));
font-size: 1em;
font-family: var(--font-ui);
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
min-height: 2.5em;
line-height: 1;
border: 0;
@ -1454,7 +1466,9 @@ input[type="range"]:disabled::-moz-range-progress {
color: rgb(var(--form-input-text));
min-width: 4em;
font-size: 1em;
font-family: var(--font-ui);
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
display: flex;
align-items: center;
justify-content: center;

4
src/css/greeting.css
View File

@ -2,7 +2,9 @@
margin: 0;
padding: 0;
font-size: 1em;
font-family: var(--font-display);
font-family: var(--theme-font-display-name);
font-weight: var(--theme-font-display-weight);
font-style: var(--theme-font-display-style);
color: rgb(var(--theme-style-text));
width: 100%;
min-height: 2.5em;

2
src/css/group.css
View File

@ -69,6 +69,7 @@
display: flex;
align-items: center;
height: 0;
max-width: 100%;
overflow: hidden;
font-size: var(--group-name-size);
transition: height var(--layout-timing-extra-fast);
@ -82,6 +83,7 @@
.group-name-text {
margin-bottom: 0;
padding-right: 1em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

14
src/css/link.css
View File

@ -564,7 +564,9 @@
}
.link-display-letter {
font-family: var(--font-display);
font-family: var(--theme-font-display-name);
font-weight: var(--theme-font-display-weight);
font-style: var(--theme-font-display-style);
color: rgb(var(--theme-accent));
line-height: 1;
white-space: nowrap;
@ -572,6 +574,8 @@
}
.link-display-icon {
font-weight: 400;
font-style: normal;
color: rgb(var(--theme-accent));
transition: color var(--layout-timing-extra-fast);
}
@ -602,7 +606,9 @@
.link-display-name {
margin: 0;
font-size: var(--link-item-display-name-size);
font-family: var(--font-ui);
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
color: rgb(var(--theme-color-12));
display: none;
transition: color var(--layout-timing-extra-fast);
@ -873,7 +879,9 @@
.link-url-text {
margin: 0;
font-size: 0.7em;
font-family: var(--font-ui);
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

4
src/css/theme.css
View File

@ -78,11 +78,15 @@
}
.theme-preset-font-display {
font-weight: 400;
font-style: normal;
font-size: 1em;
margin-bottom: 0.25em;
}
.theme-preset-font-ui {
font-weight: 400;
font-style: normal;
font-size: 0.8em;
}

4
src/css/tip.css
View File

@ -50,7 +50,9 @@
border-radius: calc(var(--theme-radius) * 2);
color: rgb(var(--theme-color-18));
font-size: 0.8em;
font-family: var(--font-ui);
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
text-align: center;
position: relative;
display: block;

4
src/css/transitional.css
View File

@ -2,7 +2,9 @@
margin: 0;
padding: 0;
font-size: 1em;
font-family: var(--font-display);
font-family: var(--theme-font-display-name);
font-weight: var(--theme-font-display-weight);
font-style: var(--theme-font-display-style);
color: rgb(var(--theme-color-14));
width: 100%;
min-height: 2.5em;

32
src/css/typography.css
View File

@ -12,33 +12,45 @@ h6 {
h1 {
font-size: 1.5em;
font-family: var(--font-display);
font-family: var(--theme-font-display-name);
font-weight: var(--theme-font-display-weight);
font-style: var(--theme-font-display-style);
}
h2 {
font-size: 1.2em;
font-family: var(--font-ui);
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
}
h3 {
font-size: 1.1em;
font-family: var(--font-ui);
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
}
h4 {
font-size: 1em;
font-family: var(--font-ui);
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
}
h5 {
font-size: 1em;
font-family: var(--font-ui);
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
font-weight: bold;
}
h6 {
font-size: 0.75em;
font-family: var(--font-ui);
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
font-weight: bold;
}
@ -68,7 +80,9 @@ b,
caption,
strong {
color: rgb(var(--theme-style-text));
font-family: var(--font-ui);
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
font-weight: bold;
}
@ -147,7 +161,9 @@ table thead tr th {
padding: 0.5em;
margin: 0;
text-align: left;
font-family: var(--font-ui);
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
font-weight: bold;
box-sizing: border-box;
}

9
src/css/variables.css
View File

@ -3,6 +3,12 @@
--theme-root-font-size: 14px;
--theme-accent: 250, 130, 0;
--theme-radius: 0.2rem;
--theme-font-display-name: "Fjalla One Regular", sans-serif;
--theme-font-display-weight: 400;
--theme-font-display-style: "normal";
--theme-font-ui-name: "Open Sans", sans-serif;
--theme-font-ui-weight: 400;
--theme-font-ui-style: "normal";
--theme-black: 0, 0, 0;
--theme-white: 255, 255, 255;
--theme-shade-neg-10: 25, 25, 25;
@ -292,9 +298,6 @@
--edge-shadow: inset 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)),
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-display: "Fjalla One Regular", sans-serif;
--font-ui: "Open Sans Regular", sans-serif;
/* z index */
--z-index-background: 1000;
--z-index-link: 2000;

BIN
src/fonts/open-sans/open-sans-condensed-bold.eot
View File

Binary file not shown.

BIN
src/fonts/open-sans/open-sans-condensed-bold.ttf
View File

Binary file not shown.

BIN
src/fonts/open-sans/open-sans-condensed-bold.woff
View File

Binary file not shown.

BIN
src/fonts/open-sans/open-sans-condensed-bold.woff2
View File

Binary file not shown.

BIN
src/fonts/open-sans/open-sans-condensed-light-italic.eot
View File

Binary file not shown.

BIN
src/fonts/open-sans/open-sans-condensed-light-italic.ttf
View File

Binary file not shown.

BIN
src/fonts/open-sans/open-sans-condensed-light-italic.woff
View File

Binary file not shown.

BIN
src/fonts/open-sans/open-sans-condensed-light-italic.woff2
View File

Binary file not shown.

BIN
src/fonts/open-sans/open-sans-condensed-light.eot
View File

Binary file not shown.

BIN
src/fonts/open-sans/open-sans-condensed-light.ttf
View File

Binary file not shown.

BIN
src/fonts/open-sans/open-sans-condensed-light.woff
View File

Binary file not shown.

BIN
src/fonts/open-sans/open-sans-condensed-light.woff2
View File

Binary file not shown.

94
src/index.html
View File

@ -38,7 +38,7 @@
<link rel="stylesheet" href="css/auto-suggest.css">
<link rel="stylesheet" href="css/fontawesome.css">
<!-- end-css-block -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abel|Alatsi|Big+Shoulders+Display|Calistoga|Fredoka+One|Girassol|Gugi|Lato|Life+Savers|Major+Mono+Display|Monoton|Montserrat|Muli|Odibee+Sans|Poiret+One|Quicksand|Raleway|Righteous|Roboto+Condensed|Source+Sans+Pro|Unica+One|Autour+One|Solway&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abel:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Alatsi:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Big+Shoulders+Display:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Calistoga:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Fredoka+One:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Girassol:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Gugi:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Lato:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Life+Savers:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Major+Mono+Display:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Monoton:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Muli:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Odibee+Sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Poiret+One:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Quicksand:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Righteous:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto+Condensed:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Source+Sans+Pro:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Unica+One:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Autour+One:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Solway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap">
</head>
<body>
@ -1157,18 +1157,18 @@
<div class="input-wrap">
<input id="control-link-item-display-name-show" class="control-link-item-display-name-show" type="checkbox" tabindex="-1">
<label for="control-link-item-display-name-show"><span class="label-icon"></span> Name</label>
<div class="form-indent">
<div class="input-wrap">
<label for="control-link-item-display-name-size">Name size</label>
<div class="form-group form-group-block mb-0">
<input id="control-link-item-display-name-size" class="control-link-item-display-name-size mr-3" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
<div class="control-link-item-display-name-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
<button class="control-link-item-display-name-size-default button mb-0" tabindex="-1">Default Name size</button>
</div>
<div class="form-indent">
<div class="input-wrap">
<label for="control-link-item-display-name-size">Name size</label>
<div class="form-group form-group-block mb-0">
<input id="control-link-item-display-name-size" class="control-link-item-display-name-size mr-3" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
<div class="control-link-item-display-name-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
<button class="control-link-item-display-name-size-default button mb-0" tabindex="-1">Default Name size</button>
</div>
</div>
<hr>
<div class="input-wrap">
@ -1578,20 +1578,72 @@
</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">
<label for="control-theme-font-display-name">Display font</label>
<input id="control-theme-font-display-name" class="control-theme-font-display-name mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Google font name" tabindex="-1">
</div>
<div class="button-wrap">
<button class="control-theme-font-display-name-default button mb-0" tabindex="-1">Default display font</button>
</div>
<p class="control-theme-font-display-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-display-helper form-helper small">Add 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-display-helper form-helper small">Clear the field to use the default font "Fjalla".</p>
<div class="form-indent">
<hr>
<div class="input-wrap">
<label for="control-theme-font-display-weight">Font weight</label>
<div class="form-group form-group-block mb-0">
<input id="control-theme-font-display-weight" class="control-theme-font-display-weight mr-3" type="range" min="100" max="900" step="100" value="1" tabindex="-1">
<div class="control-theme-font-display-weight-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<p class="control-theme-font-display-helper form-helper small">Not all fonts support all weights. Refer to the Google Font page to see which are available.</p>
<hr>
<div class="input-wrap">
<input id="control-theme-font-display-style-normal" class="control-theme-font-display-style-normal" type="radio" name="control-theme-font-display-style" value="normal" tabindex="-1">
<label for="control-theme-font-display-style-normal"><span class="label-icon"></span> Normal</label>
</div>
<div class="input-wrap">
<input id="control-theme-font-display-style-italic" class="control-theme-font-display-style-italic" type="radio" name="control-theme-font-display-style" value="italic" tabindex="-1">
<label for="control-theme-font-display-style-italic"><span class="label-icon"></span> Italic</label>
</div>
<div class="button-wrap">
<button class="control-theme-font-display-weight-style-default button mb-0" tabindex="-1">Default weight and style</button>
</div>
</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">
<label for="control-theme-font-ui-name">UI font</label>
<input id="control-theme-font-ui-name" class="control-theme-font-ui-name mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Google font name" tabindex="-1">
</div>
<div class="button-wrap">
<button class="control-theme-font-ui-name-default button mb-0" tabindex="-1">Default UI font</button>
</div>
<p class="control-theme-font-ui-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-ui-helper form-helper small">Add 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-ui-helper form-helper small">Clear the field to use the default font "Open Sans".</p>
<div class="form-indent">
<hr>
<div class="input-wrap">
<label for="control-theme-font-ui-weight">Font weight</label>
<div class="form-group form-group-block mb-0">
<input id="control-theme-font-ui-weight" class="control-theme-font-ui-weight mr-3" type="range" min="100" max="900" step="100" value="1" tabindex="-1">
<div class="control-theme-font-ui-weight-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<p class="control-theme-font-ui-helper form-helper small">Not all fonts support all weights. Refer to the Google Font page to see which are available.</p>
<hr>
<div class="input-wrap">
<input id="control-theme-font-ui-style-normal" class="control-theme-font-ui-style-normal" type="radio" name="control-theme-font-ui-style" value="normal" tabindex="-1">
<label for="control-theme-font-ui-style-normal"><span class="label-icon"></span> Normal</label>
</div>
<div class="input-wrap">
<input id="control-theme-font-ui-style-italic" class="control-theme-font-ui-style-italic" type="radio" name="control-theme-font-ui-style" value="italic" tabindex="-1">
<label for="control-theme-font-ui-style-italic"><span class="label-icon"></span> Italic</label>
</div>
<div class="button-wrap">
<button class="control-theme-font-ui-weight-style-default button mb-0" tabindex="-1">Default weight and style</button>
</div>
</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">

270
src/js/control.js
View File

@ -2556,8 +2556,12 @@ var control = (function() {
}));
render.update();
render.class();
theme.render.font.display();
theme.render.font.ui();
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();
@ -2569,8 +2573,12 @@ var control = (function() {
type: "button",
func: function() {
theme.preset("midnight");
theme.render.font.display();
theme.render.font.ui();
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();
@ -2584,8 +2592,12 @@ var control = (function() {
type: "button",
func: function() {
theme.preset("pym");
theme.render.font.display();
theme.render.font.ui();
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();
@ -2599,8 +2611,12 @@ var control = (function() {
type: "button",
func: function() {
theme.preset("cruiser");
theme.render.font.display();
theme.render.font.ui();
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();
@ -2614,8 +2630,12 @@ var control = (function() {
type: "button",
func: function() {
theme.preset("sharpmint");
theme.render.font.display();
theme.render.font.ui();
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();
@ -2629,8 +2649,12 @@ var control = (function() {
type: "button",
func: function() {
theme.preset("snowglow");
theme.render.font.display();
theme.render.font.ui();
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();
@ -2644,8 +2668,12 @@ var control = (function() {
type: "button",
func: function() {
theme.preset("rumble");
theme.render.font.display();
theme.render.font.ui();
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();
@ -2659,8 +2687,12 @@ var control = (function() {
type: "button",
func: function() {
theme.preset("sollight");
theme.render.font.display();
theme.render.font.ui();
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();
@ -2674,8 +2706,12 @@ var control = (function() {
type: "button",
func: function() {
theme.preset("artdeco");
theme.render.font.display();
theme.render.font.ui();
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();
@ -2689,8 +2725,12 @@ var control = (function() {
type: "button",
func: function() {
theme.preset("macaroon");
theme.render.font.display();
theme.render.font.ui();
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();
@ -2704,8 +2744,12 @@ var control = (function() {
type: "button",
func: function() {
theme.preset("hotpepper");
theme.render.font.display();
theme.render.font.ui();
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();
@ -2719,8 +2763,12 @@ var control = (function() {
type: "button",
func: function() {
theme.preset("steel");
theme.render.font.display();
theme.render.font.ui();
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();
@ -2734,8 +2782,12 @@ var control = (function() {
type: "button",
func: function() {
theme.preset("outrun");
theme.render.font.display();
theme.render.font.ui();
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();
@ -2749,8 +2801,12 @@ var control = (function() {
type: "button",
func: function() {
theme.preset("pumpkin");
theme.render.font.display();
theme.render.font.ui();
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();
@ -2764,8 +2820,12 @@ var control = (function() {
type: "button",
func: function() {
theme.preset("bubblegum");
theme.render.font.display();
theme.render.font.ui();
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();
@ -2779,8 +2839,12 @@ var control = (function() {
type: "button",
func: function() {
theme.preset("elderbean");
theme.render.font.display();
theme.render.font.ui();
theme.render.font.display.name();
theme.render.font.display.weight();
theme.render.font.display.style();
theme.render.font.ui.name();
theme.render.font.ui.weight();
theme.render.font.ui.style();
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();
@ -2804,16 +2868,119 @@ var control = (function() {
theme.style.light();
}
}, {
element: helper.e(".control-theme-radius"),
path: "theme.radius",
type: "range",
valueMod: ["float"],
rangeCountElement: helper.e(".control-theme-radius-count"),
element: helper.e(".control-theme-font-display-name"),
path: "theme.font.display.name",
type: "text",
func: function() {
theme.render.radius();
render.class();
theme.render.font.delay.display();
}
}, {
element: helper.e(".control-theme-font-display-name-default"),
type: "button",
func: function() {
mod.setValue("theme.font.display.name", helper.getObject({
object: state.get.default(),
path: "theme.font.display.name"
}));
theme.render.font.display.name();
render.update();
}
}, {
element: helper.e(".control-theme-font-display-weight"),
path: "theme.font.display.weight",
type: "range",
rangeCountElement: helper.e(".control-theme-font-display-weight-count"),
func: function() {
theme.render.font.display.weight();
render.range.count(this);
}
}, {
element: helper.e(".control-theme-font-display-weight-style-default"),
type: "button",
func: function() {
mod.setValue("theme.font.display.weight", helper.getObject({
object: state.get.default(),
path: "theme.font.display.weight"
}));
mod.setValue("theme.font.display.style", helper.getObject({
object: state.get.default(),
path: "theme.font.display.style"
}));
theme.render.font.display.weight();
theme.render.font.display.style();
render.update();
}
}, {
element: helper.e(".control-theme-font-display-style-normal"),
path: "theme.font.display.style",
type: "radio",
func: function() {
theme.render.font.display.style();
}
}, {
element: helper.e(".control-theme-font-display-style-italic"),
path: "theme.font.display.style",
type: "radio",
func: function() {
theme.render.font.display.style();
}
}, {
element: helper.e(".control-theme-font-ui-name"),
path: "theme.font.ui.name",
type: "text",
func: function() {
theme.render.font.delay.ui();
}
}, {
element: helper.e(".control-theme-font-ui-name-default"),
type: "button",
func: function() {
mod.setValue("theme.font.ui.name", helper.getObject({
object: state.get.default(),
path: "theme.font.ui.name"
}));
theme.render.font.ui.name();
render.update();
}
}, {
element: helper.e(".control-theme-font-ui-weight"),
path: "theme.font.ui.weight",
type: "range",
rangeCountElement: helper.e(".control-theme-font-ui-weight-count"),
func: function() {
theme.render.font.ui.weight();
render.range.count(this);
}
}, {
element: helper.e(".control-theme-font-ui-weight-style-default"),
type: "button",
func: function() {
mod.setValue("theme.font.ui.weight", helper.getObject({
object: state.get.default(),
path: "theme.font.ui.weight"
}));
mod.setValue("theme.font.ui.style", helper.getObject({
object: state.get.default(),
path: "theme.font.ui.style"
}));
theme.render.font.ui.weight();
theme.render.font.ui.style();
render.update();
}
}, {
element: helper.e(".control-theme-font-ui-style-normal"),
path: "theme.font.ui.style",
type: "radio",
func: function() {
theme.render.font.ui.style();
}
}, {
element: helper.e(".control-theme-font-ui-style-italic"),
path: "theme.font.ui.style",
type: "radio",
func: function() {
theme.render.font.ui.style();
}
}, {
element: helper.e(".control-theme-radius-default"),
type: "button",
@ -3018,6 +3185,17 @@ var control = (function() {
func: function() {
render.class();
}
}, {
element: helper.e(".control-theme-radius"),
path: "theme.radius",
type: "range",
valueMod: ["float"],
rangeCountElement: helper.e(".control-theme-radius-count"),
func: function() {
theme.render.radius();
render.class();
render.range.count(this);
}
}, {
element: helper.e(".control-theme-accent-randomise"),
type: "button",
@ -3028,20 +3206,6 @@ 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",

24
src/js/state.js
View File

@ -244,8 +244,16 @@ var state = (function() {
}
},
font: {
display: "",
ui: ""
display: {
name: "",
weight: 400,
style: "normal"
},
ui: {
name: "",
weight: 400,
style: "normal"
}
},
style: "dark",
radius: 0.25
@ -368,8 +376,16 @@ var state = (function() {
}
},
font: {
display: "",
ui: ""
display: {
name: "",
weight: 400,
style: "normal"
},
ui: {
name: "",
weight: 400,
style: "normal"
}
},
style: "dark",
radius: 0.25

356
src/js/theme.js
View File

@ -142,8 +142,16 @@ var theme = (function() {
all: {
nighttab: {
font: {
display: "Fjalla One Regular",
ui: "Open Sans Regular"
display: {
name: "Fjalla One Regular",
weight: 400,
style: "normal"
},
ui: {
name: "Open Sans",
weight: 400,
style: "normal"
},
},
color: {
hsl: {
@ -167,8 +175,16 @@ var theme = (function() {
},
midnight: {
font: {
display: "Gugi",
ui: "Lato"
display: {
name: "Gugi",
weight: 400,
style: "normal"
},
ui: {
name: "Lato",
weight: 400,
style: "normal"
},
},
color: {
hsl: {
@ -192,8 +208,16 @@ var theme = (function() {
},
pym: {
font: {
display: "Autour One",
ui: "Solway"
display: {
name: "Autour One",
weight: 400,
style: "normal"
},
ui: {
name: "Solway",
weight: 400,
style: "normal"
},
},
color: {
hsl: {
@ -217,8 +241,16 @@ var theme = (function() {
},
cruiser: {
font: {
display: "Alatsi",
ui: "Source Sans Pro"
display: {
name: "Alatsi",
weight: 400,
style: "normal"
},
ui: {
name: "Source Sans Pro",
weight: 400,
style: "normal"
},
},
color: {
hsl: {
@ -242,8 +274,16 @@ var theme = (function() {
},
sharpmint: {
font: {
display: "Unica One",
ui: "Montserrat"
display: {
name: "Unica One",
weight: 400,
style: "normal"
},
ui: {
name: "Montserrat",
weight: 400,
style: "normal"
},
},
color: {
hsl: {
@ -267,8 +307,16 @@ var theme = (function() {
},
snowglow: {
font: {
display: "Righteous",
ui: "Raleway"
display: {
name: "Righteous",
weight: 400,
style: "normal"
},
ui: {
name: "Raleway",
weight: 400,
style: "normal"
},
},
color: {
hsl: {
@ -292,8 +340,16 @@ var theme = (function() {
},
rumble: {
font: {
display: "Odibee Sans",
ui: "Roboto Condensed"
display: {
name: "Odibee Sans",
weight: 400,
style: "normal"
},
ui: {
name: "Roboto Condensed",
weight: 400,
style: "normal"
},
},
color: {
hsl: {
@ -317,8 +373,16 @@ var theme = (function() {
},
sollight: {
font: {
display: "Fredoka One",
ui: "Muli"
display: {
name: "Fredoka One",
weight: 400,
style: "normal"
},
ui: {
name: "Muli",
weight: 400,
style: "normal"
},
},
color: {
hsl: {
@ -342,8 +406,16 @@ var theme = (function() {
},
artdeco: {
font: {
display: "Poiret One",
ui: "Lato"
display: {
name: "Poiret One",
weight: 400,
style: "normal"
},
ui: {
name: "Lato",
weight: 400,
style: "normal"
},
},
color: {
hsl: {
@ -367,8 +439,16 @@ var theme = (function() {
},
macaroon: {
font: {
display: "Calistoga",
ui: "Source Sans Pro"
display: {
name: "Calistoga",
weight: 400,
style: "normal"
},
ui: {
name: "Source Sans Pro",
weight: 400,
style: "normal"
},
},
color: {
hsl: {
@ -392,8 +472,16 @@ var theme = (function() {
},
hotpepper: {
font: {
display: "Big Shoulders Display",
ui: "Montserrat"
display: {
name: "Big Shoulders Display",
weight: 400,
style: "normal"
},
ui: {
name: "Montserrat",
weight: 400,
style: "normal"
},
},
color: {
hsl: {
@ -417,8 +505,16 @@ var theme = (function() {
},
steel: {
font: {
display: "Abel",
ui: "Raleway"
display: {
name: "Abel",
weight: 400,
style: "normal"
},
ui: {
name: "Raleway",
weight: 400,
style: "normal"
},
},
color: {
hsl: {
@ -442,8 +538,16 @@ var theme = (function() {
},
outrun: {
font: {
display: "Major Mono Display",
ui: "Roboto Condensed"
display: {
name: "Major Mono Display",
weight: 400,
style: "normal"
},
ui: {
name: "Roboto Condensed",
weight: 400,
style: "normal"
},
},
color: {
hsl: {
@ -467,8 +571,16 @@ var theme = (function() {
},
pumpkin: {
font: {
display: "Girassol",
ui: "Muli"
display: {
name: "Girassol",
weight: 400,
style: "normal"
},
ui: {
name: "Muli",
weight: 400,
style: "normal"
},
},
color: {
hsl: {
@ -492,8 +604,16 @@ var theme = (function() {
},
bubblegum: {
font: {
display: "Monoton",
ui: "Lato"
display: {
name: "Monoton",
weight: 400,
style: "normal"
},
ui: {
name: "Lato",
weight: 400,
style: "normal"
},
},
color: {
hsl: {
@ -517,8 +637,16 @@ var theme = (function() {
},
elderbean: {
font: {
display: "Life Savers",
ui: "Quicksand"
display: {
name: "Life Savers",
weight: 400,
style: "normal"
},
ui: {
name: "Quicksand",
weight: 400,
style: "normal"
},
},
color: {
hsl: {
@ -658,68 +786,90 @@ var theme = (function() {
delay: {
display: function() {
clearTimeout(_timerFontDisplay);
_timerFontDisplay = setTimeout(render.font.display, 300);
_timerFontDisplay = setTimeout(render.font.display.name, 600);
},
ui: function() {
clearTimeout(_timerFontUi);
_timerFontUi = setTimeout(render.font.ui, 300);
_timerFontUi = setTimeout(render.font.ui.name, 600);
}
},
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");
};
display: {
name: function() {
var name = state.get.current().theme.font.display.name.trim().replace(/\s+/g, "+");
var html = helper.e("html");
var link = helper.e(".theme-font-display-name-link");
if (link) {
link.remove();
};
html.style.removeProperty("--theme-font-display-name");
if (name != "") {
var head = helper.e("head");
var link = helper.makeNode({
tag: "link",
attr: [{
key: "class",
value: "theme-font-display-name-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("--theme-font-display-name", "\"" + state.get.current().theme.font.display.name.trim().replace(/\s\s+/g, " ") + "\"" + ", \"Fjalla One Regular\", sans-serif");
};
},
weight: function() {
var html = helper.e("html");
html.style.setProperty("--theme-font-display-weight", state.get.current().theme.font.display.weight);
},
style: function() {
var html = helper.e("html");
html.style.removeProperty("--theme-font-display-style");
html.style.setProperty("--theme-font-display-style", state.get.current().theme.font.display.style);
}
},
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");
};
ui: {
name: function() {
var name = state.get.current().theme.font.ui.name.trim().replace(/\s+/g, "+");
var html = helper.e("html");
var link = helper.eA(".theme-font-ui-name-link");
if (link.length > 0) {
link.forEach(function(arrayItem, item) {
arrayItem.remove();
});
html.style.removeProperty("--theme-font-ui-name");
};
if (name != "") {
var head = helper.e("head");
var link = helper.makeNode({
tag: "link",
attr: [{
key: "class",
value: "theme-font-ui-name-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("--theme-font-ui-name", "\"" + state.get.current().theme.font.ui.name.trim().replace(/\s\s+/g, " ") + "\"" + ", \"Open Sans\", sans-serif");
};
},
weight: function() {
var html = helper.e("html");
html.style.setProperty("--theme-font-ui-weight", state.get.current().theme.font.ui.weight);
},
style: function() {
var html = helper.e("html");
html.style.removeProperty("--theme-font-ui-style");
html.style.setProperty("--theme-font-ui-style", state.get.current().theme.font.ui.style);
}
}
};
@ -767,10 +917,10 @@ var theme = (function() {
};
html.style.setProperty("--theme-preset-accent-" + key, preset.accent.r + ", " + preset.accent.g + ", " + preset.accent.b);
if (preset.font.display != "") {
html.style.setProperty("--theme-preset-font-display-" + key, "\"" + preset.font.display + "\", sans-serif");
html.style.setProperty("--theme-preset-font-display-" + key, "\"" + preset.font.display.name + "\", sans-serif");
};
if (preset.font.ui != "") {
html.style.setProperty("--theme-preset-font-ui-" + key, "\"" + preset.font.ui + "\", sans-serif");
html.style.setProperty("--theme-preset-font-ui-" + key, "\"" + preset.font.ui.name + "\", sans-serif");
};
if (preset.style == "dark") {
html.style.setProperty("--theme-preset-font-color-" + key, "var(--theme-white)");
@ -816,29 +966,16 @@ 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.font.display.name();
render.font.display.weight();
render.font.display.style();
render.font.ui.name();
render.font.ui.weight();
render.font.ui.style();
render.color.shade();
render.accent.color();
render.radius();
@ -852,7 +989,6 @@ var theme = (function() {
render: render,
style: style,
accent: accent,
font: font,
preset: preset
};

13
src/js/update.js
View File

@ -729,6 +729,19 @@ var update = (function() {
ui: ""
};
return data;
},
"4.7.0": function(data) {
data.state.theme.font.display = {
name: data.state.theme.font.display,
weight: 400,
style: "normal"
};
data.state.theme.font.ui = {
name: data.state.theme.font.ui,
weight: 400,
style: "normal"
};
return data;
}
};

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() {
var current = "4.6.3";
var current = "4.7.0";
var name = "Naughty Goose";

2
src/manifest.json
View File

@ -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.6.3",
"version": "4.7.0",
"manifest_version": 2,
"chrome_url_overrides": {
"newtab": "index.html"