2018-12-26 08:45:53 +01:00
<!DOCTYPE html>
2019-01-03 23:30:27 +01:00
< html lang = "en" >
2018-12-26 08:45:53 +01:00
< head >
< meta charset = "utf-8" >
2018-12-28 15:27:01 +01:00
< meta name = "theme-color" content = "#262831" >
2018-12-26 08:45:53 +01:00
< meta name = "viewport" content = "width=device-width, initial-scale=1, user-scalable=no" >
< title > New Tab< / title >
< link rel = "stylesheet" href = "css/reset.css" >
2018-12-26 18:43:38 +01:00
< link rel = "stylesheet" href = "css/base.css" >
2019-05-23 20:15:14 +02:00
< link rel = "stylesheet" href = "css/main.css" >
< link rel = "stylesheet" href = "css/edge.css" >
2019-02-16 23:27:54 +01:00
< link rel = "stylesheet" href = "css/animation.css" >
2018-12-26 08:45:53 +01:00
< link rel = "stylesheet" href = "css/fonts.css" >
< link rel = "stylesheet" href = "css/icons.css" >
2019-01-03 23:30:27 +01:00
< link rel = "stylesheet" href = "css/state.css" >
2018-12-26 08:45:53 +01:00
< link rel = "stylesheet" href = "css/utilities.css" >
< link rel = "stylesheet" href = "css/typography.css" >
2018-12-26 18:43:38 +01:00
< link rel = "stylesheet" href = "css/spacing.css" >
2018-12-26 08:45:53 +01:00
< 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" >
2019-01-06 08:06:33 +01:00
< link rel = "stylesheet" href = "css/tip.css" >
2019-01-03 23:30:27 +01:00
< link rel = "stylesheet" href = "css/menu.css" >
2019-01-05 21:57:21 +01:00
< link rel = "stylesheet" href = "css/header.css" >
< link rel = "stylesheet" href = "css/date.css" >
2018-12-26 08:45:53 +01:00
< link rel = "stylesheet" href = "css/clock.css" >
2019-03-26 00:31:51 +01:00
< link rel = "stylesheet" href = "css/greeting.css" >
2019-04-26 14:48:37 +02:00
< link rel = "stylesheet" href = "css/transitional.css" >
2018-12-26 08:45:53 +01:00
< link rel = "stylesheet" href = "css/search.css" >
2019-01-24 21:28:11 +01:00
< link rel = "stylesheet" href = "css/background.css" >
2019-01-03 23:30:27 +01:00
< link rel = "stylesheet" href = "css/link.css" >
2019-05-11 09:33:19 +02:00
< link rel = "stylesheet" href = "css/auto-suggest.css" >
< link rel = "stylesheet" href = "css/fontawesome.css" >
2018-12-26 08:45:53 +01:00
< / head >
< body >
2019-01-24 21:28:11 +01:00
< div class = "background" >
< div class = "background-image" > < / div >
< div class = "background-accent" > < / div >
< / div >
2018-12-26 08:45:53 +01:00
2019-05-23 20:15:14 +02:00
< main class = "main" >
< header class = "header" >
< div class = "header-shade" > < / div >
< div class = "header-border" > < / div >
2019-01-03 23:30:27 +01:00
< div class = "header-area" >
2019-03-26 00:31:51 +01:00
< div class = "header-item header-greeting" >
< p class = "greeting" > < / p >
< / div >
2019-04-26 14:48:37 +02:00
< div class = "header-item header-transitional" >
< p class = "transitional" > < / p >
< / div >
2019-01-03 23:30:27 +01:00
< div class = "header-item header-clock" >
2018-12-26 08:45:53 +01:00
< p class = "clock" > < / p >
< / div >
2019-01-05 21:57:21 +01:00
< div class = "header-item header-date" >
< p class = "date" > < / p >
< / div >
2019-01-03 23:30:27 +01:00
< div class = "header-item header-search" >
< form class = "search" action = "" method = "get" >
2019-01-24 21:28:11 +01:00
< 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" >
2018-12-26 08:45:53 +01:00
< input type = "submit" value = "Search" class = "is-hidden" >
< / form >
2019-01-24 21:28:11 +01:00
< button class = "button button-link mb-0 header-search-clear search-clear" tabindex = "1" disabled >
2018-12-26 08:45:53 +01:00
< span class = "icon-close" > < / span >
< / button >
< / div >
2019-01-03 23:30:27 +01:00
< div class = "header-item header-edit-add" >
2019-04-26 14:48:37 +02:00
< div class = "form-group nested-button mb-0" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap input-button input-hide py-0" >
2019-01-03 23:30:27 +01:00
< input id = "control-edit" class = "control-edit" type = "checkbox" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-edit" class = " mb-0" > Edit< / label >
2019-01-03 23:30:27 +01:00
< / div >
< button class = "button control-add" tabindex = "1" >
< span class = "button-text" > Add< / span >
< / button >
< / div >
2018-12-27 00:46:53 +01:00
< / div >
2019-01-03 23:30:27 +01:00
< div class = "header-item header-accent" >
2019-05-04 14:53:18 +02:00
< 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 >
2019-01-03 23:30:27 +01:00
< / div >
< / div >
2019-01-13 23:54:48 +01:00
< div class = "header-item header-menu" >
2019-02-03 14:51:54 +01:00
< button id = "control-menu" class = "control-menu button mb-0" tabindex = "1" >
2019-01-03 23:30:27 +01:00
< span class = "button-text" > < span class = "icon-settings" > < / span > < / span >
< / button >
2018-12-26 08:45:53 +01:00
< / div >
< / div >
2019-05-23 20:15:14 +02:00
< / header >
2018-12-26 08:45:53 +01:00
2019-05-23 20:15:14 +02:00
< section class = "link" >
2019-01-03 23:30:27 +01:00
< div class = "link-area" > < / div >
2019-05-23 20:15:14 +02:00
< / section >
< / main >
2018-12-26 08:45:53 +01:00
2019-01-15 13:33:15 +01:00
< section class = "menu" tabindex = "1" >
2019-01-04 20:40:49 +01:00
< div class = "menu-area" >
2019-01-14 19:22:39 +01:00
< div class = "menu-nav" >
2019-02-03 14:51:54 +01:00
< div class = "menu-nav-area menu-nav-area-grow mb-0 list-unstyled" >
2019-05-23 20:15:14 +02:00
< 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 >
2019-02-17 15:31:29 +01:00
< button class = "menu-nav-button button button-large" data-target = ".menu-content-area-bookmarks" tabindex = "1" > Bookmarks< / button >
2019-04-01 17:11:39 +02:00
< button class = "menu-nav-button button button-large" data-target = ".menu-content-area-theme" tabindex = "1" > Theme< / button >
2019-02-17 15:31:29 +01:00
< button class = "menu-nav-button button button-large" data-target = ".menu-content-area-background" tabindex = "1" > Background< / button >
2019-02-03 14:51:54 +01:00
< / div >
2019-01-14 19:22:39 +01:00
< 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 >
2019-02-03 14:51:54 +01:00
2019-01-04 20:40:49 +01:00
< div class = "menu-content" >
2019-02-03 14:51:54 +01:00
2019-05-23 20:15:14 +02:00
< div class = "menu-content-area menu-content-area-layout" >
2019-03-26 00:31:51 +01:00
< div class = "menu-item" >
2019-04-26 14:48:37 +02:00
< div class = "menu-item-header" >
2019-05-23 20:15:14 +02:00
< h1 class = "menu-item-header-text" > Area< / h1 >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "menu-item-form" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-05-23 20:15:14 +02:00
< label for = "control-layout-width" > Width< / label >
< input id = "control-layout-width" class = "control-layout-width" type = "range" min = "15" max = "100" value = "0" tabindex = "1" >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-23 20:15:14 +02:00
< hr >
2019-05-26 11:11:50 +02:00
< label class = "control-layout-alignment-horizontal-label" > Horizontal Alignment< / label >
2019-05-23 20:15:14 +02:00
< p class = "input-helper small muted" > Effects may not be visible if the Layout Area is full width.< / p >
< 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 >
< hr >
2019-05-26 11:11:50 +02:00
< label class = "control-layout-alignment-vertical-label" > Vertical Alignment< / label >
2019-05-23 20:15:14 +02:00
< p class = "input-helper small muted" > Effects may not be visible if Bookmarks fill the page.< / p >
< 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 >
< / 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" type = "text" autocomplete = "off" autocorrect = "off" autocapitalize = "off" spellcheck = "false" placeholder = "New Tab" tabindex = "1" >
< / div >
< hr >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-05-23 20:15:14 +02:00
< 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 >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-23 20:15:14 +02:00
< / 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" >
2019-06-04 17:14:04 +02:00
< div class = "input-wrap mb-3" >
2019-05-23 20:15:14 +02:00
< 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" >
2019-06-04 17:14:04 +02:00
< button class = "button control-header-area-width-match mb-0" type = "button" > Match Bookmarks Area Width< / button >
2019-05-23 20:15:14 +02:00
< / div >
< hr >
2019-05-26 11:11:50 +02:00
< label class = "control-header-area-alignment-horizontal-label" > Area Horizontal Alignment< / label >
2019-05-23 20:15:14 +02:00
< 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 >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-05-23 20:15:14 +02:00
< 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 >
< p class = "input-helper small muted" > Effects may not be visible if the Header Area is full width.< / p >
2019-04-26 14:48:37 +02:00
< / div >
< hr >
2019-05-26 11:11:50 +02:00
< label class = "control-header-items-alignment-horizontal-label" > Item Horizontal Alignment< / label >
2019-05-23 20:15:14 +02:00
< 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 >
2019-04-26 14:48:37 +02:00
< div class = "input-wrap" >
2019-05-23 20:15:14 +02:00
< input id = "control-header-items-alignment-horizontal-left" class = "control-header-items-alignment-horizontal-left" type = "radio" name = "control-header-items-alignment-horizontal" value = "left" tabindex = "1" >
< label for = "control-header-items-alignment-horizontal-left" > Left< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-23 20:15:14 +02:00
< div class = "input-wrap" >
< input id = "control-header-items-alignment-horizontal-center" class = "control-header-items-alignment-horizontal-center" type = "radio" name = "control-header-items-alignment-horizontal" value = "center" tabindex = "1" >
< label for = "control-header-items-alignment-horizontal-center" > Centre< / label >
< / div >
< div class = "input-wrap" >
< input id = "control-header-items-alignment-horizontal-right" class = "control-header-items-alignment-horizontal-right" type = "radio" name = "control-header-items-alignment-horizontal" value = "right" tabindex = "1" >
< label for = "control-header-items-alignment-horizontal-right" > Right< / label >
< / div >
< / div >
< / div >
< div class = "menu-item" >
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Greeting< / h1 >
2019-03-26 00:31:51 +01:00
< / div >
2019-05-23 20:15:14 +02:00
< 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" type = "text" autocomplete = "off" autocorrect = "off" autocapitalize = "off" spellcheck = "false" placeholder = "Nickname, alias or superhero name" tabindex = "1" >
< / div >
< / div >
2019-03-26 00:31:51 +01:00
< / div >
< / div >
2019-01-04 17:24:05 +01:00
< div class = "menu-item" >
2019-04-26 14:48:37 +02:00
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Transitional words< / h1 >
< / div >
< div class = "menu-item-form" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-transitional-show" class = "control-header-transitional-show" type = "checkbox" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-transitional-show" > Show< / label >
2019-04-26 14:48:37 +02:00
< p class = "input-helper small muted" > Available when Date or Time is shown.< / p >
< / div >
< div class = "form-indent" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-transitional-type-timeanddate" class = "control-header-transitional-type-timeanddate" type = "radio" name = "control-header-transitional-type" value = "timeanddate" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-transitional-type-timeanddate" > "The time and date is"< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-transitional-type-its" class = "control-header-transitional-type-its" type = "radio" name = "control-header-transitional-type" value = "its" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-transitional-type-its" > "It's"< / label >
2019-04-26 14:48:37 +02:00
< / div >
< / div >
2019-01-04 17:24:05 +01:00
< / div >
< / div >
2019-01-05 21:57:21 +01:00
< div class = "menu-item" >
2019-04-26 14:48:37 +02:00
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Clock< / h1 >
< / div >
< div class = "menu-item-form" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-clock-hours-show" class = "control-header-clock-hours-show" type = "checkbox" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-clock-hours-show" > Hours< / label >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "form-indent" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-clock-hours-number" class = "control-header-clock-hours-number" type = "radio" name = "control-header-clock-hours" value = "number" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-clock-hours-number" > As number< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-clock-hours-word" class = "control-header-clock-hours-word" type = "radio" name = "control-header-clock-hours" value = "word" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-clock-hours-word" > As word< / label >
2019-04-26 14:48:37 +02:00
< / div >
< hr >
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-clock-minutes-show" class = "control-header-clock-minutes-show" type = "checkbox" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-clock-minutes-show" > Minutes< / label >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "form-indent" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-clock-minutes-number" class = "control-header-clock-minutes-number" type = "radio" name = "control-header-clock-minutes" value = "number" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-clock-minutes-number" > As number< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-clock-minutes-word" class = "control-header-clock-minutes-word" type = "radio" name = "control-header-clock-minutes" value = "word" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-clock-minutes-word" > As word< / label >
2019-04-26 14:48:37 +02:00
< / div >
< hr >
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-clock-seconds-show" class = "control-header-clock-seconds-show" type = "checkbox" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-clock-seconds-show" > Seconds< / label >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "form-indent" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-clock-seconds-number" class = "control-header-clock-seconds-number" type = "radio" name = "control-header-clock-seconds" value = "number" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-clock-seconds-number" > As number< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-clock-seconds-word" class = "control-header-clock-seconds-word" type = "radio" name = "control-header-clock-seconds" value = "word" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-clock-seconds-word" > As word< / label >
2019-04-26 14:48:37 +02:00
< / div >
< / div >
< hr >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-clock-separator-show" class = "control-header-clock-separator-show" type = "checkbox" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-clock-separator-show" > Separators< / label >
2019-04-26 14:48:37 +02:00
< / div >
< hr >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-clock-hour24-show" class = "control-header-clock-hour24-show" type = "checkbox" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-clock-hour24-show" > 24 Hours< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-clock-meridiem-show" class = "control-header-clock-meridiem-show" type = "checkbox" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-clock-meridiem-show" > AM/PM< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-01-05 21:57:21 +01:00
< / div >
< / div >
2019-01-04 17:24:05 +01:00
< div class = "menu-item" >
2019-04-26 14:48:37 +02:00
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Date< / h1 >
< / div >
< div class = "menu-item-form" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-date-day-show" class = "control-header-date-day-show" type = "checkbox" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-date-day-show" > Day< / label >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "form-indent" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< 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" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-date-day-display-number" > As number< / label >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "form-indent" >
< label class = "control-header-date-day-week-start-label" > Start of the week< / label >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< 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" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-date-day-week-start-monday" > Monday< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< 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" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-date-day-week-start-sunday" > Sunday< / label >
2019-04-26 14:48:37 +02:00
< p class = "input-helper small muted" > Define what day "1" represents, either Monday or Sunday.< / p >
< / div >
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< 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" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-date-day-display-word" > As word< / label >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "form-indent" >
< label class = "control-header-date-day-length-label" > Word length< / label >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< 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" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-date-day-length-long" > Long< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< 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" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-date-day-length-short" > Short< / label >
2019-04-26 14:48:37 +02:00
< / div >
< / div >
< hr >
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-date-date-show" class = "control-header-date-date-show" type = "checkbox" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-date-date-show" > Date< / label >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "form-indent" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< 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" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-date-date-display-number" > As number< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< 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" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-date-date-display-word" > As word< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-date-date-ordinal" class = "control-header-date-date-ordinal" type = "checkbox" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-date-date-ordinal" > Ordinal numbers< / label >
2019-04-26 14:48:37 +02:00
< p class = "input-helper small muted" > Display Date as 1st, 2nd, 3rd, 4th etc.< / p >
< / div >
< hr >
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-date-month-show" class = "control-header-date-month-show" type = "checkbox" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-date-month-show" > Month< / label >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "form-indent" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< 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" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-date-month-display-number" > As number< / label >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "form-indent" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-date-month-ordinal" class = "control-header-date-month-ordinal" type = "checkbox" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-date-month-ordinal" > Ordinal numbers< / label >
2019-04-26 14:48:37 +02:00
< p class = "input-helper small muted" > Display Month as 1st, 2nd, 3rd, 4th etc.< / p >
< / div >
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< 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" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-date-month-display-word" > As word< / label >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "form-indent" >
< label class = "control-header-date-month-length-label" > Word length< / label >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< 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" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-date-month-length-long" > Long< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< 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" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-date-month-length-short" > Short< / label >
2019-04-26 14:48:37 +02:00
< / div >
< / div >
< hr >
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-date-year-show" class = "control-header-date-year-show" type = "checkbox" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-date-year-show" > Year< / label >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "form-indent" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< 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" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-date-year-display-number" > As number< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< 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" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-date-year-display-word" > As word< / label >
2019-04-26 14:48:37 +02:00
< / div >
< / div >
< hr >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-date-separator-show" class = "control-header-date-separator-show" type = "checkbox" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-date-separator-show" > Separators< / label >
2019-04-26 14:48:37 +02:00
< / div >
< hr >
< label class = "control-header-date-format-label" > Format< / label >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-date-format-datemonth" class = "control-header-date-format-datemonth" type = "radio" name = "control-header-date-format" value = "datemonth" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-date-format-datemonth" > Date / Month< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-date-format-monthdate" class = "control-header-date-format-monthdate" type = "radio" name = "control-header-date-format" value = "monthdate" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-date-format-monthdate" > Month / Date< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-04-18 14:30:40 +02:00
< / div >
2019-01-04 17:24:05 +01:00
< / div >
< div class = "menu-item" >
2019-04-26 14:48:37 +02:00
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Search< / h1 >
< / div >
< div class = "menu-item-form" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-search-show" class = "control-header-search-show" type = "checkbox" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-search-show" > Show< / label >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "form-indent" >
< label class = "control-header-search-width-style-label" > Search box size< / label >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-search-width-style-auto" class = "control-header-search-width-style-auto" type = "radio" name = "control-header-search-width" value = "auto" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-search-width-style-auto" > Auto< / label >
2019-04-26 14:48:37 +02:00
< p class = "input-helper small muted" > Search box will grow to best fit available space.< / p >
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-search-width-style-custom" class = "control-header-search-width-style-custom" type = "radio" name = "control-header-search-width" value = "custom" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-search-width-style-custom" > Custom< / label >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "form-indent" >
< div class = "input-wrap" >
2019-05-23 20:15:14 +02:00
< label for = "control-header-search-width-custom" > Width< / label >
2019-04-26 14:48:37 +02:00
< input id = "control-header-search-width-custom" class = "control-header-search-width-custom" type = "range" min = "10" max = "100" value = "0" tabindex = "1" >
< / div >
< / div >
< hr >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-search-focus" class = "control-header-search-focus" type = "checkbox" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-search-focus" > Focus on load/refresh< / label >
2019-04-26 14:48:37 +02:00
< p class = "input-helper small muted" > May not work in Chrome.< / p >
< / div >
< hr >
< label class = "control-header-search-engine-label" > Engine< / label >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-search-engine-google" class = "control-header-search-engine-google" type = "radio" name = "control-header-search-engine" value = "google" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-search-engine-google" > Google< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-search-engine-duckduckgo" class = "control-header-search-engine-duckduckgo" type = "radio" name = "control-header-search-engine" value = "duckduckgo" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-search-engine-duckduckgo" > Duck Duck Go< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-search-engine-youtube" class = "control-header-search-engine-youtube" type = "radio" name = "control-header-search-engine" value = "youtube" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-search-engine-youtube" > YouTube< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-search-engine-giphy" class = "control-header-search-engine-giphy" type = "radio" name = "control-header-search-engine" value = "giphy" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-search-engine-giphy" > Giphy< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-search-engine-custom" class = "control-header-search-engine-custom" type = "radio" name = "control-header-search-engine" value = "custom" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-search-engine-custom" > Custom< / label >
2019-04-26 14:48:37 +02:00
< / 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" 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" > Eneter a web address with the search parameters, eg: "https://vimeo.com/search?q="< / p >
2019-05-23 21:39:56 +02:00
< 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 >
2019-04-26 14:48:37 +02:00
< / div >
< / div >
< hr >
2019-05-23 20:15:14 +02:00
< label class = "control-header-search-text-align-label" > Align Text< / label >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< 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" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-search-text-align-left" > Left< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< 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" >
2019-05-23 20:15:14 +02:00
< label for = "control-header-search-text-align-center" > Centre< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< 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" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-search-text-align-right" > Right< / label >
2019-04-26 14:48:37 +02:00
< / div >
< / div >
2019-01-04 17:24:05 +01:00
< / div >
< / div >
< div class = "menu-item" >
2019-04-26 14:48:37 +02:00
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Buttons< / h1 >
< / div >
< div class = "menu-item-form" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-edit-add-show" class = "control-header-edit-add-show" type = "checkbox" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-edit-add-show" > Show Edit/Add< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-accent-show" class = "control-header-accent-show" type = "checkbox" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-accent-show" > Show Accent< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-01-24 21:28:11 +01:00
< / div >
< / div >
< div class = "menu-item" >
2019-04-26 14:48:37 +02:00
< div class = "menu-item-header" >
2019-05-23 20:15:14 +02:00
< h1 class = "menu-item-header-text" > Shade< / h1 >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "menu-item-form" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-shade-show" class = "control-header-shade-show" type = "checkbox" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-shade-show" > Show< / label >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "form-indent" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-shade-style-always" class = "control-header-shade-style-always" type = "radio" name = "control-header-shade-style" value = "always" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-shade-style-always" > Always visible< / label >
2019-04-26 14:48:37 +02:00
< p class = "input-helper small muted" > Useful for when a Background Image is shown.< / p >
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-shade-style-scroll" class = "control-header-shade-style-scroll" type = "radio" name = "control-header-shade-style" value = "scroll" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-shade-style-scroll" > Visible on scroll< / label >
2019-04-26 14:48:37 +02:00
< 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 >
< div class = "input-wrap" >
< label for = "control-header-shade-padding-top" > Top padding< / label >
2019-05-23 20:15:14 +02:00
< input id = "control-header-shade-padding-top" class = "control-header-shade-padding-top" type = "range" min = "0" max = "50" value = "0" tabindex = "1" >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "input-wrap" >
< label for = "control-header-shade-padding-bottom" > Bottom padding< / label >
2019-05-23 20:15:14 +02:00
< input id = "control-header-shade-padding-bottom" class = "control-header-shade-padding-bottom mb-0" type = "range" min = "0" max = "50" value = "0" tabindex = "1" >
2019-04-26 14:48:37 +02:00
< / div >
< hr >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-shade-border-top-show" class = "control-header-shade-border-top-show" type = "checkbox" value = "always" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-shade-border-top-show" > Top border< / label >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "form-indent" >
< div class = "input-wrap" >
< label for = "control-header-shade-border-top-width" > Border width< / label >
< input id = "control-header-shade-border-top-width" class = "control-header-shade-border-top-width mb-0" type = "range" min = "1" max = "10" value = "0" tabindex = "1" >
< / div >
< / div >
< hr >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-header-shade-border-bottom-show" class = "control-header-shade-border-bottom-show" type = "checkbox" value = "always" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-header-shade-border-bottom-show" > Bottom border< / label >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "form-indent" >
< div class = "input-wrap" >
< label for = "control-header-shade-border-bottom-width" > Border width< / label >
< input id = "control-header-shade-border-bottom-width" class = "control-header-shade-border-bottom-width" type = "range" min = "1" max = "10" value = "0" tabindex = "1" >
< / div >
< / div >
< / div >
2019-02-16 23:27:54 +01:00
< / div >
< / div >
2019-01-04 17:24:05 +01:00
< / div >
2019-04-26 14:48:37 +02:00
2019-01-04 20:40:49 +01:00
< div class = "menu-content-area menu-content-area-bookmarks is-hidden" >
2019-05-23 20:15:14 +02:00
< div class = "menu-item" >
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Area< / h1 >
< / div >
< div class = "menu-item-form" >
2019-06-04 17:14:04 +02:00
< div class = "input-wrap mb-3" >
2019-05-23 20:15:14 +02:00
< 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" >
2019-06-04 17:14:04 +02:00
< button class = "button control-link-area-width-match mb-0" type = "button" > Match Header Area Width< / button >
2019-05-23 20:15:14 +02:00
< / div >
< hr >
2019-05-26 11:11:50 +02:00
< label class = "control-link-area-alignment-horizontal-label" > Horizontal Alignment< / label >
2019-05-23 20:15:14 +02:00
< 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 >
2019-01-24 21:28:11 +01:00
< div class = "menu-item" >
2019-04-26 14:48:37 +02:00
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Bookmarks< / h1 >
< / div >
< div class = "menu-item-form" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-05-23 20:15:14 +02:00
< input id = "control-link-link-show" class = "control-link-link-show" type = "checkbox" tabindex = "1" >
< label for = "control-link-link-show" > Show< / label >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "form-indent" >
2019-06-04 17:14:04 +02:00
< div class = "input-wrap" >
< input id = "control-link-display-show" class = "control-link-display-show" type = "checkbox" tabindex = "1" >
< label for = "control-link-display-show" > Letter/Icon< / label >
< / div >
< div class = "form-indent" >
< div class = "input-wrap" >
< label for = "control-link-display-letter-size" > Letter size< / label >
< input id = "control-link-display-letter-size" class = "control-link-display-letter-size" type = "range" min = "1" max = "3000" value = "0" tabindex = "1" >
< / div >
< div class = "input-wrap" >
< label for = "control-link-display-icon-size" > Icon size< / label >
< input id = "control-link-display-icon-size" class = "control-link-display-icon-size" type = "range" min = "1" max = "3000" value = "0" tabindex = "1" >
< / div >
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-05-23 20:15:14 +02:00
< input id = "control-link-name-show" class = "control-link-name-show" type = "checkbox" tabindex = "1" >
< label for = "control-link-name-show" > Names< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-23 20:15:14 +02:00
< hr >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-05-23 20:15:14 +02:00
< input id = "control-link-url-show" class = "control-link-url-show" type = "checkbox" tabindex = "1" >
< label for = "control-link-url-show" > URL on hover< / label >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "form-indent" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-05-23 20:15:14 +02:00
< input id = "control-link-url-style-dark" class = "control-link-url-style-dark" type = "radio" name = "control-link-url-style" value = "dark" tabindex = "1" >
< label for = "control-link-url-style-dark" > Dark text< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-05-23 20:15:14 +02:00
< input id = "control-link-url-style-light" class = "control-link-url-style-light" type = "radio" name = "control-link-url-style" value = "light" tabindex = "1" >
< label for = "control-link-url-style-light" > Light text< / label >
< / div >
< / div >
< hr >
< label class = "control-link-fit-label" > Bookmark size< / label >
< div class = "input-wrap" >
< input id = "control-link-fit-best" class = "control-link-fit-best" type = "radio" name = "control-link-fit" value = "best" tabindex = "1" >
< label for = "control-link-fit-best" > Best fit< / label >
< / div >
< div class = "input-wrap" >
< input id = "control-link-fit-custom" class = "control-link-fit-custom" type = "radio" name = "control-link-fit" value = "custom" tabindex = "1" >
< label for = "control-link-fit-custom" > Custom< / label >
< / div >
< div class = "form-indent" >
< div class = "input-wrap" >
< label for = "control-link-items-width" > Width< / label >
< input id = "control-link-items-width" class = "control-link-items-width" type = "range" min = "5" max = "100" value = "0" tabindex = "1" >
< p class = "input-helper small muted" > Max width is defined by Layout Area Width.< / p >
< / div >
< hr >
< label class = "control-link-items-alignment-horizontal-label" > Bookmark Horizontal Alignment< / label >
< div class = "input-wrap" >
< input id = "control-link-items-alignment-horizontal-left" class = "control-link-items-alignment-horizontal-left" type = "radio" name = "control-link-items-alignment-horizontal" value = "left" tabindex = "1" >
< label for = "control-link-items-alignment-horizontal-left" > Left< / label >
< / div >
< div class = "input-wrap" >
< input id = "control-link-items-alignment-horizontal-center" class = "control-link-items-alignment-horizontal-center" type = "radio" name = "control-link-items-alignment-horizontal" value = "center" tabindex = "1" >
< label for = "control-link-items-alignment-horizontal-center" > Centre< / label >
< / div >
< div class = "input-wrap" >
< input id = "control-link-items-alignment-horizontal-right" class = "control-link-items-alignment-horizontal-right" type = "radio" name = "control-link-items-alignment-horizontal" value = "right" tabindex = "1" >
< label for = "control-link-items-alignment-horizontal-right" > Right< / label >
2019-04-26 14:48:37 +02:00
< / div >
< / div >
2019-06-04 17:14:04 +02:00
< hr >
< label class = "control-link-display-alignment-horizontal-label" > Content Horizontal Alignment< / label >
< div class = "input-wrap" >
< input id = "control-link-display-alignment-horizontal-left" class = "control-link-display-alignment-horizontal-left" type = "radio" name = "control-link-display-alignment-horizontal" value = "left" tabindex = "1" >
< label for = "control-link-display-alignment-horizontal-left" > Left< / label >
< / div >
< div class = "input-wrap" >
< input id = "control-link-display-alignment-horizontal-center" class = "control-link-display-alignment-horizontal-center" type = "radio" name = "control-link-display-alignment-horizontal" value = "center" tabindex = "1" >
< label for = "control-link-display-alignment-horizontal-center" > Centre< / label >
< / div >
< div class = "input-wrap" >
< input id = "control-link-display-alignment-horizontal-right" class = "control-link-display-alignment-horizontal-right" type = "radio" name = "control-link-display-alignment-horizontal" value = "right" tabindex = "1" >
< label for = "control-link-display-alignment-horizontal-right" > Right< / label >
< / div >
< hr >
< label class = "control-link-display-alignment-vertical-label" > Content Vertical Alignment< / label >
< div class = "input-wrap" >
< input id = "control-link-display-alignment-vertical-top" class = "control-link-display-alignment-vertical-top" type = "radio" name = "control-link-display-alignment-vertical" value = "top" tabindex = "1" >
< label for = "control-link-display-alignment-vertical-top" > Top< / label >
< / div >
< div class = "input-wrap" >
< input id = "control-link-display-alignment-vertical-center" class = "control-link-display-alignment-vertical-center" type = "radio" name = "control-link-display-alignment-vertical" value = "center" tabindex = "1" >
< label for = "control-link-display-alignment-vertical-center" > Centre< / label >
< / div >
< div class = "input-wrap" >
< input id = "control-link-display-alignment-vertical-bottom" class = "control-link-display-alignment-vertical-bottom" type = "radio" name = "control-link-display-alignment-vertical" value = "bottom" tabindex = "1" >
< label for = "control-link-display-alignment-vertical-bottom" > Bottom< / label >
< / div >
2019-04-26 14:48:37 +02:00
< / div >
2019-01-24 21:28:11 +01:00
< / div >
< / div >
2019-01-04 17:24:05 +01:00
< div class = "menu-item" >
2019-04-26 14:48:37 +02:00
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Open< / h1 >
< / div >
< div class = "menu-item-form" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-05-23 20:15:14 +02:00
< 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 >
2019-04-26 14:48:37 +02:00
< / div >
2019-01-04 17:24:05 +01:00
< / div >
< / div >
< div class = "menu-item" >
2019-04-26 14:48:37 +02:00
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Style< / h1 >
< / div >
< div class = "menu-item-form" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-05-23 20:15:14 +02:00
< 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 >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-05-23 20:15:14 +02:00
< 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 >
2019-04-26 14:48:37 +02:00
< / div >
2019-01-04 17:24:05 +01:00
< / div >
< / div >
< div class = "menu-item" >
2019-04-26 14:48:37 +02:00
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Sort< / h1 >
< / div >
< div class = "menu-item-form" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-05-23 20:15:14 +02:00
< input id = "control-link-sort-none" class = "control-link-sort-none" type = "radio" name = "control-link-sort" value = "none" tabindex = "1" >
< label for = "control-link-sort-none" > None (as added)< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-05-23 20:15:14 +02:00
< input id = "control-link-sort-letter" class = "control-link-sort-letter" type = "radio" name = "control-link-sort" value = "letter" tabindex = "1" >
< label for = "control-link-sort-letter" > Letter< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-11 09:33:19 +02:00
< div class = "input-wrap" >
2019-05-23 20:15:14 +02:00
< input id = "control-link-sort-icon" class = "control-link-sort-icon" type = "radio" name = "control-link-sort" value = "icon" tabindex = "1" >
< label for = "control-link-sort-icon" > Icon< / label >
2019-05-11 09:33:19 +02:00
< / div >
< div class = "input-wrap" >
2019-05-23 20:15:14 +02:00
< input id = "control-link-sort-name" class = "control-link-sort-name" type = "radio" name = "control-link-sort" value = "name" tabindex = "1" >
< label for = "control-link-sort-name" > Name< / label >
2019-05-11 09:33:19 +02:00
< / div >
2019-01-04 17:24:05 +01:00
< / div >
< / div >
< / div >
2019-02-03 14:51:54 +01:00
2019-04-01 17:11:39 +02:00
< div class = "menu-content-area menu-content-area-theme is-hidden" >
< div class = "menu-item" >
2019-04-26 14:48:37 +02:00
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Style< / h1 >
< / div >
< div class = "menu-item-form" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-theme-style-dark" class = "control-theme-style-dark" type = "radio" name = "control-theme-style" value = "dark" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-theme-style-dark" > Dark< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-theme-style-light" class = "control-theme-style-light" type = "radio" name = "control-theme-style" value = "light" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-theme-style-light" > Light< / label >
2019-05-23 21:39:56 +02:00
< p class = "input-helper small muted" > Accent Colour and Background Image may need to be changed to best fit the Theme Style.< / p >
2019-04-26 14:48:37 +02:00
< / div >
2019-04-01 17:11:39 +02:00
< / div >
< / div >
< div class = "menu-item" >
2019-04-26 14:48:37 +02:00
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Accent< / h1 >
< / div >
< div class = "menu-item-form" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-theme-accent-random-active" class = "control-theme-accent-random-active" type = "checkbox" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-theme-accent-random-active" > Random Accent colour on load/refresh< / label >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "form-indent" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< 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" >
2019-05-04 14:53:18 +02:00
< label for = "control-theme-accent-random-style-any" > Any colour< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< 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" >
2019-05-04 14:53:18 +02:00
< label for = "control-theme-accent-random-style-light" > Light colours< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< 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" >
2019-05-04 14:53:18 +02:00
< label for = "control-theme-accent-random-style-dark" > Dark colours< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< 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" >
2019-05-04 14:53:18 +02:00
< label for = "control-theme-accent-random-style-pastel" > Pastel colours< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-06-04 17:14:04 +02:00
< div class = "input-wrap mb-3" >
2019-04-26 14:48:37 +02:00
< 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" >
2019-05-04 14:53:18 +02:00
< label for = "control-theme-accent-random-style-saturated" > Saturated colours< / label >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "button-wrap" >
2019-06-04 17:14:04 +02:00
< button class = "button control-theme-accent-randomise mb-0" type = "button" > Randomise now< / button >
2019-04-26 14:48:37 +02:00
< / div >
< / div >
2019-04-01 17:11:39 +02:00
< / div >
< / div >
< / div >
2019-01-24 21:28:11 +01:00
< div class = "menu-content-area menu-content-area-background is-hidden" >
< div class = "menu-item" >
2019-04-26 14:48:37 +02:00
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Image< / h1 >
< / div >
< div class = "menu-item-form" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-04-26 14:48:37 +02:00
< input id = "control-background-image-show" class = "control-background-image-show" type = "checkbox" tabindex = "1" >
2019-05-04 14:53:18 +02:00
< label for = "control-background-image-show" > Show< / label >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "form-indent" >
< div class = "input-wrap" >
< label for = "control-background-image-url" > URL or path< / label >
< input id = "control-background-image-url" class = "control-background-image-url" type = "text" autocomplete = "off" autocorrect = "off" autocapitalize = "off" spellcheck = "false" placeholder = "http:// or ../path/to/file" tabindex = "1" >
< p class = "input-helper small muted" > Enter a URL to an image file or a path to a local file.< / p >
< p class = "input-helper small muted" > To use local files enter a relative file path, eg:< / p >
< p class = "input-helper small muted" > ../background/abstract.jpg< / p >
< p class = "input-helper small muted" > ../background/gray-steps.jpg< / 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 = "50" value = "0" tabindex = "1" >
< / div >
< / div >
2019-01-24 21:28:11 +01:00
< / div >
< / div >
< / div >
2019-02-03 14:51:54 +01:00
2019-01-03 23:30:27 +01:00
< / div >
2019-01-04 20:40:49 +01:00
2019-01-03 23:30:27 +01:00
< / div >
< / section >
2018-12-26 08:45:53 +01:00
< / body >
< script src = "js/helper.js" > < / script >
2019-01-03 23:30:27 +01:00
< script src = "js/data.js" > < / script >
2019-05-11 09:33:19 +02:00
< script src = "js/fontawesome.js" > < / script >
2019-01-06 16:47:08 +01:00
< script src = "js/update.js" > < / script >
2019-01-03 23:30:27 +01:00
< script src = "js/state.js" > < / script >
2018-12-26 08:45:53 +01:00
< script src = "js/bookmarks.js" > < / script >
2019-01-03 23:30:27 +01:00
< script src = "js/control.js" > < / script >
< script src = "js/menu.js" > < / script >
< script src = "js/header.js" > < / script >
2018-12-26 08:45:53 +01:00
< script src = "js/modal.js" > < / script >
2019-01-06 08:06:33 +01:00
< script src = "js/tip.js" > < / script >
2018-12-26 08:45:53 +01:00
< script src = "js/shade.js" > < / script >
2019-04-01 17:11:39 +02:00
< script src = "js/accent.js" > < / script >
2018-12-26 08:45:53 +01:00
< script src = "js/theme.js" > < / script >
2019-01-05 21:57:21 +01:00
< script src = "js/date.js" > < / script >
2019-03-26 00:31:51 +01:00
< script src = "js/greeting.js" > < / script >
2019-04-26 14:48:37 +02:00
< script src = "js/transitional.js" > < / script >
2018-12-26 08:45:53 +01:00
< script src = "js/clock.js" > < / script >
< script src = "js/search.js" > < / script >
2019-01-03 23:30:27 +01:00
< script src = "js/link.js" > < / script >
2018-12-27 19:41:17 +01:00
< script src = "js/version.js" > < / script >
2019-01-03 23:30:27 +01:00
< script src = "js/keyboard.js" > < / script >
2019-01-24 21:28:11 +01:00
< script src = "js/background.js" > < / script >
2019-02-03 16:18:45 +01:00
< script src = "js/title.js" > < / script >
2019-04-03 13:47:41 +02:00
< script src = "js/layout.js" > < / script >
2019-05-11 09:33:19 +02:00
< script src = "js/auto-suggest.js" > < / script >
< script src = "js/page.js" > < / script >
2019-05-23 20:15:14 +02:00
< script src = "js/edge.js" > < / script >
2018-12-26 08:45:53 +01:00
< script src = "js/init.js" > < / script >
< / html >
