diff --git a/source/index.styl b/source/index.styl index a536b0f..7ed1ade 100644 --- a/source/index.styl +++ b/source/index.styl @@ -42,15 +42,16 @@ likely-light-box-shadow = rgba(0,0,0,.2) 0 0 .33em; background-image: linear-gradient(to right, rgba(0,0,0,.2) 0, rgba(0,0,0,0) .5px, rgba(0,0,0,0) 100%) } - &__widget { - all: initial; // reset all styles + &__widget, &__widget:visited { + all: initial; // Reset all external styles + /* Restore styles after reset */ display: inline-block; - position: relative; white-space: nowrap; color: #000; background: likely-background; transition: widget-transition = background .33s ease-out, color .33s ease-out, fill .33s ease-out; + /*** End of restore styles ***/ &:hover, &:active, &:focus { transition: none; @@ -102,6 +103,7 @@ likely-light-box-shadow = rgba(0,0,0,.2) 0 0 .33em; } &__widget, + &__widget:visited, &__icon, &__button, &__counter { @@ -122,7 +124,7 @@ likely-light-counter() { } likely-light-button(button, color) { - .likely__widget_{button} { + .likely__widget_{button}, .likely__widget_{button}:visited { &:hover, &:active, &:focus { text-shadow: color 0 0 .25em; background: alpha(color, 0.7); @@ -131,7 +133,7 @@ likely-light-button(button, color) { } likely-light-media-none-button(button, color) { - .likely__widget_{button} { + .likely__widget_{button}, .likely__widget_{button}:visited { &:hover, &:active, &:focus { text-shadow: likely-light-box-shadow; background: likely-light-background; @@ -141,7 +143,7 @@ likely-light-media-none-button(button, color) { .likely-light, .likely-dark-theme { - .likely__widget { + .likely__widget, .likely__widget:visited { likely-light-widget() } .likely__counter { @@ -151,7 +153,7 @@ likely-light-media-none-button(button, color) { @media (prefers-color-scheme: dark) { .likely-color-theme-based { - .likely__widget { + .likely__widget, .likely__widget:visited { likely-light-widget() } .likely__counter { @@ -161,12 +163,21 @@ likely-light-media-none-button(button, color) { } colorize(button, color) { - .likely__widget_{button} { + .likely__widget_{button}, .likely__widget_{button}:visited { fill: color; &:hover, &:active, &:focus { + all: initial; // Reset all external styles on hover + /* Restore styles after reset */ + fill: color; + transition: none; + cursor: pointer; + /*** End of restore styles ***/ + background: alpha(mix(#fff,color,75%),.8); @media (hover: none) { + transition: widget-transition; + cursor: unset; background: likely-background; } } @@ -207,7 +218,7 @@ colorize('whatsapp', #25D366); .likely { gap: 10px; - .likely__widget { + .likely__widget, .likely__widget:visited { line-height: 20px; font-size: 14px; border-radius: 3px; @@ -230,7 +241,7 @@ colorize('whatsapp', #25D366); .likely-big { gap: 12px; - .likely__widget { + .likely__widget, .likely__widget:visited { line-height: 28px; font-size: 18px; border-radius: 4px; @@ -253,7 +264,7 @@ colorize('whatsapp', #25D366); .likely-small { gap: 8px; - .likely__widget { + .likely__widget, .likely__widget:visited { line-height: 14px; font-size: 12px; border-radius: 2px; diff --git a/test/files/manual.html b/test/files/manual.html index 377cc91..a22351d 100644 --- a/test/files/manual.html +++ b/test/files/manual.html @@ -5,7 +5,23 @@ Likely test page + +