mirror of
https://github.com/kognise/water.css.git
synced 2025-08-29 16:00:14 +02:00
Merge branch 'master' into hotfix/table-color
This commit is contained in:
Kognise
1
.github/CONTRIBUTING.md
vendored
Executable file
1
.github/CONTRIBUTING.md
vendored
Executable file
@@ -0,0 +1 @@
|
|||||||
|
> 💡 TODO: Add contributing guide
|
||||||
38
README.md
38
README.md
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
[](https://watercss.netlify.com/)
|
[](https://watercss.netlify.com/)
|
||||||
|
|
||||||
*A just-add-css collection of styles to make simple websites just a little nicer*
|
_A just-add-css collection of styles to make simple websites just a little nicer_
|
||||||
|
|
||||||
[](https://www.reddit.com/r/webdev/comments/b9m6mv/watercss_a_collection_of_neat_styles_for_simple/)
|
[](https://www.reddit.com/r/webdev/comments/b9m6mv/watercss_a_collection_of_neat_styles_for_simple/)
|
||||||
[](https://www.producthunt.com/posts/water-css)
|
[](https://www.producthunt.com/posts/water-css)
|
||||||
@@ -31,15 +31,35 @@ You probably don't want to use it for a production app or something that has mor
|
|||||||
|
|
||||||
## How?
|
## How?
|
||||||
|
|
||||||
Just stick this in your head:
|
Just stick this in your `<head>`:
|
||||||
|
|
||||||
```html
|
### 🌙 Dark theme:
|
||||||
<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css'>
|
|
||||||
```
|
|
||||||
|
|
||||||
Well, there's a dark theme and a light theme. If you want the light theme, use `light.min.css` instead of `dark.min.css`. See [Theming](#theming) to make your own theme!
|
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css">`
|
||||||
|
|
||||||
No other classes or code is required to make Water.css work. If you want a specific version, you can replace `@latest` with `@version`. See [all the versions](https://github.com/kognise/water.css/releases). You can also get rid of the `.min.css` and replace it with just `.css` if you want an unminified version.
|
### ☀ Light theme:
|
||||||
|
|
||||||
|
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css">`
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
### Other options:
|
||||||
|
|
||||||
|
> ⚡ An interactive version selection will be available soon [here](https://watercss.netlify.com/#select-version)
|
||||||
|
|
||||||
|
#### Enforce a theme and ignore `(prefers-color-scheme)`
|
||||||
|
|
||||||
|
For the main versions, `dark` or `light` is only treated as a _default theme_: if a user has a system-wide preference for either dark or light mode on their device, `water.css` will respect this. If you want to avoid this behavior and enforce dark or light theme, append `.standalone` to the theme prefix, e.g. `dark.standalone.min.css`.
|
||||||
|
|
||||||
|
#### Want to support Internet Explorer?
|
||||||
|
|
||||||
|
Sure, just extend the theme prefix with `-legacy`, e.g. `dark-legacy.min.css`.
|
||||||
|
Be aware that these versions **do not support** [runtime theming](#theming) as they use hard coded values rather than variables. Additionally, if you use a legacy version that is not standalone, we recommend [you add the respective preload tags to improve load times](#).
|
||||||
|
|
||||||
|
#### Unminified builds
|
||||||
|
|
||||||
|
All versions are also available as unminified stylesheets, which can be handy during development.
|
||||||
|
Simply remove the `.min` from the file name.
|
||||||
|
|
||||||
**Oh, you want a demo you say?** Cheeky fellah! [Well, here's your demo.](https://watercss.netlify.com/)
|
**Oh, you want a demo you say?** Cheeky fellah! [Well, here's your demo.](https://watercss.netlify.com/)
|
||||||
|
|
||||||
@@ -51,7 +71,7 @@ Water.css becomes better for everyone when people like you help make it better!
|
|||||||
|
|
||||||
Have any questions or concerns? Did I forget an element or selector? Does something look ugly? Feel free to submit an issue or pull request.
|
Have any questions or concerns? Did I forget an element or selector? Does something look ugly? Feel free to submit an issue or pull request.
|
||||||
|
|
||||||
If you decide to contribute, after downloading a copy of the repository make sure to run `yarn` to install dependencies useful for development. Then, you can just run the following to start a server of the demo with live reloading and automatic Sass compiling.
|
If you decide to contribute, after downloading a copy of the repository make sure to run `yarn` to install dependencies useful for development. Then, you can just run the following to start a server of the demo with live reloading on change.
|
||||||
|
|
||||||
```
|
```
|
||||||
$ yarn dev
|
$ yarn dev
|
||||||
@@ -61,6 +81,8 @@ And make sure to run `yarn build` before pushing any changes! Thanks for taking
|
|||||||
|
|
||||||
## Theming
|
## Theming
|
||||||
|
|
||||||
|
> ⚠ The theming guide is out of date and will be updated shortly! In the mean time, check src/variables-\*.css to see your customization options.
|
||||||
|
|
||||||
Do you want to make your own theme different from the light or dark themes? Since Water.css is built with Sass this is super easy to do. There are two methods. Also, here's a list of variables to set:
|
Do you want to make your own theme different from the light or dark themes? Since Water.css is built with Sass this is super easy to do. There are two methods. Also, here's a list of variables to set:
|
||||||
|
|
||||||
- `$background`
|
- `$background`
|
||||||
|
|||||||
12
dist/dark-legacy.css
vendored
Executable file
12
dist/dark-legacy.css
vendored
Executable file
@@ -0,0 +1,12 @@
|
|||||||
|
|
||||||
|
|
||||||
|
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css');
|
||||||
|
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css') (prefers-color-scheme: light);
|
||||||
|
/**
|
||||||
|
* Dark-themed version for legacy browsers:
|
||||||
|
* Loads the compiled, standalone version of the dark theme,
|
||||||
|
* but overrides it with the compiled, standalone version of the light theme
|
||||||
|
* if a system-wide theme preference is set on the user's device.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*# sourceMappingURL=dark-legacy.css.map */
|
||||||
1
dist/dark-legacy.css.map
vendored
Normal file
1
dist/dark-legacy.css.map
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sources":["dark-legacy.css"],"names":[],"mappings":";;AAOA,uGAAuG;AACvG,sIAC6B;AAT7B;;;;;EAKE","file":"dark-legacy.css","sourcesContent":["/**\n * Dark-themed version for legacy browsers:\n * Loads the compiled, standalone version of the dark theme,\n * but overrides it with the compiled, standalone version of the light theme\n * if a system-wide theme preference is set on the user's device.\n */\n\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css');\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css')\n(prefers-color-scheme: light);\n"]}
|
||||||
2
dist/dark-legacy.min.css
vendored
Executable file
2
dist/dark-legacy.min.css
vendored
Executable file
@@ -0,0 +1,2 @@
|
|||||||
|
@import url("https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css");@import url("https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css") (prefers-color-scheme: light);
|
||||||
|
/*# sourceMappingURL=dark-legacy.min.css.map */
|
||||||
1
dist/dark-legacy.min.css.map
vendored
Normal file
1
dist/dark-legacy.min.css.map
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sources":["dark-legacy.css"],"names":[],"mappings":"AAOA,uGAAuG,CACvG,sIAHE","file":"dark-legacy.min.css","sourcesContent":["/**\n * Dark-themed version for legacy browsers:\n * Loads the compiled, standalone version of the dark theme,\n * but overrides it with the compiled, standalone version of the light theme\n * if a system-wide theme preference is set on the user's device.\n */\n\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css');\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css')\n(prefers-color-scheme: light);\n"]}
|
||||||
533
dist/dark-legacy.standalone.css
vendored
Executable file
533
dist/dark-legacy.standalone.css
vendored
Executable file
@@ -0,0 +1,533 @@
|
|||||||
|
/**
|
||||||
|
* Standalone dark-themed version for legacy browsers.
|
||||||
|
* Includes dark variables and core, compiled at build time so the final output
|
||||||
|
* will only include regular CSS, no variables.
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
line-height: 1.4;
|
||||||
|
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 10px;
|
||||||
|
|
||||||
|
color: #dbdbdb;
|
||||||
|
background: #202b38;
|
||||||
|
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
transition: background-color 0.1s linear,
|
||||||
|
border-color 0.1s linear,
|
||||||
|
color 0.1s linear,
|
||||||
|
box-shadow 0.1s linear,
|
||||||
|
transform 0.1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
transition: background-color 0.1s linear,
|
||||||
|
border-color 0.1s linear,
|
||||||
|
color 0.1s linear,
|
||||||
|
box-shadow 0.1s linear,
|
||||||
|
transform 0.1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
transition: background-color 0.1s linear,
|
||||||
|
border-color 0.1s linear,
|
||||||
|
color 0.1s linear,
|
||||||
|
box-shadow 0.1s linear,
|
||||||
|
transform 0.1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.2em;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
b,
|
||||||
|
strong,
|
||||||
|
th {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
q:before {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
q:after {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote{
|
||||||
|
border-left: 4px solid #0096bfab;
|
||||||
|
margin: 1.5em 0em;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
q{
|
||||||
|
border-left: 4px solid #0096bfab;
|
||||||
|
margin: 1.5em 0em;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote > footer {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote cite {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
address {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href^='mailto']::before {
|
||||||
|
content: '📧 ';
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href^='tel']::before {
|
||||||
|
content: '📞 ';
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href^='sms']::before {
|
||||||
|
content: '💬 ';
|
||||||
|
}
|
||||||
|
|
||||||
|
mark {
|
||||||
|
background-color: #efdb43;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 0px 2px 0px 2px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input[type='submit'],
|
||||||
|
input[type='button'],
|
||||||
|
input[type='checkbox'],
|
||||||
|
input[type='range'],
|
||||||
|
input[type='radio'] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:not([type='checkbox']):not([type='radio']),
|
||||||
|
select {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #161f27;
|
||||||
|
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
|
||||||
|
margin-right: 6px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #161f27;
|
||||||
|
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
|
||||||
|
margin-right: 6px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #161f27;
|
||||||
|
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
|
||||||
|
margin-right: 6px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
button,
|
||||||
|
textarea {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
margin-right: 0;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input[type='submit'],
|
||||||
|
input[type='button'] {
|
||||||
|
padding-right: 30px;
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background: #324759;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='submit']:hover {
|
||||||
|
background: #324759;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='button']:hover {
|
||||||
|
background: #324759;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus {
|
||||||
|
box-shadow: 0 0 0 2px #0096bfab;
|
||||||
|
}
|
||||||
|
|
||||||
|
select:focus {
|
||||||
|
box-shadow: 0 0 0 2px #0096bfab;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:focus {
|
||||||
|
box-shadow: 0 0 0 2px #0096bfab;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea:focus {
|
||||||
|
box-shadow: 0 0 0 2px #0096bfab;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox'],
|
||||||
|
input[type='radio'] {
|
||||||
|
position: relative;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin: 0;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='radio'] {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:checked {
|
||||||
|
background: #324759;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='radio']:checked {
|
||||||
|
background: #324759;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:checked::before,
|
||||||
|
input[type='radio']:checked::before {
|
||||||
|
content: '•';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:checked::before {
|
||||||
|
content: '✔';
|
||||||
|
transform: translateY(-50%) translateY(0.5px) translateX(-6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:active,
|
||||||
|
input[type='radio']:active,
|
||||||
|
input[type='submit']:active,
|
||||||
|
input[type='button']:active,
|
||||||
|
input[type='range']:active,
|
||||||
|
button:active {
|
||||||
|
transform: translateY(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:disabled,
|
||||||
|
select:disabled,
|
||||||
|
button:disabled,
|
||||||
|
textarea:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-input-placeholder {
|
||||||
|
color: #a9a9a9;
|
||||||
|
}
|
||||||
|
|
||||||
|
:-ms-input-placeholder {
|
||||||
|
color: #a9a9a9;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-ms-input-placeholder {
|
||||||
|
color: #a9a9a9;
|
||||||
|
}
|
||||||
|
|
||||||
|
::placeholder {
|
||||||
|
color: #a9a9a9;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range'] {
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 10px 0;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-webkit-slider-runnable-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 9.5px;
|
||||||
|
transition: 0.2s;
|
||||||
|
background: #161f27;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-webkit-slider-thumb {
|
||||||
|
box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #dbdbdb;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus::-webkit-slider-runnable-track {
|
||||||
|
background: #161f27;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-moz-range-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 9.5px;
|
||||||
|
transition: 0.2s;
|
||||||
|
background: #161f27;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-moz-range-thumb {
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #dbdbdb;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 9.5px;
|
||||||
|
background: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
border-width: 16px 0;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-fill-lower {
|
||||||
|
background: #161f27;
|
||||||
|
border: 0.2px solid #010101;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-fill-upper {
|
||||||
|
background: #161f27;
|
||||||
|
border: 0.2px solid #010101;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-thumb {
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
border: 1px solid #000000;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #dbdbdb;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus::-ms-fill-lower {
|
||||||
|
background: #161f27;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus::-ms-fill-upper {
|
||||||
|
background: #161f27;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #41adff;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
background: #161f27;
|
||||||
|
color: #ffbe85;
|
||||||
|
padding: 2.5px 5px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
samp {
|
||||||
|
background: #161f27;
|
||||||
|
color: #ffbe85;
|
||||||
|
padding: 2.5px 5px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
time {
|
||||||
|
background: #161f27;
|
||||||
|
color: #ffbe85;
|
||||||
|
padding: 2.5px 5px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre > code {
|
||||||
|
padding: 10px;
|
||||||
|
display: block;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
var {
|
||||||
|
color: #d941e2;
|
||||||
|
font-style: normal;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
background: #161f27;
|
||||||
|
border: 1px solid #dbdbdb;
|
||||||
|
border-radius: 2px;
|
||||||
|
color: #dbdbdb;
|
||||||
|
padding: 2px 4px 2px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid #dbdbdb;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
padding: 6px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
border-bottom: 1px solid #dbdbdb;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr:nth-child(even) {
|
||||||
|
background-color: #1a242f;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #161f27;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #324759;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: rgb(65, 92, 115);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-selection {
|
||||||
|
background-color: #161f27;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background-color: #161f27;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=dark-legacy.standalone.css.map */
|
||||||
1
dist/dark-legacy.standalone.css.map
vendored
Normal file
1
dist/dark-legacy.standalone.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/dark-legacy.standalone.min.css
vendored
Executable file
2
dist/dark-legacy.standalone.min.css
vendored
Executable file
@@ -0,0 +1,2 @@
|
|||||||
|
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#dbdbdb;background:#202b38;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#fff}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}q:after,q:before{content:none}blockquote,q{border-left:4px solid rgba(0,150,191,.67);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}mark{background-color:#efdb43;border-radius:2px;padding:0 2px;color:#000}button,input[type=button],input[type=checkbox],input[type=radio],input[type=range],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,textarea{color:#fff;background-color:#161f27;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input,select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#324759}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}input[type=checkbox],input[type=radio]{position:relative;width:14px;height:14px;display:inline-block;vertical-align:middle;margin:0 2px 0 0}input[type=radio]{border-radius:50%}input[type=checkbox]:checked,input[type=radio]:checked{background:#324759}input[type=checkbox]:checked:before,input[type=radio]:checked:before{content:"•";display:block;position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%)}input[type=checkbox]:checked:before{content:"✔";transform:translateY(-50%) translateY(.5px) translateX(-6px)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=range]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#a9a9a9}:-ms-input-placeholder{color:#a9a9a9}::-ms-input-placeholder{color:#a9a9a9}::placeholder{color:#a9a9a9}input[type=range]{margin:10px 0;padding:10px 0;background:transparent}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:9.5px;transition:.2s;background:#161f27;border-radius:3px}input[type=range]::-webkit-slider-thumb{box-shadow:0 1px 1px #000,0 0 1px #0d0d0d;height:20px;width:20px;border-radius:50%;background:#dbdbdb;-webkit-appearance:none;margin-top:-7px}input[type=range]:focus::-webkit-slider-runnable-track{background:#161f27}input[type=range]::-moz-range-track{width:100%;height:9.5px;transition:.2s;background:#161f27;border-radius:3px}input[type=range]::-moz-range-thumb{box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d;height:20px;width:20px;border-radius:50%;background:#dbdbdb}input[type=range]::-ms-track{width:100%;height:9.5px;background:transparent;border-color:transparent;border-width:16px 0;color:transparent}input[type=range]::-ms-fill-lower,input[type=range]::-ms-fill-upper{background:#161f27;border:.2px solid #010101;border-radius:3px;box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d}input[type=range]::-ms-thumb{box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d;border:1px solid #000;height:20px;width:20px;border-radius:50%;background:#dbdbdb}input[type=range]:focus::-ms-fill-lower,input[type=range]:focus::-ms-fill-upper{background:#161f27}a{text-decoration:none;color:#41adff}a:hover{text-decoration:underline}code,samp,time{background:#161f27;color:#ffbe85;padding:2.5px 5px;border-radius:6px;font-size:1em}pre>code{padding:10px;display:block;overflow-x:auto}var{color:#d941e2;font-style:normal;font-family:monospace}kbd{background:#161f27;border:1px solid #dbdbdb;border-radius:2px;color:#dbdbdb;padding:2px 4px}img{max-width:100%;height:auto}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#1a242f}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#161f27;border-radius:6px}::-webkit-scrollbar-thumb{background:#324759;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#415c73}::-moz-selection{background-color:#161f27}::selection{background-color:#161f27}
|
||||||
|
/*# sourceMappingURL=dark-legacy.standalone.min.css.map */
|
||||||
1
dist/dark-legacy.standalone.min.css.map
vendored
Normal file
1
dist/dark-legacy.standalone.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
492
dist/dark.css
vendored
492
dist/dark.css
vendored
@@ -0,0 +1,492 @@
|
|||||||
|
<<<<<<< HEAD
|
||||||
|
=======
|
||||||
|
/**
|
||||||
|
* Dark-themed version:
|
||||||
|
* uses dark theme by default but switches to light theme
|
||||||
|
* if a system-wide theme preference is set on the user's device.
|
||||||
|
*
|
||||||
|
* Variables will remain uncompiled so the theme can update dynamically
|
||||||
|
* at runtime in the browser.
|
||||||
|
*/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--background-body: #202b38;
|
||||||
|
--background: #161f27;
|
||||||
|
--background-alt: #1a242f;
|
||||||
|
|
||||||
|
--selection: #161f27;
|
||||||
|
|
||||||
|
--text-main: #dbdbdb;
|
||||||
|
--text-bright: #ffffff;
|
||||||
|
|
||||||
|
--links: #41adff;
|
||||||
|
--focus: #0096bfab;
|
||||||
|
--border: #dbdbdb;
|
||||||
|
--code: #ffbe85;
|
||||||
|
|
||||||
|
--animation-duration: 0.1s;
|
||||||
|
--button-hover: #324759;
|
||||||
|
|
||||||
|
--scrollbar-thumb: var(--button-hover);
|
||||||
|
--scrollbar-thumb-hover: rgb(65, 92, 115);
|
||||||
|
|
||||||
|
--form-placeholder: #a9a9a9;
|
||||||
|
--form-text: #ffffff;
|
||||||
|
|
||||||
|
--variable: #d941e2;
|
||||||
|
--highlight: #efdb43;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
--background-body: #ffffff;
|
||||||
|
--background: #efefef;
|
||||||
|
--background-alt: #f7f7f7;
|
||||||
|
|
||||||
|
--selection: #9e9e9e;
|
||||||
|
|
||||||
|
--text-main: #363636;
|
||||||
|
--text-bright: #000000;
|
||||||
|
|
||||||
|
--links: #0076d1;
|
||||||
|
--focus: #0096bfab;
|
||||||
|
--border: #dbdbdb;
|
||||||
|
--code: #000000;
|
||||||
|
|
||||||
|
--animation-duration: 0.1s;
|
||||||
|
--button-hover: #dddddd;
|
||||||
|
|
||||||
|
--scrollbar-thumb: rgb(44, 63, 79);
|
||||||
|
--scrollbar-thumb-hover: rgb(32, 45, 56);
|
||||||
|
|
||||||
|
--form-placeholder: #949494;
|
||||||
|
--form-text: #000000;
|
||||||
|
|
||||||
|
--variable: #39a33c;
|
||||||
|
--highlight: #ffff00;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
line-height: 1.4;
|
||||||
|
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 10px;
|
||||||
|
|
||||||
|
color: var(--text-main);
|
||||||
|
background: var(--background-body);
|
||||||
|
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, input, textarea {
|
||||||
|
transition: background-color var(--animation-duration) linear,
|
||||||
|
border-color var(--animation-duration) linear,
|
||||||
|
color var(--animation-duration) linear,
|
||||||
|
box-shadow var(--animation-duration) linear,
|
||||||
|
transform var(--animation-duration) ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.2em;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
strong {
|
||||||
|
color: var(--text-bright);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
b,
|
||||||
|
strong,
|
||||||
|
th {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
q:before {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
q:after {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote , q{
|
||||||
|
border-left: 4px solid var(--focus);
|
||||||
|
margin: 1.5em 0em;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote > footer {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote cite {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
address {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href^='mailto']::before {
|
||||||
|
content: '📧 ';
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href^='tel']::before {
|
||||||
|
content: '📞 ';
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href^='sms']::before {
|
||||||
|
content: '💬 ';
|
||||||
|
}
|
||||||
|
|
||||||
|
mark {
|
||||||
|
background-color: var(--highlight);
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 0px 2px 0px 2px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input[type='submit'],
|
||||||
|
input[type='button'],
|
||||||
|
input[type='checkbox'],
|
||||||
|
input[type='range'],
|
||||||
|
input[type='radio'] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:not([type='checkbox']):not([type='radio']),
|
||||||
|
select {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
textarea {
|
||||||
|
color: var(--form-text);
|
||||||
|
background-color: var(--background);
|
||||||
|
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
|
||||||
|
margin-right: 6px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
button,
|
||||||
|
textarea {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
margin-right: 0;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input[type='submit'],
|
||||||
|
input[type='button'] {
|
||||||
|
padding-right: 30px;
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover,
|
||||||
|
input[type='submit']:hover,
|
||||||
|
input[type='button']:hover {
|
||||||
|
background: var(--button-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus,
|
||||||
|
select:focus,
|
||||||
|
button:focus,
|
||||||
|
textarea:focus {
|
||||||
|
box-shadow: 0 0 0 2px var(--focus);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox'],
|
||||||
|
input[type='radio'] {
|
||||||
|
position: relative;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin: 0;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='radio'] {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:checked,
|
||||||
|
input[type='radio']:checked {
|
||||||
|
background: var(--button-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:checked::before,
|
||||||
|
input[type='radio']:checked::before {
|
||||||
|
content: '•';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:checked::before {
|
||||||
|
content: '✔';
|
||||||
|
transform: translateY(-50%) translateY(0.5px) translateX(-6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:active,
|
||||||
|
input[type='radio']:active,
|
||||||
|
input[type='submit']:active,
|
||||||
|
input[type='button']:active,
|
||||||
|
input[type='range']:active,
|
||||||
|
button:active {
|
||||||
|
transform: translateY(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:disabled,
|
||||||
|
select:disabled,
|
||||||
|
button:disabled,
|
||||||
|
textarea:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-input-placeholder {
|
||||||
|
color: var(--form-placeholder);
|
||||||
|
}
|
||||||
|
|
||||||
|
:-ms-input-placeholder {
|
||||||
|
color: var(--form-placeholder);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-ms-input-placeholder {
|
||||||
|
color: var(--form-placeholder);
|
||||||
|
}
|
||||||
|
|
||||||
|
::placeholder {
|
||||||
|
color: var(--form-placeholder);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range'] {
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 10px 0;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-webkit-slider-runnable-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 9.5px;
|
||||||
|
transition: 0.2s;
|
||||||
|
background: var(--background);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-webkit-slider-thumb {
|
||||||
|
box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--border);
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus::-webkit-slider-runnable-track {
|
||||||
|
background: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-moz-range-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 9.5px;
|
||||||
|
transition: 0.2s;
|
||||||
|
background: var(--background);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-moz-range-thumb {
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 9.5px;
|
||||||
|
background: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
border-width: 16px 0;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-fill-lower {
|
||||||
|
background: var(--background);
|
||||||
|
border: 0.2px solid #010101;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-fill-upper {
|
||||||
|
background: var(--background);
|
||||||
|
border: 0.2px solid #010101;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-thumb {
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
border: 1px solid #000000;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus::-ms-fill-lower {
|
||||||
|
background: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus::-ms-fill-upper {
|
||||||
|
background: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--links);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
code, samp, time {
|
||||||
|
background: var(--background);
|
||||||
|
color: var(--code);
|
||||||
|
padding: 2.5px 5px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre > code {
|
||||||
|
padding: 10px;
|
||||||
|
display: block;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
var {
|
||||||
|
color: var(--variable);
|
||||||
|
font-style: normal;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
background: var(--background);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 2px;
|
||||||
|
color: var(--text-main);
|
||||||
|
padding: 2px 4px 2px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
padding: 6px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr:nth-child(even) {
|
||||||
|
background-color: var(--background-alt);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: var(--background);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--scrollbar-thumb);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--scrollbar-thumb-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-selection {
|
||||||
|
background-color: var(--selection);
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background-color: var(--selection);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=dark.css.map */
|
||||||
|
>>>>>>> master
|
||||||
|
|||||||
4
dist/dark.css.map
vendored
4
dist/dark.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/dark.min.css
vendored
2
dist/dark.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/dark.min.css.map
vendored
2
dist/dark.min.css.map
vendored
File diff suppressed because one or more lines are too long
456
dist/dark.standalone.css
vendored
Executable file
456
dist/dark.standalone.css
vendored
Executable file
@@ -0,0 +1,456 @@
|
|||||||
|
/**
|
||||||
|
* Standalone dark-themed version.
|
||||||
|
* Includes dark variables and core, left as CSS variables
|
||||||
|
* so the theming can be adjusted at runtime.
|
||||||
|
*/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--background-body: #202b38;
|
||||||
|
--background: #161f27;
|
||||||
|
--background-alt: #1a242f;
|
||||||
|
|
||||||
|
--selection: #161f27;
|
||||||
|
|
||||||
|
--text-main: #dbdbdb;
|
||||||
|
--text-bright: #ffffff;
|
||||||
|
|
||||||
|
--links: #41adff;
|
||||||
|
--focus: #0096bfab;
|
||||||
|
--border: #dbdbdb;
|
||||||
|
--code: #ffbe85;
|
||||||
|
|
||||||
|
--animation-duration: 0.1s;
|
||||||
|
--button-hover: #324759;
|
||||||
|
|
||||||
|
--scrollbar-thumb: var(--button-hover);
|
||||||
|
--scrollbar-thumb-hover: rgb(65, 92, 115);
|
||||||
|
|
||||||
|
--form-placeholder: #a9a9a9;
|
||||||
|
--form-text: #ffffff;
|
||||||
|
|
||||||
|
--variable: #d941e2;
|
||||||
|
--highlight: #efdb43;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
line-height: 1.4;
|
||||||
|
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 10px;
|
||||||
|
|
||||||
|
color: var(--text-main);
|
||||||
|
background: var(--background-body);
|
||||||
|
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, input, textarea {
|
||||||
|
transition: background-color var(--animation-duration) linear,
|
||||||
|
border-color var(--animation-duration) linear,
|
||||||
|
color var(--animation-duration) linear,
|
||||||
|
box-shadow var(--animation-duration) linear,
|
||||||
|
transform var(--animation-duration) ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.2em;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
strong {
|
||||||
|
color: var(--text-bright);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
b,
|
||||||
|
strong,
|
||||||
|
th {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
q:before {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
q:after {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote , q{
|
||||||
|
border-left: 4px solid var(--focus);
|
||||||
|
margin: 1.5em 0em;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote > footer {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote cite {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
address {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href^='mailto']::before {
|
||||||
|
content: '📧 ';
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href^='tel']::before {
|
||||||
|
content: '📞 ';
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href^='sms']::before {
|
||||||
|
content: '💬 ';
|
||||||
|
}
|
||||||
|
|
||||||
|
mark {
|
||||||
|
background-color: var(--highlight);
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 0px 2px 0px 2px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input[type='submit'],
|
||||||
|
input[type='button'],
|
||||||
|
input[type='checkbox'],
|
||||||
|
input[type='range'],
|
||||||
|
input[type='radio'] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:not([type='checkbox']):not([type='radio']),
|
||||||
|
select {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
textarea {
|
||||||
|
color: var(--form-text);
|
||||||
|
background-color: var(--background);
|
||||||
|
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
|
||||||
|
margin-right: 6px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
button,
|
||||||
|
textarea {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
margin-right: 0;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input[type='submit'],
|
||||||
|
input[type='button'] {
|
||||||
|
padding-right: 30px;
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover,
|
||||||
|
input[type='submit']:hover,
|
||||||
|
input[type='button']:hover {
|
||||||
|
background: var(--button-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus,
|
||||||
|
select:focus,
|
||||||
|
button:focus,
|
||||||
|
textarea:focus {
|
||||||
|
box-shadow: 0 0 0 2px var(--focus);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox'],
|
||||||
|
input[type='radio'] {
|
||||||
|
position: relative;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin: 0;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='radio'] {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:checked,
|
||||||
|
input[type='radio']:checked {
|
||||||
|
background: var(--button-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:checked::before,
|
||||||
|
input[type='radio']:checked::before {
|
||||||
|
content: '•';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:checked::before {
|
||||||
|
content: '✔';
|
||||||
|
transform: translateY(-50%) translateY(0.5px) translateX(-6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:active,
|
||||||
|
input[type='radio']:active,
|
||||||
|
input[type='submit']:active,
|
||||||
|
input[type='button']:active,
|
||||||
|
input[type='range']:active,
|
||||||
|
button:active {
|
||||||
|
transform: translateY(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:disabled,
|
||||||
|
select:disabled,
|
||||||
|
button:disabled,
|
||||||
|
textarea:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-input-placeholder {
|
||||||
|
color: var(--form-placeholder);
|
||||||
|
}
|
||||||
|
|
||||||
|
:-ms-input-placeholder {
|
||||||
|
color: var(--form-placeholder);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-ms-input-placeholder {
|
||||||
|
color: var(--form-placeholder);
|
||||||
|
}
|
||||||
|
|
||||||
|
::placeholder {
|
||||||
|
color: var(--form-placeholder);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range'] {
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 10px 0;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-webkit-slider-runnable-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 9.5px;
|
||||||
|
transition: 0.2s;
|
||||||
|
background: var(--background);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-webkit-slider-thumb {
|
||||||
|
box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--border);
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus::-webkit-slider-runnable-track {
|
||||||
|
background: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-moz-range-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 9.5px;
|
||||||
|
transition: 0.2s;
|
||||||
|
background: var(--background);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-moz-range-thumb {
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 9.5px;
|
||||||
|
background: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
border-width: 16px 0;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-fill-lower {
|
||||||
|
background: var(--background);
|
||||||
|
border: 0.2px solid #010101;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-fill-upper {
|
||||||
|
background: var(--background);
|
||||||
|
border: 0.2px solid #010101;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-thumb {
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
border: 1px solid #000000;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus::-ms-fill-lower {
|
||||||
|
background: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus::-ms-fill-upper {
|
||||||
|
background: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--links);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
code, samp, time {
|
||||||
|
background: var(--background);
|
||||||
|
color: var(--code);
|
||||||
|
padding: 2.5px 5px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre > code {
|
||||||
|
padding: 10px;
|
||||||
|
display: block;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
var {
|
||||||
|
color: var(--variable);
|
||||||
|
font-style: normal;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
background: var(--background);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 2px;
|
||||||
|
color: var(--text-main);
|
||||||
|
padding: 2px 4px 2px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
padding: 6px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr:nth-child(even) {
|
||||||
|
background-color: var(--background-alt);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: var(--background);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--scrollbar-thumb);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--scrollbar-thumb-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-selection {
|
||||||
|
background-color: var(--selection);
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background-color: var(--selection);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=dark.standalone.css.map */
|
||||||
1
dist/dark.standalone.css.map
vendored
Normal file
1
dist/dark.standalone.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/dark.standalone.min.css
vendored
Executable file
2
dist/dark.standalone.min.css
vendored
Executable file
File diff suppressed because one or more lines are too long
1
dist/dark.standalone.min.css.map
vendored
Normal file
1
dist/dark.standalone.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
12
dist/light-legacy.css
vendored
Executable file
12
dist/light-legacy.css
vendored
Executable file
@@ -0,0 +1,12 @@
|
|||||||
|
|
||||||
|
|
||||||
|
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css');
|
||||||
|
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css') (prefers-color-scheme: dark);
|
||||||
|
/**
|
||||||
|
* Light-themed version for legacy browsers:
|
||||||
|
* Loads the compiled, standalone version of the light theme at runtime,
|
||||||
|
* but overrides it with the compiled, standalone version of the dark theme
|
||||||
|
* if a system-wide theme preference is set on the user's device.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*# sourceMappingURL=light-legacy.css.map */
|
||||||
1
dist/light-legacy.css.map
vendored
Normal file
1
dist/light-legacy.css.map
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sources":["light-legacy.css"],"names":[],"mappings":";;AAOA,wGAAwG;AACxG,oIAC4B;AAT5B;;;;;EAKE","file":"light-legacy.css","sourcesContent":["/**\n * Light-themed version for legacy browsers:\n * Loads the compiled, standalone version of the light theme at runtime,\n * but overrides it with the compiled, standalone version of the dark theme\n * if a system-wide theme preference is set on the user's device.\n */\n\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css');\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css')\n(prefers-color-scheme: dark);\n"]}
|
||||||
2
dist/light-legacy.min.css
vendored
Executable file
2
dist/light-legacy.min.css
vendored
Executable file
@@ -0,0 +1,2 @@
|
|||||||
|
@import url("https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css");@import url("https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css") (prefers-color-scheme: dark);
|
||||||
|
/*# sourceMappingURL=light-legacy.min.css.map */
|
||||||
1
dist/light-legacy.min.css.map
vendored
Normal file
1
dist/light-legacy.min.css.map
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sources":["light-legacy.css"],"names":[],"mappings":"AAOA,wGAAwG,CACxG,oIAHE","file":"light-legacy.min.css","sourcesContent":["/**\n * Light-themed version for legacy browsers:\n * Loads the compiled, standalone version of the light theme at runtime,\n * but overrides it with the compiled, standalone version of the dark theme\n * if a system-wide theme preference is set on the user's device.\n */\n\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css');\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css')\n(prefers-color-scheme: dark);\n"]}
|
||||||
533
dist/light-legacy.standalone.css
vendored
Executable file
533
dist/light-legacy.standalone.css
vendored
Executable file
@@ -0,0 +1,533 @@
|
|||||||
|
/**
|
||||||
|
* Standalone light-themed version for legacy browsers.
|
||||||
|
* Includes light variables and core, compiled at build time so the final output
|
||||||
|
* will only include regular CSS, no variables.
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
line-height: 1.4;
|
||||||
|
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 10px;
|
||||||
|
|
||||||
|
color: #363636;
|
||||||
|
background: #ffffff;
|
||||||
|
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
transition: background-color 0.1s linear,
|
||||||
|
border-color 0.1s linear,
|
||||||
|
color 0.1s linear,
|
||||||
|
box-shadow 0.1s linear,
|
||||||
|
transform 0.1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
transition: background-color 0.1s linear,
|
||||||
|
border-color 0.1s linear,
|
||||||
|
color 0.1s linear,
|
||||||
|
box-shadow 0.1s linear,
|
||||||
|
transform 0.1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
transition: background-color 0.1s linear,
|
||||||
|
border-color 0.1s linear,
|
||||||
|
color 0.1s linear,
|
||||||
|
box-shadow 0.1s linear,
|
||||||
|
transform 0.1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.2em;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
b,
|
||||||
|
strong,
|
||||||
|
th {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
q:before {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
q:after {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote{
|
||||||
|
border-left: 4px solid #0096bfab;
|
||||||
|
margin: 1.5em 0em;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
q{
|
||||||
|
border-left: 4px solid #0096bfab;
|
||||||
|
margin: 1.5em 0em;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote > footer {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote cite {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
address {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href^='mailto']::before {
|
||||||
|
content: '📧 ';
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href^='tel']::before {
|
||||||
|
content: '📞 ';
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href^='sms']::before {
|
||||||
|
content: '💬 ';
|
||||||
|
}
|
||||||
|
|
||||||
|
mark {
|
||||||
|
background-color: #ffff00;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 0px 2px 0px 2px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input[type='submit'],
|
||||||
|
input[type='button'],
|
||||||
|
input[type='checkbox'],
|
||||||
|
input[type='range'],
|
||||||
|
input[type='radio'] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:not([type='checkbox']):not([type='radio']),
|
||||||
|
select {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
color: #000000;
|
||||||
|
background-color: #efefef;
|
||||||
|
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
|
||||||
|
margin-right: 6px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
color: #000000;
|
||||||
|
background-color: #efefef;
|
||||||
|
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
|
||||||
|
margin-right: 6px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
color: #000000;
|
||||||
|
background-color: #efefef;
|
||||||
|
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
|
||||||
|
margin-right: 6px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
button,
|
||||||
|
textarea {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
margin-right: 0;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input[type='submit'],
|
||||||
|
input[type='button'] {
|
||||||
|
padding-right: 30px;
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background: #dddddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='submit']:hover {
|
||||||
|
background: #dddddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='button']:hover {
|
||||||
|
background: #dddddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus {
|
||||||
|
box-shadow: 0 0 0 2px #0096bfab;
|
||||||
|
}
|
||||||
|
|
||||||
|
select:focus {
|
||||||
|
box-shadow: 0 0 0 2px #0096bfab;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:focus {
|
||||||
|
box-shadow: 0 0 0 2px #0096bfab;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea:focus {
|
||||||
|
box-shadow: 0 0 0 2px #0096bfab;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox'],
|
||||||
|
input[type='radio'] {
|
||||||
|
position: relative;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin: 0;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='radio'] {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:checked {
|
||||||
|
background: #dddddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='radio']:checked {
|
||||||
|
background: #dddddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:checked::before,
|
||||||
|
input[type='radio']:checked::before {
|
||||||
|
content: '•';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:checked::before {
|
||||||
|
content: '✔';
|
||||||
|
transform: translateY(-50%) translateY(0.5px) translateX(-6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:active,
|
||||||
|
input[type='radio']:active,
|
||||||
|
input[type='submit']:active,
|
||||||
|
input[type='button']:active,
|
||||||
|
input[type='range']:active,
|
||||||
|
button:active {
|
||||||
|
transform: translateY(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:disabled,
|
||||||
|
select:disabled,
|
||||||
|
button:disabled,
|
||||||
|
textarea:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-input-placeholder {
|
||||||
|
color: #949494;
|
||||||
|
}
|
||||||
|
|
||||||
|
:-ms-input-placeholder {
|
||||||
|
color: #949494;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-ms-input-placeholder {
|
||||||
|
color: #949494;
|
||||||
|
}
|
||||||
|
|
||||||
|
::placeholder {
|
||||||
|
color: #949494;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range'] {
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 10px 0;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-webkit-slider-runnable-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 9.5px;
|
||||||
|
transition: 0.2s;
|
||||||
|
background: #efefef;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-webkit-slider-thumb {
|
||||||
|
box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #dbdbdb;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus::-webkit-slider-runnable-track {
|
||||||
|
background: #efefef;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-moz-range-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 9.5px;
|
||||||
|
transition: 0.2s;
|
||||||
|
background: #efefef;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-moz-range-thumb {
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #dbdbdb;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 9.5px;
|
||||||
|
background: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
border-width: 16px 0;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-fill-lower {
|
||||||
|
background: #efefef;
|
||||||
|
border: 0.2px solid #010101;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-fill-upper {
|
||||||
|
background: #efefef;
|
||||||
|
border: 0.2px solid #010101;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-thumb {
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
border: 1px solid #000000;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #dbdbdb;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus::-ms-fill-lower {
|
||||||
|
background: #efefef;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus::-ms-fill-upper {
|
||||||
|
background: #efefef;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #0076d1;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
background: #efefef;
|
||||||
|
color: #000000;
|
||||||
|
padding: 2.5px 5px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
samp {
|
||||||
|
background: #efefef;
|
||||||
|
color: #000000;
|
||||||
|
padding: 2.5px 5px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
time {
|
||||||
|
background: #efefef;
|
||||||
|
color: #000000;
|
||||||
|
padding: 2.5px 5px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre > code {
|
||||||
|
padding: 10px;
|
||||||
|
display: block;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
var {
|
||||||
|
color: #39a33c;
|
||||||
|
font-style: normal;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
background: #efefef;
|
||||||
|
border: 1px solid #dbdbdb;
|
||||||
|
border-radius: 2px;
|
||||||
|
color: #363636;
|
||||||
|
padding: 2px 4px 2px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid #dbdbdb;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
padding: 6px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
border-bottom: 1px solid #dbdbdb;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr:nth-child(even) {
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #efefef;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: rgb(213, 213, 213);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: rgb(196, 196, 196);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-selection {
|
||||||
|
background-color: #9e9e9e;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background-color: #9e9e9e;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=light-legacy.standalone.css.map */
|
||||||
1
dist/light-legacy.standalone.css.map
vendored
Normal file
1
dist/light-legacy.standalone.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/light-legacy.standalone.min.css
vendored
Executable file
2
dist/light-legacy.standalone.min.css
vendored
Executable file
@@ -0,0 +1,2 @@
|
|||||||
|
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#363636;background:#fff;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#000}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}q:after,q:before{content:none}blockquote,q{border-left:4px solid rgba(0,150,191,.67);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}mark{background-color:#ff0;border-radius:2px;padding:0 2px;color:#000}button,input[type=button],input[type=checkbox],input[type=radio],input[type=range],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,textarea{color:#000;background-color:#efefef;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input,select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#ddd}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}input[type=checkbox],input[type=radio]{position:relative;width:14px;height:14px;display:inline-block;vertical-align:middle;margin:0 2px 0 0}input[type=radio]{border-radius:50%}input[type=checkbox]:checked,input[type=radio]:checked{background:#ddd}input[type=checkbox]:checked:before,input[type=radio]:checked:before{content:"•";display:block;position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%)}input[type=checkbox]:checked:before{content:"✔";transform:translateY(-50%) translateY(.5px) translateX(-6px)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=range]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#949494}:-ms-input-placeholder{color:#949494}::-ms-input-placeholder{color:#949494}::placeholder{color:#949494}input[type=range]{margin:10px 0;padding:10px 0;background:transparent}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:9.5px;transition:.2s;background:#efefef;border-radius:3px}input[type=range]::-webkit-slider-thumb{box-shadow:0 1px 1px #000,0 0 1px #0d0d0d;height:20px;width:20px;border-radius:50%;background:#dbdbdb;-webkit-appearance:none;margin-top:-7px}input[type=range]:focus::-webkit-slider-runnable-track{background:#efefef}input[type=range]::-moz-range-track{width:100%;height:9.5px;transition:.2s;background:#efefef;border-radius:3px}input[type=range]::-moz-range-thumb{box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d;height:20px;width:20px;border-radius:50%;background:#dbdbdb}input[type=range]::-ms-track{width:100%;height:9.5px;background:transparent;border-color:transparent;border-width:16px 0;color:transparent}input[type=range]::-ms-fill-lower,input[type=range]::-ms-fill-upper{background:#efefef;border:.2px solid #010101;border-radius:3px;box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d}input[type=range]::-ms-thumb{box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d;border:1px solid #000;height:20px;width:20px;border-radius:50%;background:#dbdbdb}input[type=range]:focus::-ms-fill-lower,input[type=range]:focus::-ms-fill-upper{background:#efefef}a{text-decoration:none;color:#0076d1}a:hover{text-decoration:underline}code,samp,time{background:#efefef;color:#000;padding:2.5px 5px;border-radius:6px;font-size:1em}pre>code{padding:10px;display:block;overflow-x:auto}var{color:#39a33c;font-style:normal;font-family:monospace}kbd{background:#efefef;border:1px solid #dbdbdb;border-radius:2px;color:#363636;padding:2px 4px}img{max-width:100%;height:auto}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#f7f7f7}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#efefef;border-radius:6px}::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#c4c4c4}::-moz-selection{background-color:#9e9e9e}::selection{background-color:#9e9e9e}
|
||||||
|
/*# sourceMappingURL=light-legacy.standalone.min.css.map */
|
||||||
1
dist/light-legacy.standalone.min.css.map
vendored
Normal file
1
dist/light-legacy.standalone.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
491
dist/light.css
vendored
491
dist/light.css
vendored
@@ -0,0 +1,491 @@
|
|||||||
|
<<<<<<< HEAD
|
||||||
|
=======
|
||||||
|
/**
|
||||||
|
* Light-themed version:
|
||||||
|
* uses light theme by default but switches to dark theme
|
||||||
|
* if a system-wide theme preference is set on the user's device.
|
||||||
|
*
|
||||||
|
* Variables will remain uncompiled so the theme can update dynamically
|
||||||
|
* at runtime in the browser.
|
||||||
|
*/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--background-body: #ffffff;
|
||||||
|
--background: #efefef;
|
||||||
|
--background-alt: #f7f7f7;
|
||||||
|
|
||||||
|
--selection: #9e9e9e;
|
||||||
|
|
||||||
|
--text-main: #363636;
|
||||||
|
--text-bright: #000000;
|
||||||
|
|
||||||
|
--links: #0076d1;
|
||||||
|
--focus: #0096bfab;
|
||||||
|
--border: #dbdbdb;
|
||||||
|
--code: #000000;
|
||||||
|
|
||||||
|
--animation-duration: 0.1s;
|
||||||
|
--button-hover: #dddddd;
|
||||||
|
|
||||||
|
--scrollbar-thumb: rgb(213, 213, 213);
|
||||||
|
--scrollbar-thumb-hover: rgb(196, 196, 196);
|
||||||
|
|
||||||
|
--form-placeholder: #949494;
|
||||||
|
--form-text: #000000;
|
||||||
|
|
||||||
|
--variable: #39a33c;
|
||||||
|
--highlight: #ffff00;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--background-body: #202b38;
|
||||||
|
--background: #161f27;
|
||||||
|
--background-alt: #1a242f;
|
||||||
|
|
||||||
|
--selection: #161f27;
|
||||||
|
|
||||||
|
--text-main: #dbdbdb;
|
||||||
|
--text-bright: #ffffff;
|
||||||
|
|
||||||
|
--links: #41adff;
|
||||||
|
--focus: #0096bfab;
|
||||||
|
--border: #dbdbdb;
|
||||||
|
--code: #ffbe85;
|
||||||
|
|
||||||
|
--animation-duration: 0.1s;
|
||||||
|
--button-hover: #324759;
|
||||||
|
|
||||||
|
--scrollbar-thumb: var(--button-hover);
|
||||||
|
--scrollbar-thumb-hover: rgb(20, 20, 20);
|
||||||
|
|
||||||
|
--form-placeholder: #a9a9a9;
|
||||||
|
--form-text: #ffffff;
|
||||||
|
|
||||||
|
--variable: #d941e2;
|
||||||
|
--highlight: #efdb43;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
line-height: 1.4;
|
||||||
|
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 10px;
|
||||||
|
|
||||||
|
color: var(--text-main);
|
||||||
|
background: var(--background-body);
|
||||||
|
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, input, textarea {
|
||||||
|
transition: background-color var(--animation-duration) linear,
|
||||||
|
border-color var(--animation-duration) linear,
|
||||||
|
color var(--animation-duration) linear,
|
||||||
|
box-shadow var(--animation-duration) linear,
|
||||||
|
transform var(--animation-duration) ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.2em;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
strong {
|
||||||
|
color: var(--text-bright);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
b,
|
||||||
|
strong,
|
||||||
|
th {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
q:before {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
q:after {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote , q{
|
||||||
|
border-left: 4px solid var(--focus);
|
||||||
|
margin: 1.5em 0em;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote > footer {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote cite {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
address {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href^='mailto']::before {
|
||||||
|
content: '📧 ';
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href^='tel']::before {
|
||||||
|
content: '📞 ';
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href^='sms']::before {
|
||||||
|
content: '💬 ';
|
||||||
|
}
|
||||||
|
|
||||||
|
mark {
|
||||||
|
background-color: var(--highlight);
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 0px 2px 0px 2px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input[type='submit'],
|
||||||
|
input[type='button'],
|
||||||
|
input[type='checkbox'],
|
||||||
|
input[type='range'],
|
||||||
|
input[type='radio'] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:not([type='checkbox']):not([type='radio']),
|
||||||
|
select {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
textarea {
|
||||||
|
color: var(--form-text);
|
||||||
|
background-color: var(--background);
|
||||||
|
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
|
||||||
|
margin-right: 6px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
button,
|
||||||
|
textarea {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
margin-right: 0;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input[type='submit'],
|
||||||
|
input[type='button'] {
|
||||||
|
padding-right: 30px;
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover,
|
||||||
|
input[type='submit']:hover,
|
||||||
|
input[type='button']:hover {
|
||||||
|
background: var(--button-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus,
|
||||||
|
select:focus,
|
||||||
|
button:focus,
|
||||||
|
textarea:focus {
|
||||||
|
box-shadow: 0 0 0 2px var(--focus);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox'],
|
||||||
|
input[type='radio'] {
|
||||||
|
position: relative;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin: 0;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='radio'] {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:checked,
|
||||||
|
input[type='radio']:checked {
|
||||||
|
background: var(--button-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:checked::before,
|
||||||
|
input[type='radio']:checked::before {
|
||||||
|
content: '•';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:checked::before {
|
||||||
|
content: '✔';
|
||||||
|
transform: translateY(-50%) translateY(0.5px) translateX(-6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:active,
|
||||||
|
input[type='radio']:active,
|
||||||
|
input[type='submit']:active,
|
||||||
|
input[type='button']:active,
|
||||||
|
input[type='range']:active,
|
||||||
|
button:active {
|
||||||
|
transform: translateY(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:disabled,
|
||||||
|
select:disabled,
|
||||||
|
button:disabled,
|
||||||
|
textarea:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-input-placeholder {
|
||||||
|
color: var(--form-placeholder);
|
||||||
|
}
|
||||||
|
|
||||||
|
:-ms-input-placeholder {
|
||||||
|
color: var(--form-placeholder);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-ms-input-placeholder {
|
||||||
|
color: var(--form-placeholder);
|
||||||
|
}
|
||||||
|
|
||||||
|
::placeholder {
|
||||||
|
color: var(--form-placeholder);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range'] {
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 10px 0;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-webkit-slider-runnable-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 9.5px;
|
||||||
|
transition: 0.2s;
|
||||||
|
background: var(--background);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-webkit-slider-thumb {
|
||||||
|
box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--border);
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus::-webkit-slider-runnable-track {
|
||||||
|
background: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-moz-range-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 9.5px;
|
||||||
|
transition: 0.2s;
|
||||||
|
background: var(--background);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-moz-range-thumb {
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 9.5px;
|
||||||
|
background: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
border-width: 16px 0;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-fill-lower {
|
||||||
|
background: var(--background);
|
||||||
|
border: 0.2px solid #010101;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-fill-upper {
|
||||||
|
background: var(--background);
|
||||||
|
border: 0.2px solid #010101;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-thumb {
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
border: 1px solid #000000;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus::-ms-fill-lower {
|
||||||
|
background: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus::-ms-fill-upper {
|
||||||
|
background: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--links);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
code, samp, time {
|
||||||
|
background: var(--background);
|
||||||
|
color: var(--code);
|
||||||
|
padding: 2.5px 5px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre > code {
|
||||||
|
padding: 10px;
|
||||||
|
display: block;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
var {
|
||||||
|
color: var(--variable);
|
||||||
|
font-style: normal;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
background: var(--background);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 2px;
|
||||||
|
color: var(--text-main);
|
||||||
|
padding: 2px 4px 2px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
padding: 6px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr:nth-child(even) {
|
||||||
|
background-color: var(--background-alt);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: var(--background);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--scrollbar-thumb);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--scrollbar-thumb-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-selection {
|
||||||
|
background-color: var(--selection);
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background-color: var(--selection);
|
||||||
|
}
|
||||||
|
/*# sourceMappingURL=light.css.map */
|
||||||
|
>>>>>>> master
|
||||||
|
|||||||
4
dist/light.css.map
vendored
4
dist/light.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/light.min.css
vendored
2
dist/light.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/light.min.css.map
vendored
2
dist/light.min.css.map
vendored
File diff suppressed because one or more lines are too long
456
dist/light.standalone.css
vendored
Executable file
456
dist/light.standalone.css
vendored
Executable file
@@ -0,0 +1,456 @@
|
|||||||
|
/**
|
||||||
|
* Standalone light-themed version.
|
||||||
|
* Includes light variables and core, left as CSS variables
|
||||||
|
* so the theming can be adjusted at runtime.
|
||||||
|
*/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--background-body: #ffffff;
|
||||||
|
--background: #efefef;
|
||||||
|
--background-alt: #f7f7f7;
|
||||||
|
|
||||||
|
--selection: #9e9e9e;
|
||||||
|
|
||||||
|
--text-main: #363636;
|
||||||
|
--text-bright: #000000;
|
||||||
|
|
||||||
|
--links: #0076d1;
|
||||||
|
--focus: #0096bfab;
|
||||||
|
--border: #dbdbdb;
|
||||||
|
--code: #000000;
|
||||||
|
|
||||||
|
--animation-duration: 0.1s;
|
||||||
|
--button-hover: #dddddd;
|
||||||
|
|
||||||
|
--scrollbar-thumb: rgb(213, 213, 213);
|
||||||
|
--scrollbar-thumb-hover: rgb(196, 196, 196);
|
||||||
|
|
||||||
|
--form-placeholder: #949494;
|
||||||
|
--form-text: #000000;
|
||||||
|
|
||||||
|
--variable: #39a33c;
|
||||||
|
--highlight: #ffff00;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
line-height: 1.4;
|
||||||
|
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 10px;
|
||||||
|
|
||||||
|
color: var(--text-main);
|
||||||
|
background: var(--background-body);
|
||||||
|
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, input, textarea {
|
||||||
|
transition: background-color var(--animation-duration) linear,
|
||||||
|
border-color var(--animation-duration) linear,
|
||||||
|
color var(--animation-duration) linear,
|
||||||
|
box-shadow var(--animation-duration) linear,
|
||||||
|
transform var(--animation-duration) ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.2em;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
strong {
|
||||||
|
color: var(--text-bright);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
b,
|
||||||
|
strong,
|
||||||
|
th {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
q:before {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
q:after {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote , q{
|
||||||
|
border-left: 4px solid var(--focus);
|
||||||
|
margin: 1.5em 0em;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote > footer {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote cite {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
address {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href^='mailto']::before {
|
||||||
|
content: '📧 ';
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href^='tel']::before {
|
||||||
|
content: '📞 ';
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href^='sms']::before {
|
||||||
|
content: '💬 ';
|
||||||
|
}
|
||||||
|
|
||||||
|
mark {
|
||||||
|
background-color: var(--highlight);
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 0px 2px 0px 2px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input[type='submit'],
|
||||||
|
input[type='button'],
|
||||||
|
input[type='checkbox'],
|
||||||
|
input[type='range'],
|
||||||
|
input[type='radio'] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:not([type='checkbox']):not([type='radio']),
|
||||||
|
select {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
textarea {
|
||||||
|
color: var(--form-text);
|
||||||
|
background-color: var(--background);
|
||||||
|
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
|
||||||
|
margin-right: 6px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
button,
|
||||||
|
textarea {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
margin-right: 0;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input[type='submit'],
|
||||||
|
input[type='button'] {
|
||||||
|
padding-right: 30px;
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover,
|
||||||
|
input[type='submit']:hover,
|
||||||
|
input[type='button']:hover {
|
||||||
|
background: var(--button-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus,
|
||||||
|
select:focus,
|
||||||
|
button:focus,
|
||||||
|
textarea:focus {
|
||||||
|
box-shadow: 0 0 0 2px var(--focus);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox'],
|
||||||
|
input[type='radio'] {
|
||||||
|
position: relative;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin: 0;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='radio'] {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:checked,
|
||||||
|
input[type='radio']:checked {
|
||||||
|
background: var(--button-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:checked::before,
|
||||||
|
input[type='radio']:checked::before {
|
||||||
|
content: '•';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:checked::before {
|
||||||
|
content: '✔';
|
||||||
|
transform: translateY(-50%) translateY(0.5px) translateX(-6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:active,
|
||||||
|
input[type='radio']:active,
|
||||||
|
input[type='submit']:active,
|
||||||
|
input[type='button']:active,
|
||||||
|
input[type='range']:active,
|
||||||
|
button:active {
|
||||||
|
transform: translateY(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:disabled,
|
||||||
|
select:disabled,
|
||||||
|
button:disabled,
|
||||||
|
textarea:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-input-placeholder {
|
||||||
|
color: var(--form-placeholder);
|
||||||
|
}
|
||||||
|
|
||||||
|
:-ms-input-placeholder {
|
||||||
|
color: var(--form-placeholder);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-ms-input-placeholder {
|
||||||
|
color: var(--form-placeholder);
|
||||||
|
}
|
||||||
|
|
||||||
|
::placeholder {
|
||||||
|
color: var(--form-placeholder);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range'] {
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 10px 0;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-webkit-slider-runnable-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 9.5px;
|
||||||
|
transition: 0.2s;
|
||||||
|
background: var(--background);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-webkit-slider-thumb {
|
||||||
|
box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--border);
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus::-webkit-slider-runnable-track {
|
||||||
|
background: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-moz-range-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 9.5px;
|
||||||
|
transition: 0.2s;
|
||||||
|
background: var(--background);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-moz-range-thumb {
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 9.5px;
|
||||||
|
background: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
border-width: 16px 0;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-fill-lower {
|
||||||
|
background: var(--background);
|
||||||
|
border: 0.2px solid #010101;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-fill-upper {
|
||||||
|
background: var(--background);
|
||||||
|
border: 0.2px solid #010101;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-thumb {
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
border: 1px solid #000000;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus::-ms-fill-lower {
|
||||||
|
background: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus::-ms-fill-upper {
|
||||||
|
background: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--links);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
code, samp, time {
|
||||||
|
background: var(--background);
|
||||||
|
color: var(--code);
|
||||||
|
padding: 2.5px 5px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre > code {
|
||||||
|
padding: 10px;
|
||||||
|
display: block;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
var {
|
||||||
|
color: var(--variable);
|
||||||
|
font-style: normal;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
background: var(--background);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 2px;
|
||||||
|
color: var(--text-main);
|
||||||
|
padding: 2px 4px 2px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
padding: 6px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr:nth-child(even) {
|
||||||
|
background-color: var(--background-alt);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: var(--background);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--scrollbar-thumb);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--scrollbar-thumb-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-selection {
|
||||||
|
background-color: var(--selection);
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background-color: var(--selection);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=light.standalone.css.map */
|
||||||
1
dist/light.standalone.css.map
vendored
Normal file
1
dist/light.standalone.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/light.standalone.min.css
vendored
Executable file
2
dist/light.standalone.min.css
vendored
Executable file
File diff suppressed because one or more lines are too long
1
dist/light.standalone.min.css.map
vendored
Normal file
1
dist/light.standalone.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
99
gulpfile.js
99
gulpfile.js
@@ -1,65 +1,93 @@
|
|||||||
const gulp = require('gulp')
|
const gulp = require('gulp')
|
||||||
const sass = require('gulp-sass')
|
|
||||||
const postcss = require('gulp-postcss')
|
const postcss = require('gulp-postcss')
|
||||||
const autoprefixer = require('autoprefixer')
|
const autoprefixer = require('autoprefixer')
|
||||||
const cssnano = require('cssnano')
|
const cssnano = require('cssnano')
|
||||||
const sourcemaps = require('gulp-sourcemaps')
|
const sourcemaps = require('gulp-sourcemaps')
|
||||||
const bytediff = require('gulp-bytediff')
|
const bytediff = require('gulp-bytediff')
|
||||||
const browserSync = require('browser-sync').create()
|
const browserSync = require('browser-sync').create()
|
||||||
const chalk = require('chalk');
|
const chalk = require('chalk')
|
||||||
const rename = require('gulp-rename');
|
const rename = require('gulp-rename')
|
||||||
const filter = require('gulp-filter');
|
const filter = require('gulp-filter')
|
||||||
|
const flatten = require('gulp-flatten')
|
||||||
|
const sizereport = require('gulp-sizereport')
|
||||||
|
const postcssCssVariables = require('postcss-css-variables')
|
||||||
|
const postcssImport = require('postcss-import')
|
||||||
|
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 = {
|
const paths = {
|
||||||
styles: {
|
srcDir: 'src/*',
|
||||||
src: 'src/**/*.scss',
|
docsDir: '*',
|
||||||
dest: 'dist'
|
styles: { src: 'src/builds/*.css', dest: 'dist' },
|
||||||
},
|
|
||||||
html: {
|
|
||||||
src: 'index.html'
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// https://stackoverflow.com/a/20732091
|
// https://stackoverflow.com/a/20732091
|
||||||
function humanFileSize(size) {
|
function humanFileSize(size) {
|
||||||
var i = Math.floor( Math.log(size) / Math.log(1024) );
|
var i = Math.floor(Math.log(size) / Math.log(1024))
|
||||||
return ( size / Math.pow(1024, i) ).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
|
return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]
|
||||||
};
|
}
|
||||||
|
|
||||||
function formatByteMessage(source, data) {
|
function formatByteMessage(source, data) {
|
||||||
const change = (data.savings > 0 ? 'saved' : 'gained')
|
|
||||||
const prettySavings = humanFileSize(Math.abs(data.savings))
|
|
||||||
const prettyStartSize = humanFileSize(data.startSize)
|
const prettyStartSize = humanFileSize(data.startSize)
|
||||||
|
let message = ''
|
||||||
|
|
||||||
|
if (data.startSize !== data.endSize) {
|
||||||
|
const change = data.savings > 0 ? 'saved' : 'gained'
|
||||||
|
const prettySavings = humanFileSize(Math.abs(data.savings))
|
||||||
let prettyEndSize = humanFileSize(data.endSize)
|
let prettyEndSize = humanFileSize(data.endSize)
|
||||||
|
|
||||||
if (data.endSize > data.startSize) {
|
if (data.endSize > data.startSize) prettyEndSize = chalk.yellow(prettyEndSize)
|
||||||
prettyEndSize = chalk.yellow(prettyEndSize)
|
if (data.endSize < data.startSize) prettyEndSize = chalk.green(prettyEndSize)
|
||||||
}
|
|
||||||
|
|
||||||
if (data.endSize < data.startSize) {
|
message = chalk`${change} ${prettySavings} (${prettyStartSize} -> {bold ${prettyEndSize}})`
|
||||||
prettyEndSize = chalk.green(prettyEndSize)
|
} else message = chalk`kept original filesize. ({bold ${prettyStartSize}})`
|
||||||
}
|
|
||||||
|
|
||||||
return `${chalk.cyan(source.padStart(12, ' '))}: ${data.fileName} ${change} ${prettySavings} (${prettyStartSize} -> ${prettyEndSize})`
|
return chalk`{cyan ${source.padStart(12, ' ')}}: {bold ${data.fileName}} ${message}`
|
||||||
}
|
}
|
||||||
|
|
||||||
function style() {
|
function style() {
|
||||||
|
const isLegacy = path => /legacy/.test(path)
|
||||||
|
|
||||||
|
const excludeModern = filter(file => isLegacy(file.path), { restore: true })
|
||||||
|
const excludeLegacy = filter(file => !isLegacy(file.path), { restore: true })
|
||||||
|
|
||||||
return (
|
return (
|
||||||
gulp.src(paths.styles.src)
|
gulp
|
||||||
|
.src(paths.styles.src)
|
||||||
// Add sourcemaps
|
// Add sourcemaps
|
||||||
.pipe(sourcemaps.init())
|
.pipe(sourcemaps.init())
|
||||||
// Create a human readable sass file
|
// Resolve imports and calculated colors
|
||||||
.pipe(sass({outputStyle: 'expanded'}))
|
.pipe(postcss([postcssImport(), postcssColorModFunction()]))
|
||||||
// Catch any sass errors
|
|
||||||
.on('error', sass.logError)
|
// * Process legacy builds *
|
||||||
|
.pipe(excludeModern)
|
||||||
|
// Inline variable values so CSS works in legacy browsers
|
||||||
|
.pipe(postcss([postcssCssVariables()]))
|
||||||
// Calculate size before autoprefixing
|
// Calculate size before autoprefixing
|
||||||
.pipe(bytediff.start())
|
.pipe(bytediff.start())
|
||||||
// autoprefix
|
// autoprefix
|
||||||
.pipe(postcss([autoprefixer()]))
|
.pipe(postcss([autoprefixer()]))
|
||||||
// Write the amount gained by autoprefixing
|
// Write the amount gained by autoprefixing
|
||||||
.pipe(bytediff.stop((data) => formatByteMessage('autoprefixer', data)))
|
.pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
|
||||||
|
.pipe(excludeModern.restore)
|
||||||
|
|
||||||
|
// * Process modern builds *
|
||||||
|
.pipe(excludeLegacy)
|
||||||
|
// Calculate size before autoprefixing
|
||||||
|
.pipe(bytediff.start())
|
||||||
|
// autoprefix modern builds
|
||||||
|
// TODO: Use separate browserslist to only apply prefixes needed in *modern* browsers
|
||||||
|
.pipe(postcss([autoprefixer()]))
|
||||||
|
// Write the amount gained by autoprefixing
|
||||||
|
.pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
|
||||||
|
.pipe(excludeLegacy.restore)
|
||||||
|
|
||||||
// Write the sourcemaps after making pre-minified changes
|
// Write the sourcemaps after making pre-minified changes
|
||||||
.pipe(sourcemaps.write('.'))
|
.pipe(sourcemaps.write('.'))
|
||||||
|
// Flatten output so files end up in dist/*, not dist/builds/*
|
||||||
|
.pipe(flatten())
|
||||||
// Write pre-minified styles
|
// Write pre-minified styles
|
||||||
.pipe(gulp.dest(paths.styles.dest))
|
.pipe(gulp.dest(paths.styles.dest))
|
||||||
// Remove sourcemaps from the pipeline, only keep css
|
// Remove sourcemaps from the pipeline, only keep css
|
||||||
@@ -69,22 +97,19 @@ function style() {
|
|||||||
// Minify using cssnano
|
// Minify using cssnano
|
||||||
.pipe(postcss([cssnano()]))
|
.pipe(postcss([cssnano()]))
|
||||||
// Write the amount saved by minifying
|
// Write the amount saved by minifying
|
||||||
.pipe(bytediff.stop((data) => formatByteMessage('cssnano', data)))
|
.pipe(bytediff.stop(data => formatByteMessage('cssnano', data)))
|
||||||
// Rename the files have the .min suffix
|
// Rename the files have the .min suffix
|
||||||
.pipe(rename({ suffix: '.min' }))
|
.pipe(rename({ suffix: '.min' }))
|
||||||
// Write the sourcemaps after making all changes
|
// Write the sourcemaps after making all changes
|
||||||
.pipe(sourcemaps.write('.'))
|
.pipe(sourcemaps.write('.'))
|
||||||
// Write the minified files
|
// Write the minified files
|
||||||
.pipe(gulp.dest(paths.styles.dest))
|
.pipe(gulp.dest(paths.styles.dest))
|
||||||
|
.pipe(sizereport({ gzip: true, total: false, title: 'SIZE REPORT' }))
|
||||||
// Stream any changes to browserSync
|
// Stream any changes to browserSync
|
||||||
.pipe(browserSync.stream())
|
.pipe(browserSync.stream())
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function reload() {
|
|
||||||
browserSync.reload()
|
|
||||||
}
|
|
||||||
|
|
||||||
function watch() {
|
function watch() {
|
||||||
style()
|
style()
|
||||||
|
|
||||||
@@ -92,11 +117,11 @@ function watch() {
|
|||||||
server: {
|
server: {
|
||||||
baseDir: './',
|
baseDir: './',
|
||||||
},
|
},
|
||||||
startPath: 'index.html'
|
startPath: 'index.html',
|
||||||
})
|
})
|
||||||
|
|
||||||
gulp.watch(paths.styles.src, style)
|
gulp.watch(paths.srcDir, style)
|
||||||
gulp.watch(paths.html.src, reload)
|
gulp.watch([paths.srcDir, paths.docsDir], browserSync.reload)
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports.style = style
|
module.exports.style = style
|
||||||
|
|||||||
1
icon-dark.svg
Executable file
1
icon-dark.svg
Executable file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 445 445" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><rect id="Icon-Dark" serif:id="Icon Dark" x="0" y="0" width="444.1" height="444.1" style="fill:none;"/><path d="M444.1,222.05c0,-122.553 -99.497,-222.05 -222.05,-222.05c-122.553,0 -222.05,99.497 -222.05,222.05c0,122.553 99.497,222.05 222.05,222.05c122.553,0 222.05,-99.497 222.05,-222.05Z" style="fill:#202b38;"/><clipPath id="_clip1"><path d="M444.1,222.05c0,-122.553 -99.497,-222.05 -222.05,-222.05c-122.553,0 -222.05,99.497 -222.05,222.05c0,122.553 99.497,222.05 222.05,222.05c122.553,0 222.05,-99.497 222.05,-222.05Z"/></clipPath><g clip-path="url(#_clip1)"><path d="M911.401,444.1l-952.033,0l-1013.41,0c-60.994,-158.567 -78.355,-238.341 -52.081,-239.322c55.598,8.234 81.973,34.191 139.482,112.049c29.194,35.605 69.345,20.109 94.465,-2.512c17.584,-16.734 27.073,-50.366 48.844,-49.975c24.561,-0.391 43.233,18.645 54.02,38.532c21.212,25.119 58.675,26.667 78.568,27.352c28.888,-4.186 35.586,-8.373 46.89,-15.909c20.235,-18.142 25.957,-28.887 36.525,-62.596c19.03,-45.672 40.059,-54.509 68.508,-57.09c17.52,-0.234 67.036,-6.54 92.613,58.359c27.593,50.861 80.763,49.186 123.466,44.999c42.704,-7.117 48.121,-21.878 79.52,-56.417c21.98,-33.912 66.612,-40.42 88.173,-36.792c0.085,0.016 0.171,0.031 0.257,0.046c0.23,-0.021 0.464,-0.037 0.702,-0.046c6.914,1.024 13.376,2.322 19.492,3.971c14.176,3.459 31.042,9.841 47.556,24.318c21.383,17.24 42.766,43.593 72.434,83.76c29.194,35.605 69.345,20.109 94.465,-2.512c17.584,-16.734 27.073,-50.366 48.844,-49.975c24.561,-0.391 43.233,18.645 54.02,38.532c21.212,25.119 58.676,26.667 78.568,27.352c28.888,-4.186 35.586,-8.373 46.89,-15.909c20.235,-18.142 25.957,-28.887 36.525,-62.596c19.03,-45.672 40.059,-54.509 68.508,-57.09c17.52,-0.234 67.036,-6.54 92.613,58.359c27.593,50.861 80.763,49.186 123.466,44.999c42.704,-7.117 48.121,-21.878 79.521,-56.417c21.979,-33.912 66.611,-40.42 88.172,-36.792c0.031,0.006 0.062,0.012 0.094,0.017c0.11,-0.007 0.22,-0.012 0.332,-0.017c4.97,0.737 9.708,1.614 14.244,2.667c16.717,3.443 38.298,10.313 58.806,30.72c19.45,17.188 39.536,42.249 66.432,78.662c29.194,35.605 69.346,20.109 94.466,-2.512c17.583,-16.734 27.073,-50.366 48.843,-49.975c24.561,-0.391 43.233,18.645 54.02,38.532c21.212,25.119 58.676,26.667 78.568,27.352c28.888,-4.186 35.587,-8.373 46.89,-15.909c20.236,-18.142 25.957,-28.887 36.525,-62.596c19.03,-45.672 40.059,-54.509 68.508,-57.09c17.52,-0.234 67.037,-6.54 92.613,58.359c27.594,50.861 80.763,49.186 123.467,44.999c42.703,-7.117 48.12,-21.878 79.52,-56.417c21.979,-33.912 66.611,-40.42 88.172,-36.792c21.617,3.861 62.105,8.005 93.951,59.562c7.404,11.987 14.341,26.536 20.465,44.241l0,135.519l-951.5,0Z" style="fill:#41adff;fill-rule:nonzero;"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 3.0 KiB |
1
icon-light.svg
Executable file
1
icon-light.svg
Executable file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 445 445" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><rect id="Icon-Light" serif:id="Icon Light" x="0" y="0" width="444.1" height="444.1" style="fill:none;"/><path d="M444.1,222.05c0,-122.553 -99.497,-222.05 -222.05,-222.05c-122.553,0 -222.05,99.497 -222.05,222.05c0,122.553 99.497,222.05 222.05,222.05c122.553,0 222.05,-99.497 222.05,-222.05Z" style="fill:#efefef;"/><clipPath id="_clip1"><path d="M444.1,222.05c0,-122.553 -99.497,-222.05 -222.05,-222.05c-122.553,0 -222.05,99.497 -222.05,222.05c0,122.553 99.497,222.05 222.05,222.05c122.553,0 222.05,-99.497 222.05,-222.05Z"/></clipPath><g clip-path="url(#_clip1)"><path d="M911.401,444.1l-952.033,0l-1013.41,0c-60.994,-158.567 -78.355,-238.341 -52.081,-239.322c55.598,8.234 81.973,34.191 139.482,112.049c29.194,35.605 69.345,20.109 94.465,-2.512c17.584,-16.734 27.073,-50.366 48.844,-49.975c24.561,-0.391 43.233,18.645 54.02,38.532c21.212,25.119 58.675,26.667 78.568,27.352c28.888,-4.186 35.586,-8.373 46.89,-15.909c20.235,-18.142 25.957,-28.887 36.525,-62.596c19.03,-45.672 40.059,-54.509 68.508,-57.09c17.52,-0.234 67.036,-6.54 92.613,58.359c27.593,50.861 80.763,49.186 123.466,44.999c42.704,-7.117 48.121,-21.878 79.52,-56.417c21.98,-33.912 66.612,-40.42 88.173,-36.792c0.085,0.016 0.171,0.031 0.257,0.046c0.23,-0.021 0.464,-0.037 0.702,-0.046c6.914,1.024 13.376,2.322 19.492,3.971c14.176,3.459 31.042,9.841 47.556,24.318c21.383,17.24 42.766,43.593 72.434,83.76c29.194,35.605 69.345,20.109 94.465,-2.512c17.584,-16.734 27.073,-50.366 48.844,-49.975c24.561,-0.391 43.233,18.645 54.02,38.532c21.212,25.119 58.676,26.667 78.568,27.352c28.888,-4.186 35.586,-8.373 46.89,-15.909c20.235,-18.142 25.957,-28.887 36.525,-62.596c19.03,-45.672 40.059,-54.509 68.508,-57.09c17.52,-0.234 67.036,-6.54 92.613,58.359c27.593,50.861 80.763,49.186 123.466,44.999c42.704,-7.117 48.121,-21.878 79.521,-56.417c21.979,-33.912 66.611,-40.42 88.172,-36.792c0.031,0.006 0.062,0.012 0.094,0.017c0.11,-0.007 0.22,-0.012 0.332,-0.017c4.97,0.737 9.708,1.614 14.244,2.667c16.717,3.443 38.298,10.313 58.806,30.72c19.45,17.188 39.536,42.249 66.432,78.662c29.194,35.605 69.346,20.109 94.466,-2.512c17.583,-16.734 27.073,-50.366 48.843,-49.975c24.561,-0.391 43.233,18.645 54.02,38.532c21.212,25.119 58.676,26.667 78.568,27.352c28.888,-4.186 35.587,-8.373 46.89,-15.909c20.236,-18.142 25.957,-28.887 36.525,-62.596c19.03,-45.672 40.059,-54.509 68.508,-57.09c17.52,-0.234 67.037,-6.54 92.613,58.359c27.594,50.861 80.763,49.186 123.467,44.999c42.703,-7.117 48.12,-21.878 79.52,-56.417c21.979,-33.912 66.611,-40.42 88.172,-36.792c21.617,3.861 62.105,8.005 93.951,59.562c7.404,11.987 14.341,26.536 20.465,44.241l0,135.519l-951.5,0Z" style="fill:#41adff;fill-rule:nonzero;"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 3.0 KiB |
BIN
icons/android-chrome-192x192.png
Executable file
BIN
icons/android-chrome-192x192.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
icons/android-chrome-512x512.png
Executable file
BIN
icons/android-chrome-512x512.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
icons/apple-touch-icon.png
Executable file
BIN
icons/apple-touch-icon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
12
icons/browserconfig.xml
Executable file
12
icons/browserconfig.xml
Executable file
@@ -0,0 +1,12 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<browserconfig>
|
||||||
|
<msapplication>
|
||||||
|
<tile>
|
||||||
|
<square70x70logo src="/icons/mstile-70x70.png"/>
|
||||||
|
<square150x150logo src="/icons/mstile-150x150.png"/>
|
||||||
|
<square310x310logo src="/icons/mstile-310x310.png"/>
|
||||||
|
<wide310x150logo src="/icons/mstile-310x150.png"/>
|
||||||
|
<TileColor>#00aba9</TileColor>
|
||||||
|
</tile>
|
||||||
|
</msapplication>
|
||||||
|
</browserconfig>
|
||||||
BIN
icons/favicon-16x16.png
Executable file
BIN
icons/favicon-16x16.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
icons/favicon-32x32.png
Executable file
BIN
icons/favicon-32x32.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
icons/favicon.ico
Executable file
BIN
icons/favicon.ico
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
icons/light-favicon-16x16.png
Executable file
BIN
icons/light-favicon-16x16.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
icons/light-favicon-32x32.png
Executable file
BIN
icons/light-favicon-32x32.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
icons/light-favicon.ico
Executable file
BIN
icons/light-favicon.ico
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
icons/mstile-150x150.png
Executable file
BIN
icons/mstile-150x150.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
icons/mstile-310x150.png
Executable file
BIN
icons/mstile-310x150.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
BIN
icons/mstile-310x310.png
Executable file
BIN
icons/mstile-310x310.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
icons/mstile-70x70.png
Executable file
BIN
icons/mstile-70x70.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
22
icons/safari-pinned-tab.svg
Executable file
22
icons/safari-pinned-tab.svg
Executable file
@@ -0,0 +1,22 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||||
|
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||||
|
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
|
||||||
|
preserveAspectRatio="xMidYMid meet">
|
||||||
|
<metadata>
|
||||||
|
Created by potrace 1.11, written by Peter Selinger 2001-2013
|
||||||
|
</metadata>
|
||||||
|
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||||
|
fill="#000000" stroke="none">
|
||||||
|
<path d="M2378 5115 c-2 -1 -30 -5 -63 -9 -33 -3 -71 -8 -85 -10 -14 -3 -61
|
||||||
|
-10 -105 -16 -239 -35 -599 -163 -835 -297 -479 -273 -886 -735 -1095 -1243
|
||||||
|
-52 -128 -115 -324 -129 -400 -2 -14 -7 -36 -10 -50 -44 -190 -65 -557 -44
|
||||||
|
-780 39 -410 195 -841 429 -1185 303 -446 735 -784 1239 -968 111 -41 310 -97
|
||||||
|
395 -111 226 -38 248 -40 480 -41 275 0 380 12 635 76 233 59 453 147 643 258
|
||||||
|
43 25 85 51 95 56 46 27 151 103 239 174 523 418 866 1043 940 1716 13 116 9
|
||||||
|
511 -6 600 -49 295 -96 465 -194 693 -194 456 -557 879 -982 1146 -152 96
|
||||||
|
-423 226 -520 250 -5 2 -18 6 -27 9 -37 14 -54 20 -83 27 -16 5 -73 20 -125
|
||||||
|
33 -174 47 -356 69 -582 72 -113 2 -208 2 -210 0z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
19
icons/site.webmanifest
Executable file
19
icons/site.webmanifest
Executable file
@@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"name": "Water.css",
|
||||||
|
"short_name": "Water.css",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "/icons/android-chrome-192x192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/icons/android-chrome-512x512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"theme_color": "#ffffff",
|
||||||
|
"background_color": "#ffffff",
|
||||||
|
"display": "standalone"
|
||||||
|
}
|
||||||
190
index.html
190
index.html
@@ -2,27 +2,71 @@
|
|||||||
<html lang='en'>
|
<html lang='en'>
|
||||||
<head>
|
<head>
|
||||||
<title>Water.css</title>
|
<title>Water.css</title>
|
||||||
<link id='stylesheet' rel='stylesheet' href='dist/dark.css'>
|
<link id='stylesheet' rel='stylesheet' href='../dist/dark.css' />
|
||||||
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
|
||||||
|
<!-- Icons generated with https://realfavicongenerator.net -->
|
||||||
|
<link
|
||||||
|
rel='apple-touch-icon'
|
||||||
|
sizes='180x180'
|
||||||
|
href='/icons/apple-touch-icon.png'
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel='icon'
|
||||||
|
type='image/png'
|
||||||
|
sizes='32x32'
|
||||||
|
href='/icons/favicon-32x32.png'
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel='icon'
|
||||||
|
type='image/png'
|
||||||
|
sizes='16x16'
|
||||||
|
href='/icons/favicon-16x16.png'
|
||||||
|
/>
|
||||||
|
<link rel='manifest' href='/icons/site.webmanifest' />
|
||||||
|
<link rel='mask-icon' href='/icons/safari-pinned-tab.svg' color='#5bbad5' />
|
||||||
|
<link rel='shortcut icon' href='/icons/favicon.ico' />
|
||||||
|
<meta name='apple-mobile-web-app-title' content='Water.css' />
|
||||||
|
<meta name='application-name' content='Water.css' />
|
||||||
|
<meta name='msapplication-TileColor' content='#00aba9' />
|
||||||
|
<meta name='msapplication-config' content='/icons/browserconfig.xml' />
|
||||||
|
<meta name='theme-color' content='#ffffff' />
|
||||||
|
|
||||||
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-116663597-6'></script>
|
<script
|
||||||
|
async
|
||||||
|
src='https://www.googletagmanager.com/gtag/js?id=UA-116663597-6'
|
||||||
|
></script>
|
||||||
<script>
|
<script>
|
||||||
window.dataLayer = window.dataLayer || []
|
window.dataLayer = window.dataLayer || [];
|
||||||
function gtag(){dataLayer.push(arguments)}
|
function gtag() {
|
||||||
gtag('js', new Date())
|
dataLayer.push(arguments);
|
||||||
gtag('config', 'UA-116663597-6')
|
}
|
||||||
|
gtag('js', new Date());
|
||||||
|
gtag('config', 'UA-116663597-6');
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Water.css</h1>
|
<h1>Water.css</h1>
|
||||||
<p>
|
<p>
|
||||||
Water.css is a just-add-css collection of styles to make simple websites like this just a little bit nicer.
|
Water.css is a just-add-css collection of styles to make simple websites
|
||||||
|
like this just a little bit nicer.
|
||||||
<a href='https://github.com/kognise/water.css'>Get it already!</a>
|
<a href='https://github.com/kognise/water.css'>Get it already!</a>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Now you can write your simple static site with nice semantic html, and Water.css will manage the styling for you.
|
Now you can write your simple static site with nice semantic html, and
|
||||||
|
Water.css will manage the styling for you.
|
||||||
</p>
|
</p>
|
||||||
<a href='https://www.producthunt.com/posts/water-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-water-css' target='_blank'><img id='ph' src='https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=150490&theme=dark&period=daily' alt='Water.css - Make your tiny website just a little nicer | Product Hunt Embed' style='width: 250px; height: 54px;' width='250px' height='54px' /></a>
|
<a
|
||||||
|
href='https://www.producthunt.com/posts/water-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-water-css'
|
||||||
|
target='_blank'
|
||||||
|
><img
|
||||||
|
id='ph'
|
||||||
|
src='https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=150490&theme=dark&period=daily'
|
||||||
|
alt='Water.css - Make your tiny website just a little nicer | Product Hunt Embed'
|
||||||
|
style='width: 250px; height: 54px;'
|
||||||
|
width='250px'
|
||||||
|
height='54px'
|
||||||
|
/></a>
|
||||||
|
|
||||||
<h2>Goals</h2>
|
<h2>Goals</h2>
|
||||||
<ul>
|
<ul>
|
||||||
@@ -36,14 +80,18 @@
|
|||||||
|
|
||||||
<h2>Is it responsive?</h2>
|
<h2>Is it responsive?</h2>
|
||||||
<p>
|
<p>
|
||||||
<strong>Heck yeah!</strong> It doesn't include any fancy styles so it's easily mobile responsive.
|
<strong>Heck yeah!</strong> It doesn't include any fancy styles so it's
|
||||||
Just add the famous <a href='https://www.w3schools.com/css/css_rwd_viewport.asp'>responsive viewport tag</a> and you'll be good to go!
|
easily mobile responsive. Just add the famous
|
||||||
|
<a href='https://www.w3schools.com/css/css_rwd_viewport.asp'
|
||||||
|
>responsive viewport tag</a
|
||||||
|
>
|
||||||
|
and you'll be good to go!
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
In fact, try resizing this page. Everything flows super nicely as you'll see.
|
In fact, try resizing this page. Everything flows super nicely as you'll
|
||||||
|
see.
|
||||||
</p>
|
</p>
|
||||||
<button id='switch'>Switch theme</button>
|
<button type='button' id='switch'>Switch theme</button>
|
||||||
|
|
||||||
<h2>Element demos</h2>
|
<h2>Element demos</h2>
|
||||||
<p>
|
<p>
|
||||||
This is supposed to be a demo page so we need more elements!
|
This is supposed to be a demo page so we need more elements!
|
||||||
@@ -52,50 +100,83 @@
|
|||||||
<h3>Form elements</h3>
|
<h3>Form elements</h3>
|
||||||
<form>
|
<form>
|
||||||
<label for='email'>Email</label>
|
<label for='email'>Email</label>
|
||||||
<input type='email' name='email' id='email' placeholder='john.doe@gmail.com'>
|
<input
|
||||||
|
type='email'
|
||||||
|
name='email'
|
||||||
|
id='email'
|
||||||
|
placeholder='john.doe@gmail.com'
|
||||||
|
/>
|
||||||
|
|
||||||
<label for='id'>User id (read only)</label>
|
<label for='id'>User id (read only)</label>
|
||||||
<input readonly name='id' id='id' value='04D6H89Z'>
|
<input readonly name='id' id='id' value='04D6H89Z' />
|
||||||
|
|
||||||
<label for='disabled'>Random disabled input</label>
|
<label for='disabled'>Random disabled input</label>
|
||||||
<input disabled name='disabled' id='disabled' placeholder='Because why not?'>
|
<input
|
||||||
|
disabled
|
||||||
|
name='disabled'
|
||||||
|
id='disabled'
|
||||||
|
placeholder='Because why not?'
|
||||||
|
/>
|
||||||
|
|
||||||
<label for='about'>About me</label>
|
<label for='about'>About me</label>
|
||||||
<textarea name='about' id='about' placeholder='I am a textarea...'></textarea>
|
<textarea
|
||||||
|
name='about'
|
||||||
|
id='about'
|
||||||
|
placeholder='I am a textarea...'
|
||||||
|
></textarea>
|
||||||
|
|
||||||
<label>Choose a Doe:</label>
|
<label>Choose a Doe:</label>
|
||||||
<div>
|
<div>
|
||||||
<input type='radio' id='john' name='drone' value='john' checked>
|
<input type='radio' id='john' name='doe' value='john' checked>
|
||||||
<label for='john'>John Doe</label>
|
<label for='john'>John Doe</label>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<input type='radio' id='jane' name='drone' value='jane' checked>
|
<input type='radio' id='jane' name='doe' value='jane' checked>
|
||||||
<label for='jane'>Jane Doe</label>
|
<label for='jane'>Jane Doe</label>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<input type='radio' id='johnny' name='drone' value='johnny' checked>
|
<input type='radio' id='johnny' name='doe' value='johnny' checked>
|
||||||
<label for='johnny'>Johnny Doe</label>
|
<label for='johnny'>Johnny Doe</label>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type='radio' id='doe' name='doe' value='doe' checked>
|
||||||
|
<label for='doe'>An actual doe</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
<br>
|
<br />
|
||||||
|
|
||||||
<input type='checkbox' name='remember' id='remember' checked>
|
<div>
|
||||||
|
<label for='volume'>Volume</label>
|
||||||
|
<input type='range' id='start' name='volume' id='volume' min='0' max='11' />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input type='checkbox' name='remember' id='remember' checked />
|
||||||
<label for='remember'>Remember me</label>
|
<label for='remember'>Remember me</label>
|
||||||
|
|
||||||
<input type='submit'>
|
<input type='submit' />
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<h3>Code</h3>
|
<h3>Code</h3>
|
||||||
<p>
|
<p>
|
||||||
Below is some code, you can copy it with <kbd>Ctrl-C</kbd>.
|
Below is some code, with a variable, you can copy it with
|
||||||
Did you know, <code>alert(1)</code> can show an alert in JavaScript!
|
<kbd>Ctrl-C</kbd>. Did you know, <code>alert(1)</code> can show an alert
|
||||||
|
in JavaScript!
|
||||||
</p>
|
</p>
|
||||||
|
<code>var <var>myNumber</var> = 0;</code>
|
||||||
<pre><code>// This logs a message to the console and check out the scrollbar.<br>console.log('Hello, world!')</code></pre>
|
<pre><code>// This logs a message to the console and check out the scrollbar.<br>console.log('Hello, world!')</code></pre>
|
||||||
|
|
||||||
|
<p>Here are some more keyboard buttons</p>
|
||||||
|
<p>
|
||||||
|
Press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Print Screen</kbd> to take
|
||||||
|
a selected area screenshot on Linux.
|
||||||
|
</p>
|
||||||
<h3>Other</h3>
|
<h3>Other</h3>
|
||||||
<p>Here's a horizontal rule and image because I don't know where else to put them.</p>
|
<p>
|
||||||
<img src='https://placekitten.com/408/287' alt='Example kitten'>
|
Here's a horizontal rule and image because I don't know where else to put
|
||||||
<hr>
|
them.
|
||||||
|
</p>
|
||||||
|
<img src='https://placekitten.com/408/287' alt='Example kitten' />
|
||||||
|
<hr />
|
||||||
|
|
||||||
<p>And here's a nicely marked up table!</p>
|
<p>And here's a nicely marked up table!</p>
|
||||||
<table>
|
<table>
|
||||||
@@ -127,24 +208,44 @@
|
|||||||
|
|
||||||
<h3>Typography</h3>
|
<h3>Typography</h3>
|
||||||
<p>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum
|
||||||
<strong>This is strong,</strong> this is normal, <b>this is just bold,</b> <em>and this is emphasized!</em> And heck, <a href='/'>here</a>'s a link.
|
hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus,
|
||||||
|
sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin
|
||||||
|
maximus lacus interdum leo molestie convallis. Orci varius natoque
|
||||||
|
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut
|
||||||
|
iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum,
|
||||||
|
nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit
|
||||||
|
lectus ac quam. Class aptent taciti sociosqu ad litora torquent per
|
||||||
|
conubia nostra, per inceptos himenaeos.
|
||||||
|
<strong>This is strong,</strong> this is normal,
|
||||||
|
<b>this is just bold,</b> <em>and this is emphasized!</em> And heck,
|
||||||
|
<a href='/'>here</a>'s a link.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<blockquote cite='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote'>
|
<blockquote
|
||||||
"The HTML blockquote Element (or HTML Block Quotation Element) indicates
|
cite='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote'
|
||||||
that the enclosed text is an extended quotation. Usually, this is
|
>
|
||||||
rendered visually by indentation (see
|
'The HTML blockquote Element (or HTML Block Quotation Element) indicates
|
||||||
<a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#Usage_notes'>Notes</a>
|
that the enclosed text is an extended quotation. Usually, this is rendered
|
||||||
for how to change it). A URL for the source of the quotation may be given using the
|
visually by indentation (see
|
||||||
<code>cite</code> attribute, while a text representation of the source
|
<a
|
||||||
can be given using the <code><cite></code> cite element."
|
href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#Usage_notes'
|
||||||
|
>Notes</a
|
||||||
|
>
|
||||||
|
for how to change it). A URL for the source of the quotation may be given
|
||||||
|
using the
|
||||||
|
<code>cite</code> attribute, while a text representation of the source can
|
||||||
|
be given using the <code><cite></code> cite element.'
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<cite>MDN, "The Block Quotation element"</cite>
|
<cite>MDN, 'The Block Quotation element'</cite>
|
||||||
</footer>
|
</footer>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
|
|
||||||
|
<q>Quotes (<q>) share the same style as blockquotes.</q>
|
||||||
|
|
||||||
|
<p>Use <mark> to <mark>highlight the important stuff</mark>.</p>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>Unordered list item 1</li>
|
<li>Unordered list item 1</li>
|
||||||
<li>Unordered list item 2</li>
|
<li>Unordered list item 2</li>
|
||||||
@@ -156,9 +257,7 @@
|
|||||||
<li>Ordered list item 3</li>
|
<li>Ordered list item 3</li>
|
||||||
</ol>
|
</ol>
|
||||||
|
|
||||||
<p>
|
<p>Addresses are also styled to be <strong>awesome</strong>!</p>
|
||||||
Addresses are also styled to be <strong>awesome</strong>!
|
|
||||||
</p>
|
|
||||||
<address>
|
<address>
|
||||||
<a href='mailto:john.doe@example.com'>john.doe@example.com</a><br />
|
<a href='mailto:john.doe@example.com'>john.doe@example.com</a><br />
|
||||||
<a href='tel:778-330-2389'>778-330-2389</a><br />
|
<a href='tel:778-330-2389'>778-330-2389</a><br />
|
||||||
@@ -172,6 +271,7 @@
|
|||||||
<h5>Heading 5</h5>
|
<h5>Heading 5</h5>
|
||||||
<h6>Heading 6</h6>
|
<h6>Heading 6</h6>
|
||||||
|
|
||||||
<script src='script.js'></script>
|
<script src='https://unpkg.com/favicon-mode-switcher@^1.0.0' defer></script>
|
||||||
|
<script src='script.js' defer></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
BIN
logo.png
Normal file → Executable file
BIN
logo.png
Normal file → Executable file
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 45 KiB |
2
logo.svg
2
logo.svg
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
14
package.json
14
package.json
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "water.css",
|
"name": "water.css",
|
||||||
"version": "1.0.0",
|
"version": "2.0.0",
|
||||||
"description": "A just-add-css collection of styles to make simple websites just a little nicer.",
|
"description": "A just-add-css collection of styles to make simple websites just a little nicer.",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
@@ -30,11 +30,15 @@
|
|||||||
"cssnano": "^4.1.10",
|
"cssnano": "^4.1.10",
|
||||||
"gulp": "^4.0.0",
|
"gulp": "^4.0.0",
|
||||||
"gulp-bytediff": "^1.0.0",
|
"gulp-bytediff": "^1.0.0",
|
||||||
"gulp-postcss": "^8.0.0",
|
|
||||||
"gulp-sass": "^4.0.2",
|
|
||||||
"gulp-sourcemaps": "^2.6.5",
|
|
||||||
"gulp-filter": "^5.1.0",
|
"gulp-filter": "^5.1.0",
|
||||||
"gulp-rename": "^1.4.0"
|
"gulp-flatten": "^0.4.0",
|
||||||
|
"gulp-postcss": "^8.0.0",
|
||||||
|
"gulp-rename": "^1.4.0",
|
||||||
|
"gulp-sizereport": "^1.2.1",
|
||||||
|
"gulp-sourcemaps": "^2.6.5",
|
||||||
|
"postcss-color-mod-function": "^3.0.3",
|
||||||
|
"postcss-css-variables": "^0.12.0",
|
||||||
|
"postcss-import": "^12.0.1"
|
||||||
},
|
},
|
||||||
"browserslist": [
|
"browserslist": [
|
||||||
"defaults AND not android 4.4.3"
|
"defaults AND not android 4.4.3"
|
||||||
|
|||||||
116
script.js
116
script.js
@@ -1,4 +1,114 @@
|
|||||||
document.getElementById('switch').addEventListener('click', function() {
|
!(function() {
|
||||||
const stylesheet = document.getElementById('stylesheet');
|
const iconModeSwitcher = window.faviconModeSwitcher && faviconModeSwitcher.default
|
||||||
stylesheet.href = stylesheet.href.replace(/dark|light/, function(replaced) { return replaced === 'dark' ? 'light' : 'dark' });
|
if (!iconModeSwitcher) return
|
||||||
|
iconModeSwitcher([
|
||||||
|
{
|
||||||
|
element: 'link[rel="shortcut icon"]',
|
||||||
|
href: { dark: '/icons/light-favicon.ico' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
element: 'link[rel="icon"][sizes="16x16"]',
|
||||||
|
href: { dark: '/icons/light-favicon-16x16.png' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
element: 'link[rel="icon"][sizes="32x32"]',
|
||||||
|
href: { dark: '/icons/light-favicon-32x32.png' }
|
||||||
|
}
|
||||||
|
])
|
||||||
|
})()
|
||||||
|
;(function (ThemeSwitcher) {
|
||||||
|
const themeSwitcher = new ThemeSwitcher('stylesheet');
|
||||||
|
const themeSwitchBtn = document.getElementById('switch');
|
||||||
|
const themes = {
|
||||||
|
dark: 'dark',
|
||||||
|
darkStandalone: 'dark.standalone',
|
||||||
|
light: 'light',
|
||||||
|
lightStandalone: 'light.standalone'
|
||||||
|
};
|
||||||
|
const getSwitchThemeName = function () {
|
||||||
|
// Case: switch to "light.standalone.css"
|
||||||
|
if (
|
||||||
|
(themeSwitcher.current === themes.dark) && themeSwitcher.isDark ||
|
||||||
|
(themeSwitcher.current === themes.light) && themeSwitcher.isDark ||
|
||||||
|
themeSwitcher.current === themes.darkStandalone
|
||||||
|
) {
|
||||||
|
return themes.lightStandalone
|
||||||
|
|
||||||
|
// Case: switch to "dark.standalone.css"
|
||||||
|
} else if (
|
||||||
|
(themeSwitcher.current === themes.dark) && themeSwitcher.isLight ||
|
||||||
|
(themeSwitcher.current === themes.light) && themeSwitcher.isLight ||
|
||||||
|
themeSwitcher.current === themes.lightStandalone
|
||||||
|
) {
|
||||||
|
return themes.darkStandalone;
|
||||||
|
|
||||||
|
// Case: switch to "light.css"
|
||||||
|
} else if (themeSwitcher.current === themes.dark) {
|
||||||
|
return themes.light;
|
||||||
|
|
||||||
|
// Case: switch to "dark.css"
|
||||||
|
} else if (themeSwitcher.current === themes.light) {
|
||||||
|
return themes.dark;
|
||||||
|
|
||||||
|
// Case: switch destination is unknown
|
||||||
|
} else {
|
||||||
|
return themeSwitcher.current;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const getGeneralThemeName = function () {
|
||||||
|
return themeSwitcher.current.replace(/\.standalone/g, '');
|
||||||
|
};
|
||||||
|
|
||||||
|
themeSwitchBtn.addEventListener('click', function() {
|
||||||
|
themeSwitcher.switch(getSwitchThemeName());
|
||||||
});
|
});
|
||||||
|
|
||||||
|
themeSwitcher.onChangeDark = function () {
|
||||||
|
themeSwitcher.switch(getGeneralThemeName());
|
||||||
|
};
|
||||||
|
|
||||||
|
themeSwitcher.onChangeLight = function () {
|
||||||
|
themeSwitcher.switch(getGeneralThemeName());
|
||||||
|
};
|
||||||
|
})(
|
||||||
|
(function () {
|
||||||
|
const ThemeSwitcher = function(stylesheet) {
|
||||||
|
const darkSchemeMql = matchMedia('(prefers-color-scheme: dark)');
|
||||||
|
const lightSchemeMql = matchMedia('(prefers-color-scheme: light)');
|
||||||
|
const that = this;
|
||||||
|
|
||||||
|
this.themeDir = '../dist/';
|
||||||
|
this.stylesheet = document.getElementById(stylesheet);
|
||||||
|
this.current = this.getThemeName(this.stylesheet.href);
|
||||||
|
this.isDark = darkSchemeMql.matches;
|
||||||
|
this.isLight = lightSchemeMql.matches;
|
||||||
|
|
||||||
|
darkSchemeMql.addListener(function (mql) {
|
||||||
|
if (mql.matches && typeof that.onChangeDark === 'function') {
|
||||||
|
that.onChangeDark()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
lightSchemeMql.addListener(function (mql) {
|
||||||
|
if (mql.matches && typeof that.onChangeLight === 'function') {
|
||||||
|
that.onChangeLight()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
ThemeSwitcher.prototype = {
|
||||||
|
switch: function (themeName) {
|
||||||
|
this.stylesheet.href = this.themeDir + themeName + '.css';
|
||||||
|
this.current = themeName;
|
||||||
|
},
|
||||||
|
getThemeName: function () {
|
||||||
|
const reg = new RegExp(this.themeDir + '(|.+?).css');
|
||||||
|
return stylesheet.getAttribute('href').replace(reg, '$1');
|
||||||
|
},
|
||||||
|
onChangeDark: null,
|
||||||
|
onChangeLight: null
|
||||||
|
};
|
||||||
|
|
||||||
|
return ThemeSwitcher;
|
||||||
|
})()
|
||||||
|
);
|
||||||
|
|||||||
10
src/builds/dark-legacy.css
Executable file
10
src/builds/dark-legacy.css
Executable file
@@ -0,0 +1,10 @@
|
|||||||
|
/**
|
||||||
|
* Dark-themed version for legacy browsers:
|
||||||
|
* Loads the compiled, standalone version of the dark theme,
|
||||||
|
* but overrides it with the compiled, standalone version of the light theme
|
||||||
|
* if a system-wide theme preference is set on the user's device.
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css');
|
||||||
|
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css')
|
||||||
|
(prefers-color-scheme: light);
|
||||||
8
src/builds/dark-legacy.standalone.css
Executable file
8
src/builds/dark-legacy.standalone.css
Executable file
@@ -0,0 +1,8 @@
|
|||||||
|
/**
|
||||||
|
* Standalone dark-themed version for legacy browsers.
|
||||||
|
* Includes dark variables and core, compiled at build time so the final output
|
||||||
|
* will only include regular CSS, no variables.
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import '../variables-dark.css';
|
||||||
|
@import '../parts/_core.css';
|
||||||
13
src/builds/dark.css
Normal file
13
src/builds/dark.css
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
/**
|
||||||
|
* Dark-themed version:
|
||||||
|
* uses dark theme by default but switches to light theme
|
||||||
|
* if a system-wide theme preference is set on the user's device.
|
||||||
|
*
|
||||||
|
* Variables will remain uncompiled so the theme can update dynamically
|
||||||
|
* at runtime in the browser.
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import '../variables-dark.css';
|
||||||
|
@import '../variables-light.css' (prefers-color-scheme: light);
|
||||||
|
|
||||||
|
@import '../parts/_core.css';
|
||||||
8
src/builds/dark.standalone.css
Executable file
8
src/builds/dark.standalone.css
Executable file
@@ -0,0 +1,8 @@
|
|||||||
|
/**
|
||||||
|
* Standalone dark-themed version.
|
||||||
|
* Includes dark variables and core, left as CSS variables
|
||||||
|
* so the theming can be adjusted at runtime.
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import '../variables-dark.css';
|
||||||
|
@import '../parts/_core.css';
|
||||||
10
src/builds/light-legacy.css
Executable file
10
src/builds/light-legacy.css
Executable file
@@ -0,0 +1,10 @@
|
|||||||
|
/**
|
||||||
|
* Light-themed version for legacy browsers:
|
||||||
|
* Loads the compiled, standalone version of the light theme at runtime,
|
||||||
|
* but overrides it with the compiled, standalone version of the dark theme
|
||||||
|
* if a system-wide theme preference is set on the user's device.
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css');
|
||||||
|
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css')
|
||||||
|
(prefers-color-scheme: dark);
|
||||||
8
src/builds/light-legacy.standalone.css
Executable file
8
src/builds/light-legacy.standalone.css
Executable file
@@ -0,0 +1,8 @@
|
|||||||
|
/**
|
||||||
|
* Standalone light-themed version for legacy browsers.
|
||||||
|
* Includes light variables and core, compiled at build time so the final output
|
||||||
|
* will only include regular CSS, no variables.
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import '../variables-light.css';
|
||||||
|
@import '../parts/_core.css';
|
||||||
14
src/builds/light.css
Normal file
14
src/builds/light.css
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
/**
|
||||||
|
* Light-themed version:
|
||||||
|
* uses light theme by default but switches to dark theme
|
||||||
|
* if a system-wide theme preference is set on the user's device.
|
||||||
|
*
|
||||||
|
* Variables will remain uncompiled so the theme can update dynamically
|
||||||
|
* at runtime in the browser.
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import '../variables-light.css';
|
||||||
|
@import '../variables-dark.css' (prefers-color-scheme: dark);
|
||||||
|
|
||||||
|
|
||||||
|
@import '../parts/_core.css';
|
||||||
8
src/builds/light.standalone.css
Executable file
8
src/builds/light.standalone.css
Executable file
@@ -0,0 +1,8 @@
|
|||||||
|
/**
|
||||||
|
* Standalone light-themed version.
|
||||||
|
* Includes light variables and core, left as CSS variables
|
||||||
|
* so the theming can be adjusted at runtime.
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import '../variables-light.css';
|
||||||
|
@import '../parts/_core.css';
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
$background: #202b38 !default;
|
|
||||||
$background-alt: #161f27 !default;
|
|
||||||
|
|
||||||
$selection: #161f27 !default;
|
|
||||||
|
|
||||||
$text-main: #dbdbdb !default;
|
|
||||||
$text-bright: #ffffff !default;
|
|
||||||
|
|
||||||
$links: #41adff !default;
|
|
||||||
$focus: #0096bfab !default;
|
|
||||||
$border: #dbdbdb !default;
|
|
||||||
$code: #ffbe85 !default;
|
|
||||||
|
|
||||||
$button-hover: #324759 !default;
|
|
||||||
$animation-duration: 0.1s !default;
|
|
||||||
|
|
||||||
$scrollbar-thumb: $button-hover;
|
|
||||||
$scrollbar-thumb-hover: lighten($button-hover, 8%);
|
|
||||||
|
|
||||||
$form-placeholder: #a9a9a9 !default;
|
|
||||||
$form-text: #ffffff !default;
|
|
||||||
|
|
||||||
@import 'parts/core';
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
$background: #ffffff !default;
|
|
||||||
$background-alt: #efefef !default;
|
|
||||||
|
|
||||||
$selection: #9e9e9e !default;
|
|
||||||
|
|
||||||
$text-main: #363636 !default;
|
|
||||||
$text-bright: #000000 !default;
|
|
||||||
|
|
||||||
$links: #0076d1 !default;
|
|
||||||
$focus: #0096bfab !default;
|
|
||||||
$border: #dbdbdb !default;
|
|
||||||
$code: #000000 !default;
|
|
||||||
|
|
||||||
$button-hover: #dddddd !default;
|
|
||||||
$animation-duration: 0.1s !default;
|
|
||||||
|
|
||||||
$scrollbar-thumb: darken($button-hover, 3%);
|
|
||||||
$scrollbar-thumb-hover: darken($button-hover, 10%);
|
|
||||||
|
|
||||||
$form-placeholder: #949494 !default;
|
|
||||||
$form-text: #000000 !default;
|
|
||||||
|
|
||||||
@import 'parts/core';
|
|
||||||
21
src/parts/_base.css
Normal file
21
src/parts/_base.css
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
body {
|
||||||
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
line-height: 1.4;
|
||||||
|
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 10px;
|
||||||
|
|
||||||
|
color: var(--text-main);
|
||||||
|
background: var(--background-body);
|
||||||
|
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, input, textarea {
|
||||||
|
transition: background-color var(--animation-duration) linear,
|
||||||
|
border-color var(--animation-duration) linear,
|
||||||
|
color var(--animation-duration) linear,
|
||||||
|
box-shadow var(--animation-duration) linear,
|
||||||
|
transform var(--animation-duration) ease;
|
||||||
|
}
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
body {
|
|
||||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
|
||||||
line-height: 1.4;
|
|
||||||
|
|
||||||
max-width: 800px;
|
|
||||||
margin: 20px auto;
|
|
||||||
padding: 0 10px;
|
|
||||||
|
|
||||||
color: $text-main;
|
|
||||||
background: $background;
|
|
||||||
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
}
|
|
||||||
|
|
||||||
button, input, textarea {
|
|
||||||
transition: background-color $animation-duration linear,
|
|
||||||
border-color $animation-duration linear,
|
|
||||||
color $animation-duration linear,
|
|
||||||
box-shadow $animation-duration linear,
|
|
||||||
transform $animation-duration ease;
|
|
||||||
}
|
|
||||||
27
src/parts/_code.css
Normal file
27
src/parts/_code.css
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
code, samp, time {
|
||||||
|
background: var(--background);
|
||||||
|
color: var(--code);
|
||||||
|
padding: 2.5px 5px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre > code {
|
||||||
|
padding: 10px;
|
||||||
|
display: block;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
var {
|
||||||
|
color: var(--variable);
|
||||||
|
font-style: normal;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
background: var(--background);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 2px;
|
||||||
|
color: var(--text-main);
|
||||||
|
padding: 2px 4px 2px 4px;
|
||||||
|
}
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
code, kbd {
|
|
||||||
background: $background-alt;
|
|
||||||
color: $code;
|
|
||||||
padding: 5px;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre > code {
|
|
||||||
padding: 10px;
|
|
||||||
display: block;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
7
src/parts/_core.css
Normal file
7
src/parts/_core.css
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
@import '_base.css';
|
||||||
|
@import '_typography.css';
|
||||||
|
@import '_forms.css';
|
||||||
|
@import '_range.css';
|
||||||
|
@import '_links.css';
|
||||||
|
@import '_code.css';
|
||||||
|
@import '_misc.css';
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
@import 'base';
|
|
||||||
@import 'typography';
|
|
||||||
@import 'forms';
|
|
||||||
@import 'links';
|
|
||||||
@import 'code';
|
|
||||||
@import 'misc';
|
|
||||||
121
src/parts/_forms.css
Normal file
121
src/parts/_forms.css
Normal file
@@ -0,0 +1,121 @@
|
|||||||
|
button,
|
||||||
|
input[type='submit'],
|
||||||
|
input[type='button'],
|
||||||
|
input[type='checkbox'],
|
||||||
|
input[type='range'],
|
||||||
|
input[type='radio'] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:not([type='checkbox']):not([type='radio']),
|
||||||
|
select {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
textarea {
|
||||||
|
color: var(--form-text);
|
||||||
|
background-color: var(--background);
|
||||||
|
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
|
||||||
|
margin-right: 6px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
button,
|
||||||
|
textarea {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
margin-right: 0;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input[type='submit'],
|
||||||
|
input[type='button'] {
|
||||||
|
padding-right: 30px;
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover,
|
||||||
|
input[type='submit']:hover,
|
||||||
|
input[type='button']:hover {
|
||||||
|
background: var(--button-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus,
|
||||||
|
select:focus,
|
||||||
|
button:focus,
|
||||||
|
textarea:focus {
|
||||||
|
box-shadow: 0 0 0 2px var(--focus);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox'],
|
||||||
|
input[type='radio'] {
|
||||||
|
position: relative;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin: 0;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='radio'] {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:checked,
|
||||||
|
input[type='radio']:checked {
|
||||||
|
background: var(--button-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:checked::before,
|
||||||
|
input[type='radio']:checked::before {
|
||||||
|
content: '•';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:checked::before {
|
||||||
|
content: '✔';
|
||||||
|
transform: translateY(-50%) translateY(0.5px) translateX(-6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox']:active,
|
||||||
|
input[type='radio']:active,
|
||||||
|
input[type='submit']:active,
|
||||||
|
input[type='button']:active,
|
||||||
|
input[type='range']:active,
|
||||||
|
button:active {
|
||||||
|
transform: translateY(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:disabled,
|
||||||
|
select:disabled,
|
||||||
|
button:disabled,
|
||||||
|
textarea:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
::placeholder {
|
||||||
|
color: var(--form-placeholder);
|
||||||
|
}
|
||||||
@@ -1,77 +0,0 @@
|
|||||||
button,
|
|
||||||
input[type='submit'],
|
|
||||||
input[type='button'],
|
|
||||||
input[type='checkbox'] {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:not([type='checkbox']):not([type='radio']),
|
|
||||||
select {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
input, select, button, textarea {
|
|
||||||
color: $form-text;
|
|
||||||
background-color: $background-alt;
|
|
||||||
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
|
|
||||||
margin-right: 6px;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
padding: 10px;
|
|
||||||
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:not([type='checkbox']):not([type='radio']),
|
|
||||||
select, button, textarea {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
margin-right: 0;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
button, input[type='submit'], input[type='button'] {
|
|
||||||
padding-right: 30px;
|
|
||||||
padding-left: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover,
|
|
||||||
input[type='submit']:hover,
|
|
||||||
input[type='button']:hover {
|
|
||||||
background: $button-hover;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:focus,
|
|
||||||
select:focus,
|
|
||||||
button:focus,
|
|
||||||
textarea:focus {
|
|
||||||
box-shadow: 0 0 0 2px $focus;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='checkbox']:active,
|
|
||||||
input[type='radio']:active,
|
|
||||||
input[type='submit']:active,
|
|
||||||
input[type='button']:active,
|
|
||||||
button:active {
|
|
||||||
transform: translateY(2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
input:disabled,
|
|
||||||
select:disabled,
|
|
||||||
button:disabled,
|
|
||||||
textarea:disabled {
|
|
||||||
cursor: not-allowed;
|
|
||||||
opacity: .5;
|
|
||||||
}
|
|
||||||
|
|
||||||
::placeholder {
|
|
||||||
color: $form-placeholder;
|
|
||||||
}
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: $links;
|
color: var(--links);
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
@@ -5,7 +5,7 @@ img {
|
|||||||
|
|
||||||
hr {
|
hr {
|
||||||
border: none;
|
border: none;
|
||||||
border-top: 1px solid $border;
|
border-top: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
@@ -14,21 +14,18 @@ table {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
td, th {
|
td,
|
||||||
|
th {
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
thead {
|
th {
|
||||||
border-bottom: 1px solid $border;
|
border-bottom: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
tfoot {
|
tbody tr:nth-child(even) {
|
||||||
border-top: 1px solid $border;
|
background-color: var(--background-alt);
|
||||||
}
|
|
||||||
|
|
||||||
tr:nth-child(even) {
|
|
||||||
background-color: $background-alt;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
@@ -37,19 +34,19 @@ tr:nth-child(even) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
background: $background-alt;
|
background: var(--background);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background: $scrollbar-thumb;
|
background: var(--scrollbar-thumb);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
::-webkit-scrollbar-thumb:hover {
|
||||||
background: $scrollbar-thumb-hover;
|
background: var(--scrollbar-thumb-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
background-color: $selection;
|
background-color: var(--selection);
|
||||||
}
|
}
|
||||||
87
src/parts/_range.css
Normal file
87
src/parts/_range.css
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
input[type='range'] {
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 10px 0;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-webkit-slider-runnable-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 9.5px;
|
||||||
|
transition: 0.2s;
|
||||||
|
background: var(--background);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-webkit-slider-thumb {
|
||||||
|
box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--border);
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus::-webkit-slider-runnable-track {
|
||||||
|
background: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-moz-range-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 9.5px;
|
||||||
|
transition: 0.2s;
|
||||||
|
background: var(--background);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-moz-range-thumb {
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 9.5px;
|
||||||
|
background: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
border-width: 16px 0;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-fill-lower {
|
||||||
|
background: var(--background);
|
||||||
|
border: 0.2px solid #010101;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-fill-upper {
|
||||||
|
background: var(--background);
|
||||||
|
border: 0.2px solid #010101;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']::-ms-thumb {
|
||||||
|
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||||
|
border: 1px solid #000000;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus::-ms-fill-lower {
|
||||||
|
background: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='range']:focus::-ms-fill-upper {
|
||||||
|
background: var(--background);
|
||||||
|
}
|
||||||
@@ -19,7 +19,7 @@ h4,
|
|||||||
h5,
|
h5,
|
||||||
h6,
|
h6,
|
||||||
strong {
|
strong {
|
||||||
color: $text-bright;
|
color: var(--text-bright);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
@@ -34,8 +34,16 @@ th {
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote {
|
q:before {
|
||||||
border-left: 4px solid $focus;
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
q:after {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote , q{
|
||||||
|
border-left: 4px solid var(--focus);
|
||||||
margin: 1.5em 0em;
|
margin: 1.5em 0em;
|
||||||
padding: 0.5em 1em;
|
padding: 0.5em 1em;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
@@ -65,3 +73,10 @@ a[href^='tel']::before {
|
|||||||
a[href^='sms']::before {
|
a[href^='sms']::before {
|
||||||
content: '💬 ';
|
content: '💬 ';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
mark {
|
||||||
|
background-color: var(--highlight);
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 0px 2px 0px 2px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
27
src/variables-dark.css
Executable file
27
src/variables-dark.css
Executable file
@@ -0,0 +1,27 @@
|
|||||||
|
:root {
|
||||||
|
--background-body: #202b38;
|
||||||
|
--background: #161f27;
|
||||||
|
--background-alt: #1a242f;
|
||||||
|
|
||||||
|
--selection: #161f27;
|
||||||
|
|
||||||
|
--text-main: #dbdbdb;
|
||||||
|
--text-bright: #ffffff;
|
||||||
|
|
||||||
|
--links: #41adff;
|
||||||
|
--focus: #0096bfab;
|
||||||
|
--border: #dbdbdb;
|
||||||
|
--code: #ffbe85;
|
||||||
|
|
||||||
|
--animation-duration: 0.1s;
|
||||||
|
--button-hover: #324759;
|
||||||
|
|
||||||
|
--scrollbar-thumb: var(--button-hover);
|
||||||
|
--scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(+8%));
|
||||||
|
|
||||||
|
--form-placeholder: #a9a9a9;
|
||||||
|
--form-text: #ffffff;
|
||||||
|
|
||||||
|
--variable: #d941e2;
|
||||||
|
--highlight: #efdb43;
|
||||||
|
}
|
||||||
27
src/variables-light.css
Executable file
27
src/variables-light.css
Executable file
@@ -0,0 +1,27 @@
|
|||||||
|
:root {
|
||||||
|
--background-body: #ffffff;
|
||||||
|
--background: #efefef;
|
||||||
|
--background-alt: #f7f7f7;
|
||||||
|
|
||||||
|
--selection: #9e9e9e;
|
||||||
|
|
||||||
|
--text-main: #363636;
|
||||||
|
--text-bright: #000000;
|
||||||
|
|
||||||
|
--links: #0076d1;
|
||||||
|
--focus: #0096bfab;
|
||||||
|
--border: #dbdbdb;
|
||||||
|
--code: #000000;
|
||||||
|
|
||||||
|
--animation-duration: 0.1s;
|
||||||
|
--button-hover: #dddddd;
|
||||||
|
|
||||||
|
--scrollbar-thumb: color-mod(var(--button-hover) lightness(-3%));
|
||||||
|
--scrollbar-thumb-hover: color-mod(var(--button-hover) lightness(-10%));
|
||||||
|
|
||||||
|
--form-placeholder: #949494;
|
||||||
|
--form-text: #000000;
|
||||||
|
|
||||||
|
--variable: #39a33c;
|
||||||
|
--highlight: #ffff00;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user