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%); background: hsl(var(--color), 100%, 80%);
color: hsl(var(--color), 100%, 28%); color: hsl(var(--color), 100%, 28%);
} }
.setting:hover {
background: #2228;
}
.setting.checked {
background: #36F;
}
.hostedby { .hostedby {
color: #FFF7; color: #FFF7;
} }

67
css/main.css
View File

@ -349,36 +349,59 @@ a.box {
} }
.settings { .settings {
margin: 4px 8px 24px; margin: 12px auto 32px;
display: flex; max-width: 800px;
justify-content: center;
} }
.setting { .setting {
background: var(--bg2); background: var(--bg2);
max-width: 192px; margin: 8px 0;
width: 100%; padding: 20px;
border-radius: 16px; display: flex;
margin: 8px;
padding: 12px;
text-align: left;
cursor: pointer; cursor: pointer;
transition: background .2s, box-shadow .2s, color .2s; border-radius: 16px;
} align-items: center;
.setting:hover { text-align: left;
background: #DDD8; transition: background .4s;
}
.setting div {
display: block;
text-align: center;
} }
.setting .icon { .setting .icon {
margin: 12px; margin-right: 14px;
font-size: 36px; font-size: 28px;
} }
.setting.checked { .setting .name {
color: #EEE; font-size: 16px;
background: #56F;
} }
.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 { .hostedby {
font-size: 13px; font-size: 13px;
color: #0007; color: #0007;

8
index.html
View File

@ -92,11 +92,19 @@
<div class="settings"> <div class="settings">
<div class="setting" onclick="switch_theme()" id="setting-theme"> <div class="setting" onclick="switch_theme()" id="setting-theme">
<div class="icon">dark_mode</div> <div class="icon">dark_mode</div>
<div class="text">
<div class="name">Dark mode</div> <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>
<div class="setting" onclick="new_tab_toggle()" id="setting-newtab"> <div class="setting" onclick="new_tab_toggle()" id="setting-newtab">
<div class="icon">open_in_new</div> <div class="icon">open_in_new</div>
<div class="text">
<div class="name">Open in new tab</div> <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> </div>
</div> </div>