Firefox theme and package lists for Fedora, Flatpak and GNOME Extensions
This commit is contained in:
Fabio Scotto di Santolo
422
firefox-theme-space/chrome/userChrome.css
Normal file
422
firefox-theme-space/chrome/userChrome.css
Normal file
@@ -0,0 +1,422 @@
|
||||
:root {
|
||||
--z4ckx-bg: #14171c;
|
||||
--z4ckx-icon-color: #b8bfe5;
|
||||
--z4ckx-nav-toolbar-padding: 8px;
|
||||
--z4ckx-sidebar-bg: var(--z4ckx-bg);
|
||||
--z4ckx-sidebar-color: #b8bfe5;
|
||||
--z4ckx-tab-border-radius: 0px;
|
||||
--z4ckx-tab-color: #f3edff;
|
||||
--z4ckx-tab-font-family: "NotoSerif NF", serif;
|
||||
--z4ckx-tab-font-size: 9.5pt;
|
||||
--z4ckx-tab-font-weight: 600;
|
||||
--z4ckx-tab-height: 42px;
|
||||
--z4ckx-tab-pinned-bg: #70c1b3;
|
||||
--z4ckx-tab-selected-bg: #4d4168;
|
||||
--z4ckx-tab-soundplaying-bg: #ee6c4d;
|
||||
--z4ckx-urlbar-color: #b8bfe5;
|
||||
--z4ckx-urlbar-focused-color: #d7d9e5;
|
||||
--z4ckx-urlbar-font-family: "NotoSerif NF", serif;
|
||||
--z4ckx-urlbar-font-size: 10pt;
|
||||
--z4ckx-urlbar-font-weight: 800;
|
||||
--z4ckx-urlbar-results-color: #e0fbfc;
|
||||
--z4ckx-urlbar-results-font-family: "NotoSerif NF", serif;
|
||||
--z4ckx-urlbar-results-font-size: 9pt;
|
||||
--z4ckx-urlbar-results-font-weight: 700;
|
||||
--z4ckx-urlbar-results-url-color: #98c1d9;
|
||||
|
||||
/* Overridden Firefox variables*/
|
||||
--toolbar-bgcolor: var(--z4ckx-bg) !important;
|
||||
--lwt-sidebar-background-color: var(--z4ckx-bg) !important;
|
||||
--tab-border-radius: 0 !important;
|
||||
--lwt-toolbarbutton-icon-fill-attention: #8677cf !important;
|
||||
--toolbarbutton-icon-fill-attention: var(
|
||||
--lwt-toolbarbutton-icon-fill-attention
|
||||
) !important;
|
||||
--arrowpanel-border-color: none !important;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--z4ckx-tab-selected-bg) !important;
|
||||
}
|
||||
|
||||
.toolbarbutton-icon {
|
||||
fill: var(--z4ckx-icon-color) !important;
|
||||
fill-opacity: 100% !important;
|
||||
}
|
||||
|
||||
#PlacesToolbar menupopup[placespopup="true"] {
|
||||
--arrowpanel-background: var(--z4ckx-bg) !important;
|
||||
--arrowpanel-color: #b8bfe5 !important;
|
||||
}
|
||||
|
||||
.tab-background[selected] {
|
||||
background: var(--z4ckx-tab-selected-bg) !important;
|
||||
}
|
||||
|
||||
/*.tab-background[selected"false"] {
|
||||
background: var(--z4ckx-tab-selected-bg) !important;
|
||||
opacity: 50% !important;
|
||||
}*/
|
||||
|
||||
/* Move tabs down */
|
||||
#titlebar {
|
||||
order: 2;
|
||||
-moz-appearance: none !important;
|
||||
--tabs-navbar-shadow-size: 0px;
|
||||
}
|
||||
|
||||
.titlebar-buttonbox-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.titlebar-spacer[type="post-tabs"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* tabs */
|
||||
.tab-text {
|
||||
font-family: var(--z4ckx-tab-font-family);
|
||||
font-weight: var(--z4ckx-tab-font-weight);
|
||||
font-size: var(--z4ckx-tab-font-size) !important;
|
||||
color: var(--z4ckx-tab-color);
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
/* Make all tabs small except selected one */
|
||||
.tabbrowser-tab[fadein]:not([selected]):not([pinned]) {
|
||||
max-width: 150px !important;
|
||||
min-width: 150px !important;
|
||||
}
|
||||
|
||||
/* Make selected tabs to bigger */
|
||||
.tabbrowser-tab[selected][fadein]:not([pinned]) {
|
||||
max-width: 200px !important;
|
||||
min-width: 200px !important;
|
||||
}
|
||||
|
||||
hbox.tab-content .tab-icon-image {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab {
|
||||
border-radius: var(--z4ckx-tab-border-radius) !important;
|
||||
height: var(--z4ckx-tab-height) !important;
|
||||
margin-bottom: 6px !important;
|
||||
margin-top: 4px !important;
|
||||
max-height: 80% !important;
|
||||
min-height: 80% !important;
|
||||
}
|
||||
|
||||
#tabs-newtab-button > .toolbarbutton-icon {
|
||||
--toolbarbutton-inner-padding: 4px !important;
|
||||
}
|
||||
|
||||
/* Always show new tab button on hover and never otherwise */
|
||||
#tabbrowser-tabs #tabs-newtab-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs:hover #tabs-newtab-button {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
/* No sound icon and text in tabs */
|
||||
.tab-close-button[pinned],
|
||||
#tabbrowser-tabs[closebuttons="activetab"]
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-content
|
||||
> .tab-close-button:not([selected]),
|
||||
.tab-icon-pending:not([pendingicon]),
|
||||
.tab-icon-pending[busy],
|
||||
.tab-icon-pending[pinned],
|
||||
.tab-icon-image:not([src]):not([pinned]):not([crashed])[selected],
|
||||
.tab-icon-image:not([src]):not([pinned]):not([crashed]):not([sharing]),
|
||||
.tab-icon-image[busy],
|
||||
.tab-throbber:not([busy]),
|
||||
.tab-icon-sound:not([soundplaying]):not([muted]):not([activemedia-blocked]):not(
|
||||
[pictureinpicture]
|
||||
),
|
||||
.tab-icon-sound[pinned],
|
||||
.tab-sharing-icon-overlay,
|
||||
.tab-icon-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* secondary audio label ain't much use with this style, but feel free to remove the next line if you want to show it. */
|
||||
.tab-secondary-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* show the secondary label when video is in PiP */
|
||||
.tab-secondary-label[pictureinpicture] {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/**************************************************/
|
||||
|
||||
#urlbar {
|
||||
max-width: 70% !important;
|
||||
margin: 0 15% !important;
|
||||
/* position: unset!important; */
|
||||
}
|
||||
|
||||
#urlbar-results {
|
||||
font-family: var(--z4ckx-urlbar-results-font-family);
|
||||
font-weight: var(--z4ckx-urlbar-results-font-weight);
|
||||
font-size: var(--z4ckx-urlbar-results-font-size) !important;
|
||||
color: var(--z4ckx-urlbar-results-color) !important;
|
||||
}
|
||||
|
||||
#urlbar:not([focused]) > #urlbar-background {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.urlbarView-url,
|
||||
.search-panel-one-offs-container {
|
||||
color: var(--z4ckx-urlbar-results-url-color) !important;
|
||||
font-family: var(--z4ckx-urlbar-font-family);
|
||||
font-weight: var(--z4ckx-urlbar-results-font-weight);
|
||||
font-size: var(--z4ckx-urlbar-font-size) !important;
|
||||
}
|
||||
|
||||
.urlbarView-favicon,
|
||||
.urlbarView-type-icon {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#urlbar-input {
|
||||
font-size: var(--z4ckx-urlbar-font-size) !important;
|
||||
color: var(--z4ckx-urlbar-color) !important;
|
||||
font-family: var(--z4ckx-urlbar-font-family) !important;
|
||||
font-weight: var(--z4ckx-urlbar-font-weight) !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
#urlbar-input:focus {
|
||||
color: var(--z4ckx-urlbar-focused-color) !important;
|
||||
}
|
||||
|
||||
/* Download button */
|
||||
|
||||
/* Hide tracking protection button */
|
||||
tracking-protection-icon-container,
|
||||
#identity-box {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#tracking-protection-icon-box {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*#unified-extensions-button {
|
||||
display: none;
|
||||
}*/
|
||||
|
||||
panelview#unified-extensions-view {
|
||||
background-color: var(--z4ckx-bg) !important;
|
||||
color: var(--z4ckx-icon-color) !important;
|
||||
}
|
||||
|
||||
/* Clean and tight extensions menu */
|
||||
#unified-extensions-panel #unified-extensions-view {
|
||||
width: 100% !important;
|
||||
/* For firefox v115.x */
|
||||
}
|
||||
|
||||
#unified-extensions-view {
|
||||
--uei-icon-size: 22px;
|
||||
/* Change icon size */
|
||||
--firefoxcss-number-of-extensions-in-a-row: 3;
|
||||
/* Increase to the number of icons you want in one row */
|
||||
}
|
||||
|
||||
#unified-extensions-view .panel-header,
|
||||
#unified-extensions-view .panel-header + toolbarseparator,
|
||||
#unified-extensions-view .panel-subview-body + toolbarseparator,
|
||||
#unified-extensions-view #unified-extensions-manage-extensions,
|
||||
#unified-extensions-view .unified-extensions-item-menu-button.subviewbutton,
|
||||
#unified-extensions-view
|
||||
.unified-extensions-item-action-button
|
||||
.unified-extensions-item-contents {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#unified-extensions-view .panel-subview-body {
|
||||
padding: 4px !important;
|
||||
}
|
||||
|
||||
#unified-extensions-view .unified-extensions-item .unified-extensions-item-icon,
|
||||
#unified-extensions-view .unified-extensions-item .toolbarbutton-badge-stack {
|
||||
margin-inline-end: 0px !important;
|
||||
}
|
||||
|
||||
#unified-extensions-view #overflowed-extensions-list,
|
||||
#unified-extensions-view #unified-extensions-area,
|
||||
#unified-extensions-view .unified-extensions-list {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(
|
||||
var(--firefoxcss-number-of-extensions-in-a-row),
|
||||
auto
|
||||
);
|
||||
justify-items: left !important;
|
||||
align-items: left !important;
|
||||
}
|
||||
|
||||
#unified-extensions-view .unified-extensions-list .unified-extensions-item,
|
||||
#unified-extensions-view .unified-extensions-list {
|
||||
max-width: max-content;
|
||||
}
|
||||
|
||||
#unified-extensions-view #unified-extensions-area {
|
||||
padding-bottom: 3px !important;
|
||||
border-bottom: 1px solid #aeaeae33 !important;
|
||||
}
|
||||
|
||||
#unified-extensions-view .unified-extensions-list {
|
||||
/* border-top: 1px solid #aeaeae33 !important; */
|
||||
}
|
||||
|
||||
#wrapper-edit-controls:is([place="palette"], [place="panel"]) > #edit-controls,
|
||||
#wrapper-zoom-controls:is([place="palette"], [place="panel"]) > #zoom-controls,
|
||||
:is(panelview, #widget-overflow-fixed-list) .toolbaritem-combined-buttons {
|
||||
margin: 0px !important;
|
||||
}
|
||||
|
||||
/* Hide show all tabs button */
|
||||
#alltabs-button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Hide star button (bookmark) */
|
||||
#star-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@-moz-document url("about:home"),
|
||||
url("about:newtab"), url("about:blank") {
|
||||
.personalize-button {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide reading View */
|
||||
#reader-mode-button,
|
||||
#readinglist-addremove-button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Remove Back button when there's nothing to go Back to */
|
||||
#nav-bar:not([customizing="true"])
|
||||
> #nav-bar-customization-target
|
||||
> #back-button[disabled="true"] {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
/* Remove Forward button when there's nothing to go Forward to */
|
||||
#nav-bar:not([customizing="true"])
|
||||
> #nav-bar-customization-target
|
||||
> #forward-button[disabled="true"] {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
/* Remove reload button when there's nothing to reload */
|
||||
#nav-bar:not([customizing="true"])
|
||||
> #nav-bar-customization-target
|
||||
> #reload-button[disabled="true"] {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
#navigator-toolbox {
|
||||
border-bottom: unset !important;
|
||||
}
|
||||
|
||||
#back-button {
|
||||
list-style-image: url("left-arrow.svg") !important;
|
||||
}
|
||||
|
||||
#tabs-newtab-button {
|
||||
list-style-image: url("add.svg") !important;
|
||||
}
|
||||
|
||||
.close-icon,
|
||||
.urlbar-icon {
|
||||
fill: var(--z4ckx-icon-color) !important;
|
||||
}
|
||||
|
||||
#forward-button {
|
||||
list-style-image: url("right-arrow.svg") !important;
|
||||
}
|
||||
|
||||
#urlbar-background {
|
||||
background-color: var(--z4ckx-bg) !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
opacity: 0.95 !important;
|
||||
}
|
||||
|
||||
.toolbar-items {
|
||||
background-color: var(--z4ckx-bg) !important;
|
||||
}
|
||||
|
||||
#reload-button:not([disabled="true"]),
|
||||
#home-button:not([disabled="true"]) {
|
||||
color: var(--z4ckx-icon-color) !important;
|
||||
}
|
||||
|
||||
.toolbarbutton-text {
|
||||
color: var(--z4ckx-icon-color) !important;
|
||||
}
|
||||
|
||||
toolbar#nav-bar {
|
||||
padding: var(--z4ckx-nav-toolbar-padding) !important;
|
||||
}
|
||||
|
||||
toolbarbutton.bookmark-item:hover,
|
||||
#PlacesToolbar menu:hover,
|
||||
#PlacesToolbar menuitem:hover {
|
||||
background-color: var(--z4ckx-tab-selected-bg) !important;
|
||||
}
|
||||
|
||||
/************************************/
|
||||
|
||||
/*Darken panels to match theme*/
|
||||
.panel-subview-body,
|
||||
#appMenu-zoomReset-button,
|
||||
.panel-mainview,
|
||||
.panel-subviews {
|
||||
color: #c5cddb !important;
|
||||
background: var(--url-and-searchbar-background-color) !important;
|
||||
}
|
||||
|
||||
.panel-subview-footer,
|
||||
[class^="PanelUI-"] {
|
||||
color: #c5cddb !important;
|
||||
background: var(--toolbar-bgcolor) !important;
|
||||
}
|
||||
|
||||
/*stops possible clashes with extension popups*/
|
||||
.webextension-popup-browser {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* color bg of context menu */
|
||||
menupopup {
|
||||
--panel-background: var(--z4ckx-bg) !important;
|
||||
--panel-border-color: none !important;
|
||||
--panel-color: var(--z4ckx-icon-color) !important;
|
||||
}
|
||||
|
||||
/* color fg of context menu */
|
||||
menupopup > menuitem[_moz-menuactive="true"],
|
||||
menupopup > menu[_moz-menuactive="true"],
|
||||
#context-navigation
|
||||
> menuitem[_moz-menuactive="true"]
|
||||
> .menu-iconic-left
|
||||
> .menu-iconic-icon {
|
||||
color: var(--z4ckx-icon-color) !important;
|
||||
background: var(--z4ckx-tab-selected-bg) !important;
|
||||
}
|
||||
Reference in New Issue
Block a user