diff --git a/.changeset/green-humans-bathe.md b/.changeset/green-humans-bathe.md new file mode 100644 index 0000000..d674ad4 --- /dev/null +++ b/.changeset/green-humans-bathe.md @@ -0,0 +1,5 @@ +--- +"water.css": patch +--- + +Added space around scrollbar so it is not against the window edge and is easier to click. diff --git a/.changeset/metal-mails-help.md b/.changeset/metal-mails-help.md new file mode 100644 index 0000000..f14593b --- /dev/null +++ b/.changeset/metal-mails-help.md @@ -0,0 +1,5 @@ +--- +"water.css": patch +--- + +Update the scrollbar styles to be better on Firefox diff --git a/.changeset/quiet-wombats-press.md b/.changeset/quiet-wombats-press.md new file mode 100644 index 0000000..f957377 --- /dev/null +++ b/.changeset/quiet-wombats-press.md @@ -0,0 +1,5 @@ +--- +"water.css": patch +--- + +Remove reliance on color-mod function diff --git a/gulpfile.js b/gulpfile.js index 34ee92e..c612818 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -17,10 +17,6 @@ const sizereport = require('gulp-sizereport') const postcssCssVariables = require('postcss-css-variables') const postcssImport = require('postcss-import') const postcssInlineSvg = require('postcss-inline-svg') -const postcssColorModFunction = require('postcss-color-mod-function').bind(null, { - /* Use `.toRGBLegacy()` as other methods can result in lots of decimals */ - stringifier: (color) => color.toRGBLegacy() -}) const paths = { docs: { src: 'docs/**', dest: 'out/docs' }, @@ -58,7 +54,7 @@ const style = () => { return ( gulp .src(paths.styles.src) - .pipe(postcss([postcssImport(), postcssColorModFunction(), postcssInlineSvg()])) + .pipe(postcss([postcssImport(), postcssInlineSvg()])) .pipe(startDiff()) .pipe(postcss([postcssCssVariables({ preserve: true })])) diff --git a/package.json b/package.json index 7704812..6c6018b 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,6 @@ "htmlnano": "^0.2.3", "husky": "^4.2.5", "pa11y": "^5.3.0", - "postcss-color-mod-function": "^3.0.3", "postcss-css-variables": "^0.12.0", "postcss-import": "^12.0.1", "postcss-inline-svg": "^4.1.0", diff --git a/src/parts/_base.css b/src/parts/_base.css index 33e5692..41cc1ee 100644 --- a/src/parts/_base.css +++ b/src/parts/_base.css @@ -1,8 +1,3 @@ -html { - scrollbar-color: var(--scrollbar-thumb) var(--background-body); - scrollbar-width: thin; -} - body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; line-height: 1.4; diff --git a/src/parts/_misc.css b/src/parts/_misc.css index 04d9a02..25e09b8 100644 --- a/src/parts/_misc.css +++ b/src/parts/_misc.css @@ -48,23 +48,28 @@ tbody tr:nth-child(even) button:hover { background-color: var(--background-body); } +html { + scrollbar-color: var(--scrollbar-thumb-pressed) var(--background); +} + ::-webkit-scrollbar { - height: 10px; - width: 10px; + height: 16px; + width: 16px; } ::-webkit-scrollbar-track { background: var(--background); - border-radius: 6px; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); - border-radius: 6px; + background-clip: content-box; + border: 4px solid var(--background); + border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { - background: var(--scrollbar-thumb-hover); + background-color: var(--scrollbar-thumb-hover); } ::selection { diff --git a/src/variables-dark.css b/src/variables-dark.css index 3b1b800..4f82b6d 100755 --- a/src/variables-dark.css +++ b/src/variables-dark.css @@ -14,7 +14,7 @@ --button-base: #0c151c; --button-hover: #040a0f; --scrollbar-thumb: var(--button-hover); - --scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(-30%)); + --scrollbar-thumb-hover: #3b4d5c; --form-placeholder: #a9a9a9; --form-text: #fff; --variable: #d941e2; diff --git a/src/variables-light.css b/src/variables-light.css index 1d602e8..3c8a122 100755 --- a/src/variables-light.css +++ b/src/variables-light.css @@ -13,7 +13,7 @@ --animation-duration: 0.1s; --button-base: #d0cfcf; --button-hover: #9b9b9b; - --scrollbar-thumb: color-mod(var(--button-hover) lightness(+6%)); + --scrollbar-thumb: #aaa; --scrollbar-thumb-hover: var(--button-hover); --form-placeholder: #949494; --form-text: #1d1d1d; diff --git a/yarn.lock b/yarn.lock index 18e1c7f..e845b5c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -968,11 +968,6 @@ human-id "^1.0.2" prettier "^1.18.2" -"@csstools/convert-colors@^1.4.0": - version "1.4.0" - resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7" - integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw== - "@gulp-sourcemaps/identity-map@1.X": version "1.0.2" resolved "https://registry.yarnpkg.com/@gulp-sourcemaps/identity-map/-/identity-map-1.0.2.tgz#1e6fe5d8027b1f285dc0d31762f566bccd73d5a9" @@ -3668,11 +3663,6 @@ flatted@^2.0.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138" integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA== -flatten@^1.0.2: - version "1.0.3" - resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b" - integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg== - flush-write-stream@^1.0.2: version "1.1.1" resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8" @@ -6509,15 +6499,6 @@ postcss-calc@^7.0.1: postcss-selector-parser "^6.0.2" postcss-value-parser "^4.0.2" -postcss-color-mod-function@^3.0.3: - version "3.0.3" - resolved "https://registry.yarnpkg.com/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz#816ba145ac11cc3cb6baa905a75a49f903e4d31d" - integrity sha512-YP4VG+xufxaVtzV6ZmhEtc+/aTXH3d0JLpnYfxqTvwZPbJhWqp8bSY3nfNzNRFLgB4XSaBA82OE4VjOOKpCdVQ== - dependencies: - "@csstools/convert-colors" "^1.4.0" - postcss "^7.0.2" - postcss-values-parser "^2.0.0" - postcss-colormin@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.3.tgz#ae060bce93ed794ac71264f08132d550956bd381" @@ -6883,15 +6864,6 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^ resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb" integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ== -postcss-values-parser@^2.0.0: - version "2.0.1" - resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f" - integrity sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg== - dependencies: - flatten "^1.0.2" - indexes-of "^1.0.1" - uniq "^1.0.1" - postcss@^6.0.8: version "6.0.23" resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"