mirror of
https://github.com/zen-browser/desktop.git
synced 2025-09-05 19:08:18 +00:00
chore: Update CSS display properties for Zen styles
This commit is contained in:
Mauro Balades
@@ -1,7 +1,9 @@
|
||||
<!-- Styles used all over the browser -->
|
||||
<linkset>
|
||||
<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-buttons.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" />
|
||||
@@ -13,9 +15,14 @@
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-workspaces.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-decks.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-profile-dialog.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-sidebar-panels.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-popup.css" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-compact-mode.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/skin/zen-icons/icons.css" />
|
||||
|
||||
</linkset>
|
||||
|
||||
<!-- Scripts used all over the browser -->
|
||||
<script type="text/javascript">
|
||||
window.addEventListener("DOMContentLoaded", async () => {
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
content/browser/zen-components/ZenThemeBuilder.mjs (content/zen-components/src/ZenThemeBuilder.mjs)
|
||||
|
||||
content/browser/zen-styles/zen-theme.css (content/zen-styles/zen-theme.css)
|
||||
content/browser/zen-styles/zen-buttons.css (content/zen-styles/zen-buttons.css)
|
||||
content/browser/zen-styles/zen-tabs.css (content/zen-styles/zen-tabs.css)
|
||||
content/browser/zen-styles/zen-tabs/vertical-tabs.css (content/zen-styles/zen-tabs/vertical-tabs.css)
|
||||
content/browser/zen-styles/zen-browser-ui.css (content/zen-styles/zen-browser-ui.css)
|
||||
@@ -24,3 +25,12 @@
|
||||
content/browser/zen-styles/zen-workspaces.css (content/zen-styles/zen-workspaces.css)
|
||||
content/browser/zen-styles/zen-profile-dialog.css (content/zen-styles/zen-profile-dialog.css)
|
||||
content/browser/zen-styles/zen-urlbar.css (content/zen-styles/zen-urlbar.css)
|
||||
content/browser/zen-styles/zen-popup.css (content/zen-styles/zen-popup.css)
|
||||
content/browser/zen-styles/zen-sidebar-panels.css (content/zen-styles/zen-sidebar-panels.css)
|
||||
|
||||
content/browser/zen-styles/zen-panels/bookmarks.css (content/zen-styles/zen-panels/bookmarks.css)
|
||||
content/browser/zen-styles/zen-panels/extensions.css (content/zen-styles/zen-panels/extensions.css)
|
||||
content/browser/zen-styles/zen-panels/print.css (content/zen-styles/zen-panels/print.css)
|
||||
|
||||
content/browser/zen-styles/zen-compact-mode.css (content/zen-styles/zen-compact-mode.css)
|
||||
|
||||
|
||||
@@ -67,3 +67,43 @@
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,3 +28,8 @@ html#main-window > body {
|
||||
#zen-main-app-wrapper {
|
||||
background: var(--zen-main-browser-background);
|
||||
}
|
||||
|
||||
#tabbrowser-tabbox {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
43
src/browser/base/content/zen-styles/zen-buttons.css
Normal file
43
src/browser/base/content/zen-styles/zen-buttons.css
Normal file
@@ -0,0 +1,43 @@
|
||||
/*
|
||||
* 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,
|
||||
)),
|
||||
xul|button:is(
|
||||
.expander-down
|
||||
) {
|
||||
transition: .2s;
|
||||
min-width: unset !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "zen.theme.pill-button") {
|
||||
:host(:is(.anonymous-content-host, notification-message)),
|
||||
:root {
|
||||
--zen-button-border-radius: 20px;
|
||||
}
|
||||
}
|
||||
151
src/browser/base/content/zen-styles/zen-compact-mode.css
Normal file
151
src/browser/base/content/zen-styles/zen-compact-mode.css
Normal file
@@ -0,0 +1,151 @@
|
||||
|
||||
/* All overrides for compact mode go here */
|
||||
|
||||
@media not (-moz-bool-pref: "zen.view.compact") {
|
||||
#sidebar-box {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "zen.view.compact") {
|
||||
:root[sizemode="fullscreen"],
|
||||
#navigator-toolbox[inFullscreen]{ margin-top: 0 !important; }
|
||||
|
||||
#navigator-toolbox {
|
||||
--zen-compact-toolbox-margin-single: 15px;
|
||||
--zen-compact-toolbox-margin: var(--zen-compact-toolbox-margin-single);
|
||||
position: absolute;
|
||||
display: block;
|
||||
transition: 200ms ease-in-out !important;
|
||||
transform: translateX(calc(-100% + var(--zen-compact-toolbox-margin-single) + 2px));
|
||||
opacity: 0;
|
||||
line-height: 0;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: var(--zen-compact-toolbox-margin) !important;
|
||||
|
||||
& #titlebar {
|
||||
border: 1px solid var(--zen-colors-border);
|
||||
background: var(--zen-colors-tertiary) !important;
|
||||
padding: 0 5px;
|
||||
border-radius: var(--zen-panel-radius);
|
||||
}
|
||||
}
|
||||
|
||||
@media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
|
||||
#navigator-toolbox {
|
||||
width: fit-content !important;
|
||||
}
|
||||
}
|
||||
|
||||
@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-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[hidden="true"])),
|
||||
#sidebar-box:not([positionend="true"]) {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 10px !important;
|
||||
}
|
||||
|
||||
#sidebar-box[positionend="true"] {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
|
||||
#sidebar-splitter {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
@media not (-moz-bool-pref: "zen.view.compact.hide-toolbar") {
|
||||
#navigator-toolbox {
|
||||
/* Remove the top margin */
|
||||
--zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) / 3) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single);
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel-wrapper,
|
||||
#sidebar-box {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
#navigator-toolbox:hover,
|
||||
#navigator-toolbox:focus-within,
|
||||
#navigator-toolbox[zen-user-show],
|
||||
#mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
|
||||
#navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) {
|
||||
transition-delay: 33ms !important;
|
||||
transform: none !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#navigator-toolbox > *{ line-height: normal; pointer-events: auto }
|
||||
|
||||
#navigator-toolbox,
|
||||
#navigator-toolbox > *{
|
||||
-moz-appearance: none !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-splitter {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Don't apply transform before window has been fully created */
|
||||
:root:not([sessionrestored]) #navigator-toolbox{ transform:none !important }
|
||||
|
||||
:root[customizing] #navigator-toolbox{
|
||||
position: relative !important;
|
||||
transform: none !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
#navigator-toolbox[inFullscreen] > #PersonalToolbar,
|
||||
#PersonalToolbar[collapsed="true"]{ display: none }
|
||||
|
||||
:root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
|
||||
margin-left: 10px !important;
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "zen.view.compact.hide-toolbar") {
|
||||
#zen-appcontent-navbar-container {
|
||||
--urlbar-height: unset;
|
||||
transition: .2s ease-in-out;
|
||||
transform: translateY(calc(-100% + 5px));
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
border-bottom: 1px solid var(--zen-colors-border);
|
||||
top: 0;
|
||||
background: var(--zen-colors-tertiary);
|
||||
z-index: 2;
|
||||
transition: .2s ease-in-out;
|
||||
}
|
||||
|
||||
#zen-appcontent-navbar-container:hover,
|
||||
#zen-appcontent-navbar-container:focus-within,
|
||||
#zen-appcontent-navbar-container[zen-user-show],
|
||||
#mainPopupSet:has(> #appMenu-popup:hover) ~ #zen-appcontent-navbar-container,
|
||||
#zen-appcontent-navbar-container:has(*[open="true"]) {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
#titlebar {
|
||||
padding-top: 5px !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel-wrapper {
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -35,7 +35,7 @@
|
||||
}
|
||||
|
||||
#zen-split-views-box:not([hidden="true"]) {
|
||||
display: flex;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
/* Split view panel */
|
||||
|
||||
60
src/browser/base/content/zen-styles/zen-panels/bookmarks.css
Normal file
60
src/browser/base/content/zen-styles/zen-panels/bookmarks.css
Normal file
@@ -0,0 +1,60 @@
|
||||
#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;
|
||||
}
|
||||
|
||||
#zenEditBookmarkPanelFavicon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#editBookmarkPanel .panel-header {
|
||||
min-height: 0;
|
||||
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;
|
||||
}
|
||||
|
||||
#editBMPanel_folderMenuList::part(icon) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
#unified-extensions-manage-extensions {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
panelview .unified-extensions-item-action-button {
|
||||
padding: 5px 20px;
|
||||
}
|
||||
|
||||
#unified-extensions-description {
|
||||
padding: 0 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.unified-extensions-item {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#unified-extensions-view {
|
||||
--uei-icon-size: 16px;
|
||||
|
||||
.unified-extensions-item {
|
||||
margin-block: 0;
|
||||
border-radius: var(--arrowpanel-menuitem-border-radius);
|
||||
|
||||
> .unified-extensions-item-action-button {
|
||||
.unified-extensions-item-message-deck {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: initial;
|
||||
}
|
||||
}
|
||||
|
||||
> .unified-extensions-item-menu-button {
|
||||
list-style-image: url("chrome://global/skin/icons/more.svg");
|
||||
padding: 0;
|
||||
|
||||
> .toolbarbutton-icon {
|
||||
padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline);
|
||||
border: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
> .toolbarbutton-icon {
|
||||
background-color: initial;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--button-primary-hover-bgcolor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&: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);
|
||||
}
|
||||
}
|
||||
}
|
||||
7
src/browser/base/content/zen-styles/zen-panels/print.css
Normal file
7
src/browser/base/content/zen-styles/zen-panels/print.css
Normal file
@@ -0,0 +1,7 @@
|
||||
.printDialogBox {
|
||||
max-width: 90vw;
|
||||
}
|
||||
|
||||
.printSettingsBrowser {
|
||||
min-width: 350px;
|
||||
}
|
||||
284
src/browser/base/content/zen-styles/zen-popup.css
Normal file
284
src/browser/base/content/zen-styles/zen-popup.css
Normal file
@@ -0,0 +1,284 @@
|
||||
|
||||
@import url("chrome://browser/content/zen-styles/zen-panels/bookmarks.css");
|
||||
@import url("chrome://browser/content/zen-styles/zen-panels/extensions.css");
|
||||
@import url("chrome://browser/content/zen-styles/zen-panels/print.css");
|
||||
|
||||
:root {
|
||||
--panel-subview-body-padding: 2px 0;
|
||||
--arrowpanel-menuitem-border-radius: 5px;
|
||||
--arrowpanel-menuitem-margin: var(--uc-arrowpanel-menuitem-margin-block) var(--uc-arrowpanel-menuitem-margin-inline);
|
||||
--arrowpanel-menuitem-padding-block: 8px;
|
||||
--arrowpanel-menuitem-padding-inline: 14px;
|
||||
--uc-arrowpanel-menuicon-margin-inline: 14px;
|
||||
--uc-arrowpanel-menuitem-margin-inline: 4px;
|
||||
--uc-arrowpanel-menuitem-margin-block: 2px;
|
||||
--panel-separator-margin-vertical: 2px;
|
||||
--panel-separator-margin-horizontal: 1px;
|
||||
|
||||
--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);
|
||||
|
||||
--zen-panel-separator-width: 1px;
|
||||
}
|
||||
|
||||
menupopup, panel {
|
||||
--panel-background: var(--arrowpanel-background);
|
||||
--panel-border-radius: var(--zen-panel-radius);
|
||||
}
|
||||
|
||||
/* app menu */
|
||||
.addon-banner-item,
|
||||
.panel-banner-item {
|
||||
margin: 2px 4px 2px;
|
||||
padding-inline: 4px 12px;
|
||||
padding-block: var(--arrowpanel-menuitem-padding-block);
|
||||
border-radius: var(--arrowpanel-menuitem-border-radius);
|
||||
}
|
||||
|
||||
#appMenu-fxa-label2 label,
|
||||
#PanelUI-fxa-menu-syncnow-button label {
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
/* 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));
|
||||
}
|
||||
|
||||
.subviewbutton>.toolbarbutton-icon {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
#appMenu-fxa-status2:not([fxastatus]) {
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
#appMenu-fxa-status2:not([fxastatus])>#appMenu-fxa-label2 {
|
||||
margin-inline-end: calc(var(--arrowpanel-menuitem-padding-inline) * -1);
|
||||
}
|
||||
|
||||
/* zoom controls */
|
||||
#appMenu-zoom-controls {
|
||||
border-top: 1px solid var(--panel-separator-color);
|
||||
padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) + var(--uc-arrowpanel-menuitem-margin-inline)) var(--uc-arrowpanel-menuitem-margin-inline);
|
||||
padding-block: var(--uc-panel-zoom-padding-block);
|
||||
margin: var(--panel-separator-margin-vertical) 0 calc(var(--panel-separator-margin-vertical) * -1);
|
||||
}
|
||||
|
||||
#appMenu-zoom-controls>.subviewbutton {
|
||||
padding: var(--uc-panel-zoom-button-padding) var(--uc-panel-zoom-button-inline-padding);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#appMenu-zoom-controls>#appMenu-zoomReset-button2 {
|
||||
padding: var(--uc-panel-zoom-button-padding) calc(var(--uc-panel-zoom-button-padding) / 2);
|
||||
}
|
||||
|
||||
/* #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);
|
||||
}
|
||||
|
||||
#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);
|
||||
min-height: calc(16px + var(--uc-panel-zoom-button-padding) * 2);
|
||||
}
|
||||
|
||||
#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);
|
||||
}
|
||||
|
||||
#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);
|
||||
}
|
||||
|
||||
#appMenu-zoomReset-button2>.toolbarbutton-text,
|
||||
#appMenu-fullscreen-button2>.toolbarbutton-icon {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.subviewbutton[shortcut]::after {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
#widget-overflow-mainView .panel-subview-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.PanelUI-subView>.panel-header+toolbarseparator {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.PanelUI-subView>.panel-header+toolbarseparator+.panel-subview-body {
|
||||
padding-top: var(--panel-separator-margin-vertical);
|
||||
}
|
||||
|
||||
#identity-popup-security-button {
|
||||
margin-bottom: var(--panel-separator-margin-vertical);
|
||||
}
|
||||
|
||||
#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);
|
||||
}
|
||||
|
||||
/* URL bar popup */
|
||||
|
||||
.identity-popup-security-connection>hbox>description {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.identity-popup-security-connection.identity-button {
|
||||
margin-inline-end: calc(-1 * (var(--arrowpanel-menuitem-padding-inline) - 10px));
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
.permission-popup-section {
|
||||
padding-block: var(--uc-permission-itemcontainer-padding-block);
|
||||
}
|
||||
|
||||
#permission-popup-permissions-content {
|
||||
padding-inline: var(--uc-permission-item-padding-inline);
|
||||
}
|
||||
|
||||
.permission-popup-permission-item,
|
||||
#permission-popup-storage-access-permission-list-header {
|
||||
margin-block: var(--uc-permission-item-margin-block);
|
||||
}
|
||||
|
||||
.permission-popup-permission-label,
|
||||
.permission-popup-permission-header-label {
|
||||
margin-inline-start: var(--uc-arrowpanel-menuicon-margin-inline);
|
||||
}
|
||||
|
||||
#editBookmarkPanel>#editBookmarkHeaderSeparator,
|
||||
#editBookmarkPanel>.panel-subview-body>#editBookmarkSeparator {
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
#identity-popup-mainView > toolbarseparator:first-child,
|
||||
#unified-extensions-view > toolbarseparator:first-child {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
menupopup::part(content),
|
||||
panel::part(content) {
|
||||
border: var(--zen-appcontent-border);
|
||||
}
|
||||
|
||||
menupopup,
|
||||
panel {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.panel-subview-footer-button {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#identity-popup-clear-sitedata-footer {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.panel-subview-footer-button {
|
||||
--arrowpanel-menuitem-padding-block: 20px;
|
||||
--arrowpanel-menuitem-padding-inline: 15px;
|
||||
}
|
||||
|
||||
toolbarseparator, menuseparator {
|
||||
border-width: var(--zen-panel-separator-width);
|
||||
}
|
||||
|
||||
#appMenu-zoom-controls {
|
||||
border-top-width: var(--zen-panel-separator-width);
|
||||
}
|
||||
|
||||
#identity-popup-multiView toolbarseparator,
|
||||
#editBookmarkHeaderSeparator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Context menu */
|
||||
menu, menuitem {
|
||||
&:where([_moz-menuactive]:not([disabled="true"])) {
|
||||
background-color: var(--button-hover-bgcolor);
|
||||
color: var(--button-hover-color);
|
||||
}
|
||||
}
|
||||
@@ -153,3 +153,17 @@
|
||||
#PanelUI-zen-profiles-actions toolbarbutton label {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#PanelUI-zen-profiles menuitem {
|
||||
/** ADD HERE ALL TYPES OF BUTTONS THAT WANT TO LOOK CHROME LIKE!!! */
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#PanelUI-zen-profiles menuitem {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#PanelUI-zen-profiles menuitem:last-child {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
238
src/browser/base/content/zen-styles/zen-sidebar-panels.css
Normal file
238
src/browser/base/content/zen-styles/zen-sidebar-panels.css
Normal file
@@ -0,0 +1,238 @@
|
||||
/*
|
||||
* 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:not([pinned="true"]) #zen-sidebar-web-panel-hsplitter {
|
||||
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;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
@@ -208,7 +208,7 @@
|
||||
}
|
||||
|
||||
#zen-sidebar-splitter {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -342,7 +342,7 @@
|
||||
#zen-sidebar-icons-wrapper {
|
||||
width: -moz-available;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
|
||||
transition: .1s;
|
||||
}
|
||||
|
||||
|
||||
@@ -102,11 +102,12 @@
|
||||
--fp-contextmenu-bgcolor: light-dark(Menu, rgb(43 42 51 / 0.95));
|
||||
--toolbar-bgcolor: transparent;
|
||||
|
||||
--input-bgcolor: var(--zen-colors-tertiary);
|
||||
--input-border-color: var(--zen-input-border-color);
|
||||
--input-bgcolor: var(--zen-colors-tertiary) !important;
|
||||
--input-border-color: var(--zen-input-border-color) !important;
|
||||
--zen-themed-toolbar-bg: var(--zen-colors-tertiary);
|
||||
|
||||
--toolbar-field-background-color: var(--zen-colors-input-bg);
|
||||
--arrowpanel-background: var(--zen-dialog-background) !important;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
@@ -49,7 +49,7 @@ groupbox:has(+ .subcategory) {
|
||||
}
|
||||
|
||||
.navigation {
|
||||
padding: 50px;
|
||||
padding: 4%;
|
||||
background: var(--zen-colors-tertiary);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user