2017-11-13 23:34:24 +01:00
< html >
< head >
2018-07-09 23:40:26 +02:00
<!-- shit like this really makes you appreciate angular and similar frameworks, doesn't it? -->
2017-11-13 23:34:24 +01:00
< 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-06-29 00:30:42 +02:00
strike {
opacity: 0.5;
}
2018-05-06 00:36:38 +02:00
a {
color: #af7f37;
}
a:hover {
color: #c0924e;
}
2018-07-09 23:30:11 +02:00
input {
border: 1px solid #322;
padding: 0.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
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
}
2018-07-09 23:30:11 +02:00
.disabled-button {
color: #666 !important;
cursor: not-allowed !important;
}
.disabled-button:hover {
color: #777 !important;
background-color: #222 !important;
}
.invalid-input {
border: 1px solid #720 !important;
background-color: #410 !important;
}
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-06-29 00:30:42 +02:00
Crop settings
< / div >
< div id = "_menu_stretch" class = "menu-item _menu_stretch" >
2018-07-09 23:30:11 +02:00
Stretch settings
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-06-27 23:55:37 +02:00
< div class = "warn" > Some settings will only apply after reload. Settings don't apply to videos embedded from other sites.< / div >
2018-06-28 23:43:52 +02:00
< div class = "row" >
< span class = "label" > Enable this extension:< / span >
< div class = "button-row" >
< a id = "_ext_global_options_blacklist" class = "button _ext _ext_global_options _blacklist" > Always< / a >
< a id = "_ext_global_options_whitelist" class = "button _ext _ext_global_options _whitelist" > On whitelisted sites< / a >
< a id = "_ext_global_options_disabled" class = "button _ext _ext_global_options _disabled" > Never< / a >
< / div >
< / div >
2018-06-27 23:55:37 +02:00
< div class = "row" >
< span class = "label" > Options for this site:< / span >
< div class = "button-row" >
< a id = "_ext_site_options_blacklist" class = "button _ext _ext_site_options _blacklist" > Blacklist< / a >
< a id = "_ext_site_options_default" class = "button _ext _ext_site_options _default" > Default< / a >
< a id = "_ext_site_options_whitelist" class = "button _ext _ext_site_options _whitelist" > Whitelist< / a >
< / div >
< / div >
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-06-28 23:43:52 +02:00
< div class = "row" >
< span class = "label" > Enable autodetection:< / span >
< div class = "button-row" >
< a id = "_ar_global_options_blacklist" class = "button _autoAr _ar_global_options _blacklist" > Always< / a >
< a id = "_ar_global_options_whitelist" class = "button _autoAr _ar_global_options _whitelist" > On whitelisted sites< / a >
< a id = "_ar_global_options_disabled" class = "button _autoAr _ar_global_options _disabled" > Never< / a >
< / div >
< / div >
<!-- <p><small class="color_warn" id="_autoAr_disabled_reason"></small><br/> -->
2018-07-09 23:40:26 +02:00
< p > Check every < input id = "_input_autoAr_timer" class = "_autoAr _autoAr_timer" type = "number" min = "5" max = "10000" > ms — < span id = "_b_autoar_save_autoar_frequency" class = "button _save_autoAr_frequency _autoAr" > Save< / span > < / p >
2018-03-13 00:36:10 +01:00
2018-06-27 23:55:37 +02:00
< div class = "row" >
< span class = "label" > Options for this site:< / span >
< div class = "button-row" >
< a id = "_ar_site_options_blacklist" class = "button _autoAr _ar_site_options _blacklist" > Blacklist< / a >
< a id = "_ar_site_options_default" class = "button _autoAr _ar_site_options _default" > Default< / a >
< a id = "_ar_site_options_whitelist" class = "button _autoAr _ar_site_options _whitelist" > Whitelist< / a >
< / div >
< / div >
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-06-29 00:30:42 +02:00
< div id = "no-videos-warning" > < / div >
<!-- <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-07-09 23:30:11 +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 >
< 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 >
< a class = "button _changeAr _ar_custom w24" > Custom< br / > < span id = "_b_changeAr_custom_key" class = "smallcaps small darker" > < / span > < / a >
2017-12-29 23:34:40 +01:00
< / div >
< / div >
2018-07-09 23:30:11 +02:00
< div class = "row" >
< span class = "label" > Custom aspect ratio< / span >
< div >
< input id = "_input_custom_ar" class = "_changeAr _custom" onblur = "validateCustomAr()" > < span id = "_b_changeAr_save_custom_ar" class = "button _ar_save_custom_ar _changeAr" > Save< / span >
< br / > < small > Aspect ratio can be entered in any of these forms (without quotes):
< ul style = "display: block; padding-top: 0px; margin-top: 0px" >
< li > fraction (< i > width/height< / i > , e.g. < i > 16/10< / i > , < i > 2560/1080< / i > , etc.)< / li >
< li > ratio (e.g. < i > 1:2.35< / i > or simply < i > 2.35< / i > — < i > 1:< / i > bit can be left out)< / li >
< / ul > < / small >
2017-12-29 23:34:40 +01:00
< / div >
2018-07-09 23:30:11 +02: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 >
2018-06-29 00:30:42 +02:00
< div id = "stretch-settings" class = "suboption hidden" >
< p class = "warning" >
2018-07-15 16:28:29 +02:00
< b > Video stretching options are currently experimental.< / b > If you find any bugs, please consider reporting the problem. See 'About ultrawidify' tab for details.
2018-06-29 00:30:42 +02:00
< / p >
2018-07-09 23:30:11 +02:00
< span class = "label" > Default stretching mode< br > < small > You may need to reload for this option to take effect. NOTE: Stretching is independent of crop mode. Crop gets applied before stretching.< / small > < / span >
2018-06-29 00:30:42 +02:00
< div class = "button-row" >
2018-07-09 23:30:11 +02:00
< a id = "_stretch_global_none" class = "button _stretch _ar_stretch_global _none w24" > Never< br / > < span id = "_b_stretch_default_none_key" class = "smallcaps small darker" > < / span > < / a >
< a id = "_stretch_global_basic" class = "button _stretch _ar_stretch_global _basic w24" > Basic< br / > < span id = "_b_stretch_default_basic_key" class = "smallcaps small darker" > < / span > < / a >
< a id = "_stretch_global_hybrid" class = "button _stretch _ar_stretch_global _hybrid w24" > Hybrid< br / > < span id = "_b_stretch_default_hybrid_key" class = "smallcaps small darker" > < / span > < / a >
< a id = "_stretch_global_conditional" class = "button _stretch _ar_stretch_global _conditional w24" > Thin borders< br / > < span id = "_b_stretch_default_conditional_key" class = "smallcaps small darker" > < / span > < / a >
2018-06-29 00:30:42 +02:00
< / div >
2018-07-09 23:30:11 +02:00
< span class = "label" > Temporary stretching mode< br > < small > Temporarily overrides default stretching mode.< / small > < / span >
2018-06-29 00:30:42 +02:00
< div class = "button-row" >
2018-07-09 23:30:11 +02:00
< a class = "button _stretch _ar_stretch_none w24" > Never< br / > < span id = "_b_stretch_none_key" class = "smallcaps small darker" > < / span > < / a >
< a class = "button _stretch _ar_stretch_basic w24" > Basic< br / > < span id = "_b_stretch_basic_key" class = "smallcaps small darker" > < / span > < / a >
< a class = "button _stretch _ar_stretch_hybrid w24" > Hybrid< br / > < span id = "_b_stretch_hybrid_key" class = "smallcaps small darker" > < / span > < / a >
< a class = "button _stretch _ar_stretch_conditional w24" > Thin borders< br / > < span id = "_b_stretch_conditional_key" class = "smallcaps small darker" > < / span > < / a >
2018-06-29 00:30:42 +02:00
< / div >
< / div >
2017-12-02 21:09:08 +01:00
< 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 >
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
