diff options
author | Dmitrii Selivanov <selivano.d@gmail.com> | 2022-07-20 01:03:25 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-07-20 01:03:25 +0300 |
commit | 1e81b0abbb1f7bf115eb4620a778d172ee4f2b72 (patch) | |
tree | 6253d47d15d8e20334fbe347e1cb82e935cdb65f | |
parent | cb5f9474a2a5c0ae24637db4c6ff7845f00f2cd2 (diff) | |
parent | 4a09e311f89e6cb3f1fccbd9c6fce4b08f51ddf4 (diff) |
Merge pull request #592 from cyrildtm/popupCSStweak
Popup css tweak
-rw-r--r-- | Extensions/combined/popup.css | 58 | ||||
-rw-r--r-- | Extensions/combined/popup.html | 2 |
2 files changed, 57 insertions, 3 deletions
diff --git a/Extensions/combined/popup.css b/Extensions/combined/popup.css index 5c51c9c..c317102 100644 --- a/Extensions/combined/popup.css +++ b/Extensions/combined/popup.css @@ -69,9 +69,11 @@ button:hover { border-radius: 0.25rem; } -.switch:before { +.switch:before, .label-with-hover-tip:before { content: attr(data-hover); visibility: hidden; + opacity: 0; + transition: visibility 0.1s linear, opacity 0.1s linear; width: 250px; background-color: var(--secondary); border-radius: 0.5rem; @@ -83,8 +85,26 @@ button:hover { top: 160%; } -.switch:hover:before { +.switch:hover:before, .label-with-hover-tip:hover:before { visibility: visible; + opacity: 1; +} + +.fade-in { + opacity: 1; + animation-name: fadeInOpacity; + animation-iteration-count: 1; + animation-timing-function: ease-in; + animation-duration: 2s; +} + +@keyframes fadeInOpacity { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } } #advancedToggle { @@ -124,6 +144,32 @@ button:hover { border: 2px solid var(--secondary); border-radius: 0.5rem; padding: 1rem; + overflow-y: auto; + overflow-x: hidden; +} + +::-webkit-scrollbar { + width: 1rem; +} + +::-webkit-scrollbar-track { + background: #111; /* color of the tracking area */ +} + +::-webkit-scrollbar-thumb { + background-color: #333; /* color of the scroll thumb */ + border-radius: 1rem 0 0 1rem; /* roundness of the scroll thumb */ + border-bottom: 0.25rem solid #111; /* creates padding around scroll thumb */ + border-left: 0.25rem solid #111; /* creates padding around scroll thumb */ + border-top: 0.25rem solid #111; /* creates padding around scroll thumb */ +} + +::-webkit-scrollbar-thumb:hover { + background-color: #f22; /* color of the scroll thumb */ + border-radius: 1rem 0 0 1rem; /* roundness of the scroll thumb */ + border-bottom: 0.25rem solid #111; /* creates padding around scroll thumb */ + border-left: 0.25rem solid #111; /* creates padding around scroll thumb */ + border-top: 0.25rem solid #111; /* creates padding around scroll thumb */ } #advancedLegend { @@ -143,6 +189,14 @@ button:hover { margin-bottom: 1rem; } +.label-with-hover-tip { + position: relative; + display: inline-block; + width: 80px; + height: 17px; + margin-bottom: 1rem; +} + .switch:last-of-type { margin-bottom: 0; } diff --git a/Extensions/combined/popup.html b/Extensions/combined/popup.html index 1381dc9..45c4ccd 100644 --- a/Extensions/combined/popup.html +++ b/Extensions/combined/popup.html @@ -137,7 +137,7 @@ </label> <br/> <div class="custom-select"> - <label for="color_theme">Color theme:</label> + <label for="color_theme" class="label-with-hover-tip" data-hover="">Color theme:</label> <select name="color_theme" id="color_theme"> <option value="classic" id="color_theme_classic">Classic</option> <option value="accessible" id="color_theme_accessible"> |