khairul169/honey
1
0
Fork 0
mirror of https://github.com/khairul169/honey.git synced 2025-04-28 14:59:32 +07:00
Code Issues Actions Packages Projects Releases Wiki Activity

settings: Redesign

Browse Source
This commit is contained in:
Daniel 2023-05-09 21:29:23 +02:00
parent d3dfaa25cf
commit 4108ef50f5
3 changed files with 55 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
css/dark.css
View File

@ -9,12 +9,6 @@ html {
background: hsl(var(--color), 100%, 80%);
color: hsl(var(--color), 100%, 28%);
}
.setting:hover {
background: #2228;
}
.setting.checked {
background: #36F;
}
.hostedby {
color: #FFF7;
}

67
css/main.css
View File

@ -349,36 +349,59 @@ a.box {
}
.settings {
margin: 4px 8px 24px;
display: flex;
justify-content: center;
margin: 12px auto 32px;
max-width: 800px;
}
.setting {
background: var(--bg2);
max-width: 192px;
width: 100%;
border-radius: 16px;
margin: 8px;
padding: 12px;
text-align: left;
margin: 8px 0;
padding: 20px;
display: flex;
cursor: pointer;
transition: background .2s, box-shadow .2s, color .2s;
}
.setting:hover {
background: #DDD8;
}
.setting div {
display: block;
text-align: center;
border-radius: 16px;
align-items: center;
text-align: left;
transition: background .4s;
}
.setting .icon {
margin: 12px;
font-size: 36px;
margin-right: 14px;
font-size: 28px;
}
.setting.checked {
color: #EEE;
background: #56F;
.setting .name {
font-size: 16px;
}
.setting .desc {
opacity: .6;
}
.setting .switch {
position: relative;
width: 44px;
height: 24px;
background: #8886;
border-radius: 100px;
margin: 0 4px 0 auto;
transition: border .4s, background .4s;
}
.setting .switch:after {
content: "";
position: absolute;
width: 16px;
height: 16px;
background: var(--color);
left: 4px;
top: 50%;
border-radius: 10px;
transform: translateY(-50%);
transition: left .2s, background .4s;
}
.setting.checked .switch {
background-color: #68F;
border-color: #68F;
}
.setting.checked .switch:after {
left: calc(100% - 20px);
}
.hostedby {
font-size: 13px;
color: #0007;

12
index.html
View File

@ -92,11 +92,19 @@
<div class="settings">
<div class="setting" onclick="switch_theme()" id="setting-theme">
<div class="icon">dark_mode</div>
<div class="name">Dark mode</div>
<div class="text">
<div class="name">Dark mode</div>
<div class="desc">Make the colors more appropriate for low-light environments</div>
</div>
<div class="switch"></div>
</div>
<div class="setting" onclick="new_tab_toggle()" id="setting-newtab">
<div class="icon">open_in_new</div>
<div class="name">Open in new tab</div>
<div class="text">
<div class="name">Open in new tab</div>
<div class="desc">Clicking on application will open it in a new browser tab</div>
</div>
<div class="switch"></div>
</div>
</div>
</div>