diff --git a/content.css b/content.css new file mode 100644 index 00000000..670bc4d0 --- /dev/null +++ b/content.css @@ -0,0 +1,66 @@ +#sponsorSkipNotice { + min-height: 120px; + min-width: 400px; + background-color: rgba(153, 153, 153, 0.8); + position: absolute; + z-index: 1; +} + +#sponsorSkipMessage { + font-size: 18px; + color: #000000; + text-align: center; + margin-top: 10px; +} + +.sponsorSkipButton { + background-color:#44c767; + -moz-border-radius:28px; + -webkit-border-radius:28px; + border-radius:28px; + border:1px solid #18ab29; + display:inline-block; + cursor:pointer; + color:#ffffff; + font-family:Arial; + font-size:16px; + padding:8px 15px; + text-decoration:none; + text-shadow:0px 0px 0px #2f6627; + + margin-top: 5px; + margin-right: 15px; +} +.sponsorSkipButton:hover { + background-color:#5cbf2a; +} +.sponsorSkipButton:active { + position:relative; + top:1px; +} + +.sponsorSkipDontShowButton { + -moz-box-shadow:inset 0px 1px 0px 0px #cf866c; + -webkit-box-shadow:inset 0px 1px 0px 0px #cf866c; + box-shadow:inset 0px 1px 0px 0px #cf866c; + background-color:#d0451b; + -moz-border-radius:3px; + -webkit-border-radius:3px; + border-radius:3px; + border:1px solid #942911; + display:inline-block; + cursor:pointer; + color:#ffffff; + font-family:Arial; + font-size:13px; + padding:6px 24px; + text-decoration:none; + text-shadow:0px 1px 0px #854629; +} +.sponsorSkipDontShowButton:hover { + background-color:#bc3315; +} +.sponsorSkipDontShowButton:active { + position:relative; + top:1px; +} \ No newline at end of file diff --git a/content.js b/content.js index 0a37e502..b371cc49 100644 --- a/content.js +++ b/content.js @@ -132,49 +132,34 @@ function openSkipNotice(){ } var noticeElement = document.createElement("div"); - - noticeElement.id = 'sponsorSkipNotice' - noticeElement.style.minHeight = "100px"; - noticeElement.style.minWidth = "400px"; - noticeElement.style.backgroundColor = "rgba(153, 153, 153, 0.8)"; - noticeElement.style.fontSize = "24px"; - noticeElement.style.position = "absolute" - noticeElement.style.zIndex = "1"; + noticeElement.id = "sponsorSkipNotice"; - var noticeMessage = document.createElement("p"); + var noticeMessage = document.createElement("p"); + noticeMessage.id = "sponsorSkipMessage"; noticeMessage.innerText = "Hey, you just skipped a sponsor!"; - noticeMessage.style.fontSize = "18px"; - noticeMessage.style.color = "#000000"; - noticeMessage.style.textAlign = "center"; - noticeMessage.style.marginTop = "10px"; var buttonContainer = document.createElement("div"); buttonContainer.setAttribute("align", "center"); var goBackButton = document.createElement("button"); - goBackButton.innerText = "Go back"; - goBackButton.style.fontSize = "13px"; - goBackButton.style.color = "#000000"; - goBackButton.style.marginTop = "5px"; + goBackButton.innerText = "Go back"; + goBackButton.className = "sponsorSkipButton"; goBackButton.addEventListener("click", goBackToPreviousTime); var hideButton = document.createElement("button"); hideButton.innerText = "Hide"; - hideButton.style.fontSize = "13px"; - hideButton.style.color = "#000000"; - hideButton.style.marginTop = "5px"; + hideButton.className = "sponsorSkipButton"; hideButton.addEventListener("click", closeSkipNotice); var dontShowAgainButton = document.createElement("button"); dontShowAgainButton.innerText = "Don't Show This Again"; - dontShowAgainButton.style.fontSize = "13px"; - dontShowAgainButton.style.color = "#000000"; - dontShowAgainButton.style.marginTop = "5px"; + dontShowAgainButton.className = "sponsorSkipDontShowButton"; dontShowAgainButton.addEventListener("click", dontShowNoticeAgain); buttonContainer.appendChild(goBackButton); buttonContainer.appendChild(hideButton); buttonContainer.appendChild(document.createElement("br")); + buttonContainer.appendChild(document.createElement("br")); buttonContainer.appendChild(dontShowAgainButton); noticeElement.appendChild(noticeMessage); diff --git a/manifest.json b/manifest.json index 73259e2f..e576dd08 100644 --- a/manifest.json +++ b/manifest.json @@ -10,6 +10,9 @@ "js": [ "content-config.js", "content.js" + ], + "css": [ + "content.css" ] } ],