diff --git a/README.md b/README.md index 290296e4..70756792 100644 --- a/README.md +++ b/README.md @@ -25,4 +25,8 @@ It will be on the chrome webstore soon once I get some more UI features in, such # Firefox extension -None at the moment \ No newline at end of file +None at the moment + +# Credit + +Some i made by Gregor Cresnar from www.flaticon.com and are licensed by CC 3.0 BY \ No newline at end of file diff --git a/content.css b/content.css index 89cfcdea..10032d41 100644 --- a/content.css +++ b/content.css @@ -12,12 +12,13 @@ } #sponsorSkipNotice { - min-height: 125px; + min-height: 165px; min-width: 400px; background-color: rgba(255, 217, 217, 0.8); position: absolute; z-index: 1; border: 3px solid rgba(0, 0, 0, 0.8); + margin-top: -50px; } #sponsorSkipMessage { @@ -26,12 +27,23 @@ text-align: center; margin-top: 10px; font-weight: bold; + margin-top: 4px; } #sponsorSkipInfo { font-size: 10px; color: #000000; - text-align: center; + text-align: center; + margin-top: 0px; +} + +.voteButton { + height: 32px; + margin-right: 15px; + cursor: pointer; +} +.voteButton:hover { + filter: brightness(80%); } .sponsorSkipButton { @@ -54,6 +66,12 @@ .sponsorSkipButton:hover { background-color:#bf2a2a; } + +.sponsorSkipButton:focus { + outline: none; + background-color:#bf2a2a; +} + .sponsorSkipButton:active { position:relative; top:1px; @@ -79,6 +97,12 @@ .sponsorSkipDontShowButton:hover { background-color:#bc3315; } + +.sponsorSkipDontShowButton:focus { + outline: none; + background-color:#bc3315; +} + .sponsorSkipDontShowButton:active { position:relative; top:1px; diff --git a/content.js b/content.js index f5b82b2c..08fc07e3 100644 --- a/content.js +++ b/content.js @@ -250,26 +250,39 @@ function openSkipNotice(){ let noticeInfo = document.createElement("p"); noticeInfo.id = "sponsorSkipInfo"; noticeInfo.className = "sponsorSkipObject"; - noticeInfo.innerText = "This message will disapear in 7 seconds"; + noticeInfo.innerText = "This message will disapear in 7 seconds"; + + //thumbs up and down buttons + let voteButtonsContainer = document.createElement("div"); + voteButtonsContainer.setAttribute("align", "center"); + + let upvoteButton = document.createElement("img"); + upvoteButton.className = "sponsorSkipObject voteButton"; + upvoteButton.src = chrome.extension.getURL("icons/upvote.png"); + + let downvoteButton = document.createElement("img"); + downvoteButton.className = "sponsorSkipObject voteButton"; + downvoteButton.src = chrome.extension.getURL("icons/downvote.png"); + + //add thumbs up and down buttons to the container + voteButtonsContainer.appendChild(upvoteButton); + voteButtonsContainer.appendChild(downvoteButton); let buttonContainer = document.createElement("div"); buttonContainer.setAttribute("align", "center"); let goBackButton = document.createElement("button"); goBackButton.innerText = "Go back"; - goBackButton.className = "sponsorSkipObject"; goBackButton.className = "sponsorSkipButton"; goBackButton.addEventListener("click", goBackToPreviousTime); let hideButton = document.createElement("button"); hideButton.innerText = "Dismiss"; - hideButton.className = "sponsorSkipObject"; hideButton.className = "sponsorSkipButton"; hideButton.addEventListener("click", closeSkipNotice); let dontShowAgainButton = document.createElement("button"); dontShowAgainButton.innerText = "Don't Show This Again"; - dontShowAgainButton.className = "sponsorSkipObject"; dontShowAgainButton.className = "sponsorSkipDontShowButton"; dontShowAgainButton.addEventListener("click", dontShowNoticeAgain); @@ -282,6 +295,7 @@ function openSkipNotice(){ noticeElement.appendChild(logoElement); noticeElement.appendChild(noticeMessage); noticeElement.appendChild(noticeInfo); + noticeElement.appendChild(voteButtonsContainer); noticeElement.appendChild(buttonContainer); let referenceNode = document.getElementById("info"); diff --git a/icons/downvote.png b/icons/downvote.png new file mode 100644 index 00000000..1af50e78 Binary files /dev/null and b/icons/downvote.png differ diff --git a/icons/upvote.png b/icons/upvote.png new file mode 100644 index 00000000..56eb5c5b Binary files /dev/null and b/icons/upvote.png differ diff --git a/icons/upvote.svg b/icons/upvote.svg new file mode 100644 index 00000000..15efeb81 --- /dev/null +++ b/icons/upvote.svg @@ -0,0 +1,98 @@ + + + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/manifest.json b/manifest.json index 5c8a5325..c742d16d 100644 --- a/manifest.json +++ b/manifest.json @@ -21,7 +21,9 @@ "icons/LogoSponsorBlocker256px.png", "icons/IconSponsorBlocker256px.png", "icons/PlayerStartIconSponsorBlocker256px.png", - "icons/PlayerStopIconSponsorBlocker256px.png" + "icons/PlayerStopIconSponsorBlocker256px.png", + "icons/upvote.png", + "icons/downvote.png" ], "permissions": [ "tabs", diff --git a/popup.css b/popup.css index 9c59f74f..64ae0a17 100644 --- a/popup.css +++ b/popup.css @@ -29,6 +29,10 @@ body { .greenButton:hover { background-color:#bf2a2a; } +.greenButton:focus { + outline: none; + background-color:#bf2a2a; +} .greenButton:active { position:relative; top:1px; @@ -54,6 +58,10 @@ body { .dangerButton:hover { background-color:#bc3315; } +.dangerButton:focus { + outline: none; + background-color:#bc3315; +} .dangerButton:active { position:relative; top:1px; @@ -79,6 +87,10 @@ body { .warningButton:hover { background-color:#bc8215; } +.warningButton:focus { + outline: none; + background-color:#bc8215; +} .warningButton:active { position:relative; top:1px; @@ -100,6 +112,10 @@ body { .smallButton:hover { background-color:#fa9806; } +.smallButton:focus { + outline: none; + background-color:#fa9806; +} .smallButton:active { position:relative; top:1px;