mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-08 17:39:59 +02:00
Refactor theme preferences by removing unused color options and adjusting border radius settings
This commit is contained in:
mr. M
parent
988056e59c
commit
1475d3daee
5 changed files with 1 additions and 229 deletions
|
|
@ -103,15 +103,13 @@ pref('zen.rice.share.notice.accepted', false);
|
||||||
pref('zen.theme.border-radius', 10); // In pixels
|
pref('zen.theme.border-radius', 10); // In pixels
|
||||||
#else
|
#else
|
||||||
#ifdef XP_WIN
|
#ifdef XP_WIN
|
||||||
pref('zen.theme.border-radius', 12); // In pixels
|
pref('zen.theme.border-radius', 10); // In pixels
|
||||||
#else
|
#else
|
||||||
pref('zen.theme.border-radius', 8); // In pixels
|
pref('zen.theme.border-radius', 8); // In pixels
|
||||||
#endif
|
#endif
|
||||||
#endif
|
#endif
|
||||||
|
|
||||||
pref('zen.theme.color-prefs.use-workspace-colors', true);
|
pref('zen.theme.color-prefs.use-workspace-colors', true);
|
||||||
pref('zen.theme.color-prefs.amoled', false);
|
|
||||||
pref('zen.theme.color-prefs.colorful', false);
|
|
||||||
|
|
||||||
pref('zen.view.compact.hide-tabbar', true);
|
pref('zen.view.compact.hide-tabbar', true);
|
||||||
pref('zen.view.compact.hide-toolbar', false);
|
pref('zen.view.compact.hide-toolbar', false);
|
||||||
|
|
|
||||||
|
|
@ -222,33 +222,3 @@
|
||||||
--zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 30%, var(--zen-dark-color-mix-base) 70%);
|
--zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 30%, var(--zen-dark-color-mix-base) 70%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
@media (-moz-bool-pref: 'zen.theme.color-prefs.amoled') {
|
|
||||||
:root {
|
|
||||||
--zen-dark-color-mix-base: hsl(5 5 5);
|
|
||||||
--zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 4%, rgb(0, 0, 0) 96%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (-moz-bool-pref: 'zen.theme.color-prefs.colorful') {
|
|
||||||
:root {
|
|
||||||
--zen-in-content-dialog-background: rgb(28, 28, 32);
|
|
||||||
|
|
||||||
--zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);
|
|
||||||
--zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 40%, black 60%);
|
|
||||||
--zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 15%, black 85%);
|
|
||||||
|
|
||||||
--zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, black 10%);
|
|
||||||
--zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, white 20%);
|
|
||||||
|
|
||||||
--zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 10%, black 80%);
|
|
||||||
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 80%, black 20%);
|
|
||||||
|
|
||||||
--zen-dialog-background: color-mix(in srgb, var(--zen-primary-color) 10%, black 90%);
|
|
||||||
--zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 8%, rgb(15, 15, 15) 92%);
|
|
||||||
|
|
||||||
--zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 30%, black 70%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -507,7 +507,6 @@ var gZenLooksAndFeel = {
|
||||||
Services.prefs.removeObserver(pref, this);
|
Services.prefs.removeObserver(pref, this);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.setDarkThemeListener();
|
|
||||||
this.setCompactModeStyle();
|
this.setCompactModeStyle();
|
||||||
|
|
||||||
this.applySidebarLayout();
|
this.applySidebarLayout();
|
||||||
|
|
@ -560,41 +559,6 @@ var gZenLooksAndFeel = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
setDarkThemeListener() {
|
|
||||||
const chooser = document.getElementById('zen-dark-theme-styles-form');
|
|
||||||
const radios = [...chooser.querySelectorAll('input')];
|
|
||||||
for (let radio of radios) {
|
|
||||||
if (radio.value === 'amoled' && Services.prefs.getBoolPref('zen.theme.color-prefs.amoled')) {
|
|
||||||
radio.checked = true;
|
|
||||||
} else if (radio.value === 'colorful' && Services.prefs.getBoolPref('zen.theme.color-prefs.colorful')) {
|
|
||||||
radio.checked = true;
|
|
||||||
} else if (
|
|
||||||
radio.value === 'default' &&
|
|
||||||
!Services.prefs.getBoolPref('zen.theme.color-prefs.amoled') &&
|
|
||||||
!Services.prefs.getBoolPref('zen.theme.color-prefs.colorful')
|
|
||||||
) {
|
|
||||||
radio.checked = true;
|
|
||||||
}
|
|
||||||
radio.addEventListener('change', (e) => {
|
|
||||||
let value = e.target.value;
|
|
||||||
switch (value) {
|
|
||||||
case 'amoled':
|
|
||||||
Services.prefs.setBoolPref('zen.theme.color-prefs.amoled', true);
|
|
||||||
Services.prefs.setBoolPref('zen.theme.color-prefs.colorful', false);
|
|
||||||
break;
|
|
||||||
case 'colorful':
|
|
||||||
Services.prefs.setBoolPref('zen.theme.color-prefs.amoled', false);
|
|
||||||
Services.prefs.setBoolPref('zen.theme.color-prefs.colorful', true);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
Services.prefs.setBoolPref('zen.theme.color-prefs.amoled', false);
|
|
||||||
Services.prefs.setBoolPref('zen.theme.color-prefs.colorful', false);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
setCompactModeStyle() {
|
setCompactModeStyle() {
|
||||||
const chooser = document.getElementById('zen-compact-mode-styles-form');
|
const chooser = document.getElementById('zen-compact-mode-styles-form');
|
||||||
const radios = [...chooser.querySelectorAll('input')];
|
const radios = [...chooser.querySelectorAll('input')];
|
||||||
|
|
|
||||||
|
|
@ -68,147 +68,6 @@
|
||||||
|
|
||||||
<hbox id="zenLooksAndFeelGradientPickerParent"></hbox>
|
<hbox id="zenLooksAndFeelGradientPickerParent"></hbox>
|
||||||
|
|
||||||
<html:div id="ZenDarkThemeStyles">
|
|
||||||
<html:h2 data-l10n-id="zen-dark-theme-styles-header"/>
|
|
||||||
<description class="description-deemphasized" data-l10n-id="zen-dark-theme-styles-description" />
|
|
||||||
<form xmlns="http://www.w3.org/1999/xhtml" autocomplete="off" id="zen-dark-theme-styles-form">
|
|
||||||
<label class="web-appearance-choice">
|
|
||||||
<div class="web-appearance-choice-image-container">
|
|
||||||
<svg width="50%" height="50%" viewBox="0 0 229 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
|
|
||||||
<g id="Icon-1--Icon-2" serif:id="Icon 1, Icon 2">
|
|
||||||
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
|
|
||||||
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:transparent"/>
|
|
||||||
</g>
|
|
||||||
<g id="Outline">
|
|
||||||
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
|
|
||||||
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
|
|
||||||
<path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="Top-Bar" serif:id="Top Bar">
|
|
||||||
<g transform="matrix(1.19149,0,0,1.19149,-7.8979,-3.64443)">
|
|
||||||
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1.19149,0,0,1.19149,128.569,-3.64443)">
|
|
||||||
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1.29333,0,0,1,-30.3604,4.42935)">
|
|
||||||
<path d="M149.424,24.359C149.424,26.626 148,28.467 146.247,28.467L77.764,28.467C76.01,28.467 74.587,26.626 74.587,24.359C74.587,22.091 76.01,20.25 77.764,20.25L146.247,20.25C148,20.25 149.424,22.091 149.424,24.359Z" style="fill:var(--zen-colors-primary);"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="Side-Bar" serif:id="Side Bar">
|
|
||||||
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,20.8338)">
|
|
||||||
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,44.7817)">
|
|
||||||
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,68.7295)">
|
|
||||||
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-colors-primary);"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div class="web-appearance-choice-footer">
|
|
||||||
<input type="radio" name="web-appearance" value="amoled" data-l10n-id="preferences-web-appearance-choice-input-auto"
|
|
||||||
/><span data-l10n-id="zen-dark-theme-styles-amoled" />
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
<label class="web-appearance-choice">
|
|
||||||
<div class="web-appearance-choice-image-container">
|
|
||||||
<svg width="50%" height="50%" viewBox="0 0 229 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
|
|
||||||
<g id="Icon-1--Icon-2" serif:id="Icon 1, Icon 2">
|
|
||||||
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
|
|
||||||
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:color-mix(in srgb, var(--zen-colors-secondary) 17%, transparent 98%)"/>
|
|
||||||
</g>
|
|
||||||
<g id="Outline">
|
|
||||||
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
|
|
||||||
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
|
|
||||||
<path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="Top-Bar" serif:id="Top Bar">
|
|
||||||
<g transform="matrix(1.19149,0,0,1.19149,-7.8979,-3.64443)">
|
|
||||||
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1.19149,0,0,1.19149,128.569,-3.64443)">
|
|
||||||
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1.29333,0,0,1,-30.3604,4.42935)">
|
|
||||||
<path d="M149.424,24.359C149.424,26.626 148,28.467 146.247,28.467L77.764,28.467C76.01,28.467 74.587,26.626 74.587,24.359C74.587,22.091 76.01,20.25 77.764,20.25L146.247,20.25C148,20.25 149.424,22.091 149.424,24.359Z" style="fill:var(--zen-primary-color);"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="Side-Bar" serif:id="Side Bar">
|
|
||||||
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,20.8338)">
|
|
||||||
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,44.7817)">
|
|
||||||
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,68.7295)">
|
|
||||||
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div class="web-appearance-choice-footer">
|
|
||||||
<input type="radio" name="web-appearance" value="default" data-l10n-id="preferences-web-appearance-choice-input-light"
|
|
||||||
/><span data-l10n-id="zen-dark-theme-styles-default" />
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
<label class="web-appearance-choice">
|
|
||||||
<div class="web-appearance-choice-image-container">
|
|
||||||
<svg width="50%" height="50%" viewBox="0 0 229 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
|
|
||||||
<g id="Icon-1--Icon-2" serif:id="Icon 1, Icon 2">
|
|
||||||
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
|
|
||||||
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:var(--zen-colors-secondary);"/>
|
|
||||||
</g>
|
|
||||||
<g id="Outline">
|
|
||||||
<g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
|
|
||||||
<path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-primary-color);stroke-width:4px;"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
|
|
||||||
<path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-primary-color);stroke-width:4.78px;"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="Top-Bar" serif:id="Top Bar">
|
|
||||||
<g transform="matrix(1.19149,0,0,1.19149,-7.8979,-3.64443)">
|
|
||||||
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1.19149,0,0,1.19149,128.569,-3.64443)">
|
|
||||||
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1.29333,0,0,1,-30.3604,4.42935)">
|
|
||||||
<path d="M149.424,24.359C149.424,26.626 148,28.467 146.247,28.467L77.764,28.467C76.01,28.467 74.587,26.626 74.587,24.359C74.587,22.091 76.01,20.25 77.764,20.25L146.247,20.25C148,20.25 149.424,22.091 149.424,24.359Z" style="fill:var(--zen-primary-color);"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="Side-Bar" serif:id="Side Bar">
|
|
||||||
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,20.8338)">
|
|
||||||
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,44.7817)">
|
|
||||||
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
|
|
||||||
</g>
|
|
||||||
<g transform="matrix(1.19149,0,0,1.19149,-25.5066,68.7295)">
|
|
||||||
<circle cx="45.459" cy="27.22" r="3.448" style="fill:var(--zen-primary-color);"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div class="web-appearance-choice-footer">
|
|
||||||
<input type="radio" name="web-appearance" value="colorful" data-l10n-id="preferences-web-appearance-choice-input-dark"
|
|
||||||
/><span data-l10n-id="zen-dark-theme-styles-colorful" />
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</form>
|
|
||||||
</html:div>
|
|
||||||
<html:div data-l10n-id="preferences-web-appearance-footer">
|
<html:div data-l10n-id="preferences-web-appearance-footer">
|
||||||
<html:a id="web-appearance-manage-themes-link" class="text-link" data-l10n-name="themes-link" href="about:addons" target="_blank" />
|
<html:a id="web-appearance-manage-themes-link" class="text-link" data-l10n-name="themes-link" href="about:addons" target="_blank" />
|
||||||
</html:div>
|
</html:div>
|
||||||
|
|
|
||||||
|
|
@ -51,24 +51,6 @@ groupbox {
|
||||||
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
|
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
@media (-moz-bool-pref: 'zen.theme.color-prefs.amoled') {
|
|
||||||
groupbox {
|
|
||||||
background: #141414;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (-moz-bool-pref: 'zen.theme.color-prefs.colorful') {
|
|
||||||
groupbox {
|
|
||||||
background: light-dark(white, color-mix(in srgb, var(--zen-primary-color) 10%, #1b1b1b 90%));
|
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--zen-settings-secondary-background: light-dark(#f2f4f4, color-mix(in srgb, var(--zen-colors-tertiary) 70%, #0f0f0f 30%));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.subcategory + groupbox,
|
.subcategory + groupbox,
|
||||||
#noFxaAccount,
|
#noFxaAccount,
|
||||||
#hasFxaAccount {
|
#hasFxaAccount {
|
||||||
|
|
@ -182,7 +164,6 @@ groupbox h2 {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#zen-dark-theme-styles-form,
|
|
||||||
#zen-compact-mode-styles-form {
|
#zen-compact-mode-styles-form {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue