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

css: Fix overlapping transitions

Browse Source
This commit is contained in:
Daniel 2023-01-15 14:24:40 +01:00
parent be33eae53b
commit 3d60f5d8ae
1 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
css/main.css
View File

@ -50,7 +50,7 @@ a {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
object-fit: cover; object-fit: cover;
transition: all .45s !important; transition: transform .4s, opacity .4s !important;
} }
#background.scaled img { #background.scaled img {
transform: scale(1.14); transform: scale(1.14);
@ -95,7 +95,7 @@ a {
height: 100vh; height: 100vh;
transform: translateX(-50%); transform: translateX(-50%);
overflow-y: scroll; overflow-y: scroll;
transition: all .4s; transition: top .4s, opacity .4s, visibility .4s, color .3s;
} }
.home.page { .home.page {
top: 50%; top: 50%;
@ -106,12 +106,12 @@ a {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.page.hidden { .page.hidden {
top: 320px; top: 240px;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
} }
.home.page.hidden { .home.page.hidden {
top: calc(50% - 72px); top: calc(50% - 64px);
} }
.wrapper { .wrapper {
box-shadow: 2px 2px 8px #0003; box-shadow: 2px 2px 8px #0003;
@ -151,7 +151,7 @@ a {
background: #EEE8; background: #EEE8;
padding: 2px; padding: 2px;
justify-content: space-between; justify-content: space-between;
transition: background .4s; transition: background .3s;
} }
.buttons > div { .buttons > div {
padding: 16px; padding: 16px;
@ -159,7 +159,7 @@ a {
cursor: pointer; cursor: pointer;
border-radius: 20px; border-radius: 20px;
width: 100%; width: 100%;
transition: all .2s; transition: background .2s;
} }
.buttons > div:hover { .buttons > div:hover {
background: #0001; background: #0001;
@ -186,7 +186,7 @@ a {
height: 56px; height: 56px;
cursor: pointer; cursor: pointer;
border-radius: 20px; border-radius: 20px;
transition: all .2s; transition: background .2s;
} }
.back .icon:hover { .back .icon:hover {
background: #0001; background: #0001;
@ -221,7 +221,7 @@ a {
text-align: left; text-align: left;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
transition: all .2s; transition: background .2s;
} }
.box:hover { .box:hover {
background: #0001; background: #0001;
@ -273,7 +273,7 @@ a.box {
overflow: hidden; overflow: hidden;
width: calc(100% - 32px); width: calc(100% - 32px);
max-width: 640px; max-width: 640px;
transition: color .2s, background .2s; transition: background .2s;
} }
.selector .bg { .selector .bg {
position: absolute; position: absolute;
@ -285,7 +285,7 @@ a.box {
margin-left: 4px; margin-left: 4px;
border-radius: 12px; border-radius: 12px;
transform: translateY(-50%); transform: translateY(-50%);
transition: all .4s; transition: background .4s, left .3s;
} }
.selector .entry { .selector .entry {
margin: 0 auto; margin: 0 auto;
@ -330,7 +330,7 @@ a.box {
display: flex; display: flex;
width: calc(100% * var(--screens)); width: calc(100% * var(--screens));
align-items: flex-start; align-items: flex-start;
transition: all .4s; transition: transform .4s, height .4s;
} }
.screen { .screen {
width: 100%; width: 100%;
@ -353,7 +353,7 @@ a.box {
padding: 12px; padding: 12px;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
transition: background .2s, color .2s, box-shadow .2s; transition: background .2s, box-shadow .2s;
} }
.setting:hover { .setting:hover {
background: #DDD8; background: #DDD8;
@ -369,6 +369,7 @@ a.box {
color: #EEE; color: #EEE;
background: #56F; background: #56F;
box-shadow: 2px 2px 8px #56F8; box-shadow: 2px 2px 8px #56F8;
transition: all .2s;
} }
.hostedby { .hostedby {
font-size: 13px; font-size: 13px;