From b9132e895045983d0ac481aaa481188c494aee22 Mon Sep 17 00:00:00 2001 From: Andros Fenollosa Date: Tue, 13 Jun 2023 12:54:15 +0200 Subject: [PATCH] Create light.css --- themes/light.css | 139 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 themes/light.css diff --git a/themes/light.css b/themes/light.css new file mode 100644 index 0000000..48d6665 --- /dev/null +++ b/themes/light.css @@ -0,0 +1,139 @@ +@import url("https://fonts.googleapis.com/css2?family=Lora:wght@500&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Inconsolata&display=swap"); + +body { + margin: 40px auto; + width: 610px; + max-width: 100%; + line-height: 1.6; + font-size: 16px; + background: #fffff4; + color: #3a1616; + padding: 0 10px; + font-size: 18px; + line-height: 28px; + font-family: "Lora"; + font-weight: 500; + box-sizing: border-box; + /* Smooth the font a little bit, it's a + bit too bold on retina screens */ + -webkit-font-smoothing: antialiased; + +} + +/* --------------------------------------------------- */ +/* Make a nice input form with rounded corners and hover + animations*/ +/* --------------------------------------------------- */ +input { + padding: 10px 16px; + margin: 2px 0; + box-sizing: border-box; + border: 2px solid #dabebe; + border-radius: 6px; + background: #fffff4; + color: #3a1616; + font-size: 16px; + -webkit-transition: 0.5s; + transition: 0.5s; + outline: none; +} +input:focus { + border: 2px solid #3a1616; +} + +/* --------------------------------------- */ +/* The button is very similar to the input */ +/* --------------------------------------- */ +.button { + background-color: #fffff4; + border: none; + color: black; + padding: 6px 14px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + transition-duration: 0.4s; + cursor: pointer; + border: 2px solid #3a1616; + border-radius: 6px; +} +.button:hover { + background-color: #3a1616; + color: white; +} + +/* ----------------------------------------------- */ +/* Various classes for messages of different kinds */ +/* ----------------------------------------------- */ +.isa_info, +.isa_success, +.isa_warning, +.isa_error { + width: 90%; + margin: 10px 0px; + padding: 12px; +} +.isa_info { + color: #00529b; + background-color: #bde5f8; +} +.isa_success { + color: #4f8a10; + background-color: #dff2bf; +} +.isa_warning { + color: #9f6000; + background-color: #feefb3; +} +.isa_error { + color: #d8000c; + background-color: #ffd2d2; +} + +h1, +h2, +h3 { + line-height: 1.2; + font-family: "Lora"; +} + +img { + width: 500px; + max-width: 100%; + border-radius: 10px; + text-align: center; +} + +/* --------------------------------------------- */ +/* Bold hover animations on links and clickables */ +/* --------------------------------------------- */ +a { + cursor: pointer; + color: #217ab7; + line-height: inherit; + transition: .14s; +} +a:hover { + color: white; + background-color: #3297d3; +} +a:visited { + color: #43458b; + border-color: #43458b; +} +a:visited:hover { + color: white; + background-color: #9251ac; +} + +pre { + font-family: "Inconsolata", monospace; +} + +::selection { + color: white; + background: #ff4081; +}