start popup redesign
This commit is contained in:
parent
d7946d4098
commit
354b987cb4
@ -1,17 +1,32 @@
|
|||||||
a {
|
html, body {
|
||||||
color: #af7f37;
|
color: #f8f8f8;
|
||||||
}
|
background-color: #1f1f1f;
|
||||||
a:hover {
|
font-family: "overpass";
|
||||||
color: #c0924e;
|
font-size: 1em;
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/** layout stuff **/
|
/* STANDARD WIDTHS AND HEIGHTS */
|
||||||
|
|
||||||
|
.w100 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w24 {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-t-0-33em {
|
||||||
|
margin-top: 0.33em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.x-pad-1em {
|
||||||
|
padding-left: 1em;
|
||||||
|
padding-right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ELEMENT POSITIONING */
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
display: block;
|
display: block;
|
||||||
@ -25,13 +40,109 @@ a:hover {
|
|||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w24 {
|
.float-left {
|
||||||
width: 100px;
|
float: left;
|
||||||
|
}
|
||||||
|
.float-right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline-block {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hide {
|
||||||
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/** input **/
|
/* TEXT FORMATTING (no colors) */
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 0.75em;
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small {
|
||||||
|
font-size: 0.75em;
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medium-small {
|
||||||
|
font-size: 0.85em;
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smallcaps{
|
||||||
|
font-variant: small-caps;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center{
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* COLORS */
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #af7f37;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #c0924e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color_warn {
|
||||||
|
color: #d6ba4a;
|
||||||
|
}
|
||||||
|
|
||||||
|
strike {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.darker {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label{
|
||||||
|
font-size: 1.1em;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #ffe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected{
|
||||||
|
color: #ffddaa;
|
||||||
|
background-color: #433221;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled-button {
|
||||||
|
color: #666 !important;
|
||||||
|
cursor: not-allowed !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled-button:hover {
|
||||||
|
color: #777 !important;
|
||||||
|
background-color: #222 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* BUTTONS AND INPUTS */
|
||||||
|
|
||||||
input {
|
input {
|
||||||
border: 1px solid #322;
|
border: 1px solid #322;
|
||||||
@ -45,11 +156,6 @@ input {
|
|||||||
background-color: #410 !important;
|
background-color: #410 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/** buttons and stuff ***/
|
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
@ -70,32 +176,8 @@ input {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/** formatting **/
|
|
||||||
|
|
||||||
small{
|
|
||||||
font-size: 0.75em;
|
|
||||||
font-weight: 200;
|
|
||||||
}
|
|
||||||
|
|
||||||
.smallcaps{
|
|
||||||
font-variant: small-caps;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center{
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/** misc **/
|
/** misc **/
|
||||||
|
|
||||||
.color_warn {
|
|
||||||
color: #d6ba4a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.warning {
|
.warning {
|
||||||
color: #d6ba4a;
|
color: #d6ba4a;
|
||||||
padding-left: 35px;
|
padding-left: 35px;
|
||||||
@ -114,4 +196,3 @@ small{
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
59
res/popup/css/popup.css
Normal file
59
res/popup/css/popup.css
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
html, body {
|
||||||
|
width: 780px !important;
|
||||||
|
max-width: 800px !important;
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#no-videos-display {
|
||||||
|
height: 100%;
|
||||||
|
padding-top: 50px;
|
||||||
|
/* text-align: center; */
|
||||||
|
}
|
||||||
@ -5,21 +5,16 @@ document.getElementById("uw-version").textContent = browser.runtime.getManifest(
|
|||||||
|
|
||||||
var Menu = {};
|
var Menu = {};
|
||||||
// Menu.noVideo = document.getElementById("no-videos-display");
|
// Menu.noVideo = document.getElementById("no-videos-display");
|
||||||
Menu.thisSite = document.getElementById("settings-for-current-site");
|
Menu.extensionSettings = document.getElementById('_menu_settings_ext');
|
||||||
Menu.arSettings = document.getElementById("aspect-ratio-settings");
|
Menu.siteSettings = document.getElementById('_menu_settings_site');
|
||||||
Menu.autoAr = document.getElementById("autoar-basic-settings");
|
Menu.videoSettings = document.getElementById('_menu_settings_video');
|
||||||
Menu.cssHacks = document.getElementById("css-hacks-settings");
|
Menu.about = document.getElementById('_menu_about')
|
||||||
Menu.about = document.getElementById("panel-about");
|
|
||||||
Menu.stretchSettings = document.getElementById("stretch-settings")
|
|
||||||
|
|
||||||
var MenuTab = {};
|
var MenuTab = {};
|
||||||
MenuTab.general = document.getElementById("_menu_general");
|
MenuTab.extensionSettings = document.getElementById('_menu_tab_settings_ext');
|
||||||
MenuTab.thisSite = document.getElementById("_menu_this_site");
|
MenuTab.siteSettings = document.getElementById('_menu_tab_settings_site');
|
||||||
MenuTab.arSettings = document.getElementById("_menu_aspectratio");
|
MenuTab.videoSettings = document.getElementById('_menu_tab_settings_video');
|
||||||
MenuTab.cssHacks = document.getElementById("_menu_hacks");
|
MenuTab.about = document.getElementById('_menu_tab_about')
|
||||||
MenuTab.about = document.getElementById("_menu_about");
|
|
||||||
MenuTab.autoAr = document.getElementById("_menu_autoar");
|
|
||||||
MenuTab.stretchSettings = document.getElementById("_menu_stretch");
|
|
||||||
|
|
||||||
var ExtPanel = {};
|
var ExtPanel = {};
|
||||||
ExtPanel.globalOptions = {};
|
ExtPanel.globalOptions = {};
|
||||||
|
|||||||
@ -5,137 +5,44 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<link rel='stylesheet' type='text/css' href='../css/font/overpass.css'>
|
<link rel='stylesheet' type='text/css' href='../css/font/overpass.css'>
|
||||||
<link rel='stylesheet' type='text/css' href='../css/font/overpass-mono.css'>
|
<link rel='stylesheet' type='text/css' href='../css/font/overpass-mono.css'>
|
||||||
<link rel='stylesheet' type='text/css' href='../css/uw-common.css'>
|
<link rel='stylesheet' type='text/css' href='../css/common.css'>
|
||||||
<style>
|
<link rel='stylesheet' type='text/css' href='./css/popup.css'>
|
||||||
|
|
||||||
html, body {
|
|
||||||
width: 780px !important;
|
|
||||||
max-width: 800px !important;
|
|
||||||
padding: 0px;
|
|
||||||
margin: 0px;
|
|
||||||
/* width: 100%; */
|
|
||||||
color: #f8f8f8;
|
|
||||||
background-color: #1f1f1f;
|
|
||||||
font-family: "overpass";
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
strike {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.darker {
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label{
|
|
||||||
font-size: 1.1em;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #ffe;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selected{
|
|
||||||
color: #ffddaa;
|
|
||||||
background-color: #433221;
|
|
||||||
}
|
|
||||||
.disabled {
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
.disabled-button {
|
|
||||||
color: #666 !important;
|
|
||||||
cursor: not-allowed !important;
|
|
||||||
}
|
|
||||||
.disabled-button:hover {
|
|
||||||
color: #777 !important;
|
|
||||||
background-color: #222 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#no-videos-display {
|
|
||||||
height: 100%;
|
|
||||||
padding-top: 50px;
|
|
||||||
/* text-align: center; */
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
U<span class="smallcaps">ltrawidify</span>: <small>Quick settings</small>
|
U<span class="smallcaps">ltrawidify</span>: <small>Quick settings</small>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- TABS/SIDEBAR -->
|
||||||
<div class="left-side">
|
<div class="left-side">
|
||||||
<div id="_menu_this_site" class="menu-item _menu_this_site">
|
|
||||||
Settings for this site
|
<div id="_menu_tab_settings_ext" class="menu-item _menu_tab_settings_ext">
|
||||||
|
Extension settings
|
||||||
</div>
|
</div>
|
||||||
<div id="_menu_autoar" class="menu-item _menu_autoar">
|
<div id="_menu_tab_settings_site" class="menu-item _menu_tab_settings_ext">
|
||||||
Automatic aspect ratio detection (auto-ar)
|
Site settings
|
||||||
</div>
|
</div>
|
||||||
<div id="_menu_aspectratio" class="menu-item selected _menu_aspectratio">
|
<div id="_menu_tab_settings_video" class="menu-item _menu_tab_settings_ext">
|
||||||
Crop settings
|
Video settings
|
||||||
|
<span class="menu-item-inline-desc"><br/>Crop & stretch options for current video</span>
|
||||||
</div>
|
</div>
|
||||||
<div id="_menu_stretch" class="menu-item _menu_stretch">
|
<div id="_menu_tab_about" class="menu-item _menu_tab_about">
|
||||||
Stretch settings
|
|
||||||
</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>
|
About Ultrawidify<span class="menu-item-inline-desc"><br/>See for bug reports</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- PANELS/CONTENT -->
|
||||||
<div class="right-side">
|
<div class="right-side">
|
||||||
<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>
|
<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>
|
||||||
|
|
||||||
<div id="settings-for-current-site" class="suboption hidden">
|
|
||||||
<div class="warn">Some settings will only apply after reload. Settings don't apply to videos embedded from other sites.</div>
|
<!-- EXTENSION SETTINGS -->
|
||||||
|
<div id="_menu_settings_ext" class="suboption hidden">
|
||||||
|
<p>These settings can be overriden on per-site basis.</p>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<span class="label">Enable this extension:</span>
|
<span class="label">Enable this extension:</span>
|
||||||
<div class="button-row">
|
<div class="button-row">
|
||||||
@ -143,19 +50,7 @@
|
|||||||
<a id="_ext_global_options_whitelist" class="button _ext _ext_global_options _whitelist">On whitelisted sites</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>
|
<a id="_ext_global_options_disabled" class="button _ext _ext_global_options _disabled" >Never</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<span class="label">Options for this site:</span>
|
|
||||||
<div class="button-row">
|
|
||||||
<a id="_ext_site_options_whitelist" class="button _ext _ext_site_options _whitelist">Whitelist</a>
|
|
||||||
<a id="_ext_site_options_default" class="button _ext _ext_site_options _default" >Default</a>
|
|
||||||
<a id="_ext_site_options_blacklist" class="button _ext _ext_site_options _blacklist">Blacklist</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="autoar-basic-settings" class="suboption hidden">
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<span class="label">Enable autodetection:</span>
|
<span class="label">Enable autodetection:</span>
|
||||||
<div class="button-row">
|
<div class="button-row">
|
||||||
@ -164,10 +59,32 @@
|
|||||||
<a id="_ar_global_options_disabled" class="button _autoAr _ar_global_options _disabled" >Never</a>
|
<a id="_ar_global_options_disabled" class="button _autoAr _ar_global_options _disabled" >Never</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <p><small class="color_warn" id="_autoAr_disabled_reason"></small><br/> -->
|
|
||||||
|
|
||||||
<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_timer" class="button _save_autoAr_timer _autoAr">Save</span></p>
|
<!-- TODO: default aspect ratio settings -->
|
||||||
|
<p class="warning">
|
||||||
|
<b>Video stretching options are currently experimental.</b> If you find any bugs, please consider reporting the problem. See 'About ultrawidify' tab for details.
|
||||||
|
</p>
|
||||||
|
<span class="label">Default stretching mode</span>
|
||||||
|
<div class="button-row">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- SITE SETTINGS -->
|
||||||
|
<div id="_menu_settings_site" class="suboption hidden">
|
||||||
|
<div class="row">
|
||||||
|
<span class="label">Options for this site:</span>
|
||||||
|
<div class="button-row">
|
||||||
|
<a id="_ext_site_options_whitelist" class="button _ext _ext_site_options _whitelist">Whitelist</a>
|
||||||
|
<a id="_ext_site_options_default" class="button _ext _ext_site_options _default" >Default</a>
|
||||||
|
<a id="_ext_site_options_blacklist" class="button _ext _ext_site_options _blacklist">Blacklist</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<span class="label">Options for this site:</span>
|
<span class="label">Options for this site:</span>
|
||||||
<div class="button-row">
|
<div class="button-row">
|
||||||
@ -176,11 +93,14 @@
|
|||||||
<a id="_ar_site_options_disabled" class="button _autoAr _ar_site_options _disabled">Blacklist</a>
|
<a id="_ar_site_options_disabled" class="button _autoAr _ar_site_options _disabled">Blacklist</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- TODO: default aspect ratio, default settings -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="aspect-ratio-settings" class="suboption hidden">
|
|
||||||
<div id="no-videos-warning"></div>
|
<!-- VIDEO SETTINGS -->
|
||||||
<!-- <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> -->
|
<div id="_menu_settings_video" class="suboption">
|
||||||
|
|
||||||
|
<!-- CROP STUFF -->
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<span class="label">Cropping mode</span>
|
<span class="label">Cropping mode</span>
|
||||||
<div class="button-row">
|
<div class="button-row">
|
||||||
@ -203,6 +123,49 @@
|
|||||||
</ul></small>
|
</ul></small>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- ZOOM STUFF -->
|
||||||
|
<p class="warning">
|
||||||
|
<b>Zoom settings currently experimental.</b> If you find any bugs, please consider reporting the problem. See 'About ultrawidify' tab for details.
|
||||||
|
</p>
|
||||||
|
<span class="label">Manual zooming and panning</span>
|
||||||
|
<div class="row">
|
||||||
|
<!--
|
||||||
|
min, max and value need to be implemented in js as this slider
|
||||||
|
should use logarithmic scale
|
||||||
|
-->
|
||||||
|
<input id="_zoom_slider" class="w100"
|
||||||
|
type="range"
|
||||||
|
/>
|
||||||
|
<div style="overflow: auto">
|
||||||
|
<div class="inline-block float-left medium-small x-pad-1em">
|
||||||
|
Zoom: <span id="zoom_level">100</span>%
|
||||||
|
</div>
|
||||||
|
<div class="inline-block float-right medium-small">
|
||||||
|
<a class="_zoom_show_shortcuts x-pad-1em">show shortcuts</a><a class="_zoom_hide_shortcuts hidden x-pad-1em">show shortcuts</a><a class="_zoom_reset x-pad-1em">reset</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="m-t-0-33em w100 display-block">
|
||||||
|
<input type="checkbox"
|
||||||
|
/>
|
||||||
|
Pan with mouse
|
||||||
|
</div>
|
||||||
|
<!-- <small>Keyboard shortcuts:<ul><li>Z: zoom</li><li>U: unzoom</li><li>P: toggle pan</li><li>shift: hold to enable/prevent pan</li></ul></small> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- STRETCH STUFF -->
|
||||||
|
<p class="warning">
|
||||||
|
<b>Video stretching options are currently experimental.</b> If you find any bugs, please consider reporting the problem. See 'About ultrawidify' tab for details.
|
||||||
|
</p>
|
||||||
|
<span class="label">Stretching mode</span>
|
||||||
|
<div class="button-row">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- VIDEO ALIGNMENT -->
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<span class="label">Video alignment:</span>
|
<span class="label">Video alignment:</span>
|
||||||
<div class="button-row">
|
<div class="button-row">
|
||||||
@ -212,27 +175,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="stretch-settings" class="suboption hidden">
|
<div id="autoar-basic-settings" class="suboption hidden">
|
||||||
<p class="warning">
|
<!-- <p><small class="color_warn" id="_autoAr_disabled_reason"></small><br/> -->
|
||||||
<b>Video stretching options are currently experimental.</b> If you find any bugs, please consider reporting the problem. See 'About ultrawidify' tab for details.
|
<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_timer" class="button _save_autoAr_timer _autoAr">Save</span></p>
|
||||||
</p>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
<div class="button-row">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span class="label">Temporary stretching mode<br><small>Temporarily overrides default stretching mode.</small></span>
|
|
||||||
<div class="button-row">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="css-hacks-settings" class="suboption hidden">
|
<div id="css-hacks-settings" class="suboption hidden">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user