254 lines
8.7 KiB
HTML
254 lines
8.7 KiB
HTML
<html>
|
|
<head>
|
|
<title></title>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
html, body {
|
|
width: 780px !important;
|
|
max-width: 800px !important;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
/* width: 100%; */
|
|
color: #f8f8f8;
|
|
background-color: #1f1f1f;
|
|
font-family: "Overpass";
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.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_aspectratio" class="menu-item selected _menu_aspectratio">
|
|
Aspect ratio 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="no-videos-display" class="suboption">
|
|
<p class="label center">No videos have been found on this page.</p><p>If there <i>is</i> a video on this page, then you're seeing this message for one of these reasons:</p>
|
|
<ul><li>Page hasn't finished loading<small><br/><span class="smallcaps">Note</span>: webextensions only start working when page is fully loaded.</small></li>
|
|
<li>The video is embedded / in an iframe.<small><br/>This is a known issue/limitation. Use keyboard shortcuts to correct aspect ratio.</small></li>
|
|
<li>Hamster Rajko is on strike.<small><br/>(Close this popup and reopen in a few seconds)</small></li></ul>
|
|
<p><u>Keyboard shortcuts:</u><br/>* <b>A</b> - attempt automatic detection<br/>* <b>W</b> - fit to width<br/>* <b>E</b> - fit to height<br/>* <b>R</b> - reset/stop automatic detection<br/><br/>Force aspect ratio:<br/>* <b>S</b>: 16:9<br/>* <b>D</b>: 21:9<br/>* <b>X</b>: 2:1</p>
|
|
</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>Allow this extension to run on this site?</p>
|
|
<form action="" name="extensionEnabledOnCurrentSite">
|
|
<input type="radio" class="extensionEnabledOnCurrentSite" name="mode" value="default" > Follow global rules<br/>
|
|
<input type="radio" class="extensionEnabledOnCurrentSite" name="mode" value="whitelist" > Always (whitelist)<br/>
|
|
<input type="radio" class="extensionEnabledOnCurrentSite" name="mode" value="blacklist" > Never (blacklist)<br/>
|
|
</form>
|
|
<small>NOTE: this settings <b>don't</b> apply to videos embedded from other sites.</small>
|
|
|
|
</div>
|
|
|
|
<div id="aspect-ratio-settings" class="suboption hidden">
|
|
<div class="row">
|
|
<span class="label">Force aspect ratio:</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>
|
|
|
|
|