From 3e508fd3a9d924f021c5862f8096a970b3f8600c Mon Sep 17 00:00:00 2001 From: JoanaChicau Date: Wed, 10 Mar 2021 19:01:42 +0100 Subject: [PATCH] chrome style fix + improv animations + hover interactions --- index.html | 135 +++++++++++++++++++++++------------------------- narrowstyle.css | 51 +++++++++--------- 2 files changed, 93 insertions(+), 93 deletions(-) diff --git a/index.html b/index.html index 8269314..e0e8fc7 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ +
back ↗
↬ stage
+ + + + + + + + + + + + + - - - - - - - - - - - + // update the posiion attributes + target.setAttribute('data-x', x); + target.setAttribute('data-y', y); + } + diff --git a/narrowstyle.css b/narrowstyle.css index a073ff6..ee62ffd 100644 --- a/narrowstyle.css +++ b/narrowstyle.css @@ -124,7 +124,7 @@ button.minimize{ .sidetop { height: 45vh; font-size: 1.2rem; - justify-content: end; + justify-content: flex-end; } .sidetop p { @@ -191,12 +191,12 @@ button.minimize{ .resize-drag { width: 620px; - padding: 1.4rem 0.4rem 0.4rem 1.4rem; + padding: 0.4rem 1.8rem 1.8rem 0.4rem; margin: 1rem; touch-action: none; - /* This makes things *much* easier */ box-sizing: border-box; - box-shadow: inset 0.6rem 0.2rem 0.9rem #ffe4fd; + box-shadow: inset -0.6rem 0rem 0.8rem #ffe4fd; + border-radius: 0.1rem 0.1rem 0.2rem 0.1rem; position: relative; } .drag::before, .resize-drag::before, .live > *::before { @@ -208,11 +208,12 @@ button.minimize{ position: absolute !important; z-index: 999; top: 0; - left: 0; - display: block; + left: 0; + display: block; } -.resize-drag { +.resize-drag:hover { + box-shadow: 0.2rem 0.2rem 0.6rem #ffe4fd; animation: corners 8s infinite alternate; -o-animation: corners 8s infinite alternate; -moz-animation: corners 8s infinite alternate; @@ -221,29 +222,31 @@ button.minimize{ @keyframes corners { 0% { - border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%; - -webkit-border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%; + border-radius: 0.1rem 0.1rem 0.2rem 0.1rem; + -webkit-border-radius: 0.1rem 0.1rem 0.2rem 0.1rem; } - 70% { - border-radius: 2rem 0rem 1rem 2rem; - -webkit-border-radius: 2rem 0rem 1rem 2rem; + 20% { + border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem; + -webkit-border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem; } 100% { - border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem; - -webkit-border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem; } + border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%; + -webkit-border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%; + } + } @-webkit-keyframes corners { 0% { - border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%; - -webkit-border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%; - } - 70% { border-radius: 2rem 0rem 1rem 2rem; - -webkit-border-radius: 2rem 0rem 1rem 2rem; - } - 100% { - border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem; - -webkit-border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem; - } + -webkit-border-radius: 2rem 0rem 1rem 2rem; + } + 20% { + border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem; + -webkit-border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem; + } + 100% { + border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%; + -webkit-border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%; + } }