extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-01-08 15:09:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

[feature] add header vertical align controls

Browse Source
This commit is contained in:
zombieFox 2020-02-18 08:31:17 +00:00
parent b38e9c727b
commit 5c9c0b0cd3
18 changed files with 247 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "nightTab",
"version": "4.39.0",
"version": "4.40.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "nightTab",
"version": "4.39.0",
"version": "4.40.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": {

16
src/css/clock.css
View File

@ -6,24 +6,24 @@
font-weight: var(--theme-font-display-weight);
font-style: var(--theme-font-display-style);
color: rgb(var(--theme-style-text));
min-height: 2.5em;
display: inline-flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
line-height: 1.2;
}
.is-header-item-alignment-left .clock {
.is-header-item-justify-left .clock {
justify-content: flex-start;
text-align: left;
}
.is-header-item-alignment-center .clock {
.is-header-item-justify-center .clock {
justify-content: center;
text-align: center;
}
.is-header-item-alignment-right .clock {
.is-header-item-justify-right .clock {
justify-content: flex-end;
text-align: right;
}
@ -53,19 +53,19 @@
/* min-width: 1.25em; */
}
.is-header-item-alignment-left .clock-item:not(:last-child) {
.is-header-item-justify-left .clock-item:not(:last-child) {
margin-right: 0.2em;
}
.is-header-item-alignment-center .clock-item:not(:first-child) {
.is-header-item-justify-center .clock-item:not(:first-child) {
margin-left: 0.1em;
}
.is-header-item-alignment-center .clock-item:not(:last-child) {
.is-header-item-justify-center .clock-item:not(:last-child) {
margin-right: 0.1em;
}
.is-header-item-alignment-right .clock-item:not(:first-child) {
.is-header-item-justify-right .clock-item:not(:first-child) {
margin-left: 0.2em;
}

16
src/css/date.css
View File

@ -6,24 +6,24 @@
font-weight: var(--theme-font-display-weight);
font-style: var(--theme-font-display-style);
color: rgb(var(--theme-style-text));
min-height: 2.5em;
display: inline-flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
line-height: 1.2;
}
.is-header-item-alignment-left .date {
.is-header-item-justify-left .date {
justify-content: flex-start;
text-align: left;
}
.is-header-item-alignment-center .date {
.is-header-item-justify-center .date {
justify-content: center;
text-align: center;
}
.is-header-item-alignment-right .date {
.is-header-item-justify-right .date {
justify-content: flex-end;
text-align: right;
}
@ -52,19 +52,19 @@
justify-content: center;
}
.is-header-item-alignment-left .date-item:not(:last-child) {
.is-header-item-justify-left .date-item:not(:last-child) {
margin-right: 0.2em;
}
.is-header-item-alignment-center .date-item:not(:first-child) {
.is-header-item-justify-center .date-item:not(:first-child) {
margin-left: 0.1em;
}
.is-header-item-alignment-center .date-item:not(:last-child) {
.is-header-item-justify-center .date-item:not(:last-child) {
margin-right: 0.1em;
}
.is-header-item-alignment-right .date-item:not(:first-child) {
.is-header-item-justify-right .date-item:not(:first-child) {
margin-left: 0.2em;
}

8
src/css/greeting.css
View File

@ -6,24 +6,24 @@
font-weight: var(--theme-font-display-weight);
font-style: var(--theme-font-display-style);
color: rgb(var(--theme-style-text));
min-height: 2.5em;
display: inline-flex;
flex-direction: row;
justify-content: center;
flex-wrap: nowrap;
line-height: 1.2;
}
.is-header-item-alignment-left .greeting {
.is-header-item-justify-left .greeting {
justify-content: flex-start;
text-align: left;
}
.is-header-item-alignment-center .greeting {
.is-header-item-justify-center .greeting {
justify-content: center;
text-align: center;
}
.is-header-item-alignment-right .greeting {
.is-header-item-justify-right .greeting {
justify-content: flex-end;
text-align: right;
}

13
src/css/group.css
View File

@ -40,16 +40,16 @@
transition: padding var(--layout-timing-extra-fast);
}
.is-group-area-alignment-left .group-header {
.is-group-area-justify-left .group-header {
flex-direction: row;
}
.is-group-area-alignment-center .group-header {
.is-group-area-justify-center .group-header {
flex-direction: row;
justify-content: center;
}
.is-group-area-alignment-right .group-header {
.is-group-area-justify-right .group-header {
flex-direction: row-reverse;
justify-content: flex-start;
}
@ -73,7 +73,6 @@
overflow: hidden;
font-size: var(--group-name-size);
transition: height var(--layout-timing-extra-fast);
transition: height var(--layout-timing-extra-fast);
}
.is-group-name-show .group-name {
@ -111,12 +110,12 @@
margin var(--layout-timing-extra-fast) var(--layout-duration-04);
}
.is-edit.is-group-name-show.is-group-area-alignment-left .group-control,
.is-edit.is-group-name-show.is-group-area-alignment-center .group-control {
.is-edit.is-group-name-show.is-group-area-justify-left .group-control,
.is-edit.is-group-name-show.is-group-area-justify-center .group-control {
margin-right: 1em;
}
.is-edit.is-group-name-show.is-group-area-alignment-right .group-control {
.is-edit.is-group-name-show.is-group-area-justify-right .group-control {
margin-left: 1em;
}

76
src/css/header.css
View File

@ -10,15 +10,15 @@
pointer-events: all;
}
.is-header-area-alignment-left .header {
.is-header-area-justify-left .header {
justify-content: flex-start;
}
.is-header-area-alignment-center .header {
.is-header-area-justify-center .header {
justify-content: center;
}
.is-header-area-alignment-right .header {
.is-header-area-justify-right .header {
justify-content: flex-end;
}
@ -115,19 +115,26 @@
position: relative;
display: flex;
flex-direction: row;
align-items: baseline;
flex-wrap: wrap;
}
.is-header-item-alignment-left .header-item-grid {
.is-header-area-align-center .header-item-grid {
align-items: center;
}
.is-header-area-align-baseline .header-item-grid {
align-items: baseline;
}
.is-header-item-justify-left .header-item-grid {
justify-content: flex-start;
}
.is-header-item-alignment-center .header-item-grid {
.is-header-item-justify-center .header-item-grid {
justify-content: center;
}
.is-header-item-alignment-right .header-item-grid {
.is-header-item-justify-right .header-item-grid {
justify-content: flex-end;
}
@ -182,6 +189,7 @@
.is-header-item-newline-menu .header-item-menu {
flex-basis: 100%;
position: relative;
}
.header-item-menu-baseline-alignment-character {
@ -257,48 +265,48 @@
width: var(--header-search-width-size);
}
.is-header-item-alignment-left.is-header-item-newline-search.is-header-search-width-by-custom .header-item-search {
.is-header-item-justify-left.is-header-item-newline-search.is-header-search-width-by-custom .header-item-search {
justify-content: flex-start;
}
.is-header-item-alignment-center.is-header-item-newline-search.is-header-search-width-by-custom .header-item-search {
.is-header-item-justify-center.is-header-item-newline-search.is-header-search-width-by-custom .header-item-search {
justify-content: center;
}
.is-header-item-alignment-right.is-header-item-newline-search.is-header-search-width-by-custom .header-item-search {
.is-header-item-justify-right.is-header-item-newline-search.is-header-search-width-by-custom .header-item-search {
justify-content: flex-end;
}
.is-header-item-alignment-left .header-item-body-greeting,
.is-header-item-alignment-left .header-item-body-clock,
.is-header-item-alignment-left .header-item-body-transitional,
.is-header-item-alignment-left .header-item-body-date,
.is-header-item-alignment-left .header-item-body-search,
.is-header-item-alignment-left .header-item-body-editadd,
.is-header-item-alignment-left .header-item-body-coloraccent,
.is-header-item-alignment-left .header-item-body-menu {
.is-header-item-justify-left .header-item-body-greeting,
.is-header-item-justify-left .header-item-body-clock,
.is-header-item-justify-left .header-item-body-transitional,
.is-header-item-justify-left .header-item-body-date,
.is-header-item-justify-left .header-item-body-search,
.is-header-item-justify-left .header-item-body-editadd,
.is-header-item-justify-left .header-item-body-coloraccent,
.is-header-item-justify-left .header-item-body-menu {
justify-content: flex-start;
}
.is-header-item-alignment-center .header-item-body-greeting,
.is-header-item-alignment-center .header-item-body-clock,
.is-header-item-alignment-center .header-item-body-transitional,
.is-header-item-alignment-center .header-item-body-date,
.is-header-item-alignment-center .header-item-body-search,
.is-header-item-alignment-center .header-item-body-editadd,
.is-header-item-alignment-center .header-item-body-coloraccent,
.is-header-item-alignment-center .header-item-body-menu {
.is-header-item-justify-center .header-item-body-greeting,
.is-header-item-justify-center .header-item-body-clock,
.is-header-item-justify-center .header-item-body-transitional,
.is-header-item-justify-center .header-item-body-date,
.is-header-item-justify-center .header-item-body-search,
.is-header-item-justify-center .header-item-body-editadd,
.is-header-item-justify-center .header-item-body-coloraccent,
.is-header-item-justify-center .header-item-body-menu {
justify-content: center;
}
.is-header-item-alignment-right .header-item-body-greeting,
.is-header-item-alignment-right .header-item-body-clock,
.is-header-item-alignment-right .header-item-body-transitional,
.is-header-item-alignment-right .header-item-body-date,
.is-header-item-alignment-right .header-item-body-search,
.is-header-item-alignment-right .header-item-body-editadd,
.is-header-item-alignment-right .header-item-body-coloraccent,
.is-header-item-alignment-right .header-item-body-menu {
.is-header-item-justify-right .header-item-body-greeting,
.is-header-item-justify-right .header-item-body-clock,
.is-header-item-justify-right .header-item-body-transitional,
.is-header-item-justify-right .header-item-body-date,
.is-header-item-justify-right .header-item-body-search,
.is-header-item-justify-right .header-item-body-editadd,
.is-header-item-justify-right .header-item-body-coloraccent,
.is-header-item-justify-right .header-item-body-menu {
justify-content: flex-end;
}

6
src/css/link.css
View File

@ -9,15 +9,15 @@
display: flex;
}
.is-link-area-alignment-left .link {
.is-link-area-justify-left .link {
align-items: flex-start;
}
.is-link-area-alignment-center .link {
.is-link-area-justify-center .link {
align-items: center;
}
.is-link-area-alignment-right .link {
.is-link-area-justify-right .link {
align-items: flex-end;
}

6
src/css/search.css
View File

@ -14,15 +14,15 @@
transform: translate(0, -50%);
}
.is-header-search-text-alignment-left .search-input {
.is-header-search-text-justify-left .search-input {
text-align: left;
}
.is-header-search-text-alignment-center .search-input {
.is-header-search-text-justify-center .search-input {
text-align: center;
}
.is-header-search-text-alignment-right .search-input {
.is-header-search-text-justify-right .search-input {
text-align: right;
}

8
src/css/transitional.css
View File

@ -6,24 +6,24 @@
font-weight: var(--theme-font-display-weight);
font-style: var(--theme-font-display-style);
color: rgb(var(--theme-color-14));
min-height: 2.5em;
display: inline-flex;
flex-direction: row;
justify-content: center;
flex-wrap: nowrap;
line-height: 1.2;
}
.is-header-item-alignment-left .transitional {
.is-header-item-justify-left .transitional {
justify-content: flex-start;
text-align: left;
}
.is-header-item-alignment-center .transitional {
.is-header-item-justify-center .transitional {
justify-content: center;
text-align: center;
}
.is-header-item-alignment-right .transitional {
.is-header-item-justify-right .transitional {
justify-content: flex-end;
text-align: right;
}

18
src/html/menu/menu-content/bookmarks.html
View File

@ -20,26 +20,26 @@
</div>
<hr>
<div class="form-wrap">
<label class="control-link-area-alignment-label">Horizontal alignment</label>
<label class="control-link-area-justify-label">Horizontal alignment</label>
</div>
<div class="form-wrap">
<div class="form-grid form-grid-3x1 control-link-area-alignment-grid">
<div class="form-grid form-grid-3x1 control-link-area-justify-grid">
<div class="form-wrap">
<input id="control-link-area-alignment-left" class="control-link-area-alignment-left" type="radio" name="control-link-area-alignment" value="left" tabindex="-1">
<label for="control-link-area-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
<input id="control-link-area-justify-left" class="control-link-area-justify-left" type="radio" name="control-link-area-justify" value="left" tabindex="-1">
<label for="control-link-area-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
</div>
<div class="form-wrap">
<input id="control-link-area-alignment-center" class="control-link-area-alignment-center" type="radio" name="control-link-area-alignment" value="center" tabindex="-1">
<label for="control-link-area-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
<input id="control-link-area-justify-center" class="control-link-area-justify-center" type="radio" name="control-link-area-justify" value="center" tabindex="-1">
<label for="control-link-area-justify-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
</div>
<div class="form-wrap">
<input id="control-link-area-alignment-right" class="control-link-area-alignment-right" type="radio" name="control-link-area-alignment" value="right" tabindex="-1">
<label for="control-link-area-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
<input id="control-link-area-justify-right" class="control-link-area-justify-right" type="radio" name="control-link-area-justify" value="right" tabindex="-1">
<label for="control-link-area-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
</div>
</div>
</div>
<div class="form-helper">
<p class="control-link-area-alignment-helper form-helper-item">Effects may not be visible if the Bookmark Area is full width.</p>
<p class="control-link-area-justify-helper form-helper-item">Effects may not be visible if the Bookmark Area is full width.</p>
</div>
</div>
</div>

18
src/html/menu/menu-content/groups.html
View File

@ -23,27 +23,27 @@
<hr>
<div class="form-wrap">
<div class="form-wrap">
<label class="control-group-area-alignment-label">Group name horizontal alignment</label>
<label class="control-group-area-justify-label">Group name horizontal alignment</label>
</div>
<div class="form-wrap">
<div class="form-grid form-grid-3x1 control-group-area-alignment-grid">
<div class="form-grid form-grid-3x1 control-group-area-justify-grid">
<div class="form-wrap">
<input id="control-group-area-alignment-left" class="control-group-area-alignment-left" type="radio" name="control-group-area-alignment" value="left" tabindex="-1">
<label for="control-group-area-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
<input id="control-group-area-justify-left" class="control-group-area-justify-left" type="radio" name="control-group-area-justify" value="left" tabindex="-1">
<label for="control-group-area-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
</div>
<div class="form-wrap">
<input id="control-group-area-alignment-center" class="control-group-area-alignment-center" type="radio" name="control-group-area-alignment" value="center" tabindex="-1">
<label for="control-group-area-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
<input id="control-group-area-justify-center" class="control-group-area-justify-center" type="radio" name="control-group-area-justify" value="center" tabindex="-1">
<label for="control-group-area-justify-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
</div>
<div class="form-wrap">
<input id="control-group-area-alignment-right" class="control-group-area-alignment-right" type="radio" name="control-group-area-alignment" value="right" tabindex="-1">
<label for="control-group-area-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
<input id="control-group-area-justify-right" class="control-group-area-justify-right" type="radio" name="control-group-area-justify" value="right" tabindex="-1">
<label for="control-group-area-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
</div>
</div>
</div>
</div>
<div class="form-helper">
<p class="control-group-area-alignment-helper form-helper-item">Effects may not be visible if the Group Name is not shown.</p>
<p class="control-group-area-justify-helper form-helper-item">Effects may not be visible if the Group Name is not shown.</p>
</div>
</div>
</div>

72
src/html/menu/menu-content/header.html
View File

@ -21,56 +21,74 @@
<hr>
<div class="form-wrap">
<div class="form-wrap">
<label class="control-header-area-alignment-label">Area horizontal alignment</label>
<label class="control-header-area-justify-label">Area horizontal alignment</label>
</div>
<div class="form-wrap">
<div class="form-grid form-grid-3x1 control-header-area-alignment-grid">
<div class="form-grid form-grid-3x1 control-header-area-justify-grid">
<div class="form-wrap">
<input id="control-header-area-alignment-left" class="control-header-area-alignment-left" type="radio" name="control-header-area-alignment" value="left" tabindex="-1">
<label for="control-header-area-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
<input id="control-header-area-justify-left" class="control-header-area-justify-left" type="radio" name="control-header-area-justify" value="left" tabindex="-1">
<label for="control-header-area-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
</div>
<div class="form-wrap">
<input id="control-header-area-alignment-center" class="control-header-area-alignment-center" type="radio" name="control-header-area-alignment" value="center" tabindex="-1">
<label for="control-header-area-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
<input id="control-header-area-justify-center" class="control-header-area-justify-center" type="radio" name="control-header-area-justify" value="center" tabindex="-1">
<label for="control-header-area-justify-center"><span class="label-icon"></span> <span class="sr-only">Centre</span></label>
</div>
<div class="form-wrap">
<input id="control-header-area-alignment-right" class="control-header-area-alignment-right" type="radio" name="control-header-area-alignment" value="right" tabindex="-1">
<label for="control-header-area-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
<input id="control-header-area-justify-right" class="control-header-area-justify-right" type="radio" name="control-header-area-justify" value="right" tabindex="-1">
<label for="control-header-area-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
</div>
</div>
</div>
</div>
<div class="form-helper">
<p class="control-header-area-alignment-helper form-helper-item">Effects may not be visible if the Header Area is full width.</p>
<p class="control-header-area-justify-helper form-helper-item">Effects may not be visible if the Header Area is full width.</p>
</div>
<hr>
<div class="form-wrap">
<label class="control-header-area-align-label">Header item vertical alignment</label>
</div>
<div class="form-wrap">
<input id="control-header-area-align-center" class="control-header-area-align-center" type="radio" name="control-header-area-align" value="center" tabindex="-1">
<label for="control-header-area-align-center"><span class="label-icon"></span> Center</label>
</div>
<div class="form-helper">
<p class="control-header-area-align-center-helper form-helper-item">Header items aligned to each others centres.</p>
</div>
<div class="form-wrap">
<input id="control-header-area-align-baseline" class="control-header-area-align-baseline" type="radio" name="control-header-area-align" value="baseline" tabindex="-1">
<label for="control-header-area-align-baseline"><span class="label-icon"></span> Baseline</label>
</div>
<div class="form-helper">
<p class="control-header-area-align-baseline-helper form-helper-item">Header items aligned to the text baseline. Useful for when the Clock, Date and other text is sized large and need to sit on a line.</p>
</div>
<hr>
<div class="form-wrap">
<div class="form-wrap">
<label class="control-header-item-alignment-label">Item horizontal alignment</label>
<label class="control-header-item-justify-label">Item horizontal alignment</label>
</div>
<div class="form-wrap">
<div class="form-grid form-grid-3x1 control-header-item-alignment-grid">
<div class="form-grid form-grid-3x1 control-header-item-justify-grid">
<div class="form-wrap">
<input id="control-header-item-alignment-left" class="control-header-item-alignment-left" type="radio" name="control-header-item-alignment" value="left" tabindex="-1">
<label for="control-header-item-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
<input id="control-header-item-justify-left" class="control-header-item-justify-left" type="radio" name="control-header-item-justify" value="left" tabindex="-1">
<label for="control-header-item-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
</div>
<div class="form-wrap">
<input id="control-header-item-alignment-center" class="control-header-item-alignment-center" type="radio" name="control-header-item-alignment" value="center" tabindex="-1">
<label for="control-header-item-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
<input id="control-header-item-justify-center" class="control-header-item-justify-center" type="radio" name="control-header-item-justify" value="center" tabindex="-1">
<label for="control-header-item-justify-center"><span class="label-icon"></span> <span class="sr-only">Centre</span></label>
</div>
<div class="form-wrap">
<input id="control-header-item-alignment-right" class="control-header-item-alignment-right" type="radio" name="control-header-item-alignment" value="right" tabindex="-1">
<label for="control-header-item-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
<input id="control-header-item-justify-right" class="control-header-item-justify-right" type="radio" name="control-header-item-justify" value="right" tabindex="-1">
<label for="control-header-item-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
</div>
</div>
</div>
</div>
<div class="form-helper">
<p class="control-header-item-alignment-helper form-helper-item">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
<p class="control-header-item-justify-helper form-helper-item">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
</div>
<hr>
<div class="form-wrap">
<label class="control-header-item-alignment-label">Header item order</label>
<label class="control-header-order-label">Header item order</label>
</div>
<div class="form-wrap">
<div class="header-order"></div>
@ -537,21 +555,21 @@
</div>
<hr>
<div class="form-wrap">
<label class="control-header-search-text-alignment-label">Align Text</label>
<label class="control-header-search-text-justify-label">Align Text</label>
</div>
<div class="form-wrap">
<div class="form-grid form-grid-3x1 control-header-search-text-alignment-grid">
<div class="form-grid form-grid-3x1 control-header-search-text-justify-grid">
<div class="form-wrap">
<input id="control-header-search-text-alignment-left" class="control-header-search-text-alignment-left" type="radio" name="control-header-search-text-alignment" value="left" tabindex="-1">
<label for="control-header-search-text-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
<input id="control-header-search-text-justify-left" class="control-header-search-text-justify-left" type="radio" name="control-header-search-text-justify" value="left" tabindex="-1">
<label for="control-header-search-text-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
</div>
<div class="form-wrap">
<input id="control-header-search-text-alignment-center" class="control-header-search-text-alignment-center" type="radio" name="control-header-search-text-alignment" value="center" tabindex="-1">
<label for="control-header-search-text-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
<input id="control-header-search-text-justify-center" class="control-header-search-text-justify-center" type="radio" name="control-header-search-text-justify" value="center" tabindex="-1">
<label for="control-header-search-text-justify-center"><span class="label-icon"></span> <span class="sr-only">Centre</span></label>
</div>
<div class="form-wrap">
<input id="control-header-search-text-alignment-right" class="control-header-search-text-alignment-right" type="radio" name="control-header-search-text-alignment" value="right" tabindex="-1">
<label for="control-header-search-text-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
<input id="control-header-search-text-justify-right" class="control-header-search-text-justify-right" type="radio" name="control-header-search-text-justify" value="right" tabindex="-1">
<label for="control-header-search-text-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
</div>
</div>
</div>

144
src/js/control.js
View File

@ -770,8 +770,8 @@ var control = (function() {
render.update.control.menu();
}
}, {
element: ".control-header-area-alignment-left",
path: "header.area.alignment",
element: ".control-header-area-justify-left",
path: "header.area.justify",
type: "radio",
additionalEvents: [{
event: "change",
@ -786,8 +786,8 @@ var control = (function() {
render.class();
}
}, {
element: ".control-header-area-alignment-center",
path: "header.area.alignment",
element: ".control-header-area-justify-center",
path: "header.area.justify",
type: "radio",
additionalEvents: [{
event: "change",
@ -802,8 +802,8 @@ var control = (function() {
render.class();
}
}, {
element: ".control-header-area-alignment-right",
path: "header.area.alignment",
element: ".control-header-area-justify-right",
path: "header.area.justify",
type: "radio",
additionalEvents: [{
event: "change",
@ -818,22 +818,36 @@ var control = (function() {
render.class();
}
}, {
element: ".control-header-item-alignment-left",
path: "header.item.alignment",
element: ".control-header-area-align-center",
path: "header.area.align",
type: "radio",
func: function() {
render.class();
}
}, {
element: ".control-header-item-alignment-center",
path: "header.item.alignment",
element: ".control-header-area-align-baseline",
path: "header.area.align",
type: "radio",
func: function() {
render.class();
}
}, {
element: ".control-header-item-alignment-right",
path: "header.item.alignment",
element: ".control-header-item-justify-left",
path: "header.item.justify",
type: "radio",
func: function() {
render.class();
}
}, {
element: ".control-header-item-justify-center",
path: "header.item.justify",
type: "radio",
func: function() {
render.class();
}
}, {
element: ".control-header-item-justify-right",
path: "header.item.justify",
type: "radio",
func: function() {
render.class();
@ -2052,22 +2066,22 @@ var control = (function() {
search.render.engine();
}
}, {
element: ".control-header-search-text-alignment-left",
path: "header.search.text.alignment",
element: ".control-header-search-text-justify-left",
path: "header.search.text.justify",
type: "radio",
func: function() {
render.class();
}
}, {
element: ".control-header-search-text-alignment-center",
path: "header.search.text.alignment",
element: ".control-header-search-text-justify-center",
path: "header.search.text.justify",
type: "radio",
func: function() {
render.class();
}
}, {
element: ".control-header-search-text-alignment-right",
path: "header.search.text.alignment",
element: ".control-header-search-text-justify-right",
path: "header.search.text.justify",
type: "radio",
func: function() {
render.class();
@ -2911,22 +2925,22 @@ var control = (function() {
render.update.control.menu();
}
}, {
element: ".control-group-area-alignment-left",
path: "group.area.alignment",
element: ".control-group-area-justify-left",
path: "group.area.justify",
type: "radio",
func: function() {
render.class();
}
}, {
element: ".control-group-area-alignment-center",
path: "group.area.alignment",
element: ".control-group-area-justify-center",
path: "group.area.justify",
type: "radio",
func: function() {
render.class();
}
}, {
element: ".control-group-area-alignment-right",
path: "group.area.alignment",
element: ".control-group-area-justify-right",
path: "group.area.justify",
type: "radio",
func: function() {
render.class();
@ -3204,8 +3218,8 @@ var control = (function() {
render.update.control.menu();
}
}, {
element: ".control-link-area-alignment-left",
path: "link.area.alignment",
element: ".control-link-area-justify-left",
path: "link.area.justify",
type: "radio",
additionalEvents: [{
event: "change",
@ -3220,8 +3234,8 @@ var control = (function() {
render.class();
}
}, {
element: ".control-link-area-alignment-center",
path: "link.area.alignment",
element: ".control-link-area-justify-center",
path: "link.area.justify",
type: "radio",
additionalEvents: [{
event: "change",
@ -3236,8 +3250,8 @@ var control = (function() {
render.class();
}
}, {
element: ".control-link-area-alignment-right",
path: "link.area.alignment",
element: ".control-link-area-justify-right",
path: "link.area.justify",
type: "radio",
additionalEvents: [{
event: "change",
@ -5951,19 +5965,25 @@ var control = (function() {
header: {
area: [{
remove: [
"is-header-area-alignment-left",
"is-header-area-alignment-center",
"is-header-area-alignment-right"
"is-header-area-justify-left",
"is-header-area-justify-center",
"is-header-area-justify-right"
],
name: "is-header-area-alignment-" + state.get.current().header.area.alignment
name: "is-header-area-justify-" + state.get.current().header.area.justify
}, {
remove: [
"is-header-area-align-center",
"is-header-area-align-baseline"
],
name: "is-header-area-align-" + state.get.current().header.area.align
}],
item: [{
remove: [
"is-header-item-alignment-left",
"is-header-item-alignment-center",
"is-header-item-alignment-right"
"is-header-item-justify-left",
"is-header-item-justify-center",
"is-header-item-justify-right"
],
name: "is-header-item-alignment-" + state.get.current().header.item.alignment
name: "is-header-item-justify-" + state.get.current().header.item.justify
}],
greeting: [{
remove: [
@ -6003,14 +6023,14 @@ var control = (function() {
}],
search: [{
remove: [
"is-header-search-text-alignment-left",
"is-header-search-text-alignment-center",
"is-header-search-text-alignment-right"
"is-header-search-text-justify-left",
"is-header-search-text-justify-center",
"is-header-search-text-justify-right"
],
condition: function() {
return state.get.current().header.search.show;
},
name: "is-header-search-text-alignment-" + state.get.current().header.search.text.alignment
name: "is-header-search-text-justify-" + state.get.current().header.search.text.justify
}, {
remove: [
"is-header-search-width-by-custom",
@ -6024,7 +6044,7 @@ var control = (function() {
condition: function() {
return state.get.current().header.search.show;
},
name: "is-header-search-text-alignment-" + state.get.current().header.search.text.alignment
name: "is-header-search-text-justify-" + state.get.current().header.search.text.justify
}, {
remove: [
"is-header-item-newline-search"
@ -6125,11 +6145,11 @@ var control = (function() {
group: {
area: [{
remove: [
"is-group-area-alignment-left",
"is-group-area-alignment-center",
"is-group-area-alignment-right"
"is-group-area-justify-left",
"is-group-area-justify-center",
"is-group-area-justify-right"
],
name: "is-group-area-alignment-" + state.get.current().group.area.alignment
name: "is-group-area-justify-" + state.get.current().group.area.justify
}],
name: [{
remove: [
@ -6167,14 +6187,14 @@ var control = (function() {
name: "is-link-show"
}, {
remove: [
"is-link-area-alignment-left",
"is-link-area-alignment-center",
"is-link-area-alignment-right"
"is-link-area-justify-left",
"is-link-area-justify-center",
"is-link-area-justify-right"
],
condition: function() {
return state.get.current().link.show;
},
name: "is-link-area-alignment-" + state.get.current().link.area.alignment
name: "is-link-area-justify-" + state.get.current().link.area.justify
}, {
remove: [
"is-link-display-alignment-topleft",
@ -6692,11 +6712,11 @@ var control = (function() {
".control-header-search-engine-giphy",
".control-header-search-engine-bing",
".control-header-search-engine-custom",
".control-header-search-text-alignment-grid",
".control-header-search-text-alignment-label",
".control-header-search-text-alignment-left",
".control-header-search-text-alignment-center",
".control-header-search-text-alignment-right",
".control-header-search-text-justify-grid",
".control-header-search-text-justify-label",
".control-header-search-text-justify-left",
".control-header-search-text-justify-center",
".control-header-search-text-justify-right",
"[for=control-header-search-size-range]",
".control-header-search-size-range",
".control-header-search-size-number",
@ -6852,12 +6872,12 @@ var control = (function() {
".control-link-area-width-default",
".control-link-area-width-match",
".control-link-area-width-helper",
".control-link-area-alignment-grid",
".control-link-area-alignment-label",
".control-link-area-alignment-left",
".control-link-area-alignment-center",
".control-link-area-alignment-right",
".control-link-area-alignment-helper",
".control-link-area-justify-grid",
".control-link-area-justify-label",
".control-link-area-justify-left",
".control-link-area-justify-center",
".control-link-area-justify-right",
".control-link-area-justify-helper",
"[for=control-link-item-size-range]",
".control-link-item-size-range",
".control-link-item-size-number",

11
src/js/state.js
View File

@ -6,10 +6,11 @@ var state = (function() {
header: {
area: {
width: 100,
alignment: "center"
justify: "center",
align: "center"
},
item: {
alignment: "left"
justify: "left"
},
greeting: {
show: false,
@ -114,7 +115,7 @@ var state = (function() {
}
},
text: {
alignment: "center"
justify: "center"
},
size: 1,
newLine: false
@ -163,7 +164,7 @@ var state = (function() {
link: {
area: {
width: 100,
alignment: "center"
justify: "center"
},
item: {
color: {
@ -222,7 +223,7 @@ var state = (function() {
},
group: {
area: {
alignment: "left"
justify: "left"
},
name: {
show: true,

14
src/js/update.js
View File

@ -847,6 +847,20 @@ var update = (function() {
"4.38.0": function(data) {
data.state.theme.color.generated = {};
return data;
},
"4.40.0": function(data) {
data.state.header.area.justify = data.state.header.area.alignment;
delete data.state.header.area.alignment;
data.state.header.item.justify = data.state.header.item.alignment;
delete data.state.header.item.alignment;
data.state.header.search.text.justify = data.state.header.search.text.alignment;
delete data.state.header.search.text.alignment;
data.state.link.area.justify = data.state.link.area.alignment;
delete data.state.link.area.alignment;
data.state.group.area.justify = data.state.group.area.alignment;
delete data.state.group.area.alignment;
data.state.group.area.align = "center";
return data;
}
};

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() {
var current = "4.39.0";
var current = "4.40.0";
var name = "Naughty Goose";

2
src/manifest.json
View File

@ -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.39.0",
"version": "4.40.0",
"manifest_version": 2,
"chrome_url_overrides": {
"newtab": "index.html"