mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-03-12 21:58:39 +01:00
2014 lines
135 KiB
HTML
2014 lines
135 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" style="background-color: rgb(25, 25, 25)">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="theme-color" content="#262831">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|
<title>New Tab</title>
|
|
<!-- css-block -->
|
|
<link rel="stylesheet" href="css/reset.css">
|
|
<link rel="stylesheet" href="css/variables.css">
|
|
<link rel="stylesheet" href="css/utilities.css">
|
|
<link rel="stylesheet" href="css/base.css">
|
|
<link rel="stylesheet" href="css/layout.css">
|
|
<link rel="stylesheet" href="css/edge.css">
|
|
<link rel="stylesheet" href="css/animation.css">
|
|
<link rel="stylesheet" href="css/fonts.css">
|
|
<link rel="stylesheet" href="css/icons.css">
|
|
<link rel="stylesheet" href="css/state.css">
|
|
<link rel="stylesheet" href="css/typography.css">
|
|
<link rel="stylesheet" href="css/spacing.css">
|
|
<link rel="stylesheet" href="css/button.css">
|
|
<link rel="stylesheet" href="css/form.css">
|
|
<link rel="stylesheet" href="css/shade.css">
|
|
<link rel="stylesheet" href="css/modal.css">
|
|
<link rel="stylesheet" href="css/tip.css">
|
|
<link rel="stylesheet" href="css/menu.css">
|
|
<link rel="stylesheet" href="css/header.css">
|
|
<link rel="stylesheet" href="css/date.css">
|
|
<link rel="stylesheet" href="css/clock.css">
|
|
<link rel="stylesheet" href="css/greeting.css">
|
|
<link rel="stylesheet" href="css/transitional.css">
|
|
<link rel="stylesheet" href="css/search.css">
|
|
<link rel="stylesheet" href="css/background.css">
|
|
<link rel="stylesheet" href="css/group.css">
|
|
<link rel="stylesheet" href="css/link.css">
|
|
<link rel="stylesheet" href="css/theme.css">
|
|
<link rel="stylesheet" href="css/auto-suggest.css">
|
|
<link rel="stylesheet" href="css/fontawesome.css">
|
|
<!-- end-css-block -->
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abel|Alatsi|Big+Shoulders+Display|Calistoga|Fredoka+One|Girassol|Gugi|Lato|Life+Savers|Major+Mono+Display|Monoton|Montserrat|Muli|Odibee+Sans|Poiret+One|Quicksand|Raleway|Righteous|Roboto+Condensed|Source+Sans+Pro|Unica+One|Autour+One|Solway&display=swap">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="background">
|
|
<div class="background-image"></div>
|
|
<div class="background-accent"></div>
|
|
</div>
|
|
|
|
<main class="layout">
|
|
|
|
<header class="header">
|
|
<div class="header-shade"></div>
|
|
<div class="header-border"></div>
|
|
<div class="header-area">
|
|
<div class="header-item-grid">
|
|
<div class="header-item header-greeting">
|
|
<div class="header-greeting-body">
|
|
<p class="greeting"></p>
|
|
</div>
|
|
</div>
|
|
<div class="header-item header-transitional">
|
|
<div class="header-transitional-body">
|
|
<p class="transitional"></p>
|
|
</div>
|
|
</div>
|
|
<div class="header-item header-clock">
|
|
<div class="header-clock-body">
|
|
<p class="clock"></p>
|
|
</div>
|
|
</div>
|
|
<div class="header-item header-date">
|
|
<div class="header-date-body">
|
|
<p class="date"></p>
|
|
</div>
|
|
</div>
|
|
<div class="header-item header-search">
|
|
<div class="header-search-body">
|
|
<form class="search" action="" method="get">
|
|
<input class="header-search-input search-input mb-0" type="text" placeholder="Find or Search" name="q" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="1">
|
|
<input type="submit" value="Search" class="is-hidden">
|
|
</form>
|
|
<button class="header-search-clear search-clear button button-link mb-0" tabindex="1" disabled>
|
|
<span class="icon-close"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="header-item header-button header-edit-add">
|
|
<div class="header-button-body">
|
|
<div class="form-group nested-button mb-0">
|
|
<div class="input-wrap input-button input-hide py-0">
|
|
<input id="control-edit" class="control-edit" type="checkbox" tabindex="1">
|
|
<label for="control-edit" class="mb-0"><span class="label-icon"></span> Edit</label>
|
|
</div>
|
|
<div class="input-wrap py-0">
|
|
<div class="form-dropdown">
|
|
<button class="control-add-toggle form-dropdown-toggle button" tabindex="1">
|
|
<span class="button-text">Add</span>
|
|
</button>
|
|
<ul class="list-unstyled form-dropdown-menu">
|
|
<li>
|
|
<button class="button button-block text-left form-dropdown-menu-item control-group-add" tabindex="1"><span class="button-text">New Group</span></button>
|
|
</li>
|
|
<li>
|
|
<button class="button button-block text-left form-dropdown-menu-item control-link-add" tabindex="1"><span class="button-text">New Bookmark</span></button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-item header-button header-accent">
|
|
<div class="header-button-body">
|
|
<div class="form-group nested-button mb-0">
|
|
<div class="input-wrap input-button input-color-dot input-color-dot-theme py-0">
|
|
<input id="control-theme-color-rgb-quick" class="control-theme-color-rgb-quick mb0" type="color" value="#000000" tabindex="1">
|
|
<label for="control-theme-color-rgb-quick">Colour</label>
|
|
</div>
|
|
<div class="input-wrap input-button input-color-dot input-color-dot-accent py-0">
|
|
<input id="control-theme-accent-current-quick" class="control-theme-accent-current-quick mb0" type="color" value="#000000" tabindex="1">
|
|
<label for="control-theme-accent-current-quick">Accent</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-item header-button header-menu">
|
|
<div class="header-button-body">
|
|
<button class="control-menu-open button mb-0" tabindex="1">
|
|
<span class="button-text"><span class="icon-settings"></span></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="link"></section>
|
|
|
|
</main>
|
|
|
|
<section class="menu" tabindex="-1" style="display:none;">
|
|
<div class="menu-area">
|
|
|
|
<div class="menu-nav">
|
|
<div class="menu-nav-area-tab menu-nav-area-grow mb-0 list-unstyled">
|
|
<button class="menu-nav-button control-menu-layout button mb-0 active" tabindex="-1">Layout</button>
|
|
<button class="menu-nav-button control-menu-header button mb-0" tabindex="-1">Header</button>
|
|
<button class="menu-nav-button control-menu-groups button mb-0" tabindex="-1">Groups</button>
|
|
<button class="menu-nav-button control-menu-bookmarks button mb-0" tabindex="-1">Bookmarks</button>
|
|
<button class="menu-nav-button control-menu-theme button mb-0" tabindex="-1">Theme</button>
|
|
<button class="menu-nav-button control-menu-background button mb-0" tabindex="-1">Background</button>
|
|
<button class="menu-nav-button control-menu-data button mb-0" tabindex="-1">Data</button>
|
|
<button class="menu-nav-button control-menu-nightTab button mb-0" tabindex="-1">nightTab</button>
|
|
</div>
|
|
<div class="menu-nav-area-close">
|
|
<button class="menu-nav-button control-menu-close button mb-0" tabindex="-1"><span class="icon-close"></span></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menu-content">
|
|
|
|
<div class="menu-content-area menu-content-area-layout">
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Area</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-wrap">
|
|
<label for="control-layout-width">Width</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-layout-width" class="control-layout-width mr-3" type="range" min="10" max="100" value="0" tabindex="-1">
|
|
<div class="control-layout-width-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-layout-width-default button mb-0" tabindex="1">Default Width</button>
|
|
</div>
|
|
<hr>
|
|
<label class="control-layout-alignment-label">Area alignment</label>
|
|
<div class="form-grid-wrap">
|
|
<div class="form-grid form-grid-3x3 control-layout-alignment-grid">
|
|
<div class="input-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="input-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="input-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="input-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="input-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="input-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="input-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="input-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="input-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>
|
|
<p class="control-layout-alignment-helper form-helper small">Effects may not be visible if the Layout Area is full width or if Bookmarks fill the page.</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Area order</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-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="input-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>
|
|
<p class="control-layout-order-helper form-helper small">Only available when Bookmarks are shown.</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Global scaling</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-wrap">
|
|
<label for="control-layout-size">Size</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-layout-size" class="control-layout-size mr-3" type="range" min="50" max="200" value="0" step="5" tabindex="-1">
|
|
<div class="control-layout-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<p class="control-layout-size-helper form-helper small">Resize all elements on the page.</p>
|
|
<p class="control-layout-size-helper form-helper small">Take care as some elements could scale up to outside the page.</p>
|
|
<div class="button-wrap">
|
|
<button class="control-layout-size-default button mb-0" tabindex="1">Default Global scaling size</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Padding</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-wrap">
|
|
<label for="control-layout-padding">Padding outside Header and Bookmark Area</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-layout-padding" class="control-layout-padding mr-3" type="range" min="0" max="40" value="0" tabindex="-1">
|
|
<div class="control-layout-padding-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-layout-padding-default button mb-0" tabindex="1">Default Padding size</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Gutter</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-wrap">
|
|
<label for="control-layout-gutter">Gutter between Header and Bookmark items</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-layout-gutter" class="control-layout-gutter mr-3" type="range" min="0" max="40" value="0" tabindex="-1">
|
|
<div class="control-layout-gutter-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-layout-gutter-default button mb-0" tabindex="1">Default Gutter size</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Page</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-wrap">
|
|
<label for="control-layout-title">Title</label>
|
|
<input id="control-layout-title" class="control-layout-title mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="New Tab" tabindex="-1">
|
|
</div>
|
|
<hr>
|
|
<div class="input-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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menu-content-area menu-content-area-header is-hidden">
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Area</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-wrap">
|
|
<label for="control-header-area-width">Width</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-header-area-width" class="control-header-area-width mr-3" type="range" min="10" max="100" value="0" tabindex="-1">
|
|
<div class="control-header-area-width-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<p class="control-header-area-width-helper form-helper small">Max width is defined by Layout Area Width.</p>
|
|
<div class="button-wrap">
|
|
<button class="control-header-area-width-match button mb-0" tabindex="-1">Match Bookmarks Area</button>
|
|
</div>
|
|
<hr>
|
|
<label class="control-header-area-alignment-label">Area horizontal alignment</label>
|
|
<div class="form-grid-wrap">
|
|
<div class="form-grid form-grid-3x1 control-header-area-alignment-grid">
|
|
<div class="input-wrap">
|
|
<input id="control-header-area-alignment-left" class="control-header-area-alignment-left" type="radio" name="control-header-area-alignment" value="left" tabindex="-1">
|
|
<label for="control-header-area-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-header-area-alignment-center" class="control-header-area-alignment-center" type="radio" name="control-header-area-alignment" value="center" tabindex="-1">
|
|
<label for="control-header-area-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-header-area-alignment-right" class="control-header-area-alignment-right" type="radio" name="control-header-area-alignment" value="right" tabindex="-1">
|
|
<label for="control-header-area-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="control-header-area-alignment-helper form-helper small">Effects may not be visible if the Header Area is full width.</p>
|
|
<hr>
|
|
<label class="control-header-item-alignment-label">Item horizontal alignment</label>
|
|
<div class="form-grid-wrap">
|
|
<div class="form-grid form-grid-3x1 control-header-item-alignment-grid">
|
|
<div class="input-wrap">
|
|
<input id="control-header-item-alignment-left" class="control-header-item-alignment-left" type="radio" name="control-header-item-alignment" value="left" tabindex="-1">
|
|
<label for="control-header-item-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-header-item-alignment-center" class="control-header-item-alignment-center" type="radio" name="control-header-item-alignment" value="center" tabindex="-1">
|
|
<label for="control-header-item-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-header-item-alignment-right" class="control-header-item-alignment-right" type="radio" name="control-header-item-alignment" value="right" tabindex="-1">
|
|
<label for="control-header-item-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="control-header-item-alignment-helper form-helper small">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Greeting</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-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-indent">
|
|
<div class="input-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="input-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="input-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="input-wrap">
|
|
<label for="control-header-greeting-name">Name</label>
|
|
<input id="control-header-greeting-name" class="control-header-greeting-name mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Nickname, alias or superhero name" tabindex="-1">
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<label for="control-header-greeting-size">Size</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-header-greeting-size" class="control-header-greeting-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
|
|
<div class="control-header-greeting-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-header-greeting-size-default button mb-0" tabindex="-1">Default Greeting size</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Transitional words</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-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>
|
|
<p class="control-header-transitional-show-helper form-helper small">Available when Date or Time is shown.</p>
|
|
<div class="form-indent">
|
|
<div class="input-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="input-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="input-wrap">
|
|
<label for="control-header-transitional-size">Size</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-header-transitional-size" class="control-header-transitional-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
|
|
<div class="control-header-transitional-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-header-transitional-size-default button mb-0" tabindex="-1">Default Transitional size</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Clock</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-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-indent">
|
|
<div class="input-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="input-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>
|
|
<hr>
|
|
<div class="input-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-indent">
|
|
<div class="input-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="input-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>
|
|
<hr>
|
|
<div class="input-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-indent">
|
|
<div class="input-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="input-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>
|
|
<hr>
|
|
<div class="input-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="input-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="input-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="input-wrap">
|
|
<label for="control-header-clock-size">Size</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-header-clock-size" class="control-header-clock-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
|
|
<div class="control-header-clock-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-header-clock-size-default button mb-0" tabindex="-1">Default Clock size</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Date</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-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-indent">
|
|
<div class="input-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-indent">
|
|
<label class="control-header-date-day-week-start-label">Start of the week</label>
|
|
<div class="input-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="input-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>
|
|
<p class="control-header-date-day-week-start-helper form-helper small">Define what day "1" represents, either Monday or Sunday.</p>
|
|
</div>
|
|
<div class="input-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-indent">
|
|
<label class="control-header-date-day-length-label">Word length</label>
|
|
<div class="input-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="input-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>
|
|
<hr>
|
|
<div class="input-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-indent">
|
|
<div class="input-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="input-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="input-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>
|
|
<p class="control-header-date-date-ordinal-helper form-helper small">Display Date as 1st, 2nd, 3rd, 4th etc.</p>
|
|
</div>
|
|
<hr>
|
|
<div class="input-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-indent">
|
|
<div class="input-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-indent">
|
|
<div class="input-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>
|
|
<p class="control-header-date-month-ordinal-helper form-helper small">Display Month as 1st, 2nd, 3rd, 4th etc.</p>
|
|
</div>
|
|
<div class="input-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-indent">
|
|
<label class="control-header-date-month-length-label">Word length</label>
|
|
<div class="input-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="input-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>
|
|
<hr>
|
|
<div class="input-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-indent">
|
|
<div class="input-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="input-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>
|
|
<hr>
|
|
<div class="input-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>
|
|
<label class="control-header-date-format-label">Format</label>
|
|
<div class="input-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="input-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="input-wrap">
|
|
<label for="control-header-date-size">Size</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-header-date-size" class="control-header-date-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
|
|
<div class="control-header-date-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-header-date-size-default button mb-0" tabindex="-1">Default Date size</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Search</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-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-indent">
|
|
<label class="control-header-search-style-label">Search box width</label>
|
|
<div class="input-wrap">
|
|
<input id="control-header-search-style-auto" class="control-header-search-style-auto" type="radio" name="control-header-search-width" value="auto" tabindex="-1">
|
|
<label for="control-header-search-style-auto"><span class="label-icon"></span> Auto</label>
|
|
</div>
|
|
<p class="control-header-search-style-auto-helper form-helper small">Search box will grow to best fit available space.</p>
|
|
<div class="input-wrap">
|
|
<input id="control-header-search-style-custom" class="control-header-search-style-custom" type="radio" name="control-header-search-width" value="custom" tabindex="-1">
|
|
<label for="control-header-search-style-custom"><span class="label-icon"></span> Custom</label>
|
|
</div>
|
|
<p class="control-header-search-style-custom-helper form-helper small">Define how wide the Search box should be inside the Header Area.</p>
|
|
<div class="form-indent">
|
|
<div class="input-wrap">
|
|
<label for="control-header-search-width">Width</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-header-search-width" class="control-header-search-width mr-3" type="range" min="10" max="100" value="0" tabindex="-1">
|
|
<div class="control-header-search-width-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="input-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>
|
|
<p class="control-header-search-focus-helper form-helper small">May not work in some browsers.</p>
|
|
<hr>
|
|
<label class="control-header-search-engine-label">Search engine</label>
|
|
<div class="input-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="input-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="input-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="input-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="input-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="input-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-indent">
|
|
<div class="input-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 mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search engine name" tabindex="-1">
|
|
</div>
|
|
<div class="input-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 mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="-1">
|
|
</div>
|
|
<p class="control-header-search-engine-custom-helper form-helper small">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 small mb-0">nightTab will add the search term entered into the Search input at the end of the above URL</p>
|
|
</div>
|
|
<hr>
|
|
<label class="control-header-search-text-alignment-label">Align Text</label>
|
|
<div class="form-grid-wrap">
|
|
<div class="form-grid form-grid-3x1 control-header-search-text-alignment-grid">
|
|
<div class="input-wrap">
|
|
<input id="control-header-search-text-alignment-left" class="control-header-search-text-alignment-left" type="radio" name="control-header-search-text-alignment" value="left" tabindex="-1">
|
|
<label for="control-header-search-text-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-header-search-text-alignment-center" class="control-header-search-text-alignment-center" type="radio" name="control-header-search-text-alignment" value="center" tabindex="-1">
|
|
<label for="control-header-search-text-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-header-search-text-alignment-right" class="control-header-search-text-alignment-right" type="radio" name="control-header-search-text-alignment" value="right" tabindex="-1">
|
|
<label for="control-header-search-text-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<label for="control-header-search-size">Size</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-header-search-size" class="control-header-search-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
|
|
<div class="control-header-search-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<p class="control-header-search-size-helper form-helper small">Only the Search box width control will change the Width of the Search box.</p>
|
|
<div class="button-wrap">
|
|
<button class="control-header-search-size-default button mb-0" tabindex="-1">Default Search size</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Buttons</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<label class="control-header-button-style-label">Button style</label>
|
|
<div class="input-wrap">
|
|
<input id="control-header-button-style-box" class="control-header-button-style-box" type="radio" name="control-header-button-style" value="box" tabindex="-1">
|
|
<label for="control-header-button-style-box"><span class="label-icon"></span> Box</label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-header-button-style-clear" class="control-header-button-style-clear" type="radio" name="control-header-button-style" value="clear" tabindex="-1">
|
|
<label for="control-header-button-style-clear"><span class="label-icon"></span> Clear</label>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<input id="control-header-button-editadd-show" class="control-header-button-editadd-show" type="checkbox" tabindex="-1">
|
|
<label for="control-header-button-editadd-show"><span class="label-icon"></span> Show Edit/Add</label>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<input id="control-header-button-coloraccent-show" class="control-header-button-coloraccent-show" type="checkbox" tabindex="-1">
|
|
<label for="control-header-button-coloraccent-show"><span class="label-icon"></span> Show Colour/Accent</label>
|
|
</div>
|
|
<p class="control-header-button-coloraccent-show-helper form-helper small">Colour and Accent can also be found under Theme.</p>
|
|
<div class="form-indent">
|
|
<div class="input-wrap">
|
|
<input id="control-header-button-coloraccent-dot-show" class="control-header-button-coloraccent-dot-show" type="checkbox" tabindex="-1">
|
|
<label for="control-header-button-coloraccent-dot-show"><span class="label-icon"></span> Show colour dots</label>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<label for="control-header-button-size">Size</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-header-button-size" class="control-header-button-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
|
|
<div class="control-header-button-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-header-button-size-default button mb-0" tabindex="-1">Default Button size</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Border</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-wrap">
|
|
<label for="control-header-border-top">Top</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-header-border-top" class="control-header-border-top mr-3" type="range" min="0" max="60" value="0" tabindex="-1">
|
|
<div class="control-header-border-top-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<label for="control-header-border-bottom">Bottom</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-header-border-bottom" class="control-header-border-bottom mr-3" type="range" min="0" max="60" value="0" tabindex="-1">
|
|
<div class="control-header-border-bottom-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-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-indent">
|
|
<div class="input-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>
|
|
<p class="control-header-position-sticky-helper form-helper small">Header sticks to the page when scrolling up or down.</p>
|
|
<div class="input-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>
|
|
<p class="control-header-position-inline-helper form-helper small">Header moves inline with the content when scrolling up or down.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Shade</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-wrap">
|
|
<input id="control-header-shade-show" class="control-header-shade-show" type="checkbox" tabindex="-1">
|
|
<label for="control-header-shade-show"><span class="label-icon"></span> Show</label>
|
|
</div>
|
|
<div class="form-indent">
|
|
<div class="input-wrap">
|
|
<input id="control-header-shade-style-always" class="control-header-shade-style-always" type="radio" name="control-header-shade-style" value="always" tabindex="-1">
|
|
<label for="control-header-shade-style-always"><span class="label-icon"></span> Always visible</label>
|
|
</div>
|
|
<p class="control-header-shade-style-always-helper form-helper small">Useful for when a Background Image is shown.</p>
|
|
<div class="input-wrap">
|
|
<input id="control-header-shade-style-scroll" class="control-header-shade-style-scroll" type="radio" name="control-header-shade-style" value="scroll" tabindex="-1">
|
|
<label for="control-header-shade-style-scroll"><span class="label-icon"></span> Visible on scroll</label>
|
|
</div>
|
|
<p class="control-header-shade-style-scroll-helper form-helper small">The page will not scroll if Bookmarks are not shown.</p>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<label for="control-header-shade-opacity">Opacity</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-header-shade-opacity" class="control-header-shade-opacity mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
|
|
<div class="control-header-shade-opacity-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="input-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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menu-content-area menu-content-area-groups is-hidden">
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Names</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-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-indent">
|
|
<div class="input-wrap">
|
|
<label for="control-group-name-size">Name Size</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-group-name-size" class="control-group-name-size mr-3" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
|
|
<div class="control-group-name-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-group-name-size-default button mb-0" tabindex="-1">Default Name size</button>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<label class="control-group-area-alignment-label">Group name horizontal alignment</label>
|
|
<div class="form-grid-wrap">
|
|
<div class="form-grid form-grid-3x1 control-group-area-alignment-grid">
|
|
<div class="input-wrap">
|
|
<input id="control-group-area-alignment-left" class="control-group-area-alignment-left" type="radio" name="control-group-area-alignment" value="left" tabindex="-1">
|
|
<label for="control-group-area-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-group-area-alignment-center" class="control-group-area-alignment-center" type="radio" name="control-group-area-alignment" value="center" tabindex="-1">
|
|
<label for="control-group-area-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-group-area-alignment-right" class="control-group-area-alignment-right" type="radio" name="control-group-area-alignment" value="right" tabindex="-1">
|
|
<label for="control-group-area-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="control-group-area-alignment-helper form-helper small">Effects may not be visible if the Group Name is not shown.</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Order</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-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="input-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 class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Border</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-wrap">
|
|
<label for="control-group-border">Between groups</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-group-border" class="control-group-border mr-3" type="range" min="0" max="60" value="0" tabindex="-1">
|
|
<div class="control-group-border-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<p class="control-link-area-width-helper form-helper small">Border between groups may not be visible if there is only one group.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menu-content-area menu-content-area-bookmarks is-hidden">
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Area</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-wrap">
|
|
<label for="control-link-area-width">Width</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-link-area-width" class="control-link-area-width mr-3" type="range" min="10" max="100" value="0" tabindex="-1">
|
|
<div class="control-link-area-width-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<p class="control-link-area-width-helper form-helper small">Max width is defined by Layout Area Width.</p>
|
|
<div class="button-wrap">
|
|
<button class="control-link-area-width-match button mb-0" tabindex="-1">Match Header Area</button>
|
|
</div>
|
|
<hr>
|
|
<label class="control-link-area-alignment-label">Horizontal alignment</label>
|
|
<div class="form-grid-wrap">
|
|
<div class="form-grid form-grid-3x1 control-link-area-alignment-grid">
|
|
<div class="input-wrap">
|
|
<input id="control-link-area-alignment-left" class="control-link-area-alignment-left" type="radio" name="control-link-area-alignment" value="left" tabindex="-1">
|
|
<label for="control-link-area-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-link-area-alignment-center" class="control-link-area-alignment-center" type="radio" name="control-link-area-alignment" value="center" tabindex="-1">
|
|
<label for="control-link-area-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-link-area-alignment-right" class="control-link-area-alignment-right" type="radio" name="control-link-area-alignment" value="right" tabindex="-1">
|
|
<label for="control-link-area-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="control-link-area-alignment-helper form-helper small">Effects may not be visible if the Bookmark Area is full width.</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Bookmarks</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-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-indent">
|
|
<div class="input-wrap">
|
|
<label for="control-link-item-size">Bookmark Size</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-link-item-size" class="control-link-item-size mr-3" type="range" min="50" max="500" value="0" step="10" tabindex="-1">
|
|
<div class="control-link-item-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-link-item-size-default button mb-0" tabindex="-1">Default Bookmark size</button>
|
|
</div>
|
|
<hr>
|
|
<label class="control-link-item-display-alignment-label">Content alignment</label>
|
|
<div class="form-grid-wrap">
|
|
<div class="form-grid form-grid-3x3 control-link-item-display-alignment-grid">
|
|
<div class="input-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="input-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="input-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="input-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="input-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="input-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="input-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="input-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="input-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>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<label for="control-link-item-display-rotate">Content rotation</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-link-item-display-rotate" class="control-link-item-display-rotate mr-3" type="range" min="-180" max="180" value="0" step="5" tabindex="1">
|
|
<div class="control-link-item-display-rotate-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-link-item-display-rotate-default button mb-0" tabindex="-1">Default rotation</button>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<label for="control-link-item-display-translate-x">Content horizontally offset</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-link-item-display-translate-x" class="control-link-item-display-translate-x mr-3" type="range" min="-1000" max="1000" value="0" step="10" tabindex="1">
|
|
<div class="control-link-item-display-translate-x-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-link-item-display-translate-x-default button mb-0" tabindex="-1">Default horizontal translate</button>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<label for="control-link-item-display-translate-y">Content vertically offset</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-link-item-display-translate-y" class="control-link-item-display-translate-y mr-3" type="range" min="-1000" max="1000" value="0" step="10" tabindex="1">
|
|
<div class="control-link-item-display-translate-y-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-link-item-display-translate-y-default button mb-0" tabindex="-1">Default vertical translate</button>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<label for="control-link-item-display-gutter">Content gutter</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-link-item-display-gutter" class="control-link-item-display-gutter mr-3" type="range" min="0" max="40" value="0" tabindex="1">
|
|
<div class="control-link-item-display-gutter-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-link-item-display-gutter-default button mb-0" tabindex="-1">Default content gutter</button>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="input-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="input-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>
|
|
<p class="control-link-item-display-direction-helper form-helper small">Only available when Letter/Icon and Name are shown.</p>
|
|
<p class="control-link-item-display-direction-helper form-helper small">Vertical alignment works well with Bookmark Block Style.</p>
|
|
<p class="control-link-item-display-direction-helper form-helper small">Horizontal alignment works well with Bookmark List Style.</p>
|
|
<hr>
|
|
<div class="input-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="input-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>
|
|
<p class="control-link-item-display-order-helper form-helper small">Only available when Letter/Icon and Name are shown.</p>
|
|
<hr>
|
|
<div class="input-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-indent">
|
|
<div class="input-wrap">
|
|
<label for="control-link-item-display-letcon-letter-size">Letter size</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-link-item-display-letcon-letter-size" class="control-link-item-display-letcon-letter-size mr-3" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
|
|
<div class="control-link-item-display-letcon-letter-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-link-item-display-letcon-letter-size-default button mb-0" tabindex="-1">Default Letter size</button>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<label for="control-link-item-display-letcon-icon-size">Icon size</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-link-item-display-letcon-icon-size" class="control-link-item-display-letcon-icon-size mr-3" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
|
|
<div class="control-link-item-display-letcon-icon-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-link-item-display-letcon-icon-size-default button mb-0" tabindex="-1">Default Icon size</button>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="input-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 class="form-indent">
|
|
<div class="input-wrap">
|
|
<label for="control-link-item-display-name-size">Name size</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-link-item-display-name-size" class="control-link-item-display-name-size mr-3" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
|
|
<div class="control-link-item-display-name-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-link-item-display-name-size-default button mb-0" tabindex="-1">Default Name size</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="input-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="input-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="input-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>
|
|
<hr>
|
|
<div class="input-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="input-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 class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Background colour</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-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 background colour</label>
|
|
</div>
|
|
<p class="control-link-item-color-by-theme-helper form-helper small">Use the Background colour defined by the Theme.</p>
|
|
<div class="input-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 background colour</label>
|
|
</div>
|
|
<p class="control-link-item-color-by-custom-helper form-helper small">Use a custom Background colour.</p>
|
|
<p class="control-link-item-color-by-custom-helper form-helper small">Take care as some colours may make the Letter/Icon and Name unreadable.</p>
|
|
<div class="form-indent">
|
|
<div class="input-wrap">
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-link-item-color-by-picker" class="form-group-item-half control-link-item-color-by-picker mb-0" type="color" value="#000000" tabindex="1">
|
|
<input id="control-link-item-color-by-hex" class="form-group-item-half control-link-item-color-by-hex mb-0" 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 class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Border</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-wrap">
|
|
<label for="control-link-item-border">All sides</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-link-item-border" class="control-link-item-border mr-3" type="range" min="0" max="40" value="0" tabindex="-1">
|
|
<div class="control-link-item-border-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Style</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-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>
|
|
<p class="control-link-style-block-helper form-helper small">Bookmark tiles more square shaped.</p>
|
|
<div class="input-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>
|
|
<p class="control-link-style-list-helper form-helper small">Bookmark tiles more short and wide.</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Orientation</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-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="input-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>
|
|
<p class="control-link-orientation-helper form-helper small">Display the URL and Controls either at the top of bottom of a Bookmark Tile.</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Sort</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="form-inline">
|
|
<div class="button-wrap">
|
|
<button class="control-link-sort-letter button mb-0" tabindex="-1">By Letter</button>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-link-sort-icon button mb-0" tabindex="-1">By Icon</button>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-link-sort-name button mb-0" tabindex="-1">By Name</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Accent override</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="button-wrap">
|
|
<button class="control-link-accent-clear button mb-0" tabindex="-1">Remove all override colours</button>
|
|
</div>
|
|
<hr>
|
|
<div class="button-wrap">
|
|
<button class="control-link-accent-set button mb-0" tabindex="-1">Add override colours</button>
|
|
</div>
|
|
<p class="control-link-accent-set-helper form-helper small">Adds a unique override colour to each Bookmark.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menu-content-area menu-content-area-theme is-hidden">
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Presets</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="form-inline">
|
|
<div class="button-wrap">
|
|
<button class="control-theme-preset-nighttab theme-preset-button button mb-0" tabindex="-1">
|
|
<div class="theme-preset-preview">
|
|
<span class="theme-preset-background-01 theme-preset-background-nighttab-01"></span>
|
|
<span class="theme-preset-background-02 theme-preset-background-nighttab-02"></span>
|
|
<span class="theme-preset-background-03 theme-preset-background-nighttab-03"></span>
|
|
<span class="theme-preset-background-04 theme-preset-background-nighttab-04"></span>
|
|
<span class="theme-preset-accent theme-preset-accent-nighttab"></span>
|
|
<span class="theme-preset-font theme-preset-font-nighttab">
|
|
<span class="theme-preset-font-display theme-preset-font-display-nighttab">nightTab</span>
|
|
<span class="theme-preset-font-ui theme-preset-font-ui-nighttab">ABC 123</span>
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-theme-preset-midnight theme-preset-button button mb-0" tabindex="-1">
|
|
<div class="theme-preset-preview">
|
|
<span class="theme-preset-background-01 theme-preset-background-midnight-01"></span>
|
|
<span class="theme-preset-background-02 theme-preset-background-midnight-02"></span>
|
|
<span class="theme-preset-background-03 theme-preset-background-midnight-03"></span>
|
|
<span class="theme-preset-background-04 theme-preset-background-midnight-04"></span>
|
|
<span class="theme-preset-accent theme-preset-accent-midnight"></span>
|
|
<span class="theme-preset-font theme-preset-font-midnight">
|
|
<span class="theme-preset-font-display theme-preset-font-display-midnight">Midnight</span>
|
|
<span class="theme-preset-font-ui theme-preset-font-ui-midnight">ABC 123</span>
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-theme-preset-pym theme-preset-button button mb-0" tabindex="-1">
|
|
<div class="theme-preset-preview">
|
|
<span class="theme-preset-background-01 theme-preset-background-pym-01"></span>
|
|
<span class="theme-preset-background-02 theme-preset-background-pym-02"></span>
|
|
<span class="theme-preset-background-03 theme-preset-background-pym-03"></span>
|
|
<span class="theme-preset-background-04 theme-preset-background-pym-04"></span>
|
|
<span class="theme-preset-accent theme-preset-accent-pym"></span>
|
|
<span class="theme-preset-font theme-preset-font-pym">
|
|
<span class="theme-preset-font-display theme-preset-font-display-pym">Pym</span>
|
|
<span class="theme-preset-font-ui theme-preset-font-ui-pym">ABC 123</span>
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-theme-preset-cruiser theme-preset-button button mb-0" tabindex="-1">
|
|
<div class="theme-preset-preview">
|
|
<span class="theme-preset-background-01 theme-preset-background-cruiser-01"></span>
|
|
<span class="theme-preset-background-02 theme-preset-background-cruiser-02"></span>
|
|
<span class="theme-preset-background-03 theme-preset-background-cruiser-03"></span>
|
|
<span class="theme-preset-background-04 theme-preset-background-cruiser-04"></span>
|
|
<span class="theme-preset-accent theme-preset-accent-cruiser"></span>
|
|
<span class="theme-preset-font theme-preset-font-cruiser">
|
|
<span class="theme-preset-font-display theme-preset-font-display-cruiser">Cruiser</span>
|
|
<span class="theme-preset-font-ui theme-preset-font-ui-cruiser">ABC 123</span>
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-theme-preset-sharpmint theme-preset-button button mb-0" tabindex="-1">
|
|
<div class="theme-preset-preview">
|
|
<span class="theme-preset-background-01 theme-preset-background-sharpmint-01"></span>
|
|
<span class="theme-preset-background-02 theme-preset-background-sharpmint-02"></span>
|
|
<span class="theme-preset-background-03 theme-preset-background-sharpmint-03"></span>
|
|
<span class="theme-preset-background-04 theme-preset-background-sharpmint-04"></span>
|
|
<span class="theme-preset-accent theme-preset-accent-sharpmint"></span>
|
|
<span class="theme-preset-font theme-preset-font-sharpmint">
|
|
<span class="theme-preset-font-display theme-preset-font-display-sharpmint">Sharp Mint</span>
|
|
<span class="theme-preset-font-ui theme-preset-font-ui-sharpmint">ABC 123</span>
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-theme-preset-snowglow theme-preset-button button mb-0" tabindex="-1">
|
|
<div class="theme-preset-preview">
|
|
<span class="theme-preset-background-01 theme-preset-background-snowglow-01"></span>
|
|
<span class="theme-preset-background-02 theme-preset-background-snowglow-02"></span>
|
|
<span class="theme-preset-background-03 theme-preset-background-snowglow-03"></span>
|
|
<span class="theme-preset-background-04 theme-preset-background-snowglow-04"></span>
|
|
<span class="theme-preset-accent theme-preset-accent-snowglow"></span>
|
|
<span class="theme-preset-font theme-preset-font-snowglow">
|
|
<span class="theme-preset-font-display theme-preset-font-display-snowglow">Snow Glow</span>
|
|
<span class="theme-preset-font-ui theme-preset-font-ui-snowglow">ABC 123</span>
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-theme-preset-rumble theme-preset-button button mb-0" tabindex="-1">
|
|
<div class="theme-preset-preview">
|
|
<span class="theme-preset-background-01 theme-preset-background-rumble-01"></span>
|
|
<span class="theme-preset-background-02 theme-preset-background-rumble-02"></span>
|
|
<span class="theme-preset-background-03 theme-preset-background-rumble-03"></span>
|
|
<span class="theme-preset-background-04 theme-preset-background-rumble-04"></span>
|
|
<span class="theme-preset-accent theme-preset-accent-rumble"></span>
|
|
<span class="theme-preset-font theme-preset-font-rumble">
|
|
<span class="theme-preset-font-display theme-preset-font-display-rumble">Rumble</span>
|
|
<span class="theme-preset-font-ui theme-preset-font-ui-rumble">ABC 123</span>
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-theme-preset-sollight theme-preset-button button mb-0" tabindex="-1">
|
|
<div class="theme-preset-preview">
|
|
<span class="theme-preset-background-01 theme-preset-background-sollight-01"></span>
|
|
<span class="theme-preset-background-02 theme-preset-background-sollight-02"></span>
|
|
<span class="theme-preset-background-03 theme-preset-background-sollight-03"></span>
|
|
<span class="theme-preset-background-04 theme-preset-background-sollight-04"></span>
|
|
<span class="theme-preset-accent theme-preset-accent-sollight"></span>
|
|
<span class="theme-preset-font theme-preset-font-sollight">
|
|
<span class="theme-preset-font-display theme-preset-font-display-sollight">Sol Light</span>
|
|
<span class="theme-preset-font-ui theme-preset-font-ui-sollight">ABC 123</span>
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-theme-preset-artdeco theme-preset-button button mb-0" tabindex="-1">
|
|
<div class="theme-preset-preview">
|
|
<span class="theme-preset-background-01 theme-preset-background-artdeco-01"></span>
|
|
<span class="theme-preset-background-02 theme-preset-background-artdeco-02"></span>
|
|
<span class="theme-preset-background-03 theme-preset-background-artdeco-03"></span>
|
|
<span class="theme-preset-background-04 theme-preset-background-artdeco-04"></span>
|
|
<span class="theme-preset-accent theme-preset-accent-artdeco"></span>
|
|
<span class="theme-preset-font theme-preset-font-artdeco">
|
|
<span class="theme-preset-font-display theme-preset-font-display-artdeco">Art Deco</span>
|
|
<span class="theme-preset-font-ui theme-preset-font-ui-artdeco">ABC 123</span>
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-theme-preset-macaroon theme-preset-button button mb-0" tabindex="-1">
|
|
<div class="theme-preset-preview">
|
|
<span class="theme-preset-background-01 theme-preset-background-macaroon-01"></span>
|
|
<span class="theme-preset-background-02 theme-preset-background-macaroon-02"></span>
|
|
<span class="theme-preset-background-03 theme-preset-background-macaroon-03"></span>
|
|
<span class="theme-preset-background-04 theme-preset-background-macaroon-04"></span>
|
|
<span class="theme-preset-accent theme-preset-accent-macaroon"></span>
|
|
<span class="theme-preset-font theme-preset-font-macaroon">
|
|
<span class="theme-preset-font-display theme-preset-font-display-macaroon">Macaroon</span>
|
|
<span class="theme-preset-font-ui theme-preset-font-ui-macaroon">ABC 123</span>
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-theme-preset-hotpepper theme-preset-button button mb-0" tabindex="-1">
|
|
<div class="theme-preset-preview">
|
|
<span class="theme-preset-background-01 theme-preset-background-hotpepper-01"></span>
|
|
<span class="theme-preset-background-02 theme-preset-background-hotpepper-02"></span>
|
|
<span class="theme-preset-background-03 theme-preset-background-hotpepper-03"></span>
|
|
<span class="theme-preset-background-04 theme-preset-background-hotpepper-04"></span>
|
|
<span class="theme-preset-accent theme-preset-accent-hotpepper"></span>
|
|
<span class="theme-preset-font theme-preset-font-hotpepper">
|
|
<span class="theme-preset-font-display theme-preset-font-display-hotpepper">Hot Pepper</span>
|
|
<span class="theme-preset-font-ui theme-preset-font-ui-hotpepper">ABC 123</span>
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-theme-preset-steel theme-preset-button button mb-0" tabindex="-1">
|
|
<div class="theme-preset-preview">
|
|
<span class="theme-preset-background-01 theme-preset-background-steel-01"></span>
|
|
<span class="theme-preset-background-02 theme-preset-background-steel-02"></span>
|
|
<span class="theme-preset-background-03 theme-preset-background-steel-03"></span>
|
|
<span class="theme-preset-background-04 theme-preset-background-steel-04"></span>
|
|
<span class="theme-preset-accent theme-preset-accent-steel"></span>
|
|
<span class="theme-preset-font theme-preset-font-steel">
|
|
<span class="theme-preset-font-display theme-preset-font-display-steel">Steel</span>
|
|
<span class="theme-preset-font-ui theme-preset-font-ui-steel">ABC 123</span>
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-theme-preset-outrun theme-preset-button button mb-0" tabindex="-1">
|
|
<div class="theme-preset-preview">
|
|
<span class="theme-preset-background-01 theme-preset-background-outrun-01"></span>
|
|
<span class="theme-preset-background-02 theme-preset-background-outrun-02"></span>
|
|
<span class="theme-preset-background-03 theme-preset-background-outrun-03"></span>
|
|
<span class="theme-preset-background-04 theme-preset-background-outrun-04"></span>
|
|
<span class="theme-preset-accent theme-preset-accent-outrun"></span>
|
|
<span class="theme-preset-font theme-preset-font-outrun">
|
|
<span class="theme-preset-font-display theme-preset-font-display-outrun">Outrun</span>
|
|
<span class="theme-preset-font-ui theme-preset-font-ui-outrun">ABC 123</span>
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-theme-preset-pumpkin theme-preset-button button mb-0" tabindex="-1">
|
|
<div class="theme-preset-preview">
|
|
<span class="theme-preset-background-01 theme-preset-background-pumpkin-01"></span>
|
|
<span class="theme-preset-background-02 theme-preset-background-pumpkin-02"></span>
|
|
<span class="theme-preset-background-03 theme-preset-background-pumpkin-03"></span>
|
|
<span class="theme-preset-background-04 theme-preset-background-pumpkin-04"></span>
|
|
<span class="theme-preset-accent theme-preset-accent-pumpkin"></span>
|
|
<span class="theme-preset-font theme-preset-font-pumpkin">
|
|
<span class="theme-preset-font-display theme-preset-font-display-pumpkin">Pumpkin</span>
|
|
<span class="theme-preset-font-ui theme-preset-font-ui-pumpkin">ABC 123</span>
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-theme-preset-bubblegum theme-preset-button button mb-0" tabindex="-1">
|
|
<div class="theme-preset-preview">
|
|
<span class="theme-preset-background-01 theme-preset-background-bubblegum-01"></span>
|
|
<span class="theme-preset-background-02 theme-preset-background-bubblegum-02"></span>
|
|
<span class="theme-preset-background-03 theme-preset-background-bubblegum-03"></span>
|
|
<span class="theme-preset-background-04 theme-preset-background-bubblegum-04"></span>
|
|
<span class="theme-preset-accent theme-preset-accent-bubblegum"></span>
|
|
<span class="theme-preset-font theme-preset-font-bubblegum">
|
|
<span class="theme-preset-font-display theme-preset-font-display-bubblegum">Bubble Gum</span>
|
|
<span class="theme-preset-font-ui theme-preset-font-ui-bubblegum">ABC 123</span>
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-theme-preset-elderbean theme-preset-button button mb-0" tabindex="-1">
|
|
<div class="theme-preset-preview">
|
|
<span class="theme-preset-background-01 theme-preset-background-elderbean-01"></span>
|
|
<span class="theme-preset-background-02 theme-preset-background-elderbean-02"></span>
|
|
<span class="theme-preset-background-03 theme-preset-background-elderbean-03"></span>
|
|
<span class="theme-preset-background-04 theme-preset-background-elderbean-04"></span>
|
|
<span class="theme-preset-accent theme-preset-accent-elderbean"></span>
|
|
<span class="theme-preset-font theme-preset-font-elderbean">
|
|
<span class="theme-preset-font-display theme-preset-font-display-elderbean">Elder Bean</span>
|
|
<span class="theme-preset-font-ui theme-preset-font-ui-elderbean">ABC 123</span>
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Style</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-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="input-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>
|
|
<p class="control-theme-style-light-helper form-helper small">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Fonts</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-wrap">
|
|
<label for="control-theme-font-display">Display font</label>
|
|
<input id="control-theme-font-display" class="control-theme-font-display mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Google font name" tabindex="-1">
|
|
</div>
|
|
<p class="control-theme-font-helper form-helper small">Use a <a href="https://fonts.google.com/" target="_blank">Google Font</a> to customise the Clock, Date, Group names and Bookmark Letters.</p>
|
|
<p class="control-theme-font-helper form-helper small">Paste in a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Fredoka One" or "Comfortaa"</p>
|
|
<p class="control-theme-font-helper form-helper small">Clear the field to use the default font "Fjalla".</p>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<label for="control-theme-font-ui">UI font</label>
|
|
<input id="control-theme-font-ui" class="control-theme-font-ui mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Google font name" tabindex="-1">
|
|
</div>
|
|
<p class="control-theme-font-helper form-helper small">Use a <a href="https://fonts.google.com/" target="_blank">Google Font</a> to customise the Bookmark name, URL and form elements.</p>
|
|
<p class="control-theme-font-helper form-helper small">Paste in a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto" or "Source Sans Pro"</p>
|
|
<p class="control-theme-font-helper form-helper small">Clear the field to use the default font "Open Sans".</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Colour</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-wrap">
|
|
<label for="control-theme-color-rgb-picker">Primary colour</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-theme-color-rgb-picker" class="form-group-item-half control-theme-color-rgb-picker mb-0" type="color" value="#000000" tabindex="1">
|
|
<input id="control-theme-color-rgb-hex" class="form-group-item-half control-theme-color-rgb-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
|
</div>
|
|
</div>
|
|
<p class="control-theme-color-helper form-helper small">Light and dark shades from this colour are used across nightTabs.</p>
|
|
<div class="button-wrap">
|
|
<button class="control-theme-color-rgb-default button mb-0" tabindex="-1">Default primary colour</button>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<label for="control-theme-color-hsl-h">Hue</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-theme-color-hsl-h" class="control-theme-color-hsl-h mr-3" type="range" min="0" max="359" value="0" tabindex="-1">
|
|
<div class="control-theme-color-hsl-h-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<label for="control-theme-color-hsl-s">Saturation</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-theme-color-hsl-s" class="control-theme-color-hsl-s mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
|
|
<div class="control-theme-color-hsl-s-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<label for="control-theme-color-hsl-l">Lightness</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-theme-color-hsl-l" class="control-theme-color-hsl-l mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
|
|
<div class="control-theme-color-hsl-l-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<label for="control-theme-color-rgb-r">Red</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-theme-color-rgb-r" class="control-theme-color-rgb-r mr-3" type="range" min="0" max="255" value="0" tabindex="-1">
|
|
<div class="control-theme-color-rgb-r-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<label for="control-theme-color-rgb-g">Green</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-theme-color-rgb-g" class="control-theme-color-rgb-g mr-3" type="range" min="0" max="255" value="0" tabindex="-1">
|
|
<div class="control-theme-color-rgb-g-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<label for="control-theme-color-rgb-b">Blue</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-theme-color-rgb-b" class="control-theme-color-rgb-b mr-3" type="range" min="0" max="255" value="0" tabindex="-1">
|
|
<div class="control-theme-color-rgb-b-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<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-neg-10"></div>
|
|
</div>
|
|
<div class="form-group-text form-group-text-borderless">
|
|
<div class="theme-color-box theme-color-neg-09"></div>
|
|
</div>
|
|
<div class="form-group-text form-group-text-borderless">
|
|
<div class="theme-color-box theme-color-neg-08"></div>
|
|
</div>
|
|
<div class="form-group-text form-group-text-borderless">
|
|
<div class="theme-color-box theme-color-neg-07"></div>
|
|
</div>
|
|
<div class="form-group-text form-group-text-borderless">
|
|
<div class="theme-color-box theme-color-neg-06"></div>
|
|
</div>
|
|
<div class="form-group-text form-group-text-borderless">
|
|
<div class="theme-color-box theme-color-neg-05"></div>
|
|
</div>
|
|
<div class="form-group-text form-group-text-borderless">
|
|
<div class="theme-color-box theme-color-neg-04"></div>
|
|
</div>
|
|
<div class="form-group-text form-group-text-borderless">
|
|
<div class="theme-color-box theme-color-neg-03"></div>
|
|
</div>
|
|
<div class="form-group-text form-group-text-borderless">
|
|
<div class="theme-color-box theme-color-neg-02"></div>
|
|
</div>
|
|
<div class="form-group-text form-group-text-borderless">
|
|
<div class="theme-color-box theme-color-neg-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-pos-01"></div>
|
|
</div>
|
|
<div class="form-group-text form-group-text-borderless">
|
|
<div class="theme-color-box theme-color-pos-02"></div>
|
|
</div>
|
|
<div class="form-group-text form-group-text-borderless">
|
|
<div class="theme-color-box theme-color-pos-03"></div>
|
|
</div>
|
|
<div class="form-group-text form-group-text-borderless">
|
|
<div class="theme-color-box theme-color-pos-04"></div>
|
|
</div>
|
|
<div class="form-group-text form-group-text-borderless">
|
|
<div class="theme-color-box theme-color-pos-05"></div>
|
|
</div>
|
|
<div class="form-group-text form-group-text-borderless">
|
|
<div class="theme-color-box theme-color-pos-06"></div>
|
|
</div>
|
|
<div class="form-group-text form-group-text-borderless">
|
|
<div class="theme-color-box theme-color-pos-07"></div>
|
|
</div>
|
|
<div class="form-group-text form-group-text-borderless">
|
|
<div class="theme-color-box theme-color-pos-08"></div>
|
|
</div>
|
|
<div class="form-group-text form-group-text-borderless">
|
|
<div class="theme-color-box theme-color-pos-09"></div>
|
|
</div>
|
|
<div class="form-group-text form-group-text-borderless">
|
|
<div class="theme-color-box theme-color-pos-10"></div>
|
|
</div>
|
|
</div>
|
|
<p class="control-theme-color-helper form-helper small">Backgrounds, Bookmarks and Modals use shades from the left.</p>
|
|
<p class="control-theme-color-helper form-helper small">Text and form elements use shades from the right.</p>
|
|
<p class="control-theme-color-helper form-helper small">For a light look switch to the Light Style and then select a Shade colour.</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Accent</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-wrap">
|
|
<label for="control-theme-accent-current-picker">Colour</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-theme-accent-current-picker" class="form-group-item-half control-theme-accent-current-picker mb-0" type="color" value="#000000" tabindex="1">
|
|
<input id="control-theme-accent-current-hex" class="form-group-item-half control-theme-accent-current-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
|
</div>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-theme-accent-current-default button mb-0" tabindex="-1">Default accent</button>
|
|
</div>
|
|
<p class="control-theme-style-light-helper form-helper small">Accent Colour can also be changed from the Header Area.</p>
|
|
<hr>
|
|
<div class="input-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-indent">
|
|
<div class="input-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="input-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="input-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="input-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="input-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="button-wrap">
|
|
<button class="control-theme-accent-randomise button mb-0" tabindex="-1">Randomise now</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Radius</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-wrap">
|
|
<label for="control-theme-radius">All corners</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-theme-radius" class="control-theme-radius mr-3" type="range" min="0" max="300" value="0" step="5" tabindex="-1">
|
|
<div class="control-theme-radius-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-theme-radius-default button mb-0" tabindex="-1">Default radius</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menu-content-area menu-content-area-background is-hidden">
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Colour</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-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 background colour</label>
|
|
</div>
|
|
<p class="control-background-color-by-theme-helper form-helper small">Use the Background colour defined by the Theme.</p>
|
|
<div class="input-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 background colour</label>
|
|
</div>
|
|
<p class="control-background-color-by-custom-helper form-helper small">Use a custom Background colour.</p>
|
|
<p class="control-background-color-by-custom-helper form-helper small">Take care as some colours may make the Clock, Date and other text unreadable.</p>
|
|
<div class="form-indent">
|
|
<div class="input-wrap">
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-background-color-by-picker" class="form-group-item-half control-background-color-by-picker mb-0" type="color" value="#000000" tabindex="1">
|
|
<input id="control-background-color-by-hex" class="form-group-item-half control-background-color-by-hex mb-0" 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 class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Image</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-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-indent">
|
|
<div class="input-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-indent">
|
|
<div class="form-inline">
|
|
<div class="input-wrap input-button 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>
|
|
<div class="button-wrap">
|
|
<button class="control-background-image-file-clear button mb-0" href="#">Clear image</button>
|
|
</div>
|
|
</div>
|
|
<p class="control-background-image-file-helper form-helper small">Max image size 5MB, (due to browser local storage limits).</p>
|
|
<p class="control-background-image-file-helper form-helper small">Take care with large files, they may impact performance.</p>
|
|
<div class="feedback-wrap">
|
|
<div class="control-background-image-file-feedback form-feedback"></div>
|
|
</div>
|
|
</div>
|
|
<div class="input-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-indent">
|
|
<div class="input-wrap">
|
|
<textarea id="control-background-image-url" class="control-background-image-url mb-0" spellcheck="false" placeholder="https://..." tabindex="-1"></textarea>
|
|
</div>
|
|
<p class="control-background-image-url-helper form-helper small">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>
|
|
<hr>
|
|
<p class="control-background-image-url-helper form-helper small">Unsplash can be used for random images, eg:</p>
|
|
<p class="control-background-image-url-helper form-helper small"><i>https://source.unsplash.com/random/1920x1080/?night,day,sky</i></p>
|
|
<p class="control-background-image-url-helper form-helper small">Change parameters after <i>.../random/</i> for more options. Loading times may vary.</p>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<label for="control-background-image-opacity">Opacity</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-background-image-opacity" class="control-background-image-opacity mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
|
|
<div class="control-background-image-opacity-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<label for="control-background-image-grayscale">Grayscale</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-background-image-grayscale" class="control-background-image-grayscale mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
|
|
<div class="control-background-image-grayscale-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<label for="control-background-image-blur">Blur</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-background-image-blur" class="control-background-image-blur mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
|
|
<div class="control-background-image-blur-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<label for="control-background-image-accent">Accent overlay</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-background-image-accent" class="control-background-image-accent mr-3" type="range" min="0" max="90" value="0" tabindex="-1">
|
|
<div class="control-background-image-accent-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<label for="control-background-image-scale">Size</label>
|
|
<div class="form-group form-group-block mb-0">
|
|
<input id="control-background-image-scale" class="control-background-image-scale mr-3" type="range" min="100" max="300" value="0" tabindex="-1">
|
|
<div class="control-background-image-scale-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menu-content-area menu-content-area-data is-hidden">
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Restore</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-wrap input-button input-hide">
|
|
<input id="control-data-import" class="control-data-import" type="file" tabindex="-1">
|
|
<label for="control-data-import">Import data</label>
|
|
</div>
|
|
<p class="control-data-import-helper form-helper small">Restore a previously exported nightTab backup.</p>
|
|
<div class="feedback-wrap">
|
|
<div class="control-data-import-feedback form-feedback"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Backup</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="button-wrap">
|
|
<button class="control-data-export button mb-0" href="#" tabindex="-1">Export data</button>
|
|
</div>
|
|
<p class="control-data-export-helper form-helper small">Download a backup of your nightTab Bookmarks and Settings.</p>
|
|
<p class="control-data-export-helper form-helper small">This file can later be imported on this or another deivce.</p>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Clear</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="button-wrap">
|
|
<button class="control-data-clear button mb-0" href="#" tabindex="-1">Clear data</button>
|
|
</div>
|
|
<p class="control-data-clear-helper form-helper small">Wipe all data and restore nightTab to default state.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menu-content-area menu-content-area-nightTab is-hidden">
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">nightTab</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="p-wrap">
|
|
<p class="mb-1">Version <strong class="display-version"></strong></p>
|
|
<p class="display-name small mb-0"></p>
|
|
</div>
|
|
<hr>
|
|
<div class="p-wrap">
|
|
<p>Project repository on <a href="https://github.com/zombieFox/nightTab" target="_blank" tabindex="-1">Github</a>.</p>
|
|
</div>
|
|
<hr>
|
|
<div class="p-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>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</body>
|
|
|
|
<!-- js-block -->
|
|
<!-- vendor -->
|
|
<script src="../node_modules/html5sortable/dist/html5sortable.min.js"></script>
|
|
<script src="../node_modules/invert-color/lib/invert.min.js"></script>
|
|
<script src="../node_modules/moment/min/moment.min.js"></script>
|
|
<!-- nightTab -->
|
|
<script src="js/helper.js"></script>
|
|
<script src="js/data.js"></script>
|
|
<script src="js/fontawesome.js"></script>
|
|
<script src="js/update.js"></script>
|
|
<script src="js/state.js"></script>
|
|
<script src="js/bookmarks.js"></script>
|
|
<script src="js/control.js"></script>
|
|
<script src="js/menu.js"></script>
|
|
<script src="js/header.js"></script>
|
|
<script src="js/modal.js"></script>
|
|
<script src="js/tip.js"></script>
|
|
<script src="js/shade.js"></script>
|
|
<script src="js/theme.js"></script>
|
|
<script src="js/date.js"></script>
|
|
<script src="js/greeting.js"></script>
|
|
<script src="js/transitional.js"></script>
|
|
<script src="js/clock.js"></script>
|
|
<script src="js/search.js"></script>
|
|
<script src="js/link.js"></script>
|
|
<script src="js/version.js"></script>
|
|
<script src="js/keyboard.js"></script>
|
|
<script src="js/background.js"></script>
|
|
<script src="js/layout.js"></script>
|
|
<script src="js/auto-suggest.js"></script>
|
|
<script src="js/pagelock.js"></script>
|
|
<script src="js/edge.js"></script>
|
|
<script src="js/dropdown.js"></script>
|
|
<script src="js/init.js"></script>
|
|
<!-- end-js-block -->
|
|
|
|
</html>
|