213 lines
6.4 KiB
HTML
213 lines
6.4 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;
|
|
}
|
|
|
|
.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-top: 5px;
|
|
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;
|
|
}
|
|
|
|
.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: 120px;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
U<span class="smallcaps">ltrawidify</span>: <small>Quick settings</small>
|
|
</div>
|
|
<div class="left-side">
|
|
<div id="_menu_general" class="menu-item disabled _menu_general">
|
|
General settings
|
|
</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">
|
|
No videos have been found on this page.<br/><small>NOTE: iframes are <b>not</b> detected by this popup. You need a keyboard / to enable automatic aspect ratio detection to fix aspect ratio in embedded players.<br/>Embedded players must also be in full screen.</small>
|
|
</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="aspect-ratio-settings" class="suboption hidden">
|
|
<div class="row">
|
|
Force aspect ratio:<br/>
|
|
<div class="button-row">
|
|
<a class="button _changeAr _ar_auto">Auto-detect</a>
|
|
<a class="button _changeAr _ar_reset">Reset</a>
|
|
<a class="button _changeAr _ar_219">21:9</a>
|
|
<a class="button _changeAr _ar_189">2:1 (18:9)</a>
|
|
<a class="button _changeAr _ar_169">16:9</a>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
Automatic aspect ratio autodetection:
|
|
<div class="button-row">
|
|
<a id="ard_temporary_disable" class="button _autoar _autoar_temp-disable">Temporarily disable</a><br/>
|
|
<a id="ard_disable" class="button _autoar _autoar_disable">Disable</a>
|
|
<a id="ard_enable" class="button _autoar _autoar_enable hidden">Enable</a>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
Video alignment:
|
|
<div class="button-row">
|
|
<a class="button _align _align_left">left</a>
|
|
<a class="button _align _align_center">center</a>
|
|
<a 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">
|
|
Ultrawidify version: <span id="uw-version"></span>
|
|
</div>
|
|
<div class="row">
|
|
Having an issue? 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/conf/Debug.js"></script>
|
|
|
|
<script src="../../js/lib/BrowserDetect.js"></script>
|
|
<script src="../../js/lib/StorageManager.js"></script>
|
|
|
|
<!-- the following scripts aren't included yet. if they're needed, they need to be added in this order -->
|
|
<!-- "js/conf/Debug.js",
|
|
"js/conf/Settings.js",
|
|
"js/conf/SitesConf.js",
|
|
"js/conf/Status.js",-->
|
|
|
|
<script src="../../js/conf/Settings.js"></script>
|
|
|
|
<script src="./js/popup.js"></script>
|
|
</body>
|
|
</html>
|
|
|
|
|