mirror of
https://github.com/kognise/water.css.git
synced 2025-08-17 18:37:04 +02:00
Merge branch 'development' into better-system-font-stack
This commit is contained in:
Felix Mattick
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"water.css": patch
|
||||
---
|
||||
|
||||
Add style for color input field
|
||||
5
.changeset/friendly-meals-cheat.md
Normal file
5
.changeset/friendly-meals-cheat.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"water.css": minor
|
||||
---
|
||||
|
||||
Add monospace system font stack
|
||||
5
.changeset/fuzzy-zoos-wash.md
Normal file
5
.changeset/fuzzy-zoos-wash.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"water.css": patch
|
||||
---
|
||||
|
||||
Save theme in bookmarklet, and use prefers-color-scheme value as default
|
||||
5
.changeset/green-humans-bathe.md
Normal file
5
.changeset/green-humans-bathe.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"water.css": patch
|
||||
---
|
||||
|
||||
Added space around scrollbar so it is not against the window edge and is easier to click.
|
||||
5
.changeset/hungry-eagles-shout.md
Normal file
5
.changeset/hungry-eagles-shout.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"water.css": patch
|
||||
---
|
||||
|
||||
Prevent submitting the demo form
|
||||
5
.changeset/metal-mails-help.md
Normal file
5
.changeset/metal-mails-help.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"water.css": patch
|
||||
---
|
||||
|
||||
Update the scrollbar styles to be better on Firefox
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"water.css": patch
|
||||
---
|
||||
|
||||
Added styling for Input type Reset
|
||||
5
.changeset/quiet-wombats-press.md
Normal file
5
.changeset/quiet-wombats-press.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"water.css": patch
|
||||
---
|
||||
|
||||
Remove reliance on color-mod function
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"water.css": minor
|
||||
---
|
||||
|
||||
Add styles for <dialog> element
|
||||
5
.changeset/six-owls-punch.md
Normal file
5
.changeset/six-owls-punch.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"water.css": patch
|
||||
---
|
||||
|
||||
Added a theme toggle button to the bookmarklet
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"water.css": patch
|
||||
---
|
||||
|
||||
Better button color inside table.
|
||||
5
.changeset/ten-berries-explode.md
Normal file
5
.changeset/ten-berries-explode.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"water.css": patch
|
||||
---
|
||||
|
||||
Unprefix `-webkit-appearance`
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"water.css": patch
|
||||
---
|
||||
|
||||
Update main package entrypoint
|
||||
11
.github/CONTRIBUTING.md
vendored
11
.github/CONTRIBUTING.md
vendored
@@ -130,10 +130,12 @@ If you're not sure what kind of change you're making, pick "patch".
|
||||
|
||||
### Submit a Pull Request
|
||||
|
||||
Once your changes have been committed and you've created a changelog, you'll want to [submit a pull request](https://github.com/kognise/water.css/compare).
|
||||
Once your changes have been committed and you've created a changelog, you'll want to [submit a pull request](https://github.com/kognise/water.css/compare/development..development).
|
||||
|
||||
Be sure to provide a clear description of what your pull request includes. If your pull request will close an existing issue, make sure to write `Closes #[id]` in the pull request description, where `[id]` is replaced by the issue your pull request will close.
|
||||
|
||||
Make sure that you create your pull request with the base set to the `development` branch. This is where all the changes for the next update go.
|
||||
|
||||
After submitting a pull request, it will need to be reviewed by a maintainer of the project before being merged. You may be asked to make some changes to your pull request.
|
||||
|
||||
After your change has been reviewed and merged, you can celebrate as the newest contributor to the Water.css project! 🎉
|
||||
@@ -167,3 +169,10 @@ After your change has been reviewed and merged, you can celebrate as the newest
|
||||
- **`src/builds`** contains entry files for the different versions water.css comes in: auto, dark and light
|
||||
|
||||
- **`src/parts`** contains the water.css source code organized in separate files by its kind, like "forms" or "typography"
|
||||
|
||||
|
||||
### Branches
|
||||
|
||||
The `master` branch contains the code that is currently published, for example on NPM.
|
||||
|
||||
In contrast, the `development` branch contains all the changes that will come in the next official release. When updating Water.css, software called Changesets will automatically figure out what version increase has to be made.
|
||||
27
CHANGELOG.md
27
CHANGELOG.md
@@ -1,6 +1,23 @@
|
||||
# Water.css
|
||||
|
||||
## 2.1.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- 567d2ec: Add styles for <dialog> element
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- ebb4e23: Add style for color input field
|
||||
- 21e1e5d: Remove sourcemap references from built files
|
||||
- c23d65c: Reduce input selector specificity for display property to prevent overriding user's css. Fixes #78 and #82
|
||||
- 1f1168c: Added styling for Input type Reset
|
||||
- 84b57fd: Update button colors for better contrast, especially in tables
|
||||
- 2fff00c: Update main package entrypoint
|
||||
- 881022a: Fix color of `<code>` and `<strong>` tags inside links
|
||||
|
||||
## 2.0.0
|
||||
|
||||
### Major Changes
|
||||
|
||||
- Published to npm
|
||||
@@ -8,6 +25,7 @@
|
||||
If you're using an old version of Water.css, you **must** see the README or you won't get new changes
|
||||
|
||||
- Added sourcemaps, autoprefixing, and minification
|
||||
|
||||
- Cleaned up the structure of sourcemap files
|
||||
- Compatible with all major browsers including IE
|
||||
|
||||
@@ -16,14 +34,13 @@
|
||||
- Internet Explorer does not support this so the automatic version will always show up as light mode in IE
|
||||
- If you want to force a color scheme, use `light.css`, or `dark.css`
|
||||
|
||||
|
||||
- Added CSS variables to allow for changing theme colors at runtime instead of build time
|
||||
* Added CSS variables to allow for changing theme colors at runtime instead of build time
|
||||
|
||||
IE does not support this either, but nothing should break because we provide fixed fallback colors. It is possible to compile your own theme if you must have custom colors in IE.
|
||||
|
||||
- Added [Code of Conduct](.github/CODE_OF_CONDUCT.md) and [Contribution Guide](.github/CONTRIBUTING.md)
|
||||
- Restructured `.scss` file locations and variable names
|
||||
- Added `height: auto` to `img` elements to keep aspect ratio
|
||||
* Added [Code of Conduct](.github/CODE_OF_CONDUCT.md) and [Contribution Guide](.github/CONTRIBUTING.md)
|
||||
* Restructured `.scss` file locations and variable names
|
||||
* Added `height: auto` to `img` elements to keep aspect ratio
|
||||
|
||||
### Minor Changes
|
||||
|
||||
|
||||
@@ -10,14 +10,64 @@ $$('link[rel="stylesheet"],style').forEach((el) => el.remove())
|
||||
// Remove all inline styles
|
||||
$$('*').forEach((el) => (el.style = ''))
|
||||
|
||||
const linkElm = createElement('link', {
|
||||
rel: 'stylesheet',
|
||||
href: 'https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css'
|
||||
})
|
||||
|
||||
// Add water.css and responsive viewport (if necessary)
|
||||
document.head.append(
|
||||
createElement('link', {
|
||||
rel: 'stylesheet',
|
||||
href: 'https://cdn.jsdelivr.net/npm/water.css@2/out/water.css'
|
||||
}),
|
||||
linkElm,
|
||||
!$$('meta[name="viewport"]').length && createElement('meta', {
|
||||
name: 'viewport',
|
||||
content: 'width=device-width,initial-scale=1.0'
|
||||
})
|
||||
)
|
||||
|
||||
// Theme switching icons
|
||||
const moonSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>'
|
||||
const sunSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>'
|
||||
|
||||
// Theme toggling logic
|
||||
const toggleBtn = createElement('button', {
|
||||
innerHTML: sunSVG,
|
||||
ariaLabel: 'Switch theme',
|
||||
style: `
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
right: 50px;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
line-height: 1;
|
||||
`
|
||||
})
|
||||
|
||||
let theme = 'light'
|
||||
const updateTheme = () => {
|
||||
if (theme === 'dark') {
|
||||
toggleBtn.innerHTML = moonSVG
|
||||
linkElm.href = 'https://cdn.jsdelivr.net/npm/water.css@2/out/dark.min.css'
|
||||
} else {
|
||||
toggleBtn.innerHTML = sunSVG
|
||||
linkElm.href = 'https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css'
|
||||
}
|
||||
}
|
||||
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
theme = theme === 'dark' ? 'light' : 'dark'
|
||||
localStorage.setItem('water.css-theme', theme)
|
||||
updateTheme()
|
||||
})
|
||||
document.body.append(toggleBtn)
|
||||
|
||||
const saved = localStorage.getItem('water.css-theme')
|
||||
if (saved) {
|
||||
theme = saved
|
||||
updateTheme()
|
||||
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
theme = 'dark'
|
||||
updateTheme()
|
||||
} else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
|
||||
theme = 'light'
|
||||
updateTheme()
|
||||
}
|
||||
|
||||
@@ -189,7 +189,7 @@
|
||||
The Waterize bookmarklet can be used to make ugly websites more readable by replacing the styles with Water.css. Just drag this link to your bookmarks bar:
|
||||
</p>
|
||||
<strong>
|
||||
<a href="javascript:void%20function(){const%20a=a=%3Edocument.querySelectorAll(a),b=(a,b)=%3EObject.assign(document.createElement(a),b);a(%22link[rel=\%22stylesheet\%22],style%22).forEach(a=%3Ea.remove()),a(%22*%22).forEach(a=%3Ea.style=%22%22),document.head.append(b(%22link%22,{rel:%22stylesheet%22,href:%22//cdn.jsdelivr.net/npm/water.css%402/out/water.css%22}),!a(%22meta[name=\%22viewport\%22]%22).length%26%26b(%22meta%22,{name:%22viewport%22,content:%22width=device-width,initial-scale=1.0%22}))}();">
|
||||
<a href="javascript:(function()%7B%2F%2F%20Water.css%20Bookmarklet%0A%2F%2F%20---------------------%0A%0Aconst%20%24%24%20%3D%20(selector)%20%3D%3E%20document.querySelectorAll(selector)%0Aconst%20createElement%20%3D%20(tagName%2C%20properties)%20%3D%3E%20Object.assign(document.createElement(tagName)%2C%20properties)%0A%0A%2F%2F%20Remove%20all%20CSS%20stylesheets%2C%20external%20and%20internal%0A%24%24('link%5Brel%3D%22stylesheet%22%5D%2Cstyle').forEach((el)%20%3D%3E%20el.remove())%0A%0A%2F%2F%20Remove%20all%20inline%20styles%0A%24%24('*').forEach((el)%20%3D%3E%20(el.style%20%3D%20''))%0A%0Aconst%20linkElm%20%3D%20createElement('link'%2C%20%7B%0A%20%20rel%3A%20'stylesheet'%2C%0A%20%20href%3A%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwater.css%402%2Fout%2Flight.min.css'%0A%7D)%0A%0A%2F%2F%20Add%20water.css%20and%20responsive%20viewport%20(if%20necessary)%0Adocument.head.append(%0A%20%20linkElm%2C%0A%20%20!%24%24('meta%5Bname%3D%22viewport%22%5D').length%20%26%26%20createElement('meta'%2C%20%7B%0A%20%20%20%20name%3A%20'viewport'%2C%0A%20%20%20%20content%3A%20'width%3Ddevice-width%2Cinitial-scale%3D1.0'%0A%20%20%7D)%0A)%0A%0A%2F%2F%20Theme%20switching%20icons%0Aconst%20moonSVG%20%3D%20'%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-moon%22%3E%3Cpath%20d%3D%22M21%2012.79A9%209%200%201%201%2011.21%203%207%207%200%200%200%2021%2012.79z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E'%0Aconst%20sunSVG%20%3D%20'%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-sun%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22%3E%3C%2Fcircle%3E%3Cline%20x1%3D%2212%22%20y1%3D%221%22%20x2%3D%2212%22%20y2%3D%223%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2212%22%20y1%3D%2221%22%20x2%3D%2212%22%20y2%3D%2223%22%3E%3C%2Fline%3E%3Cline%20x1%3D%224.22%22%20y1%3D%224.22%22%20x2%3D%225.64%22%20y2%3D%225.64%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2218.36%22%20y1%3D%2218.36%22%20x2%3D%2219.78%22%20y2%3D%2219.78%22%3E%3C%2Fline%3E%3Cline%20x1%3D%221%22%20y1%3D%2212%22%20x2%3D%223%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2221%22%20y1%3D%2212%22%20x2%3D%2223%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cline%20x1%3D%224.22%22%20y1%3D%2219.78%22%20x2%3D%225.64%22%20y2%3D%2218.36%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2218.36%22%20y1%3D%225.64%22%20x2%3D%2219.78%22%20y2%3D%224.22%22%3E%3C%2Fline%3E%3C%2Fsvg%3E'%0A%0A%2F%2F%20Theme%20toggling%20logic%0Aconst%20toggleBtn%20%3D%20createElement('button'%2C%20%7B%0A%20%20innerHTML%3A%20sunSVG%2C%0A%20%20ariaLabel%3A%20'Switch%20theme'%2C%0A%20%20style%3A%20%60%0A%20%20%20%20position%3A%20fixed%3B%0A%20%20%20%20top%3A%2050px%3B%0A%20%20%20%20right%3A%2050px%3B%0A%20%20%20%20margin%3A%200%3B%0A%20%20%20%20padding%3A%2010px%3B%0A%20%20%20%20line-height%3A%201%3B%0A%20%20%60%0A%7D)%0A%0Alet%20theme%20%3D%20'light'%0Aconst%20updateTheme%20%3D%20()%20%3D%3E%20%7B%0A%20%20if%20(theme%20%3D%3D%3D%20'dark')%20%7B%0A%20%20%20%20toggleBtn.innerHTML%20%3D%20moonSVG%0A%20%20%20%20linkElm.href%20%3D%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwater.css%402%2Fout%2Fdark.min.css'%0A%20%20%7D%20else%20%7B%0A%20%20%20%20toggleBtn.innerHTML%20%3D%20sunSVG%0A%20%20%20%20linkElm.href%20%3D%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwater.css%402%2Fout%2Flight.min.css'%0A%20%20%7D%0A%7D%0A%0AtoggleBtn.addEventListener('click'%2C%20()%20%3D%3E%20%7B%0A%20%20theme%20%3D%20theme%20%3D%3D%3D%20'dark'%20%3F%20'light'%20%3A%20'dark'%0A%20%20localStorage.setItem('water.css-theme'%2C%20theme)%0A%20%20updateTheme()%0A%7D)%0Adocument.body.append(toggleBtn)%0A%0Aconst%20saved%20%3D%20localStorage.getItem('water.css-theme')%0Aif%20(saved)%20%7B%0A%20%20theme%20%3D%20saved%0A%20%20updateTheme()%0A%7D%20else%20if%20(window.matchMedia('(prefers-color-scheme%3A%20dark)').matches)%20%7B%0A%20%20theme%20%3D%20'dark'%0A%20%20updateTheme()%0A%7D%20else%20if%20(window.matchMedia('(prefers-color-scheme%3A%20light)').matches)%20%7B%0A%20%20theme%20%3D%20'light'%0A%20%20updateTheme()%0A%7D%7D)()%3B">
|
||||
Waterize
|
||||
</a>
|
||||
</strong>
|
||||
@@ -198,7 +198,7 @@
|
||||
<p>This is supposed to be a demo page so we need more elements!</p>
|
||||
|
||||
<h3 id="form-elements">Form elements</h3>
|
||||
<form>
|
||||
<form onsubmit="return false;">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" name="email" id="email" placeholder="john.doe@gmail.com" />
|
||||
|
||||
@@ -358,7 +358,6 @@
|
||||
<footer>
|
||||
<a href="#">Back to top ⬆</a>
|
||||
</footer>
|
||||
|
||||
<script src="script.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
12
gulpfile.js
12
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,8 +54,7 @@ const style = () => {
|
||||
return (
|
||||
gulp
|
||||
.src(paths.styles.src)
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(postcss([postcssImport(), postcssColorModFunction(), postcssInlineSvg()]))
|
||||
.pipe(postcss([postcssImport(), postcssInlineSvg()]))
|
||||
|
||||
.pipe(startDiff())
|
||||
.pipe(postcss([postcssCssVariables({ preserve: true })]))
|
||||
@@ -69,12 +64,9 @@ const style = () => {
|
||||
.pipe(postcss([autoprefixer()]))
|
||||
.pipe(endDiff('autoprefixer'))
|
||||
|
||||
.pipe(sourcemaps.write('.'))
|
||||
.pipe(flatten()) // Put files in out/*, not out/builds/*
|
||||
.pipe(gulp.dest(paths.styles.dest))
|
||||
|
||||
.pipe(filter('**/*.css')) // Remove sourcemaps from the pipeline
|
||||
|
||||
// <minifying>
|
||||
.pipe(startDiff())
|
||||
.pipe(postcss([cssnano({ preset: ['default', { svgo: { floatPrecision: 0 } }] })]))
|
||||
@@ -82,11 +74,9 @@ const style = () => {
|
||||
.pipe(rename({ suffix: '.min' }))
|
||||
// </minifying>
|
||||
|
||||
.pipe(sourcemaps.write('.'))
|
||||
.pipe(gulp.dest(paths.styles.dest))
|
||||
.pipe(gulp.dest(paths.docs.dest + '/water.css'))
|
||||
|
||||
.pipe(filter('**/*.css')) // Remove sourcemaps from the pipeline
|
||||
.pipe(sizereport({ gzip: true, total: false, title: 'SIZE REPORT' }))
|
||||
.pipe(browserSync.stream())
|
||||
)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "water.css",
|
||||
"version": "2.0.0",
|
||||
"version": "2.1.1",
|
||||
"description": "A drop-in collection of CSS styles to make simple websites just a little nicer",
|
||||
"main": "out/water.css",
|
||||
"scripts": {
|
||||
@@ -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",
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
html {
|
||||
scrollbar-color: var(--scrollbar-thumb) var(--background-body);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
|
||||
line-height: 1.4;
|
||||
|
||||
@@ -8,9 +8,10 @@ time {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
samp,
|
||||
pre,
|
||||
kbd,
|
||||
var {
|
||||
font-family: ui-monospace, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
|
||||
}
|
||||
|
||||
@@ -9,11 +9,16 @@ input[type='radio'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input:not([type='checkbox']):not([type='radio']),
|
||||
input,
|
||||
select {
|
||||
display: block;
|
||||
}
|
||||
|
||||
[type='checkbox'],
|
||||
[type='radio'] {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
@@ -30,6 +35,22 @@ select {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='reset'],
|
||||
input[type='button'] {
|
||||
background-color: var(--button-base);
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
input[type='submit']:hover,
|
||||
input[type='reset']:hover,
|
||||
input[type='button']:hover {
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
input[type='color'] {
|
||||
min-height: 2rem;
|
||||
padding: 8px;
|
||||
@@ -61,7 +82,7 @@ input[type='range'],
|
||||
select,
|
||||
button,
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
@@ -95,21 +116,6 @@ select[multiple] {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='reset'],
|
||||
input[type='button'] {
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
input[type='submit']:hover,
|
||||
input[type='reset']:hover,
|
||||
input[type='button']:hover {
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
button:focus,
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -22,7 +22,7 @@ input[type='range']::-webkit-slider-thumb {
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
|
||||
@@ -82,3 +82,8 @@ mark {
|
||||
padding: 0 2px 0 2px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
a > code,
|
||||
a > strong {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@@ -11,9 +11,10 @@
|
||||
--border: #526980;
|
||||
--code: #ffbe85;
|
||||
--animation-duration: 0.1s;
|
||||
--button-hover: #324759;
|
||||
--button-base: #0c151c;
|
||||
--button-hover: #040a0f;
|
||||
--scrollbar-thumb: var(--button-hover);
|
||||
--scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(+8%));
|
||||
--scrollbar-thumb-hover: #3b4d5c;
|
||||
--form-placeholder: #a9a9a9;
|
||||
--form-text: #fff;
|
||||
--variable: #d941e2;
|
||||
|
||||
@@ -11,11 +11,12 @@
|
||||
--border: #dbdbdb;
|
||||
--code: #000;
|
||||
--animation-duration: 0.1s;
|
||||
--button-hover: #ddd;
|
||||
--scrollbar-thumb: color-mod(var(--button-hover) lightness(-3%));
|
||||
--scrollbar-thumb-hover: color-mod(var(--button-hover) lightness(-10%));
|
||||
--button-base: #d0cfcf;
|
||||
--button-hover: #9b9b9b;
|
||||
--scrollbar-thumb: #aaa;
|
||||
--scrollbar-thumb-hover: var(--button-hover);
|
||||
--form-placeholder: #949494;
|
||||
--form-text: #000;
|
||||
--form-text: #1d1d1d;
|
||||
--variable: #39a33c;
|
||||
--highlight: #ff0;
|
||||
--select-arrow: svg-load('./assets/select-arrow.svg', fill: #161f27);
|
||||
|
||||
28
yarn.lock
28
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"
|
||||
|
||||
Reference in New Issue
Block a user