[feature] add theme font controls

Author: zombieFox

package-lock.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":{

package.json

@@ -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,

src/css/base.css

@@ -8,7 +8,7 @@ input[type="submit"]{
 margin:001em0;
 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-"],

src/css/button.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;

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;

src/css/date.css

@@ -32,7 +32,7 @@ select{
 margin:001em0;
 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:001em0;
 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;

src/css/form.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;

src/css/greeting.css

@@ -81,7 +81,6 @@
 }
 
 .group-name-text{
-font-family:var(--font-fjalla);
 margin-bottom:0;
 overflow: hidden;
 text-overflow: ellipsis;

src/css/group.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;