diff --git a/popup.css b/popup.css index 6d3c1e0..3082757 100644 --- a/popup.css +++ b/popup.css @@ -14,6 +14,7 @@ body { padding: 0; display: flex; flex-flow: column; + font-family: Inconsolata, sans-serif; } /***********/ @@ -26,6 +27,7 @@ button { background-color: #fff; border: none; cursor: pointer; + font-family: Font Awesome, Inconsolata, sans-serif; } button:active { transform: scale(0.95); @@ -55,7 +57,6 @@ button.main-button { height: 150px; width: 150px; color: #ccc; - font-family: Font Awesome; } button.main-button.active { color: #000; @@ -109,15 +110,16 @@ button.main-button.whitelist.active::after { } .aux-button-container button { - font-size: 1.25rem; - padding: 0; flex: 1 1 auto; - font-family: Font Awesome, Inconsolata, sans-serif; + padding: 0; + margin: 2px 10px; + min-width: 0; + display: flex; flex-flow: column; align-items: center; justify-content: center; - min-width: 0; + font-size: 1.25rem; } .aux-button-container button::before { padding: 4px 0 0 0; @@ -166,7 +168,6 @@ button.help-button::after { position: relative; display: flex; flex-flow: column; - font-family: Inconsolata, sans-serif; font-size: 1rem; padding: 10px 8px 6px 8px; line-height: 1; @@ -255,7 +256,6 @@ button.reload-button:hover { } button.reload-button::before { content: "\F2F1"; - font-family: Font Awesome; font-size: 2rem; font-weight: 900; } @@ -266,10 +266,47 @@ button.reload-button::before { .info-header { text-align: center; - font-family: Inconsolata, sans-serif; font-size: 0.75rem; padding: 2px; background-color: #444; color: #ccc; cursor: default; +} + +/************/ +/* TOOLTIPS */ +/************/ + +.tooltip-overlay { + position: fixed; + width: calc(100% - 20px); + left: 10px; + top: 0; + height: 100%; + pointer-events: none; +} + +.tooltip { + background-color: #ffe; + position: absolute; + left: 0; + right: 0; + margin: auto; + padding: 8px 12px; + border: 1px solid #777; + border-radius: 4px; + box-shadow: + 1px 1px 4px 0 #aaa; + text-align: center; + line-height: 1.3; + font-size: 0.75rem; + width: fit-content; + visibility: hidden; + opacity: 0.0; + transition: none; +} +.tooltip.active { + visibility: visible; + opacity: 1.0; + transition: opacity 0.1s ease 0.5s; } \ No newline at end of file diff --git a/popup.html b/popup.html index f4eb5f1..5ca0133 100644 --- a/popup.html +++ b/popup.html @@ -9,16 +9,19 @@ AlwaysKillSticky 0.0