From 1e520729865883326ea52d8878c620979af74673 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs?= <heckyel@hyperbola.info>
Date: Tue, 9 Nov 2021 18:20:40 -0500
Subject: initial import

---
 src/scss/styles/_switch.scss | 57 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 src/scss/styles/_switch.scss

(limited to 'src/scss/styles/_switch.scss')

diff --git a/src/scss/styles/_switch.scss b/src/scss/styles/_switch.scss
new file mode 100644
index 0000000..7361ee5
--- /dev/null
+++ b/src/scss/styles/_switch.scss
@@ -0,0 +1,57 @@
+.theme-switch {
+    display: none;
+}
+
+label[for=theme-switch] {
+    cursor: pointer;
+}
+
+.theme-switch:checked ~ .page {
+    --text:                var(--light-text);
+    --aside-text:          var(--light-aside-text);
+    --p-background:        var(--light-p-bg);
+    --s-background:        var(--light-s-bg);
+    --link:                var(--light-link);
+    --link-visited:        var(--light-link-visited);
+    --link-hover:          var(--light-link-hover);
+    --border:              var(--light-border);
+    --button:              var(--light-button);
+    --button-text:         var(--light-button-text);
+    --button-hover:        var(--light-button-hover);
+    --button-border:       var(--light-button-border);
+    --search-text:         var(--light-search-text);
+    --switch-icon:         var(--light-switch-icon);
+    --switch-shadow-color: var(--light-switch-shadow);
+    --switch-p-bg:         var(--light-switch-p-bg);
+    --switch-s-bg:         var(--light-switch-s-bg);
+    --switch-border:       var(--light-switch-border);
+    --switch-transform:    var(--light-switch-transform);
+}
+
+.switch-label {
+    display: inline-flex;
+    width: 35px;
+    height: 1rem;
+    border-radius: 1rem;
+    background-color: var(--switch-p-bg);
+    align-items: center;
+    align-content: center;
+}
+
+.switch-label::before {
+    content: var(--switch-icon);
+    position: relative;
+    transition: text-shadow .2s;
+    background: var(--switch-s-bg);
+    border: 1px solid var(--switch-border);
+    border-radius: 50%;
+    transform: var(--switch-transform);
+    width: 18px;
+    height: 18px;
+}
+
+.theme-switch:focus ~ .page .switch-label::before,
+.switch-label:hover::before {
+    text-shadow: 0 0 15px var(--switch-shadow-color);
+    transition: transform 0.25s;
+}
-- 
cgit v1.2.3