From 2f8732c4b6cf16d3bd6dc4778b38cda580f6c451 Mon Sep 17 00:00:00 2001 From: stef-devs Date: Tue, 12 Apr 2022 16:48:44 +0200 Subject: [PATCH] Add dark mode --- calendario/calendario.html | 8 +- function.js | 18 +++++ index.html | 8 +- orario/orario.html | 6 ++ style.css | 154 ++++++++++++++++++++++++++++++------- 5 files changed, 162 insertions(+), 32 deletions(-) create mode 100644 function.js diff --git a/calendario/calendario.html b/calendario/calendario.html index 6648dc9..d108184 100644 --- a/calendario/calendario.html +++ b/calendario/calendario.html @@ -2,7 +2,7 @@ - + @@ -30,6 +30,10 @@

- +
+ + +
+ diff --git a/function.js b/function.js new file mode 100644 index 0000000..0fd4f43 --- /dev/null +++ b/function.js @@ -0,0 +1,18 @@ +var checkbox = document.querySelector('input[name=mode]'); + + checkbox.addEventListener('change', function() { + if(this.checked) { + trans() + document.documentElement.setAttribute('data-theme', 'dartheme') + } else { + trans() + document.documentElement.setAttribute('data-theme', 'lighttheme') + } + }) + + let trans = () => { + document.documentElement.classList.add('transition'); + window.setTimeout(() => { + document.documentElement.classList.remove('transition'); + }, 1000) + } \ No newline at end of file diff --git a/index.html b/index.html index 20d92cd..ca865ed 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,6 @@ -
@@ -45,5 +44,10 @@


- + +
+ + +
+ \ No newline at end of file diff --git a/orario/orario.html b/orario/orario.html index 0b688b2..de47168 100644 --- a/orario/orario.html +++ b/orario/orario.html @@ -32,6 +32,12 @@

+ +
+ + +
+ diff --git a/style.css b/style.css index 01d5774..9f4dc21 100644 --- a/style.css +++ b/style.css @@ -1,32 +1,130 @@ a { - text-decoration: none; - outline: none; - display: inline-block; - width: 250px; - height: 50px; - line-height: 45px; - border-radius: 45px; - margin: 10px 20px; - font-family: 'Montserrat', sans-serif; - font-size: 11px; - text-transform: uppercase; - text-align: center; - letter-spacing: 3px; - font-weight: 600; - color: #524f4e; - background: white; - box-shadow: 0 8px 15px rgba(0,0,0,.1); - transition: .3s; - } - a:hover { - background: #2EE59D; - box-shadow: 0 15px 20px rgba(46,229,157,.4); - color: white; - transform: translateY(-7px); - } + text-decoration: none; + outline: none; + display: inline-block; + width: 250px; + height: 50px; + line-height: 45px; + border-radius: 45px; + margin: 10px 20px; + font-family: 'Montserrat', sans-serif; + font-size: 11px; + text-transform: uppercase; + text-align: center; + letter-spacing: 3px; + font-weight: 600; + color: #524f4e; + background: white; + box-shadow: 0 8px 15px rgba(0,0,0,.1); + transition: .3s; +} +a:hover { + background: #2EE59D; + box-shadow: 0 15px 20px rgba(46,229,157,.4); + color: white; + transform: translateY(-7px); +} a:logo { - margin-top: 43px; - float: left; - width: 358px; + margin-top: 43px; + float: left; + width: 358px; +} + + @import url("https://fonts.googleapis.com/css?family=Fredoka+One&display=swap"); + html { + background: var(--backg); + --btn: #2ab1ce; + --backg: #fff; + --colorx: #232323; + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + html[data-theme='dartheme'] { + background: var(--backg); + --btn: #ea4b3c; + --backg: #232323; + --colorx: #fff; + } + + h1 { + font-family: 'Fredoka One', cursive; + font-weight: 300; + color: var(--colorx); + } + h2 { + font-family: 'Fredoka One', cursive; + font-weight: 100; + color: var(--colorx); + } + + input[type=checkbox] { + visibility: hidden; + height: 0; + width: 0; + + } + + label { + margin: 0 auto; + display: flex; + justify-content: center; + align-items: center; + border-radius: 100px; + position: relative; + cursor: pointer; + text-indent: -9999px; + width: 60px; + height: 30px; + background: var(--btn); + position : absolute; + line-height: 12px; + width: 60px; + font-size: 50pt; + font-family: tahoma; + margin-top: 5px; + margin-right: 6px; + position:absolute; + top: 15px; + right: 15px; + } + + label:after { + border-radius: 50%; + position: absolute; + content: ''; + background: #fff; + width: 20px; + height: 20px; + top: 5px; + left: 4px; + transition: ease-in-out 200ms; + } + + input:checked + label { + background: #ea4b3c; + } + + input:checked + label:after { + left: calc(100% - 5px); + transform: translateX(-100%); + } + + html.transition, + html.transition *, + html.transition *:before, + html.transition *:after { + transition: ease-in-out 200ms !important; + transition-delay: 0 !important; + } + + #nomeid{ + position : absolute; + left : 20px; + right : 20px; } \ No newline at end of file