diff --git a/popup.css b/popup.css index 333b987..8479146 100644 --- a/popup.css +++ b/popup.css @@ -86,6 +86,9 @@ button.main-button::after { button.main-button.active::after { opacity: 1.0; } +button.main-button.active:hover::after { + opacity: 0.15; +} button.main-button.whitelist::after { opacity: 0.15; @@ -132,48 +135,75 @@ button.options-button::after { } /********/ -/* MISC */ +/* INFO */ /********/ -.misc { - height: 4rem; +.info { + height: 6rem; position: relative; display: flex; + flex-flow: column; + font-family: Inconsolata, sans-serif; + font-size: 1rem; + padding: 10px 8px 6px 8px; + line-height: 1; } -.misc > * { +.info > * { flex: 1 1 auto; } +.info.whitelist { + background-color: #000; + color: #fff; +} + +.mode-display, +.status-display { + display: flex; + justify-content: center; + align-items: center; + cursor: default; +} + +.mode-display::after, +.status-display::after { + font-weight: bold; +} /*================*/ /*= MODE DISPLAY =*/ /*================*/ -.mode-display { - font-family: Inconsolata, sans-serif; - padding: 10px; - display: block; - text-align: center; - font-weight: bold; - font-size: 1rem; - line-height: 1.35; - cursor: default; -} -.mode-display::before { - content: "Mode:"; - display: block; - font-weight: normal; -} -.mode-display.whitelist { - background-color: #000; - color: #fff; -} .mode-display::after { content: "Blacklist"; + margin: 0 0 0 8px; } -.mode-display.whitelist::after { +.info.whitelist .mode-display::after { content: "Whitelist"; } +/*==================*/ +/*= STATUS DISPLAY =*/ +/*==================*/ + +.status-display { + flex-flow: column; + line-height: 1.25; + font-size: 0.875rem; +} +.status-display::after { + font-size: 1.5rem; + line-height: 1; + margin: 2px 0 0 0; +} +.status-display::after, +.info.whitelist .status-display.active::after { + content: "No"; +} +.status-display.active::after, +.info.whitelist .status-display::after { + content: "Yes"; +} + /*=================*/ /*= RELOAD BUTTON =*/ /*=================*/ @@ -187,6 +217,7 @@ button.reload-button { overflow: hidden; position: absolute; width: calc(100% - 10px); + height: calc(6rem - 10px); top: -4rem; left: 5px; } @@ -194,7 +225,7 @@ button.reload-button.active { max-height: 1000px; padding: 8px; border: 1px solid #ddd; - top: 6px; + top: 5px; } button.reload-button:hover { color: #000; diff --git a/popup.html b/popup.html index 501cfdf..aa5a09d 100644 --- a/popup.html +++ b/popup.html @@ -11,8 +11,9 @@
-