mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-02-26 15:11:00 +01:00
[feature] add theme shadow controls
This commit is contained in:
zombieFox
parent
70e5fbf91d
commit
f44587e103
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nighttab",
|
||||
"version": "4.9.0",
|
||||
"version": "4.10.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nighttab",
|
||||
"version": "4.9.0",
|
||||
"version": "4.10.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,7 +16,7 @@
|
||||
border-radius: var(--theme-radius);
|
||||
overflow-y: auto;
|
||||
z-index: var(--z-index-auto-suggest);
|
||||
box-shadow: var(--layout-shadow-bottom-large);
|
||||
box-shadow: var(--theme-shadow-bottom-large);
|
||||
}
|
||||
|
||||
.auto-suggest-list {
|
||||
|
||||
@ -1406,6 +1406,10 @@ input[type="range"]:disabled::-moz-range-progress {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-group-wrap {
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
.form-group.form-group-border .form-group-text,
|
||||
.form-group.form-group-border .button,
|
||||
.form-group.form-group-border .button:after,
|
||||
@ -1509,6 +1513,17 @@ input[type="range"]:disabled::-moz-range-progress {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.form-group-text-transparent,
|
||||
.form-group-text:hover,
|
||||
.form-group-text:focus,
|
||||
.form-group-text:active,
|
||||
.form-group-text.disabled,
|
||||
.form-group-text.disabled:hover,
|
||||
.form-group-text.disabled:focus,
|
||||
.form-group-text.disable:active {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.form-group-text-borderless {
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
@ -1531,7 +1546,7 @@ input[type="range"]:disabled::-moz-range-progress {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
min-width: 12em;
|
||||
box-shadow: var(--layout-shadow-bottom-large);
|
||||
box-shadow: var(--theme-shadow-bottom-large);
|
||||
z-index: var(--z-index-dropdown);
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
|
||||
@ -186,13 +186,13 @@
|
||||
.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);
|
||||
box-shadow: var(--theme-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);
|
||||
box-shadow: var(--theme-shadow-top-large);
|
||||
}
|
||||
|
||||
.is-link-display-alignment-topleft .link-panel-front {
|
||||
@ -283,13 +283,13 @@
|
||||
.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);
|
||||
box-shadow: var(--theme-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);
|
||||
box-shadow: var(--theme-shadow-top-medium);
|
||||
}
|
||||
|
||||
/* link display */
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
}
|
||||
|
||||
.is-menu-open .menu-area {
|
||||
box-shadow: var(--layout-shadow-bottom-large);
|
||||
box-shadow: var(--theme-shadow-bottom-large);
|
||||
}
|
||||
|
||||
.is-edge .menu-area {
|
||||
@ -96,8 +96,8 @@
|
||||
|
||||
.menu-item-form-sticky {
|
||||
background-color: rgb(var(--theme-color-01));
|
||||
margin: -2em -1em 0 -1em;
|
||||
padding: 2em 1em 1em 1em;
|
||||
margin: -1.5em -1em 0 -1em;
|
||||
padding: 1.5em 1em 1em 1em;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
.modal-wrapper {
|
||||
background-color: rgb(var(--theme-color-01));
|
||||
border-radius: var(--theme-radius);
|
||||
box-shadow: var(--layout-shadow-bottom-large);
|
||||
box-shadow: var(--theme-shadow-bottom-large);
|
||||
position: relative;
|
||||
max-height: calc(100vh - 2em);
|
||||
overflow-y: auto;
|
||||
|
||||
@ -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-bottom-medium);
|
||||
box-shadow: var(--theme-shadow-bottom-medium);
|
||||
}
|
||||
|
||||
.is-theme-custom-edit .theme-custom-control {
|
||||
@ -177,3 +177,111 @@
|
||||
.is-theme-custom-edit .theme-custom-button:hover .theme-custom-accent {
|
||||
clip-path: circle(40% at 100% 60%);
|
||||
}
|
||||
|
||||
.theme-color-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.theme-color-neg-10 {
|
||||
background-color: rgb(var(--theme-color-01));
|
||||
}
|
||||
|
||||
.theme-color-neg-09 {
|
||||
background-color: rgb(var(--theme-color-02));
|
||||
}
|
||||
|
||||
.theme-color-neg-08 {
|
||||
background-color: rgb(var(--theme-color-03));
|
||||
}
|
||||
|
||||
.theme-color-neg-07 {
|
||||
background-color: rgb(var(--theme-color-04));
|
||||
}
|
||||
|
||||
.theme-color-neg-06 {
|
||||
background-color: rgb(var(--theme-color-05));
|
||||
}
|
||||
|
||||
.theme-color-neg-05 {
|
||||
background-color: rgb(var(--theme-color-06));
|
||||
}
|
||||
|
||||
.theme-color-neg-04 {
|
||||
background-color: rgb(var(--theme-color-07));
|
||||
}
|
||||
|
||||
.theme-color-neg-03 {
|
||||
background-color: rgb(var(--theme-color-08));
|
||||
}
|
||||
|
||||
.theme-color-neg-02 {
|
||||
background-color: rgb(var(--theme-color-09));
|
||||
}
|
||||
|
||||
.theme-color-neg-01 {
|
||||
background-color: rgb(var(--theme-color-10));
|
||||
}
|
||||
|
||||
.theme-color {
|
||||
background-color: rgb(var(--theme-color));
|
||||
}
|
||||
|
||||
.theme-color-pos-01 {
|
||||
background-color: rgb(var(--theme-color-11));
|
||||
}
|
||||
|
||||
.theme-color-pos-02 {
|
||||
background-color: rgb(var(--theme-color-12));
|
||||
}
|
||||
|
||||
.theme-color-pos-03 {
|
||||
background-color: rgb(var(--theme-color-13));
|
||||
}
|
||||
|
||||
.theme-color-pos-04 {
|
||||
background-color: rgb(var(--theme-color-14));
|
||||
}
|
||||
|
||||
.theme-color-pos-05 {
|
||||
background-color: rgb(var(--theme-color-15));
|
||||
}
|
||||
|
||||
.theme-color-pos-06 {
|
||||
background-color: rgb(var(--theme-color-16));
|
||||
}
|
||||
|
||||
.theme-color-pos-07 {
|
||||
background-color: rgb(var(--theme-color-17));
|
||||
}
|
||||
|
||||
.theme-color-pos-08 {
|
||||
background-color: rgb(var(--theme-color-18));
|
||||
}
|
||||
|
||||
.theme-color-pos-09 {
|
||||
background-color: rgb(var(--theme-color-19));
|
||||
}
|
||||
|
||||
.theme-color-pos-10 {
|
||||
background-color: rgb(var(--theme-color-20));
|
||||
}
|
||||
|
||||
.theme-shadow-box {
|
||||
border-radius: var(--theme-radius);
|
||||
margin: 0;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
}
|
||||
|
||||
.theme-shadow-box-small {
|
||||
box-shadow: var(--theme-shadow-bottom-small);
|
||||
}
|
||||
|
||||
.theme-shadow-box-medium {
|
||||
box-shadow: var(--theme-shadow-bottom-medium);
|
||||
}
|
||||
|
||||
.theme-shadow-box-large {
|
||||
box-shadow: var(--theme-shadow-bottom-large);
|
||||
}
|
||||
|
||||
@ -64,92 +64,3 @@
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.theme-color-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.theme-color-neg-10 {
|
||||
background-color: rgb(var(--theme-color-01));
|
||||
}
|
||||
|
||||
.theme-color-neg-09 {
|
||||
background-color: rgb(var(--theme-color-02));
|
||||
}
|
||||
|
||||
.theme-color-neg-08 {
|
||||
background-color: rgb(var(--theme-color-03));
|
||||
}
|
||||
|
||||
.theme-color-neg-07 {
|
||||
background-color: rgb(var(--theme-color-04));
|
||||
}
|
||||
|
||||
.theme-color-neg-06 {
|
||||
background-color: rgb(var(--theme-color-05));
|
||||
}
|
||||
|
||||
.theme-color-neg-05 {
|
||||
background-color: rgb(var(--theme-color-06));
|
||||
}
|
||||
|
||||
.theme-color-neg-04 {
|
||||
background-color: rgb(var(--theme-color-07));
|
||||
}
|
||||
|
||||
.theme-color-neg-03 {
|
||||
background-color: rgb(var(--theme-color-08));
|
||||
}
|
||||
|
||||
.theme-color-neg-02 {
|
||||
background-color: rgb(var(--theme-color-09));
|
||||
}
|
||||
|
||||
.theme-color-neg-01 {
|
||||
background-color: rgb(var(--theme-color-10));
|
||||
}
|
||||
|
||||
.theme-color {
|
||||
background-color: rgb(var(--theme-color));
|
||||
}
|
||||
|
||||
.theme-color-pos-01 {
|
||||
background-color: rgb(var(--theme-color-11));
|
||||
}
|
||||
|
||||
.theme-color-pos-02 {
|
||||
background-color: rgb(var(--theme-color-12));
|
||||
}
|
||||
|
||||
.theme-color-pos-03 {
|
||||
background-color: rgb(var(--theme-color-13));
|
||||
}
|
||||
|
||||
.theme-color-pos-04 {
|
||||
background-color: rgb(var(--theme-color-14));
|
||||
}
|
||||
|
||||
.theme-color-pos-05 {
|
||||
background-color: rgb(var(--theme-color-15));
|
||||
}
|
||||
|
||||
.theme-color-pos-06 {
|
||||
background-color: rgb(var(--theme-color-16));
|
||||
}
|
||||
|
||||
.theme-color-pos-07 {
|
||||
background-color: rgb(var(--theme-color-17));
|
||||
}
|
||||
|
||||
.theme-color-pos-08 {
|
||||
background-color: rgb(var(--theme-color-18));
|
||||
}
|
||||
|
||||
.theme-color-pos-09 {
|
||||
background-color: rgb(var(--theme-color-19));
|
||||
}
|
||||
|
||||
.theme-color-pos-10 {
|
||||
background-color: rgb(var(--theme-color-20));
|
||||
}
|
||||
|
||||
@ -34,6 +34,43 @@
|
||||
--theme-shade-pos-10: 25, 25, 25;
|
||||
--theme-preset-preview-size: 6em;
|
||||
--theme-custom-edit-height: 2.5em;
|
||||
--theme-shadow: 1;
|
||||
--theme-shadow-offset-y: 0.02em;
|
||||
--theme-shadow-blur: 0.02em;
|
||||
--theme-shadow-opacity: 0.02;
|
||||
--theme-shadow-size-small: calc(var(--theme-shadow) * 1);
|
||||
--theme-shadow-size-medium: calc(var(--theme-shadow) * 2);
|
||||
--theme-shadow-size-large: calc(var(--theme-shadow) * 3);
|
||||
--theme-shadow-bottom-small:
|
||||
0 calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-offset-y) * 2)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 1))),
|
||||
0 calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-offset-y) * 4)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 2))),
|
||||
0 calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-offset-y) * 8)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 3))),
|
||||
0 calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-offset-y) * 16)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 4)));
|
||||
--theme-shadow-bottom-medium:
|
||||
0 calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-offset-y) * 2)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 1))),
|
||||
0 calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-offset-y) * 4)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 2))),
|
||||
0 calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-offset-y) * 8)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 3))),
|
||||
0 calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-offset-y) * 16)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 4)));
|
||||
--theme-shadow-bottom-large:
|
||||
0 calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-offset-y) * 2)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 1))),
|
||||
0 calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-offset-y) * 4)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 2))),
|
||||
0 calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-offset-y) * 8)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 3))),
|
||||
0 calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-offset-y) * 16)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 4)));
|
||||
--theme-shadow-top-small:
|
||||
0 calc(var(--theme-shadow-size-small) * calc(calc(var(--theme-shadow-offset-y) * -1) * 2)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 1))),
|
||||
0 calc(var(--theme-shadow-size-small) * calc(calc(var(--theme-shadow-offset-y) * -1) * 4)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 2))),
|
||||
0 calc(var(--theme-shadow-size-small) * calc(calc(var(--theme-shadow-offset-y) * -1) * 8)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 3))),
|
||||
0 calc(var(--theme-shadow-size-small) * calc(calc(var(--theme-shadow-offset-y) * -1) * 16)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 4)));
|
||||
--theme-shadow-top-medium:
|
||||
0 calc(var(--theme-shadow-size-medium) * calc(calc(var(--theme-shadow-offset-y) * -1) * 2)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 1))),
|
||||
0 calc(var(--theme-shadow-size-medium) * calc(calc(var(--theme-shadow-offset-y) * -1) * 4)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 2))),
|
||||
0 calc(var(--theme-shadow-size-medium) * calc(calc(var(--theme-shadow-offset-y) * -1) * 8)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 3))),
|
||||
0 calc(var(--theme-shadow-size-medium) * calc(calc(var(--theme-shadow-offset-y) * -1) * 16)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 4)));
|
||||
--theme-shadow-top-large:
|
||||
0 calc(var(--theme-shadow-size-large) * calc(calc(var(--theme-shadow-offset-y) * -1) * 2)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 1))),
|
||||
0 calc(var(--theme-shadow-size-large) * calc(calc(var(--theme-shadow-offset-y) * -1) * 4)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 2))),
|
||||
0 calc(var(--theme-shadow-size-large) * calc(calc(var(--theme-shadow-offset-y) * -1) * 8)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 3))),
|
||||
0 calc(var(--theme-shadow-size-large) * calc(calc(var(--theme-shadow-offset-y) * -1) * 16)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 4)));
|
||||
/* header */
|
||||
--header-area-width: 100%;
|
||||
--header-shade-color: var(--theme-color-01);
|
||||
@ -86,42 +123,6 @@
|
||||
--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-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);
|
||||
|
||||
167
src/index.html
167
src/index.html
@ -1185,6 +1185,7 @@
|
||||
<input id="control-link-item-shadow-show" class="control-link-item-shadow-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-link-item-shadow-show"><span class="label-icon"></span> Show shadow on Bookmark hover</label>
|
||||
</div>
|
||||
<p class="control-link-item-shadow-show-helper form-helper small">Effects may not be visible if Theme Shadow is set to 0.</p>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-item-hoverscale" class="control-link-item-hoverscale" type="checkbox" tabindex="-1">
|
||||
@ -1429,72 +1430,74 @@
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="menu-item-form-sticky">
|
||||
<p>Colour shades</p>
|
||||
<div class="p-wrap">
|
||||
<p>Colour shades</p>
|
||||
</div>
|
||||
<div class="form-group form-group-block form-group-border form-group-border-theme-color mb-0">
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-neg-10"></div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-neg-10"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-neg-09"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-neg-08"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-neg-07"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-neg-06"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-neg-05"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-neg-04"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-neg-03"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-neg-02"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-neg-01"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless form-group-item-small">
|
||||
<div class="theme-color-box theme-color"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-pos-01"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-pos-02"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-pos-03"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-pos-04"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-pos-05"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-pos-06"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-pos-07"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-pos-08"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-pos-09"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-pos-10"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-neg-09"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-neg-08"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-neg-07"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-neg-06"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-neg-05"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-neg-04"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-neg-03"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-neg-02"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-neg-01"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless form-group-item-small">
|
||||
<div class="theme-color-box theme-color"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-pos-01"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-pos-02"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-pos-03"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-pos-04"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-pos-05"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-pos-06"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-pos-07"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-pos-08"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-pos-09"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-pos-10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="control-theme-color-helper form-helper small">Backgrounds, Bookmarks and Modals use shades from the left.</p>
|
||||
<p class="control-theme-color-helper form-helper small">Text and form elements use shades from the right.</p>
|
||||
@ -1643,8 +1646,42 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Shadow</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="input-wrap">
|
||||
<label for="control-theme-shadow">Size</label>
|
||||
<div class="form-group form-group-block mb-0">
|
||||
<input id="control-theme-shadow" class="control-theme-shadow mr-3" type="range" min="0" max="300" value="0" step="25" tabindex="-1">
|
||||
<div class="control-theme-shadow-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-wrap">
|
||||
<button class="control-theme-shadow-default button mb-0" tabindex="-1">Default shadow size</button>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="p-wrap">
|
||||
<p>Small, Medium and Large shadows</p>
|
||||
</div>
|
||||
<div class="form-group-wrap">
|
||||
<div class="form-group form-group-block mb-0">
|
||||
<div class="form-group-text form-group-text-transparent form-group-text-borderless">
|
||||
<div class="theme-shadow-box theme-shadow-box-small"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-transparent form-group-text-borderless">
|
||||
<div class="theme-shadow-box theme-shadow-box-medium"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-transparent form-group-text-borderless">
|
||||
<div class="theme-shadow-box theme-shadow-box-large"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="control-theme-shadow-helper form-helper small">Bookmarks and Modals will use the Large shadow.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-content-area menu-content-area-background is-hidden">
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-header">
|
||||
|
||||
@ -2673,17 +2673,6 @@ var control = (function() {
|
||||
func: function() {
|
||||
theme.render.font.ui.style();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-theme-radius-default"),
|
||||
type: "button",
|
||||
func: function() {
|
||||
mod.setValue("theme.radius", helper.getObject({
|
||||
object: state.get.default(),
|
||||
path: "theme.radius"
|
||||
}));
|
||||
theme.render.radius();
|
||||
render.update();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-theme-color-rgb-quick"),
|
||||
path: "theme.color.rgb",
|
||||
@ -2921,6 +2910,16 @@ var control = (function() {
|
||||
func: function() {
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-theme-accent-randomise"),
|
||||
type: "button",
|
||||
func: function() {
|
||||
theme.accent.random();
|
||||
theme.render.accent.input.quick();
|
||||
theme.render.accent.input.picker();
|
||||
theme.render.accent.input.hex();
|
||||
link.groupAndItems();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-theme-radius"),
|
||||
path: "theme.radius",
|
||||
@ -2933,14 +2932,36 @@ var control = (function() {
|
||||
render.range.count(this);
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-theme-accent-randomise"),
|
||||
element: helper.e(".control-theme-radius-default"),
|
||||
type: "button",
|
||||
func: function() {
|
||||
theme.accent.random();
|
||||
theme.render.accent.input.quick();
|
||||
theme.render.accent.input.picker();
|
||||
theme.render.accent.input.hex();
|
||||
link.groupAndItems();
|
||||
mod.setValue("theme.radius", helper.getObject({
|
||||
object: state.get.default(),
|
||||
path: "theme.radius"
|
||||
}));
|
||||
theme.render.radius();
|
||||
render.update();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-theme-shadow"),
|
||||
path: "theme.shadow",
|
||||
type: "range",
|
||||
valueMod: ["float"],
|
||||
rangeCountElement: helper.e(".control-theme-shadow-count"),
|
||||
func: function() {
|
||||
theme.render.shadow();
|
||||
render.range.count(this);
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-theme-shadow-default"),
|
||||
type: "button",
|
||||
func: function() {
|
||||
mod.setValue("theme.shadow", helper.getObject({
|
||||
object: state.get.default(),
|
||||
path: "theme.shadow"
|
||||
}));
|
||||
theme.render.shadow();
|
||||
render.update();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-background-color-by-theme"),
|
||||
@ -3898,6 +3919,7 @@ var control = (function() {
|
||||
_disable.input(".control-link-item-url-show", true);
|
||||
_disable.input(".control-link-item-line-show", true);
|
||||
_disable.input(".control-link-item-shadow-show", true);
|
||||
_disable.element(".control-link-item-shadow-show-helper", true);
|
||||
_disable.input(".control-link-item-hoverscale", true);
|
||||
_disable.element(".control-link-item-display-alignment-grid", true);
|
||||
_disable.element(".control-link-item-display-alignment-label", true);
|
||||
@ -3957,6 +3979,7 @@ var control = (function() {
|
||||
_disable.input(".control-link-item-url-show", false);
|
||||
_disable.input(".control-link-item-line-show", false);
|
||||
_disable.input(".control-link-item-shadow-show", false);
|
||||
_disable.element(".control-link-item-shadow-show-helper", false);
|
||||
_disable.input(".control-link-item-hoverscale", false);
|
||||
_disable.input(".control-link-newtab", false);
|
||||
_disable.input(".control-link-item-color-by-theme", false);
|
||||
|
||||
@ -261,6 +261,7 @@ var state = (function() {
|
||||
},
|
||||
style: "dark",
|
||||
radius: 0.25,
|
||||
shadow: 1,
|
||||
custom: []
|
||||
},
|
||||
background: {
|
||||
@ -397,7 +398,8 @@ var state = (function() {
|
||||
}
|
||||
},
|
||||
style: "dark",
|
||||
radius: 0.25
|
||||
radius: 0.25,
|
||||
shadow: 1
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -22,11 +22,12 @@ var theme = (function() {
|
||||
stagedThemeCustom.reset = function() {
|
||||
stagedThemeCustom.position.index = null;
|
||||
stagedThemeCustom.theme.name = null;
|
||||
stagedThemeCustom.theme.style = null;
|
||||
stagedThemeCustom.theme.font = null;
|
||||
stagedThemeCustom.theme.color = null;
|
||||
stagedThemeCustom.theme.accent = null;
|
||||
stagedThemeCustom.theme.radius = null;
|
||||
stagedThemeCustom.theme.shadow = null;
|
||||
stagedThemeCustom.theme.style = null;
|
||||
stagedThemeCustom.theme.timestamp = null;
|
||||
};
|
||||
|
||||
@ -136,11 +137,6 @@ var theme = (function() {
|
||||
|
||||
mod.preset = {
|
||||
set: function(themePreset) {
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
path: "theme.style",
|
||||
newValue: themePreset.style
|
||||
});
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
path: "theme.font",
|
||||
@ -161,6 +157,16 @@ var theme = (function() {
|
||||
path: "theme.radius",
|
||||
newValue: themePreset.radius
|
||||
});
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
path: "theme.style",
|
||||
newValue: themePreset.style
|
||||
});
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
path: "theme.shadow",
|
||||
newValue: themePreset.shadow
|
||||
});
|
||||
},
|
||||
get: function(index) {
|
||||
return JSON.parse(JSON.stringify(mod.preset.all[index]));
|
||||
@ -201,6 +207,7 @@ var theme = (function() {
|
||||
b: 255
|
||||
},
|
||||
radius: 0.25,
|
||||
shadow: 1,
|
||||
style: "dark"
|
||||
}, {
|
||||
name: "Midnight",
|
||||
@ -238,6 +245,7 @@ var theme = (function() {
|
||||
b: 255
|
||||
},
|
||||
radius: 0.5,
|
||||
shadow: 0.75,
|
||||
style: "dark"
|
||||
}, {
|
||||
name: "Lex",
|
||||
@ -275,6 +283,7 @@ var theme = (function() {
|
||||
b: 170
|
||||
},
|
||||
radius: 0.1,
|
||||
shadow: 1,
|
||||
style: "dark"
|
||||
}, {
|
||||
name: "Cruiser",
|
||||
@ -312,6 +321,7 @@ var theme = (function() {
|
||||
b: 0
|
||||
},
|
||||
radius: 0.2,
|
||||
shadow: 1.5,
|
||||
style: "dark"
|
||||
}, {
|
||||
name: "Sharp Mint",
|
||||
@ -349,6 +359,7 @@ var theme = (function() {
|
||||
b: 226
|
||||
},
|
||||
radius: 0.8,
|
||||
shadow: 1,
|
||||
style: "dark"
|
||||
}, {
|
||||
name: "Snow Glow",
|
||||
@ -386,6 +397,7 @@ var theme = (function() {
|
||||
b: 214
|
||||
},
|
||||
radius: 0,
|
||||
shadow: 0.5,
|
||||
style: "light"
|
||||
}, {
|
||||
name: "Rumble",
|
||||
@ -423,6 +435,7 @@ var theme = (function() {
|
||||
b: 66
|
||||
},
|
||||
radius: 0.75,
|
||||
shadow: 1.75,
|
||||
style: "dark"
|
||||
}, {
|
||||
name: "Sol",
|
||||
@ -460,6 +473,7 @@ var theme = (function() {
|
||||
b: 0
|
||||
},
|
||||
radius: 0.5,
|
||||
shadow: 0.25,
|
||||
style: "light"
|
||||
}, {
|
||||
name: "Art Deco",
|
||||
@ -497,6 +511,7 @@ var theme = (function() {
|
||||
b: 161
|
||||
},
|
||||
radius: 2,
|
||||
shadow: 0.5,
|
||||
style: "dark"
|
||||
}, {
|
||||
name: "Grimm",
|
||||
@ -534,6 +549,7 @@ var theme = (function() {
|
||||
b: 102
|
||||
},
|
||||
radius: 1,
|
||||
shadow: 1.5,
|
||||
style: "dark"
|
||||
}, {
|
||||
name: "Macaroon",
|
||||
@ -571,6 +587,7 @@ var theme = (function() {
|
||||
b: 208
|
||||
},
|
||||
radius: 0.40,
|
||||
shadow: 0.5,
|
||||
style: "light"
|
||||
}, {
|
||||
name: "Hot Pepper",
|
||||
@ -608,6 +625,7 @@ var theme = (function() {
|
||||
b: 0
|
||||
},
|
||||
radius: 0.6,
|
||||
shadow: 1,
|
||||
style: "dark"
|
||||
}, {
|
||||
name: "Steel",
|
||||
@ -645,6 +663,7 @@ var theme = (function() {
|
||||
b: 118
|
||||
},
|
||||
radius: 0.3,
|
||||
shadow: 0.5,
|
||||
style: "light"
|
||||
}, {
|
||||
name: "Outrun",
|
||||
@ -682,6 +701,7 @@ var theme = (function() {
|
||||
b: 187
|
||||
},
|
||||
radius: 0,
|
||||
shadow: 0,
|
||||
style: "dark"
|
||||
}, {
|
||||
name: "Pumpkin",
|
||||
@ -719,6 +739,7 @@ var theme = (function() {
|
||||
b: 34
|
||||
},
|
||||
radius: 0.2,
|
||||
shadow: 1,
|
||||
style: "dark"
|
||||
}, {
|
||||
name: "Funkadelic",
|
||||
@ -756,6 +777,7 @@ var theme = (function() {
|
||||
b: 34
|
||||
},
|
||||
radius: 1.2,
|
||||
shadow: 0,
|
||||
style: "dark"
|
||||
}, {
|
||||
name: "Elder Bean",
|
||||
@ -793,6 +815,7 @@ var theme = (function() {
|
||||
b: 0
|
||||
},
|
||||
radius: 0.5,
|
||||
shadow: 1.75,
|
||||
style: "dark"
|
||||
}, {
|
||||
name: "Marker",
|
||||
@ -830,6 +853,7 @@ var theme = (function() {
|
||||
b: 0
|
||||
},
|
||||
radius: 0.3,
|
||||
shadow: 0.25,
|
||||
style: "light"
|
||||
}, {
|
||||
name: "Kapow",
|
||||
@ -867,6 +891,7 @@ var theme = (function() {
|
||||
b: 0
|
||||
},
|
||||
radius: 0.4,
|
||||
shadow: 1,
|
||||
style: "dark"
|
||||
}, {
|
||||
name: "Dash",
|
||||
@ -904,6 +929,7 @@ var theme = (function() {
|
||||
b: 68
|
||||
},
|
||||
radius: 0,
|
||||
shadow: 0,
|
||||
style: "light"
|
||||
}, {
|
||||
name: "Savage",
|
||||
@ -941,6 +967,7 @@ var theme = (function() {
|
||||
b: 0
|
||||
},
|
||||
radius: 0,
|
||||
shadow: 2.5,
|
||||
style: "dark"
|
||||
}, {
|
||||
name: "Trine",
|
||||
@ -978,6 +1005,7 @@ var theme = (function() {
|
||||
b: 255
|
||||
},
|
||||
radius: 0.5,
|
||||
shadow: 1.25,
|
||||
style: "dark"
|
||||
}, {
|
||||
name: "Obsidian",
|
||||
@ -1015,6 +1043,7 @@ var theme = (function() {
|
||||
b: 255
|
||||
},
|
||||
radius: 0.25,
|
||||
shadow: 2,
|
||||
style: "dark"
|
||||
}, {
|
||||
name: "Earthquake",
|
||||
@ -1052,17 +1081,13 @@ var theme = (function() {
|
||||
b: 0
|
||||
},
|
||||
radius: 0.80,
|
||||
shadow: 1,
|
||||
style: "dark"
|
||||
}]
|
||||
};
|
||||
|
||||
mod.custom = {
|
||||
set: function(themeCustom) {
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
path: "theme.style",
|
||||
newValue: themeCustom.style
|
||||
});
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
path: "theme.font",
|
||||
@ -1083,6 +1108,16 @@ var theme = (function() {
|
||||
path: "theme.radius",
|
||||
newValue: themeCustom.radius
|
||||
});
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
path: "theme.style",
|
||||
newValue: themeCustom.style
|
||||
});
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
path: "theme.shadow",
|
||||
newValue: themeCustom.shadow
|
||||
});
|
||||
},
|
||||
get: function(index) {
|
||||
return JSON.parse(JSON.stringify(state.get.current().theme.custom[index]));
|
||||
@ -1110,11 +1145,6 @@ var theme = (function() {
|
||||
}
|
||||
};
|
||||
|
||||
render.radius = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--theme-radius", state.get.current().theme.radius + "rem");
|
||||
};
|
||||
|
||||
render.accent = {
|
||||
color: function() {
|
||||
var html = helper.e("html");
|
||||
@ -1311,6 +1341,16 @@ var theme = (function() {
|
||||
}
|
||||
};
|
||||
|
||||
render.radius = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--theme-radius", state.get.current().theme.radius + "rem");
|
||||
};
|
||||
|
||||
render.shadow = function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--theme-shadow", state.get.current().theme.shadow);
|
||||
};
|
||||
|
||||
render.preset = function() {
|
||||
var themePreset = helper.e(".theme-preset");
|
||||
var formInline = helper.node("div|class:form-inline");
|
||||
@ -1375,6 +1415,7 @@ var theme = (function() {
|
||||
render.font.ui.style();
|
||||
render.color.shade();
|
||||
render.accent.color();
|
||||
render.shadow();
|
||||
render.radius();
|
||||
style.check();
|
||||
link.groupAndItems();
|
||||
@ -1461,6 +1502,7 @@ var theme = (function() {
|
||||
render.font.ui.style();
|
||||
render.color.shade();
|
||||
render.accent.color();
|
||||
render.shadow();
|
||||
render.radius();
|
||||
style.check();
|
||||
link.groupAndItems();
|
||||
@ -1502,11 +1544,12 @@ var theme = (function() {
|
||||
return form;
|
||||
};
|
||||
var successAction = function() {
|
||||
stagedThemeCustom.theme.style = state.get.current().theme.style;
|
||||
stagedThemeCustom.theme.font = state.get.current().theme.font;
|
||||
stagedThemeCustom.theme.color = state.get.current().theme.color;
|
||||
stagedThemeCustom.theme.accent = state.get.current().theme.accent.current;
|
||||
stagedThemeCustom.theme.radius = state.get.current().theme.radius;
|
||||
stagedThemeCustom.theme.shadow = state.get.current().theme.shadow;
|
||||
stagedThemeCustom.theme.style = state.get.current().theme.style;
|
||||
stagedThemeCustom.theme.timestamp = new Date().getTime();
|
||||
mod.custom.add();
|
||||
data.save();
|
||||
@ -1670,6 +1713,7 @@ var theme = (function() {
|
||||
render.color.shade();
|
||||
render.accent.color();
|
||||
render.radius();
|
||||
render.shadow();
|
||||
render.preset();
|
||||
render.custom.all();
|
||||
};
|
||||
|
||||
@ -753,6 +753,10 @@ var update = (function() {
|
||||
dark: 4
|
||||
};
|
||||
return data;
|
||||
},
|
||||
"4.10.0": function(data) {
|
||||
data.state.theme.shadow = 1;
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var version = (function() {
|
||||
|
||||
var current = "4.9.0";
|
||||
var current = "4.10.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.9.0",
|
||||
"version": "4.10.0",
|
||||
"manifest_version": 2,
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "index.html"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user