mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2024-11-10 09:07:45 +01:00
Merge pull request #245 from jplsek/opt-html5
Set options and help page to use html5
This commit is contained in:
Ajay Ramachandran
GitHub
commit
21b2ad71b9
6 changed files with 64 additions and 80 deletions
|
|
@ -349,7 +349,7 @@
|
|||
"message": "Support Invidious"
|
||||
},
|
||||
"supportInvidiousDescription": {
|
||||
"message": "Invidious (invidio.us) is a third party YouTube client. To enable support, you must accept the extra permissions. This does NOT work in incongnito on chrome and other chromium variants."
|
||||
"message": "Invidious (invidio.us) is a third party YouTube client. To enable support, you must accept the extra permissions. This does NOT work in incongnito on Chrome and other Chromium variants."
|
||||
},
|
||||
"optionsInfo": {
|
||||
"message": "Enable Invidious support, disable autoskip, hide buttons and more."
|
||||
|
|
|
|||
|
|
@ -349,7 +349,7 @@
|
|||
"message": "Wesprzyj Invidious"
|
||||
},
|
||||
"supportInvidiousDescription": {
|
||||
"message": "Invidious (invidio.us) to nieoficjalny klient YouTube. Aby go wesprzeć musisz przyznać dodatkowe uprawnienia rozszerzeniowi. Ta opcja nie działa w incognito i innych wersjach chromium."
|
||||
"message": "Invidious (invidio.us) to nieoficjalny klient YouTube. Aby go wesprzeć musisz przyznać dodatkowe uprawnienia rozszerzeniowi. Ta opcja nie działa w incognito i innych wersjach Chromium."
|
||||
},
|
||||
"optionsInfo": {
|
||||
"message": "Wesprzyj Invidious, wyłącz auto przewijanie, ukryj guziki i więcej."
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<head>
|
||||
<title> SponsorBlock </title>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
|
|
@ -11,7 +14,7 @@
|
|||
SponsorBlock
|
||||
</div>
|
||||
|
||||
<center>
|
||||
<div class="container">
|
||||
|
||||
<p class="createdBy">Created By <a href="https://ajay.app">Ajay Ramachandran</a> <img src="https://ajay.app/newprofilepic.jpg" height="30" class="profilepiccircle"/></p>
|
||||
|
||||
|
|
@ -48,7 +51,7 @@
|
|||
Whenever you skip a video, you will get a notice report that submission. If the timing seems wrong, report it! You can also vote in the popup. The extension auto upvotes it if you don't report it, so make sure to report when necessary (this can be disabled in the options).
|
||||
</p>
|
||||
|
||||
<center><img height="120px" src="https://user-images.githubusercontent.com/12688112/63067735-5a638700-bede-11e9-8147-f321b57527ec.gif"></center>
|
||||
<div class="center"><img height="120px" src="https://user-images.githubusercontent.com/12688112/63067735-5a638700-bede-11e9-8147-f321b57527ec.gif"></div>
|
||||
|
||||
<h1>Submitting</h1>
|
||||
|
||||
|
|
@ -106,7 +109,7 @@
|
|||
Ask on Discord or make an Issue on GitHub. I am happy to hear suggestions or improvements you want. You may also contribute code or graphics if you would like.
|
||||
</p>
|
||||
|
||||
<h1>Where can I get the source code</h1>
|
||||
<h1>Where can I get the source code?</h1>
|
||||
|
||||
<h4 style="display: inline">Client:</h4>
|
||||
<!-- Github logo -->
|
||||
|
|
@ -116,7 +119,7 @@
|
|||
<!-- Github logo -->
|
||||
<a href="https://github.com/ajayyy/SponsorBlockServer"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16" height="58px" style="padding-left: 15px"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
|
||||
|
||||
<h1>Credit</h1>
|
||||
<h1>Credits</h1>
|
||||
|
||||
<p>The awesome <a href="https://github.com/omarroth/invidious/wiki/API">Invidious API</a> is used to grab the time the video was published.</p>
|
||||
|
||||
|
|
@ -124,6 +127,6 @@
|
|||
|
||||
<p>Some icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></p>
|
||||
|
||||
</center>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,16 @@
|
|||
|
||||
body {
|
||||
background-color: #333333;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 60%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.projectPreview {
|
||||
|
|
@ -12,24 +22,24 @@ body {
|
|||
|
||||
.projectPreviewImage {
|
||||
position: absolute;
|
||||
left: -90;
|
||||
width: 80;
|
||||
left: -90px;
|
||||
width: 80px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.projectPreviewImageLarge {
|
||||
position: absolute;
|
||||
left: -210;
|
||||
width: 200;
|
||||
left: -210px;
|
||||
width: 200px;
|
||||
top: 50%;
|
||||
transform: translateY(-20%);
|
||||
}
|
||||
|
||||
.projectPreviewImageLargeRight {
|
||||
position: absolute;
|
||||
right: -210;
|
||||
width: 200;
|
||||
right: -210px;
|
||||
width: 200px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
|
@ -47,37 +57,27 @@ body {
|
|||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
font-family: sans-serif;
|
||||
font-size: 50;
|
||||
font-size: 50px;
|
||||
color: #212121;
|
||||
|
||||
/* height: 100; */
|
||||
|
||||
padding: 20;
|
||||
padding: 20px;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
transition: font-size 1s;
|
||||
}
|
||||
|
||||
#title:hover {
|
||||
font-size: 60;
|
||||
|
||||
transition: font-size 1s;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-family: sans-serif;
|
||||
font-size: 40;
|
||||
font-size: 40px;
|
||||
color: #dad8d8;
|
||||
|
||||
padding-top: 10;
|
||||
padding-top: 10px;
|
||||
|
||||
transition: font-size 0.4s;
|
||||
}
|
||||
|
||||
.subtitle:hover {
|
||||
font-size: 45;
|
||||
font-size: 45px;
|
||||
|
||||
transition: font-size 0.4s;
|
||||
}
|
||||
|
|
@ -99,7 +99,7 @@ a {
|
|||
}
|
||||
|
||||
.link {
|
||||
padding: 20;
|
||||
padding: 20px;
|
||||
|
||||
height: 80px;
|
||||
|
||||
|
|
@ -113,13 +113,12 @@ a {
|
|||
}
|
||||
|
||||
#contact,.smalllink {
|
||||
font-family: sans-serif;
|
||||
font-size: 25;
|
||||
font-size: 25px;
|
||||
color: #e8e8e8;
|
||||
|
||||
text-align: center;
|
||||
|
||||
padding: 10;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#contact {
|
||||
|
|
@ -127,15 +126,11 @@ a {
|
|||
}
|
||||
|
||||
p,li,a {
|
||||
font-family: sans-serif;
|
||||
font-size: 20;
|
||||
font-size: 20px;
|
||||
color: #c4c4c4;
|
||||
|
||||
padding: 10;
|
||||
}
|
||||
|
||||
p,li,code,a {
|
||||
max-width: 60%;
|
||||
text-align: left;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
|
@ -147,7 +142,7 @@ p,li,code,a {
|
|||
|
||||
.projectPreviewImage {
|
||||
position: unset;
|
||||
width: 130;
|
||||
width: 130px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
transform: none;
|
||||
|
|
@ -165,20 +160,18 @@ img {
|
|||
}
|
||||
|
||||
#recentPostTitle {
|
||||
font-family: sans-serif;
|
||||
font-size: 30;
|
||||
font-size: 30px;
|
||||
color: #dad8d8;
|
||||
}
|
||||
|
||||
#recentPostDate {
|
||||
font-family: sans-serif;
|
||||
font-size: 15;
|
||||
font-size: 15px;
|
||||
color: #dad8d8;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-family: sans-serif;
|
||||
color: #dad8d8;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
svg {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* Options page CSS */
|
||||
body {
|
||||
font-family: Sans-Serif;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.center {
|
||||
|
|
@ -25,12 +25,12 @@ body {
|
|||
|
||||
.small-description {
|
||||
color: white;
|
||||
font-size: 13;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.medium-description {
|
||||
color: white;
|
||||
font-size: 15;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.option-text-box {
|
||||
|
|
@ -151,24 +151,24 @@ body {
|
|||
|
||||
.projectPreviewImage {
|
||||
position: absolute;
|
||||
left: -90;
|
||||
width: 80;
|
||||
left: -90px;
|
||||
width: 80px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.projectPreviewImageLarge {
|
||||
position: absolute;
|
||||
left: -210;
|
||||
width: 200;
|
||||
left: -210px;
|
||||
width: 200px;
|
||||
top: 50%;
|
||||
transform: translateY(-20%);
|
||||
}
|
||||
|
||||
.projectPreviewImageLargeRight {
|
||||
position: absolute;
|
||||
right: -210;
|
||||
width: 200;
|
||||
right: -210px;
|
||||
width: 200px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
|
@ -188,37 +188,27 @@ body {
|
|||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
font-family: sans-serif;
|
||||
font-size: 50;
|
||||
font-size: 50px;
|
||||
color: #212121;
|
||||
|
||||
/* height: 100; */
|
||||
|
||||
padding: 20;
|
||||
padding: 20px;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
transition: font-size 1s;
|
||||
}
|
||||
|
||||
#title:hover {
|
||||
font-size: 60;
|
||||
|
||||
transition: font-size 1s;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-family: sans-serif;
|
||||
font-size: 40;
|
||||
font-size: 40px;
|
||||
color: #dad8d8;
|
||||
|
||||
padding-top: 10;
|
||||
padding-top: 10px;
|
||||
|
||||
transition: font-size 0.4s;
|
||||
}
|
||||
|
||||
.subtitle:hover {
|
||||
font-size: 45;
|
||||
font-size: 45px;
|
||||
|
||||
transition: font-size 0.4s;
|
||||
}
|
||||
|
|
@ -240,7 +230,7 @@ a {
|
|||
}
|
||||
|
||||
.link {
|
||||
padding: 20;
|
||||
padding: 20px;
|
||||
|
||||
height: 80px;
|
||||
|
||||
|
|
@ -254,13 +244,12 @@ a {
|
|||
}
|
||||
|
||||
#contact,.smalllink {
|
||||
font-family: sans-serif;
|
||||
font-size: 25;
|
||||
font-size: 25px;
|
||||
color: #e8e8e8;
|
||||
|
||||
text-align: center;
|
||||
|
||||
padding: 10;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#contact {
|
||||
|
|
@ -268,11 +257,10 @@ a {
|
|||
}
|
||||
|
||||
p,li {
|
||||
font-family: sans-serif;
|
||||
font-size: 20;
|
||||
font-size: 20px;
|
||||
color: #c4c4c4;
|
||||
|
||||
padding: 10;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
p,li,code,a {
|
||||
|
|
@ -288,7 +276,7 @@ p,li,code,a {
|
|||
|
||||
.projectPreviewImage {
|
||||
position: unset;
|
||||
width: 130;
|
||||
width: 130px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
transform: none;
|
||||
|
|
@ -306,19 +294,16 @@ img {
|
|||
}
|
||||
|
||||
#recentPostTitle {
|
||||
font-family: sans-serif;
|
||||
font-size: 30;
|
||||
font-size: 30px;
|
||||
color: #dad8d8;
|
||||
}
|
||||
|
||||
#recentPostDate {
|
||||
font-family: sans-serif;
|
||||
font-size: 15;
|
||||
font-size: 15px;
|
||||
color: #dad8d8;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-family: sans-serif;
|
||||
color: #dad8d8;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<head>
|
||||
<title>Options - SponsorBlock</title>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="options.css" rel="stylesheet"/>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue