mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-02-06 03:47:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: Add ZenThemeBuilder component for customizing browser theme

Browse Source
This commit is contained in:
Mauro Balades
2024-08-09 00:00:27 +02:00
parent cc024a4528
commit 2264c5f67d
4 changed files with 57 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/browser/base/content/zen-components

Submodule src/browser/base/content/zen-components updated: 47c4361082...0e9849bab8

1
src/browser/base/content/zen-scripts.jar.inc.mn
View File

@@ -5,4 +5,5 @@
content/browser/zen-components/ZenSidebarManager.mjs (content/zen-components/src/ZenSidebarManager.mjs)
content/browser/zen-components/ZenProfileDialogUI.mjs (content/zen-components/src/ZenProfileDialogUI.mjs)
content/browser/zen-components/ZenKeyboardShortcuts.mjs (content/zen-components/src/ZenKeyboardShortcuts.mjs)
content/browser/zen-components/ZenThemeBuilder.mjs (content/zen-components/src/ZenThemeBuilder.mjs)

3
src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
View File

@@ -1,3 +1,4 @@
<script src="chrome://browser/content/zen-components/ZenThemeBuilder.mjs" defer=""/>
<script src="chrome://browser/content/preferences/zen-settings.js"/>
<html:template id="template-paneZenLooks">
<hbox id="zenLooksCategory"
@@ -14,6 +15,8 @@
<hbox id="zenLooksAndFeelColorOptions" align="center">
</hbox>
<html:div id="zen-theme-builder-wrapper"></html:div>
<checkbox id="zenLooksAndFeelUseThemedToolbar"
data-l10n-id="zen-look-and-feel-themed-toolbar"
preference="zen.theme.toolbar-themed"/>

52
src/browser/themes/shared/preferences/zen-preferences.css
View File

@@ -196,3 +196,55 @@ groupbox h2 {
#category-zen-workspaces > .category-icon {
list-style-image: url("chrome://browser/skin/window.svg");
}
/* Theme builder */
#zen-theme-builder {
display: flex;
flex-direction: column;
justify-content: center;
padding: 15px;
background: var(--zen-colors-tertiary);
border-radius: 10px;
margin-bottom: 10px;
}
#zen-theme-builder-color-picker {
width: 180px;
height: 180px;
border-radius: 10px;
margin-right: 10px;
position: relative;
}
#zen-theme-builder-color-picker-canvas {
border-radius: 10px;
width: 100%;
height: 100%;
}
#zen-theme-builder-color-picker-deck {
position: absolute;
top: 0;
left: 0;
width: calc(100% - 20px);
height: calc(100% - 20px);
border-radius: 10px;
margin: 10px;
background: light-dark(rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3));
backdrop-filter: blur(15px);
border: 2px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
}
#zen-theme-builder-color-picker-thumb {
position: absolute;
top: 0;
left: 0;
border: 4px solid light-dark(white, black);
width: 20px;
height: 20px;
border-radius: 50px;
background: var(--zen-primary-color);
transform: translate(-50%, -50%);
}