mirror of
https://github.com/zombieFox/nightTab.git
synced 2024-12-29 18:18:52 +01:00
1040 lines
63 KiB
HTML
1040 lines
63 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<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>
|
|
<link rel="stylesheet" href="css/reset.css">
|
|
<link rel="stylesheet" href="css/base.css">
|
|
<link rel="stylesheet" href="css/main.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/utilities.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/link.css">
|
|
<link rel="stylesheet" href="css/auto-suggest.css">
|
|
<link rel="stylesheet" href="css/fontawesome.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="background">
|
|
<div class="background-image"></div>
|
|
<div class="background-accent"></div>
|
|
</div>
|
|
|
|
<main class="main">
|
|
|
|
<header class="header">
|
|
<div class="header-shade"></div>
|
|
<div class="header-area">
|
|
<div class="header-item-grid">
|
|
<div class="header-item header-greeting">
|
|
<p class="greeting"></p>
|
|
</div>
|
|
<div class="header-item header-transitional">
|
|
<p class="transitional"></p>
|
|
</div>
|
|
<div class="header-item header-clock">
|
|
<p class="clock"></p>
|
|
</div>
|
|
<div class="header-item header-date">
|
|
<p class="date"></p>
|
|
</div>
|
|
<div class="header-item header-search">
|
|
<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 class="header-item header-button header-edit-add">
|
|
<div class="form-group nested-button mb-0">
|
|
<div class="input-wrap input-button input-hide py-0">
|
|
<input id="control-link-edit" class="control-link-edit" type="checkbox" tabindex="1">
|
|
<label for="control-link-edit" class=" mb-0">Edit</label>
|
|
</div>
|
|
<button class="control-link-add button" tabindex="1">
|
|
<span class="button-text">Add</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="header-item header-button header-accent">
|
|
<div class="input-wrap input-button input-color-dot input-color-dot-accent py-0">
|
|
<input id="control-theme-accent-current" class="control-theme-accent-current" type="color" tabindex="1">
|
|
<label for="control-theme-accent-current">Accent</label>
|
|
</div>
|
|
</div>
|
|
<div class="header-item header-button header-menu">
|
|
<button class="control-menu button mb-0" tabindex="1">
|
|
<span class="button-text"><span class="icon-settings"></span></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="link">
|
|
<div class="link-area"></div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
|
|
<section class="menu" tabindex="1">
|
|
<div class="menu-area">
|
|
|
|
<div class="menu-nav">
|
|
<div class="menu-nav-area menu-nav-area-grow mb-0 list-unstyled">
|
|
<button class="menu-nav-button button button-large active" data-target=".menu-content-area-layout" tabindex="1">Layout</button>
|
|
<button class="menu-nav-button button button-large" data-target=".menu-content-area-header" tabindex="1">Header</button>
|
|
<button class="menu-nav-button button button-large" data-target=".menu-content-area-bookmarks" tabindex="1">Bookmarks</button>
|
|
<button class="menu-nav-button button button-large" data-target=".menu-content-area-theme" tabindex="1">Theme</button>
|
|
<button class="menu-nav-button button button-large" data-target=".menu-content-area-background" tabindex="1">Background</button>
|
|
</div>
|
|
<div class="menu-nav-area">
|
|
<button class="menu-close button button-block button-large 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>
|
|
<input id="control-layout-width" class="control-layout-width" type="range" min="5" max="100" value="0" tabindex="1">
|
|
</div>
|
|
<hr>
|
|
<label class="control-layout-alignment-horizontal-label">Horizontal Alignment</label>
|
|
<div class="input-wrap">
|
|
<input id="control-layout-alignment-horizontal-left" class="control-layout-alignment-horizontal-left" type="radio" name="control-layout-alignment-horizontal" value="left" tabindex="1">
|
|
<label for="control-layout-alignment-horizontal-left">Left</label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-layout-alignment-horizontal-center" class="control-layout-alignment-horizontal-center" type="radio" name="control-layout-alignment-horizontal" value="center" tabindex="1">
|
|
<label for="control-layout-alignment-horizontal-center">Centre</label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-layout-alignment-horizontal-right" class="control-layout-alignment-horizontal-right" type="radio" name="control-layout-alignment-horizontal" value="right" tabindex="1">
|
|
<label for="control-layout-alignment-horizontal-right">Right</label>
|
|
</div>
|
|
<p class="input-helper small muted">Effects may not be visible if the Layout Area is full width.</p>
|
|
<hr>
|
|
<label class="control-layout-alignment-vertical-label">Vertical Alignment</label>
|
|
<div class="input-wrap">
|
|
<input id="control-layout-alignment-vertical-top" class="control-layout-alignment-vertical-top" type="radio" name="control-layout-alignment-vertical" value="top" tabindex="1">
|
|
<label for="control-layout-alignment-vertical-top">Top</label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-layout-alignment-vertical-center" class="control-layout-alignment-vertical-center" type="radio" name="control-layout-alignment-vertical" value="center" tabindex="1">
|
|
<label for="control-layout-alignment-vertical-center">Centre</label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-layout-alignment-vertical-bottom" class="control-layout-alignment-vertical-bottom" type="radio" name="control-layout-alignment-vertical" value="bottom" tabindex="1">
|
|
<label for="control-layout-alignment-vertical-bottom">Bottom</label>
|
|
</div>
|
|
<p class="input-helper small muted">Effects may not be visible if Bookmarks fill the page.</p>
|
|
</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>
|
|
<input id="control-layout-padding" class="control-layout-padding" type="range" min="0" max="40" value="0" tabindex="1">
|
|
</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>
|
|
<input id="control-layout-gutter" class="control-layout-gutter" type="range" min="0" max="40" value="0" tabindex="1">
|
|
</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-scroll-past-end" class="control-layout-scroll-past-end" type="checkbox" tabindex="1">
|
|
<label for="control-layout-scroll-past-end">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>
|
|
<input id="control-header-area-width" class="control-header-area-width" type="range" min="10" max="100" value="0" tabindex="1">
|
|
<p class="input-helper small muted">Max width is defined by Layout Area Width.</p>
|
|
</div>
|
|
<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-horizontal-label">Area Horizontal Alignment</label>
|
|
<div class="input-wrap">
|
|
<input id="control-header-area-alignment-horizontal-left" class="control-header-area-alignment-horizontal-left" type="radio" name="control-header-area-alignment-horizontal" value="left" tabindex="1">
|
|
<label for="control-header-area-alignment-horizontal-left">Left</label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-header-area-alignment-horizontal-center" class="control-header-area-alignment-horizontal-center" type="radio" name="control-header-area-alignment-horizontal" value="center" tabindex="1">
|
|
<label for="control-header-area-alignment-horizontal-center">Centre</label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-header-area-alignment-horizontal-right" class="control-header-area-alignment-horizontal-right" type="radio" name="control-header-area-alignment-horizontal" value="right" tabindex="1">
|
|
<label for="control-header-area-alignment-horizontal-right">Right</label>
|
|
</div>
|
|
<p class="input-helper small muted">Effects may not be visible if the Header Area is full width.</p>
|
|
<hr>
|
|
<label class="control-header-item-alignment-horizontal-label">Item Horizontal Alignment</label>
|
|
<div class="input-wrap">
|
|
<input id="control-header-item-alignment-horizontal-left" class="control-header-item-alignment-horizontal-left" type="radio" name="control-header-item-alignment-horizontal" value="left" tabindex="1">
|
|
<label for="control-header-item-alignment-horizontal-left">Left</label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-header-item-alignment-horizontal-center" class="control-header-item-alignment-horizontal-center" type="radio" name="control-header-item-alignment-horizontal" value="center" tabindex="1">
|
|
<label for="control-header-item-alignment-horizontal-center">Centre</label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-header-item-alignment-horizontal-right" class="control-header-item-alignment-horizontal-right" type="radio" name="control-header-item-alignment-horizontal" value="right" tabindex="1">
|
|
<label for="control-header-item-alignment-horizontal-right">Right</label>
|
|
</div>
|
|
<p class="input-helper small muted">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">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">"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">"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">"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>
|
|
<input id="control-header-greeting-size" class="control-header-greeting-size" type="range" min="20" max="500" value="0" step="20" tabindex="1">
|
|
</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">Show</label>
|
|
<p class="input-helper small muted">Available when Date or Time is shown.</p>
|
|
</div>
|
|
<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">"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">"It's"</label>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<label for="control-header-transitional-size">Size</label>
|
|
<input id="control-header-transitional-size" class="control-header-transitional-size" type="range" min="20" max="500" value="0" step="20" tabindex="1">
|
|
</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">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">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">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">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">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">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">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">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">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">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">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">AM/PM</label>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<label for="control-header-clock-size">Size</label>
|
|
<input id="control-header-clock-size" class="control-header-clock-size" type="range" min="20" max="500" value="0" step="20" tabindex="1">
|
|
</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">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">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">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">Sunday</label>
|
|
<p class="input-helper small muted">Define what day "1" represents, either Monday or Sunday.</p>
|
|
</div>
|
|
</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">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">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">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">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">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">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">Ordinal numbers</label>
|
|
<p class="input-helper small muted">Display Date as 1st, 2nd, 3rd, 4th etc.</p>
|
|
</div>
|
|
</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">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">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">Ordinal numbers</label>
|
|
<p class="input-helper small muted">Display Month as 1st, 2nd, 3rd, 4th etc.</p>
|
|
</div>
|
|
</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">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">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">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">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">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">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">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">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">Month / Date</label>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<label for="control-header-date-size">Size</label>
|
|
<input id="control-header-date-size" class="control-header-date-size" type="range" min="20" max="500" value="0" step="20" tabindex="1">
|
|
</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">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">Auto</label>
|
|
<p class="input-helper small muted">Search box will grow to best fit available space.</p>
|
|
</div>
|
|
<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">Custom</label>
|
|
<p class="input-helper small muted">Define how wide the Search box should be inside the Header Area.</p>
|
|
</div>
|
|
<div class="form-indent">
|
|
<div class="input-wrap">
|
|
<label for="control-header-search-width">Width</label>
|
|
<input id="control-header-search-width" class="control-header-search-width" type="range" min="10" max="100" value="0" tabindex="1">
|
|
</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">Focus on load/refresh</label>
|
|
<p class="input-helper small muted">May not work in Chrome.</p>
|
|
</div>
|
|
<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">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">Duck Duck Go</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">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">Giphy</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">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" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="1">
|
|
<p class="input-helper small muted">Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="</p>
|
|
<p class="input-helper small muted mb-0">nightTab will add the search term entered into the Search input at the end of the above URL</p>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<label class="control-header-search-text-align-label">Align Text</label>
|
|
<div class="input-wrap">
|
|
<input id="control-header-search-text-align-left" class="control-header-search-text-align-left" type="radio" name="control-header-search-text-align" value="left" tabindex="1">
|
|
<label for="control-header-search-text-align-left">Left</label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-header-search-text-align-center" class="control-header-search-text-align-center" type="radio" name="control-header-search-text-align" value="center" tabindex="1">
|
|
<label for="control-header-search-text-align-center">Centre</label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-header-search-text-align-right" class="control-header-search-text-align-right" type="radio" name="control-header-search-text-align" value="right" tabindex="1">
|
|
<label for="control-header-search-text-align-right">Right</label>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<label for="control-header-search-size">Size</label>
|
|
<input id="control-header-search-size" class="control-header-search-size" type="range" min="20" max="500" value="0" step="20" tabindex="1">
|
|
<p class="input-helper small muted">Only the Search box width control will change the Width of the Search box.</p>
|
|
</div>
|
|
<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">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">Clear</label>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<input id="control-header-button-edit-add-show" class="control-header-button-edit-add-show" type="checkbox" tabindex="1">
|
|
<label for="control-header-button-edit-add-show">Show Edit/Add</label>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<input id="control-header-button-accent-show" class="control-header-button-accent-show" type="checkbox" tabindex="1">
|
|
<label for="control-header-button-accent-show">Show Accent</label>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<label for="control-header-button-size">Size</label>
|
|
<input id="control-header-button-size" class="control-header-button-size" type="range" min="20" max="500" value="0" step="20" tabindex="1">
|
|
</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>
|
|
<input id="control-header-border-top" class="control-header-border-top mb-0" type="range" min="0" max="60" value="0" tabindex="1">
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<label for="control-header-border-bottom">Bottom</label>
|
|
<input id="control-header-border-bottom" class="control-header-border-bottom" type="range" min="0" max="60" value="0" tabindex="1">
|
|
</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">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">Always visible</label>
|
|
<p class="input-helper small muted">Useful for when a Background Image is shown.</p>
|
|
</div>
|
|
<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">Visible on scroll</label>
|
|
<p class="input-helper small muted">The page will not scroll if Bookmarks are not shown.</p>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<label for="control-header-shade-opacity">Opacity</label>
|
|
<input id="control-header-shade-opacity" class="control-header-shade-opacity" type="range" min="0" max="100" value="0" tabindex="1">
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<input id="control-header-radius" class="control-header-radius" type="checkbox" tabindex="1">
|
|
<label for="control-header-radius">Corner radius</label>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
<input id="control-link-area-width" class="control-link-area-width" type="range" min="10" max="100" value="0" tabindex="1">
|
|
<p class="input-helper small muted">Max width is defined by Layout Area Width.</p>
|
|
</div>
|
|
<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-horizontal-label">Horizontal Alignment</label>
|
|
<div class="input-wrap">
|
|
<input id="control-link-area-alignment-horizontal-left" class="control-link-area-alignment-horizontal-left" type="radio" name="control-link-area-alignment-horizontal" value="left" tabindex="1">
|
|
<label for="control-link-area-alignment-horizontal-left">Left</label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-link-area-alignment-horizontal-center" class="control-link-area-alignment-horizontal-center" type="radio" name="control-link-area-alignment-horizontal" value="center" tabindex="1">
|
|
<label for="control-link-area-alignment-horizontal-center">Centre</label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-link-area-alignment-horizontal-right" class="control-link-area-alignment-horizontal-right" type="radio" name="control-link-area-alignment-horizontal" value="right" tabindex="1">
|
|
<label for="control-link-area-alignment-horizontal-right">Right</label>
|
|
<p class="input-helper small muted">Effects may not be visible if the Bookmark Area is full width.</p>
|
|
</div>
|
|
</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">Show</label>
|
|
</div>
|
|
<div class="form-indent">
|
|
<div class="input-wrap">
|
|
<label for="control-link-item-size">Tile Size</label>
|
|
<input id="control-link-item-size" class="control-link-item-size" type="range" min="20" max="500" value="0" step="10" tabindex="1">
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-link-item-size-default button mb-0" tabindex="1">Default tile size</button>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<input id="control-link-item-display-show" class="control-link-item-display-show" type="checkbox" tabindex="1">
|
|
<label for="control-link-item-display-show">Letter/Icon</label>
|
|
</div>
|
|
<div class="form-indent">
|
|
<div class="input-wrap">
|
|
<label for="control-link-item-display-letter-size">Letter size</label>
|
|
<input id="control-link-item-display-letter-size" class="control-link-item-display-letter-size" type="range" min="1" max="3000" value="0" tabindex="1">
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-link-item-display-letter-size-default button mb-0" tabindex="1">Default letter size</button>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<label for="control-link-item-display-icon-size">Icon size</label>
|
|
<input id="control-link-item-display-icon-size" class="control-link-item-display-icon-size" type="range" min="1" max="3000" value="0" tabindex="1">
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-link-item-display-icon-size-default button mb-0" tabindex="1">Default icon size</button>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<input id="control-link-item-name-show" class="control-link-item-name-show" type="checkbox" tabindex="1">
|
|
<label for="control-link-item-name-show">Name</label>
|
|
<div class="form-indent">
|
|
<div class="input-wrap">
|
|
<label for="control-link-item-name-size">Name size</label>
|
|
<input id="control-link-item-name-size" class="control-link-item-name-size" type="range" min="1" max="1500" value="0" tabindex="1">
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-link-item-name-size-default button mb-0" tabindex="1">Default icon 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">URL on hover</label>
|
|
</div>
|
|
<div class="form-indent">
|
|
<div class="input-wrap">
|
|
<input id="control-link-item-url-style-dark" class="control-link-item-url-style-dark" type="radio" name="control-link-item-url-style" value="dark" tabindex="1">
|
|
<label for="control-link-item-url-style-dark">Dark text</label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-link-item-url-style-light" class="control-link-item-url-style-light" type="radio" name="control-link-item-url-style" value="light" tabindex="1">
|
|
<label for="control-link-item-url-style-light">Light text</label>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<input id="control-link-item-line" class="control-link-item-line" type="checkbox" tabindex="1">
|
|
<label for="control-link-item-line">Tile line</label>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<input id="control-link-item-hover-scale" class="control-link-item-hover-scale" type="checkbox" tabindex="1">
|
|
<label for="control-link-item-hover-scale">Grow on hover</label>
|
|
</div>
|
|
<hr>
|
|
<label class="control-link-item-display-alignment-horizontal-label">Content Horizontal Alignment</label>
|
|
<div class="input-wrap">
|
|
<input id="control-link-item-display-alignment-horizontal-left" class="control-link-item-display-alignment-horizontal-left" type="radio" name="control-link-item-display-alignment-horizontal" value="left" tabindex="1">
|
|
<label for="control-link-item-display-alignment-horizontal-left">Left</label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-link-item-display-alignment-horizontal-center" class="control-link-item-display-alignment-horizontal-center" type="radio" name="control-link-item-display-alignment-horizontal" value="center" tabindex="1">
|
|
<label for="control-link-item-display-alignment-horizontal-center">Centre</label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-link-item-display-alignment-horizontal-right" class="control-link-item-display-alignment-horizontal-right" type="radio" name="control-link-item-display-alignment-horizontal" value="right" tabindex="1">
|
|
<label for="control-link-item-display-alignment-horizontal-right">Right</label>
|
|
</div>
|
|
<hr>
|
|
<label class="control-link-item-display-alignment-vertical-label">Content Vertical Alignment</label>
|
|
<div class="input-wrap">
|
|
<input id="control-link-item-display-alignment-vertical-top" class="control-link-item-display-alignment-vertical-top" type="radio" name="control-link-item-display-alignment-vertical" value="top" tabindex="1">
|
|
<label for="control-link-item-display-alignment-vertical-top">Top</label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-link-item-display-alignment-vertical-center" class="control-link-item-display-alignment-vertical-center" type="radio" name="control-link-item-display-alignment-vertical" value="center" tabindex="1">
|
|
<label for="control-link-item-display-alignment-vertical-center">Centre</label>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input id="control-link-item-display-alignment-vertical-bottom" class="control-link-item-display-alignment-vertical-bottom" type="radio" name="control-link-item-display-alignment-vertical" value="bottom" tabindex="1">
|
|
<label for="control-link-item-display-alignment-vertical-bottom">Bottom</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<div class="menu-item-header">
|
|
<h1 class="menu-item-header-text">Open</h1>
|
|
</div>
|
|
<div class="menu-item-form">
|
|
<div class="input-wrap">
|
|
<input id="control-link-new-tab" class="control-link-new-tab" type="checkbox" tabindex="1">
|
|
<label for="control-link-new-tab">In a new tab</label>
|
|
</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">Block</label>
|
|
<p class="input-helper small muted">Bookmark tiles more square shaped with content stacked vertically.</p>
|
|
</div>
|
|
<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">List</label>
|
|
<p class="input-helper small muted">Bookmark tiles more short and wide with content stacked horizontally.</p>
|
|
</div>
|
|
</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="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-content-area menu-content-area-theme is-hidden">
|
|
<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">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">Light</label>
|
|
<p class="input-helper small muted">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<label for="control-theme-radius">Radius</label>
|
|
<input id="control-theme-radius" class="control-theme-radius" type="range" min="0" max="300" value="0" step="20" tabindex="1">
|
|
</div>
|
|
<div class="button-wrap">
|
|
<button class="control-theme-radius-default button mb-0" tabindex="1">Default radius size</button>
|
|
</div>
|
|
</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">
|
|
<input id="control-theme-accent-random-active" class="control-theme-accent-random-active" type="checkbox" tabindex="1">
|
|
<label for="control-theme-accent-random-active">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">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">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">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">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">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>
|
|
|
|
<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">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">Show</label>
|
|
</div>
|
|
<div class="form-indent">
|
|
<div class="input-wrap">
|
|
<label for="control-background-image-url">URL</label>
|
|
<input id="control-background-image-url" class="control-background-image-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="http://" tabindex="1">
|
|
<p class="input-helper small muted">Unsplash can be used for random images, eg:</p>
|
|
<p class="input-helper small muted"><i>https://source.unsplash.com/random/1920x1080/?night,day,sky</i></p>
|
|
<p class="input-helper small muted">Change parameters after <i>.../ramdom/</i> for more options.</p>
|
|
<p class="input-helper small muted">Loading times may vary.</p>
|
|
</div>
|
|
<hr>
|
|
<div class="input-wrap">
|
|
<label for="control-background-image-opacity">Opacity</label>
|
|
<input id="control-background-image-opacity" class="control-background-image-opacity" type="range" min="0" max="100" value="0" tabindex="1">
|
|
</div>
|
|
<div class="input-wrap">
|
|
<label for="control-background-image-grayscale">Grayscale</label>
|
|
<input id="control-background-image-grayscale" class="control-background-image-grayscale" type="range" min="0" max="100" value="0" tabindex="1">
|
|
</div>
|
|
<div class="input-wrap">
|
|
<label for="control-background-image-blur">Blur</label>
|
|
<input id="control-background-image-blur" class="control-background-image-blur" type="range" min="0" max="100" value="0" tabindex="1">
|
|
</div>
|
|
<div class="input-wrap">
|
|
<label for="control-background-image-accent">Accent overlay</label>
|
|
<input id="control-background-image-accent" class="control-background-image-accent" type="range" min="0" max="90" value="0" tabindex="1">
|
|
</div>
|
|
<div class="input-wrap">
|
|
<label for="control-background-image-scale">Size</label>
|
|
<input id="control-background-image-scale" class="control-background-image-scale" type="range" min="100" max="300" value="0" tabindex="1">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</body>
|
|
|
|
<!-- vendor -->
|
|
<script src="js/vendor/html5sortable.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/accent.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/title.js"></script>
|
|
<script src="js/layout.js"></script>
|
|
<script src="js/auto-suggest.js"></script>
|
|
<script src="js/page.js"></script>
|
|
<script src="js/edge.js"></script>
|
|
<script src="js/init.js"></script>
|
|
|
|
</html>
|