diff options
Diffstat (limited to 'CSS')
| -rw-r--r-- | CSS/button.css | 65 | ||||
| -rw-r--r-- | CSS/default.css | 84 | ||||
| -rw-r--r-- | CSS/dropdown.css | 12 | ||||
| -rw-r--r-- | CSS/inputfield.css | 57 | ||||
| -rw-r--r-- | CSS/quote-code.css | 35 |
5 files changed, 253 insertions, 0 deletions
diff --git a/CSS/button.css b/CSS/button.css new file mode 100644 index 0000000..b0833f6 --- /dev/null +++ b/CSS/button.css @@ -0,0 +1,65 @@ +/* Button style */ + +/* Default button */ +a.button, button.button +{ + padding: 0.1rem 1rem; + margin: 0rem 0.3rem; + + border: none; + cursor: pointer; + + text-align: center; + text-decoration: none; + text-transform: uppercase; + font-weight: bold; + + background-color: var(--link-bg-color); + color: var(--link-color); + border: 1px solid var(--link-bg-color); +} + +a.button:hover, button.button:hover +{ + color: var(--link-bg-color); + background-color: var(--link-color); +} + +/* Reversed button */ +a.button-reversed, button.button-reversed +{ + padding: 0.1rem 1rem; + margin: 0rem 0.3rem; + + border: none; + cursor: pointer; + + text-align: center; + text-decoration: none; + text-transform: uppercase; + font-weight: bold; + + background-color: var(--link-color); + color: var(--link-bg-color); + border: 1px solid var(--link-color); +} + +a.button-reversed:hover, button.button-reversed:hover +{ + color: var(--link-color); + background-color: var(--link-bg-color); +} + +/* Button disabled */ +button:disabled, button[disabled] +{ + opacity: 0.6; + cursor: not-allowed; +} + +/* Link */ +a.link +{ + color: var(--link-bg-color); + text-decoration: underline; +} diff --git a/CSS/default.css b/CSS/default.css new file mode 100644 index 0000000..3253f7c --- /dev/null +++ b/CSS/default.css @@ -0,0 +1,84 @@ +/* Default css, here is defined all colors, night / light mode colors + +/* Root */ +:root +{ + + /* Dark mode */ + --dark-bg: #191919; + --dark-text: #BBBBBB; + --dark-link: #191919; + --dark-link-bg: #f08080; + --dark-title: #f08080; + --dark-quote-border: #fbc4ab; /* Quotebar color */ + --dark-quote-bg: #3D3D3D; + + /* Light mode */ + --light-bg: #ffdab9; + --light-text: #191919; + --light-link: #191919; + --light-link-bg: #DE6E7C; + --light-title: #DE6E7C; + --light-quote-border: #6a040f; /* Quotebar color */ + --light-quote-bg: #F9AD8A; + + /* Default (will automatically be crushed by light/dark mode detection )*/ + --bg-color: var(--dark-bg); + --text-color: var(--dark-text); + --link-color: var(--dark-link); + --link-bg-color: var(--dark-link-bg); + --title-color: var(--dark-title); + --quote-border: var(--dark-quote-border); + --quote-bg: var(--dark-quote-bg); +} + +/* Body */ +body +{ + /* Reponsive font size */ + font-size: calc(10px + 0.390625vw); + font-family: 'Courier New', monospace; + font-weight: normal; + + background-color: var(--bg-color); + color: var(--text-color); + + margin: 2vh auto; + max-width: 80vw; +} + +h1, h2, h3, h4, h5, h6 +{ + color: var(--title-color); +} + +/* Night mode */ +@media (prefers-color-scheme: dark) +{ + :root + { + --bg-color: var(--dark-bg); + --text-color: var(--dark-text); + --link-color: var(--dark-link); + --link-bg-color: var(--dark-link-bg); + --title-color: var(--dark-title); + --quote-border: var(--dark-quote-border); + --quote-bg: var(--dark-quote-bg); + } +} + +/* Day mode */ +@media (prefers-color-scheme: light) +{ + :root + { + --bg-color: var(--light-bg); + --text-color: var(--light-text); + --link-color: var(--light-link); + --link-bg-color: var(--light-link-bg); + --title-color: var(--light-title); + --quote-border: var(--light-quote-border); + --quote-bg: var(--light-quote-bg); + } +} + diff --git a/CSS/dropdown.css b/CSS/dropdown.css new file mode 100644 index 0000000..b8288d6 --- /dev/null +++ b/CSS/dropdown.css @@ -0,0 +1,12 @@ +/* Dropdown style */ + +select +{ + padding: 0.1rem 1rem; + margin: 0rem 0.3rem; + + cursor: pointer; + background-color: var(--bg-color); + color: var(--title-color); + border: 2px solid var(--title-color); +} diff --git a/CSS/inputfield.css b/CSS/inputfield.css new file mode 100644 index 0000000..4f01ad5 --- /dev/null +++ b/CSS/inputfield.css @@ -0,0 +1,57 @@ +/* Inputfield style */ + +input[type=text], input[type=password], input[type=number], input[type=email], input[type=month], input[type=search], input[type=tel], input[type=time], input[type=url], input[type=week], textarea +{ + padding: 0.1rem 1rem; + margin: 0rem 0.3rem; + + box-sizing: border-box; + + background-color: var(--bg-color); + color: var(--text-color); + border: 2px solid var(--title-color); +} + +input[type=button], input[type=submit], input[type=reset], input[type=date], input[type=file], input[type=datetime-local], input[type=image] +{ + padding: 0.1rem 1rem; + margin: 0rem 0.3rem; + + cursor: pointer; + + text-align: center; + text-decoration: none; + text-transform: uppercase; + font-weight: bold; + + background-color: var(--link-bg-color); + color: var(--link-color); + border: 1px solid var(--link-bg-color); +} + +input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=date]:hover, input[type=datetime-local]:hover + +{ + color: var(--link-bg-color); + background-color: var(--link-color); +} + +input[type="file"]::file-selector-button +{ + text-align: center; + text-decoration: none; + text-transform: uppercase; + font-weight: bold; + + color: var(--link-bg-color); + background-color: var(--link-color); + border: 1px solid var(--link-color); +} + +input[type=color] +{ + cursor: pointer; + + background-color: var(--link-bg-color); + border: 1px solid var(--link-bg-color); +} diff --git a/CSS/quote-code.css b/CSS/quote-code.css new file mode 100644 index 0000000..87cb60e --- /dev/null +++ b/CSS/quote-code.css @@ -0,0 +1,35 @@ +code, pre, blockquote +{ + margin: 3vh 0px; + padding: 1.5vh 2vw; + + background-color: var(--quote-bg); + border-left: 2px solid var(--quote-border); +} + + + +blockquote +{ + text-indent: calc(-10px - 0.390625vw); + font-style: italic; +} + +@supports ( hanging-punctuation: first) +{ + blockquote + { + text-indent: 0; + hanging-punctuation: first; + } +} + +blockquote::before +{ + content: open-quote; +} + +blockquote::after +{ + content: close-quote; +} |