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. 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! 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: [Well, here's your demo.](https://kognise.github.io/water.css/) And here's a screenshot to top it off:
![Screenshot](screenshot.jpg) ![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. Don't like how it looks? Feel free to submit an issue or PR with suggestions.
## Contributing ## Contributing

27
water.css
View File

@@ -28,7 +28,6 @@ h1 {
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: #ffffff;
margin-bottom: 12px; margin-bottom: 12px;
} }
@@ -36,6 +35,10 @@ h1, h2, h3, h4, h5, h6, b, strong, th {
font-weight: 600; font-weight: 600;
} }
h1, h2, h3, h4, h5, h6 {
color: #ffffff;
}
input:not([type='checkbox']), select { input:not([type='checkbox']), select {
display: block; display: block;
} }
@@ -57,10 +60,24 @@ input:focus, select:focus, button:focus, textarea:focus {
box-shadow: 0 0 0 2px #0096bfab; box-shadow: 0 0 0 2px #0096bfab;
} }
::placeholder {
color: #949494;
}
input[type='checkbox']:active, input[type='submit']:active, input[type='button']:active, button:active { input[type='checkbox']:active, input[type='submit']:active, input[type='button']:active, button:active {
transform: translateY(2px); 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;
} }