extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-06-26 04:21:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

[feature] add background colour controls

Browse Source
This commit is contained in:
Kuldeep M 2019-07-30 13:20:15 +01:00
parent 682b238c0f
commit cc40feee5e
10 changed files with 94 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/css/base.css
View File

@ -8,7 +8,6 @@ html {
}
body {
background-color: var(--background);
color: rgb(var(--theme-style-text));
font-size: 1rem;
line-height: 1.6;
@ -21,6 +20,14 @@ body {
transition: background-color var(--layout-timing-extra-fast);
}
.is-background-color-by-theme body {
background-color: var(--background-color-theme);
}
.is-background-color-by-custom body {
background-color: var(--background-color-custom);
}
.is-layout-scrollpastend body {
margin-bottom: 40vh;
}

3
src/css/form.css
View File

@ -311,7 +311,8 @@ input[type="color"]:focus {
}
input[type="color"][disabled] {
opacity: 0.5;
opacity: 0.25;
cursor: default;
}
input[type="color"][disabled]:hover,

3
src/css/variables.css
View File

@ -60,7 +60,8 @@
--layout-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.2);
--layout-shadow-large: 0 3px 6px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.2);
/* background */
--background: rgb(var(--theme-gray-01));
--background-color-theme: rgb(var(--theme-gray-01));
--background-color-custom: rgb(0, 0, 0);
--background-image: none;
--background-opacity: 1;
--background-scale: 1;

22
src/index.html
View File

@ -1026,6 +1026,28 @@
</div>
<div class="menu-content-area menu-content-area-background is-hidden">
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Colour</h1>
</div>
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-background-color-by-theme" class="control-background-color-by-theme" type="radio" name="control-background-color-by" value="theme" tabindex="-1">
<label for="control-background-color-by-theme">Theme background colour</label>
</div>
<p class="control-background-color-by-theme-helper form-helper small">Background colour defined by the Dark or Light Theme.</p>
<div class="input-wrap">
<input id="control-background-color-by-custom" class="control-background-color-by-custom" type="radio" name="control-background-color-by" value="custom" tabindex="-1">
<label for="control-background-color-by-custom">Custom background colour</label>
</div>
<div class="form-indent">
<div class="input-wrap">
<input id="control-background-color-custom-current" class="control-background-color-custom-current mb-0" type="color" tabindex="1">
</div>
<p class="control-background-color-theme-helper form-helper small">Take care as some colours may make the Clock, Date and other text unreadable.</p>
</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Image</h1>

6
src/js/background.js
View File

@ -69,6 +69,11 @@ var background = (function() {
var render = {};
render.color = function() {
var html = helper.e("html");
html.style.setProperty("--background-color-custom", "rgb(" + state.get().background.color.custom.r + ", " + state.get().background.color.custom.g + ", " + state.get().background.color.custom.b + ")");
};
render.image = function() {
var html = helper.e("html");
if (state.get().background.image.show) {
@ -209,6 +214,7 @@ var background = (function() {
};
var init = function() {
render.color();
render.image();
render.blur();
render.grayscale();

33
src/js/control.js
View File

@ -2097,6 +2097,29 @@ var control = (function() {
theme.render.accent.color();
link.items();
}
}, {
element: helper.e(".control-background-color-by-theme"),
path: "background.color.by",
type: "radio",
func: function() {
render.dependents();
render.class();
}
}, {
element: helper.e(".control-background-color-by-custom"),
path: "background.color.by",
type: "radio",
func: function() {
render.dependents();
render.class();
}
}, {
element: helper.e(".control-background-color-custom-current"),
path: "background.color.custom",
type: "color",
func: function() {
background.render.color();
}
}, {
element: helper.e(".control-background-image-show"),
path: "background.image.show",
@ -2492,6 +2515,9 @@ var control = (function() {
};
};
var _background = function() {
helper.removeClass(html, "is-background-color-by-theme");
helper.removeClass(html, "is-background-color-by-custom");
helper.addClass(html, "is-background-color-by-" + state.get().background.color.by);
if (state.get().background.image.show) {
helper.addClass(html, "is-background-image-show");
} else {
@ -3018,6 +3044,13 @@ var control = (function() {
_disable.input(".control-background-image-url", true);
_disable.element(".control-background-image-url-helper", true);
};
if (state.get().background.color.by == "theme") {
_disable.input(".control-background-color-custom-current", true);
_disable.element(".control-background-color-theme-helper", true);
} else if (state.get().background.color.by == "custom") {
_disable.input(".control-background-color-custom-current", false);
_disable.element(".control-background-color-theme-helper", false);
};
};
_header();
_edit();

8
src/js/state.js
View File

@ -196,6 +196,14 @@ var state = (function() {
radius: 0.2
},
background: {
color: {
by: "theme",
custom: {
r: 0,
g: 0,
b: 0
}
},
image: {
show: false,
from: "file",

11
src/js/update.js
View File

@ -592,6 +592,17 @@ var update = (function() {
"3.51.0": function(data) {
data.state.link.add = false;
return data;
},
"3.66.0": function(data) {
data.state.background.color = {
by: "theme",
custom: {
r: 0,
g: 0,
b: 0
}
};
return data;
}
};

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() {
var current = "3.65.0";
var current = "3.66.0";
var compare = function(a, b) {
var pa = a.split(".");

2
src/manifest.json
View File

@ -2,7 +2,7 @@
"name": "nightTab",
"short_name": "nightTab",
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"version": "3.65.0",
"version": "3.66.0",
"manifest_version": 2,
"chrome_url_overrides": {
"newtab": "index.html"