mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-05 17:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update dot size and color in welcome.css and add color preview in welcome.html

Browse Source
This commit is contained in:
Mauro Balades
2024-07-05 10:04:23 +02:00
parent f03aa78fde
commit 2268515bb1
3 changed files with 20 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/browser/components/zen-welcome/welcome.css
View File

@@ -190,16 +190,16 @@ input[type='checkbox'] {
} }
.dot { .dot {
width: 7px; width: 8px;
height: 7px; height: 8px;
border-radius: 50%; border-radius: 50%;
background: var(--in-content-primary-button-background);
transition: all .1s; transition: all .1s;
background: light-dark(#000, #fff);
cursor: pointer; cursor: pointer;
} }
.dot.active { .dot.active {
background: light-dark(#000, #fff); background: var(--zen-primary-color);
} }
#colorList { #colorList {
@@ -224,3 +224,14 @@ input[type='checkbox'] {
width: 500px; width: 500px;
height: 20px; height: 20px;
} }
#colorPreview {
margin-left: 10px;
border-radius: 5px;
width: 25px;
height: 25px;
position: absolute;
top: 50%;
right: -60px;
transform: translateY(-50%);
}

1
src/browser/components/zen-welcome/welcome.html
View File

@@ -77,6 +77,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
<div id="colorListWrapper"> <div id="colorListWrapper">
<canvas id="colorList" class="cardGroup"></canvas> <canvas id="colorList" class="cardGroup"></canvas>
<div id="dragBall"></div> <div id="dragBall"></div>
<div id="colorPreview"></div>
</div> </div>
<button <button
id="themeNext" id="themeNext"

5
src/browser/components/zen-welcome/welcome.js
View File

@@ -196,12 +196,15 @@ class Themes extends Page {
x = rect.width - 17 - (17/2); x = rect.width - 17 - (17/2);
} }
const data = ctx.getImageData(x - 17, 1, 1, 1).data; const data = ctx.getImageData(x - 17, 1, 1, 1).data;
Services.prefs.setStringPref('zen.theme.accent-color', `#${data[0].toString(16)}${data[1].toString(16)}${data[2].toString(16)}`); let color = `#${data[0].toString(16)}${data[1].toString(16)}${data[2].toString(16)}`;
document.getElementById("colorPreview").style.backgroundColor = color;
Services.prefs.setStringPref('zen.theme.accent-color', color);
} }
const onMouseUp = () => { const onMouseUp = () => {
document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp); document.removeEventListener('mouseup', onMouseUp);
document.getElementById("colorPreview").style.backgroundColor = '';
} }
document.addEventListener('mousemove', onMouseMove); document.addEventListener('mousemove', onMouseMove);