diff --git a/README.md b/README.md index 5fe1737..278f03c 100644 --- a/README.md +++ b/README.md @@ -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 `` 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 diff --git a/water.css b/water.css index b6c4000..ba15381 100644 --- a/water.css +++ b/water.css @@ -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; } \ No newline at end of file