287 lines
11 KiB
HTML
287 lines
11 KiB
HTML
<html>
|
|
<head>
|
|
<title></title>
|
|
<meta charset="utf-8">
|
|
<link rel='stylesheet' type='text/css' href='../css/font/overpass.css'>
|
|
<link rel='stylesheet' type='text/css' href='../css/font/overpass-mono.css'>
|
|
<style>
|
|
|
|
html, body {
|
|
width: 780px !important;
|
|
max-width: 800px !important;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
/* width: 100%; */
|
|
color: #f8f8f8;
|
|
background-color: #1f1f1f;
|
|
font-family: "overpass";
|
|
font-size: 1em;
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
small{
|
|
font-size: 0.75em;
|
|
font-weight: 200;
|
|
}
|
|
|
|
.small {
|
|
font-size: 0.85em;
|
|
}
|
|
.darker {
|
|
color: #666;
|
|
}
|
|
|
|
.label{
|
|
font-size: 1.1em;
|
|
font-weight: 600;
|
|
color: #ffe;
|
|
}
|
|
|
|
.smallcaps{
|
|
font-variant: small-caps;
|
|
}
|
|
|
|
.selected{
|
|
color: #ffddaa;
|
|
background-color: #433221;
|
|
}
|
|
.disabled {
|
|
color: #666;
|
|
}
|
|
.header {
|
|
background-color: #7f1416;
|
|
color: #fff;
|
|
margin: 0px;
|
|
margin-top: 0px;
|
|
padding-top: 8px;
|
|
padding-left: 15px;
|
|
padding-bottom: 1px;
|
|
font-size: 2.7em;
|
|
}
|
|
|
|
.menu-item-inline-desc{
|
|
font-size: 0.60em;
|
|
font-weight: 300;
|
|
font-variant: normal;
|
|
}
|
|
|
|
.left-side {
|
|
display: inline-block;
|
|
width: 39%;
|
|
float: left;
|
|
font-size: 1.6em;
|
|
}
|
|
|
|
.right-side {
|
|
display: inline-block;
|
|
width: 60%;
|
|
float: right;
|
|
}
|
|
|
|
.menu-item {
|
|
padding-left: 15px;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
font-variant: small-caps;
|
|
}
|
|
|
|
.suboption {
|
|
display: block;
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
padding-top: 5px;
|
|
padding-bottom: 20px;
|
|
min-height: 250px;
|
|
}
|
|
|
|
.button {
|
|
display: inline-block;
|
|
padding-top: 8px;
|
|
padding-bottom: 3px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
border: 1px solid #444;
|
|
margin-top: 3px;
|
|
margin-bottom: 3px;
|
|
color: #dbb;
|
|
text-align: center;
|
|
}
|
|
.w24 {
|
|
width: 100px;
|
|
}
|
|
.warning {
|
|
/*background-*/color: #d6ba4a;
|
|
/* color: #000; */
|
|
padding-left: 35px;
|
|
float: right;
|
|
}
|
|
.warning::before {
|
|
content: "⚠ ";
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
font-size: 2.5em;
|
|
margin-left: -35px;
|
|
padding-right: 10px;
|
|
/* top: 0px; */
|
|
float: left;
|
|
}
|
|
|
|
.button:hover {
|
|
color: #fff;
|
|
background-color: #433221;
|
|
}
|
|
|
|
.row {
|
|
display: block;
|
|
margin-top: 20px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.button-row {
|
|
display: block;
|
|
margin-top: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
#no-videos-display {
|
|
height: 100%;
|
|
padding-top: 50px;
|
|
/* text-align: center; */
|
|
}
|
|
.center{
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
U<span class="smallcaps">ltrawidify</span>: <small>Quick settings</small>
|
|
</div>
|
|
<div class="left-side">
|
|
<div id="_menu_this_site" class="menu-item _menu_this_site">
|
|
Settings for this site
|
|
</div>
|
|
<div id="_menu_autoar" class="menu-item _menu_autoar">
|
|
Automatic aspect ratio detection (auto-ar)
|
|
</div>
|
|
<div id="_menu_aspectratio" class="menu-item selected _menu_aspectratio">
|
|
Letterbox removal and alignment
|
|
</div>
|
|
<div id="_menu_csshacks" class="menu-item disabled hidden _menu_hacks">
|
|
CSS hacks for this site
|
|
</div>
|
|
<div id="_menu_about" class="menu-item _menu_about">
|
|
About Ultrawidify<span class="menu-item-inline-desc"><br/>See for bug reports</span>
|
|
</div>
|
|
</div>
|
|
<div class="right-side">
|
|
<div id="script-not-running-warning" class="warning">If you see this line, then your browser didn't start the popup script yet. This is a problem caused by the browser. Please wait a few seconds.</div>
|
|
|
|
<div id="extension-mode" class="suboption hidden">
|
|
<p>How should extension work in general?<br/><small>NOTE: settings will be applied when page is reloaded.</small></p>
|
|
|
|
<form action="">
|
|
<input type="radio" name="mode" value="white"> Enable everywhere except blacklist<br/>
|
|
<input type="radio" name="mode" value="black"> Enable only on whitelisted sites<br/>
|
|
<input type="radio" name="mode" value="block"> Disable extension on all sites
|
|
</form>
|
|
|
|
<p>How should extension work on this site?<br><small class="important">NOTE: this doesn't apply to embedded videos!<br/>NOTE: settings will be applied when page is reloaded.</small></p>
|
|
<form action="">
|
|
<input type="radio" name="mode" value="default"> Follow global rules<br/>
|
|
<input type="radio" name="mode" value="black"> Always block (blacklist)<br/>
|
|
<input type="radio" name="mode" value="white"> Always allow (whitelist)
|
|
</form>
|
|
</div>
|
|
|
|
<div id="settings-for-current-site" class="suboption hidden">
|
|
<!-- <p class="current-site-status" id="current-site-blacklisted">This site is currently blacklisted.</p> -->
|
|
<!-- <p class="current-site-status" id="current-site-whitelist-only">Extension is set to only work on sites that have been whitelisted.</p> -->
|
|
<p>Allow this extension to run on this site? <small><br/>NOTE: changes take effect after reload!</small></p>
|
|
<form action="" name="extensionEnabledOnCurrentSite">
|
|
<input type="radio" class="extensionEnabledOnCurrentSite" name="mode" id="extensionEnabledCurrentSite_followGlobal" value="follow-global" > Follow default rules (currently: <span id="current-site-status-global-status"></span>)<br/>
|
|
<input type="radio" class="extensionEnabledOnCurrentSite" name="mode" id="extensionEnabledCurrentSite_whitelisted" value="whitelisted" > Allow (whitelist this site) <br/>
|
|
<input type="radio" class="extensionEnabledOnCurrentSite" name="mode" id="extensionEnabledCurrentSite_blacklisted" value="blacklisted" > Deny (blacklist this site)<br/>
|
|
</form>
|
|
<small>NOTE: this settings <b>don't</b> apply to videos embedded from other sites. This option takes effect after page reload.</small>
|
|
|
|
</div>
|
|
|
|
<div id="autoar-basic-settings" class="suboption hidden">
|
|
<!-- <div class="warning">
|
|
<p>Due to technical reasons, the check frequency has been temporarily-ish decreased to 1 check per second.</p><small><p>Raising that number back to 30 will make sure the extension corrects aspect ratio as soon as change is detected. Doing so will also raise RAM usage to 30-500 MB if you opened your browser 5 seconds ago, north of 1 GB (<i>way</i> north) if your browser has been opened for a while.</p><p>Keeping check frequency low will make the problem go away (mostly), but aspect ratio corrections will be delayed a bit.</p></small>
|
|
</div> -->
|
|
|
|
<p><input type="checkbox" id="_checkbox_autoArEnabled" class="_autoAr_enabled _autoAr"> Enable automatic aspect ratio detection?</p>
|
|
<p>Checks per second: <input id="_input_autoAr_frequency" class="_autoAr_frequency _autoAr" type="number" min="1" max="999"><span class="button _save_autoAr_frequency _autoAr">Save</div></p>
|
|
<div class="warning"><p><small>NOTE: increasing the frequency can result in _very_ high RAM usage and slow performance.</small></p></div>
|
|
|
|
</div>
|
|
|
|
<div id="aspect-ratio-settings" class="suboption hidden">
|
|
|
|
<div id="no-videos-warning" class="warning">No videos were detected on this page. The buttons may not work at all. Check that this site is not blacklisted and reload the page.</div>
|
|
<div class="row">
|
|
<span class="label">Cropping mode:</span>
|
|
<div class="button-row">
|
|
<a class="button _changeAr _ar_auto w24">Auto-detect<br/><span id="_b_changeAr_autoar_key" class="smallcaps small darker"></span></a>
|
|
<a class="button _changeAr _ar_reset w24">Reset<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker"></span></a>
|
|
<a class="button _changeAr _ar_219 w24">21:9<br/><span id="_b_changeAr_219_key" class="smallcaps small darker"></span></a>
|
|
<a class="button _changeAr _ar_189 w24">2:1 (18:9)<br/><span id="_b_changeAr_189_key" class="smallcaps small darker"></span></a>
|
|
<a class="button _changeAr _ar_169 w24">16:9<br/><span id="_b_changeAr_169_key" class="smallcaps small darker"></span></a>
|
|
</div>
|
|
</div>
|
|
<!--<div class="row">
|
|
<span class="label">Automatic aspect ratio autodetection:</span>
|
|
<div class="button-row">
|
|
<a id="_autoar_disable_tmp" class="button _autoar _autoar_temp-disable">Temporarily disable</a>
|
|
<a id="_autoar_enable_tmp" class="button _autoar _ar_auto hidden">Re-enable</a>
|
|
<a id="_autoar_disable" class="button _autoar _autoar_disable">Disable</a>
|
|
<a id="_autoar_enable" class="button _autoar _autoar_enable hidden">Enable</a>
|
|
</div>
|
|
</div>-->
|
|
<div class="row">
|
|
<span class="label">Video alignment:</span>
|
|
<div class="button-row">
|
|
<a id="_align_left" class="button _align _align_left">left</a>
|
|
<a id="_align_center" class="button _align _align_center">center</a>
|
|
<a id="_align_right" class="button _align _align_right">right</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="css-hacks-settings" class="suboption hidden">
|
|
<p>If zoomed in video doesn't align properly, try enabling or disabling certain CSS rules below:</p>
|
|
</div>
|
|
|
|
<div id="panel-about" class="suboption hidden">
|
|
<div class="row">
|
|
<span class="label">Ultrawidify version:</span><br/> <span id="uw-version"></span>
|
|
</div>
|
|
<div class="row">
|
|
<span class="label">Having an issue?</span><br/> Report <strike>undocumented features</strike> bugs <a href="https://github.com/xternal7/ultrawidify/issues">here</a>.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- load all scripts. ordering is important! -->
|
|
|
|
<script src="../../js/dep/jquery-3.1.1.js" ></script>
|
|
<script src="../../js/dep/chrome/chrome-extension-async.js" ></script>
|
|
|
|
<script src="../../js/conf/Debug.js"></script>
|
|
|
|
<script src="../../js/lib/BrowserDetect.js"></script>
|
|
<script src="../../js/lib/StorageManager.js"></script>
|
|
<script src="../../js/lib/Comms.js"></script>
|
|
|
|
<script src="../../js/conf/Settings.js"></script>
|
|
|
|
<script src="./js/popup.js"></script>
|
|
</body>
|
|
</html>
|
|
|
|
|