mirror_css/css-water.css
1
0
Fork 0
mirror of https://github.com/kognise/water.css.git synced 2025-08-09 22:57:00 +02:00
Code Issues Releases Wiki Activity

Merge pull request #9 from kylejrp/master

Browse Source 
Add Sass build tools and theming
This commit is contained in:
Kognise
2019-04-06 18:58:22 -04:00
committed by GitHub
parent 703abfcf55 50ee6a0349
commit 12f8b799f2
19 changed files with 3173 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
.gitignore vendored Normal file
View File

@@ -0,0 +1,84 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
.env.test
# parcel-bundler cache (https://parceljs.org/)
.cache
# next.js build output
.next
# nuxt.js build output
.nuxt
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/

96
README.md
View File

@@ -8,6 +8,15 @@
[![On product hunt](https://img.shields.io/badge/on-product%20hunt-red.svg)](https://www.producthunt.com/posts/water-css)
[![MIT license](https://img.shields.io/github/license/kognise/water.css.svg)](https://github.com/kognise/water.css/blob/master/LICENSE.md)
## Goals
- Responsive
- Good code quality
- Good browser support (works on my old kindle's browser :P)
- Small size (< 2kb)
- Beautiful
- No classes
## Why?
I commonly make quick demo pages or websites with simple content. For these, I don't want to spend time styling them but don't like the uglyness of the default styles.
@@ -25,36 +34,93 @@ You probably don't want to use it for a production app or something that has mor
Just stick this in your head:
```html
<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/kognise/water.css@latest/water.min.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.css'>
```
No other classes or code is required to make Water.css work. If you want a specific version, you can replace `@latest` with `@version`. See [all versions](https://github.com/kognise/water.css/releases).
Well, there's a dark theme and a light theme. If you want the light theme, use `light.css` instead of `dark.css`. See [Theming](#theming) to make your own theme!
Well, I may have lied a *little* bit when I said Water.css makes use of no classes: if you're a light theme guy (shame on you!) just add the class `.light` to your `<body>` and everything will burn your eyes.
No other classes or code is required to make Water.css work. If you want a specific version, you can replace `@latest` with `@version`. See [all the versions](https://github.com/kognise/water.css/releases).
Oh, you want a demo you say? Cheeky fellah!
[Well, here's your demo.](https://kognise.github.io/water.css/) And here's a screenshot of the dark theme to top it off:
![Screenshot](screenshot.jpg)
[Well, here's your demo.](https://kognise.github.io/water.css/)
Don't like how it looks? Feel free to submit an issue or PR with suggestions.
## Contributing
Water.css can be greatly improved if people in the community help make it better!
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.
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 cotnribute, after downloading a copy of the repository make sure to run `yarn` to install dependencies useful for development. Then, you can just run the following to start a server of the demo with live reloading and automatic Sass compiling.
```
$ yarn dev
```
And make sure to run `yarn build` before pushing any changes! Thanks for taking the time to contribute :)
## Theming
Do you want to make your own theme different from the light or dark themes? Since Water.css is built with Sass this is super easy to do. There are two methods. Also, here's a list of variables to set:
- `$background`
- `$background-alt`
- `$text-main`
- `$text-bright`
- `$links`
- `$focus`
- `$border`
- `$code`
- `$button-hover`
- `$animation-duration`
- `$form-placeholder`
- `$form-text`
### Based on an existing theme
You can base your theme off of the existing light or dark themes, which already have some variables predefined to make it easier for you.
Here's some simple Sass that'll just use the dark theme but color all links red. Of course, you can change any variables you want.
```scss
$links: #ff0000;
@import 'dark.scss';
```
### From scratch
You can also make your theme from scratch. This is less recommended, but feel free to! You just have to define all of the variables.
For example, here's an example of a really ugly theme, made from scratch. **Ouch!**
```scss
$background: #ff48c2 !default;
$background-alt: #00ff00 !default;
$text-main: #dbdbdb !default;
$text-bright: #ffffff !default;
$links: #ff0022 !default;
$focus: #ffc400 !default;
$border: #00ffff !default;
$code: #001aff !default;
$button-hover: #324759 !default;
$animation-duration: 0.1s !default;
$form-placeholder: #a9a9a9 !default;
$form-text: #ffffff !default;
@import 'parts/core';
```
You can also only import parts you want, but this is not recommended. See the `src/parts/` folder for a list of parts.
## Todos
- Animate more things
- Reduce size
- [Tables](https://github.com/kognise/water.css/issues/5)
- Blockquotes
- Update screenshots
- Add a screenshot
- Jekyll theme
- [Code/kbd/blocks](https://github.com/kognise/water.css/issues/1)
- [Code splitting](https://github.com/kognise/water.css/issues/6)
Feel free to help! :P

75
dev.js Normal file
View File

@@ -0,0 +1,75 @@
const express = require('express')
const app = express()
const http = require('http').Server(app)
const io = require('socket.io')(http)
const fs = require('fs-extra')
const chokidar = require('chokidar')
const sass = require('node-sass')
const script = `
const socket = io()
socket.on('reload', () => location.reload())
`
app.get('/', async (req, res) => {
console.log('> Serving index')
const html = await fs.readFile('index.html')
const injected = html.toString().replace('</body>', `<script src='/socket.io/socket.io.js'></script><script>${script}</script></body>`)
res.send(injected)
})
app.get('/script.js', async (req, res) => {
console.log('> Serving script')
const script = await fs.readFile('script.js')
res.contentType('javascript')
res.send(script)
})
app.use('/dist', (req, res, next) => {
console.log('> Serving a stylesheet')
next()
}, express.static('dist'))
function reload() {
console.log('> Reloading')
io.emit('reload')
}
chokidar.watch('index.html', { ignoreInitial: true }).on('all', () => {
console.log('> Index changed')
reload()
})
chokidar.watch('script.js', { ignoreInitial: true }).on('all', () => {
console.log('> Script changed')
reload()
})
function buildSass(file) {
sass.render({ file, outputStyle: 'compressed' }, async (errors, result) => {
if (errors) {
console.log('> Sass errors!')
console.log(errors)
return
}
const outFile = file.replace('src', 'dist').replace('.scss', '.css')
await fs.outputFile(outFile, result.css)
reload()
})
}
chokidar.watch('src/*.scss', { ignoreInitial: true }).on('all', (event, file) => {
console.log('> Stylesheet changed')
buildSass(file)
})
chokidar.watch('src/parts/*.scss', { ignoreInitial: true }).on('all', async () => {
console.log('> Stylesheet part changed')
const src = await fs.readdir('src')
const files = src.filter(file => file !== 'parts').map(file => `src/${file}`)
for (let file of files) {
buildSass(file)
}
})
http.listen(3000, () => console.log('> Ready at http://localhost:3000/'))

1
dist/dark.css vendored Normal file
View File

@@ -0,0 +1 @@
body{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#dbdbdb;background:#202b38;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#fff}h1,h2,h3,h4,h5,h6,b,strong,th{font-weight:600}button,input[type='submit'],input[type='button'],input[type='checkbox']{cursor:pointer}input:not([type='checkbox']),select{display:block}input,select,button,textarea{color:#fff;background-color:#161f27;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}input:not([type='checkbox']),select,button,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type='submit'],input[type='button']{padding-right:30px;padding-left:30px}button:hover,input[type='submit']:hover,input[type='button']:hover{background:#324759}input:focus,select:focus,button:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,0.670588)}input[type='checkbox']:active,input[type='submit']:active,input[type='button']:active,button:active{transform:translateY(2px)}input:disabled{cursor:not-allowed;opacity:.5}::placeholder{color:#a9a9a9}a{text-decoration:none;color:#41adff}a:hover{text-decoration:underline}code,kbd{background:#161f27;color:#ffbe85;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}

1
dist/light.css vendored Normal file
View File

@@ -0,0 +1 @@
body{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#363636;background:#fff;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#000}h1,h2,h3,h4,h5,h6,b,strong,th{font-weight:600}button,input[type='submit'],input[type='button'],input[type='checkbox']{cursor:pointer}input:not([type='checkbox']),select{display:block}input,select,button,textarea{color:#000;background-color:#efefef;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}input:not([type='checkbox']),select,button,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type='submit'],input[type='button']{padding-right:30px;padding-left:30px}button:hover,input[type='submit']:hover,input[type='button']:hover{background:#ddd}input:focus,select:focus,button:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,0.670588)}input[type='checkbox']:active,input[type='submit']:active,input[type='button']:active,button:active{transform:translateY(2px)}input:disabled{cursor:not-allowed;opacity:.5}::placeholder{color:#949494}a{text-decoration:none;color:#0076d1}a:hover{text-decoration:underline}code,kbd{background:#efefef;color:#000;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}

73
index.html
View File

@@ -2,7 +2,7 @@
<html lang='en'>
<head>
<title>Water.css</title>
<link rel='stylesheet' href='water.css'>
<link id='stylesheet' rel='stylesheet' href='dist/dark.css'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-116663597-6'></script>
@@ -24,6 +24,16 @@
</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/featured.svg?post_id=150490&theme=dark' alt='Water.css - Make your tiny website just a little nicer | Product Hunt Embed' style='width: 250px; height: 54px;' width='250px' height='54px' /></a>
<h2>Goals</h2>
<ul>
<li>Responsive</li>
<li>Good code quality</li>
<li>Good browser support</li>
<li>Small size (&lt; 2kb)</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.
@@ -34,35 +44,64 @@
</p>
<button id='switch'>Switch theme</button>
<h2>More elements</h2>
<h2>Element demos</h2>
<p>
This is supposed to be a demo page so we need more elements!
</p>
<img src='http://placekitten.com/408/287' alt='Example kitten'>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p>
Below I'm gonna put an <code>&lt;hr&gt;</code>, because why not?
</p>
<hr>
<textarea>Hello from a textarea!</textarea>
<h3>Form elements</h3>
<form>
<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='&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;'>
<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>
<input type='checkbox' name='remember' id='remember' checked>
<label for='remember'>Remember me</label>
<input type='submit'>
</form>
<input disabled placeholder='This is disabled'>
<input readonly value='This is readonly'>
<h3>Code</h3>
<p>
Below is some code, you can copy it with <kbd>Ctrl-C</kbd>.
Did you know, <code>alert(1)</code> can show an alert in JavaScript!
</p>
<pre><code>// This logs a message to the console<br>console.log('Hello, world!')</code></pre>
<h3>Other</h3>
<p>Here's a horizontal rule and image because I don't know where else to put them.</p>
<img src='http://placekitten.com/408/287' alt='Example kitten'>
<hr>
<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>
<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>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<script src='script.js'></script>
</body>

33
package.json Normal file
View File

@@ -0,0 +1,33 @@
{
"name": "water.css",
"version": "1.0.0",
"description": "A just-add-css collection of styles to make simple websites just a little nicer.",
"main": "index.js",
"scripts": {
"build": "node-sass src/ --output dist/ --output-style compressed",
"dev": "node dev.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/kognise/water.css.git"
},
"keywords": [
"css",
"css-framework",
"simple",
"minimal"
],
"author": "Kognise",
"license": "MIT",
"bugs": {
"url": "https://github.com/kognise/water.css/issues"
},
"homepage": "https://github.com/kognise/water.css",
"devDependencies": {
"express": "^4.16.4",
"fs-extra": "^7.0.1",
"node-sass": "^4.11.0",
"socket.io": "^2.2.0",
"chokidar": "^2.1.5"
}
}

12
script.js
View File

@@ -1,11 +1,11 @@
document.getElementById('switch').addEventListener('click', () => {
const { body } = document
const stylesheet = document.getElementById('stylesheet')
const ph = document.getElementById('ph')
if (body.classList.contains('light')) {
body.classList.remove('light')
ph.src = ph.src.replace('theme=light', 'theme=dark')
} else {
body.classList.add('light')
if (stylesheet.getAttribute('href') === 'dist/dark.css') {
stylesheet.setAttribute('href', 'dist/light.css')
ph.src = ph.src.replace('theme=dark', 'theme=light')
} else {
stylesheet.setAttribute('href', 'dist/dark.css')
ph.src = ph.src.replace('theme=light', 'theme=dark')
}
})

18
src/dark.scss Normal file
View File

@@ -0,0 +1,18 @@
$background: #202b38 !default;
$background-alt: #161f27 !default;
$text-main: #dbdbdb !default;
$text-bright: #ffffff !default;
$links: #41adff !default;
$focus: #0096bfab !default;
$border: #dbdbdb !default;
$code: #ffbe85 !default;
$button-hover: #324759 !default;
$animation-duration: 0.1s !default;
$form-placeholder: #a9a9a9 !default;
$form-text: #ffffff !default;
@import 'parts/core';

18
src/light.scss Normal file
View File

@@ -0,0 +1,18 @@
$background: #ffffff !default;
$background-alt: #efefef !default;
$text-main: #363636 !default;
$text-bright: #000000 !default;
$links: #0076d1 !default;
$focus: #0096bfab !default;
$border: #dbdbdb !default;
$code: #000000 !default;
$button-hover: #dddddd !default;
$animation-duration: 0.1s !default;
$form-placeholder: #949494 !default;
$form-text: #000000 !default;
@import 'parts/core';

21
src/parts/_base.scss Normal file
View File

@@ -0,0 +1,21 @@
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
line-height: 1.4;
max-width: 800px;
margin: 20px auto;
padding: 0 10px;
color: $text-main;
background: $background;
text-rendering: optimizeLegibility;
}
button, input, textarea {
transition: background-color $animation-duration linear,
border-color $animation-duration linear,
color $animation-duration linear,
box-shadow $animation-duration linear,
transform $animation-duration ease;
}

12
src/parts/_code.scss Normal file
View File

@@ -0,0 +1,12 @@
code, kbd {
background: $background-alt;
color: $code;
padding: 5px;
border-radius: 6px;
}
pre > code {
padding: 10px;
display: block;
overflow-x: auto;
}

6
src/parts/_core.scss Normal file
View File

@@ -0,0 +1,6 @@
@import 'base';
@import 'typography';
@import 'forms';
@import 'links';
@import 'code';
@import 'misc';

71
src/parts/_forms.scss Normal file
View File

@@ -0,0 +1,71 @@
button,
input[type='submit'],
input[type='button'],
input[type='checkbox'] {
cursor: pointer;
}
input:not([type='checkbox']), select {
display: block;
}
input, select, button, textarea {
color: $form-text;
background-color: $background-alt;
font-family: inherit;
font-size: inherit;
margin-right: 6px;
margin-bottom: 6px;
padding: 10px;
border: none;
border-radius: 6px;
outline: none;
}
input:not([type='checkbox']), select, button, textarea {
-webkit-appearance: none;
}
textarea {
margin-right: 0;
width: 100%;
box-sizing: border-box;
resize: vertical;
}
button, input[type='submit'], input[type='button'] {
padding-right: 30px;
padding-left: 30px;
}
button:hover,
input[type='submit']:hover,
input[type='button']:hover {
background: $button-hover;
}
input:focus,
select:focus,
button:focus,
textarea:focus {
box-shadow: 0 0 0 2px $focus;
}
input[type='checkbox']:active,
input[type='submit']:active,
input[type='button']:active,
button:active {
transform: translateY(2px);
}
input:disabled {
cursor: not-allowed;
opacity: .5;
}
::placeholder {
color: $form-placeholder;
}

8
src/parts/_links.scss Normal file
View File

@@ -0,0 +1,8 @@
a {
text-decoration: none;
color: $links;
}
a:hover {
text-decoration: underline;
}

8
src/parts/_misc.scss Normal file
View File

@@ -0,0 +1,8 @@
img {
max-width: 100%;
}
hr {
border: none;
border-top: 1px solid $border;
}

16
src/parts/_typography.scss Normal file
View File

@@ -0,0 +1,16 @@
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: $text-bright;
}
h1, h2, h3, h4, h5, h6, b, strong, th {
font-weight: 600;
}

160
water.css
View File

@@ -1,160 +0,0 @@
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
line-height: 1.4;
max-width: 800px;
margin: 20px auto;
padding: 0 10px;
color: #dbdbdb;
background: #202b38;
text-rendering: optimizeLegibility;
}
button,
input[type='submit'],
input[type='button'],
input[type='checkbox'] {
cursor: pointer;
}
img {
max-width: 100%;
}
a, button, input, textarea {
transition: background-color .1s linear,
border-color .1s linear,
color .1s linear,
box-shadow .1s linear,
transform .1s linear;
}
a {
text-decoration: none;
color: #41adff;
}
a:hover {
text-decoration: underline;
}
hr {
border: none;
border-top: 1px solid #dbdbdb;
}
h1 {
font-size: 2.2em;
margin-top: 0;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 12px;
}
h1, h2, h3, h4, h5, h6, b, strong, th {
font-weight: 600;
}
h1, h2, h3, h4, h5, h6 {
color: #ffffff;
}
input:not([type='checkbox']), select {
display: block;
}
input, select, button, textarea {
font-family: inherit;
font-size: inherit;
margin-right: 6px;
margin-bottom: 6px;
padding: 10px;
color: #ffffff;
border: none;
border-radius: 6px;
outline: none;
background: #161f27;
}
input:not([type='checkbox']), select, button, textarea {
-webkit-appearance: none;
}
textarea {
margin-right: 0;
width: 100%;
box-sizing: border-box;
resize: vertical;
}
button, input[type='submit'], input[type='button'] {
padding-right: 30px;
padding-left: 30px;
}
button:hover,
input[type='submit']:hover,
input[type='button']:hover {
background: #324759;
}
input:focus,
select:focus,
button:focus,
textarea:focus {
box-shadow: 0 0 0 2px #0096bfab;
}
input[type='checkbox']:active,
input[type='submit']:active,
input[type='button']:active,
button:active {
transform: translateY(2px);
}
input:disabled {
cursor: not-allowed;
opacity: .5;
}
body.light {
color: #363636;
background: #ffffff;
}
body.light a {
color: #0076d1;
}
body.light h1,
body.light h2,
body.light h3,
body.light h4,
body.light h5,
body.light h6,
body.light strong {
color: #000000;
}
body.light input,
body.light select,
body.light button,
body.light textarea {
color: #000000;
background: #efefef;
}
body.light button:hover,
body.light input[type='submit']:hover,
body.light input[type='button']:hover {
background: #dddddd;
}
::placeholder {
color: #949494;
}

2657
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff