khairul169/honey
1
0
Fork 0
mirror of https://github.com/khairul169/honey.git synced 2026-10-04 18:03:54 +07:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: hide appicon & appname, place on bottom

Browse Source
This commit is contained in:
khairul169
2024-08-11 03:16:31 +07:00
parent dc48c53aa2
commit 9ab145d23d
5 changed files with 187 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/Pages/Home.css
+59 -57
View File
@@ -1,103 +1,105 @@
.main {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.appicon {
width: 192px;
height: 192px;
object-fit: cover;
transition: transform .4s, opacity .4s;
width: 192px;
height: 192px;
object-fit: cover;
transition: transform 0.4s, opacity 0.4s;
}
.appicon.notloaded {
transform: scale(.8);
opacity: 0;
transform: scale(0.8);
opacity: 0;
}
#theme-switcher i {
position: relative;
overflow: hidden;
position: relative;
overflow: hidden;
}
#theme-switcher i::before, #theme-switcher i::after {
position: absolute;
top: 50%;
left: 50%;
--hidden: 1;
opacity: calc(1 - var(--hidden));
transform: translate(-50%, -50%) rotateZ(calc(var(--hidden) * 360deg)) scale(calc(1 - var(--hidden) / 2));
transition: transform .3s, opacity .3s;
#theme-switcher i::before,
#theme-switcher i::after {
position: absolute;
top: 50%;
left: 50%;
--hidden: 1;
opacity: calc(1 - var(--hidden));
transform: translate(-50%, -50%) rotateZ(calc(var(--hidden) * 360deg))
scale(calc(1 - var(--hidden) / 2));
transition: transform 0.3s, opacity 0.3s;
}
#theme-switcher i::before {
--hidden: 0;
--dark: 0;
content: "light_mode";
--hidden: 0;
--dark: 0;
content: "light_mode";
}
#theme-switcher i::after {
--dark: 1;
content: "dark_mode";
--dark: 1;
content: "dark_mode";
}
.home.page {
top: 50%;
left: 50%;
width: 100%;
height: auto;
overflow: hidden;
transform: translate(-50%, -50%);
top: 90%;
left: 50%;
width: 100%;
height: auto;
overflow: hidden;
transform: translate(-50%, -50%);
}
.home.page:not(.current) {
top: calc(50% - 64px);
top: calc(50% - 64px);
}
.home .wrapper {
box-shadow: none;
background: transparent;
backdrop-filter: none;
box-shadow: none;
background: transparent;
backdrop-filter: none;
}
.appname {
font-size: 48px;
font-size: 48px;
}
.appdesc {
opacity: .6;
margin: 2px 12px;
opacity: 0.6;
margin: 2px 12px;
}
.buttons {
box-shadow: 2px 2px 8px #0002;
display: flex;
margin: 16px auto 0;
backdrop-filter: var(--blur);
border-radius: 24px;
max-width: 480px;
background: var(--background);
padding: 2px;
justify-content: space-between;
transition: background .3s;
box-shadow: 2px 2px 8px #0002;
display: flex;
margin: 16px auto 0;
backdrop-filter: var(--blur);
border-radius: 24px;
max-width: 480px;
background: var(--background);
padding: 2px;
justify-content: space-between;
transition: background 0.3s;
}
.buttons > div {
padding: 16px;
margin: 2px;
cursor: pointer;
border-radius: 20px;
width: 100%;
transition: background .2s;
padding: 16px;
margin: 2px;
cursor: pointer;
border-radius: 20px;
width: 100%;
transition: background 0.2s;
}
.buttons > div:hover {
background: var(--hover);
background: var(--hover);
}
.buttons .text {
margin-top: -2px;
margin-top: -2px;
}