rottenwheel/revuo-weekly
1
0
Fork 0
mirror of https://github.com/rottenwheel/revuo-weekly.git synced 2024-12-23 08:07:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Dark Mode Button

Browse source
This commit is contained in:
monerooo 2022-04-01 20:02:53 +02:00
parent 88876651b0
commit a29e90a065
2 changed files with 79 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
_includes/head.html
View file

@ -29,4 +29,77 @@
<!-- RSS --> <!-- RSS -->
<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="ATOM Feed" /> <link href="/atom.xml" type="application/atom+xml" rel="alternate" title="ATOM Feed" />
<!-- Dark Mode Button -->
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin-top: 0px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
table {
margin-top: 34px;
}
td {
height: 50px;
vertical-align: middle;
}
</style>
</head> </head>

105
_includes/header-custom.html
View file

@ -1,84 +1,10 @@
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin-top: 0px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
table {
margin-top: 34px;
}
td {
height: 50px;
vertical-align: middle;
}
</style>
<!--<label class="switch">-->
<!--<input type="checkbox" checked>-->
<!--<span class="slider round"></span>-->
<!--</label>-->
<header id="header"> <header id="header">
<!-- Dark Mode Button -->
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<!-- Your custom header here -->
<div> <div>
<a href="{{ site.baseurl }}"> <a href="{{ site.baseurl }}">
<img src="{{ "/img/revuo-monero-logo.png" | prepend: site.baseurl | replace: '//', '/' }}" alt="Revuo Monero Logo"> <img src="{{ "/img/revuo-monero-logo.png" | prepend: site.baseurl | replace: '//', '/' }}" alt="Revuo Monero Logo">
@ -89,25 +15,4 @@ td {
<a href="/periodicals/" class="pd">Periodical</a> <a href="/periodicals/" class="pd">Periodical</a>
</div> </div>
<!--Add dark mode here-->
<div>
<table align="center">
<tr>
<td>
<img src="{{ "/img/dark-theme-icon2.png" | prepend: site.baseurl | replace: '//', '/' }}" height="50px" width="50px" alt="Dark Theme">
</td>
<td>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</td>
</tr>
</table>
</div>
<!--Finish dark mode-->
</header> </header>