mirror of
https://github.com/kognise/water.css.git
synced 2025-08-08 14:16:58 +02:00
Merge branch 'master' into two
This commit is contained in:
Felix
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
|
||||
5
.gitignore
vendored
5
.gitignore
vendored
@@ -85,5 +85,8 @@ typings/
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# Dist
|
||||
# IntelliJ IDE
|
||||
.idea/
|
||||
|
||||
# Output of yarn build
|
||||
dist/
|
||||
3
.stylelintrc
Normal file
3
.stylelintrc
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "stylelint-config-standard"
|
||||
}
|
||||
174
README.md
174
README.md
@@ -1,43 +1,48 @@
|
||||
# Water.css
|
||||
<p align="center">
|
||||
<!-- <a href="https://www.npmjs.com/package/water.css"><img align="center" src="https://img.shields.io/npm/v/water.css.svg" alt="NPM page"></a> -->
|
||||
<a href="https://www.reddit.com/r/webdev/comments/b9m6mv/watercss_a_collection_of_neat_styles_for_simple/"><img align="center" src="https://img.shields.io/badge/on-reddit-orange.svg" alt="On Reddit"></a>
|
||||
<a href="https://www.producthunt.com/posts/water-css"><img align="center" src="https://img.shields.io/badge/on-product%20hunt-red.svg" alt="On Product Hunt"></a>
|
||||
<a href="https://github.com/kognise/water.css/blob/master/LICENSE.md"><img align="center" src="https://img.shields.io/github/license/kognise/water.css.svg" alt="MIT license"></a>
|
||||
</p>
|
||||
|
||||
[](https://watercss.netlify.com/)
|
||||
<br>
|
||||
|
||||
_A just-add-css collection of styles to make simple websites just a little nicer_
|
||||
<h1 align="center">Water.css</h1>
|
||||
<p align="center">🌊 A drop-in collection of CSS styles to make simple websites just a little nicer</p>
|
||||
|
||||
[](https://www.reddit.com/r/webdev/comments/b9m6mv/watercss_a_collection_of_neat_styles_for_simple/)
|
||||
[](https://www.producthunt.com/posts/water-css)
|
||||
[](https://github.com/kognise/water.css/blob/master/LICENSE.md)
|
||||
[](https://watercss.netlify.com/)
|
||||
|
||||
<br>
|
||||
|
||||
## Goals
|
||||
|
||||
- Responsive
|
||||
- Good code quality
|
||||
- Themeable
|
||||
- Good browser support (works on my old kindle's browser :P)
|
||||
- Small size (< 2kb)
|
||||
- Tiny size
|
||||
- Beautiful
|
||||
- No classes
|
||||
|
||||
## Why?
|
||||
|
||||
I commonly make quick demo pages or websites with simple content. For these, I don't want to spend time styling them but don't like the ugliness of the default styles.
|
||||
|
||||
Water.css is a css framework that doesn't require any classes. You just include it in your `<head>` and forget about it, while it silently makes everything nicer.
|
||||
Water.css is a CSS framework that doesn't require any classes. You just include it in your `<head>` and forget about it, while it silently makes everything nicer.
|
||||
|
||||
## Who?
|
||||
|
||||
You might want to use Water.css if you're making a simple static or demo website that you don't want to spend time styling.
|
||||
You might want to use Water.css if you're making a simple static page or demo website that you don't want to spend time styling.
|
||||
|
||||
You probably don't want to use it for a production app or something that has more than a simple document. Rule of thumb: if your site has a navbar, don't use Water.css. It's just not meant for that kind of content.
|
||||
You probably don't want to use it for a production app or something that is more than a simple document. Rule of thumb: if your site has a navbar, don't use Water.css. It's just not meant for that kind of content.
|
||||
|
||||
## How?
|
||||
|
||||
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">`
|
||||
|
||||
@@ -45,7 +50,7 @@ Just stick this in your `<head>`:
|
||||
|
||||
### Other options:
|
||||
|
||||
> ⚡ An interactive version selection will be available soon [here](https://watercss.netlify.com/#select-version)
|
||||
> ⚡ An interactive version selection is available [on the **demo page**!](https://watercss.netlify.com/#installation)
|
||||
|
||||
#### Enforce a theme and ignore `(prefers-color-scheme)`
|
||||
|
||||
@@ -54,16 +59,75 @@ For the main versions, `dark` or `light` is only treated as a _default theme_: i
|
||||
#### Want to support Internet Explorer?
|
||||
|
||||
Sure, just extend the theme prefix with `-legacy`, e.g. `dark-legacy.min.css`.
|
||||
Be aware that these versions **do not support** [runtime theming](#theming) as they use hard coded values rather than variables. Additionally, if you use a legacy version that is not standalone, we recommend [you add the respective preload tags to improve load times](#).
|
||||
Be aware that these versions **do not support** [runtime theming](#theming) as they use hard coded values rather than variables. Additionally, if you use a legacy version that is not standalone, we recommend [you add the respective preload tags to improve load times](https://watercss.netlify.com/?legacy#installation).
|
||||
|
||||
#### Unminified builds
|
||||
|
||||
All versions are also available as unminified stylesheets, which can be handy during development.
|
||||
Simply remove the `.min` from the file name.
|
||||
|
||||
**Oh, you want a demo you say?** Cheeky fellah! [Well, here's your demo.](https://watercss.netlify.com/)
|
||||
## Theming
|
||||
|
||||
Don't like how it looks? Feel free to submit an issue or PR with suggestions.
|
||||
Do you want to make some adjustments or build your own theme completely different from the official dark or light themes? Since Water.css is built with CSS variables this is super easy to do!
|
||||
You can find a full list of the variables used at [**src/variables-\*.css**](https://github.com/kognise/water.css/tree/master/src/variables-dark.css).
|
||||
|
||||
### Runtime theming
|
||||
|
||||
> ⚠ If you use a version with support for legacy browsers like Internet Explorer, skip to [Compiling your own theme](#compiling-your-own-theme)!
|
||||
|
||||
Water.css uses Custom Properties (_"CSS variables"_) to define its base styles such as colors. These can be changed and overwritten right in the browser.
|
||||
Because of this, you can simply add your own stylesheet to the page and set your own CSS variables there. As long as your stylesheet comes after Water.css in the HTML, your values will override the default ones and your theme is applied!
|
||||
|
||||
This short example will use Water.css, but color all links red:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css/dist/dark.min.css" />
|
||||
<style>
|
||||
:root {
|
||||
--links: red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
If you want to change a value for dark or light mode only, use a media query like so:
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--links: blue; /* Always applied */
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--links: yellow; /* Only applied in dark mode (overrides previous declarations while applied) */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Compiling your own theme
|
||||
|
||||
If you are targeting browsers without support for CSS Custom Properties such as Internet Explorer, runtime theming is not an option. To apply your own theming, you'll need to make your changes in the source files themselves, then re-compile the CSS files. This works like the following:
|
||||
|
||||
- Clone the repository to your machine
|
||||
- Run `yarn` to install dependencies
|
||||
- Make the theming changes you want in `src/variables-*.css`
|
||||
- Run `yarn build` to compile the CSS files
|
||||
- Use the compiled files in the `dist/` directory on your site
|
||||
|
||||
When making your changes, we recommend you don't change the values set by Water.css directly, instead simply add your own variable declarations:
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Water.css variable declarations... */
|
||||
}
|
||||
|
||||
/* ⬇ Add this block! */
|
||||
:root {
|
||||
/* Your variable declarations, overriding previous ones */
|
||||
}
|
||||
```
|
||||
|
||||
You also might want to check out the [Contributing Guide](https://github.com/kognise/water.css/tree/master/.github/CONTRIBUTING.md) as it contains further information about the build setup.
|
||||
|
||||
## Contributing
|
||||
|
||||
@@ -71,81 +135,19 @@ Water.css becomes better for everyone when people like you help make it better!
|
||||
|
||||
Have any questions or concerns? Did I forget an element or selector? Does something look ugly? Feel free to submit an issue or pull request.
|
||||
|
||||
If you decide to contribute, after downloading a copy of the repository make sure to run `yarn` to install dependencies useful for development. Then, you can just run the following to start a server of the demo with live reloading on change.
|
||||
If you decide to contribute, after downloading a copy of the repository make sure to run `yarn` to install dependencies useful for development. Then, you can run the following to start a server of the demo with live reloading on change.
|
||||
|
||||
```
|
||||
$ yarn dev
|
||||
```
|
||||
|
||||
And make sure to run `yarn build` before pushing any changes! Thanks for taking the time to contribute :)
|
||||
**Alternatively, just click this button to develop in Repl.it, a supercool in-browser IDE!** [](https://repl.it/github/kognise/water.css)
|
||||
|
||||
## Theming
|
||||
|
||||
> ⚠ The theming guide is out of date and will be updated shortly! In the mean time, check src/variables-\*.css to see your customization options.
|
||||
|
||||
Do you want to make your own theme different from the light or dark themes? Since Water.css is built with Sass this is super easy to do. There are two methods. Also, here's a list of variables to set:
|
||||
|
||||
- `$background`
|
||||
- `$background-alt`
|
||||
- `$text-main`
|
||||
- `$text-bright`
|
||||
- `$links`
|
||||
- `$focus`
|
||||
- `$border`
|
||||
- `$code`
|
||||
- `$button-hover`
|
||||
- `$animation-duration`
|
||||
- `$scrollbar-thumb`
|
||||
- `$scrollbar-thumb-hover`
|
||||
- `$form-placeholder`
|
||||
- `$form-text`
|
||||
|
||||
Wanna quickly try out theming without installing anything or just explore our build environment?
|
||||
|
||||
[](https://repl.it/github/https://github.com/amasad/water.css?lang=nodejs&ref=button)
|
||||
|
||||
### Based on an existing theme
|
||||
|
||||
You can base your theme off of the existing light or dark themes, which already have some variables predefined to make it easier for you.
|
||||
|
||||
Here's some simple Sass that'll just use the dark theme but color all links red. Of course, you can change any variables you want.
|
||||
|
||||
```scss
|
||||
$links: #ff0000;
|
||||
@import 'dark.scss';
|
||||
```
|
||||
|
||||
### From scratch
|
||||
|
||||
You can also make your theme from scratch. This is less recommended, but feel free to! You just have to define all of the variables.
|
||||
|
||||
For example, here's an example of a really ugly theme, made from scratch. **Ouch!**
|
||||
|
||||
```scss
|
||||
$background: #ff48c2 !default;
|
||||
$background-alt: #00ff00 !default;
|
||||
|
||||
$text-main: #dbdbdb !default;
|
||||
$text-bright: #ffffff !default;
|
||||
|
||||
$links: #ff0022 !default;
|
||||
$focus: #ffc400 !default;
|
||||
$border: #00ffff !default;
|
||||
$code: #001aff !default;
|
||||
|
||||
$button-hover: #324759 !default;
|
||||
$animation-duration: 0.1s !default;
|
||||
|
||||
$form-placeholder: #a9a9a9 !default;
|
||||
$form-text: #ffffff !default;
|
||||
|
||||
@import 'parts/core';
|
||||
```
|
||||
|
||||
You can also only import parts you want, but this is not recommended. See the `src/parts/` folder for a list of parts.
|
||||
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 :)
|
||||
|
||||
## Todos
|
||||
|
||||
- Add screenshots
|
||||
- [Jekyll theme](https://github.com/kognise/water.css/issues/18)
|
||||
- [NPM package](https://github.com/kognise/water.css/issues/41)
|
||||
- Release Jekyll theme ([#18](https://github.com/kognise/water.css/issues/18))
|
||||
- Publish to npm ([#41](https://github.com/kognise/water.css/issues/41))
|
||||
|
||||
2
dist/dark-legacy.standalone.min.css
vendored
Executable file
2
dist/dark-legacy.standalone.min.css
vendored
Executable file
File diff suppressed because one or more lines are too long
1
dist/dark-legacy.standalone.min.css.map
vendored
Normal file
1
dist/dark-legacy.standalone.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
573
dist/dark.css
vendored
Normal file
573
dist/dark.css
vendored
Normal file
@@ -0,0 +1,573 @@
|
||||
/**
|
||||
* Dark-themed version:
|
||||
* uses dark theme by default but switches to light theme
|
||||
* if a system-wide theme preference is set on the user's device.
|
||||
*
|
||||
* Variables will remain uncompiled so the theme can update dynamically
|
||||
* at runtime in the browser.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--background-body: #202b38;
|
||||
--background: #161f27;
|
||||
--background-alt: #1a242f;
|
||||
|
||||
--selection: #161f27;
|
||||
|
||||
--text-main: #dbdbdb;
|
||||
--text-bright: #ffffff;
|
||||
--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: rgb(65, 92, 115);
|
||||
|
||||
--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) {
|
||||
:root {
|
||||
--background-body: #ffffff;
|
||||
--background: #efefef;
|
||||
--background-alt: #f7f7f7;
|
||||
|
||||
--selection: #9e9e9e;
|
||||
|
||||
--text-main: #363636;
|
||||
--text-bright: #000000;
|
||||
--text-muted: #999999;
|
||||
|
||||
--links: #0076d1;
|
||||
--focus: #0096bfab;
|
||||
--border: #dbdbdb;
|
||||
--code: #000000;
|
||||
|
||||
--animation-duration: 0.1s;
|
||||
--button-hover: #dddddd;
|
||||
|
||||
--scrollbar-thumb: rgb(44, 63, 79);
|
||||
--scrollbar-thumb-hover: rgb(32, 45, 56);
|
||||
|
||||
--form-placeholder: #949494;
|
||||
--form-text: #000000;
|
||||
|
||||
--variable: #39a33c;
|
||||
--highlight: #ffff00;
|
||||
|
||||
--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 {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
line-height: 1.4;
|
||||
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 0 10px;
|
||||
|
||||
color: var(--text-main);
|
||||
background: var(--background-body);
|
||||
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
button, input, textarea {
|
||||
transition: background-color var(--animation-duration) linear,
|
||||
border-color var(--animation-duration) linear,
|
||||
color var(--animation-duration) linear,
|
||||
box-shadow var(--animation-duration) linear,
|
||||
transform var(--animation-duration) ease;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.2em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
strong {
|
||||
color: var(--text-bright);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
b,
|
||||
strong,
|
||||
th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
q:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
q:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
blockquote , q{
|
||||
border-left: 4px solid var(--focus);
|
||||
margin: 1.5em 0em;
|
||||
padding: 0.5em 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
blockquote > footer {
|
||||
font-style: normal;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
blockquote cite {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
address {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
a[href^='mailto']::before {
|
||||
content: '📧 ';
|
||||
}
|
||||
|
||||
a[href^='tel']::before {
|
||||
content: '📞 ';
|
||||
}
|
||||
|
||||
a[href^='sms']::before {
|
||||
content: '💬 ';
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: var(--highlight);
|
||||
border-radius: 2px;
|
||||
padding: 0px 2px 0px 2px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
button, select,
|
||||
input[type='submit'],
|
||||
input[type='button'],
|
||||
input[type='checkbox'],
|
||||
input[type='range'],
|
||||
input[type='radio'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input:not([type='checkbox']):not([type='radio']),
|
||||
select {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
color: var(--form-text);
|
||||
background-color: var(--background);
|
||||
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
|
||||
margin-right: 6px;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button,
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
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'] {
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
input[type='submit']:hover,
|
||||
input[type='button']:hover {
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
button:focus,
|
||||
textarea:focus {
|
||||
box-shadow: 0 0 0 2px var(--focus);
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked,
|
||||
input[type='radio']:checked {
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before,
|
||||
input[type='radio']:checked::before {
|
||||
content: '•';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before {
|
||||
content: '✔';
|
||||
transform: translateY(-50%) translateY(0.5px) translateX(-6px);
|
||||
}
|
||||
|
||||
input[type='checkbox']:active,
|
||||
input[type='radio']:active,
|
||||
input[type='submit']:active,
|
||||
input[type='button']:active,
|
||||
input[type='range']:active,
|
||||
button:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
input:disabled,
|
||||
select:disabled,
|
||||
button:disabled,
|
||||
textarea:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
::-ms-input-placeholder {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
::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;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
input[type='range']:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
transition: 0.2s;
|
||||
background: var(--background);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
-webkit-appearance: none;
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
input[type='range']:focus::-webkit-slider-runnable-track {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
transition: 0.2s;
|
||||
background: var(--background);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
input[type='range']::-ms-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
border-width: 16px 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-fill-lower {
|
||||
background: var(--background);
|
||||
border: 0.2px solid #010101;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-fill-upper {
|
||||
background: var(--background);
|
||||
border: 0.2px solid #010101;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
border: 1px solid #000000;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
input[type='range']:focus::-ms-fill-lower {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
input[type='range']:focus::-ms-fill-upper {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--links);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
code, samp, time {
|
||||
background: var(--background);
|
||||
color: var(--code);
|
||||
padding: 2.5px 5px;
|
||||
border-radius: 6px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
padding: 10px;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
var {
|
||||
color: var(--variable);
|
||||
font-style: normal;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
kbd {
|
||||
background: var(--background);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 2px;
|
||||
color: var(--text-main);
|
||||
padding: 2px 4px 2px 4px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
thead {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
tfoot {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--background);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar-thumb);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--scrollbar-thumb-hover);
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background-color: var(--selection);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--selection);
|
||||
}
|
||||
|
||||
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 */
|
||||
1
dist/dark.css.map
vendored
Normal file
1
dist/dark.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/dark.min.css
vendored
Normal file
2
dist/dark.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/dark.min.css.map
vendored
Normal file
1
dist/dark.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
537
dist/dark.standalone.css
vendored
Executable file
537
dist/dark.standalone.css
vendored
Executable file
@@ -0,0 +1,537 @@
|
||||
/**
|
||||
* Standalone dark-themed version.
|
||||
* Includes dark variables and core, left as CSS variables
|
||||
* so the theming can be adjusted at runtime.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--background-body: #202b38;
|
||||
--background: #161f27;
|
||||
--background-alt: #1a242f;
|
||||
|
||||
--selection: #161f27;
|
||||
|
||||
--text-main: #dbdbdb;
|
||||
--text-bright: #ffffff;
|
||||
--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: rgb(65, 92, 115);
|
||||
|
||||
--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 {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
line-height: 1.4;
|
||||
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 0 10px;
|
||||
|
||||
color: var(--text-main);
|
||||
background: var(--background-body);
|
||||
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
button, input, textarea {
|
||||
transition: background-color var(--animation-duration) linear,
|
||||
border-color var(--animation-duration) linear,
|
||||
color var(--animation-duration) linear,
|
||||
box-shadow var(--animation-duration) linear,
|
||||
transform var(--animation-duration) ease;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.2em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
strong {
|
||||
color: var(--text-bright);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
b,
|
||||
strong,
|
||||
th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
q:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
q:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
blockquote , q{
|
||||
border-left: 4px solid var(--focus);
|
||||
margin: 1.5em 0em;
|
||||
padding: 0.5em 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
blockquote > footer {
|
||||
font-style: normal;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
blockquote cite {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
address {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
a[href^='mailto']::before {
|
||||
content: '📧 ';
|
||||
}
|
||||
|
||||
a[href^='tel']::before {
|
||||
content: '📞 ';
|
||||
}
|
||||
|
||||
a[href^='sms']::before {
|
||||
content: '💬 ';
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: var(--highlight);
|
||||
border-radius: 2px;
|
||||
padding: 0px 2px 0px 2px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
button, select,
|
||||
input[type='submit'],
|
||||
input[type='button'],
|
||||
input[type='checkbox'],
|
||||
input[type='range'],
|
||||
input[type='radio'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input:not([type='checkbox']):not([type='radio']),
|
||||
select {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
color: var(--form-text);
|
||||
background-color: var(--background);
|
||||
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
|
||||
margin-right: 6px;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button,
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
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'] {
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
input[type='submit']:hover,
|
||||
input[type='button']:hover {
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
button:focus,
|
||||
textarea:focus {
|
||||
box-shadow: 0 0 0 2px var(--focus);
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked,
|
||||
input[type='radio']:checked {
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before,
|
||||
input[type='radio']:checked::before {
|
||||
content: '•';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before {
|
||||
content: '✔';
|
||||
transform: translateY(-50%) translateY(0.5px) translateX(-6px);
|
||||
}
|
||||
|
||||
input[type='checkbox']:active,
|
||||
input[type='radio']:active,
|
||||
input[type='submit']:active,
|
||||
input[type='button']:active,
|
||||
input[type='range']:active,
|
||||
button:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
input:disabled,
|
||||
select:disabled,
|
||||
button:disabled,
|
||||
textarea:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
::-ms-input-placeholder {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
::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;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
input[type='range']:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
transition: 0.2s;
|
||||
background: var(--background);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
-webkit-appearance: none;
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
input[type='range']:focus::-webkit-slider-runnable-track {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
transition: 0.2s;
|
||||
background: var(--background);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
input[type='range']::-ms-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
border-width: 16px 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-fill-lower {
|
||||
background: var(--background);
|
||||
border: 0.2px solid #010101;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-fill-upper {
|
||||
background: var(--background);
|
||||
border: 0.2px solid #010101;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
border: 1px solid #000000;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
input[type='range']:focus::-ms-fill-lower {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
input[type='range']:focus::-ms-fill-upper {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--links);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
code, samp, time {
|
||||
background: var(--background);
|
||||
color: var(--code);
|
||||
padding: 2.5px 5px;
|
||||
border-radius: 6px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
padding: 10px;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
var {
|
||||
color: var(--variable);
|
||||
font-style: normal;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
kbd {
|
||||
background: var(--background);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 2px;
|
||||
color: var(--text-main);
|
||||
padding: 2px 4px 2px 4px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
thead {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
tfoot {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--background);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar-thumb);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--scrollbar-thumb-hover);
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background-color: var(--selection);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--selection);
|
||||
}
|
||||
|
||||
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 */
|
||||
1
dist/dark.standalone.css.map
vendored
Normal file
1
dist/dark.standalone.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/dark.standalone.min.css
vendored
Executable file
2
dist/dark.standalone.min.css
vendored
Executable file
File diff suppressed because one or more lines are too long
1
dist/dark.standalone.min.css.map
vendored
Normal file
1
dist/dark.standalone.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
626
dist/light-legacy.standalone.css
vendored
Executable file
626
dist/light-legacy.standalone.css
vendored
Executable file
@@ -0,0 +1,626 @@
|
||||
/**
|
||||
* Standalone light-themed version for legacy browsers.
|
||||
* Includes light variables and core, compiled at build time so the final output
|
||||
* will only include regular CSS, no variables.
|
||||
*/
|
||||
|
||||
body {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
line-height: 1.4;
|
||||
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 0 10px;
|
||||
|
||||
color: #363636;
|
||||
background: #ffffff;
|
||||
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
button {
|
||||
transition: background-color 0.1s linear,
|
||||
border-color 0.1s linear,
|
||||
color 0.1s linear,
|
||||
box-shadow 0.1s linear,
|
||||
transform 0.1s ease;
|
||||
}
|
||||
|
||||
input {
|
||||
transition: background-color 0.1s linear,
|
||||
border-color 0.1s linear,
|
||||
color 0.1s linear,
|
||||
box-shadow 0.1s linear,
|
||||
transform 0.1s ease;
|
||||
}
|
||||
|
||||
textarea {
|
||||
transition: background-color 0.1s linear,
|
||||
border-color 0.1s linear,
|
||||
color 0.1s linear,
|
||||
box-shadow 0.1s linear,
|
||||
transform 0.1s ease;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.2em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
h5 {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
b,
|
||||
strong,
|
||||
th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
q:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
q:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
blockquote{
|
||||
border-left: 4px solid #0096bfab;
|
||||
margin: 1.5em 0em;
|
||||
padding: 0.5em 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
q{
|
||||
border-left: 4px solid #0096bfab;
|
||||
margin: 1.5em 0em;
|
||||
padding: 0.5em 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
blockquote > footer {
|
||||
font-style: normal;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
blockquote cite {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
address {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
a[href^='mailto']::before {
|
||||
content: '📧 ';
|
||||
}
|
||||
|
||||
a[href^='tel']::before {
|
||||
content: '📞 ';
|
||||
}
|
||||
|
||||
a[href^='sms']::before {
|
||||
content: '💬 ';
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: #ffff00;
|
||||
border-radius: 2px;
|
||||
padding: 0px 2px 0px 2px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
button, select,
|
||||
input[type='submit'],
|
||||
input[type='button'],
|
||||
input[type='checkbox'],
|
||||
input[type='range'],
|
||||
input[type='radio'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input:not([type='checkbox']):not([type='radio']),
|
||||
select {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input {
|
||||
color: #000000;
|
||||
background-color: #efefef;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
|
||||
margin-right: 6px;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button {
|
||||
color: #000000;
|
||||
background-color: #efefef;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
|
||||
margin-right: 6px;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
color: #000000;
|
||||
background-color: #efefef;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
|
||||
margin-right: 6px;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
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 {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
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'] {
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #dddddd;
|
||||
}
|
||||
|
||||
input[type='submit']:hover {
|
||||
background: #dddddd;
|
||||
}
|
||||
|
||||
input[type='button']:hover {
|
||||
background: #dddddd;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
box-shadow: 0 0 0 2px #0096bfab;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
box-shadow: 0 0 0 2px #0096bfab;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
box-shadow: 0 0 0 2px #0096bfab;
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
box-shadow: 0 0 0 2px #0096bfab;
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked {
|
||||
background: #dddddd;
|
||||
}
|
||||
|
||||
input[type='radio']:checked {
|
||||
background: #dddddd;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before,
|
||||
input[type='radio']:checked::before {
|
||||
content: '•';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before {
|
||||
content: '✔';
|
||||
transform: translateY(-50%) translateY(0.5px) translateX(-6px);
|
||||
}
|
||||
|
||||
input[type='checkbox']:active,
|
||||
input[type='radio']:active,
|
||||
input[type='submit']:active,
|
||||
input[type='button']:active,
|
||||
input[type='range']:active,
|
||||
button:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
input:disabled,
|
||||
select:disabled,
|
||||
button:disabled,
|
||||
textarea:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: #949494;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: #949494;
|
||||
}
|
||||
|
||||
::-ms-input-placeholder {
|
||||
color: #949494;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: #949494;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
code {
|
||||
background: #efefef;
|
||||
color: #000000;
|
||||
padding: 2.5px 5px;
|
||||
border-radius: 6px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
samp {
|
||||
background: #efefef;
|
||||
color: #000000;
|
||||
padding: 2.5px 5px;
|
||||
border-radius: 6px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
time {
|
||||
background: #efefef;
|
||||
color: #000000;
|
||||
padding: 2.5px 5px;
|
||||
border-radius: 6px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
padding: 10px;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
var {
|
||||
color: #39a33c;
|
||||
font-style: normal;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
kbd {
|
||||
background: #efefef;
|
||||
border: 1px solid #dbdbdb;
|
||||
border-radius: 2px;
|
||||
color: #363636;
|
||||
padding: 2px 4px 2px 4px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid #dbdbdb;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
thead {
|
||||
border-bottom: 1px solid #dbdbdb;
|
||||
}
|
||||
|
||||
tfoot {
|
||||
border-top: 1px solid #dbdbdb;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #efefef;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgb(213, 213, 213);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(196, 196, 196);
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background-color: #9e9e9e;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: #9e9e9e;
|
||||
}
|
||||
|
||||
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 */
|
||||
1
dist/light-legacy.standalone.css.map
vendored
Normal file
1
dist/light-legacy.standalone.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/light-legacy.standalone.min.css
vendored
Executable file
2
dist/light-legacy.standalone.min.css
vendored
Executable file
File diff suppressed because one or more lines are too long
1
dist/light-legacy.standalone.min.css.map
vendored
Normal file
1
dist/light-legacy.standalone.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
572
dist/light.css
vendored
Normal file
572
dist/light.css
vendored
Normal file
@@ -0,0 +1,572 @@
|
||||
/**
|
||||
* Light-themed version:
|
||||
* uses light theme by default but switches to dark theme
|
||||
* if a system-wide theme preference is set on the user's device.
|
||||
*
|
||||
* Variables will remain uncompiled so the theme can update dynamically
|
||||
* at runtime in the browser.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--background-body: #ffffff;
|
||||
--background: #efefef;
|
||||
--background-alt: #f7f7f7;
|
||||
|
||||
--selection: #9e9e9e;
|
||||
|
||||
--text-main: #363636;
|
||||
--text-bright: #000000;
|
||||
--text-muted: #999999;
|
||||
|
||||
--links: #0076d1;
|
||||
--focus: #0096bfab;
|
||||
--border: #dbdbdb;
|
||||
--code: #000000;
|
||||
|
||||
--animation-duration: 0.1s;
|
||||
--button-hover: #dddddd;
|
||||
|
||||
--scrollbar-thumb: rgb(213, 213, 213);
|
||||
--scrollbar-thumb-hover: rgb(196, 196, 196);
|
||||
|
||||
--form-placeholder: #949494;
|
||||
--form-text: #000000;
|
||||
|
||||
--variable: #39a33c;
|
||||
--highlight: #ffff00;
|
||||
|
||||
--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) {
|
||||
:root {
|
||||
--background-body: #202b38;
|
||||
--background: #161f27;
|
||||
--background-alt: #1a242f;
|
||||
|
||||
--selection: #161f27;
|
||||
|
||||
--text-main: #dbdbdb;
|
||||
--text-bright: #ffffff;
|
||||
--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: rgb(20, 20, 20);
|
||||
|
||||
--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 {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
line-height: 1.4;
|
||||
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 0 10px;
|
||||
|
||||
color: var(--text-main);
|
||||
background: var(--background-body);
|
||||
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
button, input, textarea {
|
||||
transition: background-color var(--animation-duration) linear,
|
||||
border-color var(--animation-duration) linear,
|
||||
color var(--animation-duration) linear,
|
||||
box-shadow var(--animation-duration) linear,
|
||||
transform var(--animation-duration) ease;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.2em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
strong {
|
||||
color: var(--text-bright);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
b,
|
||||
strong,
|
||||
th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
q:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
q:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
blockquote , q{
|
||||
border-left: 4px solid var(--focus);
|
||||
margin: 1.5em 0em;
|
||||
padding: 0.5em 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
blockquote > footer {
|
||||
font-style: normal;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
blockquote cite {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
address {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
a[href^='mailto']::before {
|
||||
content: '📧 ';
|
||||
}
|
||||
|
||||
a[href^='tel']::before {
|
||||
content: '📞 ';
|
||||
}
|
||||
|
||||
a[href^='sms']::before {
|
||||
content: '💬 ';
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: var(--highlight);
|
||||
border-radius: 2px;
|
||||
padding: 0px 2px 0px 2px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
button, select,
|
||||
input[type='submit'],
|
||||
input[type='button'],
|
||||
input[type='checkbox'],
|
||||
input[type='range'],
|
||||
input[type='radio'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input:not([type='checkbox']):not([type='radio']),
|
||||
select {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
color: var(--form-text);
|
||||
background-color: var(--background);
|
||||
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
|
||||
margin-right: 6px;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button,
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
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'] {
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
input[type='submit']:hover,
|
||||
input[type='button']:hover {
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
button:focus,
|
||||
textarea:focus {
|
||||
box-shadow: 0 0 0 2px var(--focus);
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked,
|
||||
input[type='radio']:checked {
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before,
|
||||
input[type='radio']:checked::before {
|
||||
content: '•';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before {
|
||||
content: '✔';
|
||||
transform: translateY(-50%) translateY(0.5px) translateX(-6px);
|
||||
}
|
||||
|
||||
input[type='checkbox']:active,
|
||||
input[type='radio']:active,
|
||||
input[type='submit']:active,
|
||||
input[type='button']:active,
|
||||
input[type='range']:active,
|
||||
button:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
input:disabled,
|
||||
select:disabled,
|
||||
button:disabled,
|
||||
textarea:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
::-ms-input-placeholder {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
::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;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
input[type='range']:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
transition: 0.2s;
|
||||
background: var(--background);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
-webkit-appearance: none;
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
input[type='range']:focus::-webkit-slider-runnable-track {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
transition: 0.2s;
|
||||
background: var(--background);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
input[type='range']::-ms-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
border-width: 16px 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-fill-lower {
|
||||
background: var(--background);
|
||||
border: 0.2px solid #010101;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-fill-upper {
|
||||
background: var(--background);
|
||||
border: 0.2px solid #010101;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
border: 1px solid #000000;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
input[type='range']:focus::-ms-fill-lower {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
input[type='range']:focus::-ms-fill-upper {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--links);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
code, samp, time {
|
||||
background: var(--background);
|
||||
color: var(--code);
|
||||
padding: 2.5px 5px;
|
||||
border-radius: 6px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
padding: 10px;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
var {
|
||||
color: var(--variable);
|
||||
font-style: normal;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
kbd {
|
||||
background: var(--background);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 2px;
|
||||
color: var(--text-main);
|
||||
padding: 2px 4px 2px 4px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
thead {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
tfoot {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--background);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar-thumb);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--scrollbar-thumb-hover);
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background-color: var(--selection);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--selection);
|
||||
}
|
||||
|
||||
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 */
|
||||
1
dist/light.css.map
vendored
Normal file
1
dist/light.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/light.min.css
vendored
Normal file
2
dist/light.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/light.min.css.map
vendored
Normal file
1
dist/light.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
537
dist/light.standalone.css
vendored
Executable file
537
dist/light.standalone.css
vendored
Executable file
@@ -0,0 +1,537 @@
|
||||
/**
|
||||
* Standalone light-themed version.
|
||||
* Includes light variables and core, left as CSS variables
|
||||
* so the theming can be adjusted at runtime.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--background-body: #ffffff;
|
||||
--background: #efefef;
|
||||
--background-alt: #f7f7f7;
|
||||
|
||||
--selection: #9e9e9e;
|
||||
|
||||
--text-main: #363636;
|
||||
--text-bright: #000000;
|
||||
--text-muted: #999999;
|
||||
|
||||
--links: #0076d1;
|
||||
--focus: #0096bfab;
|
||||
--border: #dbdbdb;
|
||||
--code: #000000;
|
||||
|
||||
--animation-duration: 0.1s;
|
||||
--button-hover: #dddddd;
|
||||
|
||||
--scrollbar-thumb: rgb(213, 213, 213);
|
||||
--scrollbar-thumb-hover: rgb(196, 196, 196);
|
||||
|
||||
--form-placeholder: #949494;
|
||||
--form-text: #000000;
|
||||
|
||||
--variable: #39a33c;
|
||||
--highlight: #ffff00;
|
||||
|
||||
--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 {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
line-height: 1.4;
|
||||
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 0 10px;
|
||||
|
||||
color: var(--text-main);
|
||||
background: var(--background-body);
|
||||
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
button, input, textarea {
|
||||
transition: background-color var(--animation-duration) linear,
|
||||
border-color var(--animation-duration) linear,
|
||||
color var(--animation-duration) linear,
|
||||
box-shadow var(--animation-duration) linear,
|
||||
transform var(--animation-duration) ease;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.2em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
strong {
|
||||
color: var(--text-bright);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
b,
|
||||
strong,
|
||||
th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
q:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
q:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
blockquote , q{
|
||||
border-left: 4px solid var(--focus);
|
||||
margin: 1.5em 0em;
|
||||
padding: 0.5em 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
blockquote > footer {
|
||||
font-style: normal;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
blockquote cite {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
address {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
a[href^='mailto']::before {
|
||||
content: '📧 ';
|
||||
}
|
||||
|
||||
a[href^='tel']::before {
|
||||
content: '📞 ';
|
||||
}
|
||||
|
||||
a[href^='sms']::before {
|
||||
content: '💬 ';
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: var(--highlight);
|
||||
border-radius: 2px;
|
||||
padding: 0px 2px 0px 2px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
button, select,
|
||||
input[type='submit'],
|
||||
input[type='button'],
|
||||
input[type='checkbox'],
|
||||
input[type='range'],
|
||||
input[type='radio'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input:not([type='checkbox']):not([type='radio']),
|
||||
select {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
color: var(--form-text);
|
||||
background-color: var(--background);
|
||||
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
|
||||
margin-right: 6px;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button,
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
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'] {
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
input[type='submit']:hover,
|
||||
input[type='button']:hover {
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
button:focus,
|
||||
textarea:focus {
|
||||
box-shadow: 0 0 0 2px var(--focus);
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked,
|
||||
input[type='radio']:checked {
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before,
|
||||
input[type='radio']:checked::before {
|
||||
content: '•';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::before {
|
||||
content: '✔';
|
||||
transform: translateY(-50%) translateY(0.5px) translateX(-6px);
|
||||
}
|
||||
|
||||
input[type='checkbox']:active,
|
||||
input[type='radio']:active,
|
||||
input[type='submit']:active,
|
||||
input[type='button']:active,
|
||||
input[type='range']:active,
|
||||
button:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
input:disabled,
|
||||
select:disabled,
|
||||
button:disabled,
|
||||
textarea:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
::-ms-input-placeholder {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
::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;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
input[type='range']:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
transition: 0.2s;
|
||||
background: var(--background);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
-webkit-appearance: none;
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
input[type='range']:focus::-webkit-slider-runnable-track {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
transition: 0.2s;
|
||||
background: var(--background);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
input[type='range']::-ms-track {
|
||||
width: 100%;
|
||||
height: 9.5px;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
border-width: 16px 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-fill-lower {
|
||||
background: var(--background);
|
||||
border: 0.2px solid #010101;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-fill-upper {
|
||||
background: var(--background);
|
||||
border: 0.2px solid #010101;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
border: 1px solid #000000;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
input[type='range']:focus::-ms-fill-lower {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
input[type='range']:focus::-ms-fill-upper {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--links);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
code, samp, time {
|
||||
background: var(--background);
|
||||
color: var(--code);
|
||||
padding: 2.5px 5px;
|
||||
border-radius: 6px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
padding: 10px;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
var {
|
||||
color: var(--variable);
|
||||
font-style: normal;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
kbd {
|
||||
background: var(--background);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 2px;
|
||||
color: var(--text-main);
|
||||
padding: 2px 4px 2px 4px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
thead {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
tfoot {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--background);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar-thumb);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--scrollbar-thumb-hover);
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background-color: var(--selection);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--selection);
|
||||
}
|
||||
|
||||
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 */
|
||||
1
dist/light.standalone.css.map
vendored
Normal file
1
dist/light.standalone.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/light.standalone.min.css
vendored
Executable file
2
dist/light.standalone.min.css
vendored
Executable file
File diff suppressed because one or more lines are too long
1
dist/light.standalone.min.css.map
vendored
Normal file
1
dist/light.standalone.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
22
gulpfile.js
22
gulpfile.js
@@ -17,14 +17,15 @@ const htmlnano = require('htmlnano')
|
||||
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/*',
|
||||
docs: { src: 'docs/**', dest: 'dist/docs' },
|
||||
docsDir: '*',
|
||||
styles: { src: 'src/builds/*.css', dest: 'dist' },
|
||||
}
|
||||
|
||||
@@ -66,8 +67,8 @@ function style() {
|
||||
.src(paths.styles.src)
|
||||
// Add sourcemaps
|
||||
.pipe(sourcemaps.init())
|
||||
// Resolve imports and calculated colors
|
||||
.pipe(postcss([postcssImport(cssImportOptions), postcssColorModFunction()]))
|
||||
// Resolve imports, calculated colors and inlined SVG files
|
||||
.pipe(postcss([postcssImport(cssImportOptions), postcssColorModFunction(), postcssInlineSvg()]))
|
||||
|
||||
// * Process legacy builds *
|
||||
.pipe(excludeModern)
|
||||
@@ -76,7 +77,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)
|
||||
@@ -86,8 +89,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)
|
||||
@@ -102,8 +106,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
|
||||
|
||||
21
package.json
21
package.json
@@ -51,7 +51,26 @@
|
||||
"posthtml-include": "^1.2.0",
|
||||
"vue": "^2.6.10"
|
||||
},
|
||||
"browserslist": [
|
||||
"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"
|
||||
]
|
||||
}
|
||||
|
||||
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 |
@@ -5,6 +5,7 @@ body {
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 0 10px;
|
||||
word-wrap: break-word;
|
||||
|
||||
color: var(--text-main);
|
||||
background: var(--background-body);
|
||||
|
||||
@@ -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,11 +34,11 @@ th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
q:before {
|
||||
q::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
q:after {
|
||||
q::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
@@ -50,8 +50,8 @@ blockquote , q{
|
||||
}
|
||||
|
||||
blockquote > footer {
|
||||
margin-top: 10px;
|
||||
font-style: normal;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
blockquote cite {
|
||||
@@ -62,15 +62,15 @@ address {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
a[href^='mailto']::before {
|
||||
a[href^='mailto\:']::before {
|
||||
content: '📧 ';
|
||||
}
|
||||
|
||||
a[href^='tel']::before {
|
||||
a[href^='tel\:']::before {
|
||||
content: '📞 ';
|
||||
}
|
||||
|
||||
a[href^='sms']::before {
|
||||
a[href^='sms\:']::before {
|
||||
content: '💬 ';
|
||||
}
|
||||
|
||||
|
||||
@@ -2,26 +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,27 +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: #ffff00;
|
||||
--highlight: #ff0;
|
||||
--select-arrow: svg-load('./assets/select-arrow.svg', fill: #161f27);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user