From 35a64bfa5763fa0fb3afec9fb49597c9e6c90604 Mon Sep 17 00:00:00 2001 From: tsmethurst Date: Sun, 2 Oct 2022 11:58:10 +0200 Subject: [PATCH 1/3] enlarge active/hovered custom emojis in statuses --- web/source/css/status.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/web/source/css/status.css b/web/source/css/status.css index e34b3b091d..6610e40126 100644 --- a/web/source/css/status.css +++ b/web/source/css/status.css @@ -177,6 +177,17 @@ main { } } } + + .emoji { + -webkit-transition: width 0.5s, height 0.5s, box-shadow 0.5s; + transition: width 0.5s, height 0.5s, box-shadow 0.5s; + } + + .emoji:hover, .emoji:active { + width: 5ex; + height: 5ex; + box-shadow: $boxshadow; + } } .media { From bee7be24d2670b8adbf574b57e08405949d89c99 Mon Sep 17 00:00:00 2001 From: tsmethurst Date: Sun, 2 Oct 2022 12:39:46 +0200 Subject: [PATCH 2/3] use transform, make emojis pop a lil more --- web/source/css/status.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/web/source/css/status.css b/web/source/css/status.css index 6610e40126..caf2c14279 100644 --- a/web/source/css/status.css +++ b/web/source/css/status.css @@ -179,14 +179,15 @@ main { } .emoji { - -webkit-transition: width 0.5s, height 0.5s, box-shadow 0.5s; - transition: width 0.5s, height 0.5s, box-shadow 0.5s; + -webkit-transition: transform 0.5s, background-color 0.5s; + transition: transform 0.5s, background-color 0.5s; } .emoji:hover, .emoji:active { - width: 5ex; - height: 5ex; + transform: scale(1.75); + background-color: $bg; box-shadow: $boxshadow; + border: $boxshadow-border; } } From 7c25f74a764fb049646b6ea04b3a64271a1299d2 Mon Sep 17 00:00:00 2001 From: f0x Date: Sun, 2 Oct 2022 13:23:13 +0000 Subject: [PATCH 3/3] tweak emoji hover timing, styling --- web/source/css/status.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/web/source/css/status.css b/web/source/css/status.css index caf2c14279..15e4802375 100644 --- a/web/source/css/status.css +++ b/web/source/css/status.css @@ -128,7 +128,6 @@ main { margin: 0; grid-column: 2 / span 2; grid-row: span 1; - overflow: hidden; position: relative; z-index: 2; @@ -179,8 +178,7 @@ main { } .emoji { - -webkit-transition: transform 0.5s, background-color 0.5s; - transition: transform 0.5s, background-color 0.5s; + transition: 0.1s; } .emoji:hover, .emoji:active { @@ -188,6 +186,7 @@ main { background-color: $bg; box-shadow: $boxshadow; border: $boxshadow-border; + border-radius: $br-inner; } }