mirror of
https://github.com/zen-browser/desktop.git
synced 2026-04-29 18:54:30 +00:00
Remove unused CSS files related to Zen theme
This commit is contained in:
Mauro Balades
File diff suppressed because it is too large
Load Diff
@@ -1,51 +0,0 @@
|
||||
/*
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
/** Zen Decks - ONLY USED FOR SPLIT VIEWS, DO NOT USE THIS CLASS FOR ANY OTHER PURPOSE **/
|
||||
|
||||
#tabbrowser-tabpanels[zen-split-view="true"] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#tabbrowser-tabpanels[zen-split-view="true"] > *:not([zen-split="true"]) {
|
||||
flex: 0;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
#tabbrowser-tabpanels[zen-split-view="true"] > [zen-split="true"] {
|
||||
flex: 1;
|
||||
margin-right: 5px !important;
|
||||
}
|
||||
|
||||
#tabbrowser-tabpanels[zen-split-view="true"] > [zen-split-anim="true"] {
|
||||
animation: zen-deck-fadeIn 0.2s forwards;
|
||||
}
|
||||
|
||||
#tabbrowser-tabpanels[zen-split-view="true"] .browserSidebarContainer[zen-split-active="true"] {
|
||||
box-shadow: 0 0 0 2px var(--zen-primary-color) !important;
|
||||
}
|
||||
|
||||
#tabbrowser-tabpanels:has(> [zen-split="true"]) {
|
||||
display: grid;
|
||||
grid-gap: 0 5px !important;
|
||||
}
|
||||
|
||||
@keyframes zen-deck-fadeIn {
|
||||
0% {
|
||||
transform: scale(0.9);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#zen-split-views-box:not([hidden="true"]) {
|
||||
display: flex !important;
|
||||
}
|
||||
@@ -1,395 +0,0 @@
|
||||
/*
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
#PanelUI-zen-profiles {
|
||||
--menu-panel-width: 19em;
|
||||
position: relative;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
#PanelUI-zen-profiles-header {
|
||||
width: 280px;
|
||||
height: 130px;
|
||||
background: color-mix(in srgb, var(--zen-primary-color) 80%, white 20%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#PanelUI-zen-profiles-user-picture {
|
||||
background-image: var(--avatar-image-url);
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
border: 4px var(--arrowpanel-background) solid;
|
||||
background-color: var(--zen-colors-primary-foreground);
|
||||
border-radius: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
margin: 0 auto;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.PanelUI-zen-profiles-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 6px 10px;
|
||||
font: menu;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#PanelUI-zen-profiles-list .PanelUI-zen-profiles-item {
|
||||
margin-bottom: 2px;
|
||||
border-radius: 5px;
|
||||
margin: 2px 5px;
|
||||
}
|
||||
|
||||
#PanelUI-zen-profiles-list > toolbarseparator:first-child {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.PanelUI-zen-profiles-item:hover {
|
||||
background: var(--panel-item-hover-bgcolor);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.PanelUI-zen-profiles-item::after {
|
||||
content: '';
|
||||
background-image: url("chrome://global/skin/icons/arrow-right.svg");
|
||||
background-size: 1em;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-left: auto;
|
||||
pointer-events: none;
|
||||
top: 50%;
|
||||
right: 1em;
|
||||
transform: translateY(-50%);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.PanelUI-zen-profiles-item::after {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
|
||||
#PanelUI-zen-profiles-list .PanelUI-zen-profiles-item-avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 5px;
|
||||
margin: 1px 0.5em 1px 1px;
|
||||
}
|
||||
|
||||
#PanelUI-zen-profiles-list .PanelUI-zen-profiles-item-name {
|
||||
font-weight: normal;
|
||||
font-size: 15px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#PanelUI-zen-profiles-current-info {
|
||||
--zen-separation-from-content: 35px;
|
||||
margin-top: calc(var(--zen-separation-from-content) + 30px); /** Ignore the profile picture */
|
||||
}
|
||||
|
||||
#PanelUI-zen-profiles-current-name {
|
||||
font-size: 1.3em;
|
||||
font-weight: 600;
|
||||
line-height: 0.5;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
#PanelUI-zen-profiles toolbarbutton::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#PanelUI-zen-profiles toolbarbutton {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
|
||||
#PanelUI-zen-profiles toolbarbutton:last-child {
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
|
||||
#PanelUI-zen-profiles-current-profile-current {
|
||||
font-size: 13px;
|
||||
opacity: 0.5;
|
||||
margin: 0 auto var(--zen-separation-from-content) auto;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
#PanelUI-zen-profiles-actions {
|
||||
color-scheme: dark;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
border-radius: 10px !important;
|
||||
padding: 1px 10px !important;
|
||||
transition: .1s;
|
||||
color: light-dark(white, black);
|
||||
background: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
||||
#PanelUI-zen-profiles-managePrfs:hover {
|
||||
background: var(--panel-item-hover-bgcolor);
|
||||
}
|
||||
|
||||
#PanelUI-zen-profiles-actions toolbarbutton {
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#PanelUI-zen-profiles-actions toolbarbutton .toolbarbutton-icon {
|
||||
width: 14px !important;
|
||||
}
|
||||
|
||||
#PanelUI-zen-profiles-actions toolbarbutton:not(:first-child) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#PanelUI-zen-profiles-actions toolbarbutton label {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Split view panel */
|
||||
|
||||
#zenSplitViewModifierViewDefault {
|
||||
min-width: 180px;
|
||||
min-height: 180px;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
|
||||
gap: 10px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#zenSplitViewModifierViewDefault > vbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview {
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--zen-colors-border);
|
||||
width: 100px;
|
||||
height: 70px;
|
||||
overflow: hidden;
|
||||
padding: 5px;
|
||||
user-select: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.active {
|
||||
box-shadow: 0 0 0 2px var(--zen-primary-color);
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
#zenSplitViewModifierViewDefault p {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview box {
|
||||
background-color: var(--zen-colors-secondary);
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.hsep {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.hsep box:last-child {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.vsep box:last-child {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid {
|
||||
display: grid;
|
||||
grid-template-areas: "a b" "c b";
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(1) {
|
||||
grid-area: a;
|
||||
}
|
||||
|
||||
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(2) {
|
||||
grid-area: b;
|
||||
}
|
||||
|
||||
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(3) {
|
||||
grid-area: c;
|
||||
}
|
||||
|
||||
/* Workspaces */
|
||||
|
||||
#zen-workspaces-button {
|
||||
border: 1px solid var(--zen-colors-border);
|
||||
border-radius: 50px;
|
||||
height: calc(var(--zen-sidebar-action-button-width) - 10px) !important;
|
||||
margin-bottom: 5px !important;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#PanelUI-zen-workspaces {
|
||||
--panel-width: 320px;
|
||||
--panel-padding: 0;
|
||||
}
|
||||
|
||||
#PanelUI-zen-workspaces > panelmultiview {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
#PanelUI-zen-workspaces panelmultiview panelview {
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
width: var(--panel-width);
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
#PanelUI-zen-workspaces-create-input {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#PanelUI-zen-workspaces-create-icons-container toolbarbutton {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
#PanelUI-zen-workspaces-create-icons-container toolbarbutton[selected="true"] {
|
||||
border-color: var(--zen-colors-secondary);
|
||||
}
|
||||
|
||||
#PanelUI-zen-workspaces-create-icons-container toolbarbutton .toolbarbutton-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#PanelUI-zen-workspaces-create-icons-container toolbarbutton .toolbarbutton-text {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
#PanelUI-zen-workspaces-create-icons-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
#PanelUI-zen-workspaces-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#PanelUI-zen-workspaces-list[empty="true"] {
|
||||
font-weight: 600;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
text-align: start;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#PanelUI-zen-workspaces-current-info toolbarbutton:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
#PanelUI-zen-workspaces-list toolbarbutton,
|
||||
#PanelUI-zen-workspaces-current-info toolbarbutton {
|
||||
padding: 5px;
|
||||
border-radius: 7px;
|
||||
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
& .zen-workspace-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 7px;
|
||||
margin-right: 10px;
|
||||
border: 1px solid var(--zen-colors-border);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
& .zen-workspace-name {
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
& .zen-workspace-actions {
|
||||
display: none;
|
||||
margin: 0;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
&:hover .zen-workspace-actions,
|
||||
& .zen-workspace-actions[active="true"] {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
#PanelUI-zen-workspaces-current-info toolbarbutton:first-child {
|
||||
margin-bottom: 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#PanelUI-zen-workspaces-view vbox:nth-child(2) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#PanelUI-zen-workspaces-new {
|
||||
margin-left: auto;
|
||||
min-height: 1px !important;
|
||||
padding: 3px;
|
||||
border-radius: 4px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#PanelUI-zen-workspaces-create-footer {
|
||||
padding-bottom: 0 !important;
|
||||
margin-top: 20px;
|
||||
margin-left: 0;
|
||||
margin-bottom: 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#PanelUI-zen-workspaces-create-footer button[default="true"] {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1,278 +0,0 @@
|
||||
/*
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
#zen-sidebar-panels-wrapper {
|
||||
/*min-height: 500px;*/
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
#zen-sidebar-panels-sites {
|
||||
background: transparent;
|
||||
max-width: 1px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#zen-sidebar-add-panel-button:not(:hover) image,
|
||||
.zen-sidebar-panel-button:not([selected="true"], #zen-sidebar-add-panel-button) image {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.zen-sidebar-panel-button {
|
||||
width: var(--zen-sidebar-action-button-width);
|
||||
height: var(--zen-sidebar-action-button-width);
|
||||
max-height: var(--zen-sidebar-action-button-width);
|
||||
padding: 0 3px !important;
|
||||
margin: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.zen-sidebar-panel-button image {
|
||||
border-radius: 10px !important;
|
||||
background: var(--toolbarbutton-hover-background);
|
||||
border: 2px solid transparent;
|
||||
transition: background 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.zen-sidebar-panel-button:hover image {
|
||||
background: color-mix(in srgb, var(--toolbarbutton-hover-background) 12%, transparent);
|
||||
}
|
||||
|
||||
.zen-sidebar-panel-button[selected="true"] image {
|
||||
border-color: var(--zen-primary-color);
|
||||
}
|
||||
|
||||
/** Sidebar view */
|
||||
|
||||
#zen-sidebar-web-panel-wrapper {
|
||||
--zen-default-sidebar-width: 300px;
|
||||
position: relative;
|
||||
margin-right: 0;
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
transition: width 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[hidden="true"]) {
|
||||
max-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned="true"]) {
|
||||
--zen-sidebar-web-panel-spacing: 10px;
|
||||
margin: var(--zen-appcontent-separator-from-window);
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: -moz-available;
|
||||
padding: var(--zen-sidebar-web-panel-spacing);
|
||||
height: calc(100% - 10px);
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel:not([pinned="true"]) {
|
||||
--zen-sidebar-web-panel-spacing: calc(10px / 3);
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel {
|
||||
border-radius: var(--zen-panel-radius);
|
||||
overflow: hidden;
|
||||
border: var(--zen-appcontent-border);
|
||||
background: var(--zen-colors-tertiary);
|
||||
opacity: 0;
|
||||
animation-delay: 0.1s;
|
||||
flex-direction: column;
|
||||
min-width: var(--zen-default-sidebar-width);
|
||||
max-width: 720px;
|
||||
min-height: var(--zen-default-sidebar-width);
|
||||
width: calc(var(--zen-default-sidebar-width) + 200px);
|
||||
pointer-events: all;
|
||||
height: calc(100% - 20px);
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel:not([pinned="true"]) {
|
||||
/* We need to always override the height */
|
||||
height: unset !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel-splitter {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel-hsplitter {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 7px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel[hidden="true"] #zen-sidebar-web-panel-hsplitter,
|
||||
#zen-sidebar-web-panel-wrapper[hidden="true"] + #zen-sidebar-web-panel-splitter,
|
||||
#zen-sidebar-web-panel-wrapper[hidden="true"] + #zen-sidebar-web-panel-hsplitter,
|
||||
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel:not([pinned="true"])) + #zen-sidebar-web-panel-splitter {
|
||||
display: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel:not([pinned="true"]) {
|
||||
animation: zen-sidebar-panel-animation 0.3s ease-in-out forwards;
|
||||
}
|
||||
|
||||
#main-window[customizing="true"] #zen-sidebar-web-panel-wrapper {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel:not([hidden="true"]) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel-wrapper {
|
||||
margin: 0 10px 10px 0;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel[pinned="true"] {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
animation: zen-sidebar-panel-animation-2 0.2s ease-in-out forwards;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel[hidden="true"][pinned="true"] {
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
animation: zen-sidebar-panel-animation-reverse 0.2s ease-in-out forwards;
|
||||
}
|
||||
|
||||
@keyframes zen-sidebar-panel-animation {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.9, 0.9, 0.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zen-sidebar-panel-animation-2 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-50px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zen-sidebar-panel-animation-reverse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
99% {
|
||||
opacity: 0;
|
||||
transform: translateX(-50px);
|
||||
}
|
||||
|
||||
100% {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
#zen-sidebar-web-header,
|
||||
#zen-sidebar-panels-wrapper {
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
border: var(--zen-appcontent-border);
|
||||
border-width: 0 !important;
|
||||
border-bottom-width: 1px !important;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
color-scheme: var(--toolbar-color-scheme);
|
||||
-moz-window-dragging: no-drag;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-header {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-header toolbarbutton {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
#zen-sidebar-panels-wrapper {
|
||||
border-top-width: 1px !important;
|
||||
border-bottom-width: 0px !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel-browser-containers {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#zen-sidebar-introduction-panel {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
#zen-sidebar-introduction-panel[hidden="true"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#zen-sidebar-introduction-panel h1 {
|
||||
font-size: 1.5em;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#zen-sidebar-introduction-panel p {
|
||||
opacity: 0.7;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel browser[zen-sidebar-id] {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel-title {
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
margin: 0 10px;
|
||||
padding: 0;
|
||||
color: var(--text-color-deemphasized);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: -moz-available;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
@@ -1,211 +0,0 @@
|
||||
/*
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
@import url("zen-sidebar-panels.css");
|
||||
|
||||
: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;
|
||||
padding: 0 3px;
|
||||
position: relative;
|
||||
background: transparent !important;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
min-height: fit-content;
|
||||
--zen-sidebar-action-content-separator: 15px;
|
||||
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;
|
||||
}
|
||||
|
||||
@media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
|
||||
#navigator-toolbox {
|
||||
width: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "zen.view.sidebar-expanded.show-button") {
|
||||
#zen-expand-sidebar-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
/*
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
[inDOMFullscreen="true"] #nav-bar,
|
||||
[inDOMFullscreen="true"] #zen-sidebar-web-panel {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
[inDOMFullscreen="true"] #appcontent {
|
||||
margin: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
@@ -1,85 +0,0 @@
|
||||
/*
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
@import url("zen-fullscreen-override.css");
|
||||
|
||||
:root {
|
||||
--zen-main-browser-background: light-dark(white, #1b1b1b);
|
||||
--zen-appcontent-border: 1px solid var(--zen-colors-border);
|
||||
--zen-browser-border-radius: var(--zen-panel-radius);
|
||||
}
|
||||
|
||||
toolbox#navigator-toolbox,
|
||||
#browser {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
#browser {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
html#main-window > body {
|
||||
background: var(--zen-main-browser-background) !important;
|
||||
}
|
||||
|
||||
:not([inDOMFullscreen="true"]) #appcontent {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#appcontent {
|
||||
background: var(--toolbar-bgcolor);
|
||||
}
|
||||
|
||||
:not([inDOMFullscreen="true"]) #appcontent,
|
||||
#sidebar-box {
|
||||
/** Sidebar is already hidden in full screen mode */
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
panel[type="arrow"][animate][animate="open"] {
|
||||
animation: zen-jello-animation 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
panel[type="arrow"][animate][animate="cancel"] {
|
||||
animation: zen-jello-out-animation 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes zen-jello-animation {
|
||||
0% {
|
||||
transform: scale3d(0.8, 0.8, 0.8);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: scale3d(1.02, 1.02, 1.02);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zen-jello-out-animation {
|
||||
0% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: scale3d(1.02, 1.02, 1.02);
|
||||
}
|
||||
|
||||
99% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.8, 0.8, 0.8);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-window-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
/*
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
@namespace html "http://www.w3.org/1999/xhtml";
|
||||
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
||||
|
||||
/** This file is used to override UI inside "common-shared.css" */
|
||||
|
||||
/** These types of buttons look INSAINELY bad in the preferences page */
|
||||
xul|button {
|
||||
border-radius: var(--zen-button-border-radius) !important;
|
||||
padding: var(--zen-button-padding) !important;
|
||||
transition: .1s;
|
||||
min-width: 100px !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
html|button:not(:is(
|
||||
.tab-button, .ghost-button,
|
||||
.button-toggle, .button-edit,
|
||||
.button-add
|
||||
)) {
|
||||
transition: .2s;
|
||||
border-radius: 6px !important;
|
||||
min-width: 80px !important;
|
||||
}
|
||||
@@ -1,124 +0,0 @@
|
||||
/*
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
@import url("zen-common-shared-ui-override.css");
|
||||
|
||||
:host(:is(.anonymous-content-host, notification-message)),
|
||||
:root,
|
||||
.zenLooksAndFeelColorOption {
|
||||
|
||||
/** We also add `.zenLooksAndFeelColorOption` so that it recalculates the colors when the theme changes
|
||||
* in the preferences page.
|
||||
*/
|
||||
|
||||
/** Primary colors examples:
|
||||
* - green: #96D785;
|
||||
* - blue: #0b57d0;
|
||||
* - yellow: #F8BC48;
|
||||
*/
|
||||
|
||||
/** Primary color will be injected by the theme as `--zen-primary-color` */
|
||||
--zen-primary-color: #aac7ff; /* This is the default blue color, in case the theme doesn't provide a primary color */
|
||||
|
||||
/** Zen colors are generated automatically from the primary color */
|
||||
--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%, white 60%);
|
||||
--zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 7%, white 93%);
|
||||
|
||||
--zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, white 10%);
|
||||
--zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, black 20%);
|
||||
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 90%, black 10%);
|
||||
|
||||
--zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 10%, white 80%);
|
||||
|
||||
--zen-dialog-background: var(--zen-colors-tertiary);
|
||||
--zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 8%, #f1f1f1 92%);
|
||||
|
||||
--in-content-primary-button-background: light-dark(
|
||||
color-mix(in srgb, var(--zen-primary-color) 35%, black 65%),
|
||||
color-mix(in srgb, var(--zen-primary-color) 35%, white 65%)
|
||||
) !important;
|
||||
--in-content-primary-button-background-hover: light-dark(
|
||||
color-mix(in srgb, var(--zen-primary-color) 40%, black 60%),
|
||||
color-mix(in srgb, var(--zen-primary-color) 40%, white 60%)
|
||||
) !important;
|
||||
--in-content-primary-button-background-active: var(--zen-colors-hover-bg) !important;
|
||||
--in-content-primary-button-text-color: light-dark(white, black) !important;
|
||||
--in-content-primary-button-border-color: transparent !important;
|
||||
--in-content-primary-button-border-hover: transparent !important;
|
||||
--in-content-primary-button-border-active: var(--zen-colors-border) !important;
|
||||
--zen-characteristic-gradient: linear-gradient(135deg, #fac89a 0%, #e290ff 100%);
|
||||
|
||||
--in-content-accent-color: var(--zen-colors-primary) !important;
|
||||
|
||||
/* This is like the secondary button */
|
||||
--in-content-button-background: light-dark(
|
||||
color-mix(in srgb, var(--zen-primary-color) 20%, transparent 80%),
|
||||
color-mix(in srgb, var(--zen-primary-color) 10%, transparent 90%)
|
||||
) !important;
|
||||
--in-content-button-background-hover: light-dark(
|
||||
color-mix(in srgb, var(--zen-primary-color) 25%, transparent 75%),
|
||||
color-mix(in srgb, var(--zen-primary-color) 15%, transparent 85%)
|
||||
) !important;
|
||||
--button-bgcolor: var(--in-content-button-background) !important;
|
||||
--button-hover-bgcolor: var(--in-content-button-background-hover) !important;
|
||||
--zen-secondary-btn-color: var(--zen-colors-primary-foreground);
|
||||
--focus-outline-color: var(--button-bgcolor) !important;
|
||||
--in-content-button-text-color: var(--zen-secondary-btn-color) !important;
|
||||
|
||||
--toolbarbutton-icon-fill-attention: var(--zen-primary-color) !important;
|
||||
|
||||
--button-primary-bgcolor: var(--in-content-primary-button-background) !important;
|
||||
--button-primary-hover-bgcolor: var(--in-content-primary-button-background-hover) !important;
|
||||
--button-primary-active-bgcolor: var(--in-content-primary-button-background-active) !important;
|
||||
--button-primary-color: var(--in-content-primary-button-text-color) !important;
|
||||
|
||||
--in-content-page-background: var(--zen-colors-tertiary) !important;
|
||||
--zen-in-content-dialog-background: var(--zen-colors-tertiary);
|
||||
|
||||
--zen-button-border-radius: 7px;
|
||||
--zen-button-padding: .6rem 1.2rem;
|
||||
|
||||
/* Other colors */
|
||||
--urlbar-box-bgcolor: var(--zen-urlbar-background) !important;
|
||||
--toolbar-field-focus-background-color: var(--urlbar-box-bgcolor) !important;
|
||||
--zen-input-border-color: light-dark(rgb(204, 204, 204), rgb(66, 65, 77)) !important;
|
||||
|
||||
--zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 50%, white 50%);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:host(:is(.anonymous-content-host, notification-message)),
|
||||
: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%, black 92%);
|
||||
|
||||
--zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 30%, black 70%);
|
||||
}
|
||||
}
|
||||
|
||||
window#commonDialogWindow {
|
||||
background-color: var(--zen-in-content-dialog-background) !important;
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "zen.theme.pill-button") {
|
||||
:host(:is(.anonymous-content-host, notification-message)),
|
||||
:root {
|
||||
--zen-button-border-radius: 20px;
|
||||
}
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
/*
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
@import url("./in-content/zen-common-shared.css");
|
||||
|
||||
:root {
|
||||
--zen-panel-radius: 9px;
|
||||
|
||||
--arrowpanel-background: var(--zen-dialog-background) !important;
|
||||
--arrowpanel-border-color: var(--zen-dialog-border-color) !important;
|
||||
--arrowpanel-border-radius: var(--zen-panel-radius) !important;
|
||||
|
||||
&:-moz-lwtheme {
|
||||
color: var(--lwt-text-color);
|
||||
--link-color: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--zen-dialog-border-color: rgba(255,255,255,.1);
|
||||
}
|
||||
}
|
||||
@@ -1,445 +0,0 @@
|
||||
/*
|
||||
* 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 {
|
||||
--panel-subview-body-padding: 2px 0 !important;
|
||||
--arrowpanel-menuitem-border-radius: 5px !important;
|
||||
--arrowpanel-menuitem-margin: var(--uc-arrowpanel-menuitem-margin-block) var(--uc-arrowpanel-menuitem-margin-inline) !important;
|
||||
--arrowpanel-menuitem-padding-block: 8px !important;
|
||||
--arrowpanel-menuitem-padding-inline: 14px !important;
|
||||
--uc-arrowpanel-menuicon-margin-inline: 14px;
|
||||
--uc-arrowpanel-menuitem-margin-inline: 4px;
|
||||
--uc-arrowpanel-menuitem-margin-block: 2px;
|
||||
--panel-separator-margin-vertical: 2px !important;
|
||||
--panel-separator-margin-horizontal: 1px !important;
|
||||
|
||||
--uc-panel-zoom-button-padding: 8px;
|
||||
--uc-panel-zoom-button-inline-padding: 9px;
|
||||
--uc-panel-zoom-padding-block: calc(var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block));
|
||||
|
||||
--uc-autocomplete-panel-menuitem-margin: 4px;
|
||||
--uc-autocomplete-panel-menuicon-padding-inline: 14px;
|
||||
--uc-autocomplete-panel-separator-margin-vertical: 4px;
|
||||
|
||||
--uc-permission-itemcontainer-padding-block: 8px;
|
||||
--uc-permission-item-margin-block: 4px;
|
||||
--uc-permission-item-padding-inline: 16px;
|
||||
|
||||
--uc-contextmenu-border-radius: 8px;
|
||||
--uc-contextmenu-padding: calc(4px - var(--uc-contextmenu-menuitem-border-width)) 0;
|
||||
--uc-contextmenu-menuitem-border-radius: calc(4px + var(--uc-contextmenu-menuitem-border-width));
|
||||
--uc-contextmenu-menuitem-padding-block: 6px;
|
||||
--uc-contextmenu-menuitem-padding-inline: 10px;
|
||||
--uc-contextmenu-menuitem-border-width: 2px;
|
||||
--uc-contextmenu-menuicon-margin-inline: 12px;
|
||||
--uc-contextmenu-menuitem-margin-inline: calc(4px - var(--uc-contextmenu-menuitem-border-width));
|
||||
--uc-contextmenu-menuitem-margin-block: 0px;
|
||||
--uc-contextmenu-menuitem-margin: var(--uc-contextmenu-menuitem-margin-block) var(--uc-contextmenu-menuitem-margin-inline);
|
||||
--uc-contextmenu-separator-vertical: calc(4px - var(--uc-contextmenu-menuitem-border-width));
|
||||
--uc-contextmenu-separator-horizontal: 0;
|
||||
|
||||
--panel-separator-color: var(--zen-colors-border) !important;
|
||||
--zen-panel-separator-width: 1px;
|
||||
}
|
||||
|
||||
/* app menu */
|
||||
.addon-banner-item,
|
||||
.panel-banner-item {
|
||||
margin: 2px 4px 2px !important;
|
||||
padding-inline: 4px 12px !important;
|
||||
padding-block: var(--arrowpanel-menuitem-padding-block) !important;
|
||||
border-radius: var(--arrowpanel-menuitem-border-radius) !important;
|
||||
}
|
||||
|
||||
#appMenu-fxa-label2 label,
|
||||
#PanelUI-fxa-menu-syncnow-button label {
|
||||
margin-block: 0 !important;
|
||||
}
|
||||
|
||||
.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined)>.toolbarbutton-text,
|
||||
.subviewbutton:not(#appMenu-zoom-controls > .subviewbutton)>.toolbarbutton-icon+.toolbarbutton-text,
|
||||
#appMenu-fxa-label2>vbox {
|
||||
padding-inline-start: var(--uc-arrowpanel-menuicon-margin-inline) !important;
|
||||
}
|
||||
|
||||
/* special case menuitems with no icons */
|
||||
#appMenu-zoom-controls>.toolbarbutton-text,
|
||||
#fxa-manage-account-button>vbox,
|
||||
#PanelUI-fxa-menu-syncnow-button>hbox {
|
||||
padding-inline-start: calc(16px + var(--uc-arrowpanel-menuicon-margin-inline)) !important;
|
||||
}
|
||||
|
||||
.subviewbutton>.toolbarbutton-icon {
|
||||
width: 15px !important;
|
||||
}
|
||||
|
||||
/* firefox profile avatar in appmenu */
|
||||
#appMenu-fxa-label2::before {
|
||||
content: "";
|
||||
display: -moz-box;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: var(--avatar-image-url) 0/16px;
|
||||
scale: 1.25;
|
||||
border-radius: 99px;
|
||||
}
|
||||
|
||||
/* disable proton account separator */
|
||||
#appMenu-fxa-separator {
|
||||
border-image: none !important;
|
||||
}
|
||||
|
||||
#appMenu-fxa-status2:not([fxastatus]) {
|
||||
padding-block: 0 !important;
|
||||
}
|
||||
|
||||
#appMenu-fxa-status2:not([fxastatus])>#appMenu-fxa-label2 {
|
||||
margin-inline-end: calc(var(--arrowpanel-menuitem-padding-inline) * -1) !important;
|
||||
}
|
||||
|
||||
/* zoom controls */
|
||||
#appMenu-zoom-controls {
|
||||
border-top: 1px solid var(--panel-separator-color) !important;
|
||||
padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) + var(--uc-arrowpanel-menuitem-margin-inline)) var(--uc-arrowpanel-menuitem-margin-inline) !important;
|
||||
padding-block: var(--uc-panel-zoom-padding-block) !important;
|
||||
margin: var(--panel-separator-margin-vertical) 0 calc(var(--panel-separator-margin-vertical) * -1) !important;
|
||||
}
|
||||
|
||||
#appMenu-zoom-controls>.subviewbutton {
|
||||
padding: var(--uc-panel-zoom-button-padding) var(--uc-panel-zoom-button-inline-padding) !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
#appMenu-zoom-controls>#appMenu-zoomReset-button2 {
|
||||
padding: var(--uc-panel-zoom-button-padding) calc(var(--uc-panel-zoom-button-padding) / 2) !important;
|
||||
}
|
||||
|
||||
/* #appMenu-zoomReduce-button2, */
|
||||
#appMenu-zoom-controls>#appMenu-fullscreen-button2 {
|
||||
margin-left: calc((var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) * 2 + 1px) !important;
|
||||
}
|
||||
|
||||
#appMenu-zoom-controls>#appMenu-fullscreen-button2::before {
|
||||
content: "";
|
||||
border-inline-start: 1px solid var(--panel-separator-color);
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 32px;
|
||||
margin-block: calc(var(--uc-panel-zoom-button-padding) * -1);
|
||||
transform: translateX(calc(var(--uc-panel-zoom-button-inline-padding) * -1 - (var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) - 1px));
|
||||
}
|
||||
|
||||
#appMenu-zoomReset-button2 {
|
||||
height: calc(16px + var(--uc-panel-zoom-button-padding) * 2) !important;
|
||||
min-height: calc(16px + var(--uc-panel-zoom-button-padding) * 2) !important;
|
||||
}
|
||||
|
||||
#appMenu-zoomReduce-button2:not([disabled], [open], :active):is(:hover),
|
||||
#appMenu-zoomEnlarge-button2:not([disabled], [open], :active):is(:hover),
|
||||
#appMenu-fullscreen-button2:not([disabled], [open], :active):is(:hover),
|
||||
#appMenu-zoomReset-button2:not([disabled], [open], :active):is(:hover) {
|
||||
background-color: var(--panel-item-hover-bgcolor) !important;
|
||||
}
|
||||
|
||||
#appMenu-zoomReduce-button2:not([disabled]):is([open], :hover:active),
|
||||
#appMenu-zoomEnlarge-button2:not([disabled]):is([open], :hover:active),
|
||||
#appMenu-fullscreen-button2:not([disabled]):is([open], :hover:active),
|
||||
#appMenu-zoomReset-button2:not([disabled]):is([open], :hover:active) {
|
||||
background-color: var(--panel-item-active-bgcolor) !important;
|
||||
}
|
||||
|
||||
#appMenu-zoomReset-button2>.toolbarbutton-text,
|
||||
#appMenu-fullscreen-button2>.toolbarbutton-icon {
|
||||
background-color: transparent !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.subviewbutton[shortcut]::after {
|
||||
opacity: 0.7 !important;
|
||||
}
|
||||
|
||||
#widget-overflow-mainView .panel-subview-body {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.PanelUI-subView>.panel-header+toolbarseparator {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.PanelUI-subView>.panel-header+toolbarseparator+.panel-subview-body {
|
||||
padding-top: var(--panel-separator-margin-vertical) !important;
|
||||
}
|
||||
|
||||
#identity-popup-security-button {
|
||||
margin-bottom: var(--panel-separator-margin-vertical) !important;
|
||||
}
|
||||
|
||||
#permission-popup-mainView-panel-header,
|
||||
#identity-popup-mainView-panel-header,
|
||||
#protections-popup-mainView-panel-header,
|
||||
.panel-header {
|
||||
min-height: calc((var(--arrowpanel-menuitem-padding-block) + 4px) * 2 + 16px) !important;
|
||||
}
|
||||
|
||||
/* URL bar popup */
|
||||
|
||||
.identity-popup-security-connection>hbox>description {
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
.identity-popup-security-connection.identity-button {
|
||||
margin-inline-end: calc(-1 * (var(--arrowpanel-menuitem-padding-inline) - 10px)) !important;
|
||||
}
|
||||
|
||||
#identity-popup-mainView-panel-header-span,
|
||||
#permission-popup-mainView-panel-header-span,
|
||||
#identity-popup-mainView-panel-header label,
|
||||
#permission-popup-mainView-panel-header label,
|
||||
#protections-popup-mainView-panel-header-span {
|
||||
margin-block: 0 !important;
|
||||
}
|
||||
|
||||
.permission-popup-section {
|
||||
padding-block: var(--uc-permission-itemcontainer-padding-block) !important;
|
||||
}
|
||||
|
||||
#permission-popup-permissions-content {
|
||||
padding-inline: var(--uc-permission-item-padding-inline) !important;
|
||||
}
|
||||
|
||||
.permission-popup-permission-item,
|
||||
#permission-popup-storage-access-permission-list-header {
|
||||
margin-block: var(--uc-permission-item-margin-block) !important;
|
||||
}
|
||||
|
||||
.permission-popup-permission-label,
|
||||
.permission-popup-permission-header-label {
|
||||
margin-inline-start: var(--uc-arrowpanel-menuicon-margin-inline) !important;
|
||||
}
|
||||
|
||||
#editBookmarkPanel>#editBookmarkHeaderSeparator,
|
||||
#editBookmarkPanel>.panel-subview-body>#editBookmarkSeparator {
|
||||
margin-inline: 0 !important;
|
||||
}
|
||||
|
||||
#identity-popup-mainView > toolbarseparator:first-child,
|
||||
#unified-extensions-view > toolbarseparator:first-child {
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
menupopup::part(content),
|
||||
panel::part(content) {
|
||||
border: var(--zen-appcontent-border) !important;
|
||||
}
|
||||
|
||||
menupopup,
|
||||
panel {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/*toolbarbutton:not(:is(
|
||||
#appMenu-fxa-label2,
|
||||
.subviewbutton-iconic,
|
||||
.zen-sidebar-action-button,
|
||||
.all-tabs-close-button,
|
||||
.zen-sidebar-panel-button,
|
||||
#zen-sidebar-web-panel-pinned,
|
||||
#PanelUI-zen-profiles-managePrfs,
|
||||
.bookmark-item,
|
||||
#urlbar-zoom-button,
|
||||
.panel-info-button,
|
||||
)),*/
|
||||
#PanelUI-zen-profiles menuitem {
|
||||
/** ADD HERE ALL TYPES OF BUTTONS THAT WANT TO LOOK CHROME LIKE!!! */
|
||||
margin: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.panel-subview-footer-button {
|
||||
padding-top: 10px !important;
|
||||
padding-bottom: 10px !important;
|
||||
}
|
||||
|
||||
#PanelUI-zen-profiles menuitem {
|
||||
padding: 5px !important;
|
||||
}
|
||||
|
||||
#PanelUI-zen-profiles menuitem:last-child {
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
|
||||
panelview .unified-extensions-item-action-button {
|
||||
padding: 5px 20px !important;
|
||||
}
|
||||
|
||||
#unified-extensions-description {
|
||||
padding: 0 20px;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.unified-extensions-item {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.panel-subview-footer-button {
|
||||
--arrowpanel-menuitem-padding-block: 20px !important;
|
||||
--arrowpanel-menuitem-padding-inline: 15px !important;
|
||||
}
|
||||
|
||||
toolbarseparator, menuseparator {
|
||||
border-width: var(--zen-panel-separator-width) !important;
|
||||
}
|
||||
|
||||
#appMenu-zoom-controls {
|
||||
border-top-width: var(--zen-panel-separator-width) !important;
|
||||
}
|
||||
|
||||
#zenEditBookmarkPanelFaviconContainer {
|
||||
border: 1px solid var(--input-border-color);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 16px;
|
||||
background: light-dark(#fff, rgba(255,255,255,.1));
|
||||
}
|
||||
|
||||
#editBookmarkPanel::part(content) {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
#zenEditBookmarkPanelFavicon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#editBookmarkPanel .panel-header {
|
||||
min-height: 0 !important;
|
||||
padding-bottom: 0;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
#editBMPanel_namePicker {
|
||||
width: -moz-available;
|
||||
}
|
||||
|
||||
label.editBMPanel_folderRow,
|
||||
label.editBMPanel_nameRow {
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
hbox.editBMPanel_folderRow {
|
||||
width: -moz-available;
|
||||
}
|
||||
|
||||
.zenEditBMPanel_fieldContainer:not(:first-child) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.zenEditBMPanel_fieldContainer {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#editBookmarkPanelBottomContent {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:host(:not([native])) #label-box {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
#editBMPanel_folderMenuList::part(icon) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/**/
|
||||
|
||||
#unified-extensions-manage-extensions {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
#identity-popup-clear-sitedata-footer {
|
||||
margin-bottom: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
/* Dialog box */
|
||||
|
||||
.printDialogBox {
|
||||
max-width: 90vw !important;
|
||||
}
|
||||
|
||||
.printSettingsBrowser {
|
||||
min-width: 350px !important;
|
||||
}
|
||||
|
||||
/* Context menu */
|
||||
menu, menuitem {
|
||||
&:where([_moz-menuactive]:not([disabled="true"])) {
|
||||
background-color: var(--button-hover-bgcolor);
|
||||
color: var(--button-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
/** Unified Extensions View */
|
||||
|
||||
#unified-extensions-view {
|
||||
--uei-icon-size: 16px !important;
|
||||
|
||||
.unified-extensions-item {
|
||||
margin-block: 0 !important;
|
||||
border-radius: var(--arrowpanel-menuitem-border-radius) !important;
|
||||
|
||||
> .unified-extensions-item-action-button {
|
||||
.unified-extensions-item-message-deck {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: initial !important;
|
||||
}
|
||||
}
|
||||
|
||||
> .unified-extensions-item-menu-button {
|
||||
list-style-image: url("chrome://global/skin/icons/more.svg") !important;
|
||||
padding: 0 !important;
|
||||
|
||||
> .toolbarbutton-icon {
|
||||
padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline) !important;
|
||||
border: none !important;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
> .toolbarbutton-icon {
|
||||
background-color: initial !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--button-primary-hover-bgcolor) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--panel-item-hover-bgcolor);
|
||||
|
||||
> .unified-extensions-item-menu-button > .toolbarbutton-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:has(> .unified-extensions-item-action-button:not([disabled]):hover:active) {
|
||||
background-color: var(--panel-item-active-bgcolor);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user