mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-06-26 20:41:21 +02:00
[design] improve menu hierarchy and control order
This commit is contained in:
zombieFox
parent
80bb0f7a47
commit
ec83292655
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "4.42.0",
|
||||
"version": "4.43.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "4.42.0",
|
||||
"version": "4.43.0",
|
||||
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
||||
@ -196,7 +196,7 @@
|
||||
}
|
||||
|
||||
.menu-content-overscroll .menu-content-item:last-child {
|
||||
padding-bottom: calc(var(--menu-space) * 30);
|
||||
padding-bottom: calc(var(--menu-space) * 50);
|
||||
}
|
||||
|
||||
.menu-item-header {
|
||||
|
||||
@ -1,27 +1,27 @@
|
||||
<section class="menu" tabindex="-1" style="display:none;">
|
||||
<div class="menu-area">
|
||||
|
||||
@@include("./menu/menu-nav.html")
|
||||
@@include("./menu/nav.html")
|
||||
|
||||
@@include("./menu/menu-close.html")
|
||||
@@include("./menu/close.html")
|
||||
|
||||
@@include("./menu/menu-content/layout.html")
|
||||
@@include("./menu/content/layout.html")
|
||||
|
||||
@@include("./menu/menu-content/header.html")
|
||||
@@include("./menu/content/header.html")
|
||||
|
||||
@@include("./menu/menu-content/groups.html")
|
||||
@@include("./menu/content/groups.html")
|
||||
|
||||
@@include("./menu/menu-content/bookmarks.html")
|
||||
@@include("./menu/content/bookmarks.html")
|
||||
|
||||
@@include("./menu/menu-content/theme.html")
|
||||
@@include("./menu/content/theme.html")
|
||||
|
||||
@@include("./menu/menu-content/background.html")
|
||||
@@include("./menu/content/background.html")
|
||||
|
||||
@@include("./menu/menu-content/data.html")
|
||||
@@include("./menu/content/data.html")
|
||||
|
||||
@@include("./menu/menu-content/coffee.html")
|
||||
@@include("./menu/content/coffee.html")
|
||||
|
||||
@@include("./menu/menu-content/nighttab.html")
|
||||
@@include("./menu/content/nighttab.html")
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
7
src/html/menu/content/background.html
Normal file
7
src/html/menu/content/background.html
Normal file
@ -0,0 +1,7 @@
|
||||
<div id="menu-content-background" class="menu-content menu-content-overscroll menu-content-background is-hidden">
|
||||
|
||||
@@include("./background/color.html")
|
||||
|
||||
@@include("./background/image.html")
|
||||
|
||||
</div>
|
||||
34
src/html/menu/content/background/color.html
Normal file
34
src/html/menu/content/background/color.html
Normal file
@ -0,0 +1,34 @@
|
||||
<div id="menu-content-background-color" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Colour</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-background-color-by-theme" class="control-background-color-by-theme" type="radio" name="control-background-color-by" value="theme" tabindex="-1">
|
||||
<label for="control-background-color-by-theme"><span class="label-icon"></span> Theme colour</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-background-color-by-theme-helper form-helper-item">Use the Background colour defined by the Theme.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-background-color-by-custom" class="control-background-color-by-custom" type="radio" name="control-background-color-by" value="custom" tabindex="-1">
|
||||
<label for="control-background-color-by-custom"><span class="label-icon"></span> Custom colour</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-background-color-by-custom-helper form-helper-item">Use a custom Background colour.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-background-color-by-custom-helper form-helper-item">Take care as some colours may make the Clock, Date and other text unreadable.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-background-color-rgb-range" class="form-group-item-half control-background-color-rgb-range" type="color" value="#000000" tabindex="1">
|
||||
<input id="control-background-color-rgb-text" class="form-group-item-half control-background-color-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
104
src/html/menu/content/background/image.html
Normal file
104
src/html/menu/content/background/image.html
Normal file
@ -0,0 +1,104 @@
|
||||
<div id="menu-content-background-image" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Image</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-background-image-show" class="control-background-image-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-background-image-show"><span class="label-icon"></span> Show</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-background-image-from-file" class="control-background-image-from-file" type="radio" name="control-background-image-from" value="file" tabindex="-1">
|
||||
<label for="control-background-image-from-file"><span class="label-icon"></span> Use local file</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-inline">
|
||||
<div class="form-input-button form-input-hide">
|
||||
<input id="control-background-image-file" class="control-background-image-file" type="file">
|
||||
<label for="control-background-image-file">Select image</label>
|
||||
</div>
|
||||
<button class="control-background-image-file-clear button">Clear image</button>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-background-image-file-helper form-helper-item">Max image size 5MB, (due to browser local storage limits).</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-background-image-file-helper form-helper-item">Take care with large files, they may impact performance.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="control-background-image-file-feedback form-feedback"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-background-image-from-url" class="control-background-image-from-url" type="radio" name="control-background-image-from" value="url" tabindex="-1">
|
||||
<label for="control-background-image-from-url"><span class="label-icon"></span> Use URL</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<textarea id="control-background-image-url" class="control-background-image-url" spellcheck="false" placeholder="https://..." tabindex="-1"></textarea>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-background-image-url-helper form-helper-item">If adding more than one URL separate them by spaces or on new lines. If more than one is entered a random background image will be used on load.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-helper">
|
||||
<p class="control-background-image-url-helper form-helper-item">Unsplash can be used for random images, eg:</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-background-image-url-helper form-helper-item"><i>https://source.unsplash.com/random/1920x1080/?night,day,sky</i></p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-background-image-url-helper form-helper-item">Change parameters after <i>.../random/</i> for more options. Loading times may vary.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-background-image-opacity-range">Opacity</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-background-image-opacity-range" class="control-background-image-opacity-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-background-image-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-background-image-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-background-image-grayscale-range">Grayscale</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-background-image-grayscale-range" class="control-background-image-grayscale-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-background-image-grayscale-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-background-image-grayscale-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-background-image-blur-range">Blur</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-background-image-blur-range" class="control-background-image-blur-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-background-image-blur-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-background-image-blur-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-background-image-accent-range">Accent overlay</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-background-image-accent-range" class="control-background-image-accent-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-background-image-accent-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-background-image-accent-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-background-image-scale-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-background-image-scale-range" class="control-background-image-scale-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-background-image-scale-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-background-image-scale-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
25
src/html/menu/content/bookmarks.html
Normal file
25
src/html/menu/content/bookmarks.html
Normal file
@ -0,0 +1,25 @@
|
||||
<div id="menu-content-bookmarks" class="menu-content menu-content-overscroll menu-content-bookmarks is-hidden">
|
||||
|
||||
@@include("./bookmarks/area.html")
|
||||
|
||||
@@include("./bookmarks/bookmarks.html")
|
||||
|
||||
@@include("./bookmarks/letcon.html")
|
||||
|
||||
@@include("./bookmarks/name.html")
|
||||
|
||||
@@include("./bookmarks/alignment.html")
|
||||
|
||||
@@include("./bookmarks/style.html")
|
||||
|
||||
@@include("./bookmarks/color.html")
|
||||
|
||||
@@include("./bookmarks/border.html")
|
||||
|
||||
@@include("./bookmarks/orientation.html")
|
||||
|
||||
@@include("./bookmarks/sort.html")
|
||||
|
||||
@@include("./bookmarks/accent.html")
|
||||
|
||||
</div>
|
||||
17
src/html/menu/content/bookmarks/accent.html
Normal file
17
src/html/menu/content/bookmarks/accent.html
Normal file
@ -0,0 +1,17 @@
|
||||
<div id="menu-content-bookmarks-accent" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Accent override</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<button class="control-link-accent-clear button" tabindex="-1">Remove all override colours</button>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<button class="control-link-accent-set button" tabindex="-1">Add override colours</button>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-accent-set-helper form-helper-item">Adds a unique override colour to each Bookmark.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
116
src/html/menu/content/bookmarks/alignment.html
Normal file
116
src/html/menu/content/bookmarks/alignment.html
Normal file
@ -0,0 +1,116 @@
|
||||
<div id="menu-content-bookmarks-alignment" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Alignment</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label class="control-link-item-display-alignment-label">Letter/Icon and Name position</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x3 control-link-item-display-alignment-grid">
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-topleft" class="control-link-item-display-alignment-topleft" type="radio" name="control-link-item-display-alignment" value="topleft" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-topleft"><span class="label-icon"></span> <span class="sr-only">Top left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-topcenter" class="control-link-item-display-alignment-topcenter" type="radio" name="control-link-item-display-alignment" value="topcenter" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-topcenter"><span class="label-icon"></span> <span class="sr-only">Top center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-topright" class="control-link-item-display-alignment-topright" type="radio" name="control-link-item-display-alignment" value="topright" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-topright"><span class="label-icon"></span> <span class="sr-only">Top right</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-centerleft" class="control-link-item-display-alignment-centerleft" type="radio" name="control-link-item-display-alignment" value="centerleft" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-centerleft"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-centercenter" class="control-link-item-display-alignment-centercenter" type="radio" name="control-link-item-display-alignment" value="centercenter" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-centercenter"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-centerright" class="control-link-item-display-alignment-centerright" type="radio" name="control-link-item-display-alignment" value="centerright" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-centerright"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-bottomleft" class="control-link-item-display-alignment-bottomleft" type="radio" name="control-link-item-display-alignment" value="bottomleft" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-bottomleft"><span class="label-icon"></span> <span class="sr-only">Bottom left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-bottomcenter" class="control-link-item-display-alignment-bottomcenter" type="radio" name="control-link-item-display-alignment" value="bottomcenter" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-bottomcenter"><span class="label-icon"></span> <span class="sr-only">Bottom Center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-bottomright" class="control-link-item-display-alignment-bottomright" type="radio" name="control-link-item-display-alignment" value="bottomright" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-bottomright"><span class="label-icon"></span> <span class="sr-only">Bottom right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-rotate-range">Rotation</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-rotate-range" class="control-link-item-display-rotate-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-display-rotate-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-rotate-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-translate-x-range">Horizontally offset</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-translate-x-range" class="control-link-item-display-translate-x-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-display-translate-x-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-translate-x-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-translate-y-range">Vertically offset</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-translate-y-range" class="control-link-item-display-translate-y-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-display-translate-y-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-translate-y-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-gutter-range">Gutter</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-gutter-range" class="control-link-item-display-gutter-range mr-3" type="range" value="0" tabindex="1">
|
||||
<input class="control-link-item-display-gutter-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-gutter-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-direction-horizontal" class="control-link-item-display-direction-horizontal" type="radio" name="control-link-item-display-direction" value="horizontal" tabindex="-1">
|
||||
<label for="control-link-item-display-direction-horizontal"><span class="label-icon"></span> Align horizontally</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-direction-vertical" class="control-link-item-display-direction-vertical" type="radio" name="control-link-item-display-direction" value="vertical" tabindex="-1">
|
||||
<label for="control-link-item-display-direction-vertical"><span class="label-icon"></span> Align vertically</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-display-direction-helper form-helper-item">Only available when Letter/Icon and Name are shown.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-display-direction-helper form-helper-item">Vertical alignment works well with Bookmark Block Style.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-display-direction-helper form-helper-item">Horizontal alignment works well with Bookmark List Style.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-order-letconname" class="control-link-item-display-order-letconname" type="radio" name="control-link-item-display-order" value="letconname" tabindex="-1">
|
||||
<label for="control-link-item-display-order-letconname"><span class="label-icon"></span> Order Letter/Icon then Name</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-order-nameletcon" class="control-link-item-display-order-nameletcon" type="radio" name="control-link-item-display-order" value="nameletcon" tabindex="-1">
|
||||
<label for="control-link-item-display-order-nameletcon"><span class="label-icon"></span> Order Name then Letter/Icon</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-display-order-helper form-helper-item">Only available when Letter/Icon and Name are shown.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
44
src/html/menu/content/bookmarks/area.html
Normal file
44
src/html/menu/content/bookmarks/area.html
Normal file
@ -0,0 +1,44 @@
|
||||
<div id="menu-content-bookmarks-area" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Area</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-area-width-range">Width</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-area-width-range" class="control-link-area-width-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-area-width-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-area-width-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<button class="control-link-area-width-match button" tabindex="-1">Match Header Area</button>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-area-width-helper form-helper-item">Max width is defined by Layout Area Width.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label class="control-link-area-justify-label">Horizontal alignment</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x1 control-link-area-justify-grid">
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-area-justify-left" class="control-link-area-justify-left" type="radio" name="control-link-area-justify" value="left" tabindex="-1">
|
||||
<label for="control-link-area-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-area-justify-center" class="control-link-area-justify-center" type="radio" name="control-link-area-justify" value="center" tabindex="-1">
|
||||
<label for="control-link-area-justify-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-area-justify-right" class="control-link-area-justify-right" type="radio" name="control-link-area-justify" value="right" tabindex="-1">
|
||||
<label for="control-link-area-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-area-justify-helper form-helper-item">Effects may not be visible if the Bookmark Area is full width.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
51
src/html/menu/content/bookmarks/bookmarks.html
Normal file
51
src/html/menu/content/bookmarks/bookmarks.html
Normal file
@ -0,0 +1,51 @@
|
||||
<div id="menu-content-bookmarks-bookmarks" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Bookmarks</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-show" class="control-link-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-link-show"><span class="label-icon"></span> Show</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-size-range">Bookmark Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-size-range" class="control-link-item-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-url-show" class="control-link-item-url-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-link-item-url-show"><span class="label-icon"></span> Show URL on Bookmark hover</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-line-show" class="control-link-item-line-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-link-item-line-show"><span class="label-icon"></span> Show Bookmark line</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-shadow-show" class="control-link-item-shadow-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-link-item-shadow-show"><span class="label-icon"></span> Show shadow on Bookmark hover</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-shadow-show-helper form-helper-item">Effects may not be visible if Theme Shadow is set to 0.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-hoverscale" class="control-link-item-hoverscale" type="checkbox" tabindex="-1">
|
||||
<label for="control-link-item-hoverscale"><span class="label-icon"></span> Grow on Bookmark hover</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-newtab" class="control-link-newtab" type="checkbox" tabindex="-1">
|
||||
<label for="control-link-newtab"><span class="label-icon"></span> Open Bookmarks in a new tab</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
15
src/html/menu/content/bookmarks/border.html
Normal file
15
src/html/menu/content/bookmarks/border.html
Normal file
@ -0,0 +1,15 @@
|
||||
<div id="menu-content-bookmarks-border" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Border</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-border-range">All sides</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-border-range" class="control-link-item-border-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-border-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-border-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
34
src/html/menu/content/bookmarks/color.html
Normal file
34
src/html/menu/content/bookmarks/color.html
Normal file
@ -0,0 +1,34 @@
|
||||
<div id="menu-content-bookmarks-color" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Colour</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-color-by-theme" class="control-link-item-color-by-theme" type="radio" name="control-link-item-color-by" value="theme" tabindex="-1">
|
||||
<label for="control-link-item-color-by-theme"><span class="label-icon"></span> Theme colour</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-color-by-theme-helper form-helper-item">Use the colour defined by the Theme.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-color-by-custom" class="control-link-item-color-by-custom" type="radio" name="control-link-item-color-by" value="custom" tabindex="-1">
|
||||
<label for="control-link-item-color-by-custom"><span class="label-icon"></span> Custom colour</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-color-by-custom-helper form-helper-item">Use a custom colour.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-color-by-custom-helper form-helper-item">Take care as some colours may make the Letter/Icon and Name unreadable.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-color-rgb-range" class="form-group-item-half control-link-item-color-rgb-range" type="color" value="#000000" tabindex="1">
|
||||
<input id="control-link-item-color-rgb-text" class="form-group-item-half control-link-item-color-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
32
src/html/menu/content/bookmarks/letcon.html
Normal file
32
src/html/menu/content/bookmarks/letcon.html
Normal file
@ -0,0 +1,32 @@
|
||||
<div id="menu-content-bookmarks-letcon" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Letter/Icon</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-letcon-show" class="control-link-item-display-letcon-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-link-item-display-letcon-show"><span class="label-icon"></span> Show</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-letcon-letter-size-range">Letter size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-letcon-letter-size-range" class="control-link-item-display-letcon-letter-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-display-letcon-letter-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-letcon-letter-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-letcon-icon-size-range">Icon size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-letcon-icon-size-range" class="control-link-item-display-letcon-icon-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-display-letcon-icon-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-letcon-icon-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
23
src/html/menu/content/bookmarks/name.html
Normal file
23
src/html/menu/content/bookmarks/name.html
Normal file
@ -0,0 +1,23 @@
|
||||
<div id="menu-content-bookmarks-name" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Name</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-name-show" class="control-link-item-display-name-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-link-item-display-name-show"><span class="label-icon"></span> Name</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-name-size-range">Name size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-name-size-range" class="control-link-item-display-name-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-display-name-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-name-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
18
src/html/menu/content/bookmarks/orientation.html
Normal file
18
src/html/menu/content/bookmarks/orientation.html
Normal file
@ -0,0 +1,18 @@
|
||||
<div id="menu-content-bookmarks-orientation" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Orientation</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-orientation-top" class="control-link-orientation-top" type="radio" name="control-link-orientation" value="top" tabindex="-1">
|
||||
<label for="control-link-orientation-top"><span class="label-icon"></span> Top</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-orientation-bottom" class="control-link-orientation-bottom" type="radio" name="control-link-orientation" value="bottom" tabindex="-1">
|
||||
<label for="control-link-orientation-bottom"><span class="label-icon"></span> Bottom</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-orientation-helper form-helper-item">Display the URL and Controls either at the top or bottom of a Bookmark Tile.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
14
src/html/menu/content/bookmarks/sort.html
Normal file
14
src/html/menu/content/bookmarks/sort.html
Normal file
@ -0,0 +1,14 @@
|
||||
<div id="menu-content-bookmarks-sort" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Sort</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<div class="form-inline">
|
||||
<button class="control-link-sort-letter button" tabindex="-1">By letter</button>
|
||||
<button class="control-link-sort-icon button" tabindex="-1">By icon</button>
|
||||
<button class="control-link-sort-name button" tabindex="-1">By name</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
21
src/html/menu/content/bookmarks/style.html
Normal file
21
src/html/menu/content/bookmarks/style.html
Normal file
@ -0,0 +1,21 @@
|
||||
<div id="menu-content-bookmarks-style" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Style</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-style-block" class="control-link-style-block" type="radio" name="control-link-style" value="block" tabindex="-1">
|
||||
<label for="control-link-style-block"><span class="label-icon"></span> Block</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-style-block-helper form-helper-item">Bookmark tiles more square shaped.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-style-list" class="control-link-style-list" type="radio" name="control-link-style" value="list" tabindex="-1">
|
||||
<label for="control-link-style-list"><span class="label-icon"></span> List</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-style-list-helper form-helper-item">Bookmark tiles more short and wide.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
5
src/html/menu/content/coffee.html
Normal file
5
src/html/menu/content/coffee.html
Normal file
@ -0,0 +1,5 @@
|
||||
<div id="menu-content-coffee" class="menu-content menu-content-coffee is-hidden">
|
||||
|
||||
@@include("./coffee/coffee.html")
|
||||
|
||||
</div>
|
||||
17
src/html/menu/content/coffee/coffee.html
Normal file
17
src/html/menu/content/coffee/coffee.html
Normal file
@ -0,0 +1,17 @@
|
||||
<div id="menu-content-coffee-coffee" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Coffee for fuel</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<p>nightTab is free, appreciation is welcome in the form of coffee!</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<a href="https://www.buymeacoffee.com/zombieFox" class="button button-large px-4 py-3">
|
||||
<img src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" class="mr-2">
|
||||
<span class="button-text">Buy me a coffee</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
9
src/html/menu/content/data.html
Normal file
9
src/html/menu/content/data.html
Normal file
@ -0,0 +1,9 @@
|
||||
<div id="menu-content-data" class="menu-content menu-content-overscroll menu-content-data is-hidden">
|
||||
|
||||
@@include("./data/restore.html")
|
||||
|
||||
@@include("./data/backup.html")
|
||||
|
||||
@@include("./data/clear.html")
|
||||
|
||||
</div>
|
||||
16
src/html/menu/content/data/backup.html
Normal file
16
src/html/menu/content/data/backup.html
Normal file
@ -0,0 +1,16 @@
|
||||
<div id="menu-content-data-backup" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Backup</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<button class="control-data-export button" tabindex="-1">Export data</button>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-data-export-helper form-helper-item">Download a backup of your nightTab Bookmarks and Settings.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-data-export-helper form-helper-item">This file can later be imported on this or another deivce.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
13
src/html/menu/content/data/clear.html
Normal file
13
src/html/menu/content/data/clear.html
Normal file
@ -0,0 +1,13 @@
|
||||
<div id="menu-content-data-clear" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Clear</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<button class="control-data-clear button" tabindex="-1">Clear data</button>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-data-clear-helper form-helper-item">Wipe all data and restore nightTab to default state.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
19
src/html/menu/content/data/restore.html
Normal file
19
src/html/menu/content/data/restore.html
Normal file
@ -0,0 +1,19 @@
|
||||
<div id="menu-content-data-restore" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Restore</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<div class="form-input-button form-input-hide">
|
||||
<input id="control-data-import" class="control-data-import" type="file" tabindex="-1">
|
||||
<label for="control-data-import">Import data</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-data-import-helper form-helper-item">Restore a previously exported nightTab backup.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="control-data-import-feedback form-feedback"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
13
src/html/menu/content/groups.html
Normal file
13
src/html/menu/content/groups.html
Normal file
@ -0,0 +1,13 @@
|
||||
<div id="menu-content-groups" class="menu-content menu-content-overscroll menu-content-groups is-hidden">
|
||||
|
||||
@@include("./groups/area.html")
|
||||
|
||||
@@include("./groups/order.html")
|
||||
|
||||
@@include("./groups/names.html")
|
||||
|
||||
@@include("./groups/openall.html")
|
||||
|
||||
@@include("./groups/border.html")
|
||||
|
||||
</div>
|
||||
31
src/html/menu/content/groups/area.html
Normal file
31
src/html/menu/content/groups/area.html
Normal file
@ -0,0 +1,31 @@
|
||||
<div id="menu-content-groups-area" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Area</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<div class="form-wrap">
|
||||
<label class="control-group-area-justify-label">Group horizontal alignment</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x1 control-group-area-justify-grid">
|
||||
<div class="form-wrap">
|
||||
<input id="control-group-area-justify-left" class="control-group-area-justify-left" type="radio" name="control-group-area-justify" value="left" tabindex="-1">
|
||||
<label for="control-group-area-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-group-area-justify-center" class="control-group-area-justify-center" type="radio" name="control-group-area-justify" value="center" tabindex="-1">
|
||||
<label for="control-group-area-justify-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-group-area-justify-right" class="control-group-area-justify-right" type="radio" name="control-group-area-justify" value="right" tabindex="-1">
|
||||
<label for="control-group-area-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-group-area-justify-helper form-helper-item">Effects may not be visible if the Group Name is not shown.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
18
src/html/menu/content/groups/border.html
Normal file
18
src/html/menu/content/groups/border.html
Normal file
@ -0,0 +1,18 @@
|
||||
<div id="menu-content-groups-border" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Border</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-group-border-range">Between groups</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-group-border-range" class="control-group-border-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-group-border-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-group-border-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-group-border-helper form-helper-item">Border between groups may not be visible if there is only one group.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
23
src/html/menu/content/groups/names.html
Normal file
23
src/html/menu/content/groups/names.html
Normal file
@ -0,0 +1,23 @@
|
||||
<div id="menu-content-groups-names" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Names</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-group-name-show" class="control-group-name-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-group-name-show"><span class="label-icon"></span> Show</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label for="control-group-name-size-range">Name Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-group-name-size-range" class="control-group-name-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-group-name-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-group-name-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
35
src/html/menu/content/groups/openall.html
Normal file
35
src/html/menu/content/groups/openall.html
Normal file
@ -0,0 +1,35 @@
|
||||
<div id="menu-content-groups-openall" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Open all Bookmarks</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-group-openall-show" class="control-group-openall-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-group-openall-show"><span class="label-icon"></span> Show</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label for="control-group-openall-size-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-group-openall-size-range" class="control-group-openall-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-group-openall-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-group-openall-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label class="control-group-openall-style-label">Button style</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-group-openall-style-box" class="control-group-openall-style-box" type="radio" name="control-group-openall-style" value="box" tabindex="-1">
|
||||
<label for="control-group-openall-style-box"><span class="label-icon"></span> Box</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-group-openall-style-clear" class="control-group-openall-style-clear" type="radio" name="control-group-openall-style" value="clear" tabindex="-1">
|
||||
<label for="control-group-openall-style-clear"><span class="label-icon"></span> Clear</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
15
src/html/menu/content/groups/order.html
Normal file
15
src/html/menu/content/groups/order.html
Normal file
@ -0,0 +1,15 @@
|
||||
<div id="menu-content-groups-order" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Order</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-group-order-headerbody" class="control-group-order-headerbody" type="radio" name="control-group-order" value="headerbody" tabindex="1">
|
||||
<label for="control-group-order-headerbody"><span class="label-icon"></span> Group Name then Bookmarks</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-group-order-bodyheader" class="control-group-order-bodyheader" type="radio" name="control-group-order" value="bodyheader" tabindex="1">
|
||||
<label for="control-group-order-bodyheader"><span class="label-icon"></span> Bookmarks then Group Name</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
29
src/html/menu/content/header.html
Normal file
29
src/html/menu/content/header.html
Normal file
@ -0,0 +1,29 @@
|
||||
<div id="menu-content-header" class="menu-content menu-content-overscroll menu-content-header is-hidden">
|
||||
|
||||
@@include("./header/area.html")
|
||||
|
||||
@@include("./header/order.html")
|
||||
|
||||
@@include("./header/greeting.html")
|
||||
|
||||
@@include("./header/transitional.html")
|
||||
|
||||
@@include("./header/clock.html")
|
||||
|
||||
@@include("./header/date.html")
|
||||
|
||||
@@include("./header/search.html")
|
||||
|
||||
@@include("./header/editadd.html")
|
||||
|
||||
@@include("./header/coloraccent.html")
|
||||
|
||||
@@include("./header/settings.html")
|
||||
|
||||
@@include("./header/border.html")
|
||||
|
||||
@@include("./header/position.html")
|
||||
|
||||
@@include("./header/color.html")
|
||||
|
||||
</div>
|
||||
96
src/html/menu/content/header/area.html
Normal file
96
src/html/menu/content/header/area.html
Normal file
@ -0,0 +1,96 @@
|
||||
<div id="menu-content-header-area" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Area</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-area-width-range">Width</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-area-width-range" class="control-header-area-width-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-area-width-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-area-width-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<button class="control-header-area-width-match button" tabindex="-1">Match Bookmarks Area</button>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-area-width-helper form-helper-item">Max width is defined by Layout Area Width.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-area-justify-label">Area horizontal alignment</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x1 control-header-area-justify-grid">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-area-justify-left" class="control-header-area-justify-left" type="radio" name="control-header-area-justify" value="left" tabindex="-1">
|
||||
<label for="control-header-area-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-area-justify-center" class="control-header-area-justify-center" type="radio" name="control-header-area-justify" value="center" tabindex="-1">
|
||||
<label for="control-header-area-justify-center"><span class="label-icon"></span> <span class="sr-only">Centre</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-area-justify-right" class="control-header-area-justify-right" type="radio" name="control-header-area-justify" value="right" tabindex="-1">
|
||||
<label for="control-header-area-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-area-justify-helper form-helper-item">Effects may not be visible if the Header Area is full width.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-area-align-label">Header item vertical alignment</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-area-align-center" class="control-header-area-align-center" type="radio" name="control-header-area-align" value="center" tabindex="-1">
|
||||
<label for="control-header-area-align-center"><span class="label-icon"></span> Center</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-area-align-center-helper form-helper-item">Header items aligned to each others centres.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-area-align-baseline" class="control-header-area-align-baseline" type="radio" name="control-header-area-align" value="baseline" tabindex="-1">
|
||||
<label for="control-header-area-align-baseline"><span class="label-icon"></span> Baseline</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-area-align-baseline-helper form-helper-item">Header items aligned to the text baseline. Useful for when the Clock, Date and other text is sized large and need to sit on a line.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-item-justify-label">Item horizontal alignment</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x1 control-header-item-justify-grid">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-item-justify-left" class="control-header-item-justify-left" type="radio" name="control-header-item-justify" value="left" tabindex="-1">
|
||||
<label for="control-header-item-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-item-justify-center" class="control-header-item-justify-center" type="radio" name="control-header-item-justify" value="center" tabindex="-1">
|
||||
<label for="control-header-item-justify-center"><span class="label-icon"></span> <span class="sr-only">Centre</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-item-justify-right" class="control-header-item-justify-right" type="radio" name="control-header-item-justify" value="right" tabindex="-1">
|
||||
<label for="control-header-item-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-item-justify-helper form-helper-item">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-area-width-helper form-helper-item">Some Header items may not be shown.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
24
src/html/menu/content/header/border.html
Normal file
24
src/html/menu/content/header/border.html
Normal file
@ -0,0 +1,24 @@
|
||||
<div id="menu-content-header-border" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Border</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-border-top-range">Top</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-border-top-range" class="control-header-border-top-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-border-top-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-border-top-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-border-bottom-range">Bottom</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-border-bottom-range" class="control-header-border-bottom-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-border-bottom-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-border-bottom-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
88
src/html/menu/content/header/clock.html
Normal file
88
src/html/menu/content/header/clock.html
Normal file
@ -0,0 +1,88 @@
|
||||
<div id="menu-content-header-clock" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Clock</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-hours-show" class="control-header-clock-hours-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-clock-hours-show"><span class="label-icon"></span> Hours</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-hours-display-number" class="control-header-clock-hours-display-number" type="radio" name="control-header-clock-hours" value="number" tabindex="-1">
|
||||
<label for="control-header-clock-hours-display-number"><span class="label-icon"></span> As number</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-hours-display-word" class="control-header-clock-hours-display-word" type="radio" name="control-header-clock-hours" value="word" tabindex="-1">
|
||||
<label for="control-header-clock-hours-display-word"><span class="label-icon"></span> As word</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-minutes-show" class="control-header-clock-minutes-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-clock-minutes-show"><span class="label-icon"></span> Minutes</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-minutes-display-number" class="control-header-clock-minutes-display-number" type="radio" name="control-header-clock-minutes" value="number" tabindex="-1">
|
||||
<label for="control-header-clock-minutes-display-number"><span class="label-icon"></span> As number</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-minutes-display-word" class="control-header-clock-minutes-display-word" type="radio" name="control-header-clock-minutes" value="word" tabindex="-1">
|
||||
<label for="control-header-clock-minutes-display-word"><span class="label-icon"></span> As word</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-seconds-show" class="control-header-clock-seconds-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-clock-seconds-show"><span class="label-icon"></span> Seconds</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-seconds-display-number" class="control-header-clock-seconds-display-number" type="radio" name="control-header-clock-seconds" value="number" tabindex="-1">
|
||||
<label for="control-header-clock-seconds-display-number"><span class="label-icon"></span> As number</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-seconds-display-word" class="control-header-clock-seconds-display-word" type="radio" name="control-header-clock-seconds" value="word" tabindex="-1">
|
||||
<label for="control-header-clock-seconds-display-word"><span class="label-icon"></span> As word</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-separator-show" class="control-header-clock-separator-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-clock-separator-show"><span class="label-icon"></span> Separators</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-hour24-show" class="control-header-clock-hour24-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-clock-hour24-show"><span class="label-icon"></span> 24 Hours</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-meridiem-show" class="control-header-clock-meridiem-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-clock-meridiem-show"><span class="label-icon"></span> AM/PM</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-clock-size-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-clock-size-range" class="control-header-clock-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-clock-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-clock-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-newline" class="control-header-clock-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-clock-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-clock-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
71
src/html/menu/content/header/color.html
Normal file
71
src/html/menu/content/header/color.html
Normal file
@ -0,0 +1,71 @@
|
||||
<div id="menu-content-header-color" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Background colour</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-color-show" class="control-header-color-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-color-show"><span class="label-icon"></span> Show</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-color-style-always" class="control-header-color-style-always" type="radio" name="control-header-color-style" value="always" tabindex="-1">
|
||||
<label for="control-header-color-style-always"><span class="label-icon"></span> Always visible</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-color-style-always-helper form-helper-item">Useful for when a Background Image is shown.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-color-style-scroll" class="control-header-color-style-scroll" type="radio" name="control-header-color-style" value="scroll" tabindex="-1">
|
||||
<label for="control-header-color-style-scroll"><span class="label-icon"></span> Visible on scroll</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-color-style-scroll-helper form-helper-item">The page will not scroll if Bookmarks are not shown.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-color-by-theme" class="control-header-color-by-theme" type="radio" name="control-header-color-by" value="theme" tabindex="-1">
|
||||
<label for="control-header-color-by-theme"><span class="label-icon"></span> Theme colour</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-color-by-theme-helper form-helper-item">Use the Background colour defined by the Theme.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-color-by-custom" class="control-header-color-by-custom" type="radio" name="control-header-color-by" value="custom" tabindex="-1">
|
||||
<label for="control-header-color-by-custom"><span class="label-icon"></span> Custom colour</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-color-by-custom-helper form-helper-item">Use a custom Background colour.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-color-rgb-range" class="form-group-item-half control-header-color-rgb-range" type="color" value="#000000" tabindex="1">
|
||||
<input id="control-header-color-rgb-text" class="form-group-item-half control-header-color-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-color-opacity-range">Opacity</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-color-opacity-range" class="control-header-color-opacity-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-color-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-color-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-radius" class="control-header-radius" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-radius"><span class="label-icon"></span> Corner radius</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-radius-helper form-helper-item">May not be visible if Theme Radius is set to 0.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
51
src/html/menu/content/header/coloraccent.html
Normal file
51
src/html/menu/content/header/coloraccent.html
Normal file
@ -0,0 +1,51 @@
|
||||
<div id="menu-content-header-coloraccent" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Colour/Accent</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-coloraccent-show" class="control-header-coloraccent-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-coloraccent-show"><span class="label-icon"></span> Show Colour/Accent</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-coloraccent-show-helper form-helper-item">Colour and Accent can also be found under Theme.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-coloraccent-dot-show" class="control-header-coloraccent-dot-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-coloraccent-dot-show"><span class="label-icon"></span> Show colour dots</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-coloraccent-style-label">Button style</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-coloraccent-style-box" class="control-header-coloraccent-style-box" type="radio" name="control-header-coloraccent-style" value="box" tabindex="-1">
|
||||
<label for="control-header-coloraccent-style-box"><span class="label-icon"></span> Box</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-coloraccent-style-clear" class="control-header-coloraccent-style-clear" type="radio" name="control-header-coloraccent-style" value="clear" tabindex="-1">
|
||||
<label for="control-header-coloraccent-style-clear"><span class="label-icon"></span> Clear</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-coloraccent-size-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-coloraccent-size-range" class="control-header-coloraccent-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-coloraccent-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-coloraccent-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-coloraccent-newline" class="control-header-coloraccent-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-coloraccent-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-coloraccent-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
174
src/html/menu/content/header/date.html
Normal file
174
src/html/menu/content/header/date.html
Normal file
@ -0,0 +1,174 @@
|
||||
<div id="menu-content-header-date" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Date</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-day-show" class="control-header-date-day-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-date-day-show"><span class="label-icon"></span> Day</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-day-display-number" class="control-header-date-day-display-number" type="radio" name="control-header-date-day-display" value="number" tabindex="-1">
|
||||
<label for="control-header-date-day-display-number"><span class="label-icon"></span> As number</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-date-day-week-start-label">Start of the week</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-day-week-start-monday" class="control-header-date-day-week-start-monday" type="radio" name="control-header-date-day-week-start" value="monday" tabindex="-1">
|
||||
<label for="control-header-date-day-week-start-monday"><span class="label-icon"></span> Monday</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-day-week-start-sunday" class="control-header-date-day-week-start-sunday" type="radio" name="control-header-date-day-week-start" value="sunday" tabindex="-1">
|
||||
<label for="control-header-date-day-week-start-sunday"><span class="label-icon"></span> Sunday</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-date-day-week-start-helper form-helper-item">Define what day "1" represents, either Monday or Sunday.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-day-display-word" class="control-header-date-day-display-word" type="radio" name="control-header-date-day-display" value="word" tabindex="-1">
|
||||
<label for="control-header-date-day-display-word"><span class="label-icon"></span> As word</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-date-day-length-label">Word length</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-day-length-long" class="control-header-date-day-length-long" type="radio" name="control-header-date-day-length" value="long" tabindex="-1">
|
||||
<label for="control-header-date-day-length-long"><span class="label-icon"></span> Long</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-day-length-short" class="control-header-date-day-length-short" type="radio" name="control-header-date-day-length" value="short" tabindex="-1">
|
||||
<label for="control-header-date-day-length-short"><span class="label-icon"></span> Short</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-date-show" class="control-header-date-date-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-date-date-show"><span class="label-icon"></span> Date</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-date-display-number" class="control-header-date-date-display-number" type="radio" name="control-header-date-date-display" value="number" tabindex="-1">
|
||||
<label for="control-header-date-date-display-number"><span class="label-icon"></span> As number</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-date-display-word" class="control-header-date-date-display-word" type="radio" name="control-header-date-date-display" value="word" tabindex="-1">
|
||||
<label for="control-header-date-date-display-word"><span class="label-icon"></span> As word</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-date-ordinal" class="control-header-date-date-ordinal" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-date-date-ordinal"><span class="label-icon"></span> Ordinal numbers</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-date-date-ordinal-helper form-helper-item">Display Date as 1st, 2nd, 3rd, 4th etc.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-month-show" class="control-header-date-month-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-date-month-show"><span class="label-icon"></span> Month</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-month-display-number" class="control-header-date-month-display-number" type="radio" name="control-header-date-month-display" value="number" tabindex="-1">
|
||||
<label for="control-header-date-month-display-number"><span class="label-icon"></span> As number</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-month-ordinal" class="control-header-date-month-ordinal" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-date-month-ordinal"><span class="label-icon"></span> Ordinal numbers</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-date-month-ordinal-helper form-helper-item">Display Month as 1st, 2nd, 3rd, 4th etc.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-month-display-word" class="control-header-date-month-display-word" type="radio" name="control-header-date-month-display" value="word" tabindex="-1">
|
||||
<label for="control-header-date-month-display-word"><span class="label-icon"></span> As word</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-date-month-length-label">Word length</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-month-length-long" class="control-header-date-month-length-long" type="radio" name="control-header-date-month-length" value="long" tabindex="-1">
|
||||
<label for="control-header-date-month-length-long"><span class="label-icon"></span> Long</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-month-length-short" class="control-header-date-month-length-short" type="radio" name="control-header-date-month-length" value="short" tabindex="-1">
|
||||
<label for="control-header-date-month-length-short"><span class="label-icon"></span> Short</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-year-show" class="control-header-date-year-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-date-year-show"><span class="label-icon"></span> Year</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-year-display-number" class="control-header-date-year-display-number" type="radio" name="control-header-date-year-display" value="number" tabindex="-1">
|
||||
<label for="control-header-date-year-display-number"><span class="label-icon"></span> As number</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-year-display-word" class="control-header-date-year-display-word" type="radio" name="control-header-date-year-display" value="word" tabindex="-1">
|
||||
<label for="control-header-date-year-display-word"><span class="label-icon"></span> As word</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-separator-show" class="control-header-date-separator-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-date-separator-show"><span class="label-icon"></span> Separators</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-date-format-label">Format</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-format-datemonth" class="control-header-date-format-datemonth" type="radio" name="control-header-date-format" value="datemonth" tabindex="-1">
|
||||
<label for="control-header-date-format-datemonth"><span class="label-icon"></span> Date/Month</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-format-monthdate" class="control-header-date-format-monthdate" type="radio" name="control-header-date-format" value="monthdate" tabindex="-1">
|
||||
<label for="control-header-date-format-monthdate"><span class="label-icon"></span> Month/Date</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-date-size-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-date-size-range" class="control-header-date-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-date-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-date-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-newline" class="control-header-date-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-date-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-date-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
43
src/html/menu/content/header/editadd.html
Normal file
43
src/html/menu/content/header/editadd.html
Normal file
@ -0,0 +1,43 @@
|
||||
<div id="menu-content-header-editadd" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Edit/Add</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-editadd-show" class="control-header-editadd-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-editadd-show"><span class="label-icon"></span> Show Edit/Add</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-editadd-style-label">Button style</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-editadd-style-box" class="control-header-editadd-style-box" type="radio" name="control-header-editadd-style" value="box" tabindex="-1">
|
||||
<label for="control-header-editadd-style-box"><span class="label-icon"></span> Box</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-editadd-style-clear" class="control-header-editadd-style-clear" type="radio" name="control-header-editadd-style" value="clear" tabindex="-1">
|
||||
<label for="control-header-editadd-style-clear"><span class="label-icon"></span> Clear</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-editadd-size-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-editadd-size-range" class="control-header-editadd-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-editadd-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-editadd-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-editadd-newline" class="control-header-editadd-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-editadd-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-editadd-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
52
src/html/menu/content/header/greeting.html
Normal file
52
src/html/menu/content/header/greeting.html
Normal file
@ -0,0 +1,52 @@
|
||||
<div id="menu-content-header-greeting" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Greeting</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-greeting-show" class="control-header-greeting-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-greeting-show"><span class="label-icon"></span> Show</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-greeting-type-label">Wording</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-greeting-type-good" class="control-header-greeting-type-good" type="radio" name="control-header-greeting-type" value="good" tabindex="-1">
|
||||
<label for="control-header-greeting-type-good"><span class="label-icon"></span> "Good morning..."</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-greeting-type-hello" class="control-header-greeting-type-hello" type="radio" name="control-header-greeting-type" value="hello" tabindex="-1">
|
||||
<label for="control-header-greeting-type-hello"><span class="label-icon"></span> "Hello..."</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-greeting-type-hi" class="control-header-greeting-type-hi" type="radio" name="control-header-greeting-type" value="hi" tabindex="-1">
|
||||
<label for="control-header-greeting-type-hi"><span class="label-icon"></span> "Hi..."</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-greeting-name">Name</label>
|
||||
<input id="control-header-greeting-name" class="control-header-greeting-name" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Nickname, alias or superhero name" tabindex="-1">
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-greeting-size-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-greeting-size-range" class="control-header-greeting-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-greeting-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-greeting-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-greeting-newline" class="control-header-greeting-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-greeting-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-greeting-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
13
src/html/menu/content/header/order.html
Normal file
13
src/html/menu/content/header/order.html
Normal file
@ -0,0 +1,13 @@
|
||||
<div id="menu-content-header-order" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Order</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-order-label">Header item order</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="header-order"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
21
src/html/menu/content/header/position.html
Normal file
21
src/html/menu/content/header/position.html
Normal file
@ -0,0 +1,21 @@
|
||||
<div id="menu-content-header-position" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Position when scrolling</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-position-sticky" class="control-header-position-sticky" type="radio" name="control-header-position" value="sticky" tabindex="-1">
|
||||
<label for="control-header-position-sticky"><span class="label-icon"></span> Sticky</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-position-sticky-helper form-helper-item">Header sticks to the page when scrolling up or down.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-position-inline" class="control-header-position-inline" type="radio" name="control-header-position" value="inline" tabindex="-1">
|
||||
<label for="control-header-position-inline"><span class="label-icon"></span> Inline</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-position-inline-helper form-helper-item">Header moves inline with the content when scrolling up or down.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
152
src/html/menu/content/header/search.html
Normal file
152
src/html/menu/content/header/search.html
Normal file
@ -0,0 +1,152 @@
|
||||
<div id="menu-content-header-search" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Search</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-show" class="control-header-search-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-search-show"><span class="label-icon"></span> Show</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-search-width-by-label">Search box width</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-width-by-auto" class="control-header-search-width-by-auto" type="radio" name="control-header-search-width" value="auto" tabindex="-1">
|
||||
<label for="control-header-search-width-by-auto"><span class="label-icon"></span> Auto</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-search-width-by-auto-helper form-helper-item">Search box will grow to best fit available space.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-width-by-custom" class="control-header-search-width-by-custom" type="radio" name="control-header-search-width" value="custom" tabindex="-1">
|
||||
<label for="control-header-search-width-by-custom"><span class="label-icon"></span> Custom</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-search-width-by-custom-helper form-helper-item">Define how wide the Search box should be inside the Header Area.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-search-width-size-range" class="control-header-search-width-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-search-width-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-search-width-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-search-style-label">Input style</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-style-box" class="control-header-search-style-box" type="radio" name="control-header-search-style" value="box" tabindex="-1">
|
||||
<label for="control-header-search-style-box"><span class="label-icon"></span> Box</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-style-clear" class="control-header-search-style-clear" type="radio" name="control-header-search-style" value="clear" tabindex="-1">
|
||||
<label for="control-header-search-style-clear"><span class="label-icon"></span> Clear</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-focus" class="control-header-search-focus" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-search-focus"><span class="label-icon"></span> Focus on load/refresh</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-search-focus-helper form-helper-item">May not work in some browsers.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-search-engine-label">Search engine</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-engine-google" class="control-header-search-engine-google" type="radio" name="control-header-search-engine" value="google" tabindex="-1">
|
||||
<label for="control-header-search-engine-google"><span class="label-icon"></span> Google</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-engine-duckduckgo" class="control-header-search-engine-duckduckgo" type="radio" name="control-header-search-engine" value="duckduckgo" tabindex="-1">
|
||||
<label for="control-header-search-engine-duckduckgo"><span class="label-icon"></span> DuckDuckGo</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-engine-youtube" class="control-header-search-engine-youtube" type="radio" name="control-header-search-engine" value="youtube" tabindex="-1">
|
||||
<label for="control-header-search-engine-youtube"><span class="label-icon"></span> YouTube</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-engine-giphy" class="control-header-search-engine-giphy" type="radio" name="control-header-search-engine" value="giphy" tabindex="-1">
|
||||
<label for="control-header-search-engine-giphy"><span class="label-icon"></span> Giphy</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-engine-bing" class="control-header-search-engine-bing" type="radio" name="control-header-search-engine" value="bing" tabindex="-1">
|
||||
<label for="control-header-search-engine-bing"><span class="label-icon"></span> Bing</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-engine-custom" class="control-header-search-engine-custom" type="radio" name="control-header-search-engine" value="custom" tabindex="-1">
|
||||
<label for="control-header-search-engine-custom"><span class="label-icon"></span> Custom</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-search-engine-custom-name">Name</label>
|
||||
<input id="control-header-search-engine-custom-name" class="control-header-search-engine-custom-name" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search engine name" tabindex="-1">
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-search-engine-custom-url">URL</label>
|
||||
<input id="control-header-search-engine-custom-url" class="control-header-search-engine-custom-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="-1">
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-search-engine-custom-helper form-helper-item">Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="</p>
|
||||
<p class="control-header-search-engine-custom-helper form-helper-item">nightTab will add the search term entered into the Search input at the end of the above URL.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-search-text-justify-label">Align Text</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x1 control-header-search-text-justify-grid">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-text-justify-left" class="control-header-search-text-justify-left" type="radio" name="control-header-search-text-justify" value="left" tabindex="-1">
|
||||
<label for="control-header-search-text-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-text-justify-center" class="control-header-search-text-justify-center" type="radio" name="control-header-search-text-justify" value="center" tabindex="-1">
|
||||
<label for="control-header-search-text-justify-center"><span class="label-icon"></span> <span class="sr-only">Centre</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-text-justify-right" class="control-header-search-text-justify-right" type="radio" name="control-header-search-text-justify" value="right" tabindex="-1">
|
||||
<label for="control-header-search-text-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-search-size-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-search-size-range" class="control-header-search-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-search-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-search-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-search-size-helper form-helper-item">Only the Search box width control will change the Width of the Search box.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-newtab" class="control-header-search-newtab" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-search-newtab"><span class="label-icon"></span> Open Search results in a new tab</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-newline" class="control-header-search-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-search-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-search-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
35
src/html/menu/content/header/settings.html
Normal file
35
src/html/menu/content/header/settings.html
Normal file
@ -0,0 +1,35 @@
|
||||
<div id="menu-content-header-settings" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Settings menu</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-menu-style-label">Button style</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-menu-style-box" class="control-header-menu-style-box" type="radio" name="control-header-menu-style" value="box" tabindex="-1">
|
||||
<label for="control-header-menu-style-box"><span class="label-icon"></span> Box</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-menu-style-clear" class="control-header-menu-style-clear" type="radio" name="control-header-menu-style" value="clear" tabindex="-1">
|
||||
<label for="control-header-menu-style-clear"><span class="label-icon"></span> Clear</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-menu-size-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-menu-size-range" class="control-header-menu-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-menu-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-menu-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-menu-newline" class="control-header-menu-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-menu-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-menu-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
46
src/html/menu/content/header/transitional.html
Normal file
46
src/html/menu/content/header/transitional.html
Normal file
@ -0,0 +1,46 @@
|
||||
<div id="menu-content-header-transitional" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Transitional words</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-transitional-show" class="control-header-transitional-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-transitional-show"><span class="label-icon"></span> Show</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-transitional-show-helper form-helper-item">Available when Date or Time is shown.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-transitional-type-label">Wording</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-transitional-type-timeanddate" class="control-header-transitional-type-timeanddate" type="radio" name="control-header-transitional-type" value="timeanddate" tabindex="-1">
|
||||
<label for="control-header-transitional-type-timeanddate"><span class="label-icon"></span> "The time and date is"</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-transitional-type-its" class="control-header-transitional-type-its" type="radio" name="control-header-transitional-type" value="its" tabindex="-1">
|
||||
<label for="control-header-transitional-type-its"><span class="label-icon"></span> "It's"</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-transitional-size-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-transitional-size-range" class="control-header-transitional-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-transitional-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-transitional-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-transitional-newline" class="control-header-transitional-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-transitional-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-transitional-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
15
src/html/menu/content/layout.html
Normal file
15
src/html/menu/content/layout.html
Normal file
@ -0,0 +1,15 @@
|
||||
<div id="menu-content-layout" class="menu-content menu-content-overscroll menu-content-layout">
|
||||
|
||||
@@include("./layout/scaling.html")
|
||||
|
||||
@@include("./layout/area.html")
|
||||
|
||||
@@include("./layout/order.html")
|
||||
|
||||
@@include("./layout/padding.html")
|
||||
|
||||
@@include("./layout/gutter.html")
|
||||
|
||||
@@include("./layout/page.html")
|
||||
|
||||
</div>
|
||||
62
src/html/menu/content/layout/area.html
Normal file
62
src/html/menu/content/layout/area.html
Normal file
@ -0,0 +1,62 @@
|
||||
<div id="menu-content-layout-area" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Area</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-layout-width-range">Width</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-layout-width-range" class="control-layout-width-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-layout-width-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-layout-width-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label>Area alignment</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x3 control-layout-alignment-grid">
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-topleft" class="control-layout-alignment-topleft" type="radio" name="control-layout-alignment" value="topleft" tabindex="-1">
|
||||
<label for="control-layout-alignment-topleft"><span class="label-icon"></span> <span class="sr-only">Top left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-topcenter" class="control-layout-alignment-topcenter" type="radio" name="control-layout-alignment" value="topcenter" tabindex="-1">
|
||||
<label for="control-layout-alignment-topcenter"><span class="label-icon"></span> <span class="sr-only">Top center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-topright" class="control-layout-alignment-topright" type="radio" name="control-layout-alignment" value="topright" tabindex="-1">
|
||||
<label for="control-layout-alignment-topright"><span class="label-icon"></span> <span class="sr-only">Top right</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-centerleft" class="control-layout-alignment-centerleft" type="radio" name="control-layout-alignment" value="centerleft" tabindex="-1">
|
||||
<label for="control-layout-alignment-centerleft"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-centercenter" class="control-layout-alignment-centercenter" type="radio" name="control-layout-alignment" value="centercenter" tabindex="-1">
|
||||
<label for="control-layout-alignment-centercenter"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-centerright" class="control-layout-alignment-centerright" type="radio" name="control-layout-alignment" value="centerright" tabindex="-1">
|
||||
<label for="control-layout-alignment-centerright"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-bottomleft" class="control-layout-alignment-bottomleft" type="radio" name="control-layout-alignment" value="bottomleft" tabindex="-1">
|
||||
<label for="control-layout-alignment-bottomleft"><span class="label-icon"></span> <span class="sr-only">Bottom left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-bottomcenter" class="control-layout-alignment-bottomcenter" type="radio" name="control-layout-alignment" value="bottomcenter" tabindex="-1">
|
||||
<label for="control-layout-alignment-bottomcenter"><span class="label-icon"></span> <span class="sr-only">Bottom Center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-bottomright" class="control-layout-alignment-bottomright" type="radio" name="control-layout-alignment" value="bottomright" tabindex="-1">
|
||||
<label for="control-layout-alignment-bottomright"><span class="label-icon"></span> <span class="sr-only">Bottom right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-layout-alignment-helper form-helper-item">Effects may not be visible if the Layout Area is full width or if Bookmarks fill the page.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
15
src/html/menu/content/layout/gutter.html
Normal file
15
src/html/menu/content/layout/gutter.html
Normal file
@ -0,0 +1,15 @@
|
||||
<div id="menu-content-layout-gutter" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Gutter</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-layout-gutter-range">Gutter between Header and Bookmark items</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-layout-gutter-range" class="control-layout-gutter-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-layout-gutter-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-layout-gutter-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
18
src/html/menu/content/layout/order.html
Normal file
18
src/html/menu/content/layout/order.html
Normal file
@ -0,0 +1,18 @@
|
||||
<div id="menu-content-layout-order" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Area order</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-order-headerlink" class="control-layout-order-headerlink" type="radio" name="control-layout-order" value="headerlink" tabindex="-1">
|
||||
<label for="control-layout-order-headerlink"><span class="label-icon"></span> Header then Bookmarks</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-order-linkheader" class="control-layout-order-linkheader" type="radio" name="control-layout-order" value="linkheader" tabindex="-1">
|
||||
<label for="control-layout-order-linkheader"><span class="label-icon"></span> Bookmarks then Header</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-layout-order-helper form-helper-item">Only available when Bookmarks are shown.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
15
src/html/menu/content/layout/padding.html
Normal file
15
src/html/menu/content/layout/padding.html
Normal file
@ -0,0 +1,15 @@
|
||||
<div id="menu-content-layout-padding" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Padding</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-layout-padding-range">Padding outside Header and Bookmark Area</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-layout-padding-range" class="control-layout-padding-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-layout-padding-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-layout-padding-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
35
src/html/menu/content/layout/page.html
Normal file
35
src/html/menu/content/layout/page.html
Normal file
@ -0,0 +1,35 @@
|
||||
<div id="menu-content-layout-page" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Page</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-layout-title">Title</label>
|
||||
<input id="control-layout-title" class="control-layout-title" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="New Tab" tabindex="-1">
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-scrollpastend" class="control-layout-scrollpastend" type="checkbox" tabindex="-1">
|
||||
<label for="control-layout-scrollpastend"><span class="label-icon"></span> Scroll past end</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label class="control-layout-scrollbars-label">Scrollbars style</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-scrollbars-auto" class="control-layout-scrollbars-auto" type="radio" name="control-layout-scrollbars" value="auto" tabindex="-1">
|
||||
<label for="control-layout-scrollbars-auto"><span class="label-icon"></span> Auto</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-scrollbars-thin" class="control-layout-scrollbars-thin" type="radio" name="control-layout-scrollbars" value="thin" tabindex="-1">
|
||||
<label for="control-layout-scrollbars-thin"><span class="label-icon"></span> Thin</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-scrollbars-none" class="control-layout-scrollbars-none" type="radio" name="control-layout-scrollbars" value="none" tabindex="-1">
|
||||
<label for="control-layout-scrollbars-none"><span class="label-icon"></span> Hidden</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-layout-scrollbars-helper form-helper-item">May not work in some browsers.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
21
src/html/menu/content/layout/scaling.html
Normal file
21
src/html/menu/content/layout/scaling.html
Normal file
@ -0,0 +1,21 @@
|
||||
<div id="menu-content-layout-scaling" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Scaling</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-layout-size-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-layout-size-range" class="control-layout-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-layout-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-layout-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-layout-size-helper form-helper-item">Resize all elements on the page.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-layout-size-helper form-helper-item">Take care as some elements could scale up to outside the page.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
5
src/html/menu/content/nighttab.html
Normal file
5
src/html/menu/content/nighttab.html
Normal file
@ -0,0 +1,5 @@
|
||||
<div id="menu-content-nighttab" class="menu-content menu-content-nighttab is-hidden">
|
||||
|
||||
@@include("./nighttab/nighttab.html")
|
||||
|
||||
</div>
|
||||
19
src/html/menu/content/nighttab/nighttab.html
Normal file
19
src/html/menu/content/nighttab/nighttab.html
Normal file
@ -0,0 +1,19 @@
|
||||
<div id="menu-content-nighttab-nighttab" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">nightTab</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<p class="mb-1">Version <strong class="display-version"></strong></p>
|
||||
<p class="display-name small"></p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<p>Project repository on <a href="https://github.com/zombieFox/nightTab" target="_blank" tabindex="-1">GitHub</a>.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<p>For feedback and support, submit an <a href="https://github.com/zombieFox/nightTab/issues" target="_blank" tabindex="-1">Issues.</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
21
src/html/menu/content/theme.html
Normal file
21
src/html/menu/content/theme.html
Normal file
@ -0,0 +1,21 @@
|
||||
<div id="menu-content-theme" class="menu-content menu-content-overscroll menu-content-theme is-hidden">
|
||||
|
||||
@@include("./theme/preset.html")
|
||||
|
||||
@@include("./theme/saved.html")
|
||||
|
||||
@@include("./theme/style.html")
|
||||
|
||||
@@include("./theme/fonts.html")
|
||||
|
||||
@@include("./theme/color.html")
|
||||
|
||||
@@include("./theme/accent.html")
|
||||
|
||||
@@include("./theme/radius.html")
|
||||
|
||||
@@include("./theme/shadow.html")
|
||||
|
||||
@@include("./theme/shade.html")
|
||||
|
||||
</div>
|
||||
50
src/html/menu/content/theme/accent.html
Normal file
50
src/html/menu/content/theme/accent.html
Normal file
@ -0,0 +1,50 @@
|
||||
<div id="menu-content-theme-accent" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Accent</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-accent-rgb-color">Colour</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-accent-rgb-color" class="form-group-item-half control-theme-accent-rgb-color" type="color" value="#000000" tabindex="1" autocomplete="off">
|
||||
<input id="control-theme-accent-rgb-text" class="form-group-item-half control-theme-accent-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
||||
<button class="control-theme-accent-rgb-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-style-light-helper form-helper-item">Accent Colour can also be changed from the Header Area.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-theme-accent-random-active" class="control-theme-accent-random-active" type="checkbox" tabindex="-1">
|
||||
<label for="control-theme-accent-random-active"><span class="label-icon"></span> Random Accent colour on load/refresh</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-theme-accent-random-style-any" class="control-theme-accent-random-style-any" type="radio" name="control-theme-accent-random-style" value="any" tabindex="-1">
|
||||
<label for="control-theme-accent-random-style-any"><span class="label-icon"></span> Any colour</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-theme-accent-random-style-light" class="control-theme-accent-random-style-light" type="radio" name="control-theme-accent-random-style" value="light" tabindex="-1">
|
||||
<label for="control-theme-accent-random-style-light"><span class="label-icon"></span> Light colours</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-theme-accent-random-style-dark" class="control-theme-accent-random-style-dark" type="radio" name="control-theme-accent-random-style" value="dark" tabindex="-1">
|
||||
<label for="control-theme-accent-random-style-dark"><span class="label-icon"></span> Dark colours</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-theme-accent-random-style-pastel" class="control-theme-accent-random-style-pastel" type="radio" name="control-theme-accent-random-style" value="pastel" tabindex="-1">
|
||||
<label for="control-theme-accent-random-style-pastel"><span class="label-icon"></span> Pastel colours</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-theme-accent-random-style-saturated" class="control-theme-accent-random-style-saturated" type="radio" name="control-theme-accent-random-style" value="saturated" tabindex="-1">
|
||||
<label for="control-theme-accent-random-style-saturated"><span class="label-icon"></span> Saturated colours</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<button class="control-theme-accent-randomise button" tabindex="-1">Randomise now</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
165
src/html/menu/content/theme/color.html
Normal file
165
src/html/menu/content/theme/color.html
Normal file
@ -0,0 +1,165 @@
|
||||
<div id="menu-content-theme-color" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Colour</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-sticky">
|
||||
<div class="form-wrap">
|
||||
<p>Colour shades</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block form-group-border form-group-border-theme-color">
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-10"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-09"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-08"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-07"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-06"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-05"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-04"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-03"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-02"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-01"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless form-group-item-small">
|
||||
<div class="theme-color-box theme-color"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-01"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-02"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-03"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-04"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-05"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-06"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-07"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-08"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-09"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-color-helper form-helper-item">Backgrounds, Bookmarks and Modals use shades from the left.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-color-helper form-helper-item">Text and form elements use shades from the right.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-color-helper form-helper-item">For a light look switch to the Light Style and then select a Shade colour.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-rgb-color">Primary colour</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-color-rgb-color" class="form-group-item-half control-theme-color-rgb-color" type="color" value="#000000" tabindex="1" autocomplete="off">
|
||||
<input id="control-theme-color-rgb-text" class="form-group-item-half control-theme-color-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
||||
<button class="control-theme-color-rgb-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-color-helper form-helper-item">Light and dark shades from this colour are used across nightTabs.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-hsl-h-range">Hue</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-color-hsl-h-range" class="control-theme-color-hsl-h-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-color-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-hsl-s-range">Saturation</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-color-hsl-s-range" class="control-theme-color-hsl-s-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-color-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-hsl-l-range">Lightness</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-color-hsl-l-range" class="control-theme-color-hsl-l-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-color-hsl-l-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-rgb-r-range">Red</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-color-rgb-r-range" class="control-theme-color-rgb-r-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-color-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-rgb-g-range">Green</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-color-rgb-g-range" class="control-theme-color-rgb-g-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-color-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-rgb-b-range">Blue</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-color-rgb-b-range" class="control-theme-color-rgb-b-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-color-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-contrast-light-range">Light shade contrast</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-color-contrast-light-range" class="control-theme-color-contrast-light-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-color-contrast-light-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-theme-color-contrast-light-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-contrast-dark-range">Dark shade contrast</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-color-contrast-dark-range" class="control-theme-color-contrast-dark-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-color-contrast-dark-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-theme-color-contrast-dark-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
126
src/html/menu/content/theme/fonts.html
Normal file
126
src/html/menu/content/theme/fonts.html
Normal file
@ -0,0 +1,126 @@
|
||||
<div id="menu-content-theme-fonts" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Fonts</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-font-display-name">Display font</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-font-display-name" class="control-theme-font-display-name" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Google font name" tabindex="-1">
|
||||
<button class="control-theme-font-display-name-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-font-display-helper form-helper-item">Use a <a href="https://fonts.google.com/" target="_blank">Google Font</a> to customise the Clock, Date, Group names and Bookmark Letters.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-font-display-helper form-helper-item">Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Fredoka One" or "Kanit"</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-font-display-helper form-helper-item">Clear the field to use the default font "Fjalla One".</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-font-display-weight-range">Font weight</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-font-display-weight-range" class="control-theme-font-display-weight-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-font-display-weight-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-theme-font-display-weight-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group">
|
||||
<button class="control-theme-font-display-light button" tabindex="-1">Light</button>
|
||||
<button class="control-theme-font-display-regular button" tabindex="-1">Regular</button>
|
||||
<button class="control-theme-font-display-bold button" tabindex="-1">Bold</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-font-display-helper form-helper-item">Not all fonts support all weights. Refer to the Google Font page to see which are available.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label>Font style</label>
|
||||
</div>
|
||||
<div class="form-inline">
|
||||
<div class="form-inline form-inline-spacer">
|
||||
<div class="form-wrap">
|
||||
<input id="control-theme-font-display-style-normal" class="control-theme-font-display-style-normal" name="control-theme-font-display-style" type="radio" value="normal" tabindex="-1">
|
||||
<label for="control-theme-font-display-style-normal"><span class="label-icon"></span> Normal</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-theme-font-display-style-italic" class="control-theme-font-display-style-italic" type="radio" name="control-theme-font-display-style" value="italic" tabindex="-1">
|
||||
<label for="control-theme-font-display-style-italic"><span class="label-icon"></span> Italic</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap ml-auto">
|
||||
<button class="control-theme-font-display-style-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-font-ui-name">UI font</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-font-ui-name" class="control-theme-font-ui-name" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Google font name" tabindex="-1">
|
||||
<button class="control-theme-font-ui-name-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-font-ui-helper form-helper-item">Use a <a href="https://fonts.google.com/" target="_blank">Google Font</a> to customise the Bookmark name, URL and form elements.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-font-ui-helper form-helper-item">Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto", "Source Sans Pro" or "Noto Sans"</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-font-ui-helper form-helper-item">Clear the field to use the default font "Open Sans".</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-font-ui-weight">Font weight</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-font-ui-weight-range" class="control-theme-font-ui-weight-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-font-ui-weight-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-theme-font-ui-weight-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group">
|
||||
<button class="control-theme-font-ui-light button" tabindex="-1">Light</button>
|
||||
<button class="control-theme-font-ui-regular button" tabindex="-1">Regular</button>
|
||||
<button class="control-theme-font-ui-bold button" tabindex="-1">Bold</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-font-ui-helper form-helper-item">Not all fonts support all weights. Refer to the Google Font page to see which are available.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label>Font style</label>
|
||||
</div>
|
||||
<div class="form-inline">
|
||||
<div class="form-inline form-inline-spacer">
|
||||
<div class="form-wrap">
|
||||
<input id="control-theme-font-ui-style-normal" class="control-theme-font-ui-style-normal" type="radio" name="control-theme-font-ui-style" value="normal" tabindex="-1">
|
||||
<label for="control-theme-font-ui-style-normal"><span class="label-icon"></span> Normal</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-theme-font-ui-style-italic" class="control-theme-font-ui-style-italic" type="radio" name="control-theme-font-ui-style" value="italic" tabindex="-1">
|
||||
<label for="control-theme-font-ui-style-italic"><span class="label-icon"></span> Italic</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap ml-auto">
|
||||
<button class="control-theme-font-ui-style-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
11
src/html/menu/content/theme/preset.html
Normal file
11
src/html/menu/content/theme/preset.html
Normal file
@ -0,0 +1,11 @@
|
||||
<div id="menu-content-theme-preset" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Preset</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap theme-preset"></div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-preset-helper form-helper-item">Applying a Preset will replace the current Colour, Accent, Font, Style, Radius, Shadow and Shade.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
15
src/html/menu/content/theme/radius.html
Normal file
15
src/html/menu/content/theme/radius.html
Normal file
@ -0,0 +1,15 @@
|
||||
<div id="menu-content-theme-radius" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Radius</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-radius-range">All corners</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-radius-range" class="control-theme-radius-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-radius-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-theme-radius-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
20
src/html/menu/content/theme/saved.html
Normal file
20
src/html/menu/content/theme/saved.html
Normal file
@ -0,0 +1,20 @@
|
||||
<div id="menu-content-theme-saved" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Saved</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap form-wrap-hide-space theme-custom"></div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-inline">
|
||||
<button class="control-theme-custom-add button" tabindex="-1">Save current theme</button>
|
||||
<div class="form-input-button form-input-hide">
|
||||
<input id="control-theme-custom-edit" class="control-theme-custom-edit" type="checkbox" tabindex="1">
|
||||
<label for="control-theme-custom-edit"><span class="label-icon"></span> Edit</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-custom-helper form-helper-item">Saving a Theme will record the current Colour, Accent, Font, Style, Radius, Shadow and Shade.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
18
src/html/menu/content/theme/shade.html
Normal file
18
src/html/menu/content/theme/shade.html
Normal file
@ -0,0 +1,18 @@
|
||||
<div id="menu-content-theme-shade" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Shade</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-shade-opacity-range">Opacity</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-shade-opacity-range" class="control-theme-shade-opacity-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-shade-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-theme-shade-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-shade-opacity-helper form-helper-item">The shade appears behind Modals and the Menu.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
15
src/html/menu/content/theme/shadow.html
Normal file
15
src/html/menu/content/theme/shadow.html
Normal file
@ -0,0 +1,15 @@
|
||||
<div id="menu-content-theme-shadow" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Shadow</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-shadow-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-shadow-range" class="control-theme-shadow-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-shadow-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-theme-shadow-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
21
src/html/menu/content/theme/style.html
Normal file
21
src/html/menu/content/theme/style.html
Normal file
@ -0,0 +1,21 @@
|
||||
<div id="menu-content-theme-style" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Style</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-theme-style-dark" class="control-theme-style-dark" type="radio" name="control-theme-style" value="dark" tabindex="-1">
|
||||
<label for="control-theme-style-dark"><span class="label-icon"></span> Dark</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="-1">
|
||||
<label for="control-theme-style-light"><span class="label-icon"></span> Light</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-style-helper form-helper-item">Flip the colour shades defined by the primary Colour.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-style-helper form-helper-item">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,140 +0,0 @@
|
||||
<div id="menu-content-background" class="menu-content menu-content-overscroll menu-content-background is-hidden">
|
||||
<div id="menu-content-background-color" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Colour</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-background-color-by-theme" class="control-background-color-by-theme" type="radio" name="control-background-color-by" value="theme" tabindex="-1">
|
||||
<label for="control-background-color-by-theme"><span class="label-icon"></span> Theme colour</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-background-color-by-theme-helper form-helper-item">Use the Background colour defined by the Theme.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-background-color-by-custom" class="control-background-color-by-custom" type="radio" name="control-background-color-by" value="custom" tabindex="-1">
|
||||
<label for="control-background-color-by-custom"><span class="label-icon"></span> Custom colour</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-background-color-by-custom-helper form-helper-item">Use a custom Background colour.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-background-color-by-custom-helper form-helper-item">Take care as some colours may make the Clock, Date and other text unreadable.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-background-color-rgb-range" class="form-group-item-half control-background-color-rgb-range" type="color" value="#000000" tabindex="1">
|
||||
<input id="control-background-color-rgb-text" class="form-group-item-half control-background-color-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-background-image" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Image</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-background-image-show" class="control-background-image-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-background-image-show"><span class="label-icon"></span> Show</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-background-image-from-file" class="control-background-image-from-file" type="radio" name="control-background-image-from" value="file" tabindex="-1">
|
||||
<label for="control-background-image-from-file"><span class="label-icon"></span> Use local file</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-inline">
|
||||
<div class="form-input-button form-input-hide">
|
||||
<input id="control-background-image-file" class="control-background-image-file" type="file">
|
||||
<label for="control-background-image-file">Select image</label>
|
||||
</div>
|
||||
<button class="control-background-image-file-clear button">Clear image</button>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-background-image-file-helper form-helper-item">Max image size 5MB, (due to browser local storage limits).</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-background-image-file-helper form-helper-item">Take care with large files, they may impact performance.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="control-background-image-file-feedback form-feedback"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-background-image-from-url" class="control-background-image-from-url" type="radio" name="control-background-image-from" value="url" tabindex="-1">
|
||||
<label for="control-background-image-from-url"><span class="label-icon"></span> Use URL</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<textarea id="control-background-image-url" class="control-background-image-url" spellcheck="false" placeholder="https://..." tabindex="-1"></textarea>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-background-image-url-helper form-helper-item">If adding more than one URL separate them by spaces or on new lines. If more than one is entered a random background image will be used on load.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-helper">
|
||||
<p class="control-background-image-url-helper form-helper-item">Unsplash can be used for random images, eg:</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-background-image-url-helper form-helper-item"><i>https://source.unsplash.com/random/1920x1080/?night,day,sky</i></p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-background-image-url-helper form-helper-item">Change parameters after <i>.../random/</i> for more options. Loading times may vary.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-background-image-opacity-range">Opacity</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-background-image-opacity-range" class="control-background-image-opacity-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-background-image-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-background-image-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-background-image-grayscale-range">Grayscale</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-background-image-grayscale-range" class="control-background-image-grayscale-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-background-image-grayscale-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-background-image-grayscale-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-background-image-blur-range">Blur</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-background-image-blur-range" class="control-background-image-blur-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-background-image-blur-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-background-image-blur-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-background-image-accent-range">Accent overlay</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-background-image-accent-range" class="control-background-image-accent-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-background-image-accent-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-background-image-accent-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-background-image-scale-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-background-image-scale-range" class="control-background-image-scale-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-background-image-scale-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-background-image-scale-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,369 +0,0 @@
|
||||
<div id="menu-content-bookmarks" class="menu-content menu-content-overscroll menu-content-bookmarks is-hidden">
|
||||
<div id="menu-content-bookmarks-area" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Area</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-area-width-range">Width</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-area-width-range" class="control-link-area-width-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-area-width-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-area-width-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<button class="control-link-area-width-match button" tabindex="-1">Match Header Area</button>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-area-width-helper form-helper-item">Max width is defined by Layout Area Width.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label class="control-link-area-justify-label">Horizontal alignment</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x1 control-link-area-justify-grid">
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-area-justify-left" class="control-link-area-justify-left" type="radio" name="control-link-area-justify" value="left" tabindex="-1">
|
||||
<label for="control-link-area-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-area-justify-center" class="control-link-area-justify-center" type="radio" name="control-link-area-justify" value="center" tabindex="-1">
|
||||
<label for="control-link-area-justify-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-area-justify-right" class="control-link-area-justify-right" type="radio" name="control-link-area-justify" value="right" tabindex="-1">
|
||||
<label for="control-link-area-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-area-justify-helper form-helper-item">Effects may not be visible if the Bookmark Area is full width.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-bookmarks-bookmarks" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Bookmarks</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-show" class="control-link-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-link-show"><span class="label-icon"></span> Show</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-size-range">Bookmark Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-size-range" class="control-link-item-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label class="control-link-item-display-alignment-label">Content alignment</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x3 control-link-item-display-alignment-grid">
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-topleft" class="control-link-item-display-alignment-topleft" type="radio" name="control-link-item-display-alignment" value="topleft" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-topleft"><span class="label-icon"></span> <span class="sr-only">Top left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-topcenter" class="control-link-item-display-alignment-topcenter" type="radio" name="control-link-item-display-alignment" value="topcenter" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-topcenter"><span class="label-icon"></span> <span class="sr-only">Top center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-topright" class="control-link-item-display-alignment-topright" type="radio" name="control-link-item-display-alignment" value="topright" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-topright"><span class="label-icon"></span> <span class="sr-only">Top right</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-centerleft" class="control-link-item-display-alignment-centerleft" type="radio" name="control-link-item-display-alignment" value="centerleft" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-centerleft"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-centercenter" class="control-link-item-display-alignment-centercenter" type="radio" name="control-link-item-display-alignment" value="centercenter" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-centercenter"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-centerright" class="control-link-item-display-alignment-centerright" type="radio" name="control-link-item-display-alignment" value="centerright" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-centerright"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-bottomleft" class="control-link-item-display-alignment-bottomleft" type="radio" name="control-link-item-display-alignment" value="bottomleft" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-bottomleft"><span class="label-icon"></span> <span class="sr-only">Bottom left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-bottomcenter" class="control-link-item-display-alignment-bottomcenter" type="radio" name="control-link-item-display-alignment" value="bottomcenter" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-bottomcenter"><span class="label-icon"></span> <span class="sr-only">Bottom Center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-alignment-bottomright" class="control-link-item-display-alignment-bottomright" type="radio" name="control-link-item-display-alignment" value="bottomright" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-bottomright"><span class="label-icon"></span> <span class="sr-only">Bottom right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-rotate-range">Content rotation</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-rotate-range" class="control-link-item-display-rotate-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-display-rotate-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-rotate-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-translate-x-range">Content horizontally offset</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-translate-x-range" class="control-link-item-display-translate-x-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-display-translate-x-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-translate-x-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-translate-y-range">Content vertically offset</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-translate-y-range" class="control-link-item-display-translate-y-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-display-translate-y-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-translate-y-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-gutter-range">Content gutter</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-gutter-range" class="control-link-item-display-gutter-range mr-3" type="range" value="0" tabindex="1">
|
||||
<input class="control-link-item-display-gutter-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-gutter-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-direction-horizontal" class="control-link-item-display-direction-horizontal" type="radio" name="control-link-item-display-direction" value="horizontal" tabindex="-1">
|
||||
<label for="control-link-item-display-direction-horizontal"><span class="label-icon"></span> Align contents horizontally</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-direction-vertical" class="control-link-item-display-direction-vertical" type="radio" name="control-link-item-display-direction" value="vertical" tabindex="-1">
|
||||
<label for="control-link-item-display-direction-vertical"><span class="label-icon"></span> Align contents vertically</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-display-direction-helper form-helper-item">Only available when Letter/Icon and Name are shown.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-display-direction-helper form-helper-item">Vertical alignment works well with Bookmark Block Style.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-display-direction-helper form-helper-item">Horizontal alignment works well with Bookmark List Style.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-order-letconname" class="control-link-item-display-order-letconname" type="radio" name="control-link-item-display-order" value="letconname" tabindex="-1">
|
||||
<label for="control-link-item-display-order-letconname"><span class="label-icon"></span> Order Letter/Icon then Name</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-order-nameletcon" class="control-link-item-display-order-nameletcon" type="radio" name="control-link-item-display-order" value="nameletcon" tabindex="-1">
|
||||
<label for="control-link-item-display-order-nameletcon"><span class="label-icon"></span> Order Name then Letter/Icon</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-display-order-helper form-helper-item">Only available when Letter/Icon and Name are shown.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-letcon-show" class="control-link-item-display-letcon-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-link-item-display-letcon-show"><span class="label-icon"></span> Letter/Icon</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-letcon-letter-size-range">Letter size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-letcon-letter-size-range" class="control-link-item-display-letcon-letter-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-display-letcon-letter-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-letcon-letter-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-letcon-icon-size-range">Icon size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-letcon-icon-size-range" class="control-link-item-display-letcon-icon-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-display-letcon-icon-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-letcon-icon-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-display-name-show" class="control-link-item-display-name-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-link-item-display-name-show"><span class="label-icon"></span> Name</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-display-name-size-range">Name size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-display-name-size-range" class="control-link-item-display-name-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-display-name-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-display-name-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-url-show" class="control-link-item-url-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-link-item-url-show"><span class="label-icon"></span> Show URL on Bookmark hover</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-line-show" class="control-link-item-line-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-link-item-line-show"><span class="label-icon"></span> Show Bookmark line</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-shadow-show" class="control-link-item-shadow-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-link-item-shadow-show"><span class="label-icon"></span> Show shadow on Bookmark hover</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-shadow-show-helper form-helper-item">Effects may not be visible if Theme Shadow is set to 0.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-hoverscale" class="control-link-item-hoverscale" type="checkbox" tabindex="-1">
|
||||
<label for="control-link-item-hoverscale"><span class="label-icon"></span> Grow on Bookmark hover</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-newtab" class="control-link-newtab" type="checkbox" tabindex="-1">
|
||||
<label for="control-link-newtab"><span class="label-icon"></span> Open Bookmarks in a new tab</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-bookmarks-color" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Background colour</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-color-by-theme" class="control-link-item-color-by-theme" type="radio" name="control-link-item-color-by" value="theme" tabindex="-1">
|
||||
<label for="control-link-item-color-by-theme"><span class="label-icon"></span> Theme colour</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-color-by-theme-helper form-helper-item">Use the Background colour defined by the Theme.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-item-color-by-custom" class="control-link-item-color-by-custom" type="radio" name="control-link-item-color-by" value="custom" tabindex="-1">
|
||||
<label for="control-link-item-color-by-custom"><span class="label-icon"></span> Custom colour</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-color-by-custom-helper form-helper-item">Use a custom Background colour.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-color-by-custom-helper form-helper-item">Take care as some colours may make the Letter/Icon and Name unreadable.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-color-rgb-range" class="form-group-item-half control-link-item-color-rgb-range" type="color" value="#000000" tabindex="1">
|
||||
<input id="control-link-item-color-rgb-text" class="form-group-item-half control-link-item-color-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-bookmarks-border" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Border</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-border-range">All sides</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-border-range" class="control-link-item-border-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-border-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-border-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-bookmarks-style" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Style</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-style-block" class="control-link-style-block" type="radio" name="control-link-style" value="block" tabindex="-1">
|
||||
<label for="control-link-style-block"><span class="label-icon"></span> Block</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-style-block-helper form-helper-item">Bookmark tiles more square shaped.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-style-list" class="control-link-style-list" type="radio" name="control-link-style" value="list" tabindex="-1">
|
||||
<label for="control-link-style-list"><span class="label-icon"></span> List</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-style-list-helper form-helper-item">Bookmark tiles more short and wide.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-bookmarks-orientation" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Orientation</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-orientation-top" class="control-link-orientation-top" type="radio" name="control-link-orientation" value="top" tabindex="-1">
|
||||
<label for="control-link-orientation-top"><span class="label-icon"></span> Top</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-link-orientation-bottom" class="control-link-orientation-bottom" type="radio" name="control-link-orientation" value="bottom" tabindex="-1">
|
||||
<label for="control-link-orientation-bottom"><span class="label-icon"></span> Bottom</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-orientation-helper form-helper-item">Display the URL and Controls either at the top or bottom of a Bookmark Tile.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-bookmarks-sort" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Sort</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<div class="form-inline">
|
||||
<button class="control-link-sort-letter button" tabindex="-1">By letter</button>
|
||||
<button class="control-link-sort-icon button" tabindex="-1">By icon</button>
|
||||
<button class="control-link-sort-name button" tabindex="-1">By name</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-bookmarks-accent" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Accent override</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<button class="control-link-accent-clear button" tabindex="-1">Remove all override colours</button>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<button class="control-link-accent-set button" tabindex="-1">Add override colours</button>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-accent-set-helper form-helper-item">Adds a unique override colour to each Bookmark.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,19 +0,0 @@
|
||||
<div class="menu-content menu-content-coffee is-hidden">
|
||||
<div class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Coffee for fuel</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<p>nightTab is free, appreciation is welcome in the form of coffee!</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<a href="https://www.buymeacoffee.com/zombieFox" class="button button-large px-4 py-3">
|
||||
<img src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" class="mr-2">
|
||||
<span class="button-text">Buy me a coffee</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,50 +0,0 @@
|
||||
<div id="menu-content-data" class="menu-content menu-content-overscroll menu-content-data is-hidden">
|
||||
<div id="menu-content-data-restore" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Restore</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<div class="form-input-button form-input-hide">
|
||||
<input id="control-data-import" class="control-data-import" type="file" tabindex="-1">
|
||||
<label for="control-data-import">Import data</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-data-import-helper form-helper-item">Restore a previously exported nightTab backup.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="control-data-import-feedback form-feedback"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-data-backup" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Backup</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<button class="control-data-export button" tabindex="-1">Export data</button>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-data-export-helper form-helper-item">Download a backup of your nightTab Bookmarks and Settings.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-data-export-helper form-helper-item">This file can later be imported on this or another deivce.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-data-clear" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Clear</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<button class="control-data-clear button" tabindex="-1">Clear data</button>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-data-clear-helper form-helper-item">Wipe all data and restore nightTab to default state.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,124 +0,0 @@
|
||||
<div id="menu-content-groups" class="menu-content menu-content-overscroll menu-content-groups is-hidden">
|
||||
<div id="menu-content-groups-area" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Area</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<div class="form-wrap">
|
||||
<label class="control-group-area-justify-label">Group horizontal alignment</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x1 control-group-area-justify-grid">
|
||||
<div class="form-wrap">
|
||||
<input id="control-group-area-justify-left" class="control-group-area-justify-left" type="radio" name="control-group-area-justify" value="left" tabindex="-1">
|
||||
<label for="control-group-area-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-group-area-justify-center" class="control-group-area-justify-center" type="radio" name="control-group-area-justify" value="center" tabindex="-1">
|
||||
<label for="control-group-area-justify-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-group-area-justify-right" class="control-group-area-justify-right" type="radio" name="control-group-area-justify" value="right" tabindex="-1">
|
||||
<label for="control-group-area-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-group-area-justify-helper form-helper-item">Effects may not be visible if the Group Name is not shown.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-groups-names" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Names</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-group-name-show" class="control-group-name-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-group-name-show"><span class="label-icon"></span> Show</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label for="control-group-name-size-range">Name Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-group-name-size-range" class="control-group-name-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-group-name-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-group-name-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-groups-order" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Open all Bookmarks</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-group-openall-show" class="control-group-openall-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-group-openall-show"><span class="label-icon"></span> Show</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label for="control-group-openall-size-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-group-openall-size-range" class="control-group-openall-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-group-openall-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-group-openall-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label class="control-group-openall-style-label">Button style</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-group-openall-style-box" class="control-group-openall-style-box" type="radio" name="control-group-openall-style" value="box" tabindex="-1">
|
||||
<label for="control-group-openall-style-box"><span class="label-icon"></span> Box</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-group-openall-style-clear" class="control-group-openall-style-clear" type="radio" name="control-group-openall-style" value="clear" tabindex="-1">
|
||||
<label for="control-group-openall-style-clear"><span class="label-icon"></span> Clear</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-groups-order" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Order</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-group-order-headerbody" class="control-group-order-headerbody" type="radio" name="control-group-order" value="headerbody" tabindex="1">
|
||||
<label for="control-group-order-headerbody"><span class="label-icon"></span> Group Name then Bookmarks</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-group-order-bodyheader" class="control-group-order-bodyheader" type="radio" name="control-group-order" value="bodyheader" tabindex="1">
|
||||
<label for="control-group-order-bodyheader"><span class="label-icon"></span> Bookmarks then Group Name</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-groups-border" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Border</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-group-border-range">Between groups</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-group-border-range" class="control-group-border-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-group-border-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-group-border-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-group-border-helper form-helper-item">Border between groups may not be visible if there is only one group.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,868 +0,0 @@
|
||||
<div id="menu-content-header" class="menu-content menu-content-overscroll menu-content-header is-hidden">
|
||||
<div id="menu-content-header-area" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Area</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-area-width-range">Width</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-area-width-range" class="control-header-area-width-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-area-width-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-area-width-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<button class="control-header-area-width-match button" tabindex="-1">Match Bookmarks Area</button>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-area-width-helper form-helper-item">Max width is defined by Layout Area Width.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-area-justify-label">Area horizontal alignment</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x1 control-header-area-justify-grid">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-area-justify-left" class="control-header-area-justify-left" type="radio" name="control-header-area-justify" value="left" tabindex="-1">
|
||||
<label for="control-header-area-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-area-justify-center" class="control-header-area-justify-center" type="radio" name="control-header-area-justify" value="center" tabindex="-1">
|
||||
<label for="control-header-area-justify-center"><span class="label-icon"></span> <span class="sr-only">Centre</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-area-justify-right" class="control-header-area-justify-right" type="radio" name="control-header-area-justify" value="right" tabindex="-1">
|
||||
<label for="control-header-area-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-area-justify-helper form-helper-item">Effects may not be visible if the Header Area is full width.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-area-align-label">Header item vertical alignment</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-area-align-center" class="control-header-area-align-center" type="radio" name="control-header-area-align" value="center" tabindex="-1">
|
||||
<label for="control-header-area-align-center"><span class="label-icon"></span> Center</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-area-align-center-helper form-helper-item">Header items aligned to each others centres.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-area-align-baseline" class="control-header-area-align-baseline" type="radio" name="control-header-area-align" value="baseline" tabindex="-1">
|
||||
<label for="control-header-area-align-baseline"><span class="label-icon"></span> Baseline</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-area-align-baseline-helper form-helper-item">Header items aligned to the text baseline. Useful for when the Clock, Date and other text is sized large and need to sit on a line.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-item-justify-label">Item horizontal alignment</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x1 control-header-item-justify-grid">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-item-justify-left" class="control-header-item-justify-left" type="radio" name="control-header-item-justify" value="left" tabindex="-1">
|
||||
<label for="control-header-item-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-item-justify-center" class="control-header-item-justify-center" type="radio" name="control-header-item-justify" value="center" tabindex="-1">
|
||||
<label for="control-header-item-justify-center"><span class="label-icon"></span> <span class="sr-only">Centre</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-item-justify-right" class="control-header-item-justify-right" type="radio" name="control-header-item-justify" value="right" tabindex="-1">
|
||||
<label for="control-header-item-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-item-justify-helper form-helper-item">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-area-width-helper form-helper-item">Some Header items may not be shown.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-header-order" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Item order</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-order-label">Header item order</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="header-order"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-header-greeting" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Greeting</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-greeting-show" class="control-header-greeting-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-greeting-show"><span class="label-icon"></span> Show</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-greeting-type-label">Wording</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-greeting-type-good" class="control-header-greeting-type-good" type="radio" name="control-header-greeting-type" value="good" tabindex="-1">
|
||||
<label for="control-header-greeting-type-good"><span class="label-icon"></span> "Good morning..."</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-greeting-type-hello" class="control-header-greeting-type-hello" type="radio" name="control-header-greeting-type" value="hello" tabindex="-1">
|
||||
<label for="control-header-greeting-type-hello"><span class="label-icon"></span> "Hello..."</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-greeting-type-hi" class="control-header-greeting-type-hi" type="radio" name="control-header-greeting-type" value="hi" tabindex="-1">
|
||||
<label for="control-header-greeting-type-hi"><span class="label-icon"></span> "Hi..."</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-greeting-name">Name</label>
|
||||
<input id="control-header-greeting-name" class="control-header-greeting-name" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Nickname, alias or superhero name" tabindex="-1">
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-greeting-size-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-greeting-size-range" class="control-header-greeting-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-greeting-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-greeting-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-greeting-newline" class="control-header-greeting-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-greeting-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-greeting-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-header-transitional" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Transitional words</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-transitional-show" class="control-header-transitional-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-transitional-show"><span class="label-icon"></span> Show</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-transitional-show-helper form-helper-item">Available when Date or Time is shown.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-transitional-type-label">Wording</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-transitional-type-timeanddate" class="control-header-transitional-type-timeanddate" type="radio" name="control-header-transitional-type" value="timeanddate" tabindex="-1">
|
||||
<label for="control-header-transitional-type-timeanddate"><span class="label-icon"></span> "The time and date is"</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-transitional-type-its" class="control-header-transitional-type-its" type="radio" name="control-header-transitional-type" value="its" tabindex="-1">
|
||||
<label for="control-header-transitional-type-its"><span class="label-icon"></span> "It's"</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-transitional-size-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-transitional-size-range" class="control-header-transitional-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-transitional-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-transitional-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-transitional-newline" class="control-header-transitional-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-transitional-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-transitional-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-header-clock" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Clock</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-hours-show" class="control-header-clock-hours-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-clock-hours-show"><span class="label-icon"></span> Hours</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-hours-display-number" class="control-header-clock-hours-display-number" type="radio" name="control-header-clock-hours" value="number" tabindex="-1">
|
||||
<label for="control-header-clock-hours-display-number"><span class="label-icon"></span> As number</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-hours-display-word" class="control-header-clock-hours-display-word" type="radio" name="control-header-clock-hours" value="word" tabindex="-1">
|
||||
<label for="control-header-clock-hours-display-word"><span class="label-icon"></span> As word</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-minutes-show" class="control-header-clock-minutes-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-clock-minutes-show"><span class="label-icon"></span> Minutes</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-minutes-display-number" class="control-header-clock-minutes-display-number" type="radio" name="control-header-clock-minutes" value="number" tabindex="-1">
|
||||
<label for="control-header-clock-minutes-display-number"><span class="label-icon"></span> As number</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-minutes-display-word" class="control-header-clock-minutes-display-word" type="radio" name="control-header-clock-minutes" value="word" tabindex="-1">
|
||||
<label for="control-header-clock-minutes-display-word"><span class="label-icon"></span> As word</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-seconds-show" class="control-header-clock-seconds-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-clock-seconds-show"><span class="label-icon"></span> Seconds</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-seconds-display-number" class="control-header-clock-seconds-display-number" type="radio" name="control-header-clock-seconds" value="number" tabindex="-1">
|
||||
<label for="control-header-clock-seconds-display-number"><span class="label-icon"></span> As number</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-seconds-display-word" class="control-header-clock-seconds-display-word" type="radio" name="control-header-clock-seconds" value="word" tabindex="-1">
|
||||
<label for="control-header-clock-seconds-display-word"><span class="label-icon"></span> As word</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-separator-show" class="control-header-clock-separator-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-clock-separator-show"><span class="label-icon"></span> Separators</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-hour24-show" class="control-header-clock-hour24-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-clock-hour24-show"><span class="label-icon"></span> 24 Hours</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-meridiem-show" class="control-header-clock-meridiem-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-clock-meridiem-show"><span class="label-icon"></span> AM/PM</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-clock-size-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-clock-size-range" class="control-header-clock-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-clock-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-clock-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-clock-newline" class="control-header-clock-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-clock-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-clock-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-header-date" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Date</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-day-show" class="control-header-date-day-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-date-day-show"><span class="label-icon"></span> Day</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-day-display-number" class="control-header-date-day-display-number" type="radio" name="control-header-date-day-display" value="number" tabindex="-1">
|
||||
<label for="control-header-date-day-display-number"><span class="label-icon"></span> As number</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-date-day-week-start-label">Start of the week</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-day-week-start-monday" class="control-header-date-day-week-start-monday" type="radio" name="control-header-date-day-week-start" value="monday" tabindex="-1">
|
||||
<label for="control-header-date-day-week-start-monday"><span class="label-icon"></span> Monday</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-day-week-start-sunday" class="control-header-date-day-week-start-sunday" type="radio" name="control-header-date-day-week-start" value="sunday" tabindex="-1">
|
||||
<label for="control-header-date-day-week-start-sunday"><span class="label-icon"></span> Sunday</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-date-day-week-start-helper form-helper-item">Define what day "1" represents, either Monday or Sunday.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-day-display-word" class="control-header-date-day-display-word" type="radio" name="control-header-date-day-display" value="word" tabindex="-1">
|
||||
<label for="control-header-date-day-display-word"><span class="label-icon"></span> As word</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-date-day-length-label">Word length</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-day-length-long" class="control-header-date-day-length-long" type="radio" name="control-header-date-day-length" value="long" tabindex="-1">
|
||||
<label for="control-header-date-day-length-long"><span class="label-icon"></span> Long</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-day-length-short" class="control-header-date-day-length-short" type="radio" name="control-header-date-day-length" value="short" tabindex="-1">
|
||||
<label for="control-header-date-day-length-short"><span class="label-icon"></span> Short</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-date-show" class="control-header-date-date-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-date-date-show"><span class="label-icon"></span> Date</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-date-display-number" class="control-header-date-date-display-number" type="radio" name="control-header-date-date-display" value="number" tabindex="-1">
|
||||
<label for="control-header-date-date-display-number"><span class="label-icon"></span> As number</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-date-display-word" class="control-header-date-date-display-word" type="radio" name="control-header-date-date-display" value="word" tabindex="-1">
|
||||
<label for="control-header-date-date-display-word"><span class="label-icon"></span> As word</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-date-ordinal" class="control-header-date-date-ordinal" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-date-date-ordinal"><span class="label-icon"></span> Ordinal numbers</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-date-date-ordinal-helper form-helper-item">Display Date as 1st, 2nd, 3rd, 4th etc.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-month-show" class="control-header-date-month-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-date-month-show"><span class="label-icon"></span> Month</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-month-display-number" class="control-header-date-month-display-number" type="radio" name="control-header-date-month-display" value="number" tabindex="-1">
|
||||
<label for="control-header-date-month-display-number"><span class="label-icon"></span> As number</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-month-ordinal" class="control-header-date-month-ordinal" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-date-month-ordinal"><span class="label-icon"></span> Ordinal numbers</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-date-month-ordinal-helper form-helper-item">Display Month as 1st, 2nd, 3rd, 4th etc.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-month-display-word" class="control-header-date-month-display-word" type="radio" name="control-header-date-month-display" value="word" tabindex="-1">
|
||||
<label for="control-header-date-month-display-word"><span class="label-icon"></span> As word</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-date-month-length-label">Word length</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-month-length-long" class="control-header-date-month-length-long" type="radio" name="control-header-date-month-length" value="long" tabindex="-1">
|
||||
<label for="control-header-date-month-length-long"><span class="label-icon"></span> Long</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-month-length-short" class="control-header-date-month-length-short" type="radio" name="control-header-date-month-length" value="short" tabindex="-1">
|
||||
<label for="control-header-date-month-length-short"><span class="label-icon"></span> Short</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-year-show" class="control-header-date-year-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-date-year-show"><span class="label-icon"></span> Year</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-year-display-number" class="control-header-date-year-display-number" type="radio" name="control-header-date-year-display" value="number" tabindex="-1">
|
||||
<label for="control-header-date-year-display-number"><span class="label-icon"></span> As number</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-year-display-word" class="control-header-date-year-display-word" type="radio" name="control-header-date-year-display" value="word" tabindex="-1">
|
||||
<label for="control-header-date-year-display-word"><span class="label-icon"></span> As word</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-separator-show" class="control-header-date-separator-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-date-separator-show"><span class="label-icon"></span> Separators</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-date-format-label">Format</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-format-datemonth" class="control-header-date-format-datemonth" type="radio" name="control-header-date-format" value="datemonth" tabindex="-1">
|
||||
<label for="control-header-date-format-datemonth"><span class="label-icon"></span> Date/Month</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-format-monthdate" class="control-header-date-format-monthdate" type="radio" name="control-header-date-format" value="monthdate" tabindex="-1">
|
||||
<label for="control-header-date-format-monthdate"><span class="label-icon"></span> Month/Date</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-date-size-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-date-size-range" class="control-header-date-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-date-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-date-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-date-newline" class="control-header-date-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-date-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-date-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-header-search" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Search</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-show" class="control-header-search-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-search-show"><span class="label-icon"></span> Show</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-search-width-by-label">Search box width</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-width-by-auto" class="control-header-search-width-by-auto" type="radio" name="control-header-search-width" value="auto" tabindex="-1">
|
||||
<label for="control-header-search-width-by-auto"><span class="label-icon"></span> Auto</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-search-width-by-auto-helper form-helper-item">Search box will grow to best fit available space.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-width-by-custom" class="control-header-search-width-by-custom" type="radio" name="control-header-search-width" value="custom" tabindex="-1">
|
||||
<label for="control-header-search-width-by-custom"><span class="label-icon"></span> Custom</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-search-width-by-custom-helper form-helper-item">Define how wide the Search box should be inside the Header Area.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-search-width-size-range" class="control-header-search-width-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-search-width-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-search-width-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-search-style-label">Input style</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-style-box" class="control-header-search-style-box" type="radio" name="control-header-search-style" value="box" tabindex="-1">
|
||||
<label for="control-header-search-style-box"><span class="label-icon"></span> Box</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-style-clear" class="control-header-search-style-clear" type="radio" name="control-header-search-style" value="clear" tabindex="-1">
|
||||
<label for="control-header-search-style-clear"><span class="label-icon"></span> Clear</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-focus" class="control-header-search-focus" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-search-focus"><span class="label-icon"></span> Focus on load/refresh</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-search-focus-helper form-helper-item">May not work in some browsers.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-search-engine-label">Search engine</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-engine-google" class="control-header-search-engine-google" type="radio" name="control-header-search-engine" value="google" tabindex="-1">
|
||||
<label for="control-header-search-engine-google"><span class="label-icon"></span> Google</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-engine-duckduckgo" class="control-header-search-engine-duckduckgo" type="radio" name="control-header-search-engine" value="duckduckgo" tabindex="-1">
|
||||
<label for="control-header-search-engine-duckduckgo"><span class="label-icon"></span> DuckDuckGo</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-engine-youtube" class="control-header-search-engine-youtube" type="radio" name="control-header-search-engine" value="youtube" tabindex="-1">
|
||||
<label for="control-header-search-engine-youtube"><span class="label-icon"></span> YouTube</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-engine-giphy" class="control-header-search-engine-giphy" type="radio" name="control-header-search-engine" value="giphy" tabindex="-1">
|
||||
<label for="control-header-search-engine-giphy"><span class="label-icon"></span> Giphy</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-engine-bing" class="control-header-search-engine-bing" type="radio" name="control-header-search-engine" value="bing" tabindex="-1">
|
||||
<label for="control-header-search-engine-bing"><span class="label-icon"></span> Bing</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-engine-custom" class="control-header-search-engine-custom" type="radio" name="control-header-search-engine" value="custom" tabindex="-1">
|
||||
<label for="control-header-search-engine-custom"><span class="label-icon"></span> Custom</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-search-engine-custom-name">Name</label>
|
||||
<input id="control-header-search-engine-custom-name" class="control-header-search-engine-custom-name" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search engine name" tabindex="-1">
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-search-engine-custom-url">URL</label>
|
||||
<input id="control-header-search-engine-custom-url" class="control-header-search-engine-custom-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="-1">
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-search-engine-custom-helper form-helper-item">Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="</p>
|
||||
<p class="control-header-search-engine-custom-helper form-helper-item">nightTab will add the search term entered into the Search input at the end of the above URL.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-search-text-justify-label">Align Text</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x1 control-header-search-text-justify-grid">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-text-justify-left" class="control-header-search-text-justify-left" type="radio" name="control-header-search-text-justify" value="left" tabindex="-1">
|
||||
<label for="control-header-search-text-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-text-justify-center" class="control-header-search-text-justify-center" type="radio" name="control-header-search-text-justify" value="center" tabindex="-1">
|
||||
<label for="control-header-search-text-justify-center"><span class="label-icon"></span> <span class="sr-only">Centre</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-text-justify-right" class="control-header-search-text-justify-right" type="radio" name="control-header-search-text-justify" value="right" tabindex="-1">
|
||||
<label for="control-header-search-text-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-search-size-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-search-size-range" class="control-header-search-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-search-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-search-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-search-size-helper form-helper-item">Only the Search box width control will change the Width of the Search box.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-newtab" class="control-header-search-newtab" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-search-newtab"><span class="label-icon"></span> Open Search results in a new tab</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-search-newline" class="control-header-search-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-search-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-search-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-header-editadd" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Edit/Add</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-editadd-show" class="control-header-editadd-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-editadd-show"><span class="label-icon"></span> Show Edit/Add</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-editadd-style-label">Button style</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-editadd-style-box" class="control-header-editadd-style-box" type="radio" name="control-header-editadd-style" value="box" tabindex="-1">
|
||||
<label for="control-header-editadd-style-box"><span class="label-icon"></span> Box</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-editadd-style-clear" class="control-header-editadd-style-clear" type="radio" name="control-header-editadd-style" value="clear" tabindex="-1">
|
||||
<label for="control-header-editadd-style-clear"><span class="label-icon"></span> Clear</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-editadd-size-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-editadd-size-range" class="control-header-editadd-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-editadd-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-editadd-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-editadd-newline" class="control-header-editadd-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-editadd-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-editadd-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-header-coloraccent" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Colour/Accent</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-coloraccent-show" class="control-header-coloraccent-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-coloraccent-show"><span class="label-icon"></span> Show Colour/Accent</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-coloraccent-show-helper form-helper-item">Colour and Accent can also be found under Theme.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-coloraccent-dot-show" class="control-header-coloraccent-dot-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-coloraccent-dot-show"><span class="label-icon"></span> Show colour dots</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-coloraccent-style-label">Button style</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-coloraccent-style-box" class="control-header-coloraccent-style-box" type="radio" name="control-header-coloraccent-style" value="box" tabindex="-1">
|
||||
<label for="control-header-coloraccent-style-box"><span class="label-icon"></span> Box</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-coloraccent-style-clear" class="control-header-coloraccent-style-clear" type="radio" name="control-header-coloraccent-style" value="clear" tabindex="-1">
|
||||
<label for="control-header-coloraccent-style-clear"><span class="label-icon"></span> Clear</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-coloraccent-size-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-coloraccent-size-range" class="control-header-coloraccent-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-coloraccent-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-coloraccent-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-coloraccent-newline" class="control-header-coloraccent-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-coloraccent-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-coloraccent-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-header-settings" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Settings menu</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label class="control-header-menu-style-label">Button style</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-menu-style-box" class="control-header-menu-style-box" type="radio" name="control-header-menu-style" value="box" tabindex="-1">
|
||||
<label for="control-header-menu-style-box"><span class="label-icon"></span> Box</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-menu-style-clear" class="control-header-menu-style-clear" type="radio" name="control-header-menu-style" value="clear" tabindex="-1">
|
||||
<label for="control-header-menu-style-clear"><span class="label-icon"></span> Clear</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-menu-size-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-menu-size-range" class="control-header-menu-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-menu-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-menu-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-menu-newline" class="control-header-menu-newline" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-menu-newline"><span class="label-icon"></span> New line</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-menu-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-header-border" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Border</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-border-top-range">Top</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-border-top-range" class="control-header-border-top-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-border-top-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-border-top-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-border-bottom-range">Bottom</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-border-bottom-range" class="control-header-border-bottom-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-border-bottom-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-border-bottom-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-header-position" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Position when scrolling</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-position-sticky" class="control-header-position-sticky" type="radio" name="control-header-position" value="sticky" tabindex="-1">
|
||||
<label for="control-header-position-sticky"><span class="label-icon"></span> Sticky</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-position-sticky-helper form-helper-item">Header sticks to the page when scrolling up or down.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-position-inline" class="control-header-position-inline" type="radio" name="control-header-position" value="inline" tabindex="-1">
|
||||
<label for="control-header-position-inline"><span class="label-icon"></span> Inline</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-position-inline-helper form-helper-item">Header moves inline with the content when scrolling up or down.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-header-color" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Background colour</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-color-show" class="control-header-color-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-color-show"><span class="label-icon"></span> Show</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-color-style-always" class="control-header-color-style-always" type="radio" name="control-header-color-style" value="always" tabindex="-1">
|
||||
<label for="control-header-color-style-always"><span class="label-icon"></span> Always visible</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-color-style-always-helper form-helper-item">Useful for when a Background Image is shown.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-color-style-scroll" class="control-header-color-style-scroll" type="radio" name="control-header-color-style" value="scroll" tabindex="-1">
|
||||
<label for="control-header-color-style-scroll"><span class="label-icon"></span> Visible on scroll</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-color-style-scroll-helper form-helper-item">The page will not scroll if Bookmarks are not shown.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-color-by-theme" class="control-header-color-by-theme" type="radio" name="control-header-color-by" value="theme" tabindex="-1">
|
||||
<label for="control-header-color-by-theme"><span class="label-icon"></span> Theme colour</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-color-by-theme-helper form-helper-item">Use the Background colour defined by the Theme.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-color-by-custom" class="control-header-color-by-custom" type="radio" name="control-header-color-by" value="custom" tabindex="-1">
|
||||
<label for="control-header-color-by-custom"><span class="label-icon"></span> Custom colour</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-color-by-custom-helper form-helper-item">Use a custom Background colour.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-color-rgb-range" class="form-group-item-half control-header-color-rgb-range" type="color" value="#000000" tabindex="1">
|
||||
<input id="control-header-color-rgb-text" class="form-group-item-half control-header-color-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-color-opacity-range">Opacity</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-color-opacity-range" class="control-header-color-opacity-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-header-color-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-header-color-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-radius" class="control-header-radius" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-radius"><span class="label-icon"></span> Corner radius</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-radius-helper form-helper-item">May not be visible if Theme Radius is set to 0.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,168 +0,0 @@
|
||||
<div id="menu-content-layout" class="menu-content menu-content-overscroll menu-content-layout">
|
||||
<div id="menu-content-layout-scaling" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Global scaling</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-layout-size-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-layout-size-range" class="control-layout-size-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-layout-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-layout-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-layout-size-helper form-helper-item">Resize all elements on the page.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-layout-size-helper form-helper-item">Take care as some elements could scale up to outside the page.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-layout-area" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Area</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-layout-width-range">Width</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-layout-width-range" class="control-layout-width-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-layout-width-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-layout-width-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label>Area alignment</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x3 control-layout-alignment-grid">
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-topleft" class="control-layout-alignment-topleft" type="radio" name="control-layout-alignment" value="topleft" tabindex="-1">
|
||||
<label for="control-layout-alignment-topleft"><span class="label-icon"></span> <span class="sr-only">Top left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-topcenter" class="control-layout-alignment-topcenter" type="radio" name="control-layout-alignment" value="topcenter" tabindex="-1">
|
||||
<label for="control-layout-alignment-topcenter"><span class="label-icon"></span> <span class="sr-only">Top center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-topright" class="control-layout-alignment-topright" type="radio" name="control-layout-alignment" value="topright" tabindex="-1">
|
||||
<label for="control-layout-alignment-topright"><span class="label-icon"></span> <span class="sr-only">Top right</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-centerleft" class="control-layout-alignment-centerleft" type="radio" name="control-layout-alignment" value="centerleft" tabindex="-1">
|
||||
<label for="control-layout-alignment-centerleft"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-centercenter" class="control-layout-alignment-centercenter" type="radio" name="control-layout-alignment" value="centercenter" tabindex="-1">
|
||||
<label for="control-layout-alignment-centercenter"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-centerright" class="control-layout-alignment-centerright" type="radio" name="control-layout-alignment" value="centerright" tabindex="-1">
|
||||
<label for="control-layout-alignment-centerright"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-bottomleft" class="control-layout-alignment-bottomleft" type="radio" name="control-layout-alignment" value="bottomleft" tabindex="-1">
|
||||
<label for="control-layout-alignment-bottomleft"><span class="label-icon"></span> <span class="sr-only">Bottom left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-bottomcenter" class="control-layout-alignment-bottomcenter" type="radio" name="control-layout-alignment" value="bottomcenter" tabindex="-1">
|
||||
<label for="control-layout-alignment-bottomcenter"><span class="label-icon"></span> <span class="sr-only">Bottom Center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-alignment-bottomright" class="control-layout-alignment-bottomright" type="radio" name="control-layout-alignment" value="bottomright" tabindex="-1">
|
||||
<label for="control-layout-alignment-bottomright"><span class="label-icon"></span> <span class="sr-only">Bottom right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-layout-alignment-helper form-helper-item">Effects may not be visible if the Layout Area is full width or if Bookmarks fill the page.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-layout-order" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Area order</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-order-headerlink" class="control-layout-order-headerlink" type="radio" name="control-layout-order" value="headerlink" tabindex="-1">
|
||||
<label for="control-layout-order-headerlink"><span class="label-icon"></span> Header then Bookmarks</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-order-linkheader" class="control-layout-order-linkheader" type="radio" name="control-layout-order" value="linkheader" tabindex="-1">
|
||||
<label for="control-layout-order-linkheader"><span class="label-icon"></span> Bookmarks then Header</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-layout-order-helper form-helper-item">Only available when Bookmarks are shown.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-layout-padding" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Padding</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-layout-padding-range">Padding outside Header and Bookmark Area</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-layout-padding-range" class="control-layout-padding-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-layout-padding-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-layout-padding-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-layout-gutter" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Gutter</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-layout-gutter-range">Gutter between Header and Bookmark items</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-layout-gutter-range" class="control-layout-gutter-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-layout-gutter-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-layout-gutter-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-layout-page" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Page</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-layout-title">Title</label>
|
||||
<input id="control-layout-title" class="control-layout-title" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="New Tab" tabindex="-1">
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-scrollpastend" class="control-layout-scrollpastend" type="checkbox" tabindex="-1">
|
||||
<label for="control-layout-scrollpastend"><span class="label-icon"></span> Scroll past end</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label class="control-layout-scrollbars-label">Scrollbars style</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-scrollbars-auto" class="control-layout-scrollbars-auto" type="radio" name="control-layout-scrollbars" value="auto" tabindex="-1">
|
||||
<label for="control-layout-scrollbars-auto"><span class="label-icon"></span> Auto</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-scrollbars-thin" class="control-layout-scrollbars-thin" type="radio" name="control-layout-scrollbars" value="thin" tabindex="-1">
|
||||
<label for="control-layout-scrollbars-thin"><span class="label-icon"></span> Thin</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-layout-scrollbars-none" class="control-layout-scrollbars-none" type="radio" name="control-layout-scrollbars" value="none" tabindex="-1">
|
||||
<label for="control-layout-scrollbars-none"><span class="label-icon"></span> Hidden</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-layout-scrollbars-helper form-helper-item">May not work in some browsers.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,21 +0,0 @@
|
||||
<div class="menu-content menu-content-nighttab is-hidden">
|
||||
<div class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">nightTab</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<p class="mb-1">Version <strong class="display-version"></strong></p>
|
||||
<p class="display-name small"></p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<p>Project repository on <a href="https://github.com/zombieFox/nightTab" target="_blank" tabindex="-1">GitHub</a>.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<p>For feedback and support, submit an <a href="https://github.com/zombieFox/nightTab/issues" target="_blank" tabindex="-1">Issues.</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,443 +0,0 @@
|
||||
<div id="menu-content-theme" class="menu-content menu-content-overscroll menu-content-theme is-hidden">
|
||||
<div id="menu-content-theme-preset" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Preset</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap theme-preset"></div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-preset-helper form-helper-item">Applying a Preset will replace the current Colour, Accent, Font, Style, Radius, Shadow and Shade.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-theme-saved" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Saved</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap form-wrap-hide-space theme-custom"></div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-inline">
|
||||
<button class="control-theme-custom-add button" tabindex="-1">Save current theme</button>
|
||||
<div class="form-input-button form-input-hide">
|
||||
<input id="control-theme-custom-edit" class="control-theme-custom-edit" type="checkbox" tabindex="1">
|
||||
<label for="control-theme-custom-edit"><span class="label-icon"></span> Edit</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-custom-helper form-helper-item">Saving a Theme will record the current Colour, Accent, Font, Style, Radius, Shadow and Shade.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-theme-style" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Style</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-theme-style-dark" class="control-theme-style-dark" type="radio" name="control-theme-style" value="dark" tabindex="-1">
|
||||
<label for="control-theme-style-dark"><span class="label-icon"></span> Dark</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="-1">
|
||||
<label for="control-theme-style-light"><span class="label-icon"></span> Light</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-style-helper form-helper-item">Flip the colour shades defined by the primary Colour.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-style-helper form-helper-item">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-theme-fonts" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Fonts</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-font-display-name">Display font</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-font-display-name" class="control-theme-font-display-name" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Google font name" tabindex="-1">
|
||||
<button class="control-theme-font-display-name-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-font-display-helper form-helper-item">Use a <a href="https://fonts.google.com/" target="_blank">Google Font</a> to customise the Clock, Date, Group names and Bookmark Letters.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-font-display-helper form-helper-item">Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Fredoka One" or "Kanit"</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-font-display-helper form-helper-item">Clear the field to use the default font "Fjalla One".</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-font-display-weight-range">Font weight</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-font-display-weight-range" class="control-theme-font-display-weight-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-font-display-weight-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-theme-font-display-weight-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group">
|
||||
<button class="control-theme-font-display-light button" tabindex="-1">Light</button>
|
||||
<button class="control-theme-font-display-regular button" tabindex="-1">Regular</button>
|
||||
<button class="control-theme-font-display-bold button" tabindex="-1">Bold</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-font-display-helper form-helper-item">Not all fonts support all weights. Refer to the Google Font page to see which are available.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label>Font style</label>
|
||||
</div>
|
||||
<div class="form-inline">
|
||||
<div class="form-inline form-inline-spacer">
|
||||
<div class="form-wrap">
|
||||
<input id="control-theme-font-display-style-normal" class="control-theme-font-display-style-normal" name="control-theme-font-display-style" type="radio" value="normal" tabindex="-1">
|
||||
<label for="control-theme-font-display-style-normal"><span class="label-icon"></span> Normal</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-theme-font-display-style-italic" class="control-theme-font-display-style-italic" type="radio" name="control-theme-font-display-style" value="italic" tabindex="-1">
|
||||
<label for="control-theme-font-display-style-italic"><span class="label-icon"></span> Italic</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap ml-auto">
|
||||
<button class="control-theme-font-display-style-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-font-ui-name">UI font</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-font-ui-name" class="control-theme-font-ui-name" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Google font name" tabindex="-1">
|
||||
<button class="control-theme-font-ui-name-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-font-ui-helper form-helper-item">Use a <a href="https://fonts.google.com/" target="_blank">Google Font</a> to customise the Bookmark name, URL and form elements.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-font-ui-helper form-helper-item">Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto", "Source Sans Pro" or "Noto Sans"</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-font-ui-helper form-helper-item">Clear the field to use the default font "Open Sans".</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-font-ui-weight">Font weight</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-font-ui-weight-range" class="control-theme-font-ui-weight-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-font-ui-weight-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-theme-font-ui-weight-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group">
|
||||
<button class="control-theme-font-ui-light button" tabindex="-1">Light</button>
|
||||
<button class="control-theme-font-ui-regular button" tabindex="-1">Regular</button>
|
||||
<button class="control-theme-font-ui-bold button" tabindex="-1">Bold</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-font-ui-helper form-helper-item">Not all fonts support all weights. Refer to the Google Font page to see which are available.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label>Font style</label>
|
||||
</div>
|
||||
<div class="form-inline">
|
||||
<div class="form-inline form-inline-spacer">
|
||||
<div class="form-wrap">
|
||||
<input id="control-theme-font-ui-style-normal" class="control-theme-font-ui-style-normal" type="radio" name="control-theme-font-ui-style" value="normal" tabindex="-1">
|
||||
<label for="control-theme-font-ui-style-normal"><span class="label-icon"></span> Normal</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-theme-font-ui-style-italic" class="control-theme-font-ui-style-italic" type="radio" name="control-theme-font-ui-style" value="italic" tabindex="-1">
|
||||
<label for="control-theme-font-ui-style-italic"><span class="label-icon"></span> Italic</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap ml-auto">
|
||||
<button class="control-theme-font-ui-style-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-theme-colour" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Colour</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-sticky">
|
||||
<div class="form-wrap">
|
||||
<p>Colour shades</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block form-group-border form-group-border-theme-color">
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-10"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-09"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-08"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-07"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-06"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-05"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-04"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-03"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-02"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-01"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless form-group-item-small">
|
||||
<div class="theme-color-box theme-color"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-01"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-02"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-03"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-04"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-05"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-06"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-07"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-08"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-09"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-color-helper form-helper-item">Backgrounds, Bookmarks and Modals use shades from the left.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-color-helper form-helper-item">Text and form elements use shades from the right.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-color-helper form-helper-item">For a light look switch to the Light Style and then select a Shade colour.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-rgb-color">Primary colour</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-color-rgb-color" class="form-group-item-half control-theme-color-rgb-color" type="color" value="#000000" tabindex="1" autocomplete="off">
|
||||
<input id="control-theme-color-rgb-text" class="form-group-item-half control-theme-color-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
||||
<button class="control-theme-color-rgb-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-color-helper form-helper-item">Light and dark shades from this colour are used across nightTabs.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-hsl-h-range">Hue</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-color-hsl-h-range" class="control-theme-color-hsl-h-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-color-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-hsl-s-range">Saturation</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-color-hsl-s-range" class="control-theme-color-hsl-s-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-color-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-hsl-l-range">Lightness</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-color-hsl-l-range" class="control-theme-color-hsl-l-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-color-hsl-l-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-rgb-r-range">Red</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-color-rgb-r-range" class="control-theme-color-rgb-r-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-color-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-rgb-g-range">Green</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-color-rgb-g-range" class="control-theme-color-rgb-g-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-color-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-rgb-b-range">Blue</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-color-rgb-b-range" class="control-theme-color-rgb-b-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-color-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-contrast-light-range">Light shade contrast</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-color-contrast-light-range" class="control-theme-color-contrast-light-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-color-contrast-light-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-theme-color-contrast-light-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-color-contrast-dark-range">Dark shade contrast</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-color-contrast-dark-range" class="control-theme-color-contrast-dark-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-color-contrast-dark-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-theme-color-contrast-dark-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-theme-accent" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Accent</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-accent-rgb-color">Colour</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-accent-rgb-color" class="form-group-item-half control-theme-accent-rgb-color" type="color" value="#000000" tabindex="1" autocomplete="off">
|
||||
<input id="control-theme-accent-rgb-text" class="form-group-item-half control-theme-accent-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
||||
<button class="control-theme-accent-rgb-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-style-light-helper form-helper-item">Accent Colour can also be changed from the Header Area.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<input id="control-theme-accent-random-active" class="control-theme-accent-random-active" type="checkbox" tabindex="-1">
|
||||
<label for="control-theme-accent-random-active"><span class="label-icon"></span> Random Accent colour on load/refresh</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-theme-accent-random-style-any" class="control-theme-accent-random-style-any" type="radio" name="control-theme-accent-random-style" value="any" tabindex="-1">
|
||||
<label for="control-theme-accent-random-style-any"><span class="label-icon"></span> Any colour</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-theme-accent-random-style-light" class="control-theme-accent-random-style-light" type="radio" name="control-theme-accent-random-style" value="light" tabindex="-1">
|
||||
<label for="control-theme-accent-random-style-light"><span class="label-icon"></span> Light colours</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-theme-accent-random-style-dark" class="control-theme-accent-random-style-dark" type="radio" name="control-theme-accent-random-style" value="dark" tabindex="-1">
|
||||
<label for="control-theme-accent-random-style-dark"><span class="label-icon"></span> Dark colours</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-theme-accent-random-style-pastel" class="control-theme-accent-random-style-pastel" type="radio" name="control-theme-accent-random-style" value="pastel" tabindex="-1">
|
||||
<label for="control-theme-accent-random-style-pastel"><span class="label-icon"></span> Pastel colours</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-theme-accent-random-style-saturated" class="control-theme-accent-random-style-saturated" type="radio" name="control-theme-accent-random-style" value="saturated" tabindex="-1">
|
||||
<label for="control-theme-accent-random-style-saturated"><span class="label-icon"></span> Saturated colours</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<button class="control-theme-accent-randomise button" tabindex="-1">Randomise now</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-theme-radius" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Radius</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-radius-range">All corners</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-radius-range" class="control-theme-radius-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-radius-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-theme-radius-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-theme-shadow" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Shadow</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-shadow-range">Size</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-shadow-range" class="control-theme-shadow-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-shadow-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-theme-shadow-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-content-theme-shade" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Shade</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-shade-opacity-range">Opacity</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-theme-shade-opacity-range" class="control-theme-shade-opacity-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-theme-shade-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-theme-shade-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-shade-opacity-helper form-helper-item">The shade appears behind Modals and the Menu.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2,9 +2,9 @@
|
||||
<div class="menu-nav-item">
|
||||
<button class="control-menu-layout menu-nav-tab button active" tabindex="-1">Layout</button>
|
||||
<div class="menu-nav-body menu-nav-body-layout active">
|
||||
<a href="#menu-content-layout-scaling" class="menu-nav-sub button button-small" tabindex="-1">Global scaling</a>
|
||||
<a href="#menu-content-layout-scaling" class="menu-nav-sub button button-small" tabindex="-1">Scaling</a>
|
||||
<a href="#menu-content-layout-area" class="menu-nav-sub button button-small" tabindex="-1">Area</a>
|
||||
<a href="#menu-content-layout-order" class="menu-nav-sub button button-small" tabindex="-1">Area order</a>
|
||||
<a href="#menu-content-layout-order" class="menu-nav-sub button button-small" tabindex="-1">Order</a>
|
||||
<a href="#menu-content-layout-padding" class="menu-nav-sub button button-small" tabindex="-1">Padding</a>
|
||||
<a href="#menu-content-layout-gutter" class="menu-nav-sub button button-small" tabindex="-1">Gutter</a>
|
||||
<a href="#menu-content-layout-page" class="menu-nav-sub button button-small" tabindex="-1">Page</a>
|
||||
@ -14,7 +14,7 @@
|
||||
<button class="control-menu-header menu-nav-tab button" tabindex="-1">Header</button>
|
||||
<div class="menu-nav-body menu-nav-body-header active">
|
||||
<a href="#menu-content-header-area" class="menu-nav-sub button button-small" tabindex="-1">Area</a>
|
||||
<a href="#menu-content-header-order" class="menu-nav-sub button button-small" tabindex="-1">Item order</a>
|
||||
<a href="#menu-content-header-order" class="menu-nav-sub button button-small" tabindex="-1">Order</a>
|
||||
<a href="#menu-content-header-greeting" class="menu-nav-sub button button-small" tabindex="-1">Greeting</a>
|
||||
<a href="#menu-content-header-transitional" class="menu-nav-sub button button-small" tabindex="-1">Transitional words</a>
|
||||
<a href="#menu-content-header-clock" class="menu-nav-sub button button-small" tabindex="-1">Clock</a>
|
||||
@ -32,8 +32,9 @@
|
||||
<button class="control-menu-groups menu-nav-tab button" tabindex="-1">Groups</button>
|
||||
<div class="menu-nav-body menu-nav-body-groups active">
|
||||
<a href="#menu-content-groups-area" class="menu-nav-sub button button-small" tabindex="-1">Area</a>
|
||||
<a href="#menu-content-groups-names" class="menu-nav-sub button button-small" tabindex="-1">Names</a>
|
||||
<a href="#menu-content-groups-order" class="menu-nav-sub button button-small" tabindex="-1">Order</a>
|
||||
<a href="#menu-content-groups-names" class="menu-nav-sub button button-small" tabindex="-1">Names</a>
|
||||
<a href="#menu-content-groups-openall" class="menu-nav-sub button button-small" tabindex="-1">Open all</a>
|
||||
<a href="#menu-content-groups-border" class="menu-nav-sub button button-small" tabindex="-1">Border</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -42,9 +43,12 @@
|
||||
<div class="menu-nav-body menu-nav-body-bookmarks active">
|
||||
<a href="#menu-content-bookmarks-area" class="menu-nav-sub button button-small" tabindex="-1">Area</a>
|
||||
<a href="#menu-content-bookmarks-bookmarks" class="menu-nav-sub button button-small" tabindex="-1">Bookmarks</a>
|
||||
<a href="#menu-content-bookmarks-color" class="menu-nav-sub button button-small" tabindex="-1">Background colour</a>
|
||||
<a href="#menu-content-bookmarks-border" class="menu-nav-sub button button-small" tabindex="-1">Border</a>
|
||||
<a href="#menu-content-bookmarks-letcon" class="menu-nav-sub button button-small" tabindex="-1">Letter/Icon</a>
|
||||
<a href="#menu-content-bookmarks-name" class="menu-nav-sub button button-small" tabindex="-1">Name</a>
|
||||
<a href="#menu-content-bookmarks-alignment" class="menu-nav-sub button button-small" tabindex="-1">Alignment</a>
|
||||
<a href="#menu-content-bookmarks-style" class="menu-nav-sub button button-small" tabindex="-1">Style</a>
|
||||
<a href="#menu-content-bookmarks-color" class="menu-nav-sub button button-small" tabindex="-1">Colour</a>
|
||||
<a href="#menu-content-bookmarks-border" class="menu-nav-sub button button-small" tabindex="-1">Border</a>
|
||||
<a href="#menu-content-bookmarks-orientation" class="menu-nav-sub button button-small" tabindex="-1">Orientation</a>
|
||||
<a href="#menu-content-bookmarks-sort" class="menu-nav-sub button button-small" tabindex="-1">Sort</a>
|
||||
<a href="#menu-content-bookmarks-accent" class="menu-nav-sub button button-small" tabindex="-1">Accent override</a>
|
||||
@ -57,7 +61,7 @@
|
||||
<a href="#menu-content-theme-saved" class="menu-nav-sub button button-small" tabindex="-1">Saved</a>
|
||||
<a href="#menu-content-theme-style" class="menu-nav-sub button button-small" tabindex="-1">Style</a>
|
||||
<a href="#menu-content-theme-fonts" class="menu-nav-sub button button-small" tabindex="-1">Fonts</a>
|
||||
<a href="#menu-content-theme-colour" class="menu-nav-sub button button-small" tabindex="-1">Colour</a>
|
||||
<a href="#menu-content-theme-color" class="menu-nav-sub button button-small" tabindex="-1">Colour</a>
|
||||
<a href="#menu-content-theme-accent" class="menu-nav-sub button button-small" tabindex="-1">Accent</a>
|
||||
<a href="#menu-content-theme-radius" class="menu-nav-sub button button-small" tabindex="-1">Radius</a>
|
||||
<a href="#menu-content-theme-shadow" class="menu-nav-sub button button-small" tabindex="-1">Shadow</a>
|
||||
@ -2878,6 +2878,20 @@ var control = (function() {
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-group-order-headerbody",
|
||||
path: "group.order",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-group-order-bodyheader",
|
||||
path: "group.order",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-group-name-show",
|
||||
path: "group.name.show",
|
||||
@ -3100,20 +3114,6 @@ var control = (function() {
|
||||
func: function() {
|
||||
link.groupAndItems();
|
||||
}
|
||||
}, {
|
||||
element: ".control-group-order-headerbody",
|
||||
path: "group.order",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-group-order-bodyheader",
|
||||
path: "group.order",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-group-border-range",
|
||||
path: "group.border",
|
||||
@ -3525,67 +3525,40 @@ var control = (function() {
|
||||
render.update.control.menu();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-display-alignment-topleft",
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
element: ".control-link-item-url-show",
|
||||
path: "link.item.url.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render.class();
|
||||
render.dependents();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-line-show",
|
||||
path: "link.item.line.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-display-alignment-topcenter",
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
element: ".control-link-item-shadow-show",
|
||||
path: "link.item.shadow.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-display-alignment-topright",
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
element: ".control-link-item-hoverscale",
|
||||
path: "link.item.hoverScale.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-display-alignment-centerleft",
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
element: ".control-link-newtab",
|
||||
path: "link.newTab",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-display-alignment-centercenter",
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-display-alignment-centerright",
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-display-alignment-bottomleft",
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-display-alignment-bottomcenter",
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-display-alignment-bottomright",
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render.class();
|
||||
link.groupAndItems();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-display-letcon-show",
|
||||
@ -3744,6 +3717,69 @@ var control = (function() {
|
||||
render.update.control.header();
|
||||
render.update.control.menu();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-display-alignment-topleft",
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-display-alignment-topcenter",
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-display-alignment-topright",
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-display-alignment-centerleft",
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-display-alignment-centercenter",
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-display-alignment-centerright",
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-display-alignment-bottomleft",
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-display-alignment-bottomcenter",
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-display-alignment-bottomright",
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-display-rotate-range",
|
||||
path: "link.item.display.rotate",
|
||||
@ -3949,41 +3985,19 @@ var control = (function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-url-show",
|
||||
path: "link.item.url.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render.class();
|
||||
render.dependents();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-line-show",
|
||||
path: "link.item.line.show",
|
||||
type: "checkbox",
|
||||
element: ".control-link-style-block",
|
||||
path: "link.style",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-shadow-show",
|
||||
path: "link.item.shadow.show",
|
||||
type: "checkbox",
|
||||
element: ".control-link-style-list",
|
||||
path: "link.style",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-hoverscale",
|
||||
path: "link.item.hoverScale.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-newtab",
|
||||
path: "link.newTab",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
link.groupAndItems();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-color-by-theme",
|
||||
path: "link.item.color.by",
|
||||
@ -4070,20 +4084,6 @@ var control = (function() {
|
||||
render.update.control.header();
|
||||
render.update.control.menu();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-style-block",
|
||||
path: "link.style",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-style-list",
|
||||
path: "link.style",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-orientation-top",
|
||||
path: "link.orientation",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var version = (function() {
|
||||
|
||||
var current = "4.42.0";
|
||||
var current = "4.43.0";
|
||||
|
||||
var name = "Naughty Goose";
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"name": "nightTab",
|
||||
"short_name": "nightTab",
|
||||
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
|
||||
"version": "4.42.0",
|
||||
"version": "4.43.0",
|
||||
"manifest_version": 2,
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "index.html"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user