From a42fa8e9f9e842f963c836da0cb8d2367e4b328a Mon Sep 17 00:00:00 2001 From: rejas Date: Sat, 17 Apr 2021 09:38:33 +0200 Subject: [PATCH 1/5] Adjust default css to match styles from befor custom properties merge --- css/main.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/css/main.css b/css/main.css index ba6e1d89..e7808a86 100644 --- a/css/main.css +++ b/css/main.css @@ -50,27 +50,27 @@ body { } .xsmall { - font-size: 0.667rem; - line-height: 1.4; + font-size: 0.75rem; + line-height: 1.275; } .small { font-size: 1rem; - line-height: 1.4; + line-height: 1.25; } .medium { font-size: 1.5rem; - line-height: 1.4; + line-height: 1.225; } .large { - font-size: 2.25rem; + font-size: 3.25rem; line-height: 1; } .xlarge { - font-size: 3.375rem; + font-size: 3.75rem; line-height: 1; letter-spacing: -3px; } From 7bfaf0798012fa5dbb29b4e473902149817741a3 Mon Sep 17 00:00:00 2001 From: rejas Date: Sat, 17 Apr 2021 09:50:12 +0200 Subject: [PATCH 2/5] Use custom properties colors more often --- css/main.css | 4 ++-- modules/default/alert/notificationFx.css | 7 +++---- modules/default/clock/clock.js | 2 +- modules/default/clock/clock_styles.css | 8 ++++---- 4 files changed, 10 insertions(+), 11 deletions(-) diff --git a/css/main.css b/css/main.css index e7808a86..bb5c694d 100644 --- a/css/main.css +++ b/css/main.css @@ -108,11 +108,11 @@ header { font-size: 15px; font-family: var(--font-primary), Arial, Helvetica, sans-serif; font-weight: 400; - border-bottom: 1px solid #666; + border-bottom: 1px solid var(--color-text-dimmed); line-height: 15px; padding-bottom: 5px; margin-bottom: 10px; - color: #999; + color: var(--color-text); } sup { diff --git a/modules/default/alert/notificationFx.css b/modules/default/alert/notificationFx.css index 0782d464..39faacf7 100644 --- a/modules/default/alert/notificationFx.css +++ b/modules/default/alert/notificationFx.css @@ -6,7 +6,6 @@ line-height: 1.4; margin-bottom: 10px; z-index: 1; - color: black; font-size: 70%; position: relative; display: table; @@ -15,17 +14,17 @@ border-width: 1px; border-radius: 5px; border-style: solid; - border-color: #666; + border-color: var(--color-text-dimmed); } .ns-alert { border-style: solid; - border-color: #fff; + border-color: var(--color-text-bright); padding: 17px; line-height: 1.4; margin-bottom: 10px; z-index: 3; - color: white; + color: var(--color-text-bright); font-size: 70%; position: fixed; text-align: center; diff --git a/modules/default/clock/clock.js b/modules/default/clock/clock.js index 6e3d7090..c6d73e9c 100644 --- a/modules/default/clock/clock.js +++ b/modules/default/clock/clock.js @@ -52,7 +52,7 @@ Module.register("clock", { //Calculate how many ms should pass until next update depending on if seconds is displayed or not var delayCalculator = function (reducedSeconds) { - var EXTRA_DELAY = 50; //Deliberate imperceptable delay to prevent off-by-one timekeeping errors + var EXTRA_DELAY = 50000000; //Deliberate imperceptable delay to prevent off-by-one timekeeping errors if (self.config.displaySeconds) { return 1000 - moment().milliseconds() + EXTRA_DELAY; diff --git a/modules/default/clock/clock_styles.css b/modules/default/clock/clock_styles.css index 839336be..e8436acc 100644 --- a/modules/default/clock/clock_styles.css +++ b/modules/default/clock/clock_styles.css @@ -17,7 +17,7 @@ width: 6px; height: 6px; margin: -3px 0 0 -3px; - background: white; + background: var(--color-text-bright); border-radius: 3px; content: ""; display: block; @@ -31,7 +31,7 @@ left: 50%; margin: -2px 0 -2px -25%; /* numbers much match negative length & thickness */ padding: 2px 0 2px 25%; /* indicator length & thickness */ - background: white; + background: var(--color-text-bright); transform-origin: 100% 50%; border-radius: 3px 0 0 3px; } @@ -44,7 +44,7 @@ left: 50%; margin: -35% -2px 0; /* numbers must match negative length & thickness */ padding: 35% 2px 0; /* indicator length & thickness */ - background: white; + background: var(--color-text-bright); transform-origin: 50% 100%; border-radius: 3px 0 0 3px; } @@ -57,7 +57,7 @@ left: 50%; margin: -38% -1px 0 0; /* numbers must match negative length & thickness */ padding: 38% 1px 0 0; /* indicator length & thickness */ - background: #888; + background: var(--color-text); transform-origin: 50% 100%; } From de8267f41edb822c6ab17a2e3f6146c3c6c41aea Mon Sep 17 00:00:00 2001 From: rejas Date: Sat, 17 Apr 2021 10:27:36 +0200 Subject: [PATCH 3/5] Fix css comment style --- css/custom.css.sample | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css/custom.css.sample b/css/custom.css.sample index 59142c17..091462f7 100644 --- a/css/custom.css.sample +++ b/css/custom.css.sample @@ -3,10 +3,10 @@ * MIT Licensed. */ -// Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: -// @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap'); +/* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: */ +/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap'); */ -// Change color and fonts here: +/* Change color and fonts here: */ :root { --color-text: #999; --color-text-dimmed: #666; From 20bee9c334f9951a935012304a72d859664476ad Mon Sep 17 00:00:00 2001 From: rejas Date: Sat, 17 Apr 2021 10:28:25 +0200 Subject: [PATCH 4/5] Update dependencies --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8318e339..55ea421c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2315,9 +2315,9 @@ } }, "eslint-plugin-prettier": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.3.1.tgz", - "integrity": "sha512-Rq3jkcFY8RYeQLgk2cCwuc0P7SEFwDravPhsJZOQ5N4YI4DSg50NyqJ/9gdZHzQlHf8MvafSesbNJCcP/FF6pQ==", + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.0.tgz", + "integrity": "sha512-UDK6rJT6INSfcOo545jiaOwB701uAIt2/dR7WnFQoGCVl1/EMqdANBmwUaqqQ45aXprsTGzSa39LI1PyuRBxxw==", "dev": true, "requires": { "prettier-linter-helpers": "^1.0.0" diff --git a/package.json b/package.json index 682d4f52..085ee4af 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "chai-as-promised": "^7.1.1", "eslint-config-prettier": "^8.2.0", "eslint-plugin-jsdoc": "^32.3.0", - "eslint-plugin-prettier": "^3.3.1", + "eslint-plugin-prettier": "^3.4.0", "express-basic-auth": "^1.2.0", "husky": "^4.3.8", "jsdom": "^16.5.3", From 480f734a060e5c78ffe403a881312b75674f2de2 Mon Sep 17 00:00:00 2001 From: rejas Date: Sat, 17 Apr 2021 12:20:25 +0200 Subject: [PATCH 5/5] Update CHANGELOG, undo accidental commit in clock.js --- CHANGELOG.md | 2 +- modules/default/clock/clock.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index efbf122d..ba0b0fd1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,7 +15,7 @@ _This release is scheduled to be released on 2021-04-01._ - Added German translation for "PRECIP". - Added first test for Alert module. - Added support for `dateFormat` when not using `timeFormat: "absolute"` -- Added custom-properties in css for improved styling experience, see `custom.css.sample` file +- Added custom-properties in css of core and modules for improved styling experience, see `custom.css.sample` file ### Updated diff --git a/modules/default/clock/clock.js b/modules/default/clock/clock.js index c6d73e9c..6e3d7090 100644 --- a/modules/default/clock/clock.js +++ b/modules/default/clock/clock.js @@ -52,7 +52,7 @@ Module.register("clock", { //Calculate how many ms should pass until next update depending on if seconds is displayed or not var delayCalculator = function (reducedSeconds) { - var EXTRA_DELAY = 50000000; //Deliberate imperceptable delay to prevent off-by-one timekeeping errors + var EXTRA_DELAY = 50; //Deliberate imperceptable delay to prevent off-by-one timekeeping errors if (self.config.displaySeconds) { return 1000 - moment().milliseconds() + EXTRA_DELAY;