mirror of
https://github.com/kognise/water.css.git
synced 2025-09-08 20:20:51 +02:00
Merge branch 'master' into docs/theming
This commit is contained in:
Jonas
GitHub
76
.github/CONTRIBUTING.md
vendored
76
.github/CONTRIBUTING.md
vendored
@@ -1 +1,75 @@
|
||||
> 💡 TODO: Add contributing guide
|
||||
# Contributing to Water.css
|
||||
|
||||
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.
|
||||
|
||||
Before contributing, please read the [code of conduct](CODE_OF_CONDUCT.md). Also you agree that your contributions will be licensed under its [MIT License](./LICENSE.md).
|
||||
|
||||
## How to get started
|
||||
|
||||
1. Get a copy of repository. It is recommended to fork it first and clone to your machine using `git`.
|
||||
|
||||
2. Make sure that you have [yarn](https://yarnpkg.com) and install dependencies listed in `package.json` using it.
|
||||
|
||||
```
|
||||
yarn
|
||||
```
|
||||
|
||||
3. Then you can run development server with live reloading out of the box and play around with the framework.
|
||||
|
||||
```
|
||||
yarn dev
|
||||
```
|
||||
|
||||
So you can access the `index.html` in browser by visiting http://localhost:3000/index.html
|
||||
|
||||
More details will be provided in command line interface.
|
||||
|
||||
*Note.* A script that builds distribution ready files is also available but it is not the part of development workflow, it is designed to be triggered automatically while publishing a new version of a package. The script itself could be run manually:
|
||||
|
||||
```
|
||||
yarn build
|
||||
```
|
||||
|
||||
## How to find issues to work on
|
||||
|
||||
If you are new to contributing open-source software, you can starty by picking any relevant issue that is tagged with `good first issue` [there](
|
||||
https://github.com/kognise/water.css/contribute).
|
||||
|
||||
Also everyone is welcome to contribute on issues tagged with `help wanted`, you can find it filtered [here](https://github.com/kognise/water.css/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22).
|
||||
|
||||
|
||||
## How to make a pull request
|
||||
|
||||
It is a few general rules of thumb about making pull requests:
|
||||
|
||||
* Make sure that your pull request covers a small and well defined scope
|
||||
|
||||
* Make small commits with clear and explainful messages
|
||||
|
||||
* You need to provide a clear description about your contribution on GitHub
|
||||
|
||||
## Directory structure
|
||||
|
||||
```
|
||||
.
|
||||
├── dist
|
||||
├── icons
|
||||
└── src
|
||||
├── assets
|
||||
├── builds
|
||||
└── parts
|
||||
```
|
||||
|
||||
`dist` directory is ignored by git and it contains built assets for distribution
|
||||
|
||||
`icons` directory contains water.css favicons used in `index.html` demo/docs file
|
||||
|
||||
`src` directory contains all the source stylesheets groupped into folders and variables
|
||||
|
||||
`src/assets` directory contains images used for UI elements styling
|
||||
|
||||
`src/builds` directory contains base style files prepared for different kind of builds (i.e. light and dark themes, supporting legacy browsers, etc)
|
||||
|
||||
`src/parts` directory contains the whole source organized in separate files by its kind like forms, links, typography
|
||||
6
.gitignore
vendored
6
.gitignore
vendored
@@ -82,3 +82,9 @@ typings/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# IntelliJ IDE
|
||||
.idea/
|
||||
|
||||
# Output of yarn build
|
||||
dist/
|
||||
3
.stylelintrc
Normal file
3
.stylelintrc
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "stylelint-config-standard"
|
||||
}
|
||||
@@ -38,11 +38,11 @@ You probably don't want to use it for a production app or something that is more
|
||||
|
||||
Just stick this in your `<head>`:
|
||||
|
||||
### 🌙 Dark theme:
|
||||
### 🌙 Dark Theme:
|
||||
|
||||
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css">`
|
||||
|
||||
### ☀ Light theme:
|
||||
### ☀ Light Theme:
|
||||
|
||||
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css">`
|
||||
|
||||
@@ -144,6 +144,10 @@ $ yarn dev
|
||||
Before submitting your first pull request, make sure to check out our [Contributing Guide](https://github.com/kognise/water.css/tree/master/.github/CONTRIBUTING.md)!
|
||||
Thanks for taking the time to contribute :)
|
||||
|
||||
## Contributing
|
||||
|
||||
Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.
|
||||
|
||||
## Todos
|
||||
|
||||
- Add screenshots
|
||||
|
||||
12
dist/dark-legacy.css
vendored
12
dist/dark-legacy.css
vendored
@@ -1,12 +0,0 @@
|
||||
|
||||
|
||||
@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
1
dist/dark-legacy.css.map
vendored
@@ -1 +0,0 @@
|
||||
{"version":3,"sources":["dark-legacy.css"],"names":[],"mappings":";;AAOA,uGAAuG;AACvG,sIAC6B;AAT7B;;;;;EAKE","file":"dark-legacy.css","sourcesContent":["/**\n * Dark-themed version for legacy browsers:\n * Loads the compiled, standalone version of the dark theme,\n * but overrides it with the compiled, standalone version of the light theme\n * if a system-wide theme preference is set on the user's device.\n */\n\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css');\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css')\n(prefers-color-scheme: light);\n"]}
|
||||
2
dist/dark-legacy.min.css
vendored
2
dist/dark-legacy.min.css
vendored
@@ -1,2 +0,0 @@
|
||||
@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
1
dist/dark-legacy.min.css.map
vendored
@@ -1 +0,0 @@
|
||||
{"version":3,"sources":["dark-legacy.css"],"names":[],"mappings":"AAOA,uGAAuG,CACvG,sIAHE","file":"dark-legacy.min.css","sourcesContent":["/**\n * Dark-themed version for legacy browsers:\n * Loads the compiled, standalone version of the dark theme,\n * but overrides it with the compiled, standalone version of the light theme\n * if a system-wide theme preference is set on the user's device.\n */\n\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css');\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css')\n(prefers-color-scheme: light);\n"]}
|
||||
374
dist/dark-legacy.standalone.css
vendored
374
dist/dark-legacy.standalone.css
vendored
@@ -1,374 +0,0 @@
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
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: '💬 ';
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
kbd {
|
||||
background: #161f27;
|
||||
color: #ffbe85;
|
||||
padding: 2.5px 5px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
padding: 10px;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
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
1
dist/dark-legacy.standalone.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/dark-legacy.standalone.min.css
vendored
2
dist/dark-legacy.standalone.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/dark-legacy.standalone.min.css.map
vendored
2
dist/dark-legacy.standalone.min.css.map
vendored
File diff suppressed because one or more lines are too long
268
dist/dark.css
vendored
268
dist/dark.css
vendored
@@ -16,6 +16,7 @@
|
||||
|
||||
--text-main: #dbdbdb;
|
||||
--text-bright: #ffffff;
|
||||
--text-muted: #717880;
|
||||
|
||||
--links: #41adff;
|
||||
--focus: #0096bfab;
|
||||
@@ -30,6 +31,11 @@
|
||||
|
||||
--form-placeholder: #a9a9a9;
|
||||
--form-text: #ffffff;
|
||||
|
||||
--variable: #d941e2;
|
||||
--highlight: #efdb43;
|
||||
|
||||
--select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E");
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
@@ -42,6 +48,7 @@
|
||||
|
||||
--text-main: #363636;
|
||||
--text-bright: #000000;
|
||||
--text-muted: #999999;
|
||||
|
||||
--links: #0076d1;
|
||||
--focus: #0096bfab;
|
||||
@@ -56,6 +63,11 @@
|
||||
|
||||
--form-placeholder: #949494;
|
||||
--form-text: #000000;
|
||||
|
||||
--variable: #39a33c;
|
||||
--highlight: #ffff00;
|
||||
|
||||
--select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23161f27'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -117,7 +129,15 @@ th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
q:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
q:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
blockquote , q{
|
||||
border-left: 4px solid var(--focus);
|
||||
margin: 1.5em 0em;
|
||||
padding: 0.5em 1em;
|
||||
@@ -125,8 +145,8 @@ blockquote {
|
||||
}
|
||||
|
||||
blockquote > footer {
|
||||
margin-top: 10px;
|
||||
font-style: normal;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
blockquote cite {
|
||||
@@ -149,10 +169,19 @@ a[href^='sms']::before {
|
||||
content: '💬 ';
|
||||
}
|
||||
|
||||
button,
|
||||
mark {
|
||||
background-color: var(--highlight);
|
||||
border-radius: 2px;
|
||||
padding: 0px 2px 0px 2px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
button, select,
|
||||
input[type='submit'],
|
||||
input[type='button'],
|
||||
input[type='checkbox'] {
|
||||
input[type='checkbox'],
|
||||
input[type='range'],
|
||||
input[type='radio'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -162,9 +191,9 @@ select {
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button,
|
||||
textarea {
|
||||
textarea,
|
||||
select {
|
||||
color: var(--form-text);
|
||||
background-color: var(--background);
|
||||
|
||||
@@ -180,7 +209,7 @@ textarea {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input:not([type='checkbox']):not([type='radio']),
|
||||
input,
|
||||
select,
|
||||
button,
|
||||
textarea {
|
||||
@@ -194,6 +223,21 @@ textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
select {
|
||||
background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;
|
||||
padding-right: 35px;
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
select[multiple] {
|
||||
padding-right: 10px;
|
||||
background-image: none;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='button'] {
|
||||
@@ -214,10 +258,46 @@ textarea:focus {
|
||||
box-shadow: 0 0 0 2px var(--focus);
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked,
|
||||
input[type='radio']:checked {
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before,
|
||||
input[type='radio']:checked::before {
|
||||
content: '•';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before {
|
||||
content: '✔';
|
||||
transform: translateY(-50%) translateY(0.5px) translateX(-6px);
|
||||
}
|
||||
|
||||
input[type='checkbox']:active,
|
||||
input[type='radio']:active,
|
||||
input[type='submit']:active,
|
||||
input[type='button']:active,
|
||||
input[type='range']:active,
|
||||
button:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
@@ -234,7 +314,7 @@ textarea:disabled {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
::-moz-placeholder {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
@@ -246,6 +326,107 @@ textarea:disabled {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px var(--focus) solid;
|
||||
border-radius: 6px;
|
||||
margin: 0;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
input[type='range']:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
transition: 0.2s;
|
||||
background: var(--background);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
-webkit-appearance: none;
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
input[type='range']:focus::-webkit-slider-runnable-track {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
transition: 0.2s;
|
||||
background: var(--background);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
input[type='range']::-ms-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
border-width: 16px 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-fill-lower {
|
||||
background: var(--background);
|
||||
border: 0.2px solid #010101;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-fill-upper {
|
||||
background: var(--background);
|
||||
border: 0.2px solid #010101;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
border: 1px solid #000000;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
input[type='range']:focus::-ms-fill-lower {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
input[type='range']:focus::-ms-fill-upper {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--links);
|
||||
@@ -255,12 +436,12 @@ a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd {
|
||||
background: var(--background);
|
||||
code, samp, time {
|
||||
background: var(--background);
|
||||
color: var(--code);
|
||||
padding: 2.5px 5px;
|
||||
border-radius: 6px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
@@ -269,6 +450,20 @@ pre > code {
|
||||
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;
|
||||
@@ -291,10 +486,14 @@ th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
thead {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
tfoot {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
@@ -326,4 +525,49 @@ tbody tr:nth-child(even) {
|
||||
background-color: var(--selection);
|
||||
}
|
||||
|
||||
details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
background-color: var(--background-alt);
|
||||
padding: 10px 10px 0;
|
||||
margin: 1em 0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
details[open] {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
details > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
details[open] summary {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
background-color: var(--background);
|
||||
padding: 10px;
|
||||
margin: -10px -10px 0;
|
||||
}
|
||||
|
||||
details > :not(summary) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
summary::-webkit-details-marker {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid var(--background);
|
||||
padding-top: 10px;
|
||||
font-size: 0.8em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/*# 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
2
dist/dark.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/dark.min.css.map
vendored
2
dist/dark.min.css.map
vendored
File diff suppressed because one or more lines are too long
262
dist/dark.standalone.css
vendored
262
dist/dark.standalone.css
vendored
@@ -13,6 +13,7 @@
|
||||
|
||||
--text-main: #dbdbdb;
|
||||
--text-bright: #ffffff;
|
||||
--text-muted: #717880;
|
||||
|
||||
--links: #41adff;
|
||||
--focus: #0096bfab;
|
||||
@@ -27,6 +28,11 @@
|
||||
|
||||
--form-placeholder: #a9a9a9;
|
||||
--form-text: #ffffff;
|
||||
|
||||
--variable: #d941e2;
|
||||
--highlight: #efdb43;
|
||||
|
||||
--select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E");
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -87,7 +93,15 @@ th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
q:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
q:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
blockquote , q{
|
||||
border-left: 4px solid var(--focus);
|
||||
margin: 1.5em 0em;
|
||||
padding: 0.5em 1em;
|
||||
@@ -95,8 +109,8 @@ blockquote {
|
||||
}
|
||||
|
||||
blockquote > footer {
|
||||
margin-top: 10px;
|
||||
font-style: normal;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
blockquote cite {
|
||||
@@ -119,10 +133,19 @@ a[href^='sms']::before {
|
||||
content: '💬 ';
|
||||
}
|
||||
|
||||
button,
|
||||
mark {
|
||||
background-color: var(--highlight);
|
||||
border-radius: 2px;
|
||||
padding: 0px 2px 0px 2px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
button, select,
|
||||
input[type='submit'],
|
||||
input[type='button'],
|
||||
input[type='checkbox'] {
|
||||
input[type='checkbox'],
|
||||
input[type='range'],
|
||||
input[type='radio'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -132,9 +155,9 @@ select {
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button,
|
||||
textarea {
|
||||
textarea,
|
||||
select {
|
||||
color: var(--form-text);
|
||||
background-color: var(--background);
|
||||
|
||||
@@ -150,7 +173,7 @@ textarea {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input:not([type='checkbox']):not([type='radio']),
|
||||
input,
|
||||
select,
|
||||
button,
|
||||
textarea {
|
||||
@@ -164,6 +187,21 @@ textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
select {
|
||||
background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;
|
||||
padding-right: 35px;
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
select[multiple] {
|
||||
padding-right: 10px;
|
||||
background-image: none;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='button'] {
|
||||
@@ -184,10 +222,46 @@ textarea:focus {
|
||||
box-shadow: 0 0 0 2px var(--focus);
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked,
|
||||
input[type='radio']:checked {
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before,
|
||||
input[type='radio']:checked::before {
|
||||
content: '•';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before {
|
||||
content: '✔';
|
||||
transform: translateY(-50%) translateY(0.5px) translateX(-6px);
|
||||
}
|
||||
|
||||
input[type='checkbox']:active,
|
||||
input[type='radio']:active,
|
||||
input[type='submit']:active,
|
||||
input[type='button']:active,
|
||||
input[type='range']:active,
|
||||
button:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
@@ -204,7 +278,7 @@ textarea:disabled {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
::-moz-placeholder {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
@@ -216,6 +290,107 @@ textarea:disabled {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px var(--focus) solid;
|
||||
border-radius: 6px;
|
||||
margin: 0;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
input[type='range']:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
transition: 0.2s;
|
||||
background: var(--background);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
-webkit-appearance: none;
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
input[type='range']:focus::-webkit-slider-runnable-track {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
transition: 0.2s;
|
||||
background: var(--background);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
input[type='range']::-ms-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
border-width: 16px 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-fill-lower {
|
||||
background: var(--background);
|
||||
border: 0.2px solid #010101;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-fill-upper {
|
||||
background: var(--background);
|
||||
border: 0.2px solid #010101;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
border: 1px solid #000000;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
input[type='range']:focus::-ms-fill-lower {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
input[type='range']:focus::-ms-fill-upper {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--links);
|
||||
@@ -225,12 +400,12 @@ a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd {
|
||||
background: var(--background);
|
||||
code, samp, time {
|
||||
background: var(--background);
|
||||
color: var(--code);
|
||||
padding: 2.5px 5px;
|
||||
border-radius: 6px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
@@ -239,6 +414,20 @@ pre > code {
|
||||
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;
|
||||
@@ -261,10 +450,14 @@ th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
thead {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
tfoot {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
@@ -296,4 +489,49 @@ tbody tr:nth-child(even) {
|
||||
background-color: var(--selection);
|
||||
}
|
||||
|
||||
details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
background-color: var(--background-alt);
|
||||
padding: 10px 10px 0;
|
||||
margin: 1em 0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
details[open] {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
details > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
details[open] summary {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
background-color: var(--background);
|
||||
padding: 10px;
|
||||
margin: -10px -10px 0;
|
||||
}
|
||||
|
||||
details > :not(summary) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
summary::-webkit-details-marker {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid var(--background);
|
||||
padding-top: 10px;
|
||||
font-size: 0.8em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=dark.standalone.css.map */
|
||||
|
||||
2
dist/dark.standalone.css.map
vendored
2
dist/dark.standalone.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/dark.standalone.min.css
vendored
2
dist/dark.standalone.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/dark.standalone.min.css.map
vendored
2
dist/dark.standalone.min.css.map
vendored
File diff suppressed because one or more lines are too long
12
dist/light-legacy.css
vendored
12
dist/light-legacy.css
vendored
@@ -1,12 +0,0 @@
|
||||
|
||||
|
||||
@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
1
dist/light-legacy.css.map
vendored
@@ -1 +0,0 @@
|
||||
{"version":3,"sources":["light-legacy.css"],"names":[],"mappings":";;AAOA,wGAAwG;AACxG,oIAC4B;AAT5B;;;;;EAKE","file":"light-legacy.css","sourcesContent":["/**\n * Light-themed version for legacy browsers:\n * Loads the compiled, standalone version of the light theme at runtime,\n * but overrides it with the compiled, standalone version of the dark theme\n * if a system-wide theme preference is set on the user's device.\n */\n\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css');\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css')\n(prefers-color-scheme: dark);\n"]}
|
||||
2
dist/light-legacy.min.css
vendored
2
dist/light-legacy.min.css
vendored
@@ -1,2 +0,0 @@
|
||||
@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
1
dist/light-legacy.min.css.map
vendored
@@ -1 +0,0 @@
|
||||
{"version":3,"sources":["light-legacy.css"],"names":[],"mappings":"AAOA,wGAAwG,CACxG,oIAHE","file":"light-legacy.min.css","sourcesContent":["/**\n * Light-themed version for legacy browsers:\n * Loads the compiled, standalone version of the light theme at runtime,\n * but overrides it with the compiled, standalone version of the dark theme\n * if a system-wide theme preference is set on the user's device.\n */\n\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css');\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css')\n(prefers-color-scheme: dark);\n"]}
|
||||
302
dist/light-legacy.standalone.css
vendored
302
dist/light-legacy.standalone.css
vendored
@@ -96,7 +96,22 @@ th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
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;
|
||||
@@ -104,8 +119,8 @@ blockquote {
|
||||
}
|
||||
|
||||
blockquote > footer {
|
||||
margin-top: 10px;
|
||||
font-style: normal;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
blockquote cite {
|
||||
@@ -128,10 +143,19 @@ a[href^='sms']::before {
|
||||
content: '💬 ';
|
||||
}
|
||||
|
||||
button,
|
||||
mark {
|
||||
background-color: #ffff00;
|
||||
border-radius: 2px;
|
||||
padding: 0px 2px 0px 2px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
button, select,
|
||||
input[type='submit'],
|
||||
input[type='button'],
|
||||
input[type='checkbox'] {
|
||||
input[type='checkbox'],
|
||||
input[type='range'],
|
||||
input[type='radio'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -156,22 +180,6 @@ input {
|
||||
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;
|
||||
@@ -204,7 +212,23 @@ textarea {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input:not([type='checkbox']):not([type='radio']),
|
||||
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;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button,
|
||||
textarea {
|
||||
@@ -218,6 +242,21 @@ textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
select {
|
||||
background: #efefef url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23161f27'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E") calc(100% - 12px) 50% / 12px no-repeat;
|
||||
padding-right: 35px;
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
select[multiple] {
|
||||
padding-right: 10px;
|
||||
background-image: none;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='button'] {
|
||||
@@ -253,10 +292,49 @@ textarea:focus {
|
||||
box-shadow: 0 0 0 2px #0096bfab;
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked {
|
||||
background: #dddddd;
|
||||
}
|
||||
|
||||
input[type='radio']:checked {
|
||||
background: #dddddd;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before,
|
||||
input[type='radio']:checked::before {
|
||||
content: '•';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before {
|
||||
content: '✔';
|
||||
transform: translateY(-50%) translateY(0.5px) translateX(-6px);
|
||||
}
|
||||
|
||||
input[type='checkbox']:active,
|
||||
input[type='radio']:active,
|
||||
input[type='submit']:active,
|
||||
input[type='button']:active,
|
||||
input[type='range']:active,
|
||||
button:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
@@ -285,6 +363,107 @@ textarea:disabled {
|
||||
color: #949494;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px #0096bfab solid;
|
||||
border-radius: 6px;
|
||||
margin: 0;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
input[type='range']:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
transition: 0.2s;
|
||||
background: #efefef;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: #dbdbdb;
|
||||
-webkit-appearance: none;
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
input[type='range']:focus::-webkit-slider-runnable-track {
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
transition: 0.2s;
|
||||
background: #efefef;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: #dbdbdb;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
border-width: 16px 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-fill-lower {
|
||||
background: #efefef;
|
||||
border: 0.2px solid #010101;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-fill-upper {
|
||||
background: #efefef;
|
||||
border: 0.2px solid #010101;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
border: 1px solid #000000;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: #dbdbdb;
|
||||
}
|
||||
|
||||
input[type='range']:focus::-ms-fill-lower {
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
input[type='range']:focus::-ms-fill-upper {
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #0076d1;
|
||||
@@ -295,17 +474,27 @@ a:hover {
|
||||
}
|
||||
|
||||
code {
|
||||
background: #efefef;
|
||||
background: #efefef;
|
||||
color: #000000;
|
||||
padding: 2.5px 5px;
|
||||
border-radius: 6px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
kbd {
|
||||
background: #efefef;
|
||||
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 {
|
||||
@@ -314,6 +503,20 @@ pre > code {
|
||||
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;
|
||||
@@ -336,10 +539,14 @@ th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
thead {
|
||||
border-bottom: 1px solid #dbdbdb;
|
||||
}
|
||||
|
||||
tfoot {
|
||||
border-top: 1px solid #dbdbdb;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
@@ -371,4 +578,49 @@ tbody tr:nth-child(even) {
|
||||
background-color: #9e9e9e;
|
||||
}
|
||||
|
||||
details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
background-color: #f7f7f7;
|
||||
padding: 10px 10px 0;
|
||||
margin: 1em 0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
details[open] {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
details > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
details[open] summary {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
background-color: #efefef;
|
||||
padding: 10px;
|
||||
margin: -10px -10px 0;
|
||||
}
|
||||
|
||||
details > :not(summary) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
summary::-webkit-details-marker {
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid #efefef;
|
||||
padding-top: 10px;
|
||||
font-size: 0.8em;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=light-legacy.standalone.css.map */
|
||||
|
||||
2
dist/light-legacy.standalone.css.map
vendored
2
dist/light-legacy.standalone.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/light-legacy.standalone.min.css
vendored
2
dist/light-legacy.standalone.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/light-legacy.standalone.min.css.map
vendored
2
dist/light-legacy.standalone.min.css.map
vendored
File diff suppressed because one or more lines are too long
268
dist/light.css
vendored
268
dist/light.css
vendored
@@ -16,6 +16,7 @@
|
||||
|
||||
--text-main: #363636;
|
||||
--text-bright: #000000;
|
||||
--text-muted: #999999;
|
||||
|
||||
--links: #0076d1;
|
||||
--focus: #0096bfab;
|
||||
@@ -30,6 +31,11 @@
|
||||
|
||||
--form-placeholder: #949494;
|
||||
--form-text: #000000;
|
||||
|
||||
--variable: #39a33c;
|
||||
--highlight: #ffff00;
|
||||
|
||||
--select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23161f27'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E");
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@@ -42,6 +48,7 @@
|
||||
|
||||
--text-main: #dbdbdb;
|
||||
--text-bright: #ffffff;
|
||||
--text-muted: #717880;
|
||||
|
||||
--links: #41adff;
|
||||
--focus: #0096bfab;
|
||||
@@ -56,6 +63,11 @@
|
||||
|
||||
--form-placeholder: #a9a9a9;
|
||||
--form-text: #ffffff;
|
||||
|
||||
--variable: #d941e2;
|
||||
--highlight: #efdb43;
|
||||
|
||||
--select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -117,7 +129,15 @@ th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
q:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
q:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
blockquote , q{
|
||||
border-left: 4px solid var(--focus);
|
||||
margin: 1.5em 0em;
|
||||
padding: 0.5em 1em;
|
||||
@@ -125,8 +145,8 @@ blockquote {
|
||||
}
|
||||
|
||||
blockquote > footer {
|
||||
margin-top: 10px;
|
||||
font-style: normal;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
blockquote cite {
|
||||
@@ -149,10 +169,19 @@ a[href^='sms']::before {
|
||||
content: '💬 ';
|
||||
}
|
||||
|
||||
button,
|
||||
mark {
|
||||
background-color: var(--highlight);
|
||||
border-radius: 2px;
|
||||
padding: 0px 2px 0px 2px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
button, select,
|
||||
input[type='submit'],
|
||||
input[type='button'],
|
||||
input[type='checkbox'] {
|
||||
input[type='checkbox'],
|
||||
input[type='range'],
|
||||
input[type='radio'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -162,9 +191,9 @@ select {
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button,
|
||||
textarea {
|
||||
textarea,
|
||||
select {
|
||||
color: var(--form-text);
|
||||
background-color: var(--background);
|
||||
|
||||
@@ -180,7 +209,7 @@ textarea {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input:not([type='checkbox']):not([type='radio']),
|
||||
input,
|
||||
select,
|
||||
button,
|
||||
textarea {
|
||||
@@ -194,6 +223,21 @@ textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
select {
|
||||
background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;
|
||||
padding-right: 35px;
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
select[multiple] {
|
||||
padding-right: 10px;
|
||||
background-image: none;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='button'] {
|
||||
@@ -214,10 +258,46 @@ textarea:focus {
|
||||
box-shadow: 0 0 0 2px var(--focus);
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked,
|
||||
input[type='radio']:checked {
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before,
|
||||
input[type='radio']:checked::before {
|
||||
content: '•';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before {
|
||||
content: '✔';
|
||||
transform: translateY(-50%) translateY(0.5px) translateX(-6px);
|
||||
}
|
||||
|
||||
input[type='checkbox']:active,
|
||||
input[type='radio']:active,
|
||||
input[type='submit']:active,
|
||||
input[type='button']:active,
|
||||
input[type='range']:active,
|
||||
button:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
@@ -234,7 +314,7 @@ textarea:disabled {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
::-moz-placeholder {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
@@ -246,6 +326,107 @@ textarea:disabled {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px var(--focus) solid;
|
||||
border-radius: 6px;
|
||||
margin: 0;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
input[type='range']:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
transition: 0.2s;
|
||||
background: var(--background);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
-webkit-appearance: none;
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
input[type='range']:focus::-webkit-slider-runnable-track {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
transition: 0.2s;
|
||||
background: var(--background);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
input[type='range']::-ms-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
border-width: 16px 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-fill-lower {
|
||||
background: var(--background);
|
||||
border: 0.2px solid #010101;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-fill-upper {
|
||||
background: var(--background);
|
||||
border: 0.2px solid #010101;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
border: 1px solid #000000;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
input[type='range']:focus::-ms-fill-lower {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
input[type='range']:focus::-ms-fill-upper {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--links);
|
||||
@@ -255,12 +436,12 @@ a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd {
|
||||
background: var(--background);
|
||||
code, samp, time {
|
||||
background: var(--background);
|
||||
color: var(--code);
|
||||
padding: 2.5px 5px;
|
||||
border-radius: 6px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
@@ -269,6 +450,20 @@ pre > code {
|
||||
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;
|
||||
@@ -291,10 +486,14 @@ th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
thead {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
tfoot {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
@@ -325,4 +524,49 @@ tbody tr:nth-child(even) {
|
||||
::selection {
|
||||
background-color: var(--selection);
|
||||
}
|
||||
|
||||
details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
background-color: var(--background-alt);
|
||||
padding: 10px 10px 0;
|
||||
margin: 1em 0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
details[open] {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
details > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
details[open] summary {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
background-color: var(--background);
|
||||
padding: 10px;
|
||||
margin: -10px -10px 0;
|
||||
}
|
||||
|
||||
details > :not(summary) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
summary::-webkit-details-marker {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid var(--background);
|
||||
padding-top: 10px;
|
||||
font-size: 0.8em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
/*# 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
2
dist/light.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/light.min.css.map
vendored
2
dist/light.min.css.map
vendored
File diff suppressed because one or more lines are too long
262
dist/light.standalone.css
vendored
262
dist/light.standalone.css
vendored
@@ -13,6 +13,7 @@
|
||||
|
||||
--text-main: #363636;
|
||||
--text-bright: #000000;
|
||||
--text-muted: #999999;
|
||||
|
||||
--links: #0076d1;
|
||||
--focus: #0096bfab;
|
||||
@@ -27,6 +28,11 @@
|
||||
|
||||
--form-placeholder: #949494;
|
||||
--form-text: #000000;
|
||||
|
||||
--variable: #39a33c;
|
||||
--highlight: #ffff00;
|
||||
|
||||
--select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23161f27'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E");
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -87,7 +93,15 @@ th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
q:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
q:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
blockquote , q{
|
||||
border-left: 4px solid var(--focus);
|
||||
margin: 1.5em 0em;
|
||||
padding: 0.5em 1em;
|
||||
@@ -95,8 +109,8 @@ blockquote {
|
||||
}
|
||||
|
||||
blockquote > footer {
|
||||
margin-top: 10px;
|
||||
font-style: normal;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
blockquote cite {
|
||||
@@ -119,10 +133,19 @@ a[href^='sms']::before {
|
||||
content: '💬 ';
|
||||
}
|
||||
|
||||
button,
|
||||
mark {
|
||||
background-color: var(--highlight);
|
||||
border-radius: 2px;
|
||||
padding: 0px 2px 0px 2px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
button, select,
|
||||
input[type='submit'],
|
||||
input[type='button'],
|
||||
input[type='checkbox'] {
|
||||
input[type='checkbox'],
|
||||
input[type='range'],
|
||||
input[type='radio'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -132,9 +155,9 @@ select {
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button,
|
||||
textarea {
|
||||
textarea,
|
||||
select {
|
||||
color: var(--form-text);
|
||||
background-color: var(--background);
|
||||
|
||||
@@ -150,7 +173,7 @@ textarea {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input:not([type='checkbox']):not([type='radio']),
|
||||
input,
|
||||
select,
|
||||
button,
|
||||
textarea {
|
||||
@@ -164,6 +187,21 @@ textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
select {
|
||||
background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;
|
||||
padding-right: 35px;
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
select[multiple] {
|
||||
padding-right: 10px;
|
||||
background-image: none;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='button'] {
|
||||
@@ -184,10 +222,46 @@ textarea:focus {
|
||||
box-shadow: 0 0 0 2px var(--focus);
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked,
|
||||
input[type='radio']:checked {
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before,
|
||||
input[type='radio']:checked::before {
|
||||
content: '•';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before {
|
||||
content: '✔';
|
||||
transform: translateY(-50%) translateY(0.5px) translateX(-6px);
|
||||
}
|
||||
|
||||
input[type='checkbox']:active,
|
||||
input[type='radio']:active,
|
||||
input[type='submit']:active,
|
||||
input[type='button']:active,
|
||||
input[type='range']:active,
|
||||
button:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
@@ -204,7 +278,7 @@ textarea:disabled {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
::-moz-placeholder {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
@@ -216,6 +290,107 @@ textarea:disabled {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px var(--focus) solid;
|
||||
border-radius: 6px;
|
||||
margin: 0;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
input[type='range']:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
transition: 0.2s;
|
||||
background: var(--background);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
-webkit-appearance: none;
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
input[type='range']:focus::-webkit-slider-runnable-track {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
transition: 0.2s;
|
||||
background: var(--background);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
input[type='range']::-ms-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
border-width: 16px 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-fill-lower {
|
||||
background: var(--background);
|
||||
border: 0.2px solid #010101;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-fill-upper {
|
||||
background: var(--background);
|
||||
border: 0.2px solid #010101;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
border: 1px solid #000000;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
input[type='range']:focus::-ms-fill-lower {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
input[type='range']:focus::-ms-fill-upper {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--links);
|
||||
@@ -225,12 +400,12 @@ a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd {
|
||||
background: var(--background);
|
||||
code, samp, time {
|
||||
background: var(--background);
|
||||
color: var(--code);
|
||||
padding: 2.5px 5px;
|
||||
border-radius: 6px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
@@ -239,6 +414,20 @@ pre > code {
|
||||
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;
|
||||
@@ -261,10 +450,14 @@ th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
thead {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
tfoot {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
@@ -296,4 +489,49 @@ tbody tr:nth-child(even) {
|
||||
background-color: var(--selection);
|
||||
}
|
||||
|
||||
details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
background-color: var(--background-alt);
|
||||
padding: 10px 10px 0;
|
||||
margin: 1em 0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
details[open] {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
details > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
details[open] summary {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
background-color: var(--background);
|
||||
padding: 10px;
|
||||
margin: -10px -10px 0;
|
||||
}
|
||||
|
||||
details > :not(summary) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
summary::-webkit-details-marker {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid var(--background);
|
||||
padding-top: 10px;
|
||||
font-size: 0.8em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=light.standalone.css.map */
|
||||
|
||||
2
dist/light.standalone.css.map
vendored
2
dist/light.standalone.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/light.standalone.min.css
vendored
2
dist/light.standalone.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/light.standalone.min.css.map
vendored
2
dist/light.standalone.min.css.map
vendored
File diff suppressed because one or more lines are too long
34
gulpfile.js
34
gulpfile.js
@@ -12,24 +12,25 @@ const flatten = require('gulp-flatten')
|
||||
const sizereport = require('gulp-sizereport')
|
||||
const postcssCssVariables = require('postcss-css-variables')
|
||||
const postcssImport = require('postcss-import')
|
||||
const postcssInlineSvg = require('postcss-inline-svg')
|
||||
const postcssColorModFunction = require('postcss-color-mod-function').bind(null, {
|
||||
/* Use `.toRGBLegacy()` as other methods can result in lots of decimals */
|
||||
stringifier: color => color.toRGBLegacy(),
|
||||
stringifier: color => color.toRGBLegacy()
|
||||
})
|
||||
|
||||
const paths = {
|
||||
srcDir: 'src/*',
|
||||
docsDir: '*',
|
||||
styles: { src: 'src/builds/*.css', dest: 'dist' },
|
||||
styles: { src: 'src/builds/*.css', dest: 'dist' }
|
||||
}
|
||||
|
||||
// https://stackoverflow.com/a/20732091
|
||||
function humanFileSize(size) {
|
||||
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]
|
||||
}
|
||||
|
||||
function formatByteMessage(source, data) {
|
||||
function formatByteMessage (source, data) {
|
||||
const prettyStartSize = humanFileSize(data.startSize)
|
||||
let message = ''
|
||||
|
||||
@@ -47,7 +48,7 @@ function formatByteMessage(source, data) {
|
||||
return chalk`{cyan ${source.padStart(12, ' ')}}: {bold ${data.fileName}} ${message}`
|
||||
}
|
||||
|
||||
function style() {
|
||||
function style () {
|
||||
const isLegacy = path => /legacy/.test(path)
|
||||
|
||||
const excludeModern = filter(file => isLegacy(file.path), { restore: true })
|
||||
@@ -58,8 +59,8 @@ function style() {
|
||||
.src(paths.styles.src)
|
||||
// Add sourcemaps
|
||||
.pipe(sourcemaps.init())
|
||||
// Resolve imports and calculated colors
|
||||
.pipe(postcss([postcssImport(), postcssColorModFunction()]))
|
||||
// Resolve imports, calculated colors and inlined SVG files
|
||||
.pipe(postcss([postcssImport(), postcssColorModFunction(), postcssInlineSvg()]))
|
||||
|
||||
// * Process legacy builds *
|
||||
.pipe(excludeModern)
|
||||
@@ -68,7 +69,9 @@ function style() {
|
||||
// Calculate size before autoprefixing
|
||||
.pipe(bytediff.start())
|
||||
// autoprefix
|
||||
.pipe(postcss([autoprefixer()]))
|
||||
.pipe(postcss([autoprefixer({
|
||||
env: 'legacy'
|
||||
})]))
|
||||
// Write the amount gained by autoprefixing
|
||||
.pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
|
||||
.pipe(excludeModern.restore)
|
||||
@@ -78,8 +81,9 @@ function style() {
|
||||
// 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()]))
|
||||
.pipe(postcss([autoprefixer({
|
||||
env: 'modern'
|
||||
})]))
|
||||
// Write the amount gained by autoprefixing
|
||||
.pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
|
||||
.pipe(excludeLegacy.restore)
|
||||
@@ -94,8 +98,8 @@ function style() {
|
||||
.pipe(filter('**/*.css'))
|
||||
// Calculate size before minifying
|
||||
.pipe(bytediff.start())
|
||||
// Minify using cssnano
|
||||
.pipe(postcss([cssnano()]))
|
||||
// Minify using cssnano, use extra-low precision while minifying inline SVGs
|
||||
.pipe(postcss([cssnano({ preset: ['default', { svgo: { floatPrecision: 0 } }] })]))
|
||||
// Write the amount saved by minifying
|
||||
.pipe(bytediff.stop(data => formatByteMessage('cssnano', data)))
|
||||
// Rename the files have the .min suffix
|
||||
@@ -110,14 +114,14 @@ function style() {
|
||||
)
|
||||
}
|
||||
|
||||
function watch() {
|
||||
function watch () {
|
||||
style()
|
||||
|
||||
browserSync.init({
|
||||
server: {
|
||||
baseDir: './',
|
||||
baseDir: './'
|
||||
},
|
||||
startPath: 'index.html',
|
||||
startPath: 'index.html'
|
||||
})
|
||||
|
||||
gulp.watch(paths.srcDir, style)
|
||||
|
||||
1
icon-dark.svg
Executable file
1
icon-dark.svg
Executable file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 445 445" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><rect id="Icon-Dark" serif:id="Icon Dark" x="0" y="0" width="444.1" height="444.1" style="fill:none;"/><path d="M444.1,222.05c0,-122.553 -99.497,-222.05 -222.05,-222.05c-122.553,0 -222.05,99.497 -222.05,222.05c0,122.553 99.497,222.05 222.05,222.05c122.553,0 222.05,-99.497 222.05,-222.05Z" style="fill:#202b38;"/><clipPath id="_clip1"><path d="M444.1,222.05c0,-122.553 -99.497,-222.05 -222.05,-222.05c-122.553,0 -222.05,99.497 -222.05,222.05c0,122.553 99.497,222.05 222.05,222.05c122.553,0 222.05,-99.497 222.05,-222.05Z"/></clipPath><g clip-path="url(#_clip1)"><path d="M911.401,444.1l-952.033,0l-1013.41,0c-60.994,-158.567 -78.355,-238.341 -52.081,-239.322c55.598,8.234 81.973,34.191 139.482,112.049c29.194,35.605 69.345,20.109 94.465,-2.512c17.584,-16.734 27.073,-50.366 48.844,-49.975c24.561,-0.391 43.233,18.645 54.02,38.532c21.212,25.119 58.675,26.667 78.568,27.352c28.888,-4.186 35.586,-8.373 46.89,-15.909c20.235,-18.142 25.957,-28.887 36.525,-62.596c19.03,-45.672 40.059,-54.509 68.508,-57.09c17.52,-0.234 67.036,-6.54 92.613,58.359c27.593,50.861 80.763,49.186 123.466,44.999c42.704,-7.117 48.121,-21.878 79.52,-56.417c21.98,-33.912 66.612,-40.42 88.173,-36.792c0.085,0.016 0.171,0.031 0.257,0.046c0.23,-0.021 0.464,-0.037 0.702,-0.046c6.914,1.024 13.376,2.322 19.492,3.971c14.176,3.459 31.042,9.841 47.556,24.318c21.383,17.24 42.766,43.593 72.434,83.76c29.194,35.605 69.345,20.109 94.465,-2.512c17.584,-16.734 27.073,-50.366 48.844,-49.975c24.561,-0.391 43.233,18.645 54.02,38.532c21.212,25.119 58.676,26.667 78.568,27.352c28.888,-4.186 35.586,-8.373 46.89,-15.909c20.235,-18.142 25.957,-28.887 36.525,-62.596c19.03,-45.672 40.059,-54.509 68.508,-57.09c17.52,-0.234 67.036,-6.54 92.613,58.359c27.593,50.861 80.763,49.186 123.466,44.999c42.704,-7.117 48.121,-21.878 79.521,-56.417c21.979,-33.912 66.611,-40.42 88.172,-36.792c0.031,0.006 0.062,0.012 0.094,0.017c0.11,-0.007 0.22,-0.012 0.332,-0.017c4.97,0.737 9.708,1.614 14.244,2.667c16.717,3.443 38.298,10.313 58.806,30.72c19.45,17.188 39.536,42.249 66.432,78.662c29.194,35.605 69.346,20.109 94.466,-2.512c17.583,-16.734 27.073,-50.366 48.843,-49.975c24.561,-0.391 43.233,18.645 54.02,38.532c21.212,25.119 58.676,26.667 78.568,27.352c28.888,-4.186 35.587,-8.373 46.89,-15.909c20.236,-18.142 25.957,-28.887 36.525,-62.596c19.03,-45.672 40.059,-54.509 68.508,-57.09c17.52,-0.234 67.037,-6.54 92.613,58.359c27.594,50.861 80.763,49.186 123.467,44.999c42.703,-7.117 48.12,-21.878 79.52,-56.417c21.979,-33.912 66.611,-40.42 88.172,-36.792c21.617,3.861 62.105,8.005 93.951,59.562c7.404,11.987 14.341,26.536 20.465,44.241l0,135.519l-951.5,0Z" style="fill:#41adff;fill-rule:nonzero;"/></g></svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
1
icon-light.svg
Executable file
1
icon-light.svg
Executable file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 445 445" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><rect id="Icon-Light" serif:id="Icon Light" x="0" y="0" width="444.1" height="444.1" style="fill:none;"/><path d="M444.1,222.05c0,-122.553 -99.497,-222.05 -222.05,-222.05c-122.553,0 -222.05,99.497 -222.05,222.05c0,122.553 99.497,222.05 222.05,222.05c122.553,0 222.05,-99.497 222.05,-222.05Z" style="fill:#efefef;"/><clipPath id="_clip1"><path d="M444.1,222.05c0,-122.553 -99.497,-222.05 -222.05,-222.05c-122.553,0 -222.05,99.497 -222.05,222.05c0,122.553 99.497,222.05 222.05,222.05c122.553,0 222.05,-99.497 222.05,-222.05Z"/></clipPath><g clip-path="url(#_clip1)"><path d="M911.401,444.1l-952.033,0l-1013.41,0c-60.994,-158.567 -78.355,-238.341 -52.081,-239.322c55.598,8.234 81.973,34.191 139.482,112.049c29.194,35.605 69.345,20.109 94.465,-2.512c17.584,-16.734 27.073,-50.366 48.844,-49.975c24.561,-0.391 43.233,18.645 54.02,38.532c21.212,25.119 58.675,26.667 78.568,27.352c28.888,-4.186 35.586,-8.373 46.89,-15.909c20.235,-18.142 25.957,-28.887 36.525,-62.596c19.03,-45.672 40.059,-54.509 68.508,-57.09c17.52,-0.234 67.036,-6.54 92.613,58.359c27.593,50.861 80.763,49.186 123.466,44.999c42.704,-7.117 48.121,-21.878 79.52,-56.417c21.98,-33.912 66.612,-40.42 88.173,-36.792c0.085,0.016 0.171,0.031 0.257,0.046c0.23,-0.021 0.464,-0.037 0.702,-0.046c6.914,1.024 13.376,2.322 19.492,3.971c14.176,3.459 31.042,9.841 47.556,24.318c21.383,17.24 42.766,43.593 72.434,83.76c29.194,35.605 69.345,20.109 94.465,-2.512c17.584,-16.734 27.073,-50.366 48.844,-49.975c24.561,-0.391 43.233,18.645 54.02,38.532c21.212,25.119 58.676,26.667 78.568,27.352c28.888,-4.186 35.586,-8.373 46.89,-15.909c20.235,-18.142 25.957,-28.887 36.525,-62.596c19.03,-45.672 40.059,-54.509 68.508,-57.09c17.52,-0.234 67.036,-6.54 92.613,58.359c27.593,50.861 80.763,49.186 123.466,44.999c42.704,-7.117 48.121,-21.878 79.521,-56.417c21.979,-33.912 66.611,-40.42 88.172,-36.792c0.031,0.006 0.062,0.012 0.094,0.017c0.11,-0.007 0.22,-0.012 0.332,-0.017c4.97,0.737 9.708,1.614 14.244,2.667c16.717,3.443 38.298,10.313 58.806,30.72c19.45,17.188 39.536,42.249 66.432,78.662c29.194,35.605 69.346,20.109 94.466,-2.512c17.583,-16.734 27.073,-50.366 48.843,-49.975c24.561,-0.391 43.233,18.645 54.02,38.532c21.212,25.119 58.676,26.667 78.568,27.352c28.888,-4.186 35.587,-8.373 46.89,-15.909c20.236,-18.142 25.957,-28.887 36.525,-62.596c19.03,-45.672 40.059,-54.509 68.508,-57.09c17.52,-0.234 67.037,-6.54 92.613,58.359c27.594,50.861 80.763,49.186 123.467,44.999c42.703,-7.117 48.12,-21.878 79.52,-56.417c21.979,-33.912 66.611,-40.42 88.172,-36.792c21.617,3.861 62.105,8.005 93.951,59.562c7.404,11.987 14.341,26.536 20.465,44.241l0,135.519l-951.5,0Z" style="fill:#41adff;fill-rule:nonzero;"/></g></svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
BIN
icons/android-chrome-192x192.png
Executable file
BIN
icons/android-chrome-192x192.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
icons/android-chrome-512x512.png
Executable file
BIN
icons/android-chrome-512x512.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
icons/apple-touch-icon.png
Executable file
BIN
icons/apple-touch-icon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
12
icons/browserconfig.xml
Executable file
12
icons/browserconfig.xml
Executable file
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square70x70logo src="icons/mstile-70x70.png"/>
|
||||
<square150x150logo src="icons/mstile-150x150.png"/>
|
||||
<square310x310logo src="icons/mstile-310x310.png"/>
|
||||
<wide310x150logo src="icons/mstile-310x150.png"/>
|
||||
<TileColor>#00aba9</TileColor>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
||||
BIN
icons/favicon-16x16.png
Executable file
BIN
icons/favicon-16x16.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
icons/favicon-32x32.png
Executable file
BIN
icons/favicon-32x32.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
icons/favicon.ico
Executable file
BIN
icons/favicon.ico
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
icons/light-favicon-16x16.png
Executable file
BIN
icons/light-favicon-16x16.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
icons/light-favicon-32x32.png
Executable file
BIN
icons/light-favicon-32x32.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
icons/light-favicon.ico
Executable file
BIN
icons/light-favicon.ico
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
icons/mstile-150x150.png
Executable file
BIN
icons/mstile-150x150.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
icons/mstile-310x150.png
Executable file
BIN
icons/mstile-310x150.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
BIN
icons/mstile-310x310.png
Executable file
BIN
icons/mstile-310x310.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
icons/mstile-70x70.png
Executable file
BIN
icons/mstile-70x70.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
22
icons/safari-pinned-tab.svg
Executable file
22
icons/safari-pinned-tab.svg
Executable file
@@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<metadata>
|
||||
Created by potrace 1.11, written by Peter Selinger 2001-2013
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M2378 5115 c-2 -1 -30 -5 -63 -9 -33 -3 -71 -8 -85 -10 -14 -3 -61
|
||||
-10 -105 -16 -239 -35 -599 -163 -835 -297 -479 -273 -886 -735 -1095 -1243
|
||||
-52 -128 -115 -324 -129 -400 -2 -14 -7 -36 -10 -50 -44 -190 -65 -557 -44
|
||||
-780 39 -410 195 -841 429 -1185 303 -446 735 -784 1239 -968 111 -41 310 -97
|
||||
395 -111 226 -38 248 -40 480 -41 275 0 380 12 635 76 233 59 453 147 643 258
|
||||
43 25 85 51 95 56 46 27 151 103 239 174 523 418 866 1043 940 1716 13 116 9
|
||||
511 -6 600 -49 295 -96 465 -194 693 -194 456 -557 879 -982 1146 -152 96
|
||||
-423 226 -520 250 -5 2 -18 6 -27 9 -37 14 -54 20 -83 27 -16 5 -73 20 -125
|
||||
33 -174 47 -356 69 -582 72 -113 2 -208 2 -210 0z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
19
icons/site.webmanifest
Executable file
19
icons/site.webmanifest
Executable file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "Water.css",
|
||||
"short_name": "Water.css",
|
||||
"icons": [
|
||||
{
|
||||
"src": "icons/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "icons/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"theme_color": "#ffffff",
|
||||
"background_color": "#ffffff",
|
||||
"display": "standalone"
|
||||
}
|
||||
253
index.html
253
index.html
@@ -1,36 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang='en'>
|
||||
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<title>Water.css</title>
|
||||
<link id='stylesheet' rel='stylesheet' href='../dist/dark.css'>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||||
<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
|
||||
async
|
||||
src='https://www.googletagmanager.com/gtag/js?id=UA-116663597-6'
|
||||
></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || []
|
||||
function gtag() { dataLayer.push(arguments) }
|
||||
gtag('js', new Date())
|
||||
gtag('config', 'UA-116663597-6')
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
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'
|
||||
<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>
|
||||
width='250'
|
||||
height='54'
|
||||
/></a>
|
||||
|
||||
<h2>Goals</h2>
|
||||
<ul>
|
||||
@@ -44,16 +80,18 @@
|
||||
|
||||
<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.
|
||||
In fact, try resizing this page. Everything flows super nicely as you'll
|
||||
see.
|
||||
</p>
|
||||
<button type="button" id='switch'>Switch theme</button>
|
||||
|
||||
<button type='button' id='switch'>Switch theme</button>
|
||||
<h2>Element demos</h2>
|
||||
<p>
|
||||
This is supposed to be a demo page so we need more elements!
|
||||
@@ -61,51 +99,115 @@
|
||||
|
||||
<h3>Form elements</h3>
|
||||
<form>
|
||||
<label for='email'>Email</label>
|
||||
<input type='email' name='email' id='email' placeholder='john.doe@gmail.com'>
|
||||
|
||||
<fieldset>
|
||||
<legend>Fieldset</legend>
|
||||
|
||||
<label for='email'>Email</label>
|
||||
<input
|
||||
type='email'
|
||||
name='email'
|
||||
id='email'
|
||||
placeholder='john.doe@gmail.com'
|
||||
/>
|
||||
|
||||
<label for='password'>Password</label>
|
||||
<input
|
||||
type='password'
|
||||
name='password'
|
||||
id='password'
|
||||
placeholder='password'
|
||||
/>
|
||||
|
||||
<p>
|
||||
<input type='checkbox' name='remember' id='remember' checked />
|
||||
<label for='remember'>Remember me</label>
|
||||
</p>
|
||||
|
||||
<input type='submit' />
|
||||
</fieldset>
|
||||
|
||||
<label for='id'>User id (read only)</label>
|
||||
<input readonly name='id' id='id' value='04D6H89Z'>
|
||||
<input readonly name='id' id='id' value='04D6H89Z' />
|
||||
|
||||
<label for='disabled'>Random disabled input</label>
|
||||
<input disabled name='disabled' id='disabled' placeholder='Because why not?'>
|
||||
<input
|
||||
disabled
|
||||
name='disabled'
|
||||
id='disabled'
|
||||
placeholder='Because why not?'
|
||||
/>
|
||||
|
||||
<label for='about'>About me</label>
|
||||
<textarea name='about' id='about' placeholder='I am a textarea...'></textarea>
|
||||
<textarea
|
||||
name='about'
|
||||
id='about'
|
||||
placeholder='I am a textarea...'
|
||||
></textarea>
|
||||
|
||||
<label for='drink'>Select your favorite drink</label>
|
||||
<select name='drinks' id='drink'>
|
||||
<option value='mojito'>Mojito</option>
|
||||
<option value='water'>Water</option>
|
||||
<option value='lemon'>Lemon juice</option>
|
||||
</select>
|
||||
|
||||
<label for='drinks'>Or select multiple favorite drinks</label>
|
||||
<br/>
|
||||
<small>Hold down the Ctrl (Windows) / Command (Mac) button to select multiple options. (P.S. this message is inside a <code><small></code> tag!</small>)
|
||||
<select name='drink' id='drinks' multiple>
|
||||
<option value='mojito'>Mojito</option>
|
||||
<option value='water'>Water</option>
|
||||
<option value='lemon'>Lemon juice</option>
|
||||
</select>
|
||||
|
||||
<label>Choose a Doe:</label>
|
||||
<div>
|
||||
<input type='radio' id='john' name='drone' value='john' checked>
|
||||
<input type='radio' id='john' name='doe' value='john' checked>
|
||||
<label for='john'>John Doe</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type='radio' id='jane' name='drone' value='jane' checked>
|
||||
<input type='radio' id='jane' name='doe' value='jane' checked>
|
||||
<label for='jane'>Jane Doe</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type='radio' id='johnny' name='drone' value='johnny' checked>
|
||||
<input type='radio' id='johnny' name='doe' value='johnny' checked>
|
||||
<label for='johnny'>Johnny Doe</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type='radio' id='doe' name='doe' value='doe' checked>
|
||||
<label for='doe'>An actual doe</label>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<br />
|
||||
|
||||
<input type='checkbox' name='remember' id='remember' checked>
|
||||
<label for='remember'>Remember me</label>
|
||||
|
||||
<input type='submit'>
|
||||
<div>
|
||||
<label for='volume'>Volume</label>
|
||||
<input type='range' name='volume' id='volume' min='0' max='11' />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<h3>Code</h3>
|
||||
<p>
|
||||
Below is some code, you can copy it with <kbd>Ctrl-C</kbd>.
|
||||
Did you know, <code>alert(1)</code> can show an alert in JavaScript!
|
||||
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'>
|
||||
<hr>
|
||||
<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' />
|
||||
<hr />
|
||||
|
||||
<p>And here's a nicely marked up table!</p>
|
||||
<table>
|
||||
@@ -137,32 +239,44 @@
|
||||
|
||||
<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
|
||||
<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>
|
||||
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."
|
||||
href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#Usage_notes'
|
||||
>Notes</a
|
||||
>
|
||||
for how to change it). A URL for the source of the quotation may be given
|
||||
using the
|
||||
<code>cite</code> attribute, while a text representation of the source can
|
||||
be given using the <code><cite></code> cite element.'
|
||||
|
||||
<footer>
|
||||
<cite>MDN, "The Block Quotation element"</cite>
|
||||
<cite>MDN, 'The Block Quotation element'</cite>
|
||||
</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>
|
||||
@@ -174,9 +288,7 @@
|
||||
<li>Ordered list item 3</li>
|
||||
</ol>
|
||||
|
||||
<p>
|
||||
Addresses are also styled to be <strong>awesome</strong>!
|
||||
</p>
|
||||
<p>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 />
|
||||
@@ -190,7 +302,22 @@
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
|
||||
<script src='script.js'></script>
|
||||
</body>
|
||||
<p>The details and summary tag</p>
|
||||
<details>
|
||||
<summary>Click to Open...</summary>
|
||||
<p>The HTML Details Element (details) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the summary element.</p>
|
||||
</details>
|
||||
|
||||
<details open>
|
||||
<summary>Click to Hide...</summary>
|
||||
<p>The HTML Details Element (details) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the summary element.</p>
|
||||
</details>
|
||||
|
||||
<footer>
|
||||
Here is an example of a footer! Maybe you want to put some links here. <a href='#'>Privacy Policy</a> | <a href='https://github.com/kognise/water.css'>Contribute</a>
|
||||
</footer>
|
||||
|
||||
<script src='https://unpkg.com/favicon-mode-switcher@%5E1.0.0' defer></script>
|
||||
<script src='script.js' defer></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
logo.png
Normal file → Executable file
BIN
logo.png
Normal file → Executable file
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 45 KiB |
2
logo.svg
2
logo.svg
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
33
package.json
33
package.json
@@ -5,7 +5,9 @@
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "gulp style",
|
||||
"dev": "gulp watch"
|
||||
"dev": "gulp watch",
|
||||
"lint": "standard --fix && stylelint \"src/*.css\" --fix",
|
||||
"prepublishOnly": "yarn build"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@@ -38,9 +40,32 @@
|
||||
"gulp-sourcemaps": "^2.6.5",
|
||||
"postcss-color-mod-function": "^3.0.3",
|
||||
"postcss-css-variables": "^0.12.0",
|
||||
"postcss-import": "^12.0.1"
|
||||
"postcss-import": "^12.0.1",
|
||||
"postcss-inline-svg": "^3.1.1",
|
||||
"standard": "^14.3.1",
|
||||
"stylelint": "^11.0.0",
|
||||
"stylelint-config-standard": "^19.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"defaults AND not android 4.4.3"
|
||||
"browserslist": {
|
||||
"legacy": [
|
||||
"defaults AND not android 4.4.3"
|
||||
],
|
||||
"modern": [
|
||||
"Edge > 16",
|
||||
"Firefox > 31",
|
||||
"Chrome > 49",
|
||||
"Safari > 9.1",
|
||||
"Opera > 36",
|
||||
"ios_saf > 9.3",
|
||||
"Android > 76",
|
||||
"OperaMobile > 46",
|
||||
"ChromeAndroid > 76",
|
||||
"FirefoxAndroid > 68",
|
||||
"UCAndroid > 12.12",
|
||||
"Samsung > 5"
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
]
|
||||
}
|
||||
103
script.js
103
script.js
@@ -1,96 +1,117 @@
|
||||
(function (ThemeSwitcher) {
|
||||
const themeSwitcher = new ThemeSwitcher('stylesheet');
|
||||
const themeSwitchBtn = document.getElementById('switch');
|
||||
/* global matchMedia, faviconModeSwitcher */
|
||||
|
||||
(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.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.dark) && themeSwitcher.isLight) ||
|
||||
((themeSwitcher.current === themes.light) && themeSwitcher.isLight) ||
|
||||
themeSwitcher.current === themes.lightStandalone
|
||||
) {
|
||||
return themes.darkStandalone;
|
||||
return themes.darkStandalone
|
||||
|
||||
// Case: switch to "light.css"
|
||||
} else if (themeSwitcher.current === themes.dark) {
|
||||
return themes.light;
|
||||
return themes.light
|
||||
|
||||
// Case: switch to "dark.css"
|
||||
} else if (themeSwitcher.current === themes.light) {
|
||||
return themes.dark;
|
||||
return themes.dark
|
||||
|
||||
// Case: switch destination is unknown
|
||||
} else {
|
||||
return themeSwitcher.current;
|
||||
return themeSwitcher.current
|
||||
}
|
||||
};
|
||||
}
|
||||
const getGeneralThemeName = function () {
|
||||
return themeSwitcher.current.replace(/\.standalone/g, '');
|
||||
};
|
||||
return themeSwitcher.current.replace(/\.standalone/g, '')
|
||||
}
|
||||
|
||||
themeSwitchBtn.addEventListener('click', function() {
|
||||
themeSwitcher.switch(getSwitchThemeName());
|
||||
});
|
||||
themeSwitchBtn.addEventListener('click', function () {
|
||||
themeSwitcher.switch(getSwitchThemeName())
|
||||
})
|
||||
|
||||
themeSwitcher.onChangeDark = function () {
|
||||
themeSwitcher.switch(getGeneralThemeName());
|
||||
};
|
||||
themeSwitcher.switch(getGeneralThemeName())
|
||||
}
|
||||
|
||||
themeSwitcher.onChangeLight = function () {
|
||||
themeSwitcher.switch(getGeneralThemeName());
|
||||
};
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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');
|
||||
const reg = new RegExp(this.themeDir + '(|.+?).css')
|
||||
return this.stylesheet.getAttribute('href').replace(reg, '$1')
|
||||
},
|
||||
onChangeDark: null,
|
||||
onChangeLight: null
|
||||
};
|
||||
}
|
||||
|
||||
return ThemeSwitcher;
|
||||
return ThemeSwitcher
|
||||
})()
|
||||
);
|
||||
)
|
||||
|
||||
4
src/assets/select-arrow.svg
Executable file
4
src/assets/select-arrow.svg
Executable file
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="62.5" width="116.9">
|
||||
<path d="M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 403 B |
@@ -1,9 +1,9 @@
|
||||
code,
|
||||
kbd {
|
||||
background: var(--background);
|
||||
code, samp, time {
|
||||
background: var(--background);
|
||||
color: var(--code);
|
||||
padding: 2.5px 5px;
|
||||
border-radius: 6px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
@@ -11,3 +11,17 @@ pre > code {
|
||||
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,6 +1,7 @@
|
||||
@import '_base.css';
|
||||
@import '_typography.css';
|
||||
@import '_forms.css';
|
||||
@import '_range.css';
|
||||
@import '_links.css';
|
||||
@import '_code.css';
|
||||
@import '_misc.css';
|
||||
@@ -1,7 +1,9 @@
|
||||
button,
|
||||
button, select,
|
||||
input[type='submit'],
|
||||
input[type='button'],
|
||||
input[type='checkbox'] {
|
||||
input[type='checkbox'],
|
||||
input[type='range'],
|
||||
input[type='radio'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -11,9 +13,9 @@ select {
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button,
|
||||
textarea {
|
||||
textarea,
|
||||
select {
|
||||
color: var(--form-text);
|
||||
background-color: var(--background);
|
||||
|
||||
@@ -29,7 +31,7 @@ textarea {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input:not([type='checkbox']):not([type='radio']),
|
||||
input,
|
||||
select,
|
||||
button,
|
||||
textarea {
|
||||
@@ -43,6 +45,21 @@ textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
select {
|
||||
background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;
|
||||
padding-right: 35px;
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
select[multiple] {
|
||||
padding-right: 10px;
|
||||
background-image: none;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='button'] {
|
||||
@@ -63,10 +80,46 @@ textarea:focus {
|
||||
box-shadow: 0 0 0 2px var(--focus);
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked,
|
||||
input[type='radio']:checked {
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before,
|
||||
input[type='radio']:checked::before {
|
||||
content: '•';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before {
|
||||
content: '✔';
|
||||
transform: translateY(-50%) translateY(0.5px) translateX(-6px);
|
||||
}
|
||||
|
||||
input[type='checkbox']:active,
|
||||
input[type='radio']:active,
|
||||
input[type='submit']:active,
|
||||
input[type='button']:active,
|
||||
input[type='range']:active,
|
||||
button:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
@@ -82,3 +135,16 @@ textarea:disabled {
|
||||
::placeholder {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px var(--focus) solid;
|
||||
border-radius: 6px;
|
||||
margin: 0;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -20,10 +20,14 @@ th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
thead {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
tfoot {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
@@ -50,3 +54,48 @@ tbody tr:nth-child(even) {
|
||||
::selection {
|
||||
background-color: var(--selection);
|
||||
}
|
||||
|
||||
details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
background-color: var(--background-alt);
|
||||
padding: 10px 10px 0;
|
||||
margin: 1em 0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
details[open] {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
details > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
details[open] summary {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
background-color: var(--background);
|
||||
padding: 10px;
|
||||
margin: -10px -10px 0;
|
||||
}
|
||||
|
||||
details > :not(summary) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
summary::-webkit-details-marker {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid var(--background);
|
||||
padding-top: 10px;
|
||||
font-size: 0.8em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
87
src/parts/_range.css
Normal file
87
src/parts/_range.css
Normal file
@@ -0,0 +1,87 @@
|
||||
input[type='range'] {
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
input[type='range']:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
transition: 0.2s;
|
||||
background: var(--background);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
-webkit-appearance: none;
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
input[type='range']:focus::-webkit-slider-runnable-track {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
transition: 0.2s;
|
||||
background: var(--background);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
input[type='range']::-ms-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
border-width: 16px 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-fill-lower {
|
||||
background: var(--background);
|
||||
border: 0.2px solid #010101;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-fill-upper {
|
||||
background: var(--background);
|
||||
border: 0.2px solid #010101;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
border: 1px solid #000000;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
input[type='range']:focus::-ms-fill-lower {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
input[type='range']:focus::-ms-fill-upper {
|
||||
background: var(--background);
|
||||
}
|
||||
@@ -34,7 +34,15 @@ th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
q::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
q::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
border-left: 4px solid var(--focus);
|
||||
margin: 1.5em 0em;
|
||||
padding: 0.5em 1em;
|
||||
@@ -42,8 +50,8 @@ blockquote {
|
||||
}
|
||||
|
||||
blockquote > footer {
|
||||
margin-top: 10px;
|
||||
font-style: normal;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
blockquote cite {
|
||||
@@ -65,3 +73,10 @@ a[href^='tel']::before {
|
||||
a[href^='sms']::before {
|
||||
content: '💬 ';
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: var(--highlight);
|
||||
border-radius: 2px;
|
||||
padding: 0px 2px 0px 2px;
|
||||
color: #000000;
|
||||
}
|
||||
@@ -2,23 +2,21 @@
|
||||
--background-body: #202b38;
|
||||
--background: #161f27;
|
||||
--background-alt: #1a242f;
|
||||
|
||||
--selection: #161f27;
|
||||
|
||||
--text-main: #dbdbdb;
|
||||
--text-bright: #ffffff;
|
||||
|
||||
--text-bright: #fff;
|
||||
--text-muted: #717880;
|
||||
--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;
|
||||
--form-text: #fff;
|
||||
--variable: #d941e2;
|
||||
--highlight: #efdb43;
|
||||
--select-arrow: svg-load('./assets/select-arrow.svg', fill: #efefef);
|
||||
}
|
||||
|
||||
@@ -1,24 +1,22 @@
|
||||
:root {
|
||||
--background-body: #ffffff;
|
||||
--background-body: #fff;
|
||||
--background: #efefef;
|
||||
--background-alt: #f7f7f7;
|
||||
|
||||
--selection: #9e9e9e;
|
||||
|
||||
--text-main: #363636;
|
||||
--text-bright: #000000;
|
||||
|
||||
--text-bright: #000;
|
||||
--text-muted: #999;
|
||||
--links: #0076d1;
|
||||
--focus: #0096bfab;
|
||||
--border: #dbdbdb;
|
||||
--code: #000000;
|
||||
|
||||
--code: #000;
|
||||
--animation-duration: 0.1s;
|
||||
--button-hover: #dddddd;
|
||||
|
||||
--button-hover: #ddd;
|
||||
--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;
|
||||
--form-text: #000;
|
||||
--variable: #39a33c;
|
||||
--highlight: #ff0;
|
||||
--select-arrow: svg-load('./assets/select-arrow.svg', fill: #161f27);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user