eliseuamaro/gnu-social
1
0
Fork 0
forked from GNUsocial/gnu-social
Code Issues Pull Requests 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
Signed by untrusted user: someonewithpc
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: 0px 0px 16px 0px #383E51;
--shadow-light: 0px 0px 16px 0px #8E8DBE; --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 */ /* TYPOGRAPHY */
@ -104,10 +109,10 @@ a:visited {
a:focus, a:focus,
a:hover { a:hover {
border-radius: var(--unit-size) !important; border-radius: var(--unit-size) !important;
padding: var(--unit-size) var(--small-size) var(--unit-size) var(--small-size) !important;
background: var(--white) !important; background: var(--white) !important;
color: var(--bg1) !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, #instance:focus svg,
@ -119,10 +124,10 @@ a:hover {
summary:hover > svg, summary:hover > svg,
summary:focus > svg { summary:focus > svg {
border-radius: var(--unit-size); border-radius: var(--unit-size);
padding: var(--small-size) !important; padding: var(--unit-size) !important;
background: var(--white) !important; background: var(--white) !important;
fill: var(--bg1) !important; fill: var(--bg1) !important;
transition: all 0.4s ease; transition: var(--cubic-transition);
} }
hr { hr {
@ -279,7 +284,7 @@ figcaption a:link {
} }
.panel aside { .panel aside {
animation: fadeIn 300ms cubic-bezier(0, 0.55, 0.45, 1); animation: var(--fade-in);
} }
.icon-left, .icon-left,

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

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