franpcode/Pomodoro-Timer-with-Clockify-integration
1
0
Fork 0
mirror of https://github.com/FranP-code/Pomodoro-Timer-with-Clockify-integration.git synced 2025-10-12 23:52:30 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

Added the Structure and the styles to a Toogle Button for allow the dark mode

Browse Source
This commit is contained in:
Francisco Pessano
2021-09-25 22:42:06 -03:00
parent 04ce4facaf
commit 63d8ddd567
5 changed files with 92 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
public/css_styles/styles.css
View File

@@ -388,6 +388,46 @@
border: #969696 solid 1px;
}
.dark-mode {
position: absolute;
left: calc(100% - 5vw);
}
.dark-mode #dark-mode_toogle-switch {
width: 0;
height: 0;
visibility: hidden;
}
.dark-mode label {
display: block;
width: 4vw;
height: 4vh;
background-color: #D7FBE8;
border-radius: 100px;
position: relative;
cursor: pointer;
transition: 0.5s;
box-shadow: 0 0 20px #477a8550;
}
.dark-mode label::after {
content: "";
width: 3.5vh;
height: 3.5vh;
background-color: #b632eb;
position: absolute;
border-radius: 100%;
top: 0.25vh;
left: 0.25vh;
transition: 0.5s;
}
.dark-mode input:checked + label:after {
left: calc(100% - 0.25vh);
transform: translateX(-100%);
background-color: #D7FBE8;
}
.dark-mode input:checked + label {
background-color: #b632eb;
}
html, body {
margin: 0;
padding: 0;