3 ändrade filer med 68 tillägg och 20 borttagningar
+ 48
- 13
popup.css
Visa fil
| @@ -25,11 +25,12 @@ button:focus { | |||
| button::selection { | |||
| background-color: transparent; | |||
| } | |||
| #main-button-container { | |||
| .main-button-container { | |||
| display: flex; | |||
| flex-flow: column; | |||
| border-bottom: 1px solid #ddd; | |||
| } | |||
| #main-button-container button { | |||
| button.main-button { | |||
| padding: 10px; | |||
| font-size: 6rem; | |||
| display: flex; | |||
| @@ -40,25 +41,25 @@ button::selection { | |||
| color: #ccc; | |||
| font-family: Font Awesome; | |||
| } | |||
| #main-button-container button.active { | |||
| button.main-button.active { | |||
| color: #000; | |||
| } | |||
| #main-button-container button:hover { | |||
| button.main-button:hover { | |||
| text-shadow: | |||
| 0 0 1px #fff, | |||
| 0 0 3px #fff, | |||
| 0 0 5px #fff; | |||
| } | |||
| #main-button-container button:hover { | |||
| button.main-button:hover { | |||
| color: #999; | |||
| } | |||
| #main-button-container button::before { | |||
| button.main-button::before { | |||
| content: "\F08D"; | |||
| font-weight: 900; | |||
| position: relative; | |||
| top: 3px; | |||
| } | |||
| #main-button-container button::after { | |||
| button.main-button::after { | |||
| content: "\F05E"; | |||
| position: absolute; | |||
| font-weight: 300; | |||
| @@ -66,30 +67,64 @@ button::selection { | |||
| opacity: 0.0; | |||
| transform: scaleX(-1) scale(1.5); | |||
| } | |||
| #main-button-container button.active::after { | |||
| button.main-button.active::after { | |||
| opacity: 1.0; | |||
| } | |||
| #aux-button-container { | |||
| .aux-button-container { | |||
| display: flex; | |||
| flex-flow: column; | |||
| border-top: 1px solid #ddd; | |||
| } | |||
| .options-button { | |||
| button.options-button { | |||
| font-size: 1.125rem; | |||
| padding: 10px; | |||
| color: #777; | |||
| width: 100%; | |||
| height: 3rem; | |||
| font-family: Font Awesome, Inconsolata, sans-serif; | |||
| } | |||
| .options-button:hover { | |||
| button.options-button:hover { | |||
| color: #000; | |||
| } | |||
| .options-button::before { | |||
| button.options-button::before { | |||
| content: "\F1DE"; | |||
| font-family: Font Awesome; | |||
| font-size: 0.875em; | |||
| margin: 0 6px 0 0; | |||
| } | |||
| .options-button::after { | |||
| button.options-button::after { | |||
| content: "Options"; | |||
| margin: 0 3px 0 0; | |||
| } | |||
| button.reload-button { | |||
| background-color: #ffd; | |||
| margin: 4px; | |||
| border-radius: 6px; | |||
| color: #777; | |||
| max-height: 0; | |||
| padding: 0; | |||
| overflow: hidden; | |||
| position: absolute; | |||
| width: calc(100% - 8px); | |||
| top: -4rem; | |||
| } | |||
| button.reload-button.active { | |||
| max-height: 1000px; | |||
| padding: 8px; | |||
| border: 1px solid #ddd; | |||
| top: 1px; | |||
| } | |||
| button.reload-button:hover { | |||
| color: #000; | |||
| } | |||
| button.reload-button::before { | |||
| content: "\F2F1"; | |||
| font-family: Font Awesome; | |||
| font-size: 2rem; | |||
| font-weight: 900; | |||
| } | |||
| .misc { | |||
| height: 4rem; | |||
| position: relative; | |||
| } | |||
+ 6
- 3
popup.html
Visa fil
| @@ -5,10 +5,13 @@ | |||
| <link rel='stylesheet' type='text/css' href='fonts.css' /> | |||
| </head> | |||
| <body> | |||
| <div id='main-button-container'> | |||
| <button type='button'></button> | |||
| <div class='main-button-container'> | |||
| <button type='button' class='main-button'></button> | |||
| </div> | |||
| <div id='aux-button-container'> | |||
| <div class='misc'> | |||
| <button type='button' class='reload-button'></button> | |||
| </div> | |||
| <div class='aux-button-container'> | |||
| <button type='button' class='options-button'></button> | |||
| </div> | |||
| </body> | |||
+ 14
- 4
popup.js
Visa fil
| @@ -90,7 +90,7 @@ function updateState(result) { | |||
| } | |||
| function updateUIState() { | |||
| let button = document.querySelector("#main-button-container button"); | |||
| let button = document.querySelector("button.main-button"); | |||
| if (ASK.mode == "blacklist" && ASK.pageMatched && !ASK.pageExcluded) { | |||
| button.classList.toggle("active", true); | |||
| // button.innerHTML = "X"; | |||
| @@ -121,7 +121,7 @@ function initialize() { | |||
| }); | |||
| }); | |||
| document.querySelector("#main-button-container button").addActivateEvent((event) => { | |||
| document.querySelector("button.main-button").addActivateEvent((event) => { | |||
| toggleState(); | |||
| let matchingPatterns = ASK.matchingPatterns.join("\n"); | |||
| @@ -133,15 +133,25 @@ function initialize() { | |||
| "mode": mode | |||
| }, () => { | |||
| updateUIState(); | |||
| if (ASK.pageMatched && !ASK.pageExcluded) | |||
| let reloadButton = document.querySelector("button.reload-button"); | |||
| if (ASK.pageMatched && !ASK.pageExcluded) { | |||
| chrome.tabs.executeScript(null, { code: 'killSticky()' }); | |||
| reloadButton.classList.toggle("active", false); | |||
| } else { | |||
| reloadButton.classList.toggle("active", true); | |||
| } | |||
| }); | |||
| }); | |||
| document.querySelector("#aux-button-container button").addActivateEvent((event) => { | |||
| document.querySelector("button.options-button").addActivateEvent(() => { | |||
| chrome.runtime.openOptionsPage(null); | |||
| }); | |||
| document.querySelector("button.reload-button").addActivateEvent(() => { | |||
| chrome.tabs.update(null, { url: ASK.activeTabLocation }); | |||
| window.close(); | |||
| }); | |||
| } | |||
| initialize(); | |||
Laddar…