diff --git a/src/lib/css/icon.css b/src/lib/css/icon.css new file mode 100644 index 0000000..182d083 --- /dev/null +++ b/src/lib/css/icon.css @@ -0,0 +1,47 @@ +.icon:active{ + scale: 0.8 0.8; + rotate: var(--angle, 30deg); +} + +a.icon{ + --angle: 15deg; + --endscale: 1.2; + text-decoration: unset; + transition: 100ms; + position: absolute; + font-size: 1.5rem; + top:-0.5em; + right:-0.5em; + padding: 0.25em; + background-color: var(--nord6); + border-radius:1000px; + box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.6); +} +input.icon{ + z-index: 3; + box-sizing: border-box; + text-decoration: unset; + text-align:center; + width: 2.6rem; + aspect-ratio: 1/1; + transition: 100ms; + position: absolute; + font-size: 1.5rem; + top:-0.5em; + right:-0.5em; + padding: 0.25em; + background-color: var(--nord6); + border-radius:1000px; + box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.6); +} +input.icon:hover, +input.icon:focus-visible +{ + box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6); +} +a.icon:hover, +a.icon:focus-visible +{ + box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6); + animation: shake 0.6s forwards; +}