wamo/gnu-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[BASE][CSS] Snappier and consistent animations.

Browse Source 
Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>
This commit is contained in:
Eliseu Amaro 2021-07-29 10:27:43 +01:00 committed by Hugo Sales
parent 10d7462d02
commit d12f97c623
No known key found for this signature in database
GPG Key ID: 7D0C7EAFC9D835A0
2 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/assets/css/base.css
View File

@ -29,6 +29,11 @@
--shadow: 0px 0px 16px 0px #383E51;
--shadow-light: 0px 0px 16px 0px #8E8DBE;
/* transitions and animations */
--cubic-transition: all 200ms cubic-bezier(0, 0.55, 0.45, 1);
--fade-in: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1);
--fade-out: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1);
}
/* TYPOGRAPHY */
@ -104,10 +109,10 @@ a:visited {
a:focus,
a:hover {
border-radius: var(--unit-size) !important;
padding: var(--unit-size) var(--small-size) var(--unit-size) var(--small-size) !important;
background: var(--white) !important;
color: var(--bg1) !important;
transition: all 0.4s ease;
padding: 0 var(--unit-size) 0 var(--unit-size) !important;
transition: var(--cubic-transition);
}
#instance:focus svg,
@ -119,10 +124,10 @@ a:hover {
summary:hover > svg,
summary:focus > svg {
border-radius: var(--unit-size);
padding: var(--small-size) !important;
padding: var(--unit-size) !important;
background: var(--white) !important;
fill: var(--bg1) !important;
transition: all 0.4s ease;
transition: var(--cubic-transition);
}
hr {
@ -279,7 +284,7 @@ figcaption a:link {
}
.panel aside {
animation: fadeIn 300ms cubic-bezier(0, 0.55, 0.45, 1);
animation: var(--fade-in);
}
.icon-left,

13
public/assets/css/settings/settings.css
View File

@ -54,22 +54,25 @@
.section-title-settings summary:focus,
.section-title-settings summary:hover {
border-radius: var(--unit-size) !important;
padding: var(--unit-size) var(--small-size) var(--unit-size) var(--small-size) !important;
background: var(--white) !important;
color: var(--bg1) !important;
transition: all 0.4s ease;
transition: var(--cubic-transition);
}
.section-title-settings summary:focus {
padding: var(--unit-size) var(--small-size) var(--unit-size) var(--small-size) !important;
}
.section-title-settings summary:focus .icon-details-open,
.section-title-settings summary:hover .icon-details-open {
fill: var(--bg1);
transition: all 0.4s ease;
transition: var(--cubic-transition);
}
/* SECTION DETAILS OPENED */
.section-title-settings[open] svg {
transform: rotate(180deg);
animation: fadeOut 300ms;
animation: var(--fade-out)
}
.section-title-settings[open] .set-nav li:first-of-type {
@ -83,5 +86,5 @@
/* SECTION DETAILS CLOSED */
.section-title-settings:not([open]) svg {
transform: initial;
animation: fadeIn 300ms;
animation: var(--fade-in);
}