mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2025-12-31 11:56:40 +03:00
Changed popup look
This commit is contained in:
@@ -39,10 +39,8 @@ sub.popupElement {
|
|||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popupElement {
|
.logoText {
|
||||||
font-family: 'Source Sans Pro', sans-serif;
|
color: white;
|
||||||
|
|
||||||
color: black;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1.popupElement {
|
h1.popupElement {
|
||||||
@@ -52,16 +50,21 @@ h1.popupElement {
|
|||||||
|
|
||||||
.popupBody {
|
.popupBody {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
background-color: #ffd9d9;
|
background-color: #333;
|
||||||
padding: 0px 5px;
|
padding: 0px 5px;
|
||||||
|
|
||||||
|
font-family: 'Source Sans Pro', sans-serif;
|
||||||
|
|
||||||
|
color: #dddddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
.outerPopupBody {
|
.outerPopupBody {
|
||||||
|
background-color: #222626;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
.discreteLink.popupElement {
|
.discreteLink.popupElement {
|
||||||
color: black;
|
color: #dddddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recordingSubtitle.popupElement {
|
.recordingSubtitle.popupElement {
|
||||||
@@ -106,7 +109,7 @@ h1.popupElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.whitelistButton.popupElement {
|
.whitelistButton.popupElement {
|
||||||
background-color:#3acc3a;
|
background-color:#27a52d;
|
||||||
-moz-border-radius:28px;
|
-moz-border-radius:28px;
|
||||||
-webkit-border-radius:28px;
|
-webkit-border-radius:28px;
|
||||||
border-radius:28px;
|
border-radius:28px;
|
||||||
@@ -118,13 +121,15 @@ h1.popupElement {
|
|||||||
padding:8px 37px;
|
padding:8px 37px;
|
||||||
text-decoration:none;
|
text-decoration:none;
|
||||||
text-shadow:0px 0px 0px #27663c;
|
text-shadow:0px 0px 0px #27663c;
|
||||||
|
|
||||||
|
transition: 0.01s background-color;
|
||||||
}
|
}
|
||||||
.whitelistButton:hover.popupElement {
|
.whitelistButton:hover.popupElement {
|
||||||
background-color:#218b26;
|
background-color:#3acc3a;
|
||||||
}
|
}
|
||||||
.whitelistButton:focus.popupElement {
|
.whitelistButton:focus.popupElement {
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color:#218b26;
|
background-color:#3acc3a;
|
||||||
}
|
}
|
||||||
.whitelistButton:active.popupElement {
|
.whitelistButton:active.popupElement {
|
||||||
position:relative;
|
position:relative;
|
||||||
@@ -132,11 +137,11 @@ h1.popupElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.greenButton.popupElement {
|
.greenButton.popupElement {
|
||||||
background-color:#ec1c1c;
|
background-color:#cc1717;
|
||||||
-moz-border-radius:28px;
|
-moz-border-radius:28px;
|
||||||
-webkit-border-radius:28px;
|
-webkit-border-radius:28px;
|
||||||
border-radius:28px;
|
border-radius:28px;
|
||||||
border:1px solid #d31919;
|
border: none;
|
||||||
display:inline-block;
|
display:inline-block;
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
color:#ffffff;
|
color:#ffffff;
|
||||||
@@ -144,13 +149,15 @@ h1.popupElement {
|
|||||||
padding:8px 37px;
|
padding:8px 37px;
|
||||||
text-decoration:none;
|
text-decoration:none;
|
||||||
text-shadow:0px 0px 0px #662727;
|
text-shadow:0px 0px 0px #662727;
|
||||||
|
|
||||||
|
transition: 0.01s background-color;
|
||||||
}
|
}
|
||||||
.greenButton:hover.popupElement {
|
.greenButton:hover.popupElement {
|
||||||
background-color:#bf2a2a;
|
background-color:#ec1c1c;
|
||||||
}
|
}
|
||||||
.greenButton:focus.popupElement {
|
.greenButton:focus.popupElement {
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color:#bf2a2a;
|
background-color:#ec1c1c;
|
||||||
}
|
}
|
||||||
.greenButton:active.popupElement {
|
.greenButton:active.popupElement {
|
||||||
position:relative;
|
position:relative;
|
||||||
@@ -158,14 +165,11 @@ h1.popupElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.dangerButton.popupElement {
|
.dangerButton.popupElement {
|
||||||
-moz-box-shadow:inset 0px 1px 0px 0px #cf866c;
|
background-color:#bc3315;
|
||||||
-webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;
|
|
||||||
box-shadow:inset 0px 1px 0px 0px #cf866c;
|
|
||||||
background-color:#d0451b;
|
|
||||||
-moz-border-radius:3px;
|
-moz-border-radius:3px;
|
||||||
-webkit-border-radius:3px;
|
-webkit-border-radius:3px;
|
||||||
border-radius:3px;
|
border-radius:3px;
|
||||||
border:1px solid #942911;
|
border: none;
|
||||||
display:inline-block;
|
display:inline-block;
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
color:#ffffff;
|
color:#ffffff;
|
||||||
@@ -175,11 +179,11 @@ h1.popupElement {
|
|||||||
text-shadow:0px 1px 0px #854629;
|
text-shadow:0px 1px 0px #854629;
|
||||||
}
|
}
|
||||||
.dangerButton:hover.popupElement {
|
.dangerButton:hover.popupElement {
|
||||||
background-color:#bc3315;
|
background-color:#d0451b;
|
||||||
}
|
}
|
||||||
.dangerButton:focus.popupElement {
|
.dangerButton:focus.popupElement {
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color:#bc3315;
|
background-color:#d0451b;
|
||||||
}
|
}
|
||||||
.dangerButton:active.popupElement {
|
.dangerButton:active.popupElement {
|
||||||
position:relative;
|
position:relative;
|
||||||
@@ -187,14 +191,11 @@ h1.popupElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.warningButton.popupElement {
|
.warningButton.popupElement {
|
||||||
-moz-box-shadow:inset 0px 1px 0px 0px #cfbd6c;
|
background-color:#bc8215;
|
||||||
-webkit-box-shadow:inset 0px 1px 0px 0px #cfbd6c;
|
|
||||||
box-shadow:inset 0px 1px 0px 0px #cfbd6c;
|
|
||||||
background-color:#d0821b;
|
|
||||||
-moz-border-radius:3px;
|
-moz-border-radius:3px;
|
||||||
-webkit-border-radius:3px;
|
-webkit-border-radius:3px;
|
||||||
border-radius:3px;
|
border-radius:3px;
|
||||||
border:1px solid #948b11;
|
border: none;
|
||||||
display:inline-block;
|
display:inline-block;
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
color:#ffffff;
|
color:#ffffff;
|
||||||
@@ -204,11 +205,11 @@ h1.popupElement {
|
|||||||
text-shadow:0px 1px 0px #856829;
|
text-shadow:0px 1px 0px #856829;
|
||||||
}
|
}
|
||||||
.warningButton:hover.popupElement {
|
.warningButton:hover.popupElement {
|
||||||
background-color:#bc8215;
|
background-color:#d0821b;
|
||||||
}
|
}
|
||||||
.warningButton:focus.popupElement {
|
.warningButton:focus.popupElement {
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color:#bc8215;
|
background-color:#d0821b;
|
||||||
}
|
}
|
||||||
.warningButton:active.popupElement {
|
.warningButton:active.popupElement {
|
||||||
position:relative;
|
position:relative;
|
||||||
|
|||||||
@@ -5,10 +5,10 @@
|
|||||||
<link id="sponsorBlockStyleSheet" rel="stylesheet" type="text/css" href="popup.css"/>
|
<link id="sponsorBlockStyleSheet" rel="stylesheet" type="text/css" href="popup.css"/>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="popupBody outerPopupBody">
|
<body class="outerPopupBody">
|
||||||
<center>
|
<center>
|
||||||
<div id="app" class="popupBody sponsorBlockPageBody">
|
<div id="app" class="popupBody sponsorBlockPageBody">
|
||||||
<h1 class="popupElement">
|
<h1 class="popupElement logoText">
|
||||||
<img src="icons/IconSponsorBlocker256px.png" height="32px" id="sponsorBlockPopupLogo"/>
|
<img src="icons/IconSponsorBlocker256px.png" height="32px" id="sponsorBlockPopupLogo"/>
|
||||||
__MSG_Name__
|
__MSG_Name__
|
||||||
</h1>
|
</h1>
|
||||||
|
|||||||
Reference in New Issue
Block a user