mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-01-23 14:28:50 +01:00
[refactor] improve controls
This commit is contained in:
Kuldeep M
parent
07483c7ce5
commit
2e6ca3ee62
@ -103,14 +103,14 @@
|
||||
--breakpoint-xxl: 1600px;
|
||||
}
|
||||
|
||||
:root.is-bookmarks-style-block {
|
||||
:root.is-link-style-block {
|
||||
--link-items-width: 20%;
|
||||
--link-items-height: 10em;
|
||||
--url-height: 20%;
|
||||
--edit-height: 30%;
|
||||
}
|
||||
|
||||
:root.is-bookmarks-style-list {
|
||||
:root.is-link-style-list {
|
||||
--link-items-width: 20%;
|
||||
--link-items-height: 4em;
|
||||
--url-height: 30%;
|
||||
|
||||
@ -146,3 +146,9 @@ button [class*=" button-"]:last-child,
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.button-wrap {
|
||||
padding: 0.5em 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.is-bookmarks-show-link .header {
|
||||
.is-link-show .header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -113,12 +113,12 @@
|
||||
width: var(--header-search-width);
|
||||
}
|
||||
|
||||
.is-header-search-width-auto .header-search {
|
||||
.is-header-search-width-style-auto .header-search {
|
||||
flex-grow: 1;
|
||||
min-width: 10em;
|
||||
}
|
||||
|
||||
.is-header-search-width-custom .header-search {
|
||||
.is-header-search-width-style-custom .header-search {
|
||||
width: var(--header-search-width);
|
||||
}
|
||||
|
||||
@ -136,10 +136,10 @@
|
||||
.is-header-search-show .header-search,
|
||||
.is-header-date-show .header-date,
|
||||
.is-header-clock-show .header-clock,
|
||||
.is-header-edit-add .header-edit-add,
|
||||
.is-header-accent .header-accent,
|
||||
.is-header-greeting .header-greeting,
|
||||
.is-header-transitional .header-transitional,
|
||||
.is-header-edit-add-show .header-edit-add,
|
||||
.is-header-accent-show .header-accent,
|
||||
.is-header-greeting-show .header-greeting,
|
||||
.is-header-transitional-show .header-transitional,
|
||||
.is-menu .header-menu {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
102
css/link.css
102
css/link.css
@ -5,7 +5,7 @@
|
||||
z-index: var(--z-index-link);
|
||||
}
|
||||
|
||||
.is-bookmarks-show-link .link {
|
||||
.is-link-show .link {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -29,13 +29,13 @@
|
||||
width: var(--link-area-width);
|
||||
}
|
||||
|
||||
.is-bookmarks-fit-best .link-area {
|
||||
.is-link-fit-best .link-area {
|
||||
display: grid;
|
||||
grid-auto-rows: 1fr;
|
||||
grid-gap: calc(var(--gutter) * 2);
|
||||
}
|
||||
|
||||
.is-bookmarks-fit-custom .link-area {
|
||||
.is-link-fit-custom .link-area {
|
||||
margin-top: calc(var(--gutter) * -1);
|
||||
padding-bottom: calc(var(--gutter) * 3);
|
||||
padding-left: calc(var(--gutter) * 3);
|
||||
@ -44,15 +44,15 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.is-bookmarks-fit-custom.is-link-items-alignment-horizontal-left .link-area {
|
||||
.is-link-fit-custom.is-link-items-alignment-horizontal-left .link-area {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-bookmarks-fit-custom.is-link-items-alignment-horizontal-center .link-area {
|
||||
.is-link-fit-custom.is-link-items-alignment-horizontal-center .link-area {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-bookmarks-fit-custom.is-link-items-alignment-horizontal-right .link-area {
|
||||
.is-link-fit-custom.is-link-items-alignment-horizontal-right .link-area {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@ -61,11 +61,11 @@
|
||||
padding-top: calc(var(--gutter) * 4);
|
||||
}
|
||||
|
||||
.is-bookmarks-fit-best.is-bookmarks-style-block .link-area {
|
||||
.is-link-fit-best.is-link-style-block .link-area {
|
||||
grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
|
||||
}
|
||||
|
||||
.is-bookmarks-fit-best.is-bookmarks-style-list .link-area {
|
||||
.is-link-fit-best.is-link-style-list .link-area {
|
||||
grid-template-columns: repeat(auto-fill, minmax(18em, 1fr));
|
||||
}
|
||||
|
||||
@ -89,11 +89,11 @@
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.is-bookmarks-fit-best .link-item {
|
||||
.is-link-fit-best .link-item {
|
||||
height: var(--link-items-height);
|
||||
}
|
||||
|
||||
.is-bookmarks-fit-custom .link-item {
|
||||
.is-link-fit-custom .link-item {
|
||||
height: var(--link-items-height);
|
||||
width: var(--link-items-width);
|
||||
margin: var(--gutter);
|
||||
@ -128,67 +128,67 @@
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.is-bookmarks-style-block .link-panel-front {
|
||||
.is-link-style-block .link-panel-front {
|
||||
padding: 1em;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.is-bookmarks-style-block.is-link-display-alignment-horizontal-left .link-panel-front {
|
||||
.is-link-style-block.is-link-display-alignment-horizontal-left .link-panel-front {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-bookmarks-style-block.is-link-display-alignment-horizontal-center .link-panel-front {
|
||||
.is-link-style-block.is-link-display-alignment-horizontal-center .link-panel-front {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-bookmarks-style-block.is-link-display-alignment-horizontal-right .link-panel-front {
|
||||
.is-link-style-block.is-link-display-alignment-horizontal-right .link-panel-front {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.is-bookmarks-style-block.is-link-display-alignment-vertical-top .link-panel-front {
|
||||
.is-link-style-block.is-link-display-alignment-vertical-top .link-panel-front {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-bookmarks-style-block.is-link-display-alignment-vertical-center .link-panel-front {
|
||||
.is-link-style-block.is-link-display-alignment-vertical-center .link-panel-front {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-bookmarks-style-block.is-link-display-alignment-vertical-bottom .link-panel-front {
|
||||
.is-link-style-block.is-link-display-alignment-vertical-bottom .link-panel-front {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.is-bookmarks-style-list .link-panel-front {
|
||||
.is-link-style-list .link-panel-front {
|
||||
padding: 0.5em 1em;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.is-bookmarks-style-list.is-link-display-alignment-horizontal-left .link-panel-front {
|
||||
.is-link-style-list.is-link-display-alignment-horizontal-left .link-panel-front {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-bookmarks-style-list.is-link-display-alignment-horizontal-center .link-panel-front {
|
||||
.is-link-style-list.is-link-display-alignment-horizontal-center .link-panel-front {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-bookmarks-style-list.is-link-display-alignment-horizontal-right .link-panel-front {
|
||||
.is-link-style-list.is-link-display-alignment-horizontal-right .link-panel-front {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.is-bookmarks-style-list.is-link-display-alignment-vertical-top .link-panel-front {
|
||||
.is-link-style-list.is-link-display-alignment-vertical-top .link-panel-front {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-bookmarks-style-list.is-link-display-alignment-vertical-center .link-panel-front {
|
||||
.is-link-style-list.is-link-display-alignment-vertical-center .link-panel-front {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-bookmarks-style-list.is-link-display-alignment-vertical-bottom .link-panel-front {
|
||||
.is-link-style-list.is-link-display-alignment-vertical-bottom .link-panel-front {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.is-bookmarks-show-url .link-item:focus .link-panel-front,
|
||||
.is-bookmarks-show-url .link-item:focus-within .link-panel-front,
|
||||
.is-bookmarks-show-url .link-item:hover .link-panel-front {
|
||||
.is-link-show-url .link-item:focus .link-panel-front,
|
||||
.is-link-show-url .link-item:focus-within .link-panel-front,
|
||||
.is-link-show-url .link-item:hover .link-panel-front {
|
||||
height: calc(100% - var(--url-height));
|
||||
}
|
||||
|
||||
@ -270,7 +270,7 @@
|
||||
transition: all var(--animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.is-bookmarks-show-url .link-url {
|
||||
.is-link-show-url .link-url {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -301,11 +301,11 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.is-bookmarks-url-dark .link-url-text {
|
||||
.is-link-url-dark .link-url-text {
|
||||
color: rgb(var(--black));
|
||||
}
|
||||
|
||||
.is-bookmarks-url-light .link-url-text {
|
||||
.is-link-url-light .link-url-text {
|
||||
color: rgb(var(--white));
|
||||
}
|
||||
|
||||
@ -314,7 +314,7 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.is-bookmarks-show-display .link-display {
|
||||
.is-link-display-show .link-display {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -337,21 +337,21 @@
|
||||
transition: color var(--animation-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.is-bookmarks-style-block .link-display-letter,
|
||||
.is-bookmarks-style-list .link-display-letter {
|
||||
.is-link-style-block .link-display-letter,
|
||||
.is-link-style-list .link-display-letter {
|
||||
font-size: var(--link-display-letter-size);
|
||||
}
|
||||
|
||||
.is-bookmarks-style-block .link-display-icon,
|
||||
.is-bookmarks-style-list .link-display-icon {
|
||||
.is-link-style-block .link-display-icon,
|
||||
.is-link-style-list .link-display-icon {
|
||||
font-size: var(--link-display-icon-size);
|
||||
}
|
||||
|
||||
.is-bookmarks-style-block.is-bookmarks-show-name.is-bookmarks-show-display .link-panel-front>*:not(:only-child):not(:last-child) {
|
||||
.is-link-style-block.is-link-name-show.is-link-display-show .link-panel-front>*:not(:only-child):not(:last-child) {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.is-bookmarks-style-list.is-bookmarks-show-name.is-bookmarks-show-display .link-panel-front>*:not(:only-child):not(:last-child) {
|
||||
.is-link-style-list.is-link-name-show.is-link-display-show .link-panel-front>*:not(:only-child):not(:last-child) {
|
||||
margin-right: 0.5em
|
||||
}
|
||||
|
||||
@ -389,7 +389,7 @@
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.is-bookmarks-show-name .link-name {
|
||||
.is-link-name-show .link-name {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -410,42 +410,42 @@
|
||||
color: rgb(var(--gray-16));
|
||||
}
|
||||
|
||||
.is-bookmarks-fit-best .link-empty {
|
||||
.is-link-fit-best .link-empty {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: -1;
|
||||
}
|
||||
|
||||
.is-bookmarks-fit-custom .link-empty {
|
||||
.is-link-fit-custom .link-empty {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.is-bookmarks-style-list .link-name {
|
||||
.is-link-style-list .link-name {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.is-bookmarks-edit .link-panel-front,
|
||||
.is-bookmarks-edit .link-item:hover .link-panel-front,
|
||||
.is-bookmarks-edit .link-item:focus .link-panel-front {
|
||||
.is-link-edit .link-panel-front,
|
||||
.is-link-edit .link-item:hover .link-panel-front,
|
||||
.is-link-edit .link-item:focus .link-panel-front {
|
||||
height: calc(100% - var(--edit-height));
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.is-bookmarks-edit.is-bookmarks-show-url .link-item:focus .link-panel-front,
|
||||
.is-bookmarks-edit.is-bookmarks-show-url .link-item:focus-within .link-panel-front,
|
||||
.is-bookmarks-edit.is-bookmarks-show-url .link-item:hover .link-panel-front {
|
||||
.is-link-edit.is-link-show-url .link-item:focus .link-panel-front,
|
||||
.is-link-edit.is-link-show-url .link-item:focus-within .link-panel-front,
|
||||
.is-link-edit.is-link-show-url .link-item:hover .link-panel-front {
|
||||
height: calc(100% - var(--edit-height));
|
||||
}
|
||||
|
||||
.is-bookmarks-edit .link-control {
|
||||
.is-link-edit .link-control {
|
||||
height: var(--edit-height);
|
||||
}
|
||||
|
||||
.is-bookmarks-edit .link-item:hover .link-url,
|
||||
.is-bookmarks-edit .link-item:focus .link-url {
|
||||
.is-link-edit .link-item:hover .link-url,
|
||||
.is-link-edit .link-item:focus .link-url {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.is-bookmarks-edit .link-control-item {
|
||||
.is-link-edit .link-control-item {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
|
||||
100
index.html
100
index.html
@ -168,7 +168,7 @@
|
||||
<div class="menu-item-form">
|
||||
<div class="input-wrap">
|
||||
<label for="control-layout-title">Title</label>
|
||||
<input id="control-layout-title" class="control-layout-title" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="New Tab" tabindex="1">
|
||||
<input id="control-layout-title" class="control-layout-title mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="New Tab" tabindex="1">
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
@ -185,7 +185,7 @@
|
||||
<h1 class="menu-item-header-text">Area</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="input-wrap mb-3">
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-area-width">Width</label>
|
||||
<input id="control-header-area-width" class="control-header-area-width" type="range" min="10" max="100" value="0" tabindex="1">
|
||||
<p class="input-helper small muted">Max width is defined by Layout Area Width.</p>
|
||||
@ -235,6 +235,7 @@
|
||||
<label for="control-header-greeting-show">Show</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-greeting-type-good" class="control-header-greeting-type-good" type="radio" name="control-header-greeting-type" value="good" tabindex="1">
|
||||
<label for="control-header-greeting-type-good">"Good morning..."</label>
|
||||
@ -250,7 +251,7 @@
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-greeting-name">Name</label>
|
||||
<input id="control-header-greeting-name" class="control-header-greeting-name" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Nickname, alias or superhero name" tabindex="1">
|
||||
<input id="control-header-greeting-name" class="control-header-greeting-name mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Nickname, alias or superhero name" tabindex="1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -266,6 +267,7 @@
|
||||
<p class="input-helper small muted">Available when Date or Time is shown.</p>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-transitional-type-timeanddate" class="control-header-transitional-type-timeanddate" type="radio" name="control-header-transitional-type" value="timeanddate" tabindex="1">
|
||||
<label for="control-header-transitional-type-timeanddate">"The time and date is"</label>
|
||||
@ -288,12 +290,12 @@
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-clock-hours-number" class="control-header-clock-hours-number" type="radio" name="control-header-clock-hours" value="number" tabindex="1">
|
||||
<label for="control-header-clock-hours-number">As number</label>
|
||||
<input id="control-header-clock-hours-display-number" class="control-header-clock-hours-display-number" type="radio" name="control-header-clock-hours" value="number" tabindex="1">
|
||||
<label for="control-header-clock-hours-display-number">As number</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-clock-hours-word" class="control-header-clock-hours-word" type="radio" name="control-header-clock-hours" value="word" tabindex="1">
|
||||
<label for="control-header-clock-hours-word">As word</label>
|
||||
<input id="control-header-clock-hours-display-word" class="control-header-clock-hours-display-word" type="radio" name="control-header-clock-hours" value="word" tabindex="1">
|
||||
<label for="control-header-clock-hours-display-word">As word</label>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
@ -303,12 +305,12 @@
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-clock-minutes-number" class="control-header-clock-minutes-number" type="radio" name="control-header-clock-minutes" value="number" tabindex="1">
|
||||
<label for="control-header-clock-minutes-number">As number</label>
|
||||
<input id="control-header-clock-minutes-display-number" class="control-header-clock-minutes-display-number" type="radio" name="control-header-clock-minutes" value="number" tabindex="1">
|
||||
<label for="control-header-clock-minutes-display-number">As number</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-clock-minutes-word" class="control-header-clock-minutes-word" type="radio" name="control-header-clock-minutes" value="word" tabindex="1">
|
||||
<label for="control-header-clock-minutes-word">As word</label>
|
||||
<input id="control-header-clock-minutes-display-word" class="control-header-clock-minutes-display-word" type="radio" name="control-header-clock-minutes" value="word" tabindex="1">
|
||||
<label for="control-header-clock-minutes-display-word">As word</label>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
@ -318,12 +320,12 @@
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-clock-seconds-number" class="control-header-clock-seconds-number" type="radio" name="control-header-clock-seconds" value="number" tabindex="1">
|
||||
<label for="control-header-clock-seconds-number">As number</label>
|
||||
<input id="control-header-clock-seconds-display-number" class="control-header-clock-seconds-display-number" type="radio" name="control-header-clock-seconds" value="number" tabindex="1">
|
||||
<label for="control-header-clock-seconds-display-number">As number</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-clock-seconds-word" class="control-header-clock-seconds-word" type="radio" name="control-header-clock-seconds" value="word" tabindex="1">
|
||||
<label for="control-header-clock-seconds-word">As word</label>
|
||||
<input id="control-header-clock-seconds-display-word" class="control-header-clock-seconds-display-word" type="radio" name="control-header-clock-seconds" value="word" tabindex="1">
|
||||
<label for="control-header-clock-seconds-display-word">As word</label>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
@ -479,6 +481,7 @@
|
||||
<label for="control-header-search-show">Show</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<hr>
|
||||
<label class="control-header-search-width-style-label">Search box size</label>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-search-width-style-auto" class="control-header-search-width-style-auto" type="radio" name="control-header-search-width" value="auto" tabindex="1">
|
||||
@ -526,7 +529,7 @@
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-search-engine-custom-name">Name</label>
|
||||
<input id="control-header-search-engine-custom-name" class="control-header-search-engine-custom-name" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search engine name" tabindex="1">
|
||||
<input id="control-header-search-engine-custom-name" class="control-header-search-engine-custom-name mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search engine name" tabindex="1">
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-search-engine-custom-url">URL</label>
|
||||
@ -561,6 +564,7 @@
|
||||
<input id="control-header-edit-add-show" class="control-header-edit-add-show" type="checkbox" tabindex="1">
|
||||
<label for="control-header-edit-add-show">Show Edit/Add</label>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-accent-show" class="control-header-accent-show" type="checkbox" tabindex="1">
|
||||
<label for="control-header-accent-show">Show Accent</label>
|
||||
@ -577,6 +581,7 @@
|
||||
<label for="control-header-shade-show">Show</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-shade-style-always" class="control-header-shade-style-always" type="radio" name="control-header-shade-style" value="always" tabindex="1">
|
||||
<label for="control-header-shade-style-always">Always visible</label>
|
||||
@ -633,7 +638,7 @@
|
||||
<h1 class="menu-item-header-text">Area</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="input-wrap mb-3">
|
||||
<div class="input-wrap">
|
||||
<label for="control-link-area-width">Width</label>
|
||||
<input id="control-link-area-width" class="control-link-area-width" type="range" min="10" max="100" value="0" tabindex="1">
|
||||
<p class="input-helper small muted">Max width is defined by Layout Area Width.</p>
|
||||
@ -668,6 +673,7 @@
|
||||
<label for="control-link-link-show">Show</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-display-show" class="control-link-display-show" type="checkbox" tabindex="1">
|
||||
<label for="control-link-display-show">Letter/Icon</label>
|
||||
@ -682,6 +688,7 @@
|
||||
<input id="control-link-display-icon-size" class="control-link-display-icon-size" type="range" min="1" max="3000" value="0" tabindex="1">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-name-show" class="control-link-name-show" type="checkbox" tabindex="1">
|
||||
<label for="control-link-name-show">Names</label>
|
||||
@ -702,6 +709,34 @@
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<label class="control-link-display-alignment-horizontal-label">Content Horizontal Alignment</label>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-display-alignment-horizontal-left" class="control-link-display-alignment-horizontal-left" type="radio" name="control-link-display-alignment-horizontal" value="left" tabindex="1">
|
||||
<label for="control-link-display-alignment-horizontal-left">Left</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-display-alignment-horizontal-center" class="control-link-display-alignment-horizontal-center" type="radio" name="control-link-display-alignment-horizontal" value="center" tabindex="1">
|
||||
<label for="control-link-display-alignment-horizontal-center">Centre</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-display-alignment-horizontal-right" class="control-link-display-alignment-horizontal-right" type="radio" name="control-link-display-alignment-horizontal" value="right" tabindex="1">
|
||||
<label for="control-link-display-alignment-horizontal-right">Right</label>
|
||||
</div>
|
||||
<hr>
|
||||
<label class="control-link-display-alignment-vertical-label">Content Vertical Alignment</label>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-display-alignment-vertical-top" class="control-link-display-alignment-vertical-top" type="radio" name="control-link-display-alignment-vertical" value="top" tabindex="1">
|
||||
<label for="control-link-display-alignment-vertical-top">Top</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-display-alignment-vertical-center" class="control-link-display-alignment-vertical-center" type="radio" name="control-link-display-alignment-vertical" value="center" tabindex="1">
|
||||
<label for="control-link-display-alignment-vertical-center">Centre</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-display-alignment-vertical-bottom" class="control-link-display-alignment-vertical-bottom" type="radio" name="control-link-display-alignment-vertical" value="bottom" tabindex="1">
|
||||
<label for="control-link-display-alignment-vertical-bottom">Bottom</label>
|
||||
</div>
|
||||
<hr>
|
||||
<label class="control-link-fit-label">Bookmark size</label>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-fit-best" class="control-link-fit-best" type="radio" name="control-link-fit" value="best" tabindex="1">
|
||||
@ -732,34 +767,6 @@
|
||||
<label for="control-link-items-alignment-horizontal-right">Right</label>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<label class="control-link-display-alignment-horizontal-label">Content Horizontal Alignment</label>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-display-alignment-horizontal-left" class="control-link-display-alignment-horizontal-left" type="radio" name="control-link-display-alignment-horizontal" value="left" tabindex="1">
|
||||
<label for="control-link-display-alignment-horizontal-left">Left</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-display-alignment-horizontal-center" class="control-link-display-alignment-horizontal-center" type="radio" name="control-link-display-alignment-horizontal" value="center" tabindex="1">
|
||||
<label for="control-link-display-alignment-horizontal-center">Centre</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-display-alignment-horizontal-right" class="control-link-display-alignment-horizontal-right" type="radio" name="control-link-display-alignment-horizontal" value="right" tabindex="1">
|
||||
<label for="control-link-display-alignment-horizontal-right">Right</label>
|
||||
</div>
|
||||
<hr>
|
||||
<label class="control-link-display-alignment-vertical-label">Content Vertical Alignment</label>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-display-alignment-vertical-top" class="control-link-display-alignment-vertical-top" type="radio" name="control-link-display-alignment-vertical" value="top" tabindex="1">
|
||||
<label for="control-link-display-alignment-vertical-top">Top</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-display-alignment-vertical-center" class="control-link-display-alignment-vertical-center" type="radio" name="control-link-display-alignment-vertical" value="center" tabindex="1">
|
||||
<label for="control-link-display-alignment-vertical-center">Centre</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-display-alignment-vertical-bottom" class="control-link-display-alignment-vertical-bottom" type="radio" name="control-link-display-alignment-vertical" value="bottom" tabindex="1">
|
||||
<label for="control-link-display-alignment-vertical-bottom">Bottom</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -857,7 +864,7 @@
|
||||
<input id="control-theme-accent-random-style-pastel" class="control-theme-accent-random-style-pastel" type="radio" name="control-theme-accent-random-style" value="pastel" tabindex="1">
|
||||
<label for="control-theme-accent-random-style-pastel">Pastel colours</label>
|
||||
</div>
|
||||
<div class="input-wrap mb-3">
|
||||
<div class="input-wrap">
|
||||
<input id="control-theme-accent-random-style-saturated" class="control-theme-accent-random-style-saturated" type="radio" name="control-theme-accent-random-style" value="saturated" tabindex="1">
|
||||
<label for="control-theme-accent-random-style-saturated">Saturated colours</label>
|
||||
</div>
|
||||
@ -880,6 +887,7 @@
|
||||
<label for="control-background-image-show">Show</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<label for="control-background-image-url">URL or path</label>
|
||||
<input id="control-background-image-url" class="control-background-image-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="http:// or ../path/to/file" tabindex="1">
|
||||
|
||||
1027
js/control.js
1027
js/control.js
File diff suppressed because it is too large
Load Diff
@ -3,7 +3,7 @@ var state = (function() {
|
||||
var current = {
|
||||
header: {
|
||||
area: {
|
||||
width: 90,
|
||||
width: 100,
|
||||
alignment: {
|
||||
horizontal: "center"
|
||||
}
|
||||
@ -134,7 +134,7 @@ var state = (function() {
|
||||
},
|
||||
link: {
|
||||
area: {
|
||||
width: 90,
|
||||
width: 100,
|
||||
alignment: {
|
||||
horizontal: "center"
|
||||
}
|
||||
@ -156,7 +156,7 @@ var state = (function() {
|
||||
size: 2
|
||||
},
|
||||
icon: {
|
||||
size: 2.50
|
||||
size: 2.5
|
||||
}
|
||||
},
|
||||
name: {
|
||||
@ -178,7 +178,7 @@ var state = (function() {
|
||||
horizontal: "center",
|
||||
vertical: "center"
|
||||
},
|
||||
width: 100,
|
||||
width: 80,
|
||||
scrollPastEnd: false,
|
||||
title: "New Tab"
|
||||
},
|
||||
|
||||
@ -385,7 +385,7 @@ var update = (function() {
|
||||
size: 2
|
||||
},
|
||||
icon: {
|
||||
size: 2.50
|
||||
size: 2.5
|
||||
}
|
||||
};
|
||||
return data;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user