mirror of
https://github.com/kognise/water.css.git
synced 2025-08-10 15:14:34 +02:00
Merge branch 'master' into bugfix/custom-boxes
This commit is contained in:
Kognise
1
.gitattributes
vendored
Normal file
1
.gitattributes
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/dist/* -diff
|
||||
1
.github/CONTRIBUTING.md
vendored
Executable file
1
.github/CONTRIBUTING.md
vendored
Executable file
@@ -0,0 +1 @@
|
||||
> 💡 TODO: Add contributing guide
|
||||
52
README.md
52
README.md
@@ -2,7 +2,7 @@
|
||||
|
||||
[](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.producthunt.com/posts/water-css)
|
||||
@@ -10,12 +10,12 @@
|
||||
|
||||
## Goals
|
||||
|
||||
- Responsive
|
||||
- Good code quality
|
||||
- Good browser support (works on my old kindle's browser :P)
|
||||
- Small size (< 2kb)
|
||||
- Beautiful
|
||||
- No classes
|
||||
- Responsive
|
||||
- Good code quality
|
||||
- Good browser support (works on my old kindle's browser :P)
|
||||
- Small size (< 2kb)
|
||||
- Beautiful
|
||||
- No classes
|
||||
|
||||
## Why?
|
||||
|
||||
@@ -31,15 +31,35 @@ You probably don't want to use it for a production app or something that has mor
|
||||
|
||||
## How?
|
||||
|
||||
Just stick this in your head:
|
||||
Just stick this in your `<head>`:
|
||||
|
||||
```html
|
||||
<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.css'>
|
||||
```
|
||||
### 🌙 Dark theme:
|
||||
|
||||
Well, there's a dark theme and a light theme. If you want the light theme, use `light.css` instead of `dark.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).
|
||||
### ☀ 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/)
|
||||
|
||||
@@ -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.
|
||||
|
||||
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
|
||||
@@ -61,6 +81,8 @@ And make sure to run `yarn build` before pushing any changes! Thanks for taking
|
||||
|
||||
## 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:
|
||||
|
||||
- `$background`
|
||||
@@ -73,6 +95,8 @@ Do you want to make your own theme different from the light or dark themes? Sinc
|
||||
- `$code`
|
||||
- `$button-hover`
|
||||
- `$animation-duration`
|
||||
- `$scrollbar-thumb`
|
||||
- `$scrollbar-thumb-hover`
|
||||
- `$form-placeholder`
|
||||
- `$form-text`
|
||||
|
||||
|
||||
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":["/**\r\n * Dark-themed version for legacy browsers:\r\n * Loads the compiled, standalone version of the dark theme,\r\n * but overrides it with the compiled, standalone version of the light theme\r\n * if a system-wide theme preference is set on the user's device.\r\n */\r\n\r\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css');\r\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css')\r\n(prefers-color-scheme: light);\r\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":["/**\r\n * Dark-themed version for legacy browsers:\r\n * Loads the compiled, standalone version of the dark theme,\r\n * but overrides it with the compiled, standalone version of the light theme\r\n * if a system-wide theme preference is set on the user's device.\r\n */\r\n\r\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css');\r\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css')\r\n(prefers-color-scheme: light);\r\n"]}
|
||||
420
dist/dark-legacy.standalone.css
vendored
Executable file
420
dist/dark-legacy.standalone.css
vendored
Executable file
@@ -0,0 +1,420 @@
|
||||
/**
|
||||
* 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'] {
|
||||
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;
|
||||
}
|
||||
|
||||
select {
|
||||
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: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 {
|
||||
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']: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: 0.5;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
::-ms-input-placeholder {
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
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=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,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:not([type=checkbox]):not([type=radio]),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)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]: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}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
364
dist/dark.css
vendored
364
dist/dark.css
vendored
@@ -1,2 +1,364 @@
|
||||
@charset "UTF-8";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}blockquote{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:"💬 "}button,input[type=button],input[type=checkbox],input[type=radio],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,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;-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]{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;transform:translateY(-50%) translateY(-.3px) translateX(-2.7px)}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=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}a{text-decoration:none;color:#41adff}a:hover{text-decoration:underline}code,kbd{background:#161f27;color:#ffbe85;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%}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:#161f27}::-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}
|
||||
/**
|
||||
* 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'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input:not([type='checkbox']):not([type='radio']),
|
||||
select {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
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: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: var(--button-hover);
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
button:focus,
|
||||
textarea:focus {
|
||||
box-shadow: 0 0 0 2px var(--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: 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);
|
||||
}
|
||||
|
||||
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 */
|
||||
|
||||
2
dist/dark.css.map
vendored
2
dist/dark.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/dark.min.css
vendored
Normal file
2
dist/dark.min.css
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
:root{--background-body:#202b38;--background:#161f27;--background-alt:#1a242f;--selection:#161f27;--text-main:#dbdbdb;--text-bright:#fff;--links:#41adff;--focus:rgba(0,150,191,0.67);--border:#dbdbdb;--code:#ffbe85;--animation-duration:0.1s;--button-hover:#324759;--scrollbar-thumb:var(--button-hover);--scrollbar-thumb-hover:#415c73;--form-placeholder:#a9a9a9;--form-text:#fff;--variable:#d941e2;--highlight:#efdb43}@media (prefers-color-scheme:light){:root{--background-body:#fff;--background:#efefef;--background-alt:#f7f7f7;--selection:#9e9e9e;--text-main:#363636;--text-bright:#000;--links:#0076d1;--focus:rgba(0,150,191,0.67);--border:#dbdbdb;--code:#000;--animation-duration:0.1s;--button-hover:#ddd;--scrollbar-thumb:#2c3f4f;--scrollbar-thumb-hover:#202d38;--form-placeholder:#949494;--form-text:#000;--variable:#39a33c;--highlight:#ff0}}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)}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}q:after,q:before{content:none}blockquote,q{border-left:4px solid var(--focus);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:var(--highlight);border-radius:2px;padding:0 2px;color:#000}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,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}button,input:not([type=checkbox]):not([type=radio]),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:var(--button-hover)}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px var(--focus)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]: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:var(--form-placeholder)}:-ms-input-placeholder{color:var(--form-placeholder)}::-ms-input-placeholder{color:var(--form-placeholder)}::placeholder{color:var(--form-placeholder)}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}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(2n){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.min.css.map */
|
||||
1
dist/dark.min.css.map
vendored
Normal file
1
dist/dark.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
331
dist/dark.standalone.css
vendored
Executable file
331
dist/dark.standalone.css
vendored
Executable file
@@ -0,0 +1,331 @@
|
||||
/**
|
||||
* 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'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input:not([type='checkbox']):not([type='radio']),
|
||||
select {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
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: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: var(--button-hover);
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
button:focus,
|
||||
textarea:focus {
|
||||
box-shadow: 0 0 0 2px var(--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: 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);
|
||||
}
|
||||
|
||||
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
@@ -0,0 +1,2 @@
|
||||
:root{--background-body:#202b38;--background:#161f27;--background-alt:#1a242f;--selection:#161f27;--text-main:#dbdbdb;--text-bright:#fff;--links:#41adff;--focus:rgba(0,150,191,0.67);--border:#dbdbdb;--code:#ffbe85;--animation-duration:0.1s;--button-hover:#324759;--scrollbar-thumb:var(--button-hover);--scrollbar-thumb-hover:#415c73;--form-placeholder:#a9a9a9;--form-text:#fff;--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)}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}q:after,q:before{content:none}blockquote,q{border-left:4px solid var(--focus);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:var(--highlight);border-radius:2px;padding:0 2px;color:#000}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,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}button,input:not([type=checkbox]):not([type=radio]),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:var(--button-hover)}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px var(--focus)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]: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:var(--form-placeholder)}:-ms-input-placeholder{color:var(--form-placeholder)}::-ms-input-placeholder{color:var(--form-placeholder)}::placeholder{color:var(--form-placeholder)}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}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(2n){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.min.css.map */
|
||||
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":["/**\r\n * Light-themed version for legacy browsers:\r\n * Loads the compiled, standalone version of the light theme at runtime,\r\n * but overrides it with the compiled, standalone version of the dark theme\r\n * if a system-wide theme preference is set on the user's device.\r\n */\r\n\r\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css');\r\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css')\r\n(prefers-color-scheme: dark);\r\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":["/**\r\n * Light-themed version for legacy browsers:\r\n * Loads the compiled, standalone version of the light theme at runtime,\r\n * but overrides it with the compiled, standalone version of the dark theme\r\n * if a system-wide theme preference is set on the user's device.\r\n */\r\n\r\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css');\r\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css')\r\n(prefers-color-scheme: dark);\r\n"]}
|
||||
420
dist/light-legacy.standalone.css
vendored
Executable file
420
dist/light-legacy.standalone.css
vendored
Executable file
@@ -0,0 +1,420 @@
|
||||
/**
|
||||
* 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'] {
|
||||
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;
|
||||
}
|
||||
|
||||
select {
|
||||
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: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 {
|
||||
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']: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: 0.5;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: #949494;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: #949494;
|
||||
}
|
||||
|
||||
::-ms-input-placeholder {
|
||||
color: #949494;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: #949494;
|
||||
}
|
||||
|
||||
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=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,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:not([type=checkbox]):not([type=radio]),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)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]: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}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
363
dist/light.css
vendored
363
dist/light.css
vendored
@@ -1,2 +1,363 @@
|
||||
@charset "UTF-8";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}blockquote{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:"💬 "}button,input[type=button],input[type=checkbox],input[type=radio],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,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;-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]{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;transform:translateY(-50%) translateY(-.3px) translateX(-2.7px)}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=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}a{text-decoration:none;color:#0076d1}a:hover{text-decoration:underline}code,kbd{background:#efefef;color:#000;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%}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:#efefef}::-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}
|
||||
/**
|
||||
* 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'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input:not([type='checkbox']):not([type='radio']),
|
||||
select {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
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: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: var(--button-hover);
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
button:focus,
|
||||
textarea:focus {
|
||||
box-shadow: 0 0 0 2px var(--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: 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);
|
||||
}
|
||||
|
||||
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 */
|
||||
|
||||
2
dist/light.css.map
vendored
2
dist/light.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/light.min.css
vendored
Normal file
2
dist/light.min.css
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
:root{--background-body:#fff;--background:#efefef;--background-alt:#f7f7f7;--selection:#9e9e9e;--text-main:#363636;--text-bright:#000;--links:#0076d1;--focus:rgba(0,150,191,0.67);--border:#dbdbdb;--code:#000;--animation-duration:0.1s;--button-hover:#ddd;--scrollbar-thumb:#d5d5d5;--scrollbar-thumb-hover:#c4c4c4;--form-placeholder:#949494;--form-text:#000;--variable:#39a33c;--highlight:#ff0}@media (prefers-color-scheme:dark){:root{--background-body:#202b38;--background:#161f27;--background-alt:#1a242f;--selection:#161f27;--text-main:#dbdbdb;--text-bright:#fff;--links:#41adff;--focus:rgba(0,150,191,0.67);--border:#dbdbdb;--code:#ffbe85;--animation-duration:0.1s;--button-hover:#324759;--scrollbar-thumb:var(--button-hover);--scrollbar-thumb-hover:#141414;--form-placeholder:#a9a9a9;--form-text:#fff;--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)}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}q:after,q:before{content:none}blockquote,q{border-left:4px solid var(--focus);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:var(--highlight);border-radius:2px;padding:0 2px;color:#000}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,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}button,input:not([type=checkbox]):not([type=radio]),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:var(--button-hover)}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px var(--focus)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]: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:var(--form-placeholder)}:-ms-input-placeholder{color:var(--form-placeholder)}::-ms-input-placeholder{color:var(--form-placeholder)}::placeholder{color:var(--form-placeholder)}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}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(2n){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.min.css.map */
|
||||
1
dist/light.min.css.map
vendored
Normal file
1
dist/light.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
331
dist/light.standalone.css
vendored
Executable file
331
dist/light.standalone.css
vendored
Executable file
@@ -0,0 +1,331 @@
|
||||
/**
|
||||
* 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'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input:not([type='checkbox']):not([type='radio']),
|
||||
select {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
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: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: var(--button-hover);
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
button:focus,
|
||||
textarea:focus {
|
||||
box-shadow: 0 0 0 2px var(--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: 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);
|
||||
}
|
||||
|
||||
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
@@ -0,0 +1,2 @@
|
||||
:root{--background-body:#fff;--background:#efefef;--background-alt:#f7f7f7;--selection:#9e9e9e;--text-main:#363636;--text-bright:#000;--links:#0076d1;--focus:rgba(0,150,191,0.67);--border:#dbdbdb;--code:#000;--animation-duration:0.1s;--button-hover:#ddd;--scrollbar-thumb:#d5d5d5;--scrollbar-thumb-hover:#c4c4c4;--form-placeholder:#949494;--form-text:#000;--variable:#39a33c;--highlight:#ff0}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)}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}q:after,q:before{content:none}blockquote,q{border-left:4px solid var(--focus);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:var(--highlight);border-radius:2px;padding:0 2px;color:#000}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,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}button,input:not([type=checkbox]):not([type=radio]),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:var(--button-hover)}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px var(--focus)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]: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:var(--form-placeholder)}:-ms-input-placeholder{color:var(--form-placeholder)}::-ms-input-placeholder{color:var(--form-placeholder)}::placeholder{color:var(--form-placeholder)}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}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(2n){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.min.css.map */
|
||||
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
135
gulpfile.js
135
gulpfile.js
@@ -1,66 +1,113 @@
|
||||
const gulp = require('gulp')
|
||||
const sass = require('gulp-sass')
|
||||
const postcss = require('gulp-postcss')
|
||||
const autoprefixer = require('autoprefixer')
|
||||
const cssnano = require('cssnano')
|
||||
const sourcemaps = require('gulp-sourcemaps')
|
||||
const bytediff = require('gulp-bytediff')
|
||||
const browserSync = require('browser-sync').create()
|
||||
const chalk = require('chalk');
|
||||
const chalk = require('chalk')
|
||||
const rename = require('gulp-rename')
|
||||
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 = {
|
||||
styles: {
|
||||
src: 'src/**/*.scss',
|
||||
dest: 'dist'
|
||||
},
|
||||
html: {
|
||||
src: 'index.html'
|
||||
}
|
||||
srcDir: 'src/*',
|
||||
docsDir: '*',
|
||||
styles: { src: 'src/builds/*.css', dest: 'dist' },
|
||||
}
|
||||
|
||||
// https://stackoverflow.com/a/20732091
|
||||
function humanFileSize(size) {
|
||||
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];
|
||||
};
|
||||
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]
|
||||
}
|
||||
|
||||
function formatByteMessage(source, data) {
|
||||
const change = (data.savings > 0 ? 'saved' : 'gained')
|
||||
const prettySavings = humanFileSize(Math.abs(data.savings))
|
||||
const prettyStartSize = humanFileSize(data.startSize)
|
||||
let prettyEndSize = humanFileSize(data.endSize)
|
||||
let message = ''
|
||||
|
||||
if (data.endSize > data.startSize) {
|
||||
prettyEndSize = chalk.yellow(prettyEndSize)
|
||||
}
|
||||
if (data.startSize !== data.endSize) {
|
||||
const change = data.savings > 0 ? 'saved' : 'gained'
|
||||
const prettySavings = humanFileSize(Math.abs(data.savings))
|
||||
let prettyEndSize = humanFileSize(data.endSize)
|
||||
|
||||
if (data.endSize < data.startSize) {
|
||||
prettyEndSize = chalk.green(prettyEndSize)
|
||||
}
|
||||
if (data.endSize > data.startSize) prettyEndSize = chalk.yellow(prettyEndSize)
|
||||
if (data.endSize < data.startSize) prettyEndSize = chalk.green(prettyEndSize)
|
||||
|
||||
return `${chalk.cyan(source.padStart(12, ' '))}: ${data.fileName} ${change} ${prettySavings} (${prettyStartSize} -> ${prettyEndSize})`
|
||||
message = chalk`${change} ${prettySavings} (${prettyStartSize} -> {bold ${prettyEndSize}})`
|
||||
} else message = chalk`kept original filesize. ({bold ${prettyStartSize}})`
|
||||
|
||||
return chalk`{cyan ${source.padStart(12, ' ')}}: {bold ${data.fileName}} ${message}`
|
||||
}
|
||||
|
||||
function style() {
|
||||
return (
|
||||
gulp.src(paths.styles.src)
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(sass())
|
||||
.on('error', sass.logError)
|
||||
.pipe(bytediff.start())
|
||||
.pipe(postcss([ autoprefixer()]))
|
||||
.pipe(bytediff.stop((data) => formatByteMessage('autoprefixer', data)))
|
||||
.pipe(bytediff.start())
|
||||
.pipe(postcss([cssnano()]))
|
||||
.pipe(bytediff.stop((data) => formatByteMessage('cssnano', data)))
|
||||
.pipe(sourcemaps.write('.'))
|
||||
.pipe(gulp.dest(paths.styles.dest))
|
||||
.pipe(browserSync.stream())
|
||||
)
|
||||
}
|
||||
const isLegacy = path => /legacy/.test(path)
|
||||
|
||||
function reload() {
|
||||
browserSync.reload()
|
||||
const excludeModern = filter(file => isLegacy(file.path), { restore: true })
|
||||
const excludeLegacy = filter(file => !isLegacy(file.path), { restore: true })
|
||||
|
||||
return (
|
||||
gulp
|
||||
.src(paths.styles.src)
|
||||
// Add sourcemaps
|
||||
.pipe(sourcemaps.init())
|
||||
// Resolve imports and calculated colors
|
||||
.pipe(postcss([postcssImport(), postcssColorModFunction()]))
|
||||
|
||||
// * Process legacy builds *
|
||||
.pipe(excludeModern)
|
||||
// Inline variable values so CSS works in legacy browsers
|
||||
.pipe(postcss([postcssCssVariables()]))
|
||||
// Calculate size before autoprefixing
|
||||
.pipe(bytediff.start())
|
||||
// autoprefix
|
||||
.pipe(postcss([autoprefixer()]))
|
||||
// Write the amount gained by autoprefixing
|
||||
.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
|
||||
.pipe(sourcemaps.write('.'))
|
||||
// Flatten output so files end up in dist/*, not dist/builds/*
|
||||
.pipe(flatten())
|
||||
// Write pre-minified styles
|
||||
.pipe(gulp.dest(paths.styles.dest))
|
||||
// Remove sourcemaps from the pipeline, only keep css
|
||||
.pipe(filter('**/*.css'))
|
||||
// Calculate size before minifying
|
||||
.pipe(bytediff.start())
|
||||
// Minify using cssnano
|
||||
.pipe(postcss([cssnano()]))
|
||||
// Write the amount saved by minifying
|
||||
.pipe(bytediff.stop(data => formatByteMessage('cssnano', data)))
|
||||
// Rename the files have the .min suffix
|
||||
.pipe(rename({ suffix: '.min' }))
|
||||
// Write the sourcemaps after making all changes
|
||||
.pipe(sourcemaps.write('.'))
|
||||
// Write the minified files
|
||||
.pipe(gulp.dest(paths.styles.dest))
|
||||
.pipe(sizereport({ gzip: true, total: false, title: 'SIZE REPORT' }))
|
||||
// Stream any changes to browserSync
|
||||
.pipe(browserSync.stream())
|
||||
)
|
||||
}
|
||||
|
||||
function watch() {
|
||||
@@ -70,12 +117,12 @@ function watch() {
|
||||
server: {
|
||||
baseDir: './',
|
||||
},
|
||||
startPath: 'index.html'
|
||||
startPath: 'index.html',
|
||||
})
|
||||
|
||||
gulp.watch(paths.styles.src, style)
|
||||
gulp.watch(paths.html.src, reload)
|
||||
gulp.watch(paths.srcDir, style)
|
||||
gulp.watch([paths.srcDir, paths.docsDir], browserSync.reload)
|
||||
}
|
||||
|
||||
module.exports.style = style
|
||||
module.exports.watch = watch
|
||||
module.exports.watch = watch
|
||||
|
||||
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"
|
||||
}
|
||||
71
index.html
71
index.html
@@ -1,28 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang='en'>
|
||||
|
||||
<head>
|
||||
<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'>
|
||||
<!-- 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>
|
||||
window.dataLayer = window.dataLayer || []
|
||||
function gtag(){dataLayer.push(arguments)}
|
||||
function gtag() { dataLayer.push(arguments) }
|
||||
gtag('js', new Date())
|
||||
gtag('config', 'UA-116663597-6')
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Water.css</h1>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
<ul>
|
||||
@@ -36,13 +56,15 @@
|
||||
|
||||
<h2>Is it responsive?</h2>
|
||||
<p>
|
||||
<strong>Heck yeah!</strong> It doesn't include any fancy styles so it's 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!
|
||||
<strong>Heck yeah!</strong> It doesn't include any fancy styles so it's 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>
|
||||
In fact, try resizing this page. Everything flows super nicely as you'll see.
|
||||
</p>
|
||||
<button id='switch'>Switch theme</button>
|
||||
<button type="button" id='switch'>Switch theme</button>
|
||||
|
||||
<h2>Element demos</h2>
|
||||
<p>
|
||||
@@ -91,11 +113,14 @@
|
||||
|
||||
<h3>Code</h3>
|
||||
<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 <kbd>Ctrl-C</kbd>.
|
||||
Did you know, <code>alert(1)</code> can show an alert in JavaScript!
|
||||
</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>
|
||||
|
||||
<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>
|
||||
<p>Here's a horizontal rule and image because I don't know where else to put them.</p>
|
||||
<img src='https://placekitten.com/408/287' alt='Example kitten'>
|
||||
@@ -131,15 +156,23 @@
|
||||
|
||||
<h3>Typography</h3>
|
||||
<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.
|
||||
<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.
|
||||
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.
|
||||
<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>
|
||||
|
||||
<blockquote cite='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote'>
|
||||
"The HTML blockquote Element (or HTML Block Quotation Element) indicates
|
||||
that the enclosed text is an extended quotation. Usually, this is
|
||||
rendered visually by indentation (see
|
||||
<a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#Usage_notes'>Notes</a>
|
||||
<a
|
||||
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."
|
||||
@@ -149,6 +182,10 @@
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<q>Quotes (<q>) share the same style as blockquotes.</q>
|
||||
|
||||
<p>Use <mark> to <mark>highlight the important stuff</mark>.</p>
|
||||
|
||||
<ul>
|
||||
<li>Unordered list item 1</li>
|
||||
<li>Unordered list item 2</li>
|
||||
@@ -164,9 +201,9 @@
|
||||
Addresses are also styled to be <strong>awesome</strong>!
|
||||
</p>
|
||||
<address>
|
||||
<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='sms:666-666-6666'>666-666-6666</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='sms:666-666-6666'>666-666-6666</a><br />
|
||||
</address>
|
||||
|
||||
<h1>Heading 1</h1>
|
||||
@@ -176,6 +213,8 @@
|
||||
<h5>Heading 5</h5>
|
||||
<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>
|
||||
|
||||
</html>
|
||||
|
||||
2
index.js
2
index.js
@@ -1,2 +1,2 @@
|
||||
const gulpfile = require('./gulpfile')
|
||||
gulpfile.watch()
|
||||
gulpfile.watch()
|
||||
|
||||
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 |
20
package.json
20
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"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.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
@@ -26,17 +26,21 @@
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^9.5.1",
|
||||
"browser-sync": "^2.26.3",
|
||||
"chalk": "^2.4.2",
|
||||
"cssnano": "^4.1.10",
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-bytediff": "^1.0.0",
|
||||
"gulp-filter": "^5.1.0",
|
||||
"gulp-flatten": "^0.4.0",
|
||||
"gulp-postcss": "^8.0.0",
|
||||
"gulp-sass": "^4.0.2",
|
||||
"gulp-sourcemaps": "^2.6.5"
|
||||
"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": [
|
||||
"defaults AND not android 4.4.3"
|
||||
],
|
||||
"dependencies": {
|
||||
"chalk": "^2.4.2"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
125
script.js
125
script.js
@@ -1,11 +1,114 @@
|
||||
document.getElementById('switch').addEventListener('click', () => {
|
||||
const stylesheet = document.getElementById('stylesheet')
|
||||
const ph = document.getElementById('ph')
|
||||
if (stylesheet.getAttribute('href') === 'dist/dark.css') {
|
||||
stylesheet.setAttribute('href', 'dist/light.css')
|
||||
ph.src = ph.src.replace('theme=dark', 'theme=light')
|
||||
} else {
|
||||
stylesheet.setAttribute('href', 'dist/dark.css')
|
||||
ph.src = ph.src.replace('theme=light', 'theme=dark')
|
||||
}
|
||||
})
|
||||
!(function() {
|
||||
const iconModeSwitcher = window.faviconModeSwitcher && faviconModeSwitcher.default
|
||||
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,21 +0,0 @@
|
||||
$background: #202b38 !default;
|
||||
$background-alt: #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,21 +0,0 @@
|
||||
$background: #ffffff !default;
|
||||
$background-alt: #efefef !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;
|
||||
}
|
||||
6
src/parts/_core.css
Normal file
6
src/parts/_core.css
Normal file
@@ -0,0 +1,6 @@
|
||||
@import '_base.css';
|
||||
@import '_typography.css';
|
||||
@import '_forms.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';
|
||||
@@ -1,109 +0,0 @@
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='button'],
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
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;
|
||||
|
||||
-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'],
|
||||
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: $button-hover;
|
||||
|
||||
&::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,
|
||||
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 {
|
||||
text-decoration: none;
|
||||
color: $links;
|
||||
color: var(--links);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
@@ -1,10 +1,11 @@
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid $border;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
table {
|
||||
@@ -13,17 +14,18 @@ table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td, th {
|
||||
td,
|
||||
th {
|
||||
padding: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
border-bottom: 1px solid $border;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: $background-alt;
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@@ -32,15 +34,19 @@ tbody tr:nth-child(even) {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: $background-alt;
|
||||
background: var(--background);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: $scrollbar-thumb;
|
||||
background: var(--scrollbar-thumb);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: $scrollbar-thumb-hover;
|
||||
}
|
||||
background: var(--scrollbar-thumb-hover);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--selection);
|
||||
}
|
||||
@@ -19,7 +19,7 @@ h4,
|
||||
h5,
|
||||
h6,
|
||||
strong {
|
||||
color: $text-bright;
|
||||
color: var(--text-bright);
|
||||
}
|
||||
|
||||
h1,
|
||||
@@ -34,8 +34,16 @@ th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid $focus;
|
||||
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;
|
||||
@@ -64,4 +72,11 @@ a[href^='tel']::before {
|
||||
|
||||
a[href^='sms']::before {
|
||||
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