2017-11-13 23:34:24 +01:00
< html >
< head >
< title > < / title >
< meta charset = "utf-8" >
2018-03-14 21:43:58 +01:00
< link rel = 'stylesheet' type = 'text/css' href = '../css/font/overpass.css' >
< link rel = 'stylesheet' type = 'text/css' href = '../css/font/overpass-mono.css' >
2017-11-13 23:34:24 +01:00
< style >
2018-03-14 21:43:58 +01:00
2017-11-13 23:34:24 +01:00
html, body {
2017-12-02 21:09:08 +01:00
width: 780px !important;
2017-12-30 02:58:24 +01:00
max-width: 800px !important;
2017-12-02 21:09:08 +01:00
padding: 0px;
margin: 0px;
/* width: 100%; */
2017-12-30 02:58:24 +01:00
color: #f8f8f8;
2017-11-13 23:34:24 +01:00
background-color: #1f1f1f;
2018-03-14 21:45:53 +01:00
font-family: "overpass";
2018-03-10 11:11:44 +01:00
font-size: 1em;
2017-11-13 23:34:24 +01:00
}
2017-12-02 21:09:08 +01:00
.hidden {
display: none !important;
2017-11-13 23:34:24 +01:00
}
small{
font-size: 0.75em;
font-weight: 200;
}
2018-01-02 03:36:29 +01:00
.small {
font-size: 0.85em;
}
.darker {
color: #666;
}
2017-12-30 18:36:08 +01:00
.label{
font-size: 1.1em;
font-weight: 600;
color: #ffe;
}
2017-11-13 23:34:24 +01:00
.smallcaps{
font-variant: small-caps;
}
2017-12-02 21:09:08 +01:00
.selected{
2017-12-30 02:58:24 +01:00
color: #ffddaa;
background-color: #433221;
}
.disabled {
color: #666;
2017-12-02 21:09:08 +01:00
}
.header {
background-color: #7f1416;
color: #fff;
margin: 0px;
margin-top: 0px;
padding-top: 8px;
padding-left: 15px;
padding-bottom: 1px;
font-size: 2.7em;
}
2017-12-30 02:58:24 +01:00
.menu-item-inline-desc{
font-size: 0.60em;
font-weight: 300;
font-variant: normal;
}
2017-12-02 21:09:08 +01:00
.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;
2017-12-30 02:58:24 +01:00
font-variant: small-caps;
2017-12-02 21:09:08 +01:00
}
.suboption {
2017-12-30 02:58:24 +01:00
display: block;
2017-12-02 21:09:08 +01:00
padding-left: 15px;
2017-12-30 20:53:15 +01:00
padding-right: 15px;
2017-12-02 21:09:08 +01:00
padding-top: 5px;
2017-12-30 20:53:15 +01:00
padding-bottom: 20px;
2017-12-30 02:58:24 +01:00
min-height: 250px;
2017-12-02 21:09:08 +01:00
}
2017-12-29 23:34:40 +01:00
.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;
2017-12-30 18:36:08 +01:00
color: #dbb;
2018-01-02 03:36:29 +01:00
text-align: center;
}
.w24 {
width: 100px;
2017-12-30 18:36:08 +01:00
}
2018-05-05 23:06:39 +02:00
.color_warn {
color: #d6ba4a;
}
2018-02-02 00:21:29 +01:00
.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;
}
2017-12-30 18:36:08 +01:00
.button:hover {
color: #fff;
background-color: #433221;
2017-12-29 23:34:40 +01:00
}
.row {
display: block;
margin-top: 20px;
margin-bottom: 10px;
}
.button-row {
display: block;
margin-top: 5px;
margin-bottom: 10px;
}
2017-12-30 02:58:24 +01:00
#no-videos-display {
height: 100%;
2017-12-30 20:53:15 +01:00
padding-top: 50px;
/* text-align: center; */
}
.center{
2017-12-30 02:58:24 +01:00
text-align: center;
2017-12-30 20:53:15 +01:00
width: 100%;
2017-12-30 02:58:24 +01:00
}
2017-11-13 23:34:24 +01:00
< / style >
< / head >
< body >
2017-12-02 21:09:08 +01:00
< div class = "header" >
U< span class = "smallcaps" > ltrawidify< / span > : < small > Quick settings< / small >
2017-11-13 23:34:24 +01:00
< / div >
2017-12-02 21:09:08 +01:00
< div class = "left-side" >
2018-02-01 00:26:16 +01:00
< div id = "_menu_this_site" class = "menu-item _menu_this_site" >
Settings for this site
2017-12-02 21:09:08 +01:00
< / div >
2018-03-13 00:36:10 +01:00
< div id = "_menu_autoar" class = "menu-item _menu_autoar" >
Automatic aspect ratio detection (auto-ar)
< / div >
2017-12-30 02:58:24 +01:00
< div id = "_menu_aspectratio" class = "menu-item selected _menu_aspectratio" >
2018-02-04 17:39:26 +01:00
Letterbox removal and alignment
2017-12-02 21:09:08 +01:00
< / div >
2017-12-30 02:58:24 +01:00
< div id = "_menu_csshacks" class = "menu-item disabled hidden _menu_hacks" >
2017-12-02 21:09:08 +01:00
CSS hacks for this site
< / div >
2017-12-30 02:58:24 +01:00
< div id = "_menu_about" class = "menu-item _menu_about" >
About Ultrawidify< span class = "menu-item-inline-desc" > < br / > See for bug reports< / span >
< / div >
2017-11-13 23:34:24 +01:00
< / div >
2017-12-02 21:09:08 +01:00
< div class = "right-side" >
2018-02-02 00:21:29 +01:00
< 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 >
2017-12-30 02:58:24 +01:00
2017-12-29 23:34:40 +01:00
< div id = "extension-mode" class = "suboption hidden" >
2017-12-02 21:09:08 +01:00
< 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 >
2018-02-01 00:26:16 +01:00
< div id = "settings-for-current-site" class = "suboption hidden" >
2018-03-11 18:00:47 +01:00
<!-- <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 >
2018-02-01 00:26:16 +01:00
< form action = "" name = "extensionEnabledOnCurrentSite" >
2018-03-11 18:00:47 +01:00
< 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 / >
2018-02-01 00:26:16 +01:00
< / form >
2018-02-02 00:21:29 +01:00
< small > NOTE: this settings < b > don't< / b > apply to videos embedded from other sites. This option takes effect after page reload.< / small >
2018-02-01 00:26:16 +01:00
< / div >
2018-03-07 21:42:40 +01:00
< div id = "autoar-basic-settings" class = "suboption hidden" >
2018-05-02 17:56:10 +02:00
<!-- <div class="warning">
2018-05-02 18:02:54 +02:00
< 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 >
2018-05-02 17:56:10 +02:00
< / div > -->
2018-03-13 00:36:10 +01:00
2018-05-05 23:06:39 +02:00
< p > < input type = "checkbox" id = "_checkbox_autoArEnabled" class = "_autoAr_enabled _autoAr" > Enable automatic aspect ratio detection?< br / > < small class = "color_warn" id = "_autoAr_disabled_reason" > < / small > < / p >
2018-05-02 18:02:54 +02:00
< 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< / span > < / p >
< div class = "warning" > < p > NOTE: increasing the frequency can result in < i > very< / i > high RAM usage and slow performance.< / p > < / div >
2018-03-13 00:36:10 +01:00
2018-03-07 21:42:40 +01:00
< / div >
2017-12-30 02:58:24 +01:00
< div id = "aspect-ratio-settings" class = "suboption hidden" >
2018-02-02 00:21:29 +01:00
< 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 >
2017-12-29 23:34:40 +01:00
< div class = "row" >
2018-02-04 17:39:26 +01:00
< span class = "label" > Cropping mode:< / span >
2017-12-29 23:34:40 +01:00
< div class = "button-row" >
2018-01-02 03:36:29 +01:00
< 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 >
2017-12-29 23:34:40 +01:00
< / div >
< / div >
2018-02-01 00:26:16 +01:00
<!-- <div class="row">
2017-12-30 18:36:08 +01:00
< span class = "label" > Automatic aspect ratio autodetection:< / span >
2017-12-29 23:34:40 +01:00
< div class = "button-row" >
2017-12-30 18:36:08 +01:00
< 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 >
2017-12-29 23:34:40 +01:00
< / div >
2018-02-01 00:26:16 +01:00
< / div > -->
2017-12-29 23:34:40 +01:00
< div class = "row" >
2017-12-30 18:36:08 +01:00
< span class = "label" > Video alignment:< / span >
2017-12-30 02:58:24 +01:00
< div class = "button-row" >
2017-12-30 18:36:08 +01:00
< 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 >
2017-12-30 02:58:24 +01:00
< / div >
2017-12-29 23:34:40 +01:00
< / div >
2017-12-02 21:09:08 +01:00
< / 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 >
2017-12-30 02:58:24 +01:00
< div id = "panel-about" class = "suboption hidden" >
< div class = "row" >
2017-12-30 18:36:08 +01:00
< span class = "label" > Ultrawidify version:< / span > < br / > < span id = "uw-version" > < / span >
2017-12-30 02:58:24 +01:00
< / div >
< div class = "row" >
2017-12-30 18:36:08 +01:00
< span class = "label" > Having an issue?< / span > < br / > Report < strike > undocumented features< / strike > bugs < a href = "https://github.com/xternal7/ultrawidify/issues" > here< / a > .
2017-12-30 02:58:24 +01:00
< / div >
< / div >
2017-11-13 23:34:24 +01:00
< / div >
2017-12-02 21:09:08 +01:00
<!-- load all scripts. ordering is important! -->
< script src = "../../js/dep/jquery-3.1.1.js" > < / script >
2018-01-08 22:48:45 +01:00
< script src = "../../js/dep/chrome/chrome-extension-async.js" > < / script >
2017-12-29 23:34:40 +01:00
< script src = "../../js/conf/Debug.js" > < / script >
< script src = "../../js/lib/BrowserDetect.js" > < / script >
< script src = "../../js/lib/StorageManager.js" > < / script >
2018-01-06 22:58:31 +01:00
< script src = "../../js/lib/Comms.js" > < / script >
2017-12-02 21:09:08 +01:00
2017-12-29 23:34:40 +01:00
< script src = "../../js/conf/Settings.js" > < / script >
< script src = "./js/popup.js" > < / script >
2017-11-13 23:34:24 +01:00
< / body >
< / html >
2017-12-02 21:09:08 +01:00
