| @@ -101,6 +101,11 @@ button.main-button.whitelist.active::after { | |||
| flex-flow: column; | |||
| border-top: 1px solid #ddd; | |||
| } | |||
| /*==================*/ | |||
| /*= OPTIONS BUTTON =*/ | |||
| /*==================*/ | |||
| button.options-button { | |||
| font-size: 1.125rem; | |||
| padding: 10px; | |||
| @@ -130,7 +135,46 @@ button.options-button::after { | |||
| .misc { | |||
| height: 4rem; | |||
| position: relative; | |||
| display: flex; | |||
| } | |||
| .misc > * { | |||
| flex: 1 1 auto; | |||
| } | |||
| /*================*/ | |||
| /*= 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"; | |||
| } | |||
| .mode-display.whitelist::after { | |||
| content: "Whitelist"; | |||
| } | |||
| /*=================*/ | |||
| /*= RELOAD BUTTON =*/ | |||
| /*=================*/ | |||
| button.reload-button { | |||
| background-color: #ffd; | |||
| margin: 4px; | |||
| @@ -9,6 +9,7 @@ | |||
| <button type='button' class='main-button'></button> | |||
| </div> | |||
| <div class='misc'> | |||
| <span class='mode-display'></span> | |||
| <button type='button' class='reload-button'></button> | |||
| </div> | |||
| <div class='aux-button-container'> | |||
| @@ -97,6 +97,7 @@ function updateState(result) { | |||
| function updateUIState() { | |||
| let button = document.querySelector("button.main-button"); | |||
| let modeDisplay = document.querySelector(".mode-display"); | |||
| if (ASK.mode == "blacklist") { | |||
| if (ASK.pageMatched && !ASK.pageExcluded) { | |||
| button.classList.toggle("active", true); | |||
| @@ -104,6 +105,7 @@ function updateUIState() { | |||
| button.classList.toggle("active", false); | |||
| } | |||
| button.classList.toggle("whitelist", false); | |||
| modeDisplay.classList.toggle("whitelist", false); | |||
| } else { | |||
| if (!ASK.pageExcluded) { | |||
| button.classList.toggle("active", false); | |||
| @@ -111,6 +113,7 @@ function updateUIState() { | |||
| button.classList.toggle("active", true); | |||
| } | |||
| button.classList.toggle("whitelist", true); | |||
| modeDisplay.classList.toggle("whitelist", true); | |||
| } | |||
| } | |||