diff --git a/popup.css b/popup.css index 8479146..6d3c1e0 100644 --- a/popup.css +++ b/popup.css @@ -103,35 +103,58 @@ button.main-button.whitelist.active::after { .aux-button-container { display: flex; - flex-flow: column; border-top: 1px solid #ddd; flex: 1 1 auto; + padding: 0 8px; +} + +.aux-button-container button { + font-size: 1.25rem; + padding: 0; + flex: 1 1 auto; + font-family: Font Awesome, Inconsolata, sans-serif; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + min-width: 0; +} +.aux-button-container button::before { + padding: 4px 0 0 0; +} +.aux-button-container button:hover::before { + color: #000; +} +.aux-button-container button::after { + text-transform: uppercase; + color: #777; + font-size: 0.75rem; + padding: 4px 0 0 0; } /*==================*/ /*= OPTIONS BUTTON =*/ /*==================*/ -button.options-button { - font-size: 1.125rem; - padding: 10px; - color: #777; - width: 100%; - flex: 1 1 auto; - font-family: Font Awesome, Inconsolata, sans-serif; -} -button.options-button:hover { - color: #000; -} button.options-button::before { content: "\F1DE"; - font-family: Font Awesome; - font-size: 0.875em; - margin: 0 6px 0 0; + color: #777; } button.options-button::after { content: "Options"; - margin: 0 3px 0 0; +} + +/*===============*/ +/*= HELP BUTTON =*/ +/*===============*/ + +button.help-button::before { + content: "\F128"; + font-weight: 900; + color: #999; +} +button.help-button::after { + content: "Help"; } /********/ diff --git a/popup.html b/popup.html index aa5a09d..f4eb5f1 100644 --- a/popup.html +++ b/popup.html @@ -17,6 +17,7 @@