extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-01-22 05:49:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve shadows

Browse Source
This commit is contained in:
zombieFox 2020-01-07 13:41:24 -07:00
parent 0137d1567d
commit fb30222c42
7 changed files with 61 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/auto-suggest.css
View File

@ -16,7 +16,7 @@
border-radius: var(--theme-radius);
overflow-y: auto;
z-index: var(--z-index-auto-suggest);
box-shadow: var(--layout-shadow-large);
box-shadow: var(--layout-shadow-bottom-large);
}
.auto-suggest-list {

2
src/css/form.css
View File

@ -1529,7 +1529,7 @@ input[type="range"]:disabled::-moz-range-progress {
position: absolute;
width: 100%;
min-width: 12em;
box-shadow: var(--layout-shadow-large);
box-shadow: var(--layout-shadow-bottom-large);
z-index: var(--z-index-dropdown);
overflow: hidden;
display: none;

28
src/css/link.css
View File

@ -183,10 +183,16 @@
background-color: rgb(var(--theme-color-03));
}
.is-link-item-shadow-show .link-item:focus .link-panel-front,
.is-link-item-shadow-show .link-item:focus-within .link-panel-front,
.is-link-item-shadow-show .link-item:hover .link-panel-front {
box-shadow: var(--layout-shadow-large);
.is-link-item-shadow-show.is-link-orientation-bottom .link-item:focus .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-bottom .link-item:focus-within .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-bottom .link-item:hover .link-panel-front {
box-shadow: var(--layout-shadow-bottom-large);
}
.is-link-item-shadow-show.is-link-orientation-top .link-item:focus .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-top .link-item:focus-within .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-top .link-item:hover .link-panel-front {
box-shadow: var(--layout-shadow-top-large);
}
.is-link-display-alignment-topleft .link-panel-front {
@ -274,10 +280,16 @@
border-bottom-right-radius: calc(var(--theme-radius) / 4);
}
.is-link-item-shadow-show.is-edit .link-panel-front,
.is-link-item-shadow-show.is-edit .link-item:hover .link-panel-front,
.is-link-item-shadow-show.is-edit .link-item:focus .link-panel-front {
box-shadow: var(--layout-shadow-medium);
.is-link-item-shadow-show.is-link-orientation-bottom.is-edit .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-bottom.is-edit .link-item:hover .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-bottom.is-edit .link-item:focus .link-panel-front {
box-shadow: var(--layout-shadow-bottom-medium);
}
.is-link-item-shadow-show.is-link-orientation-top.is-edit .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-top.is-edit .link-item:hover .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-top.is-edit .link-item:focus .link-panel-front {
box-shadow: var(--layout-shadow-top-medium);
}
/* link display */

2
src/css/menu.css
View File

@ -27,7 +27,7 @@
width: 100%;
max-height: 100%;
overflow-y: auto;
box-shadow: var(--layout-shadow-large);
box-shadow: var(--layout-shadow-bottom-large);
pointer-events: all;
transition: background-color var(--layout-timing-extra-fast);
}

2
src/css/modal.css
View File

@ -25,7 +25,7 @@
.modal-wrapper {
background-color: rgb(var(--theme-color-01));
border-radius: var(--theme-radius);
box-shadow: var(--layout-shadow-large);
box-shadow: var(--layout-shadow-bottom-large);
position: relative;
max-height: calc(100vh - 2em);
overflow-y: auto;

2
src/css/theme.css
View File

@ -54,7 +54,7 @@
.is-theme-custom-edit .theme-custom-button {
height: calc(var(--theme-preset-preview-size) - var(--theme-custom-edit-height));
box-shadow: var(--layout-shadow-medium);
box-shadow: var(--layout-shadow-bottom-medium);
}
.is-theme-custom-edit .theme-custom-control {

42
src/css/variables.css
View File

@ -86,12 +86,42 @@
--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;
--layout-shadow-small: 0 0 0.25em rgba(0, 0, 0, 0.2),
0 0 0.5em rgba(0, 0, 0, 0.1);
--layout-shadow-medium: 0 0 0.5em rgba(0, 0, 0, 0.2),
0 0 1em rgba(0, 0, 0, 0.1);
--layout-shadow-large: 0 0 1em rgba(0, 0, 0, 0.2),
0 0 2em rgba(0, 0, 0, 0.1);
--layout-shadow-offset-y: 0.02em;
--layout-shadow-blur: 0.02em;
--layout-shadow-opacity: 0.02;
--layout-shadow-scale-small: 1;
--layout-shadow-scale-medium: 2;
--layout-shadow-scale-large: 3;
--layout-shadow-bottom-small:
0 calc(var(--layout-shadow-scale-small) * calc(var(--layout-shadow-offset-y) * 2)) calc(var(--layout-shadow-scale-small) * calc(var(--layout-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--layout-shadow-scale-small) * calc(var(--layout-shadow-opacity) * 1))),
0 calc(var(--layout-shadow-scale-small) * calc(var(--layout-shadow-offset-y) * 4)) calc(var(--layout-shadow-scale-small) * calc(var(--layout-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--layout-shadow-scale-small) * calc(var(--layout-shadow-opacity) * 2))),
0 calc(var(--layout-shadow-scale-small) * calc(var(--layout-shadow-offset-y) * 8)) calc(var(--layout-shadow-scale-small) * calc(var(--layout-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--layout-shadow-scale-small) * calc(var(--layout-shadow-opacity) * 3))),
0 calc(var(--layout-shadow-scale-small) * calc(var(--layout-shadow-offset-y) * 16)) calc(var(--layout-shadow-scale-small) * calc(var(--layout-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--layout-shadow-scale-small) * calc(var(--layout-shadow-opacity) * 4)));
--layout-shadow-bottom-medium:
0 calc(var(--layout-shadow-scale-medium) * calc(var(--layout-shadow-offset-y) * 2)) calc(var(--layout-shadow-scale-medium) * calc(var(--layout-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--layout-shadow-scale-medium) * calc(var(--layout-shadow-opacity) * 1))),
0 calc(var(--layout-shadow-scale-medium) * calc(var(--layout-shadow-offset-y) * 4)) calc(var(--layout-shadow-scale-medium) * calc(var(--layout-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--layout-shadow-scale-medium) * calc(var(--layout-shadow-opacity) * 2))),
0 calc(var(--layout-shadow-scale-medium) * calc(var(--layout-shadow-offset-y) * 8)) calc(var(--layout-shadow-scale-medium) * calc(var(--layout-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--layout-shadow-scale-medium) * calc(var(--layout-shadow-opacity) * 3))),
0 calc(var(--layout-shadow-scale-medium) * calc(var(--layout-shadow-offset-y) * 16)) calc(var(--layout-shadow-scale-medium) * calc(var(--layout-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--layout-shadow-scale-medium) * calc(var(--layout-shadow-opacity) * 4)));
--layout-shadow-bottom-large:
0 calc(var(--layout-shadow-scale-large) * calc(var(--layout-shadow-offset-y) * 2)) calc(var(--layout-shadow-scale-large) * calc(var(--layout-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--layout-shadow-scale-large) * calc(var(--layout-shadow-opacity) * 1))),
0 calc(var(--layout-shadow-scale-large) * calc(var(--layout-shadow-offset-y) * 4)) calc(var(--layout-shadow-scale-large) * calc(var(--layout-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--layout-shadow-scale-large) * calc(var(--layout-shadow-opacity) * 2))),
0 calc(var(--layout-shadow-scale-large) * calc(var(--layout-shadow-offset-y) * 8)) calc(var(--layout-shadow-scale-large) * calc(var(--layout-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--layout-shadow-scale-large) * calc(var(--layout-shadow-opacity) * 3))),
0 calc(var(--layout-shadow-scale-large) * calc(var(--layout-shadow-offset-y) * 16)) calc(var(--layout-shadow-scale-large) * calc(var(--layout-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--layout-shadow-scale-large) * calc(var(--layout-shadow-opacity) * 4)));
--layout-shadow-top-small:
0 calc(var(--layout-shadow-scale-small) * calc(calc(var(--layout-shadow-offset-y) * -1) * 2)) calc(var(--layout-shadow-scale-small) * calc(var(--layout-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--layout-shadow-scale-small) * calc(var(--layout-shadow-opacity) * 1))),
0 calc(var(--layout-shadow-scale-small) * calc(calc(var(--layout-shadow-offset-y) * -1) * 4)) calc(var(--layout-shadow-scale-small) * calc(var(--layout-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--layout-shadow-scale-small) * calc(var(--layout-shadow-opacity) * 2))),
0 calc(var(--layout-shadow-scale-small) * calc(calc(var(--layout-shadow-offset-y) * -1) * 8)) calc(var(--layout-shadow-scale-small) * calc(var(--layout-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--layout-shadow-scale-small) * calc(var(--layout-shadow-opacity) * 3))),
0 calc(var(--layout-shadow-scale-small) * calc(calc(var(--layout-shadow-offset-y) * -1) * 16)) calc(var(--layout-shadow-scale-small) * calc(var(--layout-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--layout-shadow-scale-small) * calc(var(--layout-shadow-opacity) * 4)));
--layout-shadow-top-medium:
0 calc(var(--layout-shadow-scale-medium) * calc(calc(var(--layout-shadow-offset-y) * -1) * 2)) calc(var(--layout-shadow-scale-medium) * calc(var(--layout-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--layout-shadow-scale-medium) * calc(var(--layout-shadow-opacity) * 1))),
0 calc(var(--layout-shadow-scale-medium) * calc(calc(var(--layout-shadow-offset-y) * -1) * 4)) calc(var(--layout-shadow-scale-medium) * calc(var(--layout-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--layout-shadow-scale-medium) * calc(var(--layout-shadow-opacity) * 2))),
0 calc(var(--layout-shadow-scale-medium) * calc(calc(var(--layout-shadow-offset-y) * -1) * 8)) calc(var(--layout-shadow-scale-medium) * calc(var(--layout-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--layout-shadow-scale-medium) * calc(var(--layout-shadow-opacity) * 3))),
0 calc(var(--layout-shadow-scale-medium) * calc(calc(var(--layout-shadow-offset-y) * -1) * 16)) calc(var(--layout-shadow-scale-medium) * calc(var(--layout-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--layout-shadow-scale-medium) * calc(var(--layout-shadow-opacity) * 4)));
--layout-shadow-top-large:
0 calc(var(--layout-shadow-scale-large) * calc(calc(var(--layout-shadow-offset-y) * -1) * 2)) calc(var(--layout-shadow-scale-large) * calc(var(--layout-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--layout-shadow-scale-large) * calc(var(--layout-shadow-opacity) * 1))),
0 calc(var(--layout-shadow-scale-large) * calc(calc(var(--layout-shadow-offset-y) * -1) * 4)) calc(var(--layout-shadow-scale-large) * calc(var(--layout-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--layout-shadow-scale-large) * calc(var(--layout-shadow-opacity) * 2))),
0 calc(var(--layout-shadow-scale-large) * calc(calc(var(--layout-shadow-offset-y) * -1) * 8)) calc(var(--layout-shadow-scale-large) * calc(var(--layout-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--layout-shadow-scale-large) * calc(var(--layout-shadow-opacity) * 3))),
0 calc(var(--layout-shadow-scale-large) * calc(calc(var(--layout-shadow-offset-y) * -1) * 16)) calc(var(--layout-shadow-scale-large) * calc(var(--layout-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--layout-shadow-scale-large) * calc(var(--layout-shadow-opacity) * 4)));
--horizontal-rule: calc(var(--layout-line-width) / 2) solid rgb(var(--theme-color-02));
/* background */
--background-color-theme: var(--theme-color-01);