mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-05 19:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove unused CSS files related to Zen theme

Browse Source
This commit is contained in:
Mauro Balades
2024-08-13 21:03:35 +02:00
parent 33ef14c3d8
commit 5a9c4a6666
10 changed files with 257 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,8 @@
<!-- Styles used all over the browser -->
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-theme.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-animations.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-sidebar.css" />
<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-panel-ui.css" />

4
src/browser/base/content/zen-assets.jar.inc.mn
View File

@@ -16,4 +16,6 @@
content/browser/zen-styles/zen-animations.css (content/zen-styles/zen-animations.css)
content/browser/zen-styles/zen-panel-ui.css (content/zen-styles/zen-panel-ui.css)
content/browser/zen-styles/zen-single-components.css (content/zen-styles/zen-single-components.css)
content/browser/zen-styles/zen-floating-urlbar.css (content/zen-styles/zen-floating-urlbar.css)
content/browser/zen-styles/zen-floating-urlbar.css (content/zen-styles/zen-floating-urlbar.css)
content/browser/zen-styles/zen-sidebar.css (content/zen-styles/zen-sidebar.css)
content/browser/zen-styles/zen-toolbar.css (content/zen-styles/zen-toolbar.css)

9
src/browser/base/content/zen-styles/zen-browser-ui.css
View File

@@ -1,6 +1,7 @@
toolbox#navigator-toolbox,
#browser {
#navigator-toolbox,
#browser,
#appcontent {
background: transparent !important;
}
@@ -16,10 +17,6 @@ html#main-window > body {
overflow: hidden;
}
#appcontent {
background: var(--toolbar-bgcolor);
}
:not([inDOMFullscreen="true"]) #appcontent,
#sidebar-box {
/** Sidebar is already hidden in full screen mode */

224
src/browser/base/content/zen-styles/zen-sidebar.css Normal file
View File

@@ -0,0 +1,224 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
:root {
--sidebar-background-color: var(--toolbar-bgcolor) !important;
--zen-sidebar-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
#sidebar-box {
--zen-sidebar-box-border-radius: var(--zen-browser-border-radius);
margin: 10px !important;
border-radius: var(--zen-sidebar-box-border-radius) !important;
overflow: hidden;
transition: .2s;
margin-left: 0 !important;
border: var(--zen-appcontent-border);
box-shadow: none;
}
#sidebar-box[hidden="true"] {
width: 0 !important;
opacity: 0 !important;
}
#sidebar-box[positionend="true"] {
order: 1 !important;
}
#sidebar-box:not([positionend ="true"]) {
margin-right: 0 !important;
}
#zen-main-app-wrapper:has(#sidebar-box:not([hidden="true"], [positionend="true"])) #TabsToolbar {
margin-right: 0 !important;
box-shadow: none !important;
}
#sidebar-splitter {
/* we can still use the splitter but we can't see it */
background: transparent !important;
border-color: transparent !important;
width: 1px !important;
margin-right: 5px !important;
}
#sidebar-box[positionend] {
margin-left: 0;
}
.zen-sidebar-action-button {
width: var(--zen-sidebar-action-button-width);
height: var(--zen-sidebar-action-button-width);
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
#TabsToolbar .toolbarbutton-1 {
width: var(--zen-sidebar-action-button-width);
height: var(--zen-sidebar-action-button-width);
margin-left: auto !important;
margin-right: auto !important;
}
#TabsToolbar .toolbarbutton-1:not(.zen-sidebar-panel-button) > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack),
.zen-sidebar-action-button {
border-radius: 8px !important;
}
:root[customizing] #navigator-toolbox {
display: none;
}
#TabsToolbar .toolbarbutton-1:hover > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack),
#TabsToolbar .toolbarbutton-1[open="true"] > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack),
.zen-sidebar-action-button:hover,
.zen-sidebar-action-button[open="true"] {
background: var(--toolbarbutton-hover-background) !important;
}
.zen-sidebar-action-button:hover image {
background: transparent !important;
}
.zen-sidebar-action-button label {
display: none !important;
}
#sidebar-box[hidden="true"] .zen-sidebar-action-button,
.zen-sidebar-panel-button[animate] {
opacity: 0;
transform: translateX(-110%);
animation: zen-sidebar-button-fadeIn 0.4s forwards;
}
@keyframes zen-sidebar-button-fadeIn {
0% {
transform: translateX(-110%);
opacity: 0;
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* Icons */
#zen-preferences-button {
list-style-image: url("chrome://global/skin/icons/settings.svg");
}
#zen-history-button {
list-style-image: url("chrome://browser/skin/history.svg");
}
#zen-bookmark-button {
list-style-image: url(chrome://browser/skin/bookmark-hollow.svg);
}
#zen-profile-button {
display: flex;
justify-content: center;
align-items: center;
}
#zen-profile-button > div:last-child {
background-image: var(--avatar-image-url);
border-radius: 50%;
background-size: cover;
background-position: center;
width: 20px;
height: 20px;
border: 2px solid var(--zen-colors-border);
}
/* Ugly code */
#TabsToolbar .zen-sidebar-action-button:nth-child(1), .zen-sidebar-panel-button:nth-child(1) { animation-delay: 0.1s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(2), .zen-sidebar-panel-button:nth-child(2) { animation-delay: 0.2s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(3), .zen-sidebar-panel-button:nth-child(3) { animation-delay: 0.3s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(4), .zen-sidebar-panel-button:nth-child(4) { animation-delay: 0.4s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(5), .zen-sidebar-panel-button:nth-child(5) { animation-delay: 0.5s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(6), .zen-sidebar-panel-button:nth-child(6) { animation-delay: 0.6s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(7), .zen-sidebar-panel-button:nth-child(7) { animation-delay: 0.7s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(8), .zen-sidebar-panel-button:nth-child(8) { animation-delay: 0.8s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(9), .zen-sidebar-panel-button:nth-child(9) { animation-delay: 0.9s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(10), .zen-sidebar-panel-button:nth-child(10) { animation-delay: 1s; }
#TabsToolbar .zen-side-bar-profiles-button-panel-correction {
position: absolute;
bottom: -2px;
right: -2px;
}
#zen-sidebar-icons-wrapper toolbarbutton {
position: relative;
}
#zen-sidebar-icons-wrapper {
display: flex;
flex-direction: column;
margin: 0 var(--zen-tabbrowser-padding);
position: relative;
background: transparent !important;
align-items: center;
justify-content: end;
min-height: fit-content;
--zen-sidebar-action-content-separator: calc(10px + var(--zen-tabbrowser-padding));
padding-top: var(--zen-sidebar-action-content-separator);
margin-top: var(--zen-sidebar-action-content-separator);
}
#zen-sidebar-icons-wrapper::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 1px;
background: var(--zen-colors-border);
}
#zen-sidepanel-button[hidden="true"] {
display: none;
}
#zen-expand-sidebar-button {
display: none;
}
:root:not([inDOMFullscreen="true"]) #zen-sidebar-splitter {
display: block;
width: 1px;
opacity: 0;
}
@media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
#navigator-toolbox {
width: 0;
}
#zen-sidebar-splitter {
display: none;
}
}
@media (-moz-bool-pref: "zen.view.sidebar-expanded.show-button") {
#zen-expand-sidebar-button {
display: block;
}
}
/* Zen split sidebar */
#zen-tabbox-wrapper:has(#zen-sidebar-splitter:not([state="dragging"])) #navigator-toolbox {
transition: .3s !important;
}

19
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
View File

@@ -5,6 +5,7 @@
}
#navigator-toolbox {
--zen-tabbrowser-padding: 5px;
min-width: 55px;
margin-top: 0; /* Issue #156 */
}
@@ -234,10 +235,6 @@
}
@media (-moz-bool-pref: "zen.view.sidebar-expanded") {
#navigator-toolbox {
min-width: calc(var(--zen-navigation-toolbar-min-width) + var(--zen-compact-toolbox-margin-single) * 2) !important;
}
#zen-workspaces-button .zen-workspace-sidebar-name {
display: block;
}
@@ -254,18 +251,12 @@
--zen-navigation-toolbar-min-width: 160px;
min-width: var(--zen-navigation-toolbar-min-width);
align-items: start;
padding-left: 10px;
padding-right: 5px;
transition: .2s;
width: 170px;
border: none;
}
:root:not([inDOMFullscreen="true"]) #zen-sidebar-splitter {
display: block;
width: 1px;
}
.tab-label-container {
display: block;
}
@@ -316,7 +307,7 @@
position: relative;
width: 100%;
}
& .tab-stack {
justify-content: start;
padding: 10px;
@@ -344,10 +335,10 @@
}
#tabbrowser-arrowscrollbox::part(scrollbox) {
/* We have the pinned tabs on the top, next to each other,
* and the rest of the tabs are below them. */
* and the rest of the tabs are below them. */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--tab-min-height), 1fr));
padding: 5px;
padding: calc(var(--zen-tabbrowser-padding) / 2);
}
.tabbrowser-tab:not([pinned]),
@@ -370,7 +361,7 @@
}
#zen-sidebar-icons-wrapper {
width: 100%;
width: -moz-available;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
transition: .1s;

3
src/browser/base/content/zen-styles/zen-theme.css
View File

@@ -110,8 +110,7 @@
@media (prefers-color-scheme: dark) {
:host(:is(.anonymous-content-host, notification-message)),
:root,
.zenLooksAndFeelColorOption {
:root {
--zen-in-content-dialog-background: rgb(28, 28, 32);
--zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);

4
src/browser/base/content/zen-styles/zen-toolbar.css Normal file
View File

@@ -0,0 +1,4 @@
#nav-bar {
background: transparent;
}

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

@@ -50,6 +50,7 @@ groupbox:has(+ .subcategory) {
.navigation {
padding: 50px;
background: var(--zen-colors-tertiary);
}
groupbox button {

2
src/browser/themes/shared/zen-sources.inc.mn
View File

@@ -1 +1,3 @@
skin/classic/browser/preferences/zen-preferences.css (../shared/preferences/zen-preferences.css)
#include zen-icons/jar.inc.mn

15
src/toolkit/themes/shared/in-content/common-shared-css.patch
View File

@@ -1,8 +1,17 @@
diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes/shared/in-content/common-shared.css
index 2b59a0604b4bfefd3bdcfdb9a3964937e9699114..95a656fad02888ba86f618977855644195ebc64a 100644
index 2b59a0604b4bfefd3bdcfdb9a3964937e9699114..d9f5f81158790336c7fa5ad366fd815abfe67087 100644
--- a/toolkit/themes/shared/in-content/common-shared.css
+++ b/toolkit/themes/shared/in-content/common-shared.css
@@ -63,7 +63,7 @@
@@ -5,6 +5,8 @@
@import url("chrome://global/skin/design-system/tokens-brand.css");
@import url("chrome://global/skin/design-system/text-and-typography.css");
+@import url("chrome://browser/content/zen-styles/zen-theme.css");
+
@namespace html "http://www.w3.org/1999/xhtml";
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
@@ -63,7 +65,7 @@
--in-content-table-border-color: var(--in-content-box-border-color);
--in-content-table-header-background: var(--in-content-primary-button-background);
--in-content-table-header-color: var(--in-content-primary-button-text-color);
@@ -11,7 +20,7 @@ index 2b59a0604b4bfefd3bdcfdb9a3964937e9699114..95a656fad02888ba86f6189778556441
--dialog-warning-text-color: var(--red-60);
@@ -791,7 +791,8 @@ html|*#categories > html|*.category:dir(rtl) {
@@ -791,7 +793,8 @@ html|*#categories > html|*.category:dir(rtl) {
@media not (forced-colors) {
#categories > .category[selected],
#categories > .category.selected {