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
}
2018-05-06 00:36:38 +02:00
a {
color: #af7f37;
}
a:hover {
color: #c0924e;
}
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-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-27 01:29:02 +02:00
< p > Check every < input id = "_input_autoAr_timer" class = "_autoAr_timer _autoAr" type = "number" min = "5" max = "10000" > ms — < span class = "button _save_autoAr_frequency _autoAr" > Save< / span > < / p >
2018-05-02 18:02:54 +02:00
2018-05-06 00:36:38 +02:00
<!-- <div class="warning"><p>NOTE: increasing the frequency can result in <i>very</i> high RAM usage and slow performance.</p></div> -->
< p >
< b > Stretch video while using automatic detection (todo)< / b >
< br / >
< input type = "radio" id = "_checkbox_arStretch" name = "arStretchMode" class = "_autoAr_ _autoAr" > No, I'm a civilized person< br / >
< input type = "radio" id = "_checkbox_arStretch" name = "arStretchMode" class = "_autoAr_removeThinBorders _autoAr" > Stretch to remove thin borders< br / >
< input type = "radio" id = "_checkbox_arStretch" name = "arStretchMode" class = "_autoAr_removeThinBorders _autoAr" > Always stretch in full screen< br / >
< input type = "radio" id = "_checkbox_arStretch" name = "arStretchMode" class = "_autoAr_removeThinBorders _autoAr" > Always stretch, even when not in full screen
< / p >
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-05-06 00:36:38 +02:00
< span class = "label" > Cropping mode< / span >
2017-12-29 23:34:40 +01:00
< div class = "button-row" >
2018-05-27 01:29:02 +02:00
< a class = "button _changeAr _ar_auto w24" > Auto-detect< br / > < span id = "_b_changeAr_auto-ar_key" class = "smallcaps small darker" > < / span > < / a >
2018-01-02 03:36:29 +01:00
< 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 >
2018-05-27 01:29:02 +02:00
< span class = "label" > Stretching mode< br > < small > Stretching is independent of crop mode. Crop gets applied before stretching.< / small > < / span >
2018-05-06 00:36:38 +02:00
< div class = "button-row" >
2018-05-27 21:41:08 +02:00
< a class = "button _stretch _ar_stretch_none w24" > Never< br / > < span id = "_b_changeAr_reset_key" class = "smallcaps small darker" > < / span > < / a >
< a class = "button _stretch _ar_stretch_basic w24" > Basic< br / > < span id = "_b_changeAr_reset_key" class = "smallcaps small darker" > < / span > < / a >
< a class = "button _stretch _ar_stretch_hybrid w24" > Hybrid< br / > < span id = "_b_changeAr_sw_key" class = "smallcaps small darker" > < / span > < / a >
< a class = "button _stretch _ar_stretch_conditional w24" > Thin borders< br / > < span id = "_b_changeAr_sh_key" class = "smallcaps small darker" > < / span > < / a >
2018-05-06 00:36:38 +02:00
< / div >
2017-12-29 23:34:40 +01:00
< / 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" >
2018-05-10 18:37:03 +02:00
< span class = "label" > Having an issue?< / span > < br / > Report < strike > undocumented features< / strike > bugs via one of the following channels:< ul > < li > < a target = "_blank" href = "https://github.com/xternal7/ultrawidify/issues" > < b > Github (strongly preferred)< / b > < / a > < br / > < / li >
< li > PM me on < a target = "_blank" href = "https://www.reddit.com/message/compose?to=xternal7&subject=[Ultrawidify]%20ENTER%20SUMMARY%20OF%20YOUR%20PROBLEM%20HERE&message=Describe+your+issue+in+more+detail.+Don%27t+forget+to+include%3A%0D%0A%2A+Extension+version%0D%0A%2A+Browser%0D%0A%2A+Operating+system%0D%0A%2A+Other+extensions+that+could+possibly+interfere%0D%0A%0D%0AIf+you%27re+reporting+an+issue+with+automatic+aspect+ratio+detection%2C+please+also+include+the+following+%28if+possible%29%3A%0D%0A%2A+model+and+make+of+your+CPU%0D%0A%2A+amount+of+RAM" > reddit< / a > < br / > < / li >
< li > Email: < a target = "_blank" href = "mailto:tamius.han@gmail.com?subject=%5BUltrawidify%5D+ENTER+SUMMARY+OF+YOUR+ISSUE+HERE&body=Describe+your+issue+in+more+detail.+Don%27t+forget+to+include%3A%0D%0A%2A+Extension+version%0D%0A%2A+Browser%0D%0A%2A+Operating+system%0D%0A%2A+Other+extensions+that+could+possibly+interfere%0D%0A%0D%0AIf+you%27re+reporting+an+issue+with+automatic+aspect+ratio+detection%2C+please+also+include+the+following+%28if+possible%29%3A%0D%0A%2A+model+and+make+of+your+CPU%0D%0A%2A+amount+of+RAM" > tamius.han@gmail.com< / a > < / li >
2018-05-06 00:36:38 +02:00
< / ul >
< div >
2018-05-07 21:58:11 +02:00
< p > When reporting an issue, don't forget to include some details. < b > Don't forget to mention your < u > < i > BROWSER< / i > < / u > < / b > (Firefox or Chrome), browser version, and < b > extension version< / b > (see above).< / p >
2018-05-06 00:36:38 +02:00
< p > Please DON'T just say "dont work pls fix"< / p >
< p > Please DO Provide some information about the issue. Briefly describe what did you do to make the issue appear. If issue only happens with certain videos, include links to problematic videos.< / p > < / div >
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! -->
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
