From 8fc39ad438ceb53719a050a5b0f5ced198330c94 Mon Sep 17 00:00:00 2001 From: Laegnur Date: Sun, 13 Mar 2022 21:30:17 +0100 Subject: [PATCH] Selector de tema de cores. --- site/templates/_func.php | 2 +- site/templates/_head.php | 47 +++++++-- site/templates/css/style.css | 195 +++++++++++++++++++++++++++++------ site/templates/js/main.js | 81 ++++++++++++++- 4 files changed, 281 insertions(+), 44 deletions(-) diff --git a/site/templates/_func.php b/site/templates/_func.php index 07cac1f..39096d1 100644 --- a/site/templates/_func.php +++ b/site/templates/_func.php @@ -90,7 +90,7 @@ function renderMenu($paxinas, $maxDepth = 0, $id = 'nav') if($saida) { - $saida = ''; + $saida = ''; } return $saida; diff --git a/site/templates/_head.php b/site/templates/_head.php index 5773502..e1182f0 100644 --- a/site/templates/_head.php +++ b/site/templates/_head.php @@ -1,4 +1,13 @@ - + <?php echo $titulo; ?> @@ -7,15 +16,15 @@ descripcion_sitio): ?> - - + + viewable($idioma)): continue; endif; ?> - +
@@ -31,7 +40,8 @@
diff --git a/site/templates/css/style.css b/site/templates/css/style.css index ef76cba..7a133c7 100644 --- a/site/templates/css/style.css +++ b/site/templates/css/style.css @@ -6,11 +6,6 @@ :root { font-size: 16px; - - --color_oscuro: 189, 186, 178; - --fondo_principal: 255, 255, 255; - --fondo_oscuro: 43, 44, 38; - --sombra: 0.8; } body @@ -22,11 +17,27 @@ body margin: 0; - color: var(--fondo_oscuro); + color: rgb(var(--color_realce)); font-family: 'DejaVu Sans', sans-serif; font-size: 1rem; - background-color: rgb(var(--fondo_principal)); + background-color: rgb(var(--color_principal)); +} + +body.light +{ + --color_principal: 255, 255, 255; + --color_realce: 43, 44, 38; + --color-pe: 43, 44, 38; + --texto_realce: 189, 186, 178; +} + +body.dark +{ + --color_principal: 43, 44, 38; + --color_realce: 255, 255, 255; + --color-pe: 24, 24, 18; + --texto_realce: 189, 186, 178; } h1, h2, h3, h4, h5, h6 @@ -87,14 +98,16 @@ img header#cabeceira { - margin-bottom: 0.625rem; + margin-bottom: 1.125rem; padding: 0.625rem; - box-shadow: 0px 0 0.625rem rgb(var(--fondo_oscuro), var(--sombra)); + box-shadow: 0px 16px 24px 2px rgba(0, 0, 0, 0.14), + 0px 6px 30px 5px rgba(0, 0, 0, 0.12), + 0px 8px 10px -5px rgba(0, 0, 0, 0.2); } -header#cabeceira input[type="checkbox"] +header#cabeceira input#interruptor { display: block; @@ -135,7 +148,7 @@ header#cabeceira .interruptor .linna border-radius: 0.625rem; - background: rgb(var(--fondo_oscuro)); + background: rgb(var(--color_realce)); } header#cabeceira .interruptor .linna1 @@ -166,11 +179,11 @@ nav#menu padding: 0; - border-right: 2px solid rgb(var(--fondo_oscuro)); + border-right: 2px solid rgb(var(--color_realce)); - color: var(--fondo_oscuro); + color: rgb(var(--color_realce)); - background-color: rgb(var(--fondo_principal)); + background-color: rgb(var(--color_principal)); transform: translateX(-100%); transition: transform 0.5s; @@ -178,7 +191,13 @@ nav#menu nav#menu a { - color: rgb(var(--fondo_oscuro)); + color: rgb(var(--color_realce)); +} + +div#axustes +{ + display: flex; + flex-direction: column; } ul#idiomas @@ -216,31 +235,31 @@ ul#idiomas li a padding: 0.625rem; - border: 1px solid rgb(var(--fondo_oscuro)); + border: 1px solid rgb(var(--color_realce)); text-decoration: none; } ul#idiomas li.activo a { - color: rgb(var(--fondo_principal)); + color: rgb(var(--color_principal)); - background-color: rgb(var(--fondo_oscuro)); + background-color: rgb(var(--color_realce)); } nav#menu li a:focus { - outline: 2px dotted rgb(var(--fondo_oscuro)); + outline: 2px dotted rgb(var(--color_realce)); } ul#paxinas li { - border-left: 0.625rem solid rgb(var(--fondo_principal)); + border-left: 0.625rem solid rgb(var(--color_principal)); } ul#paxinas li:hover, ul#paxinas li.activo { - border-left: 0.625rem solid rgb(var(--fondo_oscuro)); + border-left: 0.625rem solid rgb(var(--color_realce)); } ul#paxinas li a @@ -252,34 +271,34 @@ ul#paxinas li a text-decoration: none; } -header#cabeceira input[type="checkbox"]:checked ~ nav#menu +header#cabeceira input#interruptor:checked ~ nav#menu { transform: translateX(0); } -header#cabeceira input[type="checkbox"]:focus ~ .interruptor +header#cabeceira input#interruptor:focus ~ .interruptor { - outline: 2px dotted rgb(var(--fondo_oscuro)); + outline: 2px dotted rgb(var(--color_realce)); } -header#cabeceira input[type="checkbox"]:checked ~ .interruptor .linna1 +header#cabeceira input#interruptor:checked ~ .interruptor .linna1 { transform: rotate(45deg) scaleX(1.3); } -header#cabeceira input[type="checkbox"]:checked ~ .interruptor .linna2 +header#cabeceira input#interruptor:checked ~ .interruptor .linna2 { transform: scaleY(0); } -header#cabeceira input[type="checkbox"]:checked ~ .interruptor .linna3 +header#cabeceira input#interruptor:checked ~ .interruptor .linna3 { transform: rotate(-45deg) scaleX(1.3); } -header#cabeceira input[type="checkbox"]:checked:focus ~ .interruptor +header#cabeceira input#interruptor:checked:focus ~ .interruptor { - outline: 2px dotted rgb(var(--fondo_oscuro)); + outline: 2px dotted rgb(var(--color_realce)); } header#cabeceira div.contedor @@ -290,6 +309,105 @@ header#cabeceira div.contedor justify-content: center; } +div.tema +{ + display: flex; + flex-direction: row; + justify-content: center; + + margin-top: 20px; +} + +.toggle +{ + display: none; +} + +.toggle::selection, +.toggle:after::selection, +.toggle:before::selection, +.toggle *::selection, +.toggle *:after::selection, +.toggle *:before::selection, +.toggle + .toggle-button::selection +{ + background: none; +} + +.toggle + .toggle-button +{ + display: inline-block; + + position: relative; + + width: 4em; + height: 2em; + + padding: 2px; + + border: 2px solid rgb(var(--color_realce)); + border-radius: 2em; + + outline: 0; + + cursor: pointer; + + user-select: none; + + transition: all .2s ease; +} + +.toggle + .toggle-button:after, +.toggle + .toggle-button:before +{ + display: block; + + position: relative; + + width: 50%; + height: 100%; + + content: ""; +} + +.toggle + .toggle-button:after +{ + left: 0; + + border-radius: 1em; + + background: rgba(var(--color_realce, 0.27)); + + content: ""; + + transition: all .2s ease; +} + +.toggle + .toggle-button:before +{ + display: none; +} + +.toggle:checked + .toggle-button:after +{ + left: 50%; +} + +#icono_dia, #icono_noche +{ + position: relative; + top: -3px; + + width: 32px; + height: 32px; + + margin: 0 7px; + + cursor: pointer; + + fill: rgb(var(--color_realce)); +} + main#contido { flex: 1 0 auto; @@ -330,9 +448,9 @@ footer#pe padding: 1.25rem 0.625rem; - color: rgb(var(--color_oscuro)); + color: rgb(var(--texto_realce)); - background-color: rgb(var(--fondo_oscuro)); + background-color: rgb(var(--color-pe)); } footer#pe p @@ -343,7 +461,7 @@ footer#pe p footer#pe a { - color: rgb(var(--color_oscuro)); + color: rgb(var(--texto_realce)); } .contedor @@ -396,12 +514,23 @@ footer#pe a justify-content: space-between; } - header#cabeceira input[type="checkbox"], + header#cabeceira input#interruptor, header#cabeceira .interruptor { display: none; } + div#axustes + { + flex-direction: row; + gap: 20px; + } + + div.tema + { + margin-top: 5px; + } + nav#menu { position: initial; diff --git a/site/templates/js/main.js b/site/templates/js/main.js index f87af3c..1460624 100644 --- a/site/templates/js/main.js +++ b/site/templates/js/main.js @@ -1 +1,80 @@ -// Blank +const selector_tema = document.querySelector("#selector_tema"); +const preferencia_escura = window.matchMedia("(prefers-color-scheme: dark)"); + +function getCookie() +{ + let name = "tema="; + + let spli = document.cookie.split(';'); + + for(var j = 0; j < spli.length; j++) + { + let char = spli[j]; + + while (char.charAt(0) == ' ') + { + char = char.substring(1); + } + if(char.indexOf(name) == 0) + { + return char.substring(name.length, char.length); + } + } + return ""; +} + +function checkCookie() +{ + var tema = getCookie(); + + if(tema != "") + { + switch(tema) + { + case 'dark': + selector_tema.checked = true; + document.body.classList.add("dark"); + document.body.classList.remove("light"); + break; + + case 'light': + document.body.classList.add("light"); + document.body.classList.remove("dark"); + break; + } + document.cookie = "tema=" + tema + ";samesite=lax;path=/"; + } + else + { + if(preferencia_escura.matches) + { + selector_tema.checked = true; + document.body.classList.add("dark"); + document.body.classList.remove("light"); + document.cookie = "tema=dark;samesite=lax;path=/"; + } + } +} + +checkCookie(); + +selector_tema.addEventListener("change", function() +{ + var tema = ''; + + switch(selector_tema.checked) + { + case true: + tema = 'dark'; + document.body.classList.add("dark"); + document.body.classList.remove("light"); + break; + + case false: + tema = 'light'; + document.body.classList.add("light"); + document.body.classList.remove("dark"); + break; + } + document.cookie = "tema=" + tema + ";samesite=lax;path=/"; +}); \ No newline at end of file