mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-02-22 21:20:47 +01:00
[refactor] [design] improve controls and header padding and border
This commit is contained in:
Kuldeep M
parent
d351aa136b
commit
6c302fb991
@ -71,10 +71,10 @@
|
||||
--header-shade-color: transparent;
|
||||
--header-shade-opacity: none;
|
||||
--header-search-width: 0%;
|
||||
--header-shade-padding-top: calc(var(--line-width) * var(--header-shade-padding-multiplier-top));
|
||||
--header-shade-padding-bottom: calc(var(--line-width) * var(--header-shade-padding-multiplier-bottom));
|
||||
--header-shade-padding-multiplier-top: 4;
|
||||
--header-shade-padding-multiplier-bottom: 4;
|
||||
--header-padding-top: calc(var(--line-width) * var(--header-padding-multiplier-top));
|
||||
--header-padding-bottom: calc(var(--line-width) * var(--header-padding-multiplier-bottom));
|
||||
--header-padding-multiplier-top: 4;
|
||||
--header-padding-multiplier-bottom: 4;
|
||||
--header-border-width-top: calc(var(--line-width) * var(--header-border-width-multiplier-top));
|
||||
--header-border-width-bottom: calc(var(--line-width) * var(--header-border-width-multiplier-bottom));
|
||||
--header-border-width-multiplier-top: 1;
|
||||
|
||||
@ -45,17 +45,17 @@
|
||||
opacity: var(--header-shade-opacity);
|
||||
}
|
||||
|
||||
.is-header-shade-border-top-show .header-border {
|
||||
.is-header-border-top-show .header-border {
|
||||
border-top: var(--header-border-width-top) solid rgb(var(--accent));
|
||||
}
|
||||
|
||||
.is-header-shade-border-bottom-show .header-border {
|
||||
.is-header-border-bottom-show .header-border {
|
||||
border-bottom: var(--header-border-width-bottom) solid rgb(var(--accent));
|
||||
}
|
||||
|
||||
.header-area {
|
||||
padding-top: calc(var(--gutter) * 3 + var(--header-shade-padding-top));
|
||||
padding-bottom: calc(var(--gutter) * 3 + var(--header-shade-padding-bottom));
|
||||
padding-top: calc(var(--gutter) * 3 + var(--header-padding-top));
|
||||
padding-bottom: calc(var(--gutter) * 3 + var(--header-padding-bottom));
|
||||
padding-left: calc(var(--gutter) * 3);
|
||||
padding-right: calc(var(--gutter) * 3);
|
||||
position: relative;
|
||||
|
||||
20
css/link.css
20
css/link.css
@ -56,7 +56,7 @@
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.is-header-shade-border-bottom-show .link-area,
|
||||
.is-header-border-bottom-show .link-area,
|
||||
.is-header-shade-style-always .link-area {
|
||||
padding-top: calc(var(--gutter) * 4);
|
||||
}
|
||||
@ -186,9 +186,9 @@
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.is-link-url-show .link-item:focus .link-panel-front,
|
||||
.is-link-url-show .link-item:focus-within .link-panel-front,
|
||||
.is-link-url-show .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-link-show-url .link-url {
|
||||
.is-link-url-show .link-url {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -301,11 +301,11 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.is-link-url-dark .link-url-text {
|
||||
.is-link-url-style-dark .link-url-text {
|
||||
color: rgb(var(--black));
|
||||
}
|
||||
|
||||
.is-link-url-light .link-url-text {
|
||||
.is-link-url-style-light .link-url-text {
|
||||
color: rgb(var(--white));
|
||||
}
|
||||
|
||||
@ -430,9 +430,9 @@
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.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 {
|
||||
.is-link-edit.is-link-url-show .link-item:focus .link-panel-front,
|
||||
.is-link-edit.is-link-url-show .link-item:focus-within .link-panel-front,
|
||||
.is-link-edit.is-link-url-show .link-item:hover .link-panel-front {
|
||||
height: calc(100% - var(--edit-height));
|
||||
}
|
||||
|
||||
|
||||
74
index.html
74
index.html
@ -571,6 +571,50 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Padding</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-padding-top">Top padding</label>
|
||||
<input id="control-header-padding-top" class="control-header-padding-top" type="range" min="0" max="50" value="0" tabindex="1">
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-padding-bottom">Bottom padding</label>
|
||||
<input id="control-header-padding-bottom" class="control-header-padding-bottom" type="range" min="0" max="50" value="0" tabindex="1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Border</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-border-top-show" class="control-header-border-top-show" type="checkbox" value="always" tabindex="1">
|
||||
<label for="control-header-border-top-show">Top border</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-border-top-width">Border width</label>
|
||||
<input id="control-header-border-top-width" class="control-header-border-top-width mb-0" type="range" min="1" max="10" value="0" tabindex="1">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-border-bottom-show" class="control-header-border-bottom-show" type="checkbox" value="always" tabindex="1">
|
||||
<label for="control-header-border-bottom-show">Bottom border</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-border-bottom-width">Border width</label>
|
||||
<input id="control-header-border-bottom-width" class="control-header-border-bottom-width" type="range" min="1" max="10" value="0" tabindex="1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Shade</h1>
|
||||
@ -597,36 +641,6 @@
|
||||
<label for="control-header-shade-opacity">Opacity</label>
|
||||
<input id="control-header-shade-opacity" class="control-header-shade-opacity" type="range" min="0" max="100" value="0" tabindex="1">
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-shade-padding-top">Top padding</label>
|
||||
<input id="control-header-shade-padding-top" class="control-header-shade-padding-top" type="range" min="0" max="50" value="0" tabindex="1">
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-shade-padding-bottom">Bottom padding</label>
|
||||
<input id="control-header-shade-padding-bottom" class="control-header-shade-padding-bottom mb-0" type="range" min="0" max="50" value="0" tabindex="1">
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-shade-border-top-show" class="control-header-shade-border-top-show" type="checkbox" value="always" tabindex="1">
|
||||
<label for="control-header-shade-border-top-show">Top border</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-shade-border-top-width">Border width</label>
|
||||
<input id="control-header-shade-border-top-width" class="control-header-shade-border-top-width mb-0" type="range" min="1" max="10" value="0" tabindex="1">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-shade-border-bottom-show" class="control-header-shade-border-bottom-show" type="checkbox" value="always" tabindex="1">
|
||||
<label for="control-header-shade-border-bottom-show">Bottom border</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<label for="control-header-shade-border-bottom-width">Border width</label>
|
||||
<input id="control-header-shade-border-bottom-width" class="control-header-shade-border-bottom-width" type="range" min="1" max="10" value="0" tabindex="1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
952
js/control.js
952
js/control.js
File diff suppressed because it is too large
Load Diff
@ -87,14 +87,14 @@ var header = (function() {
|
||||
|
||||
var _padding = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-shade-padding-multiplier-top", state.get().header.shade.padding.top);
|
||||
html.style.setProperty("--header-shade-padding-multiplier-bottom", state.get().header.shade.padding.bottom);
|
||||
html.style.setProperty("--header-padding-multiplier-top", state.get().header.padding.top);
|
||||
html.style.setProperty("--header-padding-multiplier-bottom", state.get().header.padding.bottom);
|
||||
};
|
||||
|
||||
var _border = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--header-border-width-multiplier-top", state.get().header.shade.border.top.width);
|
||||
html.style.setProperty("--header-border-width-multiplier-bottom", state.get().header.shade.border.bottom.width);
|
||||
html.style.setProperty("--header-border-width-multiplier-top", state.get().header.border.top.width);
|
||||
html.style.setProperty("--header-border-width-multiplier-bottom", state.get().header.border.bottom.width);
|
||||
};
|
||||
|
||||
var _search = function() {
|
||||
|
||||
26
js/state.js
26
js/state.js
@ -105,21 +105,21 @@ var state = (function() {
|
||||
},
|
||||
shade: {
|
||||
show: true,
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0
|
||||
},
|
||||
style: "scroll",
|
||||
opacity: 0.95,
|
||||
border: {
|
||||
top: {
|
||||
show: false,
|
||||
width: 1
|
||||
},
|
||||
bottom: {
|
||||
show: false,
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0
|
||||
},
|
||||
border: {
|
||||
top: {
|
||||
show: false,
|
||||
width: 1
|
||||
},
|
||||
bottom: {
|
||||
show: false,
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
greeting: {
|
||||
|
||||
13
js/update.js
13
js/update.js
@ -391,6 +391,15 @@ var update = (function() {
|
||||
return data;
|
||||
};
|
||||
|
||||
var _update_340 = function(data) {
|
||||
data.version = "3.4.0";
|
||||
data.state.header.padding = data.state.header.shade.padding;
|
||||
delete data.state.header.shade.padding;
|
||||
data.state.header.border = data.state.header.shade.border;
|
||||
delete data.state.header.shade.border;
|
||||
return data;
|
||||
};
|
||||
|
||||
// var _update_300 = function(data) {
|
||||
// data.version = 3.00;
|
||||
// return data;
|
||||
@ -493,6 +502,10 @@ var update = (function() {
|
||||
console.log("\t= running update 3.2.0");
|
||||
data = _update_320(data);
|
||||
};
|
||||
if (version.compare(data.version, "3.4.0") == -1) {
|
||||
console.log("\t= running update 3.4.0");
|
||||
data = _update_340(data);
|
||||
};
|
||||
};
|
||||
// if no update is needed
|
||||
// version bump
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
var version = (function() {
|
||||
|
||||
// version is normally bumped when the state needs changing or any new functionality is added
|
||||
var current = "3.3.0";
|
||||
var current = "3.4.0";
|
||||
|
||||
var compare = function(a, b) {
|
||||
var pa = a.split(".");
|
||||
|
||||
Loading…
Reference in New Issue
Block a user