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

Add light theme

Browse Source
This commit is contained in:
Kognise
2019-04-04 19:30:11 -04:00
parent ada0f71317
commit 9347239cdf
2 changed files with 26 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -28,12 +28,16 @@ Just stick this in your head:
No other classes or code is required to make Water.css work.
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.
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 to top it off:
![Screenshot](screenshot.jpg)
Don't forget there's a light theme as well.
Don't like how it looks? Feel free to submit an issue or PR with suggestions.
## Contributing

27
water.css
View File

@@ -28,7 +28,6 @@ h1 {
}
h1, h2, h3, h4, h5, h6 {
color: #ffffff;
margin-bottom: 12px;
}
@@ -36,6 +35,10 @@ 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;
}
@@ -57,10 +60,24 @@ input:focus, select:focus, button:focus, textarea:focus {
box-shadow: 0 0 0 2px #0096bfab;
}
::placeholder {
color: #949494;
}
input[type='checkbox']:active, input[type='submit']:active, input[type='button']:active, button:active {
transform: translateY(2px);
}
body.light {
background: #ffffff;
color: #363636;
}
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 {
background: #efefef;
color: #000000;
}
::placeholder {
color: #949494;
}