add layout background colour

This commit is contained in:
zombieFox 2021-08-27 13:12:38 +01:00
parent 9df9373ad7
commit fc00c92a7d
49 changed files with 181 additions and 48 deletions

View File

@ -124,6 +124,14 @@ export const CustomThemeTile = function({
themeSetting.control.opacity.general.update();
themeSetting.control.layout.color.by.update();
themeSetting.control.layout.color.color.update();
themeSetting.control.layout.color.opacity.update();
themeSetting.control.layout.color.collapse.update();
themeSetting.control.layout.divider.size.update();
themeSetting.control.header.color.by.update();
@ -243,6 +251,13 @@ export const CustomThemeTile = function({
'theme.shadow',
'theme.shade.opacity',
'theme.shade.blur',
'theme.layout.color.rgb.r',
'theme.layout.color.rgb.g',
'theme.layout.color.rgb.b',
'theme.layout.color.hsl.h',
'theme.layout.color.hsl.s',
'theme.layout.color.hsl.l',
'theme.layout.color.opacity',
'theme.layout.divider.size',
'theme.header.color.rgb.r',
'theme.header.color.rgb.g',
@ -267,6 +282,7 @@ export const CustomThemeTile = function({
applyCSSClass([
'theme.style',
'theme.background.type',
'theme.layout.color.by',
'theme.header.color.by',
'theme.bookmark.color.by'
]);

View File

@ -40,6 +40,10 @@
position: relative;
}
.is-theme-layout-color-by-custom .layout {
background-color: hsla(var(--theme-layout-color-hsl-h), calc(var(--theme-layout-color-hsl-s) * 1%), calc(var(--theme-layout-color-hsl-l) * 1%), calc(var(--theme-layout-color-opacity) / 100));
}
.is-layout-order-header-bookmark.is-layout-direction-horizontal .layout {
flex-direction: row;
align-items: center;

View File

@ -1754,6 +1754,76 @@ themeSetting.background = (parent) => {
themeSetting.layout = (parent) => {
themeSetting.control.layout.color = {};
themeSetting.control.layout.color.by = new Control_radio({
object: state.get.current(),
radioGroup: [
{ id: 'theme-layout-by-theme', labelText: 'Transparent', description: 'No background colour behind the Layout.', value: 'theme' },
{ id: 'theme-layout-by-custom', labelText: 'Custom colour', description: 'Use a custom colour behind the Layout.', value: 'custom' }
],
label: 'Layout background colour',
groupName: 'theme-layout-by',
path: 'theme.layout.color.by',
action: () => {
applyCSSClass('theme.layout.color.by');
themeSetting.disable();
themeSetting.control.layout.color.collapse.update();
data.save();
}
});
themeSetting.control.layout.color.color = new Control_colorMixer({
object: state.get.current(),
path: 'theme.layout.color',
id: 'theme-layout-color',
labelText: 'Layout background colour',
defaultValue: state.get.default().theme.layout.color.rgb,
minMaxObject: state.get.minMax(),
action: () => {
applyCSSVar([
'theme.layout.color.rgb.r',
'theme.layout.color.rgb.g',
'theme.layout.color.rgb.b',
'theme.layout.color.hsl.h',
'theme.layout.color.hsl.s',
'theme.layout.color.hsl.l'
]);
data.save();
}
});
themeSetting.control.layout.color.opacity = new Control_slider({
object: state.get.current(),
path: 'theme.layout.color.opacity',
id: 'theme-layout-color-opacity',
labelText: 'Background opacity',
value: state.get.current().theme.layout.color.opacity,
defaultValue: state.get.default().theme.layout.color.opacity,
min: state.get.minMax().theme.layout.color.opacity.min,
max: state.get.minMax().theme.layout.color.opacity.max,
action: () => {
applyCSSVar([
'theme.layout.color.opacity'
]);
data.save();
}
});
themeSetting.control.layout.color.area = node('div', [
themeSetting.control.layout.color.color.wrap(),
themeSetting.control.layout.color.opacity.wrap()
]);
themeSetting.control.layout.color.collapse = new Collapse({
type: 'radio',
radioGroup: themeSetting.control.layout.color.by,
target: [{
id: themeSetting.control.layout.color.by.radioSet[1].radio.value,
content: themeSetting.control.layout.color.area
}]
});
themeSetting.control.layout.divider = {
size: new Control_slider({
object: state.get.current(),
@ -1779,6 +1849,17 @@ themeSetting.layout = (parent) => {
parent.appendChild(
node('div', [
themeSetting.control.layout.color.by.wrap(),
form.wrap({
children: [
form.indent({
children: [
themeSetting.control.layout.color.collapse.collapse()
]
})
]
}),
node('hr'),
themeSetting.control.layout.divider.size.wrap()
])
);

View File

@ -119,6 +119,14 @@ export const PresetThemeTile = function({
themeSetting.control.opacity.general.update();
themeSetting.control.layout.color.by.update();
themeSetting.control.layout.color.color.update();
themeSetting.control.layout.color.opacity.update();
themeSetting.control.layout.color.collapse.update();
themeSetting.control.layout.divider.size.update();
themeSetting.control.header.color.by.update();
@ -250,6 +258,13 @@ export const PresetThemeTile = function({
'theme.shadow',
'theme.shade.opacity',
'theme.shade.blur',
'theme.layout.color.rgb.r',
'theme.layout.color.rgb.g',
'theme.layout.color.rgb.b',
'theme.layout.color.hsl.h',
'theme.layout.color.hsl.s',
'theme.layout.color.hsl.l',
'theme.layout.color.opacity',
'theme.layout.divider.size',
'theme.header.color.rgb.r',
'theme.header.color.rgb.g',
@ -274,6 +289,7 @@ export const PresetThemeTile = function({
applyCSSClass([
'theme.style',
'theme.background.type',
'theme.layout.color.by',
'theme.header.color.by',
'theme.bookmark.color.by'
]);

View File

@ -97,7 +97,7 @@ state.default = {
video: { url: '', blur: 0, grayscale: 0, scale: 100, accent: 0, opacity: 100, vignette: { opacity: 0, start: 90, end: 70 } }
},
opacity: { general: 100 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
group: { openAll: { opacity: 100 } },
@ -159,7 +159,14 @@ state.minMax = {
search: { min: 0, max: 100 },
openAll: { min: 0, max: 100 }
},
layout: { divider: { size: { min: 0, max: 10 } } },
layout: {
color: {
hsl: { h: { min: 0, max: 359 }, s: { min: 0, max: 100 }, l: { min: 0, max: 100 } },
rgb: { r: { min: 0, max: 255 }, g: { min: 0, max: 255 }, b: { min: 0, max: 255 } },
opacity: { min: 0, max: 100 }
},
divider: { size: { min: 0, max: 10 } }
},
header: {
color: {
hsl: { h: { min: 0, max: 359 }, s: { min: 0, max: 100 }, l: { min: 0, max: 100 } },
@ -243,6 +250,7 @@ state.option = {
theme: {
accent: { random: { style: ['any', 'light', 'dark', 'pastel', 'saturated'] } },
style: ['dark', 'light', 'system'],
layout: { color: { by: ['theme', 'custom'] } },
header: { color: { by: ['theme', 'custom'] } },
bookmark: { color: { by: ['theme', 'custom'] } },
background: { type: ['theme', 'accent', 'color', 'gradient', 'image', 'video'] }

View File

@ -504,6 +504,13 @@ theme.init = () => {
'theme.shadow',
'theme.shade.opacity',
'theme.shade.blur',
'theme.layout.color.rgb.r',
'theme.layout.color.rgb.g',
'theme.layout.color.rgb.b',
'theme.layout.color.hsl.h',
'theme.layout.color.hsl.s',
'theme.layout.color.hsl.l',
'theme.layout.color.opacity',
'theme.layout.divider.size',
'theme.header.color.rgb.r',
'theme.header.color.rgb.g',
@ -527,6 +534,7 @@ theme.init = () => {
applyCSSClass([
'theme.style',
'theme.background.type',
'theme.layout.color.by',
'theme.header.color.by',
'theme.bookmark.color.by'
]);

View File

@ -19,7 +19,7 @@ export const acrid = {
style: 'dark',
shade: { opacity: 20, blur: 0 },
opacity: { general: 100 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
group: { openAll: { opacity: 100 } },

View File

@ -19,8 +19,8 @@ export const aerial = {
style: 'dark',
shade: { opacity: 2, blur: 0 },
opacity: { general: 0 },
layout: { divider: { size: 1 } },
header: { color: { by: 'custom', opacity: 20, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
layout: { color: { by: 'custom', opacity: 20, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 1 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 0 } },
group: { openAll: { opacity: 0 } },
toolbar: { opacity: 0 }

View File

@ -19,7 +19,7 @@ export const azure = {
style: 'dark',
shade: { opacity: 10, blur: 10 },
opacity: { general: 0 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 30 } },
group: { openAll: { opacity: 0 } },

View File

@ -19,7 +19,7 @@ export const bean = {
style: 'dark',
shade: { opacity: 10, blur: 0 },
opacity: { general: 0 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
group: { openAll: { opacity: 0 } },

View File

@ -19,7 +19,7 @@ export const comet = {
style: 'dark',
shade: { opacity: 15, blur: 0 },
opacity: { general: 0 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 20 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 20 } },
group: { openAll: { opacity: 0 } },

View File

@ -19,7 +19,7 @@ export const corsair = {
style: 'dark',
shade: { opacity: 30, blur: 0 },
opacity: { general: 100 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
group: { openAll: { opacity: 100 } },

View File

@ -19,7 +19,7 @@ export const dash = {
style: 'light',
shade: { opacity: 50, blur: 0 },
opacity: { general: 100 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
group: { openAll: { opacity: 100 } },

View File

@ -19,7 +19,7 @@ export const deco = {
style: 'dark',
shade: { opacity: 10, blur: 0 },
opacity: { general: 100 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
group: { openAll: { opacity: 100 } },

View File

@ -19,7 +19,7 @@ export const earthquake = {
style: 'dark',
shade: { opacity: 80, blur: 0 },
opacity: { general: 100 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
group: { openAll: { opacity: 100 } },

View File

@ -19,7 +19,7 @@ export const funkadelic = {
style: 'dark',
shade: { opacity: 80, blur: 0 },
opacity: { general: 100 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
group: { openAll: { opacity: 100 } },

View File

@ -19,7 +19,7 @@ export const grimm = {
style: 'dark',
shade: { opacity: 90, blur: 0 },
opacity: { general: 100 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
group: { openAll: { opacity: 100 } },

View File

@ -19,9 +19,9 @@ export const hive = {
style: 'dark',
shade: { opacity: 0, blur: 0 },
opacity: { general: 0 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'custom', opacity: 20, hsl: { h: 35, s: 100, l: 61 }, rgb: { r: 255, g: 172, b: 56 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
bookmark: { color: { by: 'custom', opacity: 20, hsl: { h: 35, s: 100, l: 61 }, rgb: { r: 255, g: 172, b: 56 } }, item: { border: 1, opacity: 0 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 1, opacity: 0 } },
group: { openAll: { opacity: 0 } },
toolbar: { opacity: 0 }
};

View File

@ -19,7 +19,7 @@ export const hypnos = {
style: 'dark',
shade: { opacity: 20, blur: 0 },
opacity: { general: 0 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 40 } },
group: { openAll: { opacity: 0 } },

View File

@ -19,7 +19,7 @@ export const infrared = {
style: 'dark',
shade: { opacity: 0, blur: 5 },
opacity: { general: 0 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 0 } },
group: { openAll: { opacity: 0 } },

View File

@ -19,7 +19,7 @@ export const kapow = {
style: 'dark',
shade: { opacity: 40, blur: 4 },
opacity: { general: 0 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 1, opacity: 80 } },
group: { openAll: { opacity: 0 } },

View File

@ -19,7 +19,7 @@ export const koto = {
style: 'dark',
shade: { opacity: 0, blur: 10 },
opacity: { general: 0 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
group: { openAll: { opacity: 0 } },

View File

@ -19,7 +19,7 @@ export const lex = {
style: 'dark',
shade: { opacity: 90, blur: 0 },
opacity: { general: 15 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 15 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 15 } },
group: { openAll: { opacity: 15 } },

View File

@ -19,7 +19,7 @@ export const macaroon = {
style: 'light',
shade: { opacity: 30, blur: 0 },
opacity: { general: 100 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
group: { openAll: { opacity: 100 } },

View File

@ -19,7 +19,7 @@ export const marker = {
style: 'light',
shade: { opacity: 30, blur: 0 },
opacity: { general: 20 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 20 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 20 } },
group: { openAll: { opacity: 20 } },

View File

@ -19,7 +19,7 @@ export const midnight = {
style: 'dark',
shade: { opacity: 10, blur: 0 },
opacity: { general: 0 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
group: { openAll: { opacity: 0 } },

View File

@ -19,7 +19,7 @@ export const mint = {
style: 'dark',
shade: { opacity: 40, blur: 20 },
opacity: { general: 100 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
group: { openAll: { opacity: 100 } },

View File

@ -19,7 +19,7 @@ export const neon = {
style: 'dark',
shade: { opacity: 8, blur: 0 },
opacity: { general: 0 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 45 } },
group: { openAll: { opacity: 0 } },

View File

@ -19,7 +19,7 @@ export const nord = {
style: 'dark',
shade: { opacity: 10, blur: 0 },
opacity: { general: 100 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
group: { openAll: { opacity: 100 } },

View File

@ -19,7 +19,7 @@ export const obsidian = {
style: 'dark',
shade: { opacity: 50, blur: 0 },
opacity: { general: 100 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
group: { openAll: { opacity: 100 } },

View File

@ -19,7 +19,7 @@ export const origin = {
style: 'dark',
shade: { opacity: 0, blur: 10 },
opacity: { general: 0 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 1, opacity: 0 } },
group: { openAll: { opacity: 0 } },

View File

@ -19,7 +19,7 @@ export const outrun = {
style: 'dark',
shade: { opacity: 70, blur: 0 },
opacity: { general: 100 },
layout: { divider: { size: 1 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 1 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
group: { openAll: { opacity: 100 } },

View File

@ -19,7 +19,7 @@ export const pepper = {
style: 'dark',
shade: { opacity: 10, blur: 0 },
opacity: { general: 25 },
layout: { divider: { size: 1 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 1 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 25 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 25 } },
group: { openAll: { opacity: 25 } },

View File

@ -19,7 +19,7 @@ export const point = {
style: 'dark',
shade: { opacity: 4, blur: 0 },
opacity: { general: 45 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 45 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 45 } },
group: { openAll: { opacity: 45 } },

View File

@ -19,7 +19,7 @@ export const pumpkin = {
style: 'dark',
shade: { opacity: 10, blur: 0 },
opacity: { general: 100 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
group: { openAll: { opacity: 100 } },

View File

@ -19,7 +19,7 @@ export const replica = {
style: 'light',
shade: { opacity: 50, blur: 5 },
opacity: { general: 0 },
layout: { divider: { size: 1 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 1 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 0 } },
group: { openAll: { opacity: 0 } },

View File

@ -19,7 +19,7 @@ export const rumble = {
style: 'dark',
shade: { opacity: 20, blur: 0 },
opacity: { general: 100 },
layout: { divider: { size: 1 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 1 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 50 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 50 } },
group: { openAll: { opacity: 0 } },

View File

@ -19,7 +19,7 @@ export const savage = {
style: 'dark',
shade: { opacity: 80, blur: 0 },
opacity: { general: 100 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
group: { openAll: { opacity: 100 } },

View File

@ -19,7 +19,7 @@ export const scoria = {
style: 'dark',
shade: { opacity: 0, blur: 90 },
opacity: { general: 80 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 80 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 80 } },
group: { openAll: { opacity: 80 } },

View File

@ -19,7 +19,7 @@ export const snow = {
style: 'light',
shade: { opacity: 60, blur: 0 },
opacity: { general: 80 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 80 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 2, opacity: 80 } },
group: { openAll: { opacity: 80 } },

View File

@ -19,7 +19,7 @@ export const sol = {
style: 'light',
shade: { opacity: 60, blur: 0 },
opacity: { general: 100 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 10 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
group: { openAll: { opacity: 10 } },

View File

@ -19,7 +19,7 @@ export const steel = {
style: 'light',
shade: { opacity: 70, blur: 0 },
opacity: { general: 100 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
group: { openAll: { opacity: 100 } },

View File

@ -19,7 +19,7 @@ export const stria = {
style: 'dark',
shade: { opacity: 0, blur: 10 },
opacity: { general: 100 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 50 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 50 } },
group: { openAll: { opacity: 0 } },

View File

@ -19,7 +19,7 @@ export const terra = {
style: 'light',
shade: { opacity: 4, blur: 4 },
opacity: { general: 100 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
group: { openAll: { opacity: 0 } },

View File

@ -19,7 +19,7 @@ export const trine = {
style: 'dark',
shade: { opacity: 10, blur: 0 },
opacity: { general: 100 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 40 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
group: { openAll: { opacity: 40 } },

View File

@ -19,7 +19,7 @@ export const umbra = {
style: 'dark',
shade: { opacity: 0, blur: 10 },
opacity: { general: 0 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 70 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 70 } },
group: { openAll: { opacity: 0 } },

View File

@ -19,7 +19,7 @@ export const vanadium = {
style: 'dark',
shade: { opacity: 20, blur: 10 },
opacity: { general: 100 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 40 } },
group: { openAll: { opacity: 0 } },

View File

@ -19,7 +19,7 @@ export const viper = {
style: 'light',
shade: { opacity: 0, blur: 0 },
opacity: { general: 0 },
layout: { divider: { size: 0 } },
layout: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } },
header: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 0 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 0 } },
group: { openAll: { opacity: 0 } },

View File

@ -169,7 +169,7 @@ update.mod['7.0.0'] = function(data) {
data.state.theme.toolbar = { opacity: 100 };
data.state.theme.layout = { divider: { size: 0 } };
data.state.theme.layout = { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } };
data.state.theme.header = { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, search: { opacity: 100 } };
@ -390,7 +390,7 @@ update.mod['7.0.0'] = function(data) {
video: { url: '', blur: 0, grayscale: 0, scale: 100, accent: 0, opacity: 100 }
};
item.layout = { divider: { size: 0 } };
item.layout = { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, divider: { size: 0 } };
item.opacity = { general: 100 };