From afd64919afa6ca9ea91dc222f9eda5b45a0824f0 Mon Sep 17 00:00:00 2001 From: Kombie Date: Fri, 27 Dec 2019 20:48:21 -0700 Subject: [PATCH] [feature] add theme font controls --- package-lock.json | 2 +- package.json | 2 +- src/css/base.css | 3 +- src/css/button.css | 6 +- src/css/clock.css | 2 +- src/css/date.css | 2 +- src/css/form.css | 14 +-- src/css/greeting.css | 2 +- src/css/group.css | 1 - src/css/link.css | 8 +- src/css/modal.css | 4 - src/css/tip.css | 2 +- src/css/transitional.css | 2 +- src/css/typography.css | 45 +++++----- src/css/variables.css | 6 +- src/index.html | 42 ++++++--- src/js/control.js | 42 +++++++++ src/js/edge.js | 2 +- src/js/state.js | 4 + src/js/theme.js | 179 ++++++++++++++++++++++++++++++++++++--- src/js/update.js | 7 ++ src/js/version.js | 2 +- src/manifest.json | 2 +- 23 files changed, 303 insertions(+), 78 deletions(-) diff --git a/package-lock.json b/package-lock.json index b361e34f..3f0f939f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "nighttab", - "version": "4.5.0", + "version": "4.6.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index fbf63e3e..ff02fa63 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/css/base.css b/src/css/base.css index 987b1ecf..6f10ea45 100755 --- a/src/css/base.css +++ b/src/css/base.css @@ -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, diff --git a/src/css/button.css b/src/css/button.css index b6cd92da..c8cc505c 100755 --- a/src/css/button.css +++ b/src/css/button.css @@ -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-"], diff --git a/src/css/clock.css b/src/css/clock.css index cbd15b8e..8ba4db45 100755 --- a/src/css/clock.css +++ b/src/css/clock.css @@ -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; diff --git a/src/css/date.css b/src/css/date.css index 8e53f0ba..ce04241a 100755 --- a/src/css/date.css +++ b/src/css/date.css @@ -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; diff --git a/src/css/form.css b/src/css/form.css index 94140f53..af20a8fd 100755 --- a/src/css/form.css +++ b/src/css/form.css @@ -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; diff --git a/src/css/greeting.css b/src/css/greeting.css index d6065f7c..aca23e1d 100755 --- a/src/css/greeting.css +++ b/src/css/greeting.css @@ -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; diff --git a/src/css/group.css b/src/css/group.css index b206f169..d1997beb 100644 --- a/src/css/group.css +++ b/src/css/group.css @@ -81,7 +81,6 @@ } .group-name-text { - font-family: var(--font-fjalla); margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; diff --git a/src/css/link.css b/src/css/link.css index 3878c688..59a6b1f1 100755 --- a/src/css/link.css +++ b/src/css/link.css @@ -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; diff --git a/src/css/modal.css b/src/css/modal.css index f8ab777e..4e5f072f 100755 --- a/src/css/modal.css +++ b/src/css/modal.css @@ -50,10 +50,6 @@ position: relative; } -.modal-heading { - overflow-x: hidden; -} - .modal-heading:focus { outline: none; } diff --git a/src/css/tip.css b/src/css/tip.css index e9c587c1..78567bff 100755 --- a/src/css/tip.css +++ b/src/css/tip.css @@ -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; diff --git a/src/css/transitional.css b/src/css/transitional.css index 582c4181..55d796c2 100644 --- a/src/css/transitional.css +++ b/src/css/transitional.css @@ -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; diff --git a/src/css/typography.css b/src/css/typography.css index 492ee6a1..64dd227e 100755 --- a/src/css/typography.css +++ b/src/css/typography.css @@ -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; } diff --git a/src/css/variables.css b/src/css/variables.css index 4daf64da..32f3dac9 100644 --- a/src/css/variables.css +++ b/src/css/variables.css @@ -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; diff --git a/src/index.html b/src/index.html index 3765cffb..8058c347 100644 --- a/src/index.html +++ b/src/index.html @@ -144,14 +144,14 @@ + diff --git a/src/js/control.js b/src/js/control.js index 05dcab6f..3d858d52 100644 --- a/src/js/control.js +++ b/src/js/control.js @@ -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", diff --git a/src/js/edge.js b/src/js/edge.js index abc4bbcf..3694b74e 100644 --- a/src/js/edge.js +++ b/src/js/edge.js @@ -15,7 +15,7 @@ var edge = (function() { }, 100); }, remove: function() { - window.clearTimeout(_tick); + clearTimeout(_tick); _tick = null; } }; diff --git a/src/js/state.js b/src/js/state.js index 446540d5..efdf5a61 100644 --- a/src/js/state.js +++ b/src/js/state.js @@ -243,6 +243,10 @@ var state = (function() { b: 160 } }, + font: { + display: "", + ui: "" + }, style: "dark", radius: 0.25 }, diff --git a/src/js/theme.js b/src/js/theme.js index ce1c8347..1a8325ff 100644 --- a/src/js/theme.js +++ b/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 }; diff --git a/src/js/update.js b/src/js/update.js index 01d37858..0792ea44 100644 --- a/src/js/update.js +++ b/src/js/update.js @@ -722,6 +722,13 @@ var update = (function() { show: true }; return data; + }, + "4.6.0": function(data) { + data.state.theme.font = { + display: "", + ui: "" + }; + return data; } }; diff --git a/src/js/version.js b/src/js/version.js index 105f4fdb..dcd9a136 100644 --- a/src/js/version.js +++ b/src/js/version.js @@ -1,6 +1,6 @@ var version = (function() { - var current = "4.5.0"; + var current = "4.6.0"; var name = "Naughty Goose"; diff --git a/src/manifest.json b/src/manifest.json index 3c8fbd7f..b2e894cb 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -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"