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

Started working on the gradient generation

Browse Source
This commit is contained in:
mr. M
2024-10-24 23:53:09 +02:00
parent 45ce804ee9
commit c92924db15
6 changed files with 37 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/browser/base/content/zen-assets.inc.xhtml
View File

@@ -9,6 +9,7 @@
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-toolbar.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-tabs.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-browser-ui.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-gradient-generator.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-panel-ui.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-single-components.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-browser-container.css" />

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

Submodule src/browser/base/content/zen-components updated: 8db952694e...6f05fb2acb

3
src/browser/base/content/zen-popupset.inc.xhtml
View File

@@ -105,9 +105,6 @@
<panelmultiview id="PanelUI-zen-gradient-generator-multiview" mainViewId="PanelUI-zen-gradient-generator-view">
<panelview id="PanelUI-zen-gradient-generator-view" class="PanelUI-subView zen-theme-picker" role="document" mainview-with-header="true" has-custom-header="true">
<hbox class="zen-theme-picker-gradient">
<hbox class="zen-theme-picker-gradient-container">
</hbox>
<html:canvas class="zen-theme-picker-gradient-canvas" width="180" height="180"></html:canvas>
</hbox>
</panelview>
</panelmultiview>

12
src/browser/base/content/zen-styles/zen-animations.css
View File

@@ -13,6 +13,18 @@
}
}
@keyframes zen-theme-picker-dot-animation {
from {
transform: scale(0.8);
}
50% {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
@keyframes zen-jello-out-animation {
0% {
transform: scale3d(1, 1, 1);

62
src/browser/base/content/zen-styles/zen-gradient-generator.css
View File

@@ -1,54 +1,32 @@
#PanelUI-zen-gradient-generator {
--panel-width: 300px;
min-width: var(--panel-width);
}
.zen-theme-picker-gradient {
border-radius: 10px;
position: relative;
overflow: hidden;
background: white;
& .zen-theme-picker-gradient-container {
--zen-gradient-picker-padding: 10px;
position: absolute;
top: var(--zen-gradient-picker-padding);
left: var(--zen-gradient-picker-padding);
height: calc(100% - 2 * var(--zen-gradient-picker-padding));
width: calc(100% - 2 * var(--zen-gradient-picker-padding));
display: flex;
background: color-mix(in srgb, var(--zen-colors-primary) 70%, transparent 30%);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(20px);
border-radius: var(--zen-border-radius);
border: 1px solid var(--zen-colors-border);
background: var(--zen-themed-toolbar-bg);
& .zen-theme-picker-gradient-color {
&[primary='true'] {
width: 30px;
height: 30px;
border-width: 6px;
}
min-height: calc(var(--panel-width) - var(--panel-padding) * 2);
min-width: calc(var(--panel-width) - var(--panel-padding) * 2);
&:not([primary='true']) {
width: 20px;
height: 20px;
border-width: 4px;
}
border-radius: 50%;
border-style: solid;
border-color: white;
background: var(--zen-chosen-color, black);
transform: translate(-50%, -50%);
cursor: move;
& .zen-theme-picker-dot {
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--zen-theme-picker-dot-color);
box-shadow: 0 0 0 2px var(--zen-themed-toolbar-bg);
cursor: pointer;
border: 3px solid var(--zen-colors-border);
animation: zen-theme-picker-dot-animation .5s;
transition: transform .2s;
transition: transform 0.2s;
&[dragging='true'] {
transform: scale(1.2) translate(-50%, -50%);
}
transform: scale(1.2);
}
}
}

4
src/browser/components/preferences/zen-preferences-links.xhtml
View File

@@ -3,9 +3,5 @@
rel="stylesheet"
href="chrome://browser/skin/preferences/zen-preferences.css"
/>
<link
rel="stylesheet"
href="chrome://browser/content/zen-styles/zen-gradient-generator.css"
/>
<script src="chrome://browser/content/zenThemeModifier.js"/>
<link rel="localization" href="browser/preferences/zen-preferences.ftl"/>