TreeTabsMigration/options.html

499 lines
23 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style rel="stylesheet">
body:hover #donate {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
body {
margin: 20px;
background-color: transparent;
border: none;
width: auto;
height: auto;
overflow: auto;
padding: 0;
font-family: Arial;
font-size: 13px;
cursor: default;
}
.field {
width: 850px;
word-wrap: break-word;
overflow: hidden;
margin-bottom:15px;
}
ul {
padding-left: 22px;
}
ul li {
margin: 5px;
}
.label {
padding-left: 6px;
padding-right: 6px;
}
.cp {
position:relative;
left:-10px;
top:-10px;
width:40px;
height:40px;
border:none;
margin:none;
}
.cb {
border:1px solid #636363;
overflow:hidden;
width:20px;
height:20px;
margin-bottom:2px;
}
</style>
<link type="text/css" rel="stylesheet" media="all" href="../theme/theme.css" id="theme" />
</head>
<body id="body">
<div style="width:850px; align:left;"><span style="width:100%; font-size:20px; display:inline-block; text-align:center; ">Tree Tabs</span></div>
<br>
<fieldset class="field" id="field_vivaldi">
<legend class="label" id="options_vivaldi"></legend>
<table>
<tr>
<td class="label" id="opt_url_for_web_panel"></td>
<td><input style="position:relative;width:450px;left:8px;" type="text" id="url_for_web_panel" value="test"></input></td>
</tr>
</table>
</fieldset>
<fieldset class="field" id="field_pins">
<legend class="label" id="options_pinned" ></legend>
<table style="display:inline-block;">
<tr>
<td><input type="checkbox" class="opt_checkbox bg_opt" id="pin_list_multi_row"></input></td>
<td style="position:relative;left:2px;width:3px;">-</td>
<td class="label" id="options_pin_list_multi_row"></td>
</tr>
<tr>
<td><input type="checkbox" class="opt_checkbox bg_opt" id="allow_pin_close"></input></td>
<td style="position:relative;left:2px;width:3px;">-</td>
<td class="label" id="option_allow_pin_close"></td>
</tr>
</table>
</fieldset>
<fieldset class="field" id="field_tabs">
<legend class="label" id="options_tabs"></legend>
<table style="display:vinline-block;">
<tr>
<td><input type="checkbox" class="opt_checkbox bg_opt" id="close_with_MMB"></input></td>
<td style="position:relative;left:2px;width:3px;">-</td>
<td class="label" id="options_close_with_MMB"></td>
</tr>
<tr>
<td><input type="checkbox" class="opt_checkbox bg_opt" id="always_show_close"></input></td>
<td style="position:relative;left:2px;width:3px;">-</td>
<td class="label" id="options_always_show_close"></td>
</tr>
<tr>
<td><input type="checkbox" class="opt_checkbox bg_opt" id="never_show_close"></input></td>
<td style="position:relative;left:2px;width:3px;">-</td>
<td class="label" id="options_never_show_close"></td>
</tr>
<tr>
<td><input type="checkbox" class="opt_checkbox bg_opt" id="close_other_trees"></input></td>
<td style="position:relative;left:2px;width:3px;">-</td>
<td class="label" id="options_close_other_trees"></td>
</tr>
<tr>
<td><input type="checkbox" class="opt_checkbox bg_opt" id="open_tree_on_hover"></input></td>
<td style="position:relative;left:2px;width:3px;">-</td>
<td class="label" id="options_open_tree_on_hover"></td>
</tr>
<tr>
<td style="position:relative;top:-5px;"><input type="checkbox" class="opt_checkbox bg_opt" id="promote_children"></input></td>
<td style="position:relative;top:-5px;left:2px;width:3px;">-</td>
<td class="label" id="options_promote_children"></td>
</tr>
<tr>
<td style="position:relative;top:-1px;"><input type="checkbox" class="opt_checkbox bg_opt" id="skip_load"></input></td>
<td style="position:relative;top:-1px;left:2px;width:3px;">-</td>
<td class="label" id="options_skip_load"></td>
</tr>
</table>
<table id="faster_scroll_for_firefox" style="display:vinline-block;">
<tr>
<td><input type="checkbox" class="opt_checkbox bg_opt" id="faster_scroll"></input></td>
<td style="position:relative;left:2px;width:3px;">-</td>
<td class="label" id="options_faster_scroll"></td>
</tr>
</table>
<ul>
<li>
<label class="label" id="options_append_child_tab"></label>
<select id="append_child_tab">
<option class="bg_opt_drop_down_menu" id="options_append_child_tab_top" value="top"></option>
<option class="bg_opt_drop_down_menu" id="options_append_child_tab_bottom" value="bottom"></option>
</select>
</li>
<li>
<label class="label" id="options_append_orphan_tab"></label>
<select id="append_orphan_tab">
<option class="bg_opt_drop_down_menu" id="options_append_orphan_tab_top" value="top"></option>
<option class="bg_opt_drop_down_menu" id="options_append_orphan_tab_after_active" value="after_active"></option>
<option class="bg_opt_drop_down_menu" id="options_append_orphan_tab_bottom" value="bottom"></option>
<option class="bg_opt_drop_down_menu" id="options_append_orphan_tab_as_child" value="as_child"></option>
</select>
</li>
<li>
<label class="label" id="options_after_closing_active_tab"></label>
<select id="after_closing_active_tab">
<option class="bg_opt_drop_down_menu" id="options_after_closing_active_tab_go_up" value="above"></option>
<option class="bg_opt_drop_down_menu" id="options_after_closing_active_tab_go_down" value="below"></option>
<option class="bg_opt_drop_down_menu" id="options_after_closing_active_tab_go_browser" value="browser"></option>
</select>
</li>
<li>
<label class="label" id="options_append_child_tab_after_limit"></label>
<select id="append_child_tab_after_limit">
<option class="bg_opt_drop_down_menu" id="options_append_child_tab_after_limit_top" value="top"></option>
<option class="bg_opt_drop_down_menu" id="options_append_child_tab_after_limit_after" value="after"></option>
<option class="bg_opt_drop_down_menu" id="options_append_child_tab_after_limit_bottom" value="bottom"></option>
</select>
</li>
</ul>
<table style="display:vinline-block;">
<tr>
<td>
<input type="number" style="width:80px;" min="-1" max="9999" step="1" id="max_tree_depth"></input>
</td>
<td style="position:relative;left:2px;width:3px;">-</td>
<td class="label" id="options_max_tree_depth"></td>
</tr>
</table>
</fieldset>
<fieldset class="field" id="field_theme" style="width:850px;">
<legend class="label" id="options_theme"></legend>
<select id="theme_list" style="padding-right:6px;"></select>
<input type="text" id="new_theme_name" name="untitled" value="untitled"></input>
<button class="set_button" type="button" id="options_rename_theme_button" style="margin:10px;">Rename</button>
<button class="set_button" type="button" id="options_add_theme_button" style="margin:10px;">Add new</button>
<button class="set_button" type="button" id="options_remove_theme_button" style="margin:10px;">Remove</button>
<button class="set_button" type="button" id="options_import_theme_button" style="margin:10px;">Import</button>
<button class="set_button" type="button" id="options_export_theme_button" style="margin:10px;">Export</button>
<input type="file" multiple id="import_theme" style="display:none"></input>
<fieldset class="field" id="field_show_toolbar" style="width:816px;">
<legend id="toolbar_legend">
<input type="checkbox" style="position:relative; top:-1px;" id="show_toolbar"></input>
<label class="label" style="position:relative; top:-3px;" id="options_toolbar"></label>
</legend>
<label class="label" style="margin-bottom: 10px; margin-top: 4px; display: inline-block;" id="options_available_buttons"></label>
<div class="toolbar" id="toolbar" style="height: 94px; width: 250px;">
<div class="toolbar_int" id="toolbar_main">
<div class="button" id="button_new"><div class="button_img"></div></div>
<div class="button" id="button_pin"><div class="button_img"></div></div>
<div class="button" id="button_undo"><div class="button_img"></div></div>
<div class="button" id="button_search"><div class="button_img"></div></div>
<div class="button" id="button_tools"><div class="button_img"></div></div>
</div>
<div class="toolbar_int" id="toolbar_search">
<div id="toolbar_search_input_box">
<input id="filter_box" type="text" placeholder="Search tabs..."></input>
<div id="button_filter_clear" style="opacity:0;" type="reset"></div>
</div>
<div id="toolbar_search_buttons">
<div class="button" id="button_filter_type"><div class="button_img"></div></div>
<div class="button" id="filter_search_go_prev"><div class="button_img"></div></div>
<div class="button" id="filter_search_go_next"><div class="button_img"></div></div>
</div>
</div>
<div class="toolbar_int" id="toolbar_tools">
<div class="button" id="button_options"><div class="button_img"></div></div>
<div class="button" id="button_bookmarks"><div class="button_img"></div></div>
<div class="button" id="button_downloads"><div class="button_img"></div></div>
<div class="button" id="button_history"><div class="button_img"></div></div>
<div class="button" id="button_settings"><div class="button_img"></div></div>
<div class="button" id="button_extensions"><div class="button_img"></div></div>
<div class="button" id="button_discard"><div class="button_img"></div></div>
<div class="button" id="button_move"><div class="button_img"></div></div>
</div>
<div id="toolbar_separator">
</div>
<div class="toolbar_int" id="toolbar_unused_buttons">
</div>
</div>
<br>
<table id="toolbar_colors" style="margin: 10px; vertical-align: top;">
<tr>
<td><div class="cb"><input class="cp" id="toolbar_background" type="color"></div></td>
<td class="cpl" id="options_color_theme_toolbar_background"></td>
<td><div class="cb"><input class="cp" id="toolbar_border_bottom" type="color"></div></td>
<td class="cpl" id="options_color_toolbar_border_bottom"></td>
</tr>
<tr>
<td><div class="cb"><input class="cp" id="button_icons" type="color"></div></td>
<td class="cpl" id="options_color_button_icons"></td>
<td><div class="cb"><input class="cp" id="button_border" type="color"></div></td>
<td class="cpl" id="options_color_button_border"></td>
<td><div class="cb"><input class="cp" id="button_background" type="color"></div></td>
<td class="cpl" id="options_color_button_background"></td>
</tr>
<tr>
<td><div class="cb"><input class="cp" id="button_hover_border" type="color"></div></td>
<td class="cpl" id="options_color_button_hover_border"></td>
<td><div class="cb"><input class="cp" id="button_hover_background" type="color"></div></td>
<td class="cpl" id="options_color_button_hover_background"></td>
<td><div class="cb"><input class="cp" id="filter_box_background" type="color"></div></td>
<td class="cpl" id="options_color_filter_box_background"></td>
</tr>
<tr>
<td><div class="cb"><input class="cp" id="filter_box_border" type="color"></div></td>
<td class="cpl" id="options_color_filter_box_border"></td>
<td><div class="cb"><input class="cp" id="filter_box_font" type="color"></div></td>
<td class="cpl" id="options_color_filter_box_font"></td>
<td><div class="cb"><input class="cp" id="filter_clear_icon" type="color"></div></td>
<td class="cpl" id="options_color_filter_clear_icon"></td>
</tr>
</table>
</fieldset>
<fieldset class="field" id="Tabs" style="width:816px;">
<legend class="label" id="options_theme_tabs"></legend>
<table style="display: inline-block;">
<tr>
<td>
<div class="pin_list" id="pin_list" style="height: 30px; width: 250px;">
</div>
<br>
<div class="tab_list" id="tab_list" style="height: 80px; width: 250px;">
</div>
</td>
<table style="position:relative;top:-35px;display: inline-block;">
<tr>
<td>
<button id="options_tabs_size_down" style="margin-top:10px;margin-left:10px;">-</button>
<label class="label" id="options_tabs_size"></label>
<button id="options_tabs_size_up" style="margin-top:10px;">+</button>
</td>
</tr>
<tr>
<td style="position:relative;left:10px">
<input style="position:relative;top:2px;" type="checkbox" id="active_tab_font_bold"></input> - <label class="label" id="options_active_tab_font_bold"></label>
</td>
</tr>
</table>
</tr>
</table>
<table style="display: inline-block; margin-top: 10px;margin-left: 10px;vertical-align: top;">
<tr>
<td><div class="cb"><input class="cp" id="pin_list_border_bottom" type="color"></div></td>
<td class="cpl" id="options_color_pin_list_border_bottom"></td>
<td><div class="cb"><input class="cp" id="pin_list_background" type="color"></div></td>
<td class="cpl" id="options_color_pin_list_background"></td>
<td><div class="cb"><input class="cp" id="tab_list_background" type="color"></div></td>
<td class="cpl" id="options_color_tab_list_background"></td>
<td><div class="cb"><input class="cp" id="expand_lines" type="color"></div></td>
<td class="cpl" id="options_color_expand_lines"></td>
</tr>
<tr>
<td><div class="cb"><input class="cp" id="tab_background" type="color"></div></td>
<td class="cpl" id="options_color_tab_background"></td>
<td><div class="cb"><input class="cp" id="tab_border" type="color"></div></td>
<td class="cpl" id="options_color_tab_border"></td>
<td><div class="cb"><input class="cp" id="tab_hover_background" type="color"></div></td>
<td class="cpl" id="options_color_tab_hover_background"></td>
<td><div class="cb"><input class="cp" id="tab_hover_border" type="color"></div></td>
<td class="cpl" id="options_color_tab_hover_border"></td>
</tr>
<tr>
<td><div class="cb"><input class="cp" id="drag_indicator" type="color"></div></td>
<td class="cpl" id="options_color_drag_indicator"></td>
<td><div class="cb"><input class="cp" id="tab_title" type="color"></div></td>
<td class="cpl" id="options_color_tab_title"></td>
<td><div class="cb"><input class="cp" id="tab_title_active" type="color"></div></td>
<td class="cpl" id="options_color_tab_title_active"></td>
<td><div class="cb"><input class="cp" id="tab_title_discarded" type="color"></div></td>
<td class="cpl" id="options_color_tab_title_discarded"></td>
</tr>
<tr>
<td><div class="cb"><input class="cp" id="tab_selected_background" type="color"></div></td>
<td class="cpl" id="options_color_tab_selected_background"></td>
<td><div class="cb"><input class="cp" id="tab_selected_border" type="color"></div></td>
<td class="cpl" id="options_color_tab_selected_border"></td>
<td><div class="cb"><input class="cp" id="tab_selected_hover_border" type="color"></div></td>
<td class="cpl" id="options_color_tab_selected_hover_border"></td>
<td><div class="cb"><input class="cp" id="tab_selected_hover_background" type="color"></div></td>
<td class="cpl" id="options_color_tab_selected_hover_background"></td>
</tr>
<tr>
<td><div class="cb"><input class="cp" id="tab_filtered" type="color"></div></td>
<td class="cpl" id="options_color_tab_filtered"></td>
<td><div class="cb"><input class="cp" id="tab_filtered_highlighted" type="color"></div></td>
<td class="cpl" id="options_color_tab_filtered_highlighted"></td>
<td><div class="cb"><input class="cp" id="tab_filtered_selected" type="color"></div></td>
<td class="cpl" id="options_color_tab_filtered_selected"></td>
<td><div class="cb"><input class="cp" id="tab_filtered_selected_active" type="color"></div></td>
<td class="cpl" id="options_color_tab_filtered_selected_active"></td>
</tr>
<tr>
<td><div class="cb"><input class="cp" id="close_x" type="color"></div></td>
<td class="cpl" id="options_color_close_x"></td>
<td><div class="cb"><input class="cp" id="close_hover_x" type="color"></div></td>
<td class="cpl" id="options_color_close_hover_x"></td>
<td><div class="cb"><input class="cp" id="close_hover_border" type="color"></div></td>
<td class="cpl" id="options_color_close_hover_border"></td>
<td><div class="cb"><input class="cp" id="close_hover_background" type="color"></div></td>
<td class="cpl" id="options_color_close_hover_background"></td>
</tr>
<tr>
<td><div class="cb"><input class="cp" id="expand_open_border" type="color"></div></td>
<td class="cpl" id="options_color_expand_open_border"></td>
<td><div class="cb"><input class="cp" id="expand_open_background" type="color"></div></td>
<td class="cpl" id="options_color_expand_open_background"></td>
<td><div class="cb"><input class="cp" id="expand_closed_border" type="color"></div></td>
<td class="cpl" id="options_color_expand_closed_border"></td>
<td><div class="cb"><input class="cp" id="expand_closed_background" type="color"></div></td>
<td class="cpl" id="options_color_expand_closed_background"></td>
</tr>
</table>
</fieldset>
<fieldset class="field" id="field_scrollbars" style="width:816px;">
<legend class="label" id="options_scrollbars"></legend>
<table style="display:inline-block;margin-top:10px;margin-left:0px;vertical-align:top;">
<tr>
<td>
<div class="scrollbar" id="scrollbar" style="height:20px;width:25px;overflow:auto;">
<div style="height: 1px; width: 200px;"></div>
</div>
<br>
<div class="scrollbar" id="scrollbar" style="height:20px;width:25px;overflow:auto;">
<div style="height:1000px;width:5px;"></div>
</div>
</td>
<td>
<table style="display:inline-block;vertical-align:top;">
<tr>
<td><input type="number" style="width:40px;" min="0" max="20" step="1" id="scrollbar_pin_list"></input></td>
<td style="position:relative;left:2px;width:3px;">-</td>
<td class="label" id="options_scrollbar_pin_list"></td>
<td><div class="cb"><input class="cp" id="scrollbar_thumb" type="color"></div></td>
<td class="cpl" id="options_color_scrollbar_thumb"></td>
<td><div class="cb"><input class="cp" id="scrollbar_thumb_hover" type="color"></div></td>
<td class="cpl" id="options_color_scrollbar_thumb_hover"></td>
</tr>
<tr>
<td><input type="number" style="width:40px;" min="0" max="20" step="1" id="scrollbar_tab_list"></input></td>
<td style="position:relative;left:2px;width:3px;">-</td>
<td class="label" id="options_scrollbar_tab_list"></td>
<td><div class="cb"><input class="cp" id="scrollbar_track" type="color"></div></td>
<td class="cpl" id="options_color_scrollbar_track"></td>
</tr>
</table>
</td>
</tr>
</table>
</fieldset>
<fieldset class="field" style="width:816px;">
<legend class="label" id="options_menu"></legend>
<ul class="menu" id="tabs_menu" style="display:inline-block;position:relative;top:0px;left:0px;">
<li class="menu_item"></li>
<div class="separator"></div>
<li class="menu_item"></li>
<div class="separator"></div>
<li class="menu_item"></li>
</ul>
<table style="display:inline-block;vertical-align:top;margin-left:10px;margin-top:16px;">
<tr>
<td><div class="cb"><input class="cp" id="tabs_menu_background" type="color"></div></td>
<td class="cpl" id="options_color_tabs_menu_background"></td>
<td><div class="cb"><input class="cp" id="tabs_menu_border" type="color"></div></td>
<td class="cpl" id="options_color_tabs_menu_border"></td>
</tr>
<tr>
<td><div class="cb"><input class="cp" id="tabs_menu_hover_background" type="color"></div></td>
<td class="cpl" id="options_color_tabs_menu_hover_background"></td>
<td><div class="cb"><input class="cp" id="tabs_menu_hover_border" type="color"></div></td>
<td class="cpl" id="options_color_tabs_menu_hover_border"></td>
</tr>
<tr>
<td><div class="cb"><input class="cp" id="tabs_menu_font" type="color"></div></td>
<td class="cpl" id="options_color_tabs_menu_font"></td>
<td><div class="cb"><input class="cp" id="tabs_menu_separator" type="color"></div></td>
<td class="cpl" id="options_color_tabs_menu_separator"></td>
</tr>
</table>
</fieldset>
</fieldset>
<script type="text/javascript" src="../lib_jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../defaults.js"></script>
<script type="text/javascript" src="../scripts/events_refresh.js"></script>
<script type="text/javascript" src="../scripts/tabs.js"></script>
<script type="text/javascript" src="../options.js"></script>
<div id="donate" style="position:absolute; top:10px; left:700px;">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="karol@jagiello.it">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_number" value="Vertical Tabs Support">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHostedGuest">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
</body>
</html>