2018-12-26 08:45:53 +01:00
<!DOCTYPE html>
2019-12-22 16:15:02 +01:00
< html lang = "en" style = "background-color: rgb(25, 25, 25)" >
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 >
2019-08-08 13:32:34 +02:00
<!-- css - block -->
2018-12-26 08:45:53 +01:00
< link rel = "stylesheet" href = "css/reset.css" >
2019-06-21 13:50:39 +02:00
< link rel = "stylesheet" href = "css/variables.css" >
2019-08-26 00:12:31 +02:00
< link rel = "stylesheet" href = "css/utilities.css" >
2018-12-26 18:43:38 +01:00
< link rel = "stylesheet" href = "css/base.css" >
2019-06-25 16:39:21 +02:00
< link rel = "stylesheet" href = "css/layout.css" >
2019-05-23 20:15:14 +02:00
< 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/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-10-19 11:52:33 +02:00
< link rel = "stylesheet" href = "css/group.css" >
2019-01-03 23:30:27 +01:00
< link rel = "stylesheet" href = "css/link.css" >
2019-12-24 12:56:52 +01:00
< link rel = "stylesheet" href = "css/theme.css" >
2019-05-11 09:33:19 +02:00
< link rel = "stylesheet" href = "css/auto-suggest.css" >
< link rel = "stylesheet" href = "css/fontawesome.css" >
2019-08-08 13:32:34 +02:00
<!-- end - css - block -->
2019-12-29 16:50:05 +01:00
< link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Abel|Alatsi|Big+Shoulders+Display|Calistoga|Fredoka+One|Girassol|Gugi|Lato|Life+Savers|Major+Mono+Display|Monoton|Montserrat|Muli|Odibee+Sans|Poiret+One|Quicksand|Raleway|Righteous|Roboto+Condensed|Source+Sans+Pro|Unica+One|Autour+One|Solway&display=swap" >
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-06-25 16:39:21 +02:00
< main class = "layout" >
2019-05-23 20:15:14 +02:00
< header class = "header" >
< div class = "header-shade" > < / div >
2019-07-03 12:24:40 +02:00
< div class = "header-border" > < / div >
2019-01-03 23:30:27 +01:00
< div class = "header-area" >
2019-06-13 16:47:00 +02:00
< div class = "header-item-grid" >
< div class = "header-item header-greeting" >
2019-11-27 22:40:44 +01:00
< div class = "header-greeting-body" >
< p class = "greeting" > < / p >
< / div >
2019-06-13 16:47:00 +02:00
< / div >
< div class = "header-item header-transitional" >
2019-11-27 22:40:44 +01:00
< div class = "header-transitional-body" >
< p class = "transitional" > < / p >
< / div >
2019-06-13 16:47:00 +02:00
< / div >
< div class = "header-item header-clock" >
2019-11-27 22:40:44 +01:00
< div class = "header-clock-body" >
< p class = "clock" > < / p >
< / div >
2019-06-13 16:47:00 +02:00
< / div >
< div class = "header-item header-date" >
2019-11-27 22:40:44 +01:00
< div class = "header-date-body" >
< p class = "date" > < / p >
< / div >
2019-06-13 16:47:00 +02:00
< / div >
< div class = "header-item header-search" >
2019-11-27 22:40:44 +01:00
< div class = "header-search-body" >
< form class = "search" action = "" method = "get" >
< input class = "header-search-input search-input mb-0" type = "text" placeholder = "Find or Search" name = "q" autocomplete = "off" autocorrect = "off" autocapitalize = "off" spellcheck = "false" tabindex = "1" >
< input type = "submit" value = "Search" class = "is-hidden" >
< / form >
< button class = "header-search-clear search-clear button button-link mb-0" tabindex = "1" disabled >
< span class = "icon-close" > < / span >
< / button >
< / div >
2019-01-03 23:30:27 +01:00
< / div >
2019-06-13 16:47:00 +02:00
< div class = "header-item header-button header-edit-add" >
2019-11-27 22:40:44 +01:00
< div class = "header-button-body" >
< div class = "form-group nested-button mb-0" >
2019-12-02 23:55:18 +01:00
< div class = "input-wrap input-button input-hide py-0" >
2019-12-22 14:14:44 +01:00
< input id = "control-edit" class = "control-edit" type = "checkbox" tabindex = "1" >
< label for = "control-edit" class = "mb-0" > < span class = "label-icon" > < / span > Edit< / label >
2019-12-02 23:55:18 +01:00
< / div >
< div class = "input-wrap py-0" >
< div class = "form-dropdown" >
< button class = "control-add-toggle form-dropdown-toggle button" tabindex = "1" >
< span class = "button-text" > Add< / span >
< / button >
< ul class = "list-unstyled form-dropdown-menu" >
< li >
< button class = "button button-block text-left form-dropdown-menu-item control-group-add" tabindex = "1" > < span class = "button-text" > New Group< / span > < / button >
< / li >
< li >
< button class = "button button-block text-left form-dropdown-menu-item control-link-add" tabindex = "1" > < span class = "button-text" > New Bookmark< / span > < / button >
< / li >
< / ul >
< / div >
2019-11-11 14:23:13 +01:00
< / div >
2019-11-11 00:57:04 +01:00
< / div >
2019-06-13 16:47:00 +02:00
< / div >
2019-01-03 23:30:27 +01:00
< / div >
2019-06-13 16:47:00 +02:00
< div class = "header-item header-button header-accent" >
2019-11-27 22:40:44 +01:00
< div class = "header-button-body" >
2019-12-23 01:33:25 +01:00
< div class = "form-group nested-button mb-0" >
< div class = "input-wrap input-button input-color-dot input-color-dot-theme py-0" >
< input id = "control-theme-color-rgb-quick" class = "control-theme-color-rgb-quick mb0" type = "color" value = "#000000" tabindex = "1" >
< label for = "control-theme-color-rgb-quick" > Colour< / label >
< / div >
< div class = "input-wrap input-button input-color-dot input-color-dot-accent py-0" >
< input id = "control-theme-accent-current-quick" class = "control-theme-accent-current-quick mb0" type = "color" value = "#000000" tabindex = "1" >
< label for = "control-theme-accent-current-quick" > Accent< / label >
< / div >
2019-11-27 22:40:44 +01:00
< / div >
2019-06-13 16:47:00 +02:00
< / div >
< / div >
< div class = "header-item header-button header-menu" >
2019-11-27 22:40:44 +01:00
< div class = "header-button-body" >
< button class = "control-menu-open button mb-0" tabindex = "1" >
< span class = "button-text" > < span class = "icon-settings" > < / span > < / span >
< / button >
< / div >
2019-06-30 19:37:05 +02:00
< / div >
2019-06-13 16:47:00 +02:00
< / div >
2018-12-26 08:45:53 +01:00
< / div >
2019-05-23 20:15:14 +02:00
< / header >
2018-12-26 08:45:53 +01:00
2019-10-19 11:52:33 +02:00
< section class = "link" > < / section >
2019-05-23 20:15:14 +02:00
< / main >
2019-12-01 16:15:29 +01:00
< section class = "menu" tabindex = "-1" style = "display:none;" >
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-07-16 13:40:39 +02:00
< div class = "menu-nav-area-tab menu-nav-area-grow mb-0 list-unstyled" >
2019-12-28 17:00:07 +01:00
< button class = "menu-nav-button control-menu-layout button mb-0 active" tabindex = "-1" > Layout< / button >
< button class = "menu-nav-button control-menu-header button mb-0" tabindex = "-1" > Header< / button >
< button class = "menu-nav-button control-menu-groups button mb-0" tabindex = "-1" > Groups< / button >
< button class = "menu-nav-button control-menu-bookmarks button mb-0" tabindex = "-1" > Bookmarks< / button >
< button class = "menu-nav-button control-menu-theme button mb-0" tabindex = "-1" > Theme< / button >
< button class = "menu-nav-button control-menu-background button mb-0" tabindex = "-1" > Background< / button >
< button class = "menu-nav-button control-menu-data button mb-0" tabindex = "-1" > Data< / button >
< button class = "menu-nav-button control-menu-nightTab button mb-0" tabindex = "-1" > nightTab< / button >
2019-02-03 14:51:54 +01:00
< / div >
2019-07-16 13:40:39 +02:00
< div class = "menu-nav-area-close" >
< button class = "menu-nav-button control-menu-close button mb-0" tabindex = "-1" > < span class = "icon-close" > < / span > < / button >
2019-01-14 19:22:39 +01:00
< / 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 >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
2019-11-26 08:48:07 +01:00
< input id = "control-layout-width" class = "control-layout-width mr-3" type = "range" min = "10" max = "100" value = "0" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-layout-width-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-04-26 14:48:37 +02:00
< / div >
2019-11-27 18:07:18 +01:00
< div class = "button-wrap" >
< button class = "control-layout-width-default button mb-0" tabindex = "1" > Default Width< / button >
< / div >
2019-05-23 20:15:14 +02:00
< hr >
2019-11-11 14:23:13 +01:00
< label class = "control-layout-alignment-label" > Area alignment< / label >
2019-06-30 19:37:05 +02:00
< div class = "form-grid-wrap" >
2019-11-07 12:09:40 +01:00
< div class = "form-grid form-grid-3x3 control-layout-alignment-grid" >
2019-06-30 19:37:05 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-layout-alignment-topleft" class = "control-layout-alignment-topleft" type = "radio" name = "control-layout-alignment" value = "topleft" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-layout-alignment-topleft" > < span class = "label-icon" > < / span > < span class = "sr-only" > Top left< / span > < / label >
2019-06-30 19:37:05 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-layout-alignment-topcenter" class = "control-layout-alignment-topcenter" type = "radio" name = "control-layout-alignment" value = "topcenter" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-layout-alignment-topcenter" > < span class = "label-icon" > < / span > < span class = "sr-only" > Top center< / span > < / label >
2019-06-30 19:37:05 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-layout-alignment-topright" class = "control-layout-alignment-topright" type = "radio" name = "control-layout-alignment" value = "topright" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-layout-alignment-topright" > < span class = "label-icon" > < / span > < span class = "sr-only" > Top right< / span > < / label >
2019-06-30 19:37:05 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-layout-alignment-centerleft" class = "control-layout-alignment-centerleft" type = "radio" name = "control-layout-alignment" value = "centerleft" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-layout-alignment-centerleft" > < span class = "label-icon" > < / span > < span class = "sr-only" > Center left< / span > < / label >
2019-06-30 19:37:05 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-layout-alignment-centercenter" class = "control-layout-alignment-centercenter" type = "radio" name = "control-layout-alignment" value = "centercenter" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-layout-alignment-centercenter" > < span class = "label-icon" > < / span > < span class = "sr-only" > Center center< / span > < / label >
2019-06-30 19:37:05 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-layout-alignment-centerright" class = "control-layout-alignment-centerright" type = "radio" name = "control-layout-alignment" value = "centerright" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-layout-alignment-centerright" > < span class = "label-icon" > < / span > < span class = "sr-only" > Center right< / span > < / label >
2019-06-30 19:37:05 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-layout-alignment-bottomleft" class = "control-layout-alignment-bottomleft" type = "radio" name = "control-layout-alignment" value = "bottomleft" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-layout-alignment-bottomleft" > < span class = "label-icon" > < / span > < span class = "sr-only" > Bottom left< / span > < / label >
2019-06-30 19:37:05 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-layout-alignment-bottomcenter" class = "control-layout-alignment-bottomcenter" type = "radio" name = "control-layout-alignment" value = "bottomcenter" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-layout-alignment-bottomcenter" > < span class = "label-icon" > < / span > < span class = "sr-only" > Bottom Center< / span > < / label >
2019-06-30 19:37:05 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-layout-alignment-bottomright" class = "control-layout-alignment-bottomright" type = "radio" name = "control-layout-alignment" value = "bottomright" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-layout-alignment-bottomright" > < span class = "label-icon" > < / span > < span class = "sr-only" > Bottom right< / span > < / label >
2019-06-30 19:37:05 +02:00
< / div >
< / div >
2019-05-23 20:15:14 +02:00
< / div >
2019-07-15 14:48:47 +02:00
< p class = "control-layout-alignment-helper form-helper small" > Effects may not be visible if the Layout Area is full width or if Bookmarks fill the page.< / p >
2019-05-23 20:15:14 +02:00
< / div >
< / div >
2019-06-25 16:39:21 +02:00
< div class = "menu-item" >
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Area order< / h1 >
< / div >
< div class = "menu-item-form" >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-layout-order-headerlink" class = "control-layout-order-headerlink" type = "radio" name = "control-layout-order" value = "headerlink" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-layout-order-headerlink" > < span class = "label-icon" > < / span > Header then Bookmarks< / label >
2019-06-25 16:39:21 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-layout-order-linkheader" class = "control-layout-order-linkheader" type = "radio" name = "control-layout-order" value = "linkheader" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-layout-order-linkheader" > < span class = "label-icon" > < / span > Bookmarks then Header< / label >
2019-06-25 16:39:21 +02:00
< / div >
2019-07-15 14:48:47 +02:00
< p class = "control-layout-order-helper form-helper small" > Only available when Bookmarks are shown.< / p >
2019-06-25 16:39:21 +02:00
< / div >
< / div >
2019-06-13 16:47:00 +02:00
< div class = "menu-item" >
< div class = "menu-item-header" >
2019-12-01 16:05:03 +01:00
< h1 class = "menu-item-header-text" > Global scaling< / h1 >
2019-06-13 16:47:00 +02:00
< / div >
< div class = "menu-item-form" >
< div class = "input-wrap" >
2019-12-01 16:05:03 +01:00
< label for = "control-layout-size" > Size< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
2019-12-01 16:05:03 +01:00
< input id = "control-layout-size" class = "control-layout-size mr-3" type = "range" min = "50" max = "200" value = "0" step = "5" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-layout-size-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-06-13 16:47:00 +02:00
< / div >
2019-12-01 16:05:03 +01:00
< p class = "control-layout-size-helper form-helper small" > Resize all elements on the page.< / p >
2019-12-02 23:55:18 +01:00
< p class = "control-layout-size-helper form-helper small" > Take care as some elements could scale up to outside the page.< / p >
2019-11-27 22:40:44 +01:00
< div class = "button-wrap" >
2019-12-01 16:05:03 +01:00
< button class = "control-layout-size-default button mb-0" tabindex = "1" > Default Global scaling size< / button >
2019-11-27 22:40:44 +01:00
< / div >
2019-06-13 16:47:00 +02:00
< / div >
< / div >
< div class = "menu-item" >
< div class = "menu-item-header" >
2019-12-01 16:05:03 +01:00
< h1 class = "menu-item-header-text" > Padding< / h1 >
2019-06-13 16:47:00 +02:00
< / div >
< div class = "menu-item-form" >
< div class = "input-wrap" >
2019-12-01 16:05:03 +01:00
< label for = "control-layout-padding" > Padding outside Header and Bookmark Area< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
2019-12-01 16:05:03 +01:00
< input id = "control-layout-padding" class = "control-layout-padding mr-3" type = "range" min = "0" max = "40" value = "0" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-layout-padding-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-06-13 16:47:00 +02:00
< / div >
2019-11-27 22:40:44 +01:00
< div class = "button-wrap" >
2019-12-01 16:05:03 +01:00
< button class = "control-layout-padding-default button mb-0" tabindex = "1" > Default Padding size< / button >
2019-11-27 22:40:44 +01:00
< / div >
< / div >
< / div >
< div class = "menu-item" >
< div class = "menu-item-header" >
2019-12-01 16:05:03 +01:00
< h1 class = "menu-item-header-text" > Gutter< / h1 >
2019-11-27 22:40:44 +01:00
< / div >
< div class = "menu-item-form" >
< div class = "input-wrap" >
2019-12-01 16:05:03 +01:00
< label for = "control-layout-gutter" > Gutter between Header and Bookmark items< / label >
2019-11-27 22:40:44 +01:00
< div class = "form-group form-group-block mb-0" >
2019-12-01 16:05:03 +01:00
< input id = "control-layout-gutter" class = "control-layout-gutter mr-3" type = "range" min = "0" max = "40" value = "0" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-layout-gutter-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-27 22:40:44 +01:00
< / div >
< / div >
< div class = "button-wrap" >
2019-12-01 16:05:03 +01:00
< button class = "control-layout-gutter-default button mb-0" tabindex = "1" > Default Gutter size< / button >
2019-11-27 22:40:44 +01:00
< / div >
2019-06-13 16:47:00 +02:00
< / div >
< / div >
2019-05-23 20:15:14 +02:00
< 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 >
2019-07-16 13:40:39 +02:00
< 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" >
2019-05-23 20:15:14 +02:00
< / div >
< hr >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-layout-scrollpastend" class = "control-layout-scrollpastend" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-layout-scrollpastend" > < span class = "label-icon" > < / span > 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 20:08:15 +02:00
< div class = "input-wrap" >
2019-05-23 20:15:14 +02:00
< label for = "control-header-area-width" > Width< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-header-area-width" class = "control-header-area-width mr-3" type = "range" min = "10" max = "100" value = "0" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-header-area-width-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-05-23 20:15:14 +02:00
< / div >
2019-07-15 14:48:47 +02:00
< p class = "control-header-area-width-helper form-helper small" > Max width is defined by Layout Area Width.< / p >
2019-05-23 20:15:14 +02:00
< div class = "button-wrap" >
2019-07-16 13:40:39 +02:00
< button class = "control-header-area-width-match button mb-0" tabindex = "-1" > Match Bookmarks Area< / button >
2019-05-23 20:15:14 +02:00
< / div >
< hr >
2019-11-11 14:23:13 +01:00
< label class = "control-header-area-alignment-label" > Area horizontal alignment< / label >
2019-06-30 19:37:05 +02:00
< div class = "form-grid-wrap" >
2019-11-07 12:09:40 +01:00
< div class = "form-grid form-grid-3x1 control-header-area-alignment-grid" >
2019-06-30 19:37:05 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-area-alignment-left" class = "control-header-area-alignment-left" type = "radio" name = "control-header-area-alignment" value = "left" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-area-alignment-left" > < span class = "label-icon" > < / span > < span class = "sr-only" > Left< / span > < / label >
2019-06-30 19:37:05 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-area-alignment-center" class = "control-header-area-alignment-center" type = "radio" name = "control-header-area-alignment" value = "center" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-area-alignment-center" > < span class = "label-icon" > < / span > < span class = "sr-only" > Center< / span > < / label >
2019-06-30 19:37:05 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-area-alignment-right" class = "control-header-area-alignment-right" type = "radio" name = "control-header-area-alignment" value = "right" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-area-alignment-right" > < span class = "label-icon" > < / span > < span class = "sr-only" > Right< / span > < / label >
2019-06-30 19:37:05 +02:00
< / div >
< / div >
2019-04-26 14:48:37 +02:00
< / div >
2019-07-15 14:48:47 +02:00
< p class = "control-header-area-alignment-helper form-helper small" > Effects may not be visible if the Header Area is full width.< / p >
2019-04-26 14:48:37 +02:00
< hr >
2019-11-11 14:23:13 +01:00
< label class = "control-header-item-alignment-label" > Item horizontal alignment< / label >
2019-06-30 19:37:05 +02:00
< div class = "form-grid-wrap" >
2019-11-07 12:09:40 +01:00
< div class = "form-grid form-grid-3x1 control-header-item-alignment-grid" >
2019-06-30 19:37:05 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-item-alignment-left" class = "control-header-item-alignment-left" type = "radio" name = "control-header-item-alignment" value = "left" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-item-alignment-left" > < span class = "label-icon" > < / span > < span class = "sr-only" > Left< / span > < / label >
2019-06-30 19:37:05 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-item-alignment-center" class = "control-header-item-alignment-center" type = "radio" name = "control-header-item-alignment" value = "center" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-item-alignment-center" > < span class = "label-icon" > < / span > < span class = "sr-only" > Center< / span > < / label >
2019-06-30 19:37:05 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-item-alignment-right" class = "control-header-item-alignment-right" type = "radio" name = "control-header-item-alignment" value = "right" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-item-alignment-right" > < span class = "label-icon" > < / span > < span class = "sr-only" > Right< / span > < / label >
2019-06-30 19:37:05 +02:00
< / div >
< / div >
2019-05-23 20:15:14 +02:00
< / div >
2019-07-15 14:48:47 +02:00
< p class = "control-header-item-alignment-helper form-helper small" > Effects may not be visible if the Search box size is set to Auto and grows to fill available space.< / p >
2019-05-23 20:15:14 +02:00
< / 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" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-greeting-show" class = "control-header-greeting-show" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-greeting-show" > < span class = "label-icon" > < / span > Show< / label >
2019-05-23 20:15:14 +02:00
< / div >
< div class = "form-indent" >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-greeting-type-good" class = "control-header-greeting-type-good" type = "radio" name = "control-header-greeting-type" value = "good" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-greeting-type-good" > < span class = "label-icon" > < / span > "Good morning..."< / label >
2019-05-23 20:15:14 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-greeting-type-hello" class = "control-header-greeting-type-hello" type = "radio" name = "control-header-greeting-type" value = "hello" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-greeting-type-hello" > < span class = "label-icon" > < / span > "Hello..."< / label >
2019-05-23 20:15:14 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-greeting-type-hi" class = "control-header-greeting-type-hi" type = "radio" name = "control-header-greeting-type" value = "hi" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-greeting-type-hi" > < span class = "label-icon" > < / span > "Hi..."< / label >
2019-05-23 20:15:14 +02:00
< / div >
< hr >
< div class = "input-wrap" >
< label for = "control-header-greeting-name" > Name< / label >
2019-07-16 13:40:39 +02:00
< 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" >
2019-05-23 20:15:14 +02:00
< / div >
2019-06-11 11:54:10 +02:00
< hr >
< div class = "input-wrap" >
< label for = "control-header-greeting-size" > Size< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-header-greeting-size" class = "control-header-greeting-size mr-3" type = "range" min = "10" max = "500" value = "0" step = "10" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-header-greeting-size-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-06-11 11:54:10 +02:00
< / div >
< div class = "button-wrap" >
2019-11-11 14:23:13 +01:00
< button class = "control-header-greeting-size-default button mb-0" tabindex = "-1" > Default Greeting size< / button >
2019-06-11 11:54:10 +02:00
< / div >
2019-05-23 20:15:14 +02:00
< / 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-07-16 13:40:39 +02:00
< input id = "control-header-transitional-show" class = "control-header-transitional-show" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-transitional-show" > < span class = "label-icon" > < / span > Show< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-07-15 14:48:47 +02:00
< p class = "control-header-transitional-show-helper form-helper small" > Available when Date or Time is shown.< / p >
2019-04-26 14:48:37 +02:00
< div class = "form-indent" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-transitional-type-timeanddate" > < span class = "label-icon" > < / span > "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-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-transitional-type-its" > < span class = "label-icon" > < / span > "It's"< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-06-11 11:54:10 +02:00
< hr >
< div class = "input-wrap" >
< label for = "control-header-transitional-size" > Size< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-header-transitional-size" class = "control-header-transitional-size mr-3" type = "range" min = "10" max = "500" value = "0" step = "10" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-header-transitional-size-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-06-11 11:54:10 +02:00
< / div >
< div class = "button-wrap" >
2019-11-11 14:23:13 +01:00
< button class = "control-header-transitional-size-default button mb-0" tabindex = "-1" > Default Transitional size< / button >
2019-06-11 11:54:10 +02:00
< / div >
2019-04-26 14:48:37 +02:00
< / 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-07-16 13:40:39 +02:00
< input id = "control-header-clock-hours-show" class = "control-header-clock-hours-show" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-clock-hours-show" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +02:00
< 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" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-clock-hours-display-number" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +02:00
< 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" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-clock-hours-display-word" > < span class = "label-icon" > < / span > As word< / label >
2019-04-26 14:48:37 +02:00
< / div >
< / div >
2019-06-13 22:42:56 +02:00
< hr >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-clock-minutes-show" class = "control-header-clock-minutes-show" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-clock-minutes-show" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +02:00
< 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" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-clock-minutes-display-number" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +02:00
< 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" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-clock-minutes-display-word" > < span class = "label-icon" > < / span > As word< / label >
2019-04-26 14:48:37 +02:00
< / div >
< / div >
2019-06-13 22:42:56 +02:00
< hr >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-clock-seconds-show" class = "control-header-clock-seconds-show" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-clock-seconds-show" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +02:00
< 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" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-clock-seconds-display-number" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +02:00
< 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" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-clock-seconds-display-word" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +02:00
< input id = "control-header-clock-separator-show" class = "control-header-clock-separator-show" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-clock-separator-show" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +02:00
< input id = "control-header-clock-hour24-show" class = "control-header-clock-hour24-show" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-clock-hour24-show" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +02:00
< input id = "control-header-clock-meridiem-show" class = "control-header-clock-meridiem-show" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-clock-meridiem-show" > < span class = "label-icon" > < / span > AM/PM< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-06-11 11:54:10 +02:00
< hr >
< div class = "input-wrap" >
< label for = "control-header-clock-size" > Size< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-header-clock-size" class = "control-header-clock-size mr-3" type = "range" min = "10" max = "500" value = "0" step = "10" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-header-clock-size-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-06-11 11:54:10 +02:00
< / div >
< div class = "button-wrap" >
2019-11-11 14:23:13 +01:00
< button class = "control-header-clock-size-default button mb-0" tabindex = "-1" > Default Clock size< / button >
2019-06-11 11:54:10 +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-07-16 13:40:39 +02:00
< input id = "control-header-date-day-show" class = "control-header-date-day-show" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-date-day-show" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-date-day-display-number" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-date-day-week-start-monday" > < span class = "label-icon" > < / span > Monday< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-date-day-week-start-sunday" > < span class = "label-icon" > < / span > Sunday< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-07-15 14:48:47 +02:00
< p class = "control-header-date-day-week-start-helper form-helper small" > Define what day "1" represents, either Monday or Sunday.< / p >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-date-day-display-word" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-date-day-length-long" > < span class = "label-icon" > < / span > Long< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-date-day-length-short" > < span class = "label-icon" > < / span > Short< / label >
2019-04-26 14:48:37 +02:00
< / div >
< / div >
< / div >
2019-06-13 22:42:56 +02:00
< hr >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-date-date-show" class = "control-header-date-date-show" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-date-date-show" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-date-date-display-number" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-date-date-display-word" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +02:00
< input id = "control-header-date-date-ordinal" class = "control-header-date-date-ordinal" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-date-date-ordinal" > < span class = "label-icon" > < / span > Ordinal numbers< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-07-15 14:48:47 +02:00
< p class = "control-header-date-date-ordinal-helper form-helper small" > Display Date as 1st, 2nd, 3rd, 4th etc.< / p >
2019-04-26 14:48:37 +02:00
< / div >
2019-06-13 22:42:56 +02:00
< hr >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-date-month-show" class = "control-header-date-month-show" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-date-month-show" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-date-month-display-number" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +02:00
< input id = "control-header-date-month-ordinal" class = "control-header-date-month-ordinal" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-date-month-ordinal" > < span class = "label-icon" > < / span > Ordinal numbers< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-07-15 14:48:47 +02:00
< p class = "control-header-date-month-ordinal-helper form-helper small" > Display Month as 1st, 2nd, 3rd, 4th etc.< / p >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-date-month-display-word" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-date-month-length-long" > < span class = "label-icon" > < / span > Long< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-date-month-length-short" > < span class = "label-icon" > < / span > Short< / label >
2019-04-26 14:48:37 +02:00
< / div >
< / div >
< / div >
2019-06-13 22:42:56 +02:00
< hr >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-date-year-show" class = "control-header-date-year-show" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-date-year-show" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-date-year-display-number" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-date-year-display-word" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +02:00
< input id = "control-header-date-separator-show" class = "control-header-date-separator-show" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-date-separator-show" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-date-format-datemonth" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-date-format-monthdate" > < span class = "label-icon" > < / span > Month/Date< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-06-11 11:54:10 +02:00
< hr >
< div class = "input-wrap" >
< label for = "control-header-date-size" > Size< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-header-date-size" class = "control-header-date-size mr-3" type = "range" min = "10" max = "500" value = "0" step = "10" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-header-date-size-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-06-11 11:54:10 +02:00
< / div >
< div class = "button-wrap" >
2019-11-11 14:23:13 +01:00
< button class = "control-header-date-size-default button mb-0" tabindex = "-1" > Default Date size< / button >
2019-06-11 11:54:10 +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-07-16 13:40:39 +02:00
< input id = "control-header-search-show" class = "control-header-search-show" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-search-show" > < span class = "label-icon" > < / span > Show< / label >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "form-indent" >
2019-06-11 11:54:10 +02:00
< label class = "control-header-search-style-label" > Search box width< / label >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-search-style-auto" class = "control-header-search-style-auto" type = "radio" name = "control-header-search-width" value = "auto" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-search-style-auto" > < span class = "label-icon" > < / span > Auto< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-07-15 14:48:47 +02:00
< p class = "control-header-search-style-auto-helper form-helper small" > Search box will grow to best fit available space.< / p >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-search-style-custom" class = "control-header-search-style-custom" type = "radio" name = "control-header-search-width" value = "custom" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-search-style-custom" > < span class = "label-icon" > < / span > Custom< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-07-15 14:48:47 +02:00
< p class = "control-header-search-style-custom-helper form-helper small" > Define how wide the Search box should be inside the Header Area.< / p >
2019-04-26 14:48:37 +02:00
< div class = "form-indent" >
< div class = "input-wrap" >
2019-06-11 11:54:10 +02:00
< label for = "control-header-search-width" > Width< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-header-search-width" class = "control-header-search-width mr-3" type = "range" min = "10" max = "100" value = "0" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-header-search-width-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-04-26 14:48:37 +02:00
< / div >
< / div >
< hr >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-search-focus" class = "control-header-search-focus" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-search-focus" > < span class = "label-icon" > < / span > Focus on load/refresh< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-07-15 14:48:47 +02:00
< p class = "control-header-search-focus-helper form-helper small" > May not work in some browsers.< / p >
2019-04-26 14:48:37 +02:00
< hr >
2019-06-13 22:42:56 +02:00
< label class = "control-header-search-engine-label" > Search engine< / label >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-search-engine-google" > < span class = "label-icon" > < / span > Google< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-search-engine-duckduckgo" > < span class = "label-icon" > < / span > DuckDuckGo< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-search-engine-youtube" > < span class = "label-icon" > < / span > YouTube< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-search-engine-giphy" > < span class = "label-icon" > < / span > Giphy< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-06-30 21:10:19 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-search-engine-bing" class = "control-header-search-engine-bing" type = "radio" name = "control-header-search-engine" value = "bing" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-search-engine-bing" > < span class = "label-icon" > < / span > Bing< / label >
2019-07-01 22:46:50 +02:00
< / div >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-search-engine-custom" > < span class = "label-icon" > < / span > 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 >
2019-11-11 14:23:13 +01:00
< 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" >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "input-wrap" >
< label for = "control-header-search-engine-custom-url" > URL< / label >
2019-07-16 13:40:39 +02:00
< input id = "control-header-search-engine-custom-url" class = "control-header-search-engine-custom-url mb-0" type = "text" autocomplete = "off" autocorrect = "off" autocapitalize = "off" spellcheck = "false" placeholder = "https://" tabindex = "-1" >
2019-04-26 14:48:37 +02:00
< / div >
2019-07-15 14:48:47 +02:00
< p class = "control-header-search-engine-custom-helper form-helper small" > Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="< / p >
< p class = "control-header-search-engine-custom-helper form-helper small mb-0" > nightTab will add the search term entered into the Search input at the end of the above URL< / p >
2019-04-26 14:48:37 +02:00
< / div >
< hr >
2019-06-30 19:37:05 +02:00
< label class = "control-header-search-text-alignment-label" > Align Text< / label >
< div class = "form-grid-wrap" >
2019-11-07 12:09:40 +01:00
< div class = "form-grid form-grid-3x1 control-header-search-text-alignment-grid" >
2019-06-30 19:37:05 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-search-text-alignment-left" class = "control-header-search-text-alignment-left" type = "radio" name = "control-header-search-text-alignment" value = "left" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-search-text-alignment-left" > < span class = "label-icon" > < / span > < span class = "sr-only" > Left< / span > < / label >
2019-06-30 19:37:05 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-search-text-alignment-center" class = "control-header-search-text-alignment-center" type = "radio" name = "control-header-search-text-alignment" value = "center" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-search-text-alignment-center" > < span class = "label-icon" > < / span > < span class = "sr-only" > Center< / span > < / label >
2019-06-30 19:37:05 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-search-text-alignment-right" class = "control-header-search-text-alignment-right" type = "radio" name = "control-header-search-text-alignment" value = "right" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-search-text-alignment-right" > < span class = "label-icon" > < / span > < span class = "sr-only" > Right< / span > < / label >
2019-06-30 19:37:05 +02:00
< / div >
< / div >
2019-04-26 14:48:37 +02:00
< / div >
2019-06-11 11:54:10 +02:00
< hr >
< div class = "input-wrap" >
< label for = "control-header-search-size" > Size< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-header-search-size" class = "control-header-search-size mr-3" type = "range" min = "10" max = "500" value = "0" step = "10" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-header-search-size-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-06-11 11:54:10 +02:00
< / div >
2019-07-15 14:48:47 +02:00
< p class = "control-header-search-size-helper form-helper small" > Only the Search box width control will change the Width of the Search box.< / p >
2019-06-11 11:54:10 +02:00
< div class = "button-wrap" >
2019-11-11 14:23:13 +01:00
< button class = "control-header-search-size-default button mb-0" tabindex = "-1" > Default Search size< / button >
2019-06-11 11:54:10 +02:00
< / div >
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" > Buttons< / h1 >
< / div >
< div class = "menu-item-form" >
2019-06-13 19:28:51 +02:00
< label class = "control-header-button-style-label" > Button style< / label >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-button-style-box" class = "control-header-button-style-box" type = "radio" name = "control-header-button-style" value = "box" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-button-style-box" > < span class = "label-icon" > < / span > Box< / label >
2019-06-13 19:28:51 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-button-style-clear" class = "control-header-button-style-clear" type = "radio" name = "control-header-button-style" value = "clear" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-button-style-clear" > < span class = "label-icon" > < / span > Clear< / label >
2019-06-13 19:28:51 +02:00
< / div >
< hr >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-button-editadd-show" class = "control-header-button-editadd-show" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-button-editadd-show" > < span class = "label-icon" > < / span > Show Edit/Add< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-06-04 20:08:15 +02:00
< hr >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-12-23 01:33:25 +01:00
< input id = "control-header-button-coloraccent-show" class = "control-header-button-coloraccent-show" type = "checkbox" tabindex = "-1" >
< label for = "control-header-button-coloraccent-show" > < span class = "label-icon" > < / span > Show Colour/Accent< / label >
2019-06-11 11:54:10 +02:00
< / div >
2019-12-23 01:33:25 +01:00
< p class = "control-header-button-coloraccent-show-helper form-helper small" > Colour and Accent can also be found under Theme.< / p >
2019-12-23 12:48:49 +01:00
< div class = "form-indent" >
< div class = "input-wrap" >
< input id = "control-header-button-coloraccent-dot-show" class = "control-header-button-coloraccent-dot-show" type = "checkbox" tabindex = "-1" >
< label for = "control-header-button-coloraccent-dot-show" > < span class = "label-icon" > < / span > Show colour dots< / label >
< / div >
< / div >
2019-06-11 11:54:10 +02:00
< hr >
< div class = "input-wrap" >
< label for = "control-header-button-size" > Size< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-header-button-size" class = "control-header-button-size mr-3" type = "range" min = "10" max = "500" value = "0" step = "10" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-header-button-size-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-06-11 11:54:10 +02:00
< / div >
< div class = "button-wrap" >
2019-11-11 14:23:13 +01:00
< button class = "control-header-button-size-default button mb-0" tabindex = "-1" > Default Button size< / button >
2019-06-05 00:26:09 +02:00
< / 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" >
2019-06-13 16:47:00 +02:00
< label for = "control-header-border-top" > Top< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-header-border-top" class = "control-header-border-top mr-3" type = "range" min = "0" max = "60" value = "0" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-header-border-top-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-06-05 00:26:09 +02:00
< / div >
< hr >
< div class = "input-wrap" >
2019-06-13 16:47:00 +02:00
< label for = "control-header-border-bottom" > Bottom< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-header-border-bottom" class = "control-header-border-bottom mr-3" type = "range" min = "0" max = "60" value = "0" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-header-border-bottom-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-06-05 00:26:09 +02:00
< / div >
< / div >
< / div >
2019-11-08 16:49:44 +01:00
< div class = "menu-item" >
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Position when scrolling< / h1 >
< / div >
< div class = "menu-item-form" >
< div class = "form-indent" >
< div class = "input-wrap" >
< input id = "control-header-position-sticky" class = "control-header-position-sticky" type = "radio" name = "control-header-position" value = "sticky" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-position-sticky" > < span class = "label-icon" > < / span > Sticky< / label >
2019-11-08 16:49:44 +01:00
< / div >
< p class = "control-header-position-sticky-helper form-helper small" > Header sticks to the page when scrolling up or down.< / p >
2019-11-11 14:23:13 +01:00
< div class = "input-wrap" >
< input id = "control-header-position-inline" class = "control-header-position-inline" type = "radio" name = "control-header-position" value = "inline" tabindex = "-1" >
< label for = "control-header-position-inline" > < span class = "label-icon" > < / span > Inline< / label >
< / div >
< p class = "control-header-position-inline-helper form-helper small" > Header moves inline with the content when scrolling up or down.< / p >
2019-11-08 16:49:44 +01:00
< / 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" >
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-07-16 13:40:39 +02:00
< input id = "control-header-shade-show" class = "control-header-shade-show" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-shade-show" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-shade-style-always" > < span class = "label-icon" > < / span > Always visible< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-07-15 14:48:47 +02:00
< p class = "control-header-shade-style-always-helper form-helper small" > Useful for when a Background Image is shown.< / p >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-header-shade-style-scroll" > < span class = "label-icon" > < / span > Visible on scroll< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-07-15 14:48:47 +02:00
< p class = "control-header-shade-style-scroll-helper form-helper small" > The page will not scroll if Bookmarks are not shown.< / p >
2019-04-26 14:48:37 +02:00
< hr >
< div class = "input-wrap" >
< label for = "control-header-shade-opacity" > Opacity< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-header-shade-opacity" class = "control-header-shade-opacity mr-3" type = "range" min = "0" max = "100" value = "0" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-header-shade-opacity-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-04-26 14:48:37 +02:00
< / div >
2019-06-13 16:47:00 +02:00
< hr >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-header-radius" class = "control-header-radius" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-header-radius" > < span class = "label-icon" > < / span > Corner radius< / label >
2019-06-13 16:47:00 +02:00
< / div >
2019-04-26 14:48:37 +02:00
< / 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-10-19 11:52:33 +02:00
< div class = "menu-content-area menu-content-area-groups is-hidden" >
< div class = "menu-item" >
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Names< / h1 >
< / div >
< div class = "menu-item-form" >
< div class = "input-wrap" >
< input id = "control-group-name-show" class = "control-group-name-show" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-group-name-show" > < span class = "label-icon" > < / span > Show< / label >
2019-10-19 11:52:33 +02:00
< / div >
< div class = "form-indent" >
< div class = "input-wrap" >
< label for = "control-group-name-size" > Name Size< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-group-name-size" class = "control-group-name-size mr-3" type = "range" min = "10" max = "500" value = "0" step = "10" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-group-name-size-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-10-19 11:52:33 +02:00
< / div >
< div class = "button-wrap" >
2019-11-11 14:23:13 +01:00
< button class = "control-group-name-size-default button mb-0" tabindex = "-1" > Default Name size< / button >
2019-10-19 11:52:33 +02:00
< / div >
< / div >
2019-10-25 02:21:42 +02:00
< hr >
2019-11-11 14:23:13 +01:00
< label class = "control-group-area-alignment-label" > Group name horizontal alignment< / label >
2019-10-25 02:21:42 +02:00
< div class = "form-grid-wrap" >
2019-11-07 12:09:40 +01:00
< div class = "form-grid form-grid-3x1 control-group-area-alignment-grid" >
2019-10-25 02:21:42 +02:00
< div class = "input-wrap" >
< input id = "control-group-area-alignment-left" class = "control-group-area-alignment-left" type = "radio" name = "control-group-area-alignment" value = "left" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-group-area-alignment-left" > < span class = "label-icon" > < / span > < span class = "sr-only" > Left< / span > < / label >
2019-10-25 02:21:42 +02:00
< / div >
< div class = "input-wrap" >
< input id = "control-group-area-alignment-center" class = "control-group-area-alignment-center" type = "radio" name = "control-group-area-alignment" value = "center" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-group-area-alignment-center" > < span class = "label-icon" > < / span > < span class = "sr-only" > Center< / span > < / label >
2019-10-25 02:21:42 +02:00
< / div >
< div class = "input-wrap" >
< input id = "control-group-area-alignment-right" class = "control-group-area-alignment-right" type = "radio" name = "control-group-area-alignment" value = "right" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-group-area-alignment-right" > < span class = "label-icon" > < / span > < span class = "sr-only" > Right< / span > < / label >
2019-10-25 02:21:42 +02:00
< / div >
< / div >
< / div >
< p class = "control-group-area-alignment-helper form-helper small" > Effects may not be visible if the Group Name is not shown.< / p >
2019-10-19 11:52:33 +02:00
< / div >
< / div >
2019-11-17 20:01:22 +01:00
< div class = "menu-item" >
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Order< / h1 >
< / div >
< div class = "menu-item-form" >
< div class = "input-wrap" >
< input id = "control-group-order-headerbody" class = "control-group-order-headerbody" type = "radio" name = "control-group-order" value = "headerbody" tabindex = "1" >
< label for = "control-group-order-headerbody" > < span class = "label-icon" > < / span > Group Name then Bookmarks< / label >
< / div >
< div class = "input-wrap" >
< input id = "control-group-order-bodyheader" class = "control-group-order-bodyheader" type = "radio" name = "control-group-order" value = "bodyheader" tabindex = "1" >
< label for = "control-group-order-bodyheader" > < span class = "label-icon" > < / span > Bookmarks then Group Name< / label >
< / div >
< / div >
< / div >
2019-10-22 01:35:03 +02:00
< div class = "menu-item" >
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Border< / h1 >
< / div >
< div class = "menu-item-form" >
< div class = "input-wrap" >
< label for = "control-group-border" > Between groups< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-group-border" class = "control-group-border mr-3" type = "range" min = "0" max = "60" value = "0" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-group-border-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-10-22 01:35:03 +02:00
< / div >
2019-10-22 09:12:38 +02:00
< p class = "control-link-area-width-helper form-helper small" > Border between groups may not be visible if there is only one group.< / p >
2019-10-22 01:35:03 +02:00
< / div >
< / div >
2019-10-19 11:52:33 +02:00
< / div >
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 20:08:15 +02:00
< div class = "input-wrap" >
2019-05-23 20:15:14 +02:00
< label for = "control-link-area-width" > Width< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-link-area-width" class = "control-link-area-width mr-3" type = "range" min = "10" max = "100" value = "0" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-link-area-width-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-05-23 20:15:14 +02:00
< / div >
2019-07-15 14:48:47 +02:00
< p class = "control-link-area-width-helper form-helper small" > Max width is defined by Layout Area Width.< / p >
2019-05-23 20:15:14 +02:00
< div class = "button-wrap" >
2019-07-16 13:40:39 +02:00
< button class = "control-link-area-width-match button mb-0" tabindex = "-1" > Match Header Area< / button >
2019-05-23 20:15:14 +02:00
< / div >
< hr >
2019-11-11 14:23:13 +01:00
< label class = "control-link-area-alignment-label" > Horizontal alignment< / label >
2019-06-30 19:37:05 +02:00
< div class = "form-grid-wrap" >
2019-11-07 12:09:40 +01:00
< div class = "form-grid form-grid-3x1 control-link-area-alignment-grid" >
2019-06-30 19:37:05 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-link-area-alignment-left" class = "control-link-area-alignment-left" type = "radio" name = "control-link-area-alignment" value = "left" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-link-area-alignment-left" > < span class = "label-icon" > < / span > < span class = "sr-only" > Left< / span > < / label >
2019-06-30 19:37:05 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-link-area-alignment-center" class = "control-link-area-alignment-center" type = "radio" name = "control-link-area-alignment" value = "center" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-link-area-alignment-center" > < span class = "label-icon" > < / span > < span class = "sr-only" > Center< / span > < / label >
2019-06-30 19:37:05 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-link-area-alignment-right" class = "control-link-area-alignment-right" type = "radio" name = "control-link-area-alignment" value = "right" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-link-area-alignment-right" > < span class = "label-icon" > < / span > < span class = "sr-only" > Right< / span > < / label >
2019-06-30 19:37:05 +02:00
< / div >
< / div >
2019-05-23 20:15:14 +02:00
< / div >
2019-07-15 14:48:47 +02:00
< p class = "control-link-area-alignment-helper form-helper small" > Effects may not be visible if the Bookmark Area is full width.< / p >
2019-05-23 20:15:14 +02:00
< / 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-07-16 13:40:39 +02:00
< input id = "control-link-show" class = "control-link-show" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-link-show" > < span class = "label-icon" > < / span > 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" >
2019-11-11 14:23:13 +01:00
< label for = "control-link-item-size" > Bookmark Size< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-link-item-size" class = "control-link-item-size mr-3" type = "range" min = "50" max = "500" value = "0" step = "10" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-link-item-size-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-06-06 19:22:42 +02:00
< / div >
< div class = "button-wrap" >
2019-11-11 14:23:13 +01:00
< button class = "control-link-item-size-default button mb-0" tabindex = "-1" > Default Bookmark size< / button >
2019-06-06 19:22:42 +02:00
< / div >
< hr >
2019-11-11 14:23:13 +01:00
< label class = "control-link-item-display-alignment-label" > Content alignment< / label >
2019-07-01 22:46:50 +02:00
< div class = "form-grid-wrap" >
2019-11-07 12:09:40 +01:00
< div class = "form-grid form-grid-3x3 control-link-item-display-alignment-grid" >
2019-07-01 22:46:50 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-link-item-display-alignment-topleft" class = "control-link-item-display-alignment-topleft" type = "radio" name = "control-link-item-display-alignment" value = "topleft" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-link-item-display-alignment-topleft" > < span class = "label-icon" > < / span > < span class = "sr-only" > Top left< / span > < / label >
2019-07-01 22:46:50 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-link-item-display-alignment-topcenter" class = "control-link-item-display-alignment-topcenter" type = "radio" name = "control-link-item-display-alignment" value = "topcenter" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-link-item-display-alignment-topcenter" > < span class = "label-icon" > < / span > < span class = "sr-only" > Top center< / span > < / label >
2019-07-01 22:46:50 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-link-item-display-alignment-topright" class = "control-link-item-display-alignment-topright" type = "radio" name = "control-link-item-display-alignment" value = "topright" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-link-item-display-alignment-topright" > < span class = "label-icon" > < / span > < span class = "sr-only" > Top right< / span > < / label >
2019-07-01 22:46:50 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-link-item-display-alignment-centerleft" class = "control-link-item-display-alignment-centerleft" type = "radio" name = "control-link-item-display-alignment" value = "centerleft" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-link-item-display-alignment-centerleft" > < span class = "label-icon" > < / span > < span class = "sr-only" > Center left< / span > < / label >
2019-07-01 22:46:50 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-link-item-display-alignment-centercenter" class = "control-link-item-display-alignment-centercenter" type = "radio" name = "control-link-item-display-alignment" value = "centercenter" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-link-item-display-alignment-centercenter" > < span class = "label-icon" > < / span > < span class = "sr-only" > Center center< / span > < / label >
2019-07-01 22:46:50 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-link-item-display-alignment-centerright" class = "control-link-item-display-alignment-centerright" type = "radio" name = "control-link-item-display-alignment" value = "centerright" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-link-item-display-alignment-centerright" > < span class = "label-icon" > < / span > < span class = "sr-only" > Center right< / span > < / label >
2019-07-01 22:46:50 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-link-item-display-alignment-bottomleft" class = "control-link-item-display-alignment-bottomleft" type = "radio" name = "control-link-item-display-alignment" value = "bottomleft" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-link-item-display-alignment-bottomleft" > < span class = "label-icon" > < / span > < span class = "sr-only" > Bottom left< / span > < / label >
2019-07-01 22:46:50 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-link-item-display-alignment-bottomcenter" class = "control-link-item-display-alignment-bottomcenter" type = "radio" name = "control-link-item-display-alignment" value = "bottomcenter" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-link-item-display-alignment-bottomcenter" > < span class = "label-icon" > < / span > < span class = "sr-only" > Bottom Center< / span > < / label >
2019-07-01 22:46:50 +02:00
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-link-item-display-alignment-bottomright" class = "control-link-item-display-alignment-bottomright" type = "radio" name = "control-link-item-display-alignment" value = "bottomright" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-link-item-display-alignment-bottomright" > < span class = "label-icon" > < / span > < span class = "sr-only" > Bottom right< / span > < / label >
2019-07-01 22:46:50 +02:00
< / div >
< / div >
2019-11-24 13:24:02 +01:00
< hr >
< div class = "input-wrap" >
2019-12-04 00:16:24 +01:00
< label for = "control-link-item-display-rotate" > Content rotation< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-link-item-display-rotate" class = "control-link-item-display-rotate mr-3" type = "range" min = "-180" max = "180" value = "0" step = "5" tabindex = "1" >
2019-12-22 16:15:02 +01:00
< div class = "control-link-item-display-rotate-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-11-24 13:24:02 +01:00
< / div >
< div class = "button-wrap" >
< button class = "control-link-item-display-rotate-default button mb-0" tabindex = "-1" > Default rotation< / button >
< / div >
< hr >
< div class = "input-wrap" >
2019-12-04 00:16:24 +01:00
< label for = "control-link-item-display-translate-x" > Content horizontally offset< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-link-item-display-translate-x" class = "control-link-item-display-translate-x mr-3" type = "range" min = "-1000" max = "1000" value = "0" step = "10" tabindex = "1" >
2019-12-22 16:15:02 +01:00
< div class = "control-link-item-display-translate-x-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-11-24 13:24:02 +01:00
< / div >
< div class = "button-wrap" >
< button class = "control-link-item-display-translate-x-default button mb-0" tabindex = "-1" > Default horizontal translate< / button >
< / div >
< hr >
< div class = "input-wrap" >
2019-12-04 00:16:24 +01:00
< label for = "control-link-item-display-translate-y" > Content vertically offset< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-link-item-display-translate-y" class = "control-link-item-display-translate-y mr-3" type = "range" min = "-1000" max = "1000" value = "0" step = "10" tabindex = "1" >
2019-12-22 16:15:02 +01:00
< div class = "control-link-item-display-translate-y-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-11-24 13:24:02 +01:00
< / div >
< div class = "button-wrap" >
< button class = "control-link-item-display-translate-y-default button mb-0" tabindex = "-1" > Default vertical translate< / button >
< / div >
2019-12-04 00:16:24 +01:00
< hr >
< div class = "input-wrap" >
< label for = "control-link-item-display-gutter" > Content gutter< / label >
< div class = "form-group form-group-block mb-0" >
< input id = "control-link-item-display-gutter" class = "control-link-item-display-gutter mr-3" type = "range" min = "0" max = "40" value = "0" tabindex = "1" >
2019-12-22 16:15:02 +01:00
< div class = "control-link-item-display-gutter-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-12-04 00:16:24 +01:00
< / div >
< / div >
< div class = "button-wrap" >
2019-12-05 10:59:54 +01:00
< button class = "control-link-item-display-gutter-default button mb-0" tabindex = "-1" > Default content gutter< / button >
2019-12-04 00:16:24 +01:00
< / div >
2019-07-01 22:46:50 +02:00
< / div >
< hr >
2019-11-26 08:48:07 +01:00
< div class = "input-wrap" >
< input id = "control-link-item-display-direction-horizontal" class = "control-link-item-display-direction-horizontal" type = "radio" name = "control-link-item-display-direction" value = "horizontal" tabindex = "-1" >
< label for = "control-link-item-display-direction-horizontal" > < span class = "label-icon" > < / span > Align contents horizontally< / label >
< / div >
< div class = "input-wrap" >
< input id = "control-link-item-display-direction-vertical" class = "control-link-item-display-direction-vertical" type = "radio" name = "control-link-item-display-direction" value = "vertical" tabindex = "-1" >
< label for = "control-link-item-display-direction-vertical" > < span class = "label-icon" > < / span > Align contents vertically< / label >
< / div >
2019-12-03 19:30:09 +01:00
< p class = "control-link-item-display-direction-helper form-helper small" > Only available when Letter/Icon and Name are shown.< / p >
2019-11-26 08:48:07 +01:00
< p class = "control-link-item-display-direction-helper form-helper small" > Vertical alignment works well with Bookmark Block Style.< / p >
< p class = "control-link-item-display-direction-helper form-helper small" > Horizontal alignment works well with Bookmark List Style.< / p >
< hr >
< div class = "input-wrap" >
< input id = "control-link-item-display-order-letconname" class = "control-link-item-display-order-letconname" type = "radio" name = "control-link-item-display-order" value = "letconname" tabindex = "-1" >
< label for = "control-link-item-display-order-letconname" > < span class = "label-icon" > < / span > Order Letter/Icon then Name< / label >
< / div >
< div class = "input-wrap" >
< input id = "control-link-item-display-order-nameletcon" class = "control-link-item-display-order-nameletcon" type = "radio" name = "control-link-item-display-order" value = "nameletcon" tabindex = "-1" >
< label for = "control-link-item-display-order-nameletcon" > < span class = "label-icon" > < / span > Order Name then Letter/Icon< / label >
< / div >
2019-12-03 19:30:09 +01:00
< p class = "control-link-item-display-order-helper form-helper small" > Only available when Letter/Icon and Name are shown.< / p >
2019-11-26 08:48:07 +01:00
< hr >
2019-06-06 19:22:42 +02:00
< div class = "input-wrap" >
2019-11-24 13:24:02 +01:00
< input id = "control-link-item-display-letcon-show" class = "control-link-item-display-letcon-show" type = "checkbox" tabindex = "-1" >
< label for = "control-link-item-display-letcon-show" > < span class = "label-icon" > < / span > Letter/Icon< / label >
2019-06-04 17:14:04 +02:00
< / div >
< div class = "form-indent" >
< div class = "input-wrap" >
2019-11-24 13:24:02 +01:00
< label for = "control-link-item-display-letcon-letter-size" > Letter size< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-link-item-display-letcon-letter-size" class = "control-link-item-display-letcon-letter-size mr-3" type = "range" min = "10" max = "3000" step = "10" value = "0" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-link-item-display-letcon-letter-size-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-06-06 19:22:42 +02:00
< / div >
< div class = "button-wrap" >
2019-11-24 13:24:02 +01:00
< button class = "control-link-item-display-letcon-letter-size-default button mb-0" tabindex = "-1" > Default Letter size< / button >
2019-06-04 17:14:04 +02:00
< / div >
2019-06-06 19:22:42 +02:00
< hr >
2019-06-04 17:14:04 +02:00
< div class = "input-wrap" >
2019-11-24 13:24:02 +01:00
< label for = "control-link-item-display-letcon-icon-size" > Icon size< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-link-item-display-letcon-icon-size" class = "control-link-item-display-letcon-icon-size mr-3" type = "range" min = "10" max = "3000" step = "10" value = "0" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-link-item-display-letcon-icon-size-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-06-06 19:22:42 +02:00
< / div >
< div class = "button-wrap" >
2019-11-24 13:24:02 +01:00
< button class = "control-link-item-display-letcon-icon-size-default button mb-0" tabindex = "-1" > Default Icon size< / button >
2019-06-04 17:14:04 +02:00
< / div >
< / div >
2019-06-04 20:08:15 +02:00
< hr >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-11-24 13:24:02 +01:00
< input id = "control-link-item-display-name-show" class = "control-link-item-display-name-show" type = "checkbox" tabindex = "-1" >
< label for = "control-link-item-display-name-show" > < span class = "label-icon" > < / span > Name< / label >
2019-06-06 19:22:42 +02:00
< div class = "form-indent" >
< div class = "input-wrap" >
2019-11-24 13:24:02 +01:00
< label for = "control-link-item-display-name-size" > Name size< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-link-item-display-name-size" class = "control-link-item-display-name-size mr-3" type = "range" min = "10" max = "3000" step = "10" value = "0" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-link-item-display-name-size-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-06-06 19:22:42 +02:00
< / div >
< div class = "button-wrap" >
2019-11-24 13:24:02 +01:00
< button class = "control-link-item-display-name-size-default button mb-0" tabindex = "-1" > Default Name size< / button >
2019-06-06 19:22:42 +02:00
< / div >
< / div >
2019-04-26 14:48:37 +02:00
< / div >
2019-07-03 13:05:10 +02:00
< hr >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-link-item-url-show" class = "control-link-item-url-show" type = "checkbox" tabindex = "-1" >
2019-11-11 14:23:13 +01:00
< label for = "control-link-item-url-show" > < span class = "label-icon" > < / span > Show URL on Bookmark hover< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-06-06 20:06:47 +02:00
< hr >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-link-item-line-show" class = "control-link-item-line-show" type = "checkbox" tabindex = "-1" >
2019-11-28 15:24:05 +01:00
< label for = "control-link-item-line-show" > < span class = "label-icon" > < / span > Show Bookmark line< / label >
2019-06-15 12:57:53 +02:00
< / div >
< hr >
2019-09-11 18:12:08 +02:00
< div class = "input-wrap" >
< input id = "control-link-item-shadow-show" class = "control-link-item-shadow-show" type = "checkbox" tabindex = "-1" >
2019-11-28 15:24:05 +01:00
< label for = "control-link-item-shadow-show" > < span class = "label-icon" > < / span > Show shadow on Bookmark hover< / label >
2019-09-11 18:12:08 +02:00
< / div >
< hr >
2019-06-15 12:57:53 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-link-item-hoverscale" class = "control-link-item-hoverscale" type = "checkbox" tabindex = "-1" >
2019-11-28 15:24:05 +01:00
< label for = "control-link-item-hoverscale" > < span class = "label-icon" > < / span > Grow on Bookmark hover< / label >
2019-06-06 20:06:47 +02:00
< / div >
2019-05-23 20:15:14 +02:00
< hr >
2019-07-01 22:46:50 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-link-newtab" class = "control-link-newtab" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-link-newtab" > < span class = "label-icon" > < / span > Open Bookmarks in a new tab< / label >
2019-04-26 14:48:37 +02:00
< / div >
< / div >
2019-01-24 21:28:11 +01:00
< / div >
< / div >
2019-12-23 02:38:07 +01:00
< div class = "menu-item" >
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Background colour< / h1 >
< / div >
< div class = "menu-item-form" >
< div class = "input-wrap" >
< input id = "control-link-item-color-by-theme" class = "control-link-item-color-by-theme" type = "radio" name = "control-link-item-color-by" value = "theme" tabindex = "-1" >
< label for = "control-link-item-color-by-theme" > < span class = "label-icon" > < / span > Theme background colour< / label >
< / div >
< p class = "control-link-item-color-by-theme-helper form-helper small" > Use the Background colour defined by the Theme.< / p >
< div class = "input-wrap" >
< input id = "control-link-item-color-by-custom" class = "control-link-item-color-by-custom" type = "radio" name = "control-link-item-color-by" value = "custom" tabindex = "-1" >
< label for = "control-link-item-color-by-custom" > < span class = "label-icon" > < / span > Custom background colour< / label >
< / div >
< p class = "control-link-item-color-by-custom-helper form-helper small" > Use a custom Background colour.< / p >
< p class = "control-link-item-color-by-custom-helper form-helper small" > Take care as some colours may make the Letter/Icon and Name unreadable.< / p >
< div class = "form-indent" >
< div class = "input-wrap" >
< div class = "form-group form-group-block mb-0" >
< input id = "control-link-item-color-by-picker" class = "form-group-item-half control-link-item-color-by-picker mb-0" type = "color" value = "#000000" tabindex = "1" >
< input id = "control-link-item-color-by-hex" class = "form-group-item-half control-link-item-color-by-hex mb-0" type = "text" placeholder = "Hex code" value = "#000000" tabindex = "1" maxlength = "7" autocomplete = "off" autocorrect = "off" autocapitalize = "off" spellcheck = "false" >
< / div >
< / div >
< / div >
< / div >
< / div >
2019-09-03 16:32:39 +02:00
< div class = "menu-item" >
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Border< / h1 >
< / div >
< div class = "menu-item-form" >
< div class = "input-wrap" >
< label for = "control-link-item-border" > All sides< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-link-item-border" class = "control-link-item-border mr-3" type = "range" min = "0" max = "40" value = "0" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-link-item-border-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-09-03 16:32:39 +02:00
< / div >
< / 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" > Style< / h1 >
< / div >
< div class = "menu-item-form" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-link-style-block" class = "control-link-style-block" type = "radio" name = "control-link-style" value = "block" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-link-style-block" > < span class = "label-icon" > < / span > Block< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-11-25 01:34:26 +01:00
< p class = "control-link-style-block-helper form-helper small" > Bookmark tiles more square shaped.< / p >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-link-style-list" class = "control-link-style-list" type = "radio" name = "control-link-style" value = "list" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-link-style-list" > < span class = "label-icon" > < / span > List< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-11-25 01:34:26 +01:00
< p class = "control-link-style-list-helper form-helper small" > Bookmark tiles more short and wide.< / p >
2019-01-04 17:24:05 +01:00
< / div >
< / div >
2019-09-11 13:06:56 +02:00
< div class = "menu-item" >
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Orientation< / h1 >
< / div >
< div class = "menu-item-form" >
< div class = "input-wrap" >
< input id = "control-link-orientation-top" class = "control-link-orientation-top" type = "radio" name = "control-link-orientation" value = "top" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-link-orientation-top" > < span class = "label-icon" > < / span > Top< / label >
2019-09-11 13:06:56 +02:00
< / div >
< div class = "input-wrap" >
< input id = "control-link-orientation-bottom" class = "control-link-orientation-bottom" type = "radio" name = "control-link-orientation" value = "bottom" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-link-orientation-bottom" > < span class = "label-icon" > < / span > Bottom< / label >
2019-09-11 13:06:56 +02:00
< / div >
2019-11-25 01:34:26 +01:00
< p class = "control-link-orientation-helper form-helper small" > Display the URL and Controls either at the top of bottom of a Bookmark Tile.< / p >
2019-09-11 13:06:56 +02: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" > Sort< / h1 >
< / div >
< div class = "menu-item-form" >
2019-12-29 04:38:02 +01:00
< div class = "form-inline" >
< div class = "button-wrap" >
< button class = "control-link-sort-letter button mb-0" tabindex = "-1" > By Letter< / button >
< / div >
< div class = "button-wrap" >
< button class = "control-link-sort-icon button mb-0" tabindex = "-1" > By Icon< / button >
< / div >
< div class = "button-wrap" >
< button class = "control-link-sort-name button mb-0" tabindex = "-1" > By Name< / button >
< / div >
2019-05-11 09:33:19 +02:00
< / div >
2019-01-04 17:24:05 +01:00
< / div >
< / div >
2019-06-26 12:35:51 +02:00
< div class = "menu-item" >
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Accent override< / h1 >
< / div >
< div class = "menu-item-form" >
2019-12-29 04:38:02 +01:00
< div class = "button-wrap" >
2019-07-16 13:40:39 +02:00
< button class = "control-link-accent-clear button mb-0" tabindex = "-1" > Remove all override colours< / button >
2019-06-26 12:35:51 +02:00
< / div >
2019-11-11 14:23:13 +01:00
< hr >
2019-12-29 04:38:02 +01:00
< div class = "button-wrap" >
2019-11-11 14:23:13 +01:00
< button class = "control-link-accent-set button mb-0" tabindex = "-1" > Add override colours< / button >
2019-06-26 12:35:51 +02:00
< / div >
2019-11-11 14:23:13 +01:00
< p class = "control-link-accent-set-helper form-helper small" > Adds a unique override colour to each Bookmark.< / p >
2019-06-26 12:35:51 +02:00
< / div >
< / div >
2019-01-04 17:24:05 +01:00
< / 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" >
2019-12-24 02:24:43 +01:00
< div class = "menu-item" >
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Presets< / h1 >
< / div >
< div class = "menu-item-form" >
2019-12-29 04:38:02 +01:00
< div class = "form-inline" >
< div class = "button-wrap" >
< button class = "control-theme-preset-nighttab theme-preset-button button mb-0" tabindex = "-1" >
< div class = "theme-preset-preview" >
< span class = "theme-preset-background-01 theme-preset-background-nighttab-01" > < / span >
< span class = "theme-preset-background-02 theme-preset-background-nighttab-02" > < / span >
< span class = "theme-preset-background-03 theme-preset-background-nighttab-03" > < / span >
< span class = "theme-preset-background-04 theme-preset-background-nighttab-04" > < / span >
< span class = "theme-preset-accent theme-preset-accent-nighttab" > < / span >
< span class = "theme-preset-font theme-preset-font-nighttab" >
< span class = "theme-preset-font-display theme-preset-font-display-nighttab" > nightTab< / span >
< span class = "theme-preset-font-ui theme-preset-font-ui-nighttab" > ABC 123< / span >
< / span >
< / div >
< / button >
< / div >
< div class = "button-wrap" >
< button class = "control-theme-preset-midnight theme-preset-button button mb-0" tabindex = "-1" >
< div class = "theme-preset-preview" >
< span class = "theme-preset-background-01 theme-preset-background-midnight-01" > < / span >
< span class = "theme-preset-background-02 theme-preset-background-midnight-02" > < / span >
< span class = "theme-preset-background-03 theme-preset-background-midnight-03" > < / span >
< span class = "theme-preset-background-04 theme-preset-background-midnight-04" > < / span >
< span class = "theme-preset-accent theme-preset-accent-midnight" > < / span >
< span class = "theme-preset-font theme-preset-font-midnight" >
< span class = "theme-preset-font-display theme-preset-font-display-midnight" > Midnight< / span >
< span class = "theme-preset-font-ui theme-preset-font-ui-midnight" > ABC 123< / span >
< / span >
< / div >
< / button >
< / div >
< div class = "button-wrap" >
2019-12-29 16:50:05 +01:00
< button class = "control-theme-preset-pym theme-preset-button button mb-0" tabindex = "-1" >
2019-12-29 04:38:02 +01:00
< div class = "theme-preset-preview" >
2019-12-29 16:50:05 +01:00
< span class = "theme-preset-background-01 theme-preset-background-pym-01" > < / span >
< span class = "theme-preset-background-02 theme-preset-background-pym-02" > < / span >
< span class = "theme-preset-background-03 theme-preset-background-pym-03" > < / span >
< span class = "theme-preset-background-04 theme-preset-background-pym-04" > < / span >
< span class = "theme-preset-accent theme-preset-accent-pym" > < / span >
< span class = "theme-preset-font theme-preset-font-pym" >
< span class = "theme-preset-font-display theme-preset-font-display-pym" > Pym< / span >
< span class = "theme-preset-font-ui theme-preset-font-ui-pym" > ABC 123< / span >
< / span >
< / div >
< / button >
< / div >
< div class = "button-wrap" >
< button class = "control-theme-preset-cruiser theme-preset-button button mb-0" tabindex = "-1" >
< div class = "theme-preset-preview" >
< span class = "theme-preset-background-01 theme-preset-background-cruiser-01" > < / span >
< span class = "theme-preset-background-02 theme-preset-background-cruiser-02" > < / span >
< span class = "theme-preset-background-03 theme-preset-background-cruiser-03" > < / span >
< span class = "theme-preset-background-04 theme-preset-background-cruiser-04" > < / span >
< span class = "theme-preset-accent theme-preset-accent-cruiser" > < / span >
< span class = "theme-preset-font theme-preset-font-cruiser" >
< span class = "theme-preset-font-display theme-preset-font-display-cruiser" > Cruiser< / span >
< span class = "theme-preset-font-ui theme-preset-font-ui-cruiser" > ABC 123< / span >
2019-12-29 04:38:02 +01:00
< / span >
< / div >
< / button >
< / div >
< div class = "button-wrap" >
< button class = "control-theme-preset-sharpmint theme-preset-button button mb-0" tabindex = "-1" >
< div class = "theme-preset-preview" >
< span class = "theme-preset-background-01 theme-preset-background-sharpmint-01" > < / span >
< span class = "theme-preset-background-02 theme-preset-background-sharpmint-02" > < / span >
< span class = "theme-preset-background-03 theme-preset-background-sharpmint-03" > < / span >
< span class = "theme-preset-background-04 theme-preset-background-sharpmint-04" > < / span >
< span class = "theme-preset-accent theme-preset-accent-sharpmint" > < / span >
< span class = "theme-preset-font theme-preset-font-sharpmint" >
< span class = "theme-preset-font-display theme-preset-font-display-sharpmint" > Sharp Mint< / span >
< span class = "theme-preset-font-ui theme-preset-font-ui-sharpmint" > ABC 123< / span >
< / span >
< / div >
< / button >
< / div >
< div class = "button-wrap" >
2019-12-29 16:50:05 +01:00
< button class = "control-theme-preset-snowglow theme-preset-button button mb-0" tabindex = "-1" >
2019-12-29 04:38:02 +01:00
< div class = "theme-preset-preview" >
2019-12-29 16:50:05 +01:00
< span class = "theme-preset-background-01 theme-preset-background-snowglow-01" > < / span >
< span class = "theme-preset-background-02 theme-preset-background-snowglow-02" > < / span >
< span class = "theme-preset-background-03 theme-preset-background-snowglow-03" > < / span >
< span class = "theme-preset-background-04 theme-preset-background-snowglow-04" > < / span >
< span class = "theme-preset-accent theme-preset-accent-snowglow" > < / span >
< span class = "theme-preset-font theme-preset-font-snowglow" >
< span class = "theme-preset-font-display theme-preset-font-display-snowglow" > Snow Glow< / span >
< span class = "theme-preset-font-ui theme-preset-font-ui-snowglow" > ABC 123< / span >
2019-12-29 04:38:02 +01:00
< / span >
< / div >
< / button >
< / div >
< div class = "button-wrap" >
2019-12-29 16:50:05 +01:00
< button class = "control-theme-preset-rumble theme-preset-button button mb-0" tabindex = "-1" >
2019-12-29 04:38:02 +01:00
< div class = "theme-preset-preview" >
2019-12-29 16:50:05 +01:00
< span class = "theme-preset-background-01 theme-preset-background-rumble-01" > < / span >
< span class = "theme-preset-background-02 theme-preset-background-rumble-02" > < / span >
< span class = "theme-preset-background-03 theme-preset-background-rumble-03" > < / span >
< span class = "theme-preset-background-04 theme-preset-background-rumble-04" > < / span >
< span class = "theme-preset-accent theme-preset-accent-rumble" > < / span >
< span class = "theme-preset-font theme-preset-font-rumble" >
< span class = "theme-preset-font-display theme-preset-font-display-rumble" > Rumble< / span >
< span class = "theme-preset-font-ui theme-preset-font-ui-rumble" > ABC 123< / span >
2019-12-29 04:38:02 +01:00
< / span >
< / div >
< / button >
< / div >
< div class = "button-wrap" >
2019-12-29 16:50:05 +01:00
< button class = "control-theme-preset-sollight theme-preset-button button mb-0" tabindex = "-1" >
2019-12-29 04:38:02 +01:00
< div class = "theme-preset-preview" >
2019-12-29 16:50:05 +01:00
< span class = "theme-preset-background-01 theme-preset-background-sollight-01" > < / span >
< span class = "theme-preset-background-02 theme-preset-background-sollight-02" > < / span >
< span class = "theme-preset-background-03 theme-preset-background-sollight-03" > < / span >
< span class = "theme-preset-background-04 theme-preset-background-sollight-04" > < / span >
< span class = "theme-preset-accent theme-preset-accent-sollight" > < / span >
< span class = "theme-preset-font theme-preset-font-sollight" >
< span class = "theme-preset-font-display theme-preset-font-display-sollight" > Sol Light< / span >
< span class = "theme-preset-font-ui theme-preset-font-ui-sollight" > ABC 123< / span >
2019-12-29 04:38:02 +01:00
< / span >
< / div >
< / button >
< / div >
< div class = "button-wrap" >
2019-12-29 16:50:05 +01:00
< button class = "control-theme-preset-artdeco theme-preset-button button mb-0" tabindex = "-1" >
2019-12-29 04:38:02 +01:00
< div class = "theme-preset-preview" >
2019-12-29 16:50:05 +01:00
< span class = "theme-preset-background-01 theme-preset-background-artdeco-01" > < / span >
< span class = "theme-preset-background-02 theme-preset-background-artdeco-02" > < / span >
< span class = "theme-preset-background-03 theme-preset-background-artdeco-03" > < / span >
< span class = "theme-preset-background-04 theme-preset-background-artdeco-04" > < / span >
< span class = "theme-preset-accent theme-preset-accent-artdeco" > < / span >
< span class = "theme-preset-font theme-preset-font-artdeco" >
< span class = "theme-preset-font-display theme-preset-font-display-artdeco" > Art Deco< / span >
< span class = "theme-preset-font-ui theme-preset-font-ui-artdeco" > ABC 123< / span >
2019-12-29 04:38:02 +01:00
< / span >
< / div >
< / button >
< / div >
< div class = "button-wrap" >
2019-12-29 16:50:05 +01:00
< button class = "control-theme-preset-macaroon theme-preset-button button mb-0" tabindex = "-1" >
2019-12-29 04:38:02 +01:00
< div class = "theme-preset-preview" >
2019-12-29 16:50:05 +01:00
< span class = "theme-preset-background-01 theme-preset-background-macaroon-01" > < / span >
< span class = "theme-preset-background-02 theme-preset-background-macaroon-02" > < / span >
< span class = "theme-preset-background-03 theme-preset-background-macaroon-03" > < / span >
< span class = "theme-preset-background-04 theme-preset-background-macaroon-04" > < / span >
< span class = "theme-preset-accent theme-preset-accent-macaroon" > < / span >
< span class = "theme-preset-font theme-preset-font-macaroon" >
< span class = "theme-preset-font-display theme-preset-font-display-macaroon" > Macaroon< / span >
< span class = "theme-preset-font-ui theme-preset-font-ui-macaroon" > ABC 123< / span >
2019-12-29 04:38:02 +01:00
< / span >
< / div >
< / button >
< / div >
< div class = "button-wrap" >
< button class = "control-theme-preset-hotpepper theme-preset-button button mb-0" tabindex = "-1" >
< div class = "theme-preset-preview" >
< span class = "theme-preset-background-01 theme-preset-background-hotpepper-01" > < / span >
< span class = "theme-preset-background-02 theme-preset-background-hotpepper-02" > < / span >
< span class = "theme-preset-background-03 theme-preset-background-hotpepper-03" > < / span >
< span class = "theme-preset-background-04 theme-preset-background-hotpepper-04" > < / span >
< span class = "theme-preset-accent theme-preset-accent-hotpepper" > < / span >
< span class = "theme-preset-font theme-preset-font-hotpepper" >
< span class = "theme-preset-font-display theme-preset-font-display-hotpepper" > Hot Pepper< / span >
< span class = "theme-preset-font-ui theme-preset-font-ui-hotpepper" > ABC 123< / span >
< / span >
< / div >
< / button >
< / div >
< div class = "button-wrap" >
2019-12-29 16:50:05 +01:00
< button class = "control-theme-preset-steel theme-preset-button button mb-0" tabindex = "-1" >
2019-12-29 04:38:02 +01:00
< div class = "theme-preset-preview" >
2019-12-29 16:50:05 +01:00
< span class = "theme-preset-background-01 theme-preset-background-steel-01" > < / span >
< span class = "theme-preset-background-02 theme-preset-background-steel-02" > < / span >
< span class = "theme-preset-background-03 theme-preset-background-steel-03" > < / span >
< span class = "theme-preset-background-04 theme-preset-background-steel-04" > < / span >
< span class = "theme-preset-accent theme-preset-accent-steel" > < / span >
< span class = "theme-preset-font theme-preset-font-steel" >
< span class = "theme-preset-font-display theme-preset-font-display-steel" > Steel< / span >
< span class = "theme-preset-font-ui theme-preset-font-ui-steel" > ABC 123< / span >
2019-12-29 04:38:02 +01:00
< / span >
< / div >
< / button >
< / div >
< div class = "button-wrap" >
< button class = "control-theme-preset-outrun theme-preset-button button mb-0" tabindex = "-1" >
< div class = "theme-preset-preview" >
< span class = "theme-preset-background-01 theme-preset-background-outrun-01" > < / span >
< span class = "theme-preset-background-02 theme-preset-background-outrun-02" > < / span >
< span class = "theme-preset-background-03 theme-preset-background-outrun-03" > < / span >
< span class = "theme-preset-background-04 theme-preset-background-outrun-04" > < / span >
< span class = "theme-preset-accent theme-preset-accent-outrun" > < / span >
< span class = "theme-preset-font theme-preset-font-outrun" >
< span class = "theme-preset-font-display theme-preset-font-display-outrun" > Outrun< / span >
< span class = "theme-preset-font-ui theme-preset-font-ui-outrun" > ABC 123< / span >
< / span >
< / div >
< / button >
< / div >
< div class = "button-wrap" >
< button class = "control-theme-preset-pumpkin theme-preset-button button mb-0" tabindex = "-1" >
< div class = "theme-preset-preview" >
< span class = "theme-preset-background-01 theme-preset-background-pumpkin-01" > < / span >
< span class = "theme-preset-background-02 theme-preset-background-pumpkin-02" > < / span >
< span class = "theme-preset-background-03 theme-preset-background-pumpkin-03" > < / span >
< span class = "theme-preset-background-04 theme-preset-background-pumpkin-04" > < / span >
< span class = "theme-preset-accent theme-preset-accent-pumpkin" > < / span >
< span class = "theme-preset-font theme-preset-font-pumpkin" >
< span class = "theme-preset-font-display theme-preset-font-display-pumpkin" > Pumpkin< / span >
< span class = "theme-preset-font-ui theme-preset-font-ui-pumpkin" > ABC 123< / span >
< / span >
< / div >
< / button >
< / div >
< div class = "button-wrap" >
2019-12-29 16:50:05 +01:00
< button class = "control-theme-preset-bubblegum theme-preset-button button mb-0" tabindex = "-1" >
2019-12-29 04:38:02 +01:00
< div class = "theme-preset-preview" >
2019-12-29 16:50:05 +01:00
< span class = "theme-preset-background-01 theme-preset-background-bubblegum-01" > < / span >
< span class = "theme-preset-background-02 theme-preset-background-bubblegum-02" > < / span >
< span class = "theme-preset-background-03 theme-preset-background-bubblegum-03" > < / span >
< span class = "theme-preset-background-04 theme-preset-background-bubblegum-04" > < / span >
< span class = "theme-preset-accent theme-preset-accent-bubblegum" > < / span >
< span class = "theme-preset-font theme-preset-font-bubblegum" >
< span class = "theme-preset-font-display theme-preset-font-display-bubblegum" > Bubble Gum< / span >
< span class = "theme-preset-font-ui theme-preset-font-ui-bubblegum" > ABC 123< / span >
2019-12-29 04:38:02 +01:00
< / span >
< / div >
< / button >
< / div >
< div class = "button-wrap" >
2019-12-29 16:50:05 +01:00
< button class = "control-theme-preset-elderbean theme-preset-button button mb-0" tabindex = "-1" >
2019-12-28 05:49:59 +01:00
< div class = "theme-preset-preview" >
2019-12-29 16:50:05 +01:00
< span class = "theme-preset-background-01 theme-preset-background-elderbean-01" > < / span >
< span class = "theme-preset-background-02 theme-preset-background-elderbean-02" > < / span >
< span class = "theme-preset-background-03 theme-preset-background-elderbean-03" > < / span >
< span class = "theme-preset-background-04 theme-preset-background-elderbean-04" > < / span >
< span class = "theme-preset-accent theme-preset-accent-elderbean" > < / span >
< span class = "theme-preset-font theme-preset-font-elderbean" >
< span class = "theme-preset-font-display theme-preset-font-display-elderbean" > Elder Bean< / span >
< span class = "theme-preset-font-ui theme-preset-font-ui-elderbean" > ABC 123< / span >
2019-12-28 07:33:37 +01:00
< / span >
2019-12-28 05:49:59 +01:00
< / div >
< / button >
< / div >
2019-12-29 04:38:02 +01:00
< / div >
2019-12-24 02:24:43 +01:00
< / div >
< / div >
2019-12-22 16:15:02 +01:00
< div class = "menu-item" >
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Style< / h1 >
< / div >
< div class = "menu-item-form" >
< div class = "input-wrap" >
< input id = "control-theme-style-dark" class = "control-theme-style-dark" type = "radio" name = "control-theme-style" value = "dark" tabindex = "-1" >
< label for = "control-theme-style-dark" > < span class = "label-icon" > < / span > Dark< / label >
< / div >
< div class = "input-wrap" >
< input id = "control-theme-style-light" class = "control-theme-style-light" type = "radio" name = "control-theme-style" value = "light" tabindex = "-1" >
< label for = "control-theme-style-light" > < span class = "label-icon" > < / span > Light< / label >
< / div >
< p class = "control-theme-style-light-helper form-helper small" > Accent Colour and Background Image may need to be changed to best fit the Theme Style.< / p >
< / div >
< / div >
2019-12-28 04:48:21 +01:00
< div class = "menu-item" >
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Fonts< / h1 >
< / div >
< div class = "menu-item-form" >
< div class = "input-wrap" >
< label for = "control-theme-font-display" > Display font< / label >
< input id = "control-theme-font-display" class = "control-theme-font-display mb-0" type = "text" autocomplete = "off" autocorrect = "off" autocapitalize = "off" spellcheck = "false" placeholder = "Google font name" tabindex = "-1" >
< / div >
< p class = "control-theme-font-helper form-helper small" > Use a < a href = "https://fonts.google.com/" target = "_blank" > Google Font< / a > to customise the Clock, Date, Group names and Bookmark Letters.< / p >
< p class = "control-theme-font-helper form-helper small" > Paste in a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Fredoka One" or "Comfortaa"< / p >
< p class = "control-theme-font-helper form-helper small" > Clear the field to use the default font "Fjalla".< / p >
< hr >
< div class = "input-wrap" >
< label for = "control-theme-font-ui" > UI font< / label >
< input id = "control-theme-font-ui" class = "control-theme-font-ui mb-0" type = "text" autocomplete = "off" autocorrect = "off" autocapitalize = "off" spellcheck = "false" placeholder = "Google font name" tabindex = "-1" >
< / div >
< p class = "control-theme-font-helper form-helper small" > Use a < a href = "https://fonts.google.com/" target = "_blank" > Google Font< / a > to customise the Bookmark name, URL and form elements.< / p >
< p class = "control-theme-font-helper form-helper small" > Paste in a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto" or "Source Sans Pro"< / p >
< p class = "control-theme-font-helper form-helper small" > Clear the field to use the default font "Open Sans".< / p >
< / div >
< / div >
2019-12-22 16:15:02 +01:00
< div class = "menu-item" >
< div class = "menu-item-header" >
2019-12-29 06:48:01 +01:00
< h1 class = "menu-item-header-text" > Colour< / h1 >
2019-12-22 16:15:02 +01:00
< / div >
< div class = "menu-item-form" >
< div class = "input-wrap" >
2019-12-23 01:33:25 +01:00
< label for = "control-theme-color-rgb-picker" > Primary colour< / label >
2019-12-22 16:15:02 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-theme-color-rgb-picker" class = "form-group-item-half control-theme-color-rgb-picker mb-0" type = "color" value = "#000000" tabindex = "1" >
< input id = "control-theme-color-rgb-hex" class = "form-group-item-half control-theme-color-rgb-hex mb-0" type = "text" placeholder = "Hex code" value = "#000000" tabindex = "1" maxlength = "7" autocomplete = "off" autocorrect = "off" autocapitalize = "off" spellcheck = "false" >
< / div >
< / div >
< p class = "control-theme-color-helper form-helper small" > Light and dark shades from this colour are used across nightTabs.< / p >
< div class = "button-wrap" >
2019-12-29 06:48:01 +01:00
< button class = "control-theme-color-rgb-default button mb-0" tabindex = "-1" > Default primary colour< / button >
2019-12-22 16:15:02 +01:00
< / div >
< hr >
< div class = "input-wrap" >
< label for = "control-theme-color-hsl-h" > Hue< / label >
< div class = "form-group form-group-block mb-0" >
< input id = "control-theme-color-hsl-h" class = "control-theme-color-hsl-h mr-3" type = "range" min = "0" max = "359" value = "0" tabindex = "-1" >
< div class = "control-theme-color-hsl-h-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
< / div >
< / div >
< div class = "input-wrap" >
< label for = "control-theme-color-hsl-s" > Saturation< / label >
< div class = "form-group form-group-block mb-0" >
< input id = "control-theme-color-hsl-s" class = "control-theme-color-hsl-s mr-3" type = "range" min = "0" max = "100" value = "0" tabindex = "-1" >
< div class = "control-theme-color-hsl-s-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
< / div >
< / div >
< div class = "input-wrap" >
< label for = "control-theme-color-hsl-l" > Lightness< / label >
< div class = "form-group form-group-block mb-0" >
< input id = "control-theme-color-hsl-l" class = "control-theme-color-hsl-l mr-3" type = "range" min = "0" max = "100" value = "0" tabindex = "-1" >
< div class = "control-theme-color-hsl-l-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
< / div >
< / div >
< hr >
< div class = "input-wrap" >
< label for = "control-theme-color-rgb-r" > Red< / label >
< div class = "form-group form-group-block mb-0" >
< input id = "control-theme-color-rgb-r" class = "control-theme-color-rgb-r mr-3" type = "range" min = "0" max = "255" value = "0" tabindex = "-1" >
< div class = "control-theme-color-rgb-r-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
< / div >
< / div >
< div class = "input-wrap" >
< label for = "control-theme-color-rgb-g" > Green< / label >
< div class = "form-group form-group-block mb-0" >
< input id = "control-theme-color-rgb-g" class = "control-theme-color-rgb-g mr-3" type = "range" min = "0" max = "255" value = "0" tabindex = "-1" >
< div class = "control-theme-color-rgb-g-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
< / div >
< / div >
< div class = "input-wrap" >
< label for = "control-theme-color-rgb-b" > Blue< / label >
< div class = "form-group form-group-block mb-0" >
< input id = "control-theme-color-rgb-b" class = "control-theme-color-rgb-b mr-3" type = "range" min = "0" max = "255" value = "0" tabindex = "-1" >
< div class = "control-theme-color-rgb-b-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
< / div >
< / div >
< hr >
< div class = "form-group form-group-block form-group-border form-group-border-theme-color" >
< div class = "form-group-text form-group-text-borderless" >
< div class = "theme-color-box theme-color-neg-10" > < / div >
< / div >
< div class = "form-group-text form-group-text-borderless" >
< div class = "theme-color-box theme-color-neg-09" > < / div >
< / div >
< div class = "form-group-text form-group-text-borderless" >
< div class = "theme-color-box theme-color-neg-08" > < / div >
< / div >
< div class = "form-group-text form-group-text-borderless" >
< div class = "theme-color-box theme-color-neg-07" > < / div >
< / div >
< div class = "form-group-text form-group-text-borderless" >
< div class = "theme-color-box theme-color-neg-06" > < / div >
< / div >
< div class = "form-group-text form-group-text-borderless" >
< div class = "theme-color-box theme-color-neg-05" > < / div >
< / div >
< div class = "form-group-text form-group-text-borderless" >
< div class = "theme-color-box theme-color-neg-04" > < / div >
< / div >
< div class = "form-group-text form-group-text-borderless" >
< div class = "theme-color-box theme-color-neg-03" > < / div >
< / div >
< div class = "form-group-text form-group-text-borderless" >
< div class = "theme-color-box theme-color-neg-02" > < / div >
< / div >
< div class = "form-group-text form-group-text-borderless" >
< div class = "theme-color-box theme-color-neg-01" > < / div >
< / div >
< div class = "form-group-text form-group-text-borderless form-group-item-small" >
< div class = "theme-color-box theme-color" > < / div >
< / div >
< div class = "form-group-text form-group-text-borderless" >
< div class = "theme-color-box theme-color-pos-01" > < / div >
< / div >
< div class = "form-group-text form-group-text-borderless" >
< div class = "theme-color-box theme-color-pos-02" > < / div >
< / div >
< div class = "form-group-text form-group-text-borderless" >
< div class = "theme-color-box theme-color-pos-03" > < / div >
< / div >
< div class = "form-group-text form-group-text-borderless" >
< div class = "theme-color-box theme-color-pos-04" > < / div >
< / div >
< div class = "form-group-text form-group-text-borderless" >
< div class = "theme-color-box theme-color-pos-05" > < / div >
< / div >
< div class = "form-group-text form-group-text-borderless" >
< div class = "theme-color-box theme-color-pos-06" > < / div >
< / div >
< div class = "form-group-text form-group-text-borderless" >
< div class = "theme-color-box theme-color-pos-07" > < / div >
< / div >
< div class = "form-group-text form-group-text-borderless" >
< div class = "theme-color-box theme-color-pos-08" > < / div >
< / div >
< div class = "form-group-text form-group-text-borderless" >
< div class = "theme-color-box theme-color-pos-09" > < / div >
< / div >
< div class = "form-group-text form-group-text-borderless" >
< div class = "theme-color-box theme-color-pos-10" > < / div >
< / div >
< / div >
< p class = "control-theme-color-helper form-helper small" > Backgrounds, Bookmarks and Modals use shades from the left.< / p >
< p class = "control-theme-color-helper form-helper small" > Text and form elements use shades from the right.< / p >
< p class = "control-theme-color-helper form-helper small" > For a light look switch to the Light Style and then select a Shade colour.< / p >
< / div >
< / div >
2019-04-01 17:11:39 +02:00
< div class = "menu-item" >
2019-04-26 14:48:37 +02:00
< div class = "menu-item-header" >
2019-08-25 15:10:22 +02:00
< h1 class = "menu-item-header-text" > Accent< / h1 >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "menu-item-form" >
2019-10-19 11:52:33 +02:00
< div class = "input-wrap" >
< label for = "control-theme-accent-current-picker" > Colour< / label >
2019-11-07 12:09:40 +01:00
< div class = "form-group form-group-block mb-0" >
2019-08-25 15:10:22 +02:00
< input id = "control-theme-accent-current-picker" class = "form-group-item-half control-theme-accent-current-picker mb-0" type = "color" value = "#000000" tabindex = "1" >
2019-11-11 14:23:13 +01:00
< input id = "control-theme-accent-current-hex" class = "form-group-item-half control-theme-accent-current-hex mb-0" type = "text" placeholder = "Hex code" value = "#000000" tabindex = "1" maxlength = "7" autocomplete = "off" autocorrect = "off" autocapitalize = "off" spellcheck = "false" >
2019-08-25 15:10:22 +02:00
< / div >
2019-04-26 14:48:37 +02:00
< / div >
2019-12-24 02:24:43 +01:00
< div class = "button-wrap" >
< button class = "control-theme-accent-current-default button mb-0" tabindex = "-1" > Default accent< / button >
< / div >
2019-11-11 14:23:13 +01:00
< p class = "control-theme-style-light-helper form-helper small" > Accent Colour can also be changed from the Header Area.< / p >
2019-06-11 11:54:10 +02:00
< hr >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-theme-accent-random-active" class = "control-theme-accent-random-active" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-theme-accent-random-active" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-theme-accent-random-style-any" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-theme-accent-random-style-light" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-theme-accent-random-style-dark" > < span class = "label-icon" > < / span > 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-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-theme-accent-random-style-pastel" > < span class = "label-icon" > < / span > Pastel colours< / label >
2019-04-26 14:48:37 +02:00
< / div >
2019-06-04 20:08:15 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +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-11-11 00:57:04 +01:00
< label for = "control-theme-accent-random-style-saturated" > < span class = "label-icon" > < / span > Saturated colours< / label >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "button-wrap" >
2019-07-16 13:40:39 +02:00
< button class = "control-theme-accent-randomise button mb-0" tabindex = "-1" > Randomise now< / button >
2019-04-26 14:48:37 +02:00
< / div >
< / div >
2019-04-01 17:11:39 +02:00
< / div >
< / div >
2019-12-26 12:55:02 +01:00
< div class = "menu-item" >
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Radius< / h1 >
< / div >
< div class = "menu-item-form" >
< div class = "input-wrap" >
< label for = "control-theme-radius" > All corners< / label >
< div class = "form-group form-group-block mb-0" >
< input id = "control-theme-radius" class = "control-theme-radius mr-3" type = "range" min = "0" max = "300" value = "0" step = "5" tabindex = "-1" >
< div class = "control-theme-radius-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
< / div >
< / div >
< div class = "button-wrap" >
< button class = "control-theme-radius-default button mb-0" tabindex = "-1" > Default radius< / button >
< / div >
< / div >
< / div >
2019-04-01 17:11:39 +02:00
< / div >
2019-01-24 21:28:11 +01:00
< div class = "menu-content-area menu-content-area-background is-hidden" >
2019-07-30 14:20:15 +02:00
< div class = "menu-item" >
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Colour< / h1 >
< / div >
< div class = "menu-item-form" >
< div class = "input-wrap" >
< input id = "control-background-color-by-theme" class = "control-background-color-by-theme" type = "radio" name = "control-background-color-by" value = "theme" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-background-color-by-theme" > < span class = "label-icon" > < / span > Theme background colour< / label >
2019-07-30 14:20:15 +02:00
< / div >
2019-12-23 02:38:07 +01:00
< p class = "control-background-color-by-theme-helper form-helper small" > Use the Background colour defined by the Theme.< / p >
2019-07-30 14:20:15 +02:00
< div class = "input-wrap" >
< input id = "control-background-color-by-custom" class = "control-background-color-by-custom" type = "radio" name = "control-background-color-by" value = "custom" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-background-color-by-custom" > < span class = "label-icon" > < / span > Custom background colour< / label >
2019-07-30 14:20:15 +02:00
< / div >
2019-11-11 14:23:13 +01:00
< p class = "control-background-color-by-custom-helper form-helper small" > Use a custom Background colour.< / p >
< p class = "control-background-color-by-custom-helper form-helper small" > Take care as some colours may make the Clock, Date and other text unreadable.< / p >
2019-07-30 14:20:15 +02:00
< div class = "form-indent" >
< div class = "input-wrap" >
2019-11-07 12:09:40 +01:00
< div class = "form-group form-group-block mb-0" >
2019-12-23 02:38:07 +01:00
< input id = "control-background-color-by-picker" class = "form-group-item-half control-background-color-by-picker mb-0" type = "color" value = "#000000" tabindex = "1" >
< input id = "control-background-color-by-hex" class = "form-group-item-half control-background-color-by-hex mb-0" type = "text" placeholder = "Hex code" value = "#000000" tabindex = "1" maxlength = "7" autocomplete = "off" autocorrect = "off" autocapitalize = "off" spellcheck = "false" >
2019-08-27 19:35:35 +02:00
< / div >
2019-07-30 14:20:15 +02:00
< / div >
< / 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" > Image< / h1 >
< / div >
< div class = "menu-item-form" >
2019-05-04 14:53:18 +02:00
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-background-image-show" class = "control-background-image-show" type = "checkbox" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-background-image-show" > < span class = "label-icon" > < / span > Show< / label >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "form-indent" >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-background-image-from-file" class = "control-background-image-from-file" type = "radio" name = "control-background-image-from" value = "file" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-background-image-from-file" > < span class = "label-icon" > < / span > Use local file< / label >
2019-07-15 14:48:47 +02:00
< / div >
< div class = "form-indent" >
2019-12-29 04:38:02 +01:00
< div class = "form-inline" >
< div class = "input-wrap input-button input-hide" >
< input id = "control-background-image-file" class = "control-background-image-file" type = "file" >
< label for = "control-background-image-file" > Select image< / label >
< / div >
< div class = "button-wrap" >
< button class = "control-background-image-file-clear button mb-0" href = "#" > Clear image< / button >
< / div >
2019-07-15 14:48:47 +02:00
< / div >
2019-07-15 15:15:57 +02:00
< p class = "control-background-image-file-helper form-helper small" > Max image size 5MB, (due to browser local storage limits).< / p >
< p class = "control-background-image-file-helper form-helper small" > Take care with large files, they may impact performance.< / p >
2019-07-15 14:48:47 +02:00
< div class = "feedback-wrap" >
2019-07-15 15:15:57 +02:00
< div class = "control-background-image-file-feedback form-feedback" > < / div >
2019-07-15 14:48:47 +02:00
< / div >
< / div >
< div class = "input-wrap" >
2019-07-16 13:40:39 +02:00
< input id = "control-background-image-from-url" class = "control-background-image-from-url" type = "radio" name = "control-background-image-from" value = "url" tabindex = "-1" >
2019-11-11 00:57:04 +01:00
< label for = "control-background-image-from-url" > < span class = "label-icon" > < / span > Use URL< / label >
2019-07-15 14:48:47 +02:00
< / div >
< div class = "form-indent" >
< div class = "input-wrap" >
2019-08-31 17:24:40 +02:00
< textarea id = "control-background-image-url" class = "control-background-image-url mb-0" spellcheck = "false" placeholder = "https://..." tabindex = "-1" > < / textarea >
2019-07-15 14:48:47 +02:00
< / div >
2019-09-01 09:24:47 +02:00
< p class = "control-background-image-url-helper form-helper small" > If adding more than one URL separate them by spaces or on new lines. If more than one is entered a random background image will be used on load.< / p >
2019-08-31 17:24:40 +02:00
< hr >
2019-07-15 14:48:47 +02:00
< p class = "control-background-image-url-helper form-helper small" > Unsplash can be used for random images, eg:< / p >
< p class = "control-background-image-url-helper form-helper small" > < i > https://source.unsplash.com/random/1920x1080/?night,day,sky< / i > < / p >
2019-10-17 19:42:22 +02:00
< p class = "control-background-image-url-helper form-helper small" > Change parameters after < i > .../random/< / i > for more options. Loading times may vary.< / p >
2019-04-26 14:48:37 +02:00
< / div >
< hr >
< div class = "input-wrap" >
< label for = "control-background-image-opacity" > Opacity< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-background-image-opacity" class = "control-background-image-opacity mr-3" type = "range" min = "0" max = "100" value = "0" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-background-image-opacity-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "input-wrap" >
< label for = "control-background-image-grayscale" > Grayscale< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-background-image-grayscale" class = "control-background-image-grayscale mr-3" type = "range" min = "0" max = "100" value = "0" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-background-image-grayscale-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "input-wrap" >
< label for = "control-background-image-blur" > Blur< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-background-image-blur" class = "control-background-image-blur mr-3" type = "range" min = "0" max = "100" value = "0" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-background-image-blur-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-04-26 14:48:37 +02:00
< / div >
< div class = "input-wrap" >
< label for = "control-background-image-accent" > Accent overlay< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-background-image-accent" class = "control-background-image-accent mr-3" type = "range" min = "0" max = "90" value = "0" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-background-image-accent-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-06-13 16:47:00 +02:00
< / div >
< div class = "input-wrap" >
< label for = "control-background-image-scale" > Size< / label >
2019-11-26 02:38:30 +01:00
< div class = "form-group form-group-block mb-0" >
< input id = "control-background-image-scale" class = "control-background-image-scale mr-3" type = "range" min = "100" max = "300" value = "0" tabindex = "-1" >
2019-12-22 16:15:02 +01:00
< div class = "control-background-image-scale-count form-group-text form-group-item-medium form-group-radius-left" > < / div >
2019-11-26 02:38:30 +01:00
< / div >
2019-04-26 14:48:37 +02:00
< / div >
< / div >
2019-01-24 21:28:11 +01:00
< / div >
< / div >
< / div >
2019-02-03 14:51:54 +01:00
2019-06-20 14:00:19 +02:00
< div class = "menu-content-area menu-content-area-data is-hidden" >
< div class = "menu-item" >
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Restore< / h1 >
< / div >
< div class = "menu-item-form" >
< div class = "input-wrap input-button input-hide" >
2019-07-16 13:40:39 +02:00
< input id = "control-data-import" class = "control-data-import" type = "file" tabindex = "-1" >
2019-06-20 14:00:19 +02:00
< label for = "control-data-import" > Import data< / label >
< / div >
2019-07-15 14:48:47 +02:00
< p class = "control-data-import-helper form-helper small" > Restore a previously exported nightTab backup.< / p >
< div class = "feedback-wrap" >
< div class = "control-data-import-feedback form-feedback" > < / div >
< / div >
2019-06-20 14:00:19 +02:00
< / div >
< / div >
< div class = "menu-item" >
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Backup< / h1 >
< / div >
< div class = "menu-item-form" >
< div class = "button-wrap" >
2019-07-16 13:40:39 +02:00
< button class = "control-data-export button mb-0" href = "#" tabindex = "-1" > Export data< / button >
2019-06-20 14:00:19 +02:00
< / div >
2019-07-15 14:48:47 +02:00
< p class = "control-data-export-helper form-helper small" > Download a backup of your nightTab Bookmarks and Settings.< / p >
< p class = "control-data-export-helper form-helper small" > This file can later be imported on this or another deivce.< / p >
2019-06-20 14:00:19 +02:00
< / div >
< / div >
< div class = "menu-item" >
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > Clear< / h1 >
< / div >
< div class = "menu-item-form" >
< div class = "button-wrap" >
2019-07-16 13:40:39 +02:00
< button class = "control-data-clear button mb-0" href = "#" tabindex = "-1" > Clear data< / button >
2019-06-20 14:00:19 +02:00
< / div >
2019-07-15 14:48:47 +02:00
< p class = "control-data-clear-helper form-helper small" > Wipe all data and restore nightTab to default state.< / p >
2019-06-20 14:00:19 +02:00
< / div >
< / div >
< / div >
2019-06-25 21:39:25 +02:00
< div class = "menu-content-area menu-content-area-nightTab is-hidden" >
< div class = "menu-item" >
< div class = "menu-item-header" >
< h1 class = "menu-item-header-text" > nightTab< / h1 >
< / div >
< div class = "menu-item-form" >
2019-11-11 14:37:20 +01:00
< div class = "p-wrap" >
< p class = "mb-1" > Version < strong class = "display-version" > < / strong > < / p >
< p class = "display-name small mb-0" > < / p >
< / div >
2019-06-25 21:39:25 +02:00
< hr >
2019-11-11 14:37:20 +01:00
< div class = "p-wrap" >
2019-12-28 04:48:21 +01:00
< p > Project repository on < a href = "https://github.com/zombieFox/nightTab" target = "_blank" tabindex = "-1" > Github< / a > .< / p >
2019-11-11 14:37:20 +01:00
< / div >
2019-10-22 09:46:25 +02:00
< hr >
2019-11-11 14:37:20 +01:00
< div class = "p-wrap" >
2019-12-28 04:48:21 +01:00
< p > For feedback and support, submit an < a href = "https://github.com/zombieFox/nightTab/issues" target = "_blank" tabindex = "-1" > Issues.< / a > < / p >
2019-11-11 14:37:20 +01:00
< / div >
2019-06-25 21:39:25 +02:00
< / div >
< / div >
< / div >
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 >
2019-08-08 13:32:34 +02:00
<!-- js - block -->
2019-06-17 15:33:23 +02:00
<!-- vendor -->
2019-08-08 15:30:30 +02:00
< script src = "../node_modules/html5sortable/dist/html5sortable.min.js" > < / script >
< script src = "../node_modules/invert-color/lib/invert.min.js" > < / script >
2019-11-19 09:01:57 +01:00
< script src = "../node_modules/moment/min/moment.min.js" > < / script >
2019-06-17 15:33:23 +02:00
<!-- nightTab -->
2018-12-26 08:45:53 +01:00
< 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 >
< 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-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 >
2019-07-15 19:04:32 +02:00
< script src = "js/pagelock.js" > < / script >
2019-05-23 20:15:14 +02:00
< script src = "js/edge.js" > < / script >
2019-10-21 00:41:12 +02:00
< script src = "js/dropdown.js" > < / script >
2018-12-26 08:45:53 +01:00
< script src = "js/init.js" > < / script >
2019-08-08 13:32:34 +02:00
<!-- end - js - block -->
2018-12-26 08:45:53 +01:00
< / html >
