From 3d50374c9e62ecf2760e6716e3b381cded4f2b54 Mon Sep 17 00:00:00 2001 From: Liam Date: Sat, 24 Feb 2024 10:33:51 +1100 Subject: [PATCH 1/2] feat: dynamic window color with inline css variables --- build.js | 4 +++- docs/components/window/frame.ejs | 16 ++++------------ gui/_treeview.scss | 2 +- gui/_window.scss | 4 +++- package-lock.json | 4 ++-- 5 files changed, 13 insertions(+), 17 deletions(-) diff --git a/build.js b/build.js index a18faba..44bb639 100644 --- a/build.js +++ b/build.js @@ -12,7 +12,9 @@ const plugins = [ require("autoprefixer"), require("postcss-import"), require("postcss-nested"), - require("postcss-css-variables"), + require("postcss-css-variables")({ + preserve: true + }), require("postcss-calc"), require("postcss-base64")({ root: process.cwd() + "/gui", diff --git a/docs/components/window/frame.ejs b/docs/components/window/frame.ejs index 19d8306..9fbd803 100644 --- a/docs/components/window/frame.ejs +++ b/docs/components/window/frame.ejs @@ -37,20 +37,12 @@ `) %>

- If you want to override the default color of the window, you can specify the - background-color attribute in the before pseudo element - and the title-bar under the same parent class as window. + If you want to override the default color of the window, you can redefine the + --window-background-color variable as an inline value of the style attribute.

<%- example(` - - -
+
A violet window frame
@@ -64,7 +56,7 @@
-
+
A glass violet window frame
diff --git a/gui/_treeview.scss b/gui/_treeview.scss index 53f8540..a57ac26 100644 --- a/gui/_treeview.scss +++ b/gui/_treeview.scss @@ -34,7 +34,7 @@ ul.tree-view { > summary::before { content: "\002b"; top: calc(50% - var(--treeview-square-size) / 2); - left: calc(-var(--treeview-square-size) * 2); + left: calc(var(--treeview-square-size) * 2 * -1); right: unset; width: var(--treeview-square-size); height: var(--treeview-square-size); diff --git a/gui/_window.scss b/gui/_window.scss index 268802d..55d97c0 100644 --- a/gui/_window.scss +++ b/gui/_window.scss @@ -132,7 +132,8 @@ height: 100%; border-radius: var(--window-border-radius); background: linear-gradient(transparent 20%, #ffffffb3 40%, transparent 41%), - var(--window-background); + var(--window-background); + background-color: var(--window-background-color); box-shadow: inset 0 0 0 1px #fffd; } @@ -252,6 +253,7 @@ justify-content: space-between; align-items: center; background: var(--window-background); + background-color: var(--window-background-color); &-text { color: #000; diff --git a/package-lock.json b/package-lock.json index a8e64ac..314b1e2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "7.css", - "version": "0.7.0", + "version": "0.16.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "7.css", - "version": "0.7.0", + "version": "0.16.0", "license": "MIT", "devDependencies": { "autoprefixer": "^10.4.8", From 9cc9fd2ce460bec7ca8c4a2b146b595840800a62 Mon Sep 17 00:00:00 2001 From: Liam Date: Sat, 9 Mar 2024 20:50:13 +1100 Subject: [PATCH 2/2] fix: resolve failed static css variables conversions --- build.js | 3 -- gui/_balloon.scss | 4 +- gui/_radiobutton.scss | 7 ++-- gui/_slider.scss | 9 ++++- gui/_window.scss | 7 ++-- package-lock.json | 85 ------------------------------------------- package.json | 1 - 7 files changed, 18 insertions(+), 98 deletions(-) diff --git a/build.js b/build.js index 44bb639..4199896 100644 --- a/build.js +++ b/build.js @@ -12,9 +12,6 @@ const plugins = [ require("autoprefixer"), require("postcss-import"), require("postcss-nested"), - require("postcss-css-variables")({ - preserve: true - }), require("postcss-calc"), require("postcss-base64")({ root: process.cwd() + "/gui", diff --git a/gui/_balloon.scss b/gui/_balloon.scss index 316a91d..ea90811 100644 --- a/gui/_balloon.scss +++ b/gui/_balloon.scss @@ -20,7 +20,7 @@ background: var(--balloon-tail-top); width: var(--balloon-tail-size); height: var(--balloon-tail-size); - top: -var(--balloon-tail-size); + top: calc(var(--balloon-tail-size) * -1); left: var(--balloon-tail-offset); } @@ -31,7 +31,7 @@ &.is-top { &::before { background: var(--balloon-tail-bottom); - bottom: -var(--balloon-tail-size); + bottom: calc(var(--balloon-tail-size) * -1); top: unset; transform: scale(-1); } diff --git a/gui/_radiobutton.scss b/gui/_radiobutton.scss index bdad316..3b42098 100644 --- a/gui/_radiobutton.scss +++ b/gui/_radiobutton.scss @@ -4,9 +4,10 @@ --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing); --radio-total-width: calc(var(--radio-total-width-precalc)); --radio-dot-width: 8px; - --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2); + --radio-dot-offset: calc(var(--radio-width) / 2); + --radio-dot-top: calc(var(--radio-dot-offset) - var(--radio-dot-width) / 2); --radio-dot-left: calc( - -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var( + -1 * (var(--radio-total-width)) + var(--radio-width) / 2 - var( --radio-dot-width ) / 2 ); @@ -33,7 +34,7 @@ input[type="radio"] { content: ""; position: absolute; top: 0; - left: calc(-1 * (var(--radio-total-width-precalc))); + left: calc(var(--radio-total-width) * -1); display: inline-block; width: var(--radio-width); height: var(--radio-width); diff --git a/gui/_slider.scss b/gui/_slider.scss index 86b6ea8..43fbe7c 100644 --- a/gui/_slider.scss +++ b/gui/_slider.scss @@ -43,7 +43,14 @@ input[type="range"] { } } - &::-webkit-slider-runnable-track, + &::-webkit-slider-runnable-track { + width: 100%; + height: 3px; + background: var(--surface); + box-sizing: border-box; + box-shadow: inset 1px 1px 1px #999, inset -1px 0 #999, 0 1px #fff; + } + &::-moz-range-track { width: 100%; height: 3px; diff --git a/gui/_window.scss b/gui/_window.scss index 55d97c0..aa85a2b 100644 --- a/gui/_window.scss +++ b/gui/_window.scss @@ -149,7 +149,7 @@ } pre { - margin: -var(--window-spacing); + margin: calc(var(--window-spacing) * -1); } } @@ -249,6 +249,7 @@ border: var(--window-border) var(--window-border-color); border-radius: var(--window-border-radius) var(--window-border-radius) 0 0; padding: var(--window-spacing); + padding-top: 0; display: flex; justify-content: space-between; align-items: center; @@ -259,6 +260,7 @@ color: #000; letter-spacing: 0; line-height: 15px; + padding-top: var(--window-spacing); text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff; } @@ -269,7 +271,6 @@ border: var(--window-border) var(--control-border-color); border-top: 0; border-radius: 0 0 var(--control-border-radius) var(--control-border-radius); - margin-top: -var(--window-spacing); box-shadow: 0 1px 0 #fffa, 1px 0 0 #fffa, -1px 0 0 #fffa; button { @@ -503,7 +504,7 @@ .status-bar { margin: var(--window-spacing); - margin-top: -var(--window-spacing); + margin-top: calc(var(--window-spacing) * -1); background: var(--surface); border: var(--window-border) var(--window-border-color); border-top: 0; diff --git a/package-lock.json b/package-lock.json index 314b1e2..ab65110 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,6 @@ "postcss": "^8.3.5", "postcss-base64": "^0.7.1", "postcss-calc": "^7.0.2", - "postcss-css-variables": "^0.14.0", "postcss-import": "^12.0.1", "postcss-nested": "^4.2.1", "postcss-prefix-selector": "^1.15.0" @@ -1180,12 +1179,6 @@ "node": ">=0.10.0" } }, - "node_modules/extend": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", - "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==", - "dev": true - }, "node_modules/extend-shallow": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz", @@ -2933,44 +2926,6 @@ "postcss": "^8.2.15" } }, - "node_modules/postcss-css-variables": { - "version": "0.14.0", - "resolved": "https://registry.npmjs.org/postcss-css-variables/-/postcss-css-variables-0.14.0.tgz", - "integrity": "sha512-fEdksFdcvn/vvTddy4KoPDojZt9hQZx3oXHAIgoYJHsnk97ZTP08unM2UAqksiqdytv93415kBwP+c3/jcopyg==", - "dev": true, - "dependencies": { - "balanced-match": "^1.0.0", - "escape-string-regexp": "^1.0.3", - "extend": "^3.0.1", - "postcss": "^6.0.8" - } - }, - "node_modules/postcss-css-variables/node_modules/postcss": { - "version": "6.0.23", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", - "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", - "dev": true, - "dependencies": { - "chalk": "^2.4.1", - "source-map": "^0.6.1", - "supports-color": "^5.4.0" - }, - "engines": { - "node": ">=4.0.0" - } - }, - "node_modules/postcss-css-variables/node_modules/supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, - "dependencies": { - "has-flag": "^3.0.0" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/postcss-discard-comments": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.1.tgz", @@ -5224,12 +5179,6 @@ } } }, - "extend": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", - "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==", - "dev": true - }, "extend-shallow": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz", @@ -6605,40 +6554,6 @@ "postcss-value-parser": "^4.2.0" } }, - "postcss-css-variables": { - "version": "0.14.0", - "resolved": "https://registry.npmjs.org/postcss-css-variables/-/postcss-css-variables-0.14.0.tgz", - "integrity": "sha512-fEdksFdcvn/vvTddy4KoPDojZt9hQZx3oXHAIgoYJHsnk97ZTP08unM2UAqksiqdytv93415kBwP+c3/jcopyg==", - "dev": true, - "requires": { - "balanced-match": "^1.0.0", - "escape-string-regexp": "^1.0.3", - "extend": "^3.0.1", - "postcss": "^6.0.8" - }, - "dependencies": { - "postcss": { - "version": "6.0.23", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", - "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", - "dev": true, - "requires": { - "chalk": "^2.4.1", - "source-map": "^0.6.1", - "supports-color": "^5.4.0" - } - }, - "supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } - } - } - }, "postcss-discard-comments": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.1.tgz", diff --git a/package.json b/package.json index 87bcb01..7dabc45 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,6 @@ "postcss": "^8.3.5", "postcss-base64": "^0.7.1", "postcss-calc": "^7.0.2", - "postcss-css-variables": "^0.14.0", "postcss-import": "^12.0.1", "postcss-nested": "^4.2.1", "postcss-prefix-selector": "^1.15.0"