mirror of
https://github.com/kognise/water.css.git
synced 2025-12-06 06:44:58 +01:00
Merge branch 'two'
This commit is contained in:
Kognise
commit
8df179cecc
90 changed files with 5480 additions and 4980 deletions
8
.changeset/README.md
Normal file
8
.changeset/README.md
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
# Changesets
|
||||
|
||||
Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
|
||||
with multi-package repos, or single-package repos to help you version and publish your code. You can
|
||||
find the full documentation for it [in our repository](https://github.com/changesets/changesets)
|
||||
|
||||
We have a quick list of common questions to get you started engaging with this project in
|
||||
[our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md)
|
||||
9
.changeset/config.json
Normal file
9
.changeset/config.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"$schema": "https://unpkg.com/@changesets/config@1.1.0/schema.json",
|
||||
"changelog": "@changesets/cli/changelog",
|
||||
"commit": false,
|
||||
"linked": [],
|
||||
"access": "restricted",
|
||||
"baseBranch": "master",
|
||||
"updateInternalDependencies": "patch"
|
||||
}
|
||||
13
.editorconfig
Normal file
13
.editorconfig
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
root = true
|
||||
|
||||
[*]
|
||||
quote_type = single
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = false
|
||||
insert_final_newline = false
|
||||
|
||||
[*.md]
|
||||
indent_size = 4
|
||||
37
.eslintrc.json
Normal file
37
.eslintrc.json
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es6": true,
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"standard"
|
||||
],
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 11,
|
||||
"sourceType": "module"
|
||||
},
|
||||
"plugins": [
|
||||
"html",
|
||||
"markdown",
|
||||
"prefer-arrow"
|
||||
],
|
||||
"overrides": [
|
||||
{
|
||||
"files": [ "**/*.md" ],
|
||||
"processor": "markdown/markdown"
|
||||
}
|
||||
],
|
||||
"rules": {
|
||||
"prefer-arrow/prefer-arrow-functions": [
|
||||
"error",
|
||||
{
|
||||
"disallowPrototype": true,
|
||||
"singleReturnOnly": false,
|
||||
"classPropertiesAllowed": false
|
||||
}
|
||||
],
|
||||
"func-style": ["error", "expression"],
|
||||
"arrow-parens": ["error", "always"]
|
||||
}
|
||||
}
|
||||
1
.gitattributes
vendored
1
.gitattributes
vendored
|
|
@ -1 +0,0 @@
|
|||
/dist/* -diff
|
||||
160
.github/CONTRIBUTING.md
vendored
160
.github/CONTRIBUTING.md
vendored
|
|
@ -4,72 +4,166 @@ 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).
|
||||
Before contributing, please read the [code of conduct](CODE_OF_CONDUCT.md). Also, you agree that your contributions will be licensed under this project's [MIT License](../LICENSE.md).
|
||||
|
||||
## How to get started
|
||||
## Overview
|
||||
|
||||
1. Get a copy of repository. It is recommended to fork it first and clone to your machine using `git`.
|
||||
Please take a moment to read through the following guidelines:
|
||||
|
||||
2. Make sure that you have [yarn](https://yarnpkg.com) and install dependencies listed in `package.json` using it.
|
||||
- [Get started](#get-started)
|
||||
- [Find issues to work on](#find-issues-to-work-on)
|
||||
- [Add or change styles](#add-or-change-styles)
|
||||
- [Create your pull request](#create-your-pull-request)
|
||||
- [Project structure](#project-structure)
|
||||
|
||||
```
|
||||
yarn
|
||||
```
|
||||
<br>
|
||||
|
||||
3. Then you can run development server with live reloading out of the box and play around with the framework.
|
||||
> **Quickstart**:
|
||||
> 1. `yarn install` – install dependencies
|
||||
> 2. `yarn dev` – start the dev server, make your changes
|
||||
> 3. `yarn validate` – make sure your changes pass all tests
|
||||
> 4. `yarn changeset` – describe your changes for the changelog
|
||||
|
||||
```
|
||||
yarn dev
|
||||
```
|
||||
<br>
|
||||
|
||||
So you can access the `index.html` in browser by visiting http://localhost:3000/index.html
|
||||
## Get started
|
||||
|
||||
More details will be provided in command line interface.
|
||||
1. Get a copy of the repository. It is recommended to [fork](https://github.com/kognise/water.css/fork) it first and clone to your machine using `git`.
|
||||
|
||||
*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:
|
||||
2. Make sure that you have [yarn installed](https://classic.yarnpkg.com/en/docs/install/), then install dependencies by running:
|
||||
|
||||
```
|
||||
yarn build
|
||||
```
|
||||
```
|
||||
yarn install
|
||||
```
|
||||
|
||||
## How to find issues to work on
|
||||
3. Start the development server with live reload:
|
||||
|
||||
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](
|
||||
```
|
||||
yarn dev
|
||||
```
|
||||
|
||||
4. Now you can visit [localhost:3000](http://localhost:3000) and start playing around with the framework – when you make changes to Water.css, the site will reload automatically so you can see what changed.
|
||||
|
||||
*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 Water.css, but if you want to inspect the minified assets meant for production, you can run it manually: `yarn build`
|
||||
|
||||
> Alternatively, you can develop in Repl.it, a supercool in-browser IDE! Just click this button: [](https://repl.it/github/kognise/water.css)
|
||||
|
||||
## Find issues to work on
|
||||
|
||||
If you are new to contributing open-source software, you can start by picking any relevant issue that is [tagged with **`good first issue`**](
|
||||
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).
|
||||
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).
|
||||
|
||||
## Add or change styles
|
||||
|
||||
## How to make a pull request
|
||||
There are a few rules for working in the Water.css source code:
|
||||
|
||||
It is a few general rules of thumb about making pull requests:
|
||||
1. The styles must not use any classes or IDs. Water.css is made entirely of basic style rules that only target HTML elements.
|
||||
|
||||
* Make sure that your pull request covers a small and well defined scope
|
||||
2. Don't specify colors directly in the source files (`src/parts/*`). Only use named variables there, which are declared in `src/variables-*.css`.
|
||||
|
||||
* Make small commits with clear and explainful messages
|
||||
❌ Bad:
|
||||
```css
|
||||
color: #fff;
|
||||
```
|
||||
|
||||
* You need to provide a clear description about your contribution on GitHub
|
||||
✔ Good:
|
||||
```css
|
||||
color: var(--text-bright);
|
||||
```
|
||||
|
||||
## Directory structure
|
||||
3. Reuse existing colors where possible. Before introducing a new color to our palette, check if one of the existing colors fits your needs.
|
||||
|
||||
4. If you introduce a new variable, make sure to declare it both in `variables-dark.css` and `variables-light.css` so it's available in both themes. Also, add the new variable to the list of variables available for theming in the [README](../README.md#theming).
|
||||
|
||||
## Create your pull request
|
||||
|
||||
Once you're happy with your changes, you need to **commit** them, create a **changelog** and **submit a pull request**.
|
||||
|
||||
A few general rules of thumb about what makes a good pull request:
|
||||
|
||||
- Make sure that your pull request covers a small and well defined scope
|
||||
- Make small commits with clear and explainful messages
|
||||
- Provide a clear description about your contribution on GitHub
|
||||
|
||||
### Commit
|
||||
|
||||
When you commit code, Water.css will run some checks to make sure that your changes have no errors and match the project's coding style – a process called [**Linting**](https://www.freecodecamp.org/news/what-is-linting-and-how-can-it-save-you-time). It will also verify that all **colors are accessible**, which means they need to have enough contrast to be easily readable.
|
||||
|
||||
If the code you introduced has errors or some of the colors aren't accessible, you'll see an error and the commit will abort.
|
||||
You can check whether your changes pass all tests before committing them by running:
|
||||
|
||||
```
|
||||
yarn validate
|
||||
```
|
||||
|
||||
If there are errors, you can try to fix them automatically by running:
|
||||
|
||||
```
|
||||
yarn lint
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary>ℹ A note about puppeteer and WSL</summary>
|
||||
<br>
|
||||
<blockquote>
|
||||
The accessibility checks use puppeteer, a tool that uses Chrome to render websites "headlessly", without a visible interface. In some environments like the <a href="https://aka.ms/wsl">Windows Subsystem for Linux</a>, you'll need to manually configure and run an X-Server in order for puppeteer to work.
|
||||
</blockquote>
|
||||
</details>
|
||||
|
||||
<br>
|
||||
|
||||
### Changelog
|
||||
|
||||
Now that your changes are commited, you'll need to **generate a changelog**:
|
||||
|
||||
We use a tool called [Changesets](https://github.com/atlassian/changesets) to keep track of what changes have been made between versions. Make sure to create a changelog before creating your pull request!
|
||||
|
||||
Just run this command for each change you made, and then answer a few questions:
|
||||
|
||||
```
|
||||
yarn changeset
|
||||
```
|
||||
|
||||
If you're not sure what kind of change you're making, pick "patch".
|
||||
|
||||
### Submit a Pull Request
|
||||
|
||||
Once your changes have been committed and you've created a changelog, you'll want to [submit a pull request](https://github.com/kognise/water.css/compare).
|
||||
|
||||
Be sure to provide a clear description of what your pull request includes. If your pull request will close an existing issue, make sure to write `Closes #[id]` in the pull request description, where `[id]` is replaced by the issue your pull request will close.
|
||||
|
||||
After submitting a pull request, it will need to be reviewed by a maintainer of the project before being merged. You may be asked to make some changes to your pull request.
|
||||
|
||||
After your change has been reviewed and merged, you can celebrate as the newest contributor to the Water.css project! 🎉
|
||||
|
||||
## Project structure
|
||||
|
||||
```
|
||||
.
|
||||
├── out
|
||||
├── dist
|
||||
├── icons
|
||||
└── docs
|
||||
└── icons
|
||||
└── src
|
||||
├── assets
|
||||
├── builds
|
||||
└── parts
|
||||
```
|
||||
|
||||
`dist` directory is ignored by git and it contains built assets for distribution
|
||||
- **`out`** is ignored by git – it contains built assets for distribution
|
||||
|
||||
`icons` directory contains water.css favicons used in `index.html` demo/docs file
|
||||
- **`dist`** contains old assets, for backwards compatibility - ignore this
|
||||
|
||||
`src` directory contains all the source stylesheets groupped into folders and variables
|
||||
- **`docs`** contains the documentation and demo page
|
||||
|
||||
`src/assets` directory contains images used for UI elements styling
|
||||
- **`docs/icons`** contains water.css favicons used in the documentation
|
||||
|
||||
`src/builds` directory contains base style files prepared for different kind of builds (i.e. light and dark themes, supporting legacy browsers, etc)
|
||||
- **`src`** contains all the source stylesheets grouped into folders and variables
|
||||
|
||||
`src/parts` directory contains the whole source organized in separate files by its kind like forms, links, typography
|
||||
- **`src/assets`** contains images/icons used for UI element styling
|
||||
|
||||
- **`src/builds`** contains entry files for the different versions water.css comes in: auto, dark and light
|
||||
|
||||
- **`src/parts`** contains the water.css source code organized in separate files by its kind, like "forms" or "typography"
|
||||
|
|
|
|||
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -87,4 +87,5 @@ typings/
|
|||
.idea/
|
||||
|
||||
# Output of yarn build
|
||||
out/
|
||||
dist/
|
||||
5
.huskyrc.json
Normal file
5
.huskyrc.json
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"hooks": {
|
||||
"pre-commit": "yarn validate"
|
||||
}
|
||||
}
|
||||
1
.prettierignore
Normal file
1
.prettierignore
Normal file
|
|
@ -0,0 +1 @@
|
|||
*
|
||||
2
.replit
2
.replit
|
|
@ -1,2 +0,0 @@
|
|||
language = "nodejs"
|
||||
run = "yarn dev"
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"extends": "stylelint-config-standard"
|
||||
}
|
||||
6
.stylelintrc.json
Normal file
6
.stylelintrc.json
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"extends": "stylelint-config-standard",
|
||||
"rules": {
|
||||
"no-descending-specificity": null
|
||||
}
|
||||
}
|
||||
6
.vscode/extensions.json
vendored
Normal file
6
.vscode/extensions.json
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"recommendations": [
|
||||
"dbaeumer.vscode-eslint",
|
||||
"stylelint.vscode-stylelint"
|
||||
]
|
||||
}
|
||||
48
CHANGELOG.md
Normal file
48
CHANGELOG.md
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
# Water.css
|
||||
|
||||
## 2.0.0
|
||||
### Major Changes
|
||||
|
||||
- Published to npm
|
||||
|
||||
If you're using an old version of Water.css, you **must** see the README or you won't get new changes
|
||||
|
||||
- Added sourcemaps, autoprefixing, and minification
|
||||
- Cleaned up the structure of sourcemap files
|
||||
- Compatible with all major browsers including IE
|
||||
|
||||
- Added support for `prefers-color-scheme` to automatically set light and dark theme
|
||||
- The default theme color is light mode
|
||||
- Internet Explorer does not support this so the automatic version will always show up as light mode in IE
|
||||
- If you want to force a color scheme, use `light.css`, or `dark.css`
|
||||
|
||||
|
||||
- Added CSS variables to allow for changing theme colors at runtime instead of build time
|
||||
|
||||
IE does not support this either, but nothing should break because we provide fixed fallback colors. It is possible to compile your own theme if you must have custom colors in IE.
|
||||
|
||||
- Added [Code of Conduct](.github/CODE_OF_CONDUCT.md) and [Contribution Guide](.github/CONTRIBUTING.md)
|
||||
- Restructured `.scss` file locations and variable names
|
||||
- Added `height: auto` to `img` elements to keep aspect ratio
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Added radio and checkbox styles
|
||||
- Added styles for prepending emojis to `href='mailto'`, `href='tel'`, and `href='sms'`
|
||||
- `table` no longer has outer borders and `tr` elements use color striping for alternating backgorund colors
|
||||
- Added `min-height` and respect `cols`/`rows` attributes on `textarea`
|
||||
- Use `system-ui` font when available
|
||||
- Added styles for `samp`, `time`, `var`, and `kbd` elements
|
||||
- Added styling for `blockquote`, `q`, and `mark` elements
|
||||
- Added print styles
|
||||
- Custom scrollbar styles
|
||||
- Added `cursor: not-allowed` to `select:disabled`, `button:disabled`, `textarea:disabled`
|
||||
- Added styles for `::selection`
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Fixed padding, alignment, and colors on several elements
|
||||
- Modified some colors to fix accessibility issues
|
||||
- `table` elements no longer overflow
|
||||
- Added linter and linted entire codebase
|
||||
- Fixed `max-width` of `video` element to prevent overflowing
|
||||
101
README.md
101
README.md
|
|
@ -1,7 +1,7 @@
|
|||
<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://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.producthunt.com/posts/water-css"><img align="center" src="https://img.shields.io/badge/on-product%20hunt-blue.svg" alt="On Product Hunt"></a>
|
||||
<a href="https://github.com/kognise/water.css/pulls"><img align="center" src="https://img.shields.io/github/contributors-anon/kognise/water.css" alt="Contributors"></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>
|
||||
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
<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://watercss.netlify.com/)
|
||||
[](https://watercss.kognise.dev/)
|
||||
|
||||
<br>
|
||||
|
||||
|
|
@ -26,40 +26,46 @@
|
|||
## 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.
|
||||
|
||||
## Who?
|
||||
|
||||
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 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.
|
||||
Although it originally wasn't built for more complex websites, many developers have used Water.css as a base stylesheet and creatively applied custom styles to build out an entire app. Nothing is stopping you from doing the same!
|
||||
|
||||
## How?
|
||||
|
||||
Just stick this in your `<head>`:
|
||||
|
||||
### 🌙/☀ Automatic Theme:
|
||||
|
||||
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css">`
|
||||
|
||||
### 🌙 Dark Theme:
|
||||
|
||||
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css">`
|
||||
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.min.css">`
|
||||
|
||||
### ☀ Light Theme:
|
||||
|
||||
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css">`
|
||||
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css">`
|
||||
|
||||
<br>
|
||||
|
||||
### Other options:
|
||||
A **preview** of the different themes is available [on the **demo page**](https://watercss.kognise.dev/#installation)! ⚡
|
||||
|
||||
> ⚡ An interactive version selection is available [on the **demo page**!](https://watercss.netlify.com/#installation)
|
||||
#### How the "Automatic Theme" works
|
||||
|
||||
#### Enforce a theme and ignore `(prefers-color-scheme)`
|
||||
The main `water.css` file automatically switches between light and dark mode depending on the system preferences of a user's device. This detection is made possible through a CSS media query called [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). In browsers where the preference can't be detected, `water.css` will stick to the light theme.
|
||||
|
||||
For the main versions, `dark` or `light` is only treated as a _default theme_: if a user has a system-wide preference for either dark or light mode on their device, `water.css` will respect this. If you want to avoid this behavior and enforce dark or light theme, append `.standalone` to the theme prefix, e.g. `dark.standalone.min.css`.
|
||||
If you want to avoid this behavior, use either `dark.css` or `light.css`.
|
||||
|
||||
#### Want to support Internet Explorer?
|
||||
#### Supporting 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](https://watercss.netlify.com/?legacy#installation).
|
||||
All three distributions of Water.css support Internet Explorer 11, but the main `water.css` file **doesn't respect the user's color scheme** and will be locked to light mode due to lack of `prefers-color-scheme` support.
|
||||
|
||||
Be aware that IE also doesn't support [runtime theming](#theming), and fixed fallback values will be used. If you want to override the Water.css theme in a way that's compatible with IE, we recommend that you [compile your own theme](#compiling-your-own-theme).
|
||||
|
||||
#### Unminified builds
|
||||
|
||||
|
|
@ -68,20 +74,41 @@ Simply remove the `.min` from the file name.
|
|||
|
||||
## Theming
|
||||
|
||||
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).
|
||||
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! Here's a list list of all the variables you can change to your liking:
|
||||
|
||||
- `--background-body`
|
||||
- `--background`
|
||||
- `--background-alt`
|
||||
- `--selection`
|
||||
- `--text-main`
|
||||
- `--text-bright`
|
||||
- `--text-muted`
|
||||
- `--links`
|
||||
- `--focus`
|
||||
- `--border`
|
||||
- `--code`
|
||||
- `--animation-duration`
|
||||
- `--button-hover`
|
||||
- `--scrollbar-thumb`
|
||||
- `--scrollbar-thumb-hover`
|
||||
- `--form-placeholder`
|
||||
- `--form-text`
|
||||
- `--variable`
|
||||
- `--highlight`
|
||||
- `--select-arrow`
|
||||
|
||||
### 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" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/water.css@2/out/water.min.css" />
|
||||
<style>
|
||||
:root {
|
||||
--links: red;
|
||||
|
|
@ -89,16 +116,17 @@ This short example will use Water.css, but color all links red:
|
|||
</style>
|
||||
```
|
||||
|
||||
If you want to change a value for dark or light mode only, use a media query like so:
|
||||
If you want to change a value for dark or light mode only, use a media query like this:
|
||||
|
||||
```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) */
|
||||
--links: yellow; /* Only applied in dark mode (overrides blue) */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -112,20 +140,7 @@ If you are targeting browsers without support for CSS Custom Properties such as
|
|||
- 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 */
|
||||
}
|
||||
```
|
||||
- Use the compiled files in the `out/` directory on your site
|
||||
|
||||
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.
|
||||
|
||||
|
|
@ -133,21 +148,5 @@ You also might want to check out the [Contributing Guide](https://github.com/kog
|
|||
|
||||
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 run the following to start a server of the demo with live reloading on change.
|
||||
|
||||
```
|
||||
$ yarn dev
|
||||
```
|
||||
|
||||
**Alternatively, just click this button to develop in Repl.it, a supercool in-browser IDE!** [](https://repl.it/github/kognise/water.css)
|
||||
|
||||
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
|
||||
- Release Jekyll theme ([#18](https://github.com/kognise/water.css/issues/18))
|
||||
- Publish to npm ([#41](https://github.com/kognise/water.css/issues/41))
|
||||
Check out our [Contributing Guide](.github/CONTRIBUTING.md) to learn how to get started.
|
||||
And thanks for taking the time to contribute! :)
|
||||
|
|
|
|||
55
accessibility.js
Normal file
55
accessibility.js
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
const pa11y = require('pa11y')
|
||||
const chalk = require('chalk')
|
||||
const puppeteer = require('puppeteer')
|
||||
|
||||
const check = async (browser, theme) => {
|
||||
console.log(chalk`{bold Checking {blue ${theme}} theme...}`)
|
||||
|
||||
const page = await browser.newPage()
|
||||
page.emulateMediaFeatures([
|
||||
{ name: 'prefers-color-scheme', value: theme }
|
||||
])
|
||||
|
||||
const results = await pa11y('./out/docs/index.html', {
|
||||
ignore: [
|
||||
'WCAG2AA.Principle3.Guideline3_2.3_2_2.H32.2' // Ignore "this form does not contain a submit button"
|
||||
],
|
||||
browser,
|
||||
page
|
||||
})
|
||||
|
||||
if (results.issues.length === 0) {
|
||||
await page.close()
|
||||
console.log(chalk`{green No issues found!}`)
|
||||
return false
|
||||
}
|
||||
|
||||
for (const issue of results.issues) {
|
||||
console.log()
|
||||
console.log(chalk`{red Error:} ${issue.message}`)
|
||||
console.log(chalk`{gray -> ${issue.code}}`)
|
||||
console.log(chalk`{gray -> ${issue.selector}}`)
|
||||
console.log(chalk`{gray -> ${issue.context}}`)
|
||||
}
|
||||
|
||||
await page.close()
|
||||
return true
|
||||
}
|
||||
|
||||
const go = async () => {
|
||||
try {
|
||||
const browser = await puppeteer.launch()
|
||||
|
||||
const lightResult = await check(browser, 'light')
|
||||
console.log()
|
||||
const darkResult = await check(browser, 'dark')
|
||||
|
||||
await browser.close()
|
||||
if (lightResult || darkResult) process.exit(1)
|
||||
} catch (error) {
|
||||
console.log()
|
||||
console.log(chalk`{red An unexpected error occured!} ${error.message}`)
|
||||
}
|
||||
}
|
||||
|
||||
go()
|
||||
|
Before Width: | Height: | Size: 3 KiB After Width: | Height: | Size: 3 KiB |
|
Before Width: | Height: | Size: 3 KiB After Width: | Height: | Size: 3 KiB |
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 45 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
23
bookmarklet/original.js
Normal file
23
bookmarklet/original.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
// Water.css Bookmarklet
|
||||
// ---------------------
|
||||
|
||||
const $$ = (selector) => document.querySelectorAll(selector)
|
||||
const createElement = (tagName, properties) => Object.assign(document.createElement(tagName), properties)
|
||||
|
||||
// Remove all CSS stylesheets, external and internal
|
||||
$$('link[rel="stylesheet"],style').forEach((el) => el.remove())
|
||||
|
||||
// Remove all inline styles
|
||||
$$('*').forEach((el) => (el.style = ''))
|
||||
|
||||
// Add water.css and responsive viewport (if necessary)
|
||||
document.head.append(
|
||||
createElement('link', {
|
||||
rel: 'stylesheet',
|
||||
href: 'https://cdn.jsdelivr.net/npm/water.css@2/out/water.css'
|
||||
}),
|
||||
!$$('meta[name="viewport"]').length && createElement('meta', {
|
||||
name: 'viewport',
|
||||
content: 'width=device-width,initial-scale=1.0'
|
||||
})
|
||||
)
|
||||
7
dist/README.md
vendored
Normal file
7
dist/README.md
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
# About This Directory
|
||||
|
||||
This `dist/` directory is here to maintain backwards compatibility with sites that use the pre-2.0 version of Water.css.
|
||||
|
||||
We used to encourage linking to this directory instead of the version on NPM (since it didn't exist) so this exists to avoid breaking anything.
|
||||
|
||||
If you're still using a version from this directory please see the README to update. If you're a contributor, ignore this - **you're probably looking for `out/`**.
|
||||
2
dist/dark-legacy.standalone.min.css
vendored
2
dist/dark-legacy.standalone.min.css
vendored
File diff suppressed because one or more lines are too long
1
dist/dark-legacy.standalone.min.css.map
vendored
1
dist/dark-legacy.standalone.min.css.map
vendored
File diff suppressed because one or more lines are too long
406
dist/dark.css
vendored
406
dist/dark.css
vendored
|
|
@ -1,96 +1,17 @@
|
|||
/**
|
||||
* 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");
|
||||
}
|
||||
}
|
||||
|
||||
@charset "UTF-8";
|
||||
body {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
line-height: 1.4;
|
||||
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 0 10px;
|
||||
|
||||
color: var(--text-main);
|
||||
background: var(--background-body);
|
||||
|
||||
color: #dbdbdb;
|
||||
background: #202b38;
|
||||
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;
|
||||
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 {
|
||||
|
|
@ -114,7 +35,7 @@ h4,
|
|||
h5,
|
||||
h6,
|
||||
strong {
|
||||
color: var(--text-bright);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
h1,
|
||||
|
|
@ -129,24 +50,16 @@ th {
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
q:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
q:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
blockquote , q{
|
||||
border-left: 4px solid var(--focus);
|
||||
blockquote {
|
||||
border-left: 4px solid #0096bfab;
|
||||
margin: 1.5em 0em;
|
||||
padding: 0.5em 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
blockquote > footer {
|
||||
margin-top: 10px;
|
||||
font-style: normal;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
blockquote cite {
|
||||
|
|
@ -169,19 +82,10 @@ a[href^='sms']::before {
|
|||
content: '💬 ';
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: var(--highlight);
|
||||
border-radius: 2px;
|
||||
padding: 0px 2px 0px 2px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
button, select,
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='button'],
|
||||
input[type='checkbox'],
|
||||
input[type='range'],
|
||||
input[type='radio'] {
|
||||
input[type='checkbox'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -190,29 +94,21 @@ select {
|
|||
display: block;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
color: var(--form-text);
|
||||
background-color: var(--background);
|
||||
|
||||
input, select, button, textarea {
|
||||
color: #ffffff;
|
||||
background-color: #161f27;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
|
||||
margin-right: 6px;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button,
|
||||
textarea {
|
||||
input:not([type='checkbox']):not([type='radio']),
|
||||
select, button, textarea {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
|
|
@ -223,24 +119,7 @@ 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'] {
|
||||
button, input[type='submit'], input[type='button'] {
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
|
@ -248,56 +127,20 @@ input[type='button'] {
|
|||
button:hover,
|
||||
input[type='submit']:hover,
|
||||
input[type='button']:hover {
|
||||
background: var(--button-hover);
|
||||
background: #324759;
|
||||
}
|
||||
|
||||
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);
|
||||
box-shadow: 0 0 0 2px #0096bfab;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
|
@ -307,141 +150,39 @@ select:disabled,
|
|||
button:disabled,
|
||||
textarea:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: var(--form-placeholder);
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: var(--form-placeholder);
|
||||
:-ms-input-placeholder {
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
::-ms-input-placeholder {
|
||||
color: var(--form-placeholder);
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
::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);
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--links);
|
||||
color: #41adff;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
code, samp, time {
|
||||
background: var(--background);
|
||||
color: var(--code);
|
||||
padding: 2.5px 5px;
|
||||
code, kbd {
|
||||
background: #161f27;
|
||||
color: #ffbe85;
|
||||
padding: 5px;
|
||||
border-radius: 6px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
|
|
@ -450,28 +191,13 @@ pre > code {
|
|||
overflow-x: auto;
|
||||
}
|
||||
|
||||
var {
|
||||
color: var(--variable);
|
||||
font-style: normal;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
kbd {
|
||||
background: var(--background);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 2px;
|
||||
color: var(--text-main);
|
||||
padding: 2px 4px 2px 4px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border);
|
||||
border-top: 1px solid #dbdbdb;
|
||||
}
|
||||
|
||||
table {
|
||||
|
|
@ -480,22 +206,17 @@ table {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
td, th {
|
||||
padding: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
thead {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
tfoot {
|
||||
border-top: 1px solid var(--border);
|
||||
th {
|
||||
border-bottom: 1px solid #dbdbdb;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: var(--background-alt);
|
||||
background-color: #161f27;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
|
|
@ -504,70 +225,17 @@ tbody tr:nth-child(even) {
|
|||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--background);
|
||||
background: #161f27;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar-thumb);
|
||||
background: #324759;
|
||||
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);
|
||||
background: #415c73;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=dark.css.map */
|
||||
|
|
|
|||
2
dist/dark.css.map
vendored
2
dist/dark.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/dark.min.css
vendored
2
dist/dark.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/dark.min.css.map
vendored
2
dist/dark.min.css.map
vendored
File diff suppressed because one or more lines are too long
537
dist/dark.standalone.css
vendored
537
dist/dark.standalone.css
vendored
|
|
@ -1,537 +0,0 @@
|
|||
/**
|
||||
* 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
1
dist/dark.standalone.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/dark.standalone.min.css
vendored
2
dist/dark.standalone.min.css
vendored
File diff suppressed because one or more lines are too long
1
dist/dark.standalone.min.css.map
vendored
1
dist/dark.standalone.min.css.map
vendored
File diff suppressed because one or more lines are too long
626
dist/light-legacy.standalone.css
vendored
626
dist/light-legacy.standalone.css
vendored
|
|
@ -1,626 +0,0 @@
|
|||
/**
|
||||
* 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
1
dist/light-legacy.standalone.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/light-legacy.standalone.min.css
vendored
2
dist/light-legacy.standalone.min.css
vendored
File diff suppressed because one or more lines are too long
1
dist/light-legacy.standalone.min.css.map
vendored
1
dist/light-legacy.standalone.min.css.map
vendored
File diff suppressed because one or more lines are too long
405
dist/light.css
vendored
405
dist/light.css
vendored
|
|
@ -1,96 +1,17 @@
|
|||
/**
|
||||
* 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");
|
||||
}
|
||||
}
|
||||
|
||||
@charset "UTF-8";
|
||||
body {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
line-height: 1.4;
|
||||
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 0 10px;
|
||||
|
||||
color: var(--text-main);
|
||||
background: var(--background-body);
|
||||
|
||||
color: #363636;
|
||||
background: #ffffff;
|
||||
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;
|
||||
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 {
|
||||
|
|
@ -114,7 +35,7 @@ h4,
|
|||
h5,
|
||||
h6,
|
||||
strong {
|
||||
color: var(--text-bright);
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
h1,
|
||||
|
|
@ -129,24 +50,16 @@ th {
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
q:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
q:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
blockquote , q{
|
||||
border-left: 4px solid var(--focus);
|
||||
blockquote {
|
||||
border-left: 4px solid #0096bfab;
|
||||
margin: 1.5em 0em;
|
||||
padding: 0.5em 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
blockquote > footer {
|
||||
margin-top: 10px;
|
||||
font-style: normal;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
blockquote cite {
|
||||
|
|
@ -169,19 +82,10 @@ a[href^='sms']::before {
|
|||
content: '💬 ';
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: var(--highlight);
|
||||
border-radius: 2px;
|
||||
padding: 0px 2px 0px 2px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
button, select,
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='button'],
|
||||
input[type='checkbox'],
|
||||
input[type='range'],
|
||||
input[type='radio'] {
|
||||
input[type='checkbox'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -190,29 +94,21 @@ select {
|
|||
display: block;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
color: var(--form-text);
|
||||
background-color: var(--background);
|
||||
|
||||
input, select, button, textarea {
|
||||
color: #000000;
|
||||
background-color: #efefef;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
|
||||
margin-right: 6px;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px;
|
||||
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button,
|
||||
textarea {
|
||||
input:not([type='checkbox']):not([type='radio']),
|
||||
select, button, textarea {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
|
|
@ -223,24 +119,7 @@ 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'] {
|
||||
button, input[type='submit'], input[type='button'] {
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
|
@ -248,56 +127,20 @@ input[type='button'] {
|
|||
button:hover,
|
||||
input[type='submit']:hover,
|
||||
input[type='button']:hover {
|
||||
background: var(--button-hover);
|
||||
background: #dddddd;
|
||||
}
|
||||
|
||||
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);
|
||||
box-shadow: 0 0 0 2px #0096bfab;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
|
@ -307,141 +150,39 @@ select:disabled,
|
|||
button:disabled,
|
||||
textarea:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: var(--form-placeholder);
|
||||
color: #949494;
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: var(--form-placeholder);
|
||||
:-ms-input-placeholder {
|
||||
color: #949494;
|
||||
}
|
||||
|
||||
::-ms-input-placeholder {
|
||||
color: var(--form-placeholder);
|
||||
color: #949494;
|
||||
}
|
||||
|
||||
::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);
|
||||
color: #949494;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--links);
|
||||
color: #0076d1;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
code, samp, time {
|
||||
background: var(--background);
|
||||
color: var(--code);
|
||||
padding: 2.5px 5px;
|
||||
code, kbd {
|
||||
background: #efefef;
|
||||
color: #000000;
|
||||
padding: 5px;
|
||||
border-radius: 6px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
|
|
@ -450,28 +191,13 @@ pre > code {
|
|||
overflow-x: auto;
|
||||
}
|
||||
|
||||
var {
|
||||
color: var(--variable);
|
||||
font-style: normal;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
kbd {
|
||||
background: var(--background);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 2px;
|
||||
color: var(--text-main);
|
||||
padding: 2px 4px 2px 4px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border);
|
||||
border-top: 1px solid #dbdbdb;
|
||||
}
|
||||
|
||||
table {
|
||||
|
|
@ -480,22 +206,17 @@ table {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
td, th {
|
||||
padding: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
thead {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
tfoot {
|
||||
border-top: 1px solid var(--border);
|
||||
th {
|
||||
border-bottom: 1px solid #dbdbdb;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: var(--background-alt);
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
|
|
@ -504,69 +225,17 @@ tbody tr:nth-child(even) {
|
|||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--background);
|
||||
background: #efefef;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar-thumb);
|
||||
background: #d5d5d5;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--scrollbar-thumb-hover);
|
||||
background: #c4c4c4;
|
||||
}
|
||||
|
||||
::-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 */
|
||||
|
|
|
|||
2
dist/light.css.map
vendored
2
dist/light.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/light.min.css
vendored
2
dist/light.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/light.min.css.map
vendored
2
dist/light.min.css.map
vendored
File diff suppressed because one or more lines are too long
537
dist/light.standalone.css
vendored
537
dist/light.standalone.css
vendored
|
|
@ -1,537 +0,0 @@
|
|||
/**
|
||||
* 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
1
dist/light.standalone.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/light.standalone.min.css
vendored
2
dist/light.standalone.min.css
vendored
File diff suppressed because one or more lines are too long
1
dist/light.standalone.min.css.map
vendored
1
dist/light.standalone.min.css.map
vendored
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.5 KiB |
12
docs/icons/browserconfig.xml
Executable file
12
docs/icons/browserconfig.xml
Executable file
|
|
@ -0,0 +1,12 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square70x70logo src="./mstile-70x70.png"/>
|
||||
<square150x150logo src="./mstile-150x150.png"/>
|
||||
<square310x310logo src="./mstile-310x310.png"/>
|
||||
<wide310x150logo src="./mstile-310x150.png"/>
|
||||
<TileColor>#00aba9</TileColor>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 7.5 KiB |
|
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 8.1 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
342
docs/index.html
Normal file
342
docs/index.html
Normal file
|
|
@ -0,0 +1,342 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head prefix="og: http://ogp.me/ns#">
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Water.css</title>
|
||||
<link rel="canonical" href="https://watercss.kognise.dev/" />
|
||||
<meta
|
||||
name="description"
|
||||
content="A drop-in collection of CSS styles to make simple websites like this just a little bit nicer."
|
||||
/>
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-touch-icon.png" />
|
||||
<link rel="icon" id="icon-16" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png" />
|
||||
<link rel="icon" id="icon-32" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png" />
|
||||
<link rel="manifest" href="./site.webmanifest" />
|
||||
<link rel="mask-icon" href="./icons/safari-pinned-tab.svg" color="#5bbad5" />
|
||||
<link rel="shortcut icon" id="icon-ico" href="./icons/favicon.ico" />
|
||||
<meta name="apple-mobile-web-app-title" content="Water.css" />
|
||||
<meta name="application-name" content="Water.css" />
|
||||
<meta name="msapplication-TileColor" content="#00aba9" />
|
||||
<meta name="msapplication-config" content="./icons/browserconfig.xml" />
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
|
||||
<!-- Startup styles of water.css, so styles don't have to wait until JS is loaded -->
|
||||
<link rel="preload" as="style" href="./water.css/dark.min.css" />
|
||||
<link rel="preload" as="style" href="./water.css/light.min.css" />
|
||||
<link rel="stylesheet" id="js-startup-stylesheet" href="./water.css/water.min.css" />
|
||||
|
||||
<!-- Dynamic version of water.css, overwrites startup styles. JavaScript sets & updates href -->
|
||||
<link rel="stylesheet" id="js-stylesheet" />
|
||||
|
||||
<!-- Custom styles for the documentation / version picker -->
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://watercss.kognise.dev/" />
|
||||
<meta property="og:title" content="Water.css" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="A drop-in collection of CSS styles to make simple websites like this just a little bit nicer."
|
||||
/>
|
||||
<meta
|
||||
property="og:image"
|
||||
content="https://raw.githubusercontent.com/kognise/water.css/master/logo.png"
|
||||
/>
|
||||
<meta property="og:image:width" content="1154" />
|
||||
<meta property="og:image:height" content="444" />
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "http://www.schema.org",
|
||||
"@type": "WebSite",
|
||||
"name": "Water.css",
|
||||
"alternateName": "Water.css",
|
||||
"url": "https://watercss.kognise.dev/"
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
window.navigator.clipboard || document.write('<script src="https://unpkg.com/clipboard-polyfill@2.8.6/dist/clipboard-polyfill.promise.js"><\/script>')
|
||||
</script>
|
||||
|
||||
<!-- Use bright favicons when the browser is in dark mode. -->
|
||||
<script type="module">
|
||||
import faviconSwitcher from 'https://unpkg.com/favicon-mode-switcher@1.0.4/dist/index.min.mjs'
|
||||
faviconSwitcher([
|
||||
{ element: '#icon-ico', href: { dark: './icons/light-favicon.ico' } },
|
||||
{ element: '#icon-16', href: { dark: './icons/light-favicon-16x16.png' } },
|
||||
{ element: '#icon-32', href: { dark: './icons/light-favicon-32x32.png' } }
|
||||
])
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Water.css</h1>
|
||||
|
||||
<p>
|
||||
Water.css is a drop-in collection of CSS styles to make simple websites like this just a
|
||||
little bit nicer.
|
||||
</p>
|
||||
<p>
|
||||
Now you can write your simple static site with nice semantic html, and Water.css will manage
|
||||
the styling for you.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div>
|
||||
<a href="#installation"><b>Get it already!</b></a>
|
||||
<br />
|
||||
<a href="https://github.com/kognise/water.css"><b>GitHub</b></a>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="https://www.producthunt.com/posts/water-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-water-css"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<img
|
||||
id="product-hunt"
|
||||
src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=150490&theme=dark&period=daily"
|
||||
alt="Water.css - Make your tiny website just a little nicer | Product Hunt Embed"
|
||||
style="width: 250px; height: 54px;"
|
||||
width="250px"
|
||||
height="54px"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h2>Installation</h2>
|
||||
<div id="installation">
|
||||
<header class="row">
|
||||
<h3 id="link-snippet-headline">
|
||||
Paste this into the <code><head></code> of your HTML:
|
||||
</h3>
|
||||
<button type="button" id="copy-button">
|
||||
<span id="copy-button-feedback"></span>
|
||||
Copy to clipboard
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div id="link-snippet-container">
|
||||
<pre id="link-snippet-auto"><code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"></code></pre>
|
||||
<pre hidden id="link-snippet-dark"><code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css"></code></pre>
|
||||
<pre hidden id="link-snippet-light"><code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css"></code></pre>
|
||||
</div>
|
||||
|
||||
<h3>Options</h3>
|
||||
<form id="theme-form">
|
||||
<input type="radio" value="auto" checked name="theme" id="theme-auto" />
|
||||
<label for="theme-auto">Automatic 🌙 / ☀</label>
|
||||
|
||||
<input type="radio" value="dark" name="theme" id="theme-dark" />
|
||||
<label for="theme-dark">Dark theme 🌙</label>
|
||||
|
||||
<input type="radio" value="light" name="theme" id="theme-light" />
|
||||
<label for="theme-light">Light theme ☀</label>
|
||||
</form>
|
||||
|
||||
<table id="version-info">
|
||||
<caption>
|
||||
<h3>Version info</h3>
|
||||
</caption>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">File</th>
|
||||
<td id="table-file-name"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row">Size (min + gzip)</th>
|
||||
<td id="table-file-size"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row">Theme</th>
|
||||
<td id="table-theme"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h2 id="goals">Goals</h2>
|
||||
<ul>
|
||||
<li>Responsive</li>
|
||||
<li>Good code quality</li>
|
||||
<li>Good browser support</li>
|
||||
<li>Small size (< 2kb)</li>
|
||||
<li>Beautiful</li>
|
||||
<li>No classes</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="responsive">Is it responsive?</h2>
|
||||
<p>
|
||||
<strong>Heck yeah!</strong> It doesn't include any fancy styles so it's easily mobile
|
||||
responsive. Just add the famous
|
||||
<a href="https://www.w3schools.com/css/css_rwd_viewport.asp">responsive viewport tag</a> and
|
||||
you'll be good to go!
|
||||
</p>
|
||||
<p>In fact, try resizing this page. Everything flows super nicely as you'll see.</p>
|
||||
|
||||
<h2 id="bookmarklet">Bookmarklet</h2>
|
||||
<p>
|
||||
A bookmarklet is a snippet of JavaScript that sits in your bookmarks bar.
|
||||
</p>
|
||||
<p>
|
||||
The Waterize bookmarklet can be used to make ugly websites more readable by replacing the styles with Water.css. Just drag this link to your bookmarks bar:
|
||||
</p>
|
||||
<strong>
|
||||
<a href="javascript:void%20function(){const%20a=a=%3Edocument.querySelectorAll(a),b=(a,b)=%3EObject.assign(document.createElement(a),b);a(%22link[rel=\%22stylesheet\%22],style%22).forEach(a=%3Ea.remove()),a(%22*%22).forEach(a=%3Ea.style=%22%22),document.head.append(b(%22link%22,{rel:%22stylesheet%22,href:%22//cdn.jsdelivr.net/npm/water.css%402/out/water.css%22}),!a(%22meta[name=\%22viewport\%22]%22).length%26%26b(%22meta%22,{name:%22viewport%22,content:%22width=device-width,initial-scale=1.0%22}))}();">
|
||||
Waterize
|
||||
</a>
|
||||
</strong>
|
||||
|
||||
<h2 id="demo">Element demos</h2>
|
||||
<p>This is supposed to be a demo page so we need more elements!</p>
|
||||
|
||||
<h3 id="form-elements">Form elements</h3>
|
||||
<form>
|
||||
<label for="email">Email</label>
|
||||
<input type="email" name="email" id="email" placeholder="john.doe@gmail.com" />
|
||||
|
||||
<label for="id">User id (read only)</label>
|
||||
<input readonly name="id" id="id" value="04D6H89Z" />
|
||||
|
||||
<label for="disabled">Random disabled input</label>
|
||||
<input disabled name="disabled" id="disabled" placeholder="Because why not?" />
|
||||
|
||||
<label for="about">About me</label>
|
||||
<textarea name="about" id="about" placeholder="I am a textarea..."></textarea>
|
||||
|
||||
<label>Choose a Doe:</label>
|
||||
<div>
|
||||
<input type="radio" id="john" name="drone" value="john" checked />
|
||||
<label for="john">John Doe</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" id="jane" name="drone" value="jane" checked />
|
||||
<label for="jane">Jane Doe</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" id="johnny" name="drone" value="johnny" checked />
|
||||
<label for="johnny">Johnny Doe</label>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<input type="checkbox" name="remember" id="remember" checked />
|
||||
<label for="remember">Remember me</label>
|
||||
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
|
||||
<h3 id="code">Code</h3>
|
||||
<p>
|
||||
Below is some code, you can copy it with <kbd>Ctrl-C</kbd>. Did you know,
|
||||
<code>alert(1)</code> can show an alert in JavaScript!
|
||||
</p>
|
||||
<pre><code>// This logs a message to the console and check out the scrollbar.<br>console.log('Hello, world!')</code></pre>
|
||||
|
||||
<h3 id="other">Other</h3>
|
||||
<p>Here's a horizontal rule and image because I don't know where else to put them.</p>
|
||||
<img src="https://placekitten.com/408/287" alt="Example kitten" />
|
||||
<hr />
|
||||
|
||||
<p>And here's a nicely marked up table!</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Quantity</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Godzilla</td>
|
||||
<td>2</td>
|
||||
<td>$299.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mozilla</td>
|
||||
<td>10</td>
|
||||
<td>$100,000.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quesadilla</td>
|
||||
<td>1</td>
|
||||
<td>$2.22</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<details>
|
||||
<summary>Some summary/details can't hurt!</summary>
|
||||
<p>Lorem ipsum dolor sit blah blah.</p>
|
||||
</details>
|
||||
|
||||
<h3 id="typography">Typography</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis
|
||||
ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis
|
||||
ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius
|
||||
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu
|
||||
felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui
|
||||
aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora
|
||||
torquent per conubia nostra, per inceptos himenaeos.
|
||||
<strong>This is strong,</strong> this is normal, <b>this is just bold,</b>
|
||||
<em>and this is emphasized!</em> And heck, <a href="/">here</a>'s a link.
|
||||
</p>
|
||||
|
||||
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
|
||||
"The HTML blockquote Element (or HTML Block Quotation Element) indicates that the enclosed
|
||||
text is an extended quotation. Usually, this is rendered visually by indentation (see
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#Usage_notes"
|
||||
>Notes</a
|
||||
>
|
||||
for how to change it). A URL for the source of the quotation may be given using the
|
||||
<code>cite</code> attribute, while a text representation of the source can be given using the
|
||||
<code><cite></code> cite element."
|
||||
|
||||
<footer>
|
||||
<cite>MDN, "The Block Quotation element"</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<ul>
|
||||
<li>Unordered list item 1</li>
|
||||
<li>Unordered list item 2</li>
|
||||
<li>Unordered list item 3</li>
|
||||
</ul>
|
||||
<ol>
|
||||
<li>Ordered list item 1</li>
|
||||
<li>Ordered list item 2</li>
|
||||
<li>Ordered list item 3</li>
|
||||
</ol>
|
||||
|
||||
<p>Addresses are also styled to be <strong>awesome</strong>!</p>
|
||||
<address>
|
||||
<a href="mailto:john.doe@example.com">john.doe@example.com</a><br />
|
||||
<a href="tel:778-330-2389">778-330-2389</a><br />
|
||||
<a href="sms:666-666-6666">666-666-6666</a><br />
|
||||
</address>
|
||||
|
||||
<br />
|
||||
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
|
||||
<footer>
|
||||
<a href="#">Back to top ⬆</a>
|
||||
</footer>
|
||||
|
||||
<script src="script.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
79
docs/script.js
Normal file
79
docs/script.js
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
'use strict'
|
||||
|
||||
const localBase = './water.css/'
|
||||
|
||||
const fileSizes = {
|
||||
dark: 2.57,
|
||||
light: 2.55,
|
||||
auto: 3.27
|
||||
}
|
||||
|
||||
const themeForm = document.getElementById('theme-form')
|
||||
const stylesheet = document.getElementById('js-stylesheet')
|
||||
const startupStylesheet = document.getElementById('js-startup-stylesheet')
|
||||
const productHunt = document.getElementById('product-hunt')
|
||||
const copyButton = document.getElementById('copy-button')
|
||||
const copyButtonFeedback = document.getElementById('copy-button-feedback')
|
||||
const linkSnippets = [].slice.call(document.querySelectorAll('#link-snippet-container > pre'))
|
||||
|
||||
const table = {
|
||||
fileName: document.getElementById('table-file-name'),
|
||||
fileSize: document.getElementById('table-file-size'),
|
||||
theme: document.getElementById('table-theme')
|
||||
}
|
||||
|
||||
const prefersColorScheme = window.matchMedia('(prefers-color-scheme: light)')
|
||||
|
||||
const updateProductHunt = (theme) => {
|
||||
theme = theme || (prefersColorScheme.matches ? 'light' : 'dark')
|
||||
productHunt.src = `https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=150490&theme=${theme}&period=daily`
|
||||
}
|
||||
|
||||
const updateTheme = () => {
|
||||
const theme = themeForm.querySelector('input[name="theme"]:checked').value
|
||||
|
||||
const fileName = `${theme === 'auto' ? 'water' : theme}.min.css`
|
||||
const localUrl = `${localBase}${fileName}`
|
||||
|
||||
stylesheet.href = localUrl
|
||||
|
||||
for (const snippet of linkSnippets) {
|
||||
snippet.hidden = snippet.id.indexOf(theme) === -1
|
||||
}
|
||||
|
||||
table.fileName.innerText = fileName
|
||||
table.fileSize.innerText = `${fileSizes[theme].toFixed(2)} kb`
|
||||
|
||||
if (theme === 'auto') {
|
||||
updateProductHunt()
|
||||
table.theme.innerHTML = `
|
||||
Respects user-defined theme settings using <a style="--links: var(--code)" href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme" target="_blank" rel="noopener"><code>prefers-color-scheme</code></a>.<br>
|
||||
Light in browsers where the theme settings can't be detected.
|
||||
`
|
||||
} else {
|
||||
updateProductHunt(theme)
|
||||
table.theme.innerText = `Theme is forced to ${theme}.`
|
||||
}
|
||||
}
|
||||
|
||||
themeForm.addEventListener('change', updateTheme)
|
||||
|
||||
updateProductHunt()
|
||||
prefersColorScheme.addListener(() => {
|
||||
if (themeForm.theme.value !== 'auto') return
|
||||
updateProductHunt()
|
||||
})
|
||||
|
||||
updateTheme()
|
||||
startupStylesheet.parentElement.removeChild(startupStylesheet)
|
||||
|
||||
copyButton.addEventListener('click', () => {
|
||||
const clipboard = navigator.clipboard || window.clipboard
|
||||
const theme = themeForm.querySelector('input[name="theme"]:checked').value
|
||||
const snippetText = document.querySelector(`#link-snippet-${theme} code`).textContent
|
||||
|
||||
clipboard.writeText(snippetText)
|
||||
.then(() => { copyButtonFeedback.textContent = '✔' })
|
||||
.catch(() => { copyButtonFeedback.textContent = '❌' })
|
||||
.then(() => setTimeout(() => { copyButtonFeedback.textContent = '' }, 1000))
|
||||
})
|
||||
|
|
@ -1,14 +1,15 @@
|
|||
{
|
||||
"name": "Water.css",
|
||||
"short_name": "Water.css",
|
||||
"start_url": "./",
|
||||
"icons": [
|
||||
{
|
||||
"src": "icons/android-chrome-192x192.png",
|
||||
"src": "./icons/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "icons/android-chrome-512x512.png",
|
||||
"src": "./icons/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
65
docs/style.css
Executable file
65
docs/style.css
Executable file
|
|
@ -0,0 +1,65 @@
|
|||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
#product-hunt {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#link-snippet-headline {
|
||||
margin: 1rem 2.5rem 1rem 0;
|
||||
}
|
||||
|
||||
/* Make the feedback Emoji appear next to the button */
|
||||
#copy-button {
|
||||
position: relative;
|
||||
margin-right: 2px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#copy-button-feedback {
|
||||
position: absolute;
|
||||
left: -2rem;
|
||||
display: inline-block;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
#link-snippet-container {
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
display: -ms-grid;
|
||||
-ms-grid-columns: 1fr;
|
||||
}
|
||||
|
||||
#link-snippet-container > pre {
|
||||
overflow: auto;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1) 220ms;
|
||||
}
|
||||
|
||||
#link-snippet-container > pre[hidden] {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
transform: scale(0);
|
||||
transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1), visibility 0ms 220ms;
|
||||
}
|
||||
|
||||
#theme-form > label:not(:last-of-type) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
#version-info th {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
body > footer {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
141
gulpfile.js
141
gulpfile.js
|
|
@ -9,28 +9,31 @@ const chalk = require('chalk')
|
|||
const rename = require('gulp-rename')
|
||||
const filter = require('gulp-filter')
|
||||
const flatten = require('gulp-flatten')
|
||||
const babel = require('gulp-babel')
|
||||
const terser = require('gulp-terser')
|
||||
const posthtml = require('gulp-posthtml')
|
||||
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/*',
|
||||
docsDir: '*',
|
||||
styles: { src: 'src/builds/*.css', dest: 'dist' }
|
||||
docs: { src: 'docs/**', dest: 'out/docs' },
|
||||
styles: { src: 'src/builds/*.css', dest: 'out', watch: 'src/**/*.css' }
|
||||
}
|
||||
|
||||
// https://stackoverflow.com/a/20732091
|
||||
function humanFileSize (size) {
|
||||
var i = Math.floor(Math.log(size) / Math.log(1024))
|
||||
const humanFileSize = (size) => {
|
||||
const i = Math.floor(Math.log(size) / Math.log(1024))
|
||||
return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]
|
||||
}
|
||||
|
||||
function formatByteMessage (source, data) {
|
||||
const formatByteMessage = (source, data) => {
|
||||
const prettyStartSize = humanFileSize(data.startSize)
|
||||
let message = ''
|
||||
|
||||
|
|
@ -48,85 +51,95 @@ function formatByteMessage (source, data) {
|
|||
return chalk`{cyan ${source.padStart(12, ' ')}}: {bold ${data.fileName}} ${message}`
|
||||
}
|
||||
|
||||
function style () {
|
||||
const isLegacy = path => /legacy/.test(path)
|
||||
|
||||
const excludeModern = filter(file => isLegacy(file.path), { restore: true })
|
||||
const excludeLegacy = filter(file => !isLegacy(file.path), { restore: true })
|
||||
const style = () => {
|
||||
const startDiff = () => bytediff.start()
|
||||
const endDiff = (source) => bytediff.stop((data) => formatByteMessage(source, data))
|
||||
|
||||
return (
|
||||
gulp
|
||||
.src(paths.styles.src)
|
||||
// Add sourcemaps
|
||||
.pipe(sourcemaps.init())
|
||||
// Resolve imports, calculated colors and inlined SVG files
|
||||
.pipe(postcss([postcssImport(), postcssColorModFunction(), postcssInlineSvg()]))
|
||||
|
||||
// * Process legacy builds *
|
||||
.pipe(excludeModern)
|
||||
// Inline variable values so CSS works in legacy browsers
|
||||
.pipe(postcss([postcssCssVariables()]))
|
||||
// Calculate size before autoprefixing
|
||||
.pipe(bytediff.start())
|
||||
// autoprefix
|
||||
.pipe(postcss([autoprefixer({
|
||||
env: 'legacy'
|
||||
})]))
|
||||
// Write the amount gained by autoprefixing
|
||||
.pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
|
||||
.pipe(excludeModern.restore)
|
||||
.pipe(startDiff())
|
||||
.pipe(postcss([postcssCssVariables({ preserve: true })]))
|
||||
.pipe(endDiff('css variables'))
|
||||
|
||||
// * Process modern builds *
|
||||
.pipe(excludeLegacy)
|
||||
// Calculate size before autoprefixing
|
||||
.pipe(bytediff.start())
|
||||
// autoprefix modern builds
|
||||
.pipe(postcss([autoprefixer({
|
||||
env: 'modern'
|
||||
})]))
|
||||
// Write the amount gained by autoprefixing
|
||||
.pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
|
||||
.pipe(excludeLegacy.restore)
|
||||
.pipe(startDiff())
|
||||
.pipe(postcss([autoprefixer()]))
|
||||
.pipe(endDiff('autoprefixer'))
|
||||
|
||||
// Write the sourcemaps after making pre-minified changes
|
||||
.pipe(sourcemaps.write('.'))
|
||||
// Flatten output so files end up in dist/*, not dist/builds/*
|
||||
.pipe(flatten())
|
||||
// Write pre-minified styles
|
||||
.pipe(flatten()) // Put files in out/*, not out/builds/*
|
||||
.pipe(gulp.dest(paths.styles.dest))
|
||||
// Remove sourcemaps from the pipeline, only keep css
|
||||
.pipe(filter('**/*.css'))
|
||||
// Calculate size before minifying
|
||||
.pipe(bytediff.start())
|
||||
// Minify using cssnano, use extra-low precision while minifying inline SVGs
|
||||
|
||||
.pipe(filter('**/*.css')) // Remove sourcemaps from the pipeline
|
||||
|
||||
// <minifying>
|
||||
.pipe(startDiff())
|
||||
.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
|
||||
.pipe(endDiff('minification'))
|
||||
.pipe(rename({ suffix: '.min' }))
|
||||
// Write the sourcemaps after making all changes
|
||||
// </minifying>
|
||||
|
||||
.pipe(sourcemaps.write('.'))
|
||||
// Write the minified files
|
||||
.pipe(gulp.dest(paths.styles.dest))
|
||||
.pipe(gulp.dest(paths.docs.dest + '/water.css'))
|
||||
|
||||
.pipe(filter('**/*.css')) // Remove sourcemaps from the pipeline
|
||||
.pipe(sizereport({ gzip: true, total: false, title: 'SIZE REPORT' }))
|
||||
// Stream any changes to browserSync
|
||||
.pipe(browserSync.stream())
|
||||
)
|
||||
}
|
||||
|
||||
function watch () {
|
||||
style()
|
||||
const docs = () => {
|
||||
const htmlOnly = filter('**/*.html', { restore: true })
|
||||
const jsOnly = filter('**/*.js', { restore: true })
|
||||
const cssOnly = filter('**/*.css', { restore: true })
|
||||
|
||||
browserSync.init({
|
||||
server: {
|
||||
baseDir: './'
|
||||
},
|
||||
startPath: 'index.html'
|
||||
})
|
||||
return (
|
||||
gulp
|
||||
// Exclude all HTML files but index.html
|
||||
.src(paths.docs.src, { ignore: '**/!(index).html' })
|
||||
|
||||
gulp.watch(paths.srcDir, style)
|
||||
gulp.watch([paths.srcDir, paths.docsDir], browserSync.reload)
|
||||
// * Process HTML *
|
||||
.pipe(htmlOnly)
|
||||
.pipe(posthtml([htmlnano()]))
|
||||
.pipe(htmlOnly.restore)
|
||||
|
||||
// * Process JS *
|
||||
.pipe(jsOnly)
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(babel({ presets: ['@babel/preset-env'] }))
|
||||
.pipe(terser({ toplevel: true }))
|
||||
.pipe(sourcemaps.write('.'))
|
||||
.pipe(jsOnly.restore)
|
||||
|
||||
// * Process CSS *
|
||||
.pipe(cssOnly)
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(postcss([autoprefixer(), cssnano()]))
|
||||
.pipe(sourcemaps.write('.'))
|
||||
.pipe(cssOnly.restore)
|
||||
|
||||
.pipe(gulp.dest(paths.docs.dest))
|
||||
)
|
||||
}
|
||||
|
||||
module.exports.style = style
|
||||
const browserReload = (done) => {
|
||||
browserSync.reload()
|
||||
return done()
|
||||
}
|
||||
|
||||
const startDevServer = () => {
|
||||
browserSync.init({ server: { baseDir: './out/docs' } })
|
||||
|
||||
gulp.watch(paths.styles.watch, gulp.series(style, browserReload))
|
||||
gulp.watch(paths.docs.src, gulp.series(docs, browserReload))
|
||||
}
|
||||
|
||||
const build = gulp.parallel(style, docs)
|
||||
const watch = gulp.series(build, startDevServer)
|
||||
|
||||
module.exports.build = build
|
||||
module.exports.watch = watch
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square70x70logo src="icons/mstile-70x70.png"/>
|
||||
<square150x150logo src="icons/mstile-150x150.png"/>
|
||||
<square310x310logo src="icons/mstile-310x310.png"/>
|
||||
<wide310x150logo src="icons/mstile-310x150.png"/>
|
||||
<TileColor>#00aba9</TileColor>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
||||
323
index.html
323
index.html
|
|
@ -1,323 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<title>Water.css</title>
|
||||
<link id='stylesheet' rel='stylesheet' href='dist/dark.css' />
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
|
||||
<!-- Icons generated with https://realfavicongenerator.net -->
|
||||
<link
|
||||
rel='apple-touch-icon'
|
||||
sizes='180x180'
|
||||
href='icons/apple-touch-icon.png'
|
||||
/>
|
||||
<link
|
||||
rel='icon'
|
||||
type='image/png'
|
||||
sizes='32x32'
|
||||
href='icons/favicon-32x32.png'
|
||||
/>
|
||||
<link
|
||||
rel='icon'
|
||||
type='image/png'
|
||||
sizes='16x16'
|
||||
href='icons/favicon-16x16.png'
|
||||
/>
|
||||
<link rel='manifest' href='icons/site.webmanifest' />
|
||||
<link rel='mask-icon' href='icons/safari-pinned-tab.svg' color='#5bbad5' />
|
||||
<link rel='shortcut icon' href='icons/favicon.ico' />
|
||||
<meta name='apple-mobile-web-app-title' content='Water.css' />
|
||||
<meta name='application-name' content='Water.css' />
|
||||
<meta name='msapplication-TileColor' content='#00aba9' />
|
||||
<meta name='msapplication-config' content='icons/browserconfig.xml' />
|
||||
<meta name='theme-color' content='#ffffff' />
|
||||
|
||||
<script
|
||||
async
|
||||
src='https://www.googletagmanager.com/gtag/js?id=UA-116663597-6'
|
||||
></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-116663597-6');
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Water.css</h1>
|
||||
<p>
|
||||
Water.css is a just-add-css collection of styles to make simple websites
|
||||
like this just a little bit nicer.
|
||||
<a href='https://github.com/kognise/water.css'>Get it already!</a>
|
||||
</p>
|
||||
<p>
|
||||
Now you can write your simple static site with nice semantic html, and
|
||||
Water.css will manage the styling for you.
|
||||
</p>
|
||||
<a
|
||||
href='https://www.producthunt.com/posts/water-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-water-css'
|
||||
target='_blank'
|
||||
><img
|
||||
id='ph'
|
||||
src='https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=150490&theme=dark&period=daily'
|
||||
alt='Water.css - Make your tiny website just a little nicer | Product Hunt Embed'
|
||||
width='250'
|
||||
height='54'
|
||||
/></a>
|
||||
|
||||
<h2>Goals</h2>
|
||||
<ul>
|
||||
<li>Responsive</li>
|
||||
<li>Good code quality</li>
|
||||
<li>Good browser support</li>
|
||||
<li>Small tiny</li>
|
||||
<li>Beautiful</li>
|
||||
<li>No classes</li>
|
||||
</ul>
|
||||
|
||||
<h2>Is it responsive?</h2>
|
||||
<p>
|
||||
<strong>Heck yeah!</strong> It doesn't include any fancy styles so it's
|
||||
easily mobile responsive. Just add the famous
|
||||
<a href='https://www.w3schools.com/css/css_rwd_viewport.asp'
|
||||
>responsive viewport tag</a
|
||||
>
|
||||
and you'll be good to go!
|
||||
</p>
|
||||
<p>
|
||||
In fact, try resizing this page. Everything flows super nicely as you'll
|
||||
see.
|
||||
</p>
|
||||
<button type='button' id='switch'>Switch theme</button>
|
||||
<h2>Element demos</h2>
|
||||
<p>
|
||||
This is supposed to be a demo page so we need more elements!
|
||||
</p>
|
||||
|
||||
<h3>Form elements</h3>
|
||||
<form>
|
||||
|
||||
<fieldset>
|
||||
<legend>Fieldset</legend>
|
||||
|
||||
<label for='email'>Email</label>
|
||||
<input
|
||||
type='email'
|
||||
name='email'
|
||||
id='email'
|
||||
placeholder='john.doe@gmail.com'
|
||||
/>
|
||||
|
||||
<label for='password'>Password</label>
|
||||
<input
|
||||
type='password'
|
||||
name='password'
|
||||
id='password'
|
||||
placeholder='password'
|
||||
/>
|
||||
|
||||
<p>
|
||||
<input type='checkbox' name='remember' id='remember' checked />
|
||||
<label for='remember'>Remember me</label>
|
||||
</p>
|
||||
|
||||
<input type='submit' />
|
||||
</fieldset>
|
||||
|
||||
<label for='id'>User id (read only)</label>
|
||||
<input readonly name='id' id='id' value='04D6H89Z' />
|
||||
|
||||
<label for='disabled'>Random disabled input</label>
|
||||
<input
|
||||
disabled
|
||||
name='disabled'
|
||||
id='disabled'
|
||||
placeholder='Because why not?'
|
||||
/>
|
||||
|
||||
<label for='about'>About me</label>
|
||||
<textarea
|
||||
name='about'
|
||||
id='about'
|
||||
placeholder='I am a textarea...'
|
||||
></textarea>
|
||||
|
||||
<label for='drink'>Select your favorite drink</label>
|
||||
<select name='drinks' id='drink'>
|
||||
<option value='mojito'>Mojito</option>
|
||||
<option value='water'>Water</option>
|
||||
<option value='lemon'>Lemon juice</option>
|
||||
</select>
|
||||
|
||||
<label for='drinks'>Or select multiple favorite drinks</label>
|
||||
<br/>
|
||||
<small>Hold down the Ctrl (Windows) / Command (Mac) button to select multiple options. (P.S. this message is inside a <code><small></code> tag!</small>)
|
||||
<select name='drink' id='drinks' multiple>
|
||||
<option value='mojito'>Mojito</option>
|
||||
<option value='water'>Water</option>
|
||||
<option value='lemon'>Lemon juice</option>
|
||||
</select>
|
||||
|
||||
<label>Choose a Doe:</label>
|
||||
<div>
|
||||
<input type='radio' id='john' name='doe' value='john' checked>
|
||||
<label for='john'>John Doe</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type='radio' id='jane' name='doe' value='jane' checked>
|
||||
<label for='jane'>Jane Doe</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type='radio' id='johnny' name='doe' value='johnny' checked>
|
||||
<label for='johnny'>Johnny Doe</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type='radio' id='doe' name='doe' value='doe' checked>
|
||||
<label for='doe'>An actual doe</label>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div>
|
||||
<label for='volume'>Volume</label>
|
||||
<input type='range' name='volume' id='volume' min='0' max='11' />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<h3>Code</h3>
|
||||
<p>
|
||||
Below is some code, with a variable, you can copy it with
|
||||
<kbd>Ctrl-C</kbd>. Did you know, <code>alert(1)</code> can show an alert
|
||||
in JavaScript!
|
||||
</p>
|
||||
<code>var <var>myNumber</var> = 0;</code>
|
||||
<pre><code>// This logs a message to the console and check out the scrollbar.<br>console.log('Hello, world!')</code></pre>
|
||||
|
||||
<p>Here are some more keyboard buttons</p>
|
||||
<p>
|
||||
Press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Print Screen</kbd> to take
|
||||
a selected area screenshot on Linux.
|
||||
</p>
|
||||
<h3>Other</h3>
|
||||
<p>
|
||||
Here's a horizontal rule and image because I don't know where else to put
|
||||
them.
|
||||
</p>
|
||||
<img src='https://placekitten.com/408/287' alt='Example kitten' />
|
||||
<hr />
|
||||
|
||||
<p>And here's a nicely marked up table!</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Quantity</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Godzilla</td>
|
||||
<td>2</td>
|
||||
<td>$299.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mozilla</td>
|
||||
<td>10</td>
|
||||
<td>$100,000.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quesadilla</td>
|
||||
<td>1</td>
|
||||
<td>$2.22</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Typography</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum
|
||||
hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus,
|
||||
sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin
|
||||
maximus lacus interdum leo molestie convallis. Orci varius natoque
|
||||
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut
|
||||
iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum,
|
||||
nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit
|
||||
lectus ac quam. Class aptent taciti sociosqu ad litora torquent per
|
||||
conubia nostra, per inceptos himenaeos.
|
||||
<strong>This is strong,</strong> this is normal,
|
||||
<b>this is just bold,</b> <em>and this is emphasized!</em> And heck,
|
||||
<a href='/'>here</a>'s a link.
|
||||
</p>
|
||||
|
||||
<blockquote
|
||||
cite='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote'
|
||||
>
|
||||
'The HTML blockquote Element (or HTML Block Quotation Element) indicates
|
||||
that the enclosed text is an extended quotation. Usually, this is rendered
|
||||
visually by indentation (see
|
||||
<a
|
||||
href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#Usage_notes'
|
||||
>Notes</a
|
||||
>
|
||||
for how to change it). A URL for the source of the quotation may be given
|
||||
using the
|
||||
<code>cite</code> attribute, while a text representation of the source can
|
||||
be given using the <code><cite></code> cite element.'
|
||||
|
||||
<footer>
|
||||
<cite>MDN, 'The Block Quotation element'</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<q>Quotes (<q>) share the same style as blockquotes.</q>
|
||||
|
||||
<p>Use <mark> to <mark>highlight the important stuff</mark>.</p>
|
||||
|
||||
<ul>
|
||||
<li>Unordered list item 1</li>
|
||||
<li>Unordered list item 2</li>
|
||||
<li>Unordered list item 3</li>
|
||||
</ul>
|
||||
<ol>
|
||||
<li>Ordered list item 1</li>
|
||||
<li>Ordered list item 2</li>
|
||||
<li>Ordered list item 3</li>
|
||||
</ol>
|
||||
|
||||
<p>Addresses are also styled to be <strong>awesome</strong>!</p>
|
||||
<address>
|
||||
<a href='mailto:john.doe@example.com'>john.doe@example.com</a><br />
|
||||
<a href='tel:778-330-2389'>778-330-2389</a><br />
|
||||
<a href='sms:666-666-6666'>666-666-6666</a><br />
|
||||
</address>
|
||||
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
|
||||
<p>The details and summary tag</p>
|
||||
<details>
|
||||
<summary>Click to Open...</summary>
|
||||
<p>The HTML Details Element (details) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the summary element.</p>
|
||||
</details>
|
||||
|
||||
<details open>
|
||||
<summary>Click to Hide...</summary>
|
||||
<p>The HTML Details Element (details) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the summary element.</p>
|
||||
</details>
|
||||
|
||||
<footer>
|
||||
Here is an example of a footer! Maybe you want to put some links here. <a href='#'>Privacy Policy</a> | <a href='https://github.com/kognise/water.css'>Contribute</a>
|
||||
</footer>
|
||||
|
||||
<script src='https://unpkg.com/favicon-mode-switcher@%5E1.0.0' defer></script>
|
||||
<script src='script.js' defer></script>
|
||||
</body>
|
||||
</html>
|
||||
60
package.json
60
package.json
|
|
@ -1,13 +1,16 @@
|
|||
{
|
||||
"name": "water.css",
|
||||
"version": "2.0.0",
|
||||
"description": "A just-add-css collection of styles to make simple websites just a little nicer.",
|
||||
"description": "A drop-in collection of CSS styles to make simple websites just a little nicer",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "gulp style",
|
||||
"build": "gulp build",
|
||||
"dev": "gulp watch",
|
||||
"lint": "standard --fix && stylelint \"src/*.css\" --fix",
|
||||
"prepublishOnly": "yarn build"
|
||||
"lint:js": "eslint bookmarklet/original.js docs/script.js docs/index.html gulpfile.js",
|
||||
"lint:css": "stylelint src/**/*.css docs/style.css",
|
||||
"lint": "yarn lint:js --fix && yarn lint:css --fix",
|
||||
"accessibility": "yarn build && node accessibility.js",
|
||||
"validate": "yarn lint:js && yarn lint:css && yarn accessibility"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
@ -26,46 +29,49 @@
|
|||
},
|
||||
"homepage": "https://github.com/kognise/water.css",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.4.5",
|
||||
"@babel/preset-env": "^7.4.5",
|
||||
"@changesets/cli": "^2.7.2",
|
||||
"autoprefixer": "^9.5.1",
|
||||
"browser-sync": "^2.26.3",
|
||||
"chalk": "^2.4.2",
|
||||
"cssnano": "^4.1.10",
|
||||
"eslint": "^7.1.0",
|
||||
"eslint-config-standard": "^14.1.1",
|
||||
"eslint-plugin-html": "^6.0.2",
|
||||
"eslint-plugin-import": "^2.20.2",
|
||||
"eslint-plugin-markdown": "^2.0.0-alpha.0",
|
||||
"eslint-plugin-node": "^11.1.0",
|
||||
"eslint-plugin-prefer-arrow": "^1.2.1",
|
||||
"eslint-plugin-promise": "^4.2.1",
|
||||
"eslint-plugin-standard": "^4.0.1",
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-babel": "^8.0.0",
|
||||
"gulp-bytediff": "^1.0.0",
|
||||
"gulp-filter": "^5.1.0",
|
||||
"gulp-flatten": "^0.4.0",
|
||||
"gulp-postcss": "^8.0.0",
|
||||
"gulp-posthtml": "^3.0.4",
|
||||
"gulp-rename": "^1.4.0",
|
||||
"gulp-sizereport": "^1.2.1",
|
||||
"gulp-sourcemaps": "^2.6.5",
|
||||
"gulp-terser": "^1.2.0",
|
||||
"htmlnano": "^0.2.3",
|
||||
"husky": "^4.2.5",
|
||||
"pa11y": "^5.3.0",
|
||||
"postcss-color-mod-function": "^3.0.3",
|
||||
"postcss-css-variables": "^0.12.0",
|
||||
"postcss-import": "^12.0.1",
|
||||
"postcss-inline-svg": "^3.1.1",
|
||||
"standard": "^14.3.1",
|
||||
"stylelint": "^11.0.0",
|
||||
"stylelint-config-standard": "^19.0.0"
|
||||
"postcss-inline-svg": "^4.1.0",
|
||||
"puppeteer": "^3.2.0",
|
||||
"stylelint": "^13.5.0",
|
||||
"stylelint-config-standard": "^20.0.0"
|
||||
},
|
||||
"browserslist": {
|
||||
"legacy": [
|
||||
"defaults AND not android 4.4.3"
|
||||
"browserslist": [
|
||||
"defaults"
|
||||
],
|
||||
"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"
|
||||
"out/*.css",
|
||||
"LICENSE.md"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
BIN
screenshot.jpg
BIN
screenshot.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 108 KiB |
117
script.js
117
script.js
|
|
@ -1,117 +0,0 @@
|
|||
/* global matchMedia, faviconModeSwitcher */
|
||||
|
||||
(function () {
|
||||
const iconModeSwitcher = window.faviconModeSwitcher && faviconModeSwitcher.default
|
||||
if (!iconModeSwitcher) return
|
||||
iconModeSwitcher([
|
||||
{
|
||||
element: 'link[rel="shortcut icon"]',
|
||||
href: { dark: 'icons/light-favicon.ico' }
|
||||
},
|
||||
{
|
||||
element: 'link[rel="icon"][sizes="16x16"]',
|
||||
href: { dark: 'icons/light-favicon-16x16.png' }
|
||||
},
|
||||
{
|
||||
element: 'link[rel="icon"][sizes="32x32"]',
|
||||
href: { dark: 'icons/light-favicon-32x32.png' }
|
||||
}
|
||||
])
|
||||
})()
|
||||
|
||||
;(function (ThemeSwitcher) {
|
||||
const themeSwitcher = new ThemeSwitcher('stylesheet')
|
||||
const themeSwitchBtn = document.getElementById('switch')
|
||||
const themes = {
|
||||
dark: 'dark',
|
||||
darkStandalone: 'dark.standalone',
|
||||
light: 'light',
|
||||
lightStandalone: 'light.standalone'
|
||||
}
|
||||
const getSwitchThemeName = function () {
|
||||
// Case: switch to "light.standalone.css"
|
||||
if (
|
||||
((themeSwitcher.current === themes.dark) && themeSwitcher.isDark) ||
|
||||
((themeSwitcher.current === themes.light) && themeSwitcher.isDark) ||
|
||||
themeSwitcher.current === themes.darkStandalone
|
||||
) {
|
||||
return themes.lightStandalone
|
||||
|
||||
// Case: switch to "dark.standalone.css"
|
||||
} else if (
|
||||
((themeSwitcher.current === themes.dark) && themeSwitcher.isLight) ||
|
||||
((themeSwitcher.current === themes.light) && themeSwitcher.isLight) ||
|
||||
themeSwitcher.current === themes.lightStandalone
|
||||
) {
|
||||
return themes.darkStandalone
|
||||
|
||||
// Case: switch to "light.css"
|
||||
} else if (themeSwitcher.current === themes.dark) {
|
||||
return themes.light
|
||||
|
||||
// Case: switch to "dark.css"
|
||||
} else if (themeSwitcher.current === themes.light) {
|
||||
return themes.dark
|
||||
|
||||
// Case: switch destination is unknown
|
||||
} else {
|
||||
return themeSwitcher.current
|
||||
}
|
||||
}
|
||||
const getGeneralThemeName = function () {
|
||||
return themeSwitcher.current.replace(/\.standalone/g, '')
|
||||
}
|
||||
|
||||
themeSwitchBtn.addEventListener('click', function () {
|
||||
themeSwitcher.switch(getSwitchThemeName())
|
||||
})
|
||||
|
||||
themeSwitcher.onChangeDark = function () {
|
||||
themeSwitcher.switch(getGeneralThemeName())
|
||||
}
|
||||
|
||||
themeSwitcher.onChangeLight = function () {
|
||||
themeSwitcher.switch(getGeneralThemeName())
|
||||
}
|
||||
})(
|
||||
(function () {
|
||||
const ThemeSwitcher = function (stylesheet) {
|
||||
const darkSchemeMql = matchMedia('(prefers-color-scheme: dark)')
|
||||
const lightSchemeMql = matchMedia('(prefers-color-scheme: light)')
|
||||
const that = this
|
||||
|
||||
this.themeDir = 'dist/'
|
||||
this.stylesheet = document.getElementById(stylesheet)
|
||||
this.current = this.getThemeName(this.stylesheet.href)
|
||||
this.isDark = darkSchemeMql.matches
|
||||
this.isLight = lightSchemeMql.matches
|
||||
|
||||
darkSchemeMql.addListener(function (mql) {
|
||||
if (mql.matches && typeof that.onChangeDark === 'function') {
|
||||
that.onChangeDark()
|
||||
}
|
||||
})
|
||||
|
||||
lightSchemeMql.addListener(function (mql) {
|
||||
if (mql.matches && typeof that.onChangeLight === 'function') {
|
||||
that.onChangeLight()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
ThemeSwitcher.prototype = {
|
||||
switch: function (themeName) {
|
||||
this.stylesheet.href = this.themeDir + themeName + '.css'
|
||||
this.current = themeName
|
||||
},
|
||||
getThemeName: function () {
|
||||
const reg = new RegExp(this.themeDir + '(|.+?).css')
|
||||
return this.stylesheet.getAttribute('href').replace(reg, '$1')
|
||||
},
|
||||
onChangeDark: null,
|
||||
onChangeLight: null
|
||||
}
|
||||
|
||||
return ThemeSwitcher
|
||||
})()
|
||||
)
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
/**
|
||||
* Dark-themed version for legacy browsers:
|
||||
* Loads the compiled, standalone version of the dark theme,
|
||||
* but overrides it with the compiled, standalone version of the light theme
|
||||
* if a system-wide theme preference is set on the user's device.
|
||||
*/
|
||||
|
||||
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css');
|
||||
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css')
|
||||
(prefers-color-scheme: light);
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
/**
|
||||
* Standalone dark-themed version for legacy browsers.
|
||||
* Includes dark variables and core, compiled at build time so the final output
|
||||
* will only include regular CSS, no variables.
|
||||
*/
|
||||
|
||||
@import '../variables-dark.css';
|
||||
@import '../parts/_core.css';
|
||||
9
src/builds/dark.css
Normal file → Executable file
9
src/builds/dark.css
Normal file → Executable file
|
|
@ -1,13 +1,6 @@
|
|||
/**
|
||||
* 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.
|
||||
* Forced dark theme version
|
||||
*/
|
||||
|
||||
@import '../variables-dark.css';
|
||||
@import '../variables-light.css' (prefers-color-scheme: light);
|
||||
|
||||
@import '../parts/_core.css';
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
/**
|
||||
* Standalone dark-themed version.
|
||||
* Includes dark variables and core, left as CSS variables
|
||||
* so the theming can be adjusted at runtime.
|
||||
*/
|
||||
|
||||
@import '../variables-dark.css';
|
||||
@import '../parts/_core.css';
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
/**
|
||||
* Light-themed version for legacy browsers:
|
||||
* Loads the compiled, standalone version of the light theme at runtime,
|
||||
* but overrides it with the compiled, standalone version of the dark theme
|
||||
* if a system-wide theme preference is set on the user's device.
|
||||
*/
|
||||
|
||||
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css');
|
||||
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css')
|
||||
(prefers-color-scheme: dark);
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
/**
|
||||
* Standalone light-themed version for legacy browsers.
|
||||
* Includes light variables and core, compiled at build time so the final output
|
||||
* will only include regular CSS, no variables.
|
||||
*/
|
||||
|
||||
@import '../variables-light.css';
|
||||
@import '../parts/_core.css';
|
||||
10
src/builds/light.css
Normal file → Executable file
10
src/builds/light.css
Normal file → Executable file
|
|
@ -1,14 +1,6 @@
|
|||
/**
|
||||
* 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.
|
||||
* Forced light theme version
|
||||
*/
|
||||
|
||||
@import '../variables-light.css';
|
||||
@import '../variables-dark.css' (prefers-color-scheme: dark);
|
||||
|
||||
|
||||
@import '../parts/_core.css';
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
/**
|
||||
* Standalone light-themed version.
|
||||
* Includes light variables and core, left as CSS variables
|
||||
* so the theming can be adjusted at runtime.
|
||||
*/
|
||||
|
||||
@import '../variables-light.css';
|
||||
@import '../parts/_core.css';
|
||||
9
src/builds/water.css
Normal file
9
src/builds/water.css
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
/**
|
||||
* Automatic version:
|
||||
* Uses light theme by default but switches to dark theme
|
||||
* if a system-wide theme preference is set on the user's device.
|
||||
*/
|
||||
|
||||
@import '../variables-light.css';
|
||||
@import '../variables-dark.css' (prefers-color-scheme: dark);
|
||||
@import '../parts/_core.css';
|
||||
|
|
@ -1,20 +1,25 @@
|
|||
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;
|
||||
html {
|
||||
scrollbar-color: var(--scrollbar-thumb) var(--background-body);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
|
||||
line-height: 1.4;
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 0 10px;
|
||||
word-wrap: break-word;
|
||||
|
||||
color: var(--text-main);
|
||||
background: var(--background-body);
|
||||
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
button, input, textarea {
|
||||
transition: background-color var(--animation-duration) linear,
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
code, samp, time {
|
||||
code,
|
||||
samp,
|
||||
time {
|
||||
background: var(--background);
|
||||
color: var(--code);
|
||||
padding: 2.5px 5px;
|
||||
|
|
|
|||
|
|
@ -5,3 +5,4 @@
|
|||
@import '_links.css';
|
||||
@import '_code.css';
|
||||
@import '_misc.css';
|
||||
@import '_print.css';
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
button, select,
|
||||
button,
|
||||
select,
|
||||
input[type='submit'],
|
||||
input[type='button'],
|
||||
input[type='checkbox'],
|
||||
|
|
@ -18,20 +19,38 @@ 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,
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
input {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
label {
|
||||
vertical-align: middle;
|
||||
margin-bottom: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input:not([type='checkbox']):not([type='radio']),
|
||||
input[type='range'],
|
||||
select,
|
||||
button,
|
||||
textarea {
|
||||
|
|
@ -39,12 +58,21 @@ textarea {
|
|||
}
|
||||
|
||||
textarea {
|
||||
display: block;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
textarea:not([cols]) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
textarea:not([rows]) {
|
||||
min-height: 40px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
select {
|
||||
background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;
|
||||
padding-right: 35px;
|
||||
|
|
@ -80,41 +108,6 @@ 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,
|
||||
|
|
@ -140,7 +133,7 @@ fieldset {
|
|||
border: 1px var(--focus) solid;
|
||||
border-radius: 6px;
|
||||
margin: 0;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 12px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
img {
|
||||
img,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
|
@ -12,12 +13,19 @@ table {
|
|||
border-collapse: collapse;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
table caption {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 6px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
thead {
|
||||
|
|
@ -53,6 +61,7 @@ tbody tr:nth-child(even) {
|
|||
|
||||
::selection {
|
||||
background-color: var(--selection);
|
||||
color: var(--text-bright);
|
||||
}
|
||||
|
||||
details {
|
||||
|
|
@ -83,6 +92,13 @@ summary {
|
|||
background-color: var(--background);
|
||||
padding: 10px;
|
||||
margin: -10px -10px 0;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
summary:hover,
|
||||
summary:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
details > :not(summary) {
|
||||
|
|
@ -94,8 +110,11 @@ summary::-webkit-details-marker {
|
|||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid var(--background);
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: 10px;
|
||||
font-size: 0.8em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
body > footer {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
|
|
|||
53
src/parts/_print.css
Normal file
53
src/parts/_print.css
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
@media print {
|
||||
body,
|
||||
pre,
|
||||
code,
|
||||
summary,
|
||||
details,
|
||||
button,
|
||||
input,
|
||||
textarea {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
pre,
|
||||
code,
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
footer,
|
||||
summary,
|
||||
strong {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
summary::marker {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
summary::-webkit-details-marker {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #00f;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -17,7 +17,7 @@ input[type='range']::-webkit-slider-runnable-track {
|
|||
}
|
||||
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
|
|
@ -39,7 +39,7 @@ input[type='range']::-moz-range-track {
|
|||
}
|
||||
|
||||
input[type='range']::-moz-range-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
|
|
@ -59,19 +59,19 @@ 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;
|
||||
box-shadow: 1px 1px 1px #000, 0 0 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;
|
||||
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type='range']::-ms-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
border: 1px solid #000000;
|
||||
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
||||
border: 1px solid #000;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ h4,
|
|||
h5,
|
||||
h6 {
|
||||
margin-bottom: 12px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
h1,
|
||||
|
|
@ -42,9 +43,10 @@ q::after {
|
|||
content: none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
blockquote,
|
||||
q {
|
||||
border-left: 4px solid var(--focus);
|
||||
margin: 1.5em 0em;
|
||||
margin: 1.5em 0;
|
||||
padding: 0.5em 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -77,6 +79,6 @@ a[href^='sms\:']::before {
|
|||
mark {
|
||||
background-color: var(--highlight);
|
||||
border-radius: 2px;
|
||||
padding: 0px 2px 0px 2px;
|
||||
color: #000000;
|
||||
padding: 0 2px 0 2px;
|
||||
color: #000;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
--background-body: #202b38;
|
||||
--background: #161f27;
|
||||
--background-alt: #1a242f;
|
||||
--selection: #161f27;
|
||||
--selection: #1c76c5;
|
||||
--text-main: #dbdbdb;
|
||||
--text-bright: #fff;
|
||||
--text-muted: #717880;
|
||||
--text-muted: #a9b1ba;
|
||||
--links: #41adff;
|
||||
--focus: #0096bfab;
|
||||
--border: #dbdbdb;
|
||||
--border: #526980;
|
||||
--code: #ffbe85;
|
||||
--animation-duration: 0.1s;
|
||||
--button-hover: #324759;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
--selection: #9e9e9e;
|
||||
--text-main: #363636;
|
||||
--text-bright: #000;
|
||||
--text-muted: #999;
|
||||
--text-muted: #70777f;
|
||||
--links: #0076d1;
|
||||
--focus: #0096bfab;
|
||||
--border: #dbdbdb;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue