mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-02-17 02:30:48 +01:00
[design] improve menu layout and add sub menu links
This commit is contained in:
zombieFox
parent
247371eee4
commit
df9572d9f9
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "4.38.0",
|
||||
"version": "4.39.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "4.38.0",
|
||||
"version": "4.39.0",
|
||||
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
||||
201
src/css/menu.css
201
src/css/menu.css
@ -3,8 +3,8 @@
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
width: 100vw;
|
||||
height: 90vh;
|
||||
transform: translateY(calc(-100% - 2em));
|
||||
user-select: none;
|
||||
z-index: var(--z-index-menu);
|
||||
@ -26,6 +26,11 @@
|
||||
border-radius: var(--theme-radius);
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 1fr auto;
|
||||
justify-items: stretch;
|
||||
align-items: stretch;
|
||||
overflow-y: auto;
|
||||
pointer-events: all;
|
||||
transition: box-shadow var(--layout-timing-extra-fast);
|
||||
@ -42,6 +47,33 @@
|
||||
.menu-nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.menu-nav-item {
|
||||
flex-grow: 1;
|
||||
flex-basis: 33.33333333%;
|
||||
}
|
||||
|
||||
.menu-nav-tab {
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
border-radius: 0;
|
||||
height: 3.25em;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.menu-nav-tab:after,
|
||||
.menu-nav-tab:after {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.menu-nav-body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-nav-area-tab {
|
||||
@ -59,30 +91,29 @@
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.menu-nav:not(:last-child) {
|
||||
margin: 0;
|
||||
.menu-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
padding: 0 calc(var(--menu-space) * 3);
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
}
|
||||
|
||||
.menu-content-area {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
.menu-content-item {
|
||||
padding-top: calc(var(--menu-space) * 2);
|
||||
padding-bottom: calc(var(--menu-space) * 2);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.menu-item:not(:last-child) {
|
||||
.menu-content-item:not(:last-child) {
|
||||
border-bottom: var(--horizontal-rule);
|
||||
}
|
||||
|
||||
.menu-item-header {
|
||||
padding: calc(var(--menu-space) * 2) 0;
|
||||
margin-bottom: calc(var(--menu-space) * 2);
|
||||
}
|
||||
|
||||
.menu-item-header-text {
|
||||
@ -90,119 +121,125 @@
|
||||
}
|
||||
|
||||
.menu-item-form {
|
||||
padding: 0 0 calc(var(--menu-space) * 3) calc(var(--menu-space) * 3);
|
||||
margin: 0 0 calc(var(--menu-space) * 2) calc(var(--menu-space) * 2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.menu-nav-button {
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
border-radius: 0;
|
||||
height: 3.25em;
|
||||
line-height: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.menu-nav-button:after,
|
||||
.menu-nav-button:after {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.menu-nav-area-tab .menu-nav-button:first-child {
|
||||
border-radius: var(--theme-radius) 0 0 0;
|
||||
}
|
||||
|
||||
.menu-nav-area-close .menu-nav-button {
|
||||
border-radius: 0 var(--theme-radius) 0 0;
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
.menu {
|
||||
width: 80vw;
|
||||
}
|
||||
|
||||
.menu-nav-area-tab .menu-nav-button {
|
||||
flex-basis: 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
width: 90vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.menu {
|
||||
width: 70vw;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: initial;
|
||||
}
|
||||
|
||||
.menu-area {
|
||||
overflow-y: initial;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
justify-items: stretch;
|
||||
max-height: 100%;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 2fr 4fr auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menu-nav {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 2;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 2;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
flex-wrap: nowrap;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.menu-nav-item {
|
||||
flex-grow: 0;
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
.menu-nav .menu-nav-tab {
|
||||
padding-left: calc(var(--menu-space) * 2);
|
||||
padding-right: calc(var(--menu-space) * 2);
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.menu-nav-body {
|
||||
background-color: rgb(var(--theme-color-02));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.menu-close {
|
||||
grid-column-start: 3;
|
||||
grid-column-end: 4;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 2;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
padding: 0 calc(var(--menu-space) * 4);
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 3;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 2;
|
||||
overflow-y: auto;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 3fr;
|
||||
grid-template-rows: 1fr;
|
||||
align-items: flex-start;
|
||||
grid-gap: 2em;
|
||||
.menu-content-overscroll {
|
||||
padding-bottom: calc(var(--menu-space) * 30);
|
||||
}
|
||||
|
||||
.menu-item-header {
|
||||
padding: calc(var(--menu-space) * 1.75) 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
.menu-content-item {
|
||||
padding-top: calc(var(--menu-space) * 3);
|
||||
padding-bottom: calc(var(--menu-space) * 3);
|
||||
}
|
||||
|
||||
.menu-nav-area-tab .menu-nav-button {
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
.menu-nav-sub {
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: calc(var(--menu-space) * 5);
|
||||
border-radius: 0;
|
||||
height: 3em;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.menu-nav-sub:after,
|
||||
.menu-nav-sub:after {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.menu-item-form {
|
||||
padding: calc(var(--menu-space) * 2.5) 0;
|
||||
z-index: 2;
|
||||
margin: 0 0 0 calc(var(--menu-space) * 3);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.menu {
|
||||
width: 70vw;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
grid-template-columns: 1fr 2fr;
|
||||
}
|
||||
|
||||
.menu-nav-area-tab .menu-nav-button {
|
||||
flex-basis: 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
width: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1100px) {
|
||||
.menu-nav-area-tab .menu-nav-button {
|
||||
padding-left: 0.25em;
|
||||
padding-right: 0.25em;
|
||||
flex-basis: auto;
|
||||
max-width: inherit;
|
||||
.menu {
|
||||
width: 70vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
.menu {
|
||||
width: 50vw;
|
||||
width: 60vw;
|
||||
max-width: 60em;
|
||||
max-height: 60em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -127,7 +127,7 @@
|
||||
--layout-timing-medium: var(--layout-duration-06) ease-in-out;
|
||||
--layout-timing-slow: var(--layout-duration-08) ease-in-out;
|
||||
--layout-timing-extra-slow: var(--layout-duration-10) ease-in-out;
|
||||
--horizontal-rule: calc(var(--layout-line-width) / 2) solid rgb(var(--theme-color-02));
|
||||
--horizontal-rule: var(--layout-line-width) solid rgb(var(--theme-color-02));
|
||||
/* background */
|
||||
--background-color-theme: var(--theme-color-01);
|
||||
--background-color-custom: rgb(0, 0, 0);
|
||||
@ -215,7 +215,7 @@
|
||||
0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-color-10), 0.25);
|
||||
--form-ring-accent: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)),
|
||||
0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
|
||||
--form-wrap-space: 0.75em;
|
||||
--form-wrap-space: 1em;
|
||||
/* menu */
|
||||
--menu-space: 0.75em;
|
||||
/* button */
|
||||
|
||||
@ -3,27 +3,25 @@
|
||||
|
||||
@@include("./menu/menu-nav.html")
|
||||
|
||||
<div class="menu-content">
|
||||
@@include("./menu/menu-close.html")
|
||||
|
||||
@@include("./menu/menu-content/layout.html")
|
||||
@@include("./menu/menu-content/layout.html")
|
||||
|
||||
@@include("./menu/menu-content/header.html")
|
||||
@@include("./menu/menu-content/header.html")
|
||||
|
||||
@@include("./menu/menu-content/groups.html")
|
||||
@@include("./menu/menu-content/groups.html")
|
||||
|
||||
@@include("./menu/menu-content/bookmarks.html")
|
||||
@@include("./menu/menu-content/bookmarks.html")
|
||||
|
||||
@@include("./menu/menu-content/theme.html")
|
||||
@@include("./menu/menu-content/theme.html")
|
||||
|
||||
@@include("./menu/menu-content/background.html")
|
||||
@@include("./menu/menu-content/background.html")
|
||||
|
||||
@@include("./menu/menu-content/data.html")
|
||||
@@include("./menu/menu-content/data.html")
|
||||
|
||||
@@include("./menu/menu-content/coffee.html")
|
||||
@@include("./menu/menu-content/coffee.html")
|
||||
|
||||
@@include("./menu/menu-content/nightTab.html")
|
||||
|
||||
</div>
|
||||
@@include("./menu/menu-content/nighttab.html")
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
3
src/html/menu/menu-close.html
Normal file
3
src/html/menu/menu-close.html
Normal file
@ -0,0 +1,3 @@
|
||||
<div class="menu-close">
|
||||
<button class="menu-nav-tab control-menu-close button" tabindex="-1"><span class="icon-close"></span></button>
|
||||
</div>
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="menu-content-area menu-content-area-background is-hidden">
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-background" class="menu-content menu-content-overscroll menu-content-background is-hidden">
|
||||
<div id="menu-content-background-color" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Colour</h1>
|
||||
</div>
|
||||
@ -33,7 +33,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-background-image" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Image</h1>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="menu-content-area menu-content-area-bookmarks is-hidden">
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-bookmarks" class="menu-content menu-content-overscroll menu-content-bookmarks is-hidden">
|
||||
<div id="menu-content-bookmarks-area" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Area</h1>
|
||||
</div>
|
||||
@ -43,7 +43,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-bookmarks-bookmarks" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Bookmarks</h1>
|
||||
</div>
|
||||
@ -247,7 +247,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-bookmarks-color" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Background colour</h1>
|
||||
</div>
|
||||
@ -281,7 +281,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-bookmarks-border" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Border</h1>
|
||||
</div>
|
||||
@ -296,7 +296,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-bookmarks-style" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Style</h1>
|
||||
</div>
|
||||
@ -317,7 +317,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-bookmarks-orientation" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Orientation</h1>
|
||||
</div>
|
||||
@ -335,7 +335,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-bookmarks-sort" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Sort</h1>
|
||||
</div>
|
||||
@ -349,7 +349,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-bookmarks-accent" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Accent override</h1>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="menu-content-area menu-content-area-coffee is-hidden">
|
||||
<div class="menu-item">
|
||||
<div class="menu-content menu-content-coffee is-hidden">
|
||||
<div class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Coffee for fuel</h1>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="menu-content-area menu-content-area-data is-hidden">
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-data" class="menu-content menu-content-overscroll menu-content-data is-hidden">
|
||||
<div id="menu-content-data-restore" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Restore</h1>
|
||||
</div>
|
||||
@ -18,7 +18,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-data-backup" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Backup</h1>
|
||||
</div>
|
||||
@ -34,7 +34,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-data-clear" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Clear</h1>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="menu-content-area menu-content-area-groups is-hidden">
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-groups" class="menu-content menu-content-overscroll menu-content-groups is-hidden">
|
||||
<div id="menu-content-groups-names" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Names</h1>
|
||||
</div>
|
||||
@ -47,7 +47,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-groups-order" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Order</h1>
|
||||
</div>
|
||||
@ -62,7 +62,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-groups-border" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Border</h1>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="menu-content-area menu-content-area-header is-hidden">
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-header" class="menu-content menu-content-overscroll menu-content-header is-hidden">
|
||||
<div id="menu-content-header-area" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Area</h1>
|
||||
</div>
|
||||
@ -80,7 +80,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-header-greeting" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Greeting</h1>
|
||||
</div>
|
||||
@ -129,7 +129,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-header-transitional" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Transitional words</h1>
|
||||
</div>
|
||||
@ -172,7 +172,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-header-clock" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Clock</h1>
|
||||
</div>
|
||||
@ -260,7 +260,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-header-date" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Date</h1>
|
||||
</div>
|
||||
@ -434,7 +434,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-header-search" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Search</h1>
|
||||
</div>
|
||||
@ -579,7 +579,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-header-editadd" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Edit/Add</h1>
|
||||
</div>
|
||||
@ -620,7 +620,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-header-coloraccent" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Colour/Accent</h1>
|
||||
</div>
|
||||
@ -669,7 +669,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-header-settings" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Settings menu</h1>
|
||||
</div>
|
||||
@ -702,7 +702,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-header-border" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Border</h1>
|
||||
</div>
|
||||
@ -726,7 +726,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-header-position" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Position when scrolling</h1>
|
||||
</div>
|
||||
@ -747,7 +747,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-header-color" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Background colour</h1>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="menu-content-area menu-content-area-layout">
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-layout" class="menu-content menu-content-overscroll menu-content-layout">
|
||||
<div id="menu-content-layout-scaling" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Global scaling</h1>
|
||||
</div>
|
||||
@ -20,7 +20,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-layout-area" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Area</h1>
|
||||
</div>
|
||||
@ -82,7 +82,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-layout-order" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Area order</h1>
|
||||
</div>
|
||||
@ -100,7 +100,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-layout-padding" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Padding</h1>
|
||||
</div>
|
||||
@ -115,7 +115,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-layout-gutter" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Gutter</h1>
|
||||
</div>
|
||||
@ -130,7 +130,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-layout-page" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Page</h1>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="menu-content-area menu-content-area-nightTab is-hidden">
|
||||
<div class="menu-item">
|
||||
<div class="menu-content menu-content-nighttab is-hidden">
|
||||
<div class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">nightTab</h1>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="menu-content-area menu-content-area-theme is-hidden">
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-theme" class="menu-content menu-content-overscroll menu-content-theme is-hidden">
|
||||
<div id="menu-content-theme-preset" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Preset</h1>
|
||||
</div>
|
||||
@ -10,7 +10,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-theme-saved" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Saved</h1>
|
||||
</div>
|
||||
@ -30,7 +30,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-theme-style" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Style</h1>
|
||||
</div>
|
||||
@ -48,7 +48,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-theme-fonts" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Fonts</h1>
|
||||
</div>
|
||||
@ -172,7 +172,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-theme-colour" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Colour</h1>
|
||||
</div>
|
||||
@ -333,7 +333,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-theme-accent" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Accent</h1>
|
||||
</div>
|
||||
@ -383,7 +383,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-theme-radius" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Radius</h1>
|
||||
</div>
|
||||
@ -398,7 +398,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-theme-shadow" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Shadow</h1>
|
||||
</div>
|
||||
@ -413,7 +413,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div id="menu-content-theme-shade" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Shade</h1>
|
||||
</div>
|
||||
|
||||
@ -1,16 +1,86 @@
|
||||
<div class="menu-nav">
|
||||
<div class="menu-nav-area-tab list-unstyled">
|
||||
<button class="menu-nav-button control-menu-layout button active" tabindex="-1">Layout</button>
|
||||
<button class="menu-nav-button control-menu-header button" tabindex="-1">Header</button>
|
||||
<button class="menu-nav-button control-menu-groups button" tabindex="-1">Groups</button>
|
||||
<button class="menu-nav-button control-menu-bookmarks button" tabindex="-1">Bookmarks</button>
|
||||
<button class="menu-nav-button control-menu-theme button" tabindex="-1">Theme</button>
|
||||
<button class="menu-nav-button control-menu-background button" tabindex="-1">Background</button>
|
||||
<button class="menu-nav-button control-menu-data button" tabindex="-1">Data</button>
|
||||
<button class="menu-nav-button control-menu-coffee button" tabindex="-1">Coffee</button>
|
||||
<button class="menu-nav-button control-menu-nightTab button" tabindex="-1">nightTab</button>
|
||||
<div class="menu-nav-item">
|
||||
<button class="control-menu-layout menu-nav-tab button active" tabindex="-1">Layout</button>
|
||||
<div class="menu-nav-body menu-nav-body-layout">
|
||||
<a href="#menu-content-layout-scaling" class="menu-nav-sub button button-small">Global scaling</a>
|
||||
<a href="#menu-content-layout-area" class="menu-nav-sub button button-small">Area</a>
|
||||
<a href="#menu-content-layout-order" class="menu-nav-sub button button-small">Area order</a>
|
||||
<a href="#menu-content-layout-padding" class="menu-nav-sub button button-small">Padding</a>
|
||||
<a href="#menu-content-layout-gutter" class="menu-nav-sub button button-small">Gutter</a>
|
||||
<a href="#menu-content-layout-page" class="menu-nav-sub button button-small">Page</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-nav-area-close">
|
||||
<button class="menu-nav-button control-menu-close button" tabindex="-1"><span class="icon-close"></span></button>
|
||||
<div class="menu-nav-item">
|
||||
<button class="control-menu-header menu-nav-tab button" tabindex="-1">Header</button>
|
||||
<div class="menu-nav-body menu-nav-body-header is-hidden">
|
||||
<a href="#menu-content-header-area" class="menu-nav-sub button button-small">Area</a>
|
||||
<a href="#menu-content-header-greeting" class="menu-nav-sub button button-small">Greeting</a>
|
||||
<a href="#menu-content-header-transitional" class="menu-nav-sub button button-small">Transitional words</a>
|
||||
<a href="#menu-content-header-clock" class="menu-nav-sub button button-small">Clock</a>
|
||||
<a href="#menu-content-header-date" class="menu-nav-sub button button-small">Date</a>
|
||||
<a href="#menu-content-header-search" class="menu-nav-sub button button-small">Search</a>
|
||||
<a href="#menu-content-header-editadd" class="menu-nav-sub button button-small">Edit/Add</a>
|
||||
<a href="#menu-content-header-coloraccent" class="menu-nav-sub button button-small">Colour/Accent</a>
|
||||
<a href="#menu-content-header-settings" class="menu-nav-sub button button-small">Settings menu</a>
|
||||
<a href="#menu-content-header-border" class="menu-nav-sub button button-small">Border</a>
|
||||
<a href="#menu-content-header-position" class="menu-nav-sub button button-small">Position when scrolling</a>
|
||||
<a href="#menu-content-header-color" class="menu-nav-sub button button-small">Background colour</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-nav-item">
|
||||
<button class="control-menu-groups menu-nav-tab button" tabindex="-1">Groups</button>
|
||||
<div class="menu-nav-body menu-nav-body-groups is-hidden">
|
||||
<a href="#menu-content-groups-names" class="menu-nav-sub button button-small">Names</a>
|
||||
<a href="#menu-content-groups-order" class="menu-nav-sub button button-small">Order</a>
|
||||
<a href="#menu-content-groups-border" class="menu-nav-sub button button-small">Border</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-nav-item">
|
||||
<button class="control-menu-bookmarks menu-nav-tab button" tabindex="-1">Bookmarks</button>
|
||||
<div class="menu-nav-body menu-nav-body-bookmarks is-hidden">
|
||||
<a href="#menu-content-bookmarks-area" class="menu-nav-sub button button-small">Area</a>
|
||||
<a href="#menu-content-bookmarks-bookmarks" class="menu-nav-sub button button-small">Bookmarks</a>
|
||||
<a href="#menu-content-bookmarks-color" class="menu-nav-sub button button-small">Background colour</a>
|
||||
<a href="#menu-content-bookmarks-border" class="menu-nav-sub button button-small">Border</a>
|
||||
<a href="#menu-content-bookmarks-style" class="menu-nav-sub button button-small">Style</a>
|
||||
<a href="#menu-content-bookmarks-orientation" class="menu-nav-sub button button-small">Orientation</a>
|
||||
<a href="#menu-content-bookmarks-sort" class="menu-nav-sub button button-small">Sort</a>
|
||||
<a href="#menu-content-bookmarks-accent" class="menu-nav-sub button button-small">Accent override</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-nav-item">
|
||||
<button class="control-menu-theme menu-nav-tab button" tabindex="-1">Theme</button>
|
||||
<div class="menu-nav-body menu-nav-body-theme is-hidden">
|
||||
<a href="#menu-content-theme-preset" class="menu-nav-sub button button-small">Preset</a>
|
||||
<a href="#menu-content-theme-saved" class="menu-nav-sub button button-small">Saved</a>
|
||||
<a href="#menu-content-theme-style" class="menu-nav-sub button button-small">Style</a>
|
||||
<a href="#menu-content-theme-fonts" class="menu-nav-sub button button-small">Fonts</a>
|
||||
<a href="#menu-content-theme-colour" class="menu-nav-sub button button-small">Colour</a>
|
||||
<a href="#menu-content-theme-accent" class="menu-nav-sub button button-small">Accent</a>
|
||||
<a href="#menu-content-theme-radius" class="menu-nav-sub button button-small">Radius</a>
|
||||
<a href="#menu-content-theme-shadow" class="menu-nav-sub button button-small">Shadow</a>
|
||||
<a href="#menu-content-theme-shade" class="menu-nav-sub button button-small">Shade</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-nav-item">
|
||||
<button class="control-menu-background menu-nav-tab button" tabindex="-1">Background</button>
|
||||
<div class="menu-nav-body menu-nav-body-background is-hidden">
|
||||
<a href="#menu-content-background-color" class="menu-nav-sub button button-small">Colour</a>
|
||||
<a href="#menu-content-background-image" class="menu-nav-sub button button-small">Image</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-nav-item">
|
||||
<button class="control-menu-data menu-nav-tab button" tabindex="-1">Data</button>
|
||||
<div class="menu-nav-body menu-nav-body-data is-hidden">
|
||||
<a href="#menu-content-data-restore" class="menu-nav-sub button button-small">Restore</a>
|
||||
<a href="#menu-content-data-backup" class="menu-nav-sub button button-small">Backup</a>
|
||||
<a href="#menu-content-data-clear" class="menu-nav-sub button button-small">Clear</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-nav-item">
|
||||
<button class="control-menu-coffee menu-nav-tab button" tabindex="-1">Coffee</button>
|
||||
</div>
|
||||
<div class="menu-nav-item">
|
||||
<button class="control-menu-nighttab menu-nav-tab button" tabindex="-1">nightTab</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -120,55 +120,55 @@ var control = (function() {
|
||||
element: ".control-menu-layout",
|
||||
type: "button",
|
||||
func: function() {
|
||||
menu.nav(this.element, ".menu-content-area-layout");
|
||||
menu.nav("layout");
|
||||
}
|
||||
}, {
|
||||
element: ".control-menu-header",
|
||||
type: "button",
|
||||
func: function() {
|
||||
menu.nav(this.element, ".menu-content-area-header");
|
||||
menu.nav("header");
|
||||
}
|
||||
}, {
|
||||
element: ".control-menu-groups",
|
||||
type: "button",
|
||||
func: function() {
|
||||
menu.nav(this.element, ".menu-content-area-groups");
|
||||
menu.nav("groups");
|
||||
}
|
||||
}, {
|
||||
element: ".control-menu-bookmarks",
|
||||
type: "button",
|
||||
func: function() {
|
||||
menu.nav(this.element, ".menu-content-area-bookmarks");
|
||||
menu.nav("bookmarks");
|
||||
}
|
||||
}, {
|
||||
element: ".control-menu-theme",
|
||||
type: "button",
|
||||
func: function() {
|
||||
menu.nav(this.element, ".menu-content-area-theme");
|
||||
menu.nav("theme");
|
||||
}
|
||||
}, {
|
||||
element: ".control-menu-background",
|
||||
type: "button",
|
||||
func: function() {
|
||||
menu.nav(this.element, ".menu-content-area-background");
|
||||
menu.nav("background");
|
||||
}
|
||||
}, {
|
||||
element: ".control-menu-data",
|
||||
type: "button",
|
||||
func: function() {
|
||||
menu.nav(this.element, ".menu-content-area-data");
|
||||
menu.nav("data");
|
||||
}
|
||||
}, {
|
||||
element: ".control-menu-coffee",
|
||||
type: "button",
|
||||
func: function() {
|
||||
menu.nav(this.element, ".menu-content-area-coffee");
|
||||
menu.nav("coffee");
|
||||
}
|
||||
}, {
|
||||
element: ".control-menu-nightTab",
|
||||
element: ".control-menu-nighttab",
|
||||
type: "button",
|
||||
func: function() {
|
||||
menu.nav(this.element, ".menu-content-area-nightTab");
|
||||
menu.nav("nighttab");
|
||||
}
|
||||
}, {
|
||||
element: ".control-menu-close",
|
||||
|
||||
@ -20,25 +20,49 @@ var menu = (function() {
|
||||
|
||||
var render = {};
|
||||
|
||||
render.scrollToTop = function() {
|
||||
if (window.innerWidth < 550) {
|
||||
render.scrollToTop = function(name) {
|
||||
if (window.innerWidth < 700) {
|
||||
helper.e(".menu-area").scrollTop = 0;
|
||||
} else {
|
||||
helper.e(".menu-content").scrollTop = 0;
|
||||
if (name) {
|
||||
helper.e(".menu-content-" + name).scrollTop = 0;
|
||||
} else {
|
||||
var allMenuContentArea = helper.eA(".menu-content");
|
||||
allMenuContentArea.forEach(function(arrayItem, index) {
|
||||
arrayItem.scrollTop = 0;
|
||||
});
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
render.nav = function(menuNavButton, menuContentArea) {
|
||||
var allMenuNavButton = helper.eA(".menu-nav-button");
|
||||
var allMenuContentArea = helper.eA(".menu-content-area");
|
||||
allMenuNavButton.forEach(function(arrayItem, index) {
|
||||
render.nav = function(name) {
|
||||
var allMenuNavTab = helper.eA(".menu-nav-tab");
|
||||
var allMenuNavBody = helper.eA(".menu-nav-body");
|
||||
var allMenuContentArea = helper.eA(".menu-content");
|
||||
|
||||
allMenuNavTab.forEach(function(arrayItem, index) {
|
||||
helper.removeClass(arrayItem, "active");
|
||||
});
|
||||
allMenuNavBody.forEach(function(arrayItem, index) {
|
||||
helper.addClass(arrayItem, "is-hidden");
|
||||
});
|
||||
allMenuContentArea.forEach(function(arrayItem, index) {
|
||||
helper.addClass(arrayItem, "is-hidden");
|
||||
});
|
||||
helper.addClass(helper.e(menuNavButton), "active");
|
||||
helper.removeClass(helper.e(menuContentArea), "is-hidden");
|
||||
|
||||
var control = helper.e(".control-menu-" + name);
|
||||
var body = helper.e(".menu-nav-body-" + name);
|
||||
var content = helper.e(".menu-content-" + name);
|
||||
|
||||
if (control) {
|
||||
helper.addClass(control, "active");
|
||||
};
|
||||
if (body) {
|
||||
helper.removeClass(body, "is-hidden");
|
||||
};
|
||||
if (content) {
|
||||
helper.removeClass(content, "is-hidden");
|
||||
};
|
||||
};
|
||||
|
||||
render.tabindex = {
|
||||
@ -78,9 +102,9 @@ var menu = (function() {
|
||||
helper.e(".menu").removeAttribute("style");
|
||||
};
|
||||
|
||||
var nav = function(button, area) {
|
||||
render.nav(button, area);
|
||||
render.scrollToTop();
|
||||
var nav = function(name) {
|
||||
render.nav(name);
|
||||
render.scrollToTop(name);
|
||||
};
|
||||
|
||||
var toggle = function() {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var version = (function() {
|
||||
|
||||
var current = "4.38.0";
|
||||
var current = "4.39.0";
|
||||
|
||||
var name = "Naughty Goose";
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"name": "nightTab",
|
||||
"short_name": "nightTab",
|
||||
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
|
||||
"version": "4.38.0",
|
||||
"version": "4.39.0",
|
||||
"manifest_version": 2,
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "index.html"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user