mirror of
https://github.com/CaptaiNiveau/FirefoxSidebar.git
synced 2025-06-03 06:56:16 +02:00
Major rework (#17)
* Update userChrome.css * Update userChrome.css * formatting * make csd top configurable * fix Z index of CSD * fix background (and round corners in GNOME) * remove unnecessary background color fix * more formatting * move sidebar switcher code to css file * even more formatting, fix typos * remove ugly border near sidebar switcher * add custom presets * Revert "remove ugly border near sidebar switcher" This reverts commit b8fd71d97c23c860a84c68aba74fb8e4253aaa7f. * remove empty space in fullscreen mode, remove unnecessary stuff * heavy rework, add first theme * rename first theme, add second * add KDE Plastik (same spacing as Oxygen) * somehow my system messed up..., fixed theme names
This commit is contained in:
Mr-nUUb
GitHub
parent
270b90c76b
commit
d3f8439102
16 changed files with 385 additions and 241 deletions
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
/*
|
||||
Title: Drannex42's Personal userChrome.css for Firefox
|
||||
Description: This is my personal userChrome for Firefox, I specifically clean up the interface, change the folder icon to Vivaldi's (much better) and reduce padding in some areas, and add some in others. This overall creates a much more streamlined interface.
|
||||
|
|
@ -17,26 +16,28 @@
|
|||
--sidebar-bg-color: #fafafa; /* Change this if you have a different theme than the default light one to match the rest of your sideberry theme colors */
|
||||
}
|
||||
|
||||
|
||||
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
|
||||
#main-window[tabsintitlebar="true"]:not([extradragspace="true"])
|
||||
#TabsToolbar
|
||||
> .toolbar-items {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
|
||||
visibility: collapse !important;
|
||||
visibility: collapse !important;
|
||||
}
|
||||
|
||||
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
|
||||
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]
|
||||
#sidebar-header {
|
||||
/*! display: none; */
|
||||
}
|
||||
|
||||
/*Collapse in default state and add transition*/
|
||||
#sidebar-box #sidebar:hover {
|
||||
/*! overflow: visible !important; */
|
||||
min-width: 40px;
|
||||
max-width: 40px;
|
||||
border-right: 1px solid var(--panel-separator-color);
|
||||
z-index: 2;
|
||||
/*! overflow: visible !important; */
|
||||
min-width: 40px;
|
||||
max-width: 40px;
|
||||
border-right: 1px solid var(--panel-separator-color);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/*All other sidebar-boxes should be larger on hover*/
|
||||
|
|
@ -51,35 +52,36 @@
|
|||
|
||||
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
|
||||
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover {
|
||||
min-width: 260px !important;
|
||||
max-width: 260px !important;
|
||||
z-index: 1;
|
||||
margin-right: -210px !important;
|
||||
min-width: 260px !important;
|
||||
max-width: 260px !important;
|
||||
z-index: 1;
|
||||
margin-right: -210px !important;
|
||||
}
|
||||
|
||||
|
||||
#sidebar-header {
|
||||
border: none !important;
|
||||
background: var(--sidebar-bg-color) !important;
|
||||
}
|
||||
|
||||
#sidebar-close, #sidebar-title, #sidebar-switcher-arrow {
|
||||
display: none;
|
||||
border: none;
|
||||
}
|
||||
#sidebar-close,
|
||||
#sidebar-title,
|
||||
#sidebar-switcher-arrow {
|
||||
display: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#sidebar-switcher-target {
|
||||
border: none !important;
|
||||
margin-left: 4.5px !important;
|
||||
padding-top: 4px !important;
|
||||
padding-bottom: 3px !important;
|
||||
border: none !important;
|
||||
margin-left: 4.5px !important;
|
||||
padding-top: 4px !important;
|
||||
padding-bottom: 3px !important;
|
||||
}
|
||||
|
||||
#sidebar-switcher-target:focus-visible:not(:hover, [open]), #sidebar-close:focus-visible:not(:hover, [open]) {
|
||||
#sidebar-switcher-target:focus-visible:not(:hover, [open]),
|
||||
#sidebar-close:focus-visible:not(:hover, [open]) {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
|
||||
#main-window #PersonalToolbar {
|
||||
margin-left: var(--sidebar-width);
|
||||
padding: 2px 5px !important;
|
||||
|
|
@ -87,7 +89,6 @@
|
|||
margin-top: -3px !important;
|
||||
}
|
||||
|
||||
|
||||
/* lock sidebar to height by doing the inverse margin of the toolbar element */
|
||||
#sidebar-box {
|
||||
z-index: 1000 !important;
|
||||
|
|
@ -104,13 +105,13 @@
|
|||
|
||||
/* lock sidebar to specified width */
|
||||
#sidebar-box {
|
||||
min-width: var(--sidebar-width) !important;
|
||||
max-width: var(--sidebar-width) !important;
|
||||
overflow: hidden !important;
|
||||
transition-property: width;
|
||||
transition-duration: .25s;
|
||||
transition-delay: .25s;
|
||||
transition-timing-function: ease-in;
|
||||
min-width: var(--sidebar-width) !important;
|
||||
max-width: var(--sidebar-width) !important;
|
||||
overflow: hidden !important;
|
||||
transition-property: width;
|
||||
transition-duration: 0.25s;
|
||||
transition-delay: 0.25s;
|
||||
transition-timing-function: ease-in;
|
||||
}
|
||||
|
||||
.browser-toolbar {
|
||||
|
|
@ -120,36 +121,45 @@
|
|||
.sidebar-splitter {
|
||||
opacity: 0 !important;
|
||||
width: 0px !important;
|
||||
border: none !Important;
|
||||
border: none !important;
|
||||
--avatar-image-url: none !important;
|
||||
}
|
||||
|
||||
/* hide sidebar header for tree style tabs sidebar */
|
||||
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
|
||||
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]
|
||||
#sidebar-header {
|
||||
/*! display: none; */
|
||||
}
|
||||
|
||||
#sidebarMenu-popup .subviewbutton {
|
||||
min-width: 0px;
|
||||
padding: 0;
|
||||
margin: 0 !Important;
|
||||
min-width: 0px;
|
||||
padding: 0;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
toolbarseparator {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sidebar { border-right: 0px solid #ccc; overflow: hidden;width: 50px !important;min-width: 50px !important;width: 100% !important;}
|
||||
|
||||
#sidebar {
|
||||
border-right: 0px solid #ccc;
|
||||
overflow: hidden;
|
||||
width: 50px !important;
|
||||
min-width: 50px !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* OTHER CUSTOM OPTIONS */
|
||||
|
||||
/* Hide the title bar */
|
||||
#titlebar{ visibility: collapse; }
|
||||
#titlebar {
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
/* hide normal horizontal tab bar */
|
||||
#TabsToolbar { visibility: collapse; }
|
||||
|
||||
#TabsToolbar {
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
:root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon {
|
||||
border: none !important;
|
||||
|
|
@ -158,69 +168,77 @@ toolbarseparator {
|
|||
|
||||
/* --- Prevent enlargement */
|
||||
#urlbar[breakout-extend] {
|
||||
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
top: calc(
|
||||
(var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2
|
||||
) !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
#urlbar[breakout-extend] #urlbar-input-container {
|
||||
height: var(--urlbar-height) !important;
|
||||
/*padding: 0px !important;*/
|
||||
padding-block: 0px !important;
|
||||
padding-inline: 0px !important;
|
||||
height: var(--urlbar-height) !important;
|
||||
/*padding: 0px !important;*/
|
||||
padding-block: 0px !important;
|
||||
padding-inline: 0px !important;
|
||||
}
|
||||
.urlbarView-row {
|
||||
padding: 0px 2px 0px 2px;
|
||||
padding: 0px 2px 0px 2px;
|
||||
}
|
||||
/* END Prevent enlargement --- */
|
||||
|
||||
/*/* --- Reduce row paddings to make them more compact */
|
||||
.urlbarView-row {
|
||||
padding: 2px 0px !important;
|
||||
line-height: 1.2em !imortant;
|
||||
margin: -1px;
|
||||
margin-bottom:0px;
|
||||
padding: 2px 0px !important;
|
||||
line-height: 1.2em !important;
|
||||
margin: -1px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.urlbarView-row-inner {
|
||||
padding-bottom: 6px !important;
|
||||
padding-bottom: 6px !important;
|
||||
}
|
||||
.urlbarView {
|
||||
margin: 0px !important;
|
||||
width: 100% !important;
|
||||
margin: 0px !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
/* END Reduce row paddings to make them more compact --- */
|
||||
|
||||
/* Disable Urlbar Animation */
|
||||
#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
|
||||
animation-name: none !important;
|
||||
animation: none !important;
|
||||
#urlbar[breakout][breakout-extend][breakout-extend-animate]
|
||||
> #urlbar-background {
|
||||
animation-name: none !important;
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
/* --- More compact "Search with Google" rows */
|
||||
.urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner {
|
||||
min-height: auto !important;
|
||||
width: auto !important;
|
||||
min-height: auto !important;
|
||||
width: auto !important;
|
||||
}
|
||||
.urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
|
||||
margin-bottom: -1px;
|
||||
.urlbarView-row[dynamicType="onboardTabToSearch"]
|
||||
> .urlbarView-row-inner
|
||||
> .urlbarView-no-wrap
|
||||
> .urlbarView-favicon {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
/* END More compact "Search with Google" rows --- */
|
||||
|
||||
/* Remove active border on the addressbar when in focus */
|
||||
#nav-bar{ --toolbar-field-focus-border-color: #ccc }
|
||||
#nav-bar {
|
||||
--toolbar-field-focus-border-color: #ccc;
|
||||
}
|
||||
|
||||
/* Remove box shadow on address bar */
|
||||
#urlbar-background, #searchbar {
|
||||
#urlbar-background,
|
||||
#searchbar {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Change Bookmark Folder Icon to the one Vivialdi uses */
|
||||
/* Change Bookmark Folder Icon to the one Vivialdi uses */
|
||||
.bookmark-item[container] {
|
||||
list-style-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi4zNTcxNyAzLjM2MDc1QzIuMTMzMjMgMy41ODY5MyAyLjAwNTE1IDMuODkyMjEgMiA0LjIxMjAzVjExLjc4NzJDMS45OTQ0MSAxMS45NDc5IDIuMDIxNjMgMTIuMTA4MSAyLjA3OTk2IDEyLjI1NzdDMi4xMzgyOCAxMi40MDczIDIuMjI2NDggMTIuNTQzMSAyLjMzOTA0IDEyLjY1NjhDMi40NTE2IDEyLjc3MDUgMi41ODYxMyAxMi44NTk2IDIuNzM0MjUgMTIuOTE4NUMyLjg4MjM3IDEyLjk3NzQgMy4wNDA5MSAxMy4wMDQ5IDMuMiAxMi45OTkzSDEyLjhDMTMuMTE2NyAxMi45OTQxIDEzLjQxODkgMTIuODY0NyAxMy42NDI4IDEyLjYzODVDMTMuODY2OCAxMi40MTIzIDEzLjk5NDggMTIuMTA3MSAxNCAxMS43ODcyTDE0IDZDMTQgNS41IDEzLjUgNSAxMyA1SDhMNi44IDNIMy4yQzIuODgzMzQgMy4wMDUyIDIuNTgxMSAzLjEzNDU3IDIuMzU3MTcgMy4zNjA3NVpNMi45OTkzOSAxMS44MjJMMyAxMS44MDQ2VjQuMjIzMThDMy4wMDIyMyA0LjE2MTcxIDMuMDI3NDEgNC4xMDUxMSAzLjA2Nzc5IDQuMDY0MzJDMy4xMDc3MyA0LjAyMzk4IDMuMTU5MjkgNC4wMDIwOCAzLjIxMTYxIDRINi4yNDU4OUw3LjUgNkgxMi44QzEyLjkxMDUgNiAxMyA2LjA4Nzk2IDEzIDYuMTk4NDJDMTMgNy4xMzEwNyAxMyAxMS4wNjM2IDEzIDExLjc3NjFDMTIuOTk3OCAxMS44Mzc2IDEyLjk3MjYgMTEuODk0MiAxMi45MzIyIDExLjkzNUMxMi44OTIzIDExLjk3NTMgMTIuODQwNyAxMS45OTcyIDEyLjc4ODQgMTEuOTk5M0gzLjE4MjI3TDMuMTY0NTUgMTEuOTk5OUMzLjE0NDA2IDEyLjAwMDYgMy4xMjM0MyAxMS45OTcxIDMuMTAzODMgMTEuOTg5M0MzLjA4NDIxIDExLjk4MTUgMy4wNjU2NyAxMS45Njk0IDMuMDQ5NjYgMTEuOTUzM0MzLjAzMzY0IDExLjkzNzEgMy4wMjA1MSAxMS45MTcxIDMuMDExNjUgMTEuODk0NEMzLjAwMjc4IDExLjg3MTcgMi45OTg1MyAxMS44NDcgMi45OTkzOSAxMS44MjJaIj48L3BhdGg+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi45OTkzOSAxMS44MjJMMyAxMS44MDQ2VjQuMjIzMThDMy4wMDIyMyA0LjE2MTcxIDMuMDI3NDEgNC4xMDUxMSAzLjA2Nzc5IDQuMDY0MzJDMy4xMDc3MyA0LjAyMzk4IDMuMTU5MjkgNC4wMDIwOCAzLjIxMTYxIDRINi4yNDU4OUw3LjUgNkgxMi44QzEyLjkxMDUgNiAxMyA2LjA4Nzk2IDEzIDYuMTk4NDJDMTMgNy4xMzEwNyAxMyAxMS4wNjM2IDEzIDExLjc3NjFDMTIuOTk3OCAxMS44Mzc2IDEyLjk3MjYgMTEuODk0MiAxMi45MzIyIDExLjkzNUMxMi44OTIzIDExLjk3NTMgMTIuODQwNyAxMS45OTcyIDEyLjc4ODQgMTEuOTk5M0gzLjE4MjI3TDMuMTY0NTUgMTEuOTk5OUMzLjE0NDA2IDEyLjAwMDYgMy4xMjM0MyAxMS45OTcxIDMuMTAzODMgMTEuOTg5M0MzLjA4NDIxIDExLjk4MTUgMy4wNjU2NyAxMS45Njk0IDMuMDQ5NjcgMTEuOTUzM0MzLjAzMzY0IDExLjkzNzEgMy4wMjA1MSAxMS45MTcxIDMuMDExNjUgMTEuODk0NEMzLjAwMjc4IDExLjg3MTcgMi45OTg1MyAxMS44NDcgMi45OTkzOSAxMS44MjJaIiBmaWxsLW9wYWNpdHk9IjAuMSI+PC9wYXRoPgo8L3N2Zz4=") !important;
|
||||
padding-right: 15px !important;
|
||||
margin-right: -1px !important;
|
||||
}
|
||||
|
||||
list-style-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi4zNTcxNyAzLjM2MDc1QzIuMTMzMjMgMy41ODY5MyAyLjAwNTE1IDMuODkyMjEgMiA0LjIxMjAzVjExLjc4NzJDMS45OTQ0MSAxMS45NDc5IDIuMDIxNjMgMTIuMTA4MSAyLjA3OTk2IDEyLjI1NzdDMi4xMzgyOCAxMi40MDczIDIuMjI2NDggMTIuNTQzMSAyLjMzOTA0IDEyLjY1NjhDMi40NTE2IDEyLjc3MDUgMi41ODYxMyAxMi44NTk2IDIuNzM0MjUgMTIuOTE4NUMyLjg4MjM3IDEyLjk3NzQgMy4wNDA5MSAxMy4wMDQ5IDMuMiAxMi45OTkzSDEyLjhDMTMuMTE2NyAxMi45OTQxIDEzLjQxODkgMTIuODY0NyAxMy42NDI4IDEyLjYzODVDMTMuODY2OCAxMi40MTIzIDEzLjk5NDggMTIuMTA3MSAxNCAxMS43ODcyTDE0IDZDMTQgNS41IDEzLjUgNSAxMyA1SDhMNi44IDNIMy4yQzIuODgzMzQgMy4wMDUyIDIuNTgxMSAzLjEzNDU3IDIuMzU3MTcgMy4zNjA3NVpNMi45OTkzOSAxMS44MjJMMyAxMS44MDQ2VjQuMjIzMThDMy4wMDIyMyA0LjE2MTcxIDMuMDI3NDEgNC4xMDUxMSAzLjA2Nzc5IDQuMDY0MzJDMy4xMDc3MyA0LjAyMzk4IDMuMTU5MjkgNC4wMDIwOCAzLjIxMTYxIDRINi4yNDU4OUw3LjUgNkgxMi44QzEyLjkxMDUgNiAxMyA2LjA4Nzk2IDEzIDYuMTk4NDJDMTMgNy4xMzEwNyAxMyAxMS4wNjM2IDEzIDExLjc3NjFDMTIuOTk3OCAxMS44Mzc2IDEyLjk3MjYgMTEuODk0MiAxMi45MzIyIDExLjkzNUMxMi44OTIzIDExLjk3NTMgMTIuODQwNyAxMS45OTcyIDEyLjc4ODQgMTEuOTk5M0gzLjE4MjI3TDMuMTY0NTUgMTEuOTk5OUMzLjE0NDA2IDEyLjAwMDYgMy4xMjM0MyAxMS45OTcxIDMuMTAzODMgMTEuOTg5M0MzLjA4NDIxIDExLjk4MTUgMy4wNjU2NyAxMS45Njk0IDMuMDQ5NjYgMTEuOTUzM0MzLjAzMzY0IDExLjkzNzEgMy4wMjA1MSAxMS45MTcxIDMuMDExNjUgMTEuODk0NEMzLjAwMjc4IDExLjg3MTcgMi45OTg1MyAxMS44NDcgMi45OTkzOSAxMS44MjJaIj48L3BhdGg+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi45OTkzOSAxMS44MjJMMyAxMS44MDQ2VjQuMjIzMThDMy4wMDIyMyA0LjE2MTcxIDMuMDI3NDEgNC4xMDUxMSAzLjA2Nzc5IDQuMDY0MzJDMy4xMDc3MyA0LjAyMzk4IDMuMTU5MjkgNC4wMDIwOCAzLjIxMTYxIDRINi4yNDU4OUw3LjUgNkgxMi44QzEyLjkxMDUgNiAxMyA2LjA4Nzk2IDEzIDYuMTk4NDJDMTMgNy4xMzEwNyAxMyAxMS4wNjM2IDEzIDExLjc3NjFDMTIuOTk3OCAxMS44Mzc2IDEyLjk3MjYgMTEuODk0MiAxMi45MzIyIDExLjkzNUMxMi44OTIzIDExLjk3NTMgMTIuODQwNyAxMS45OTcyIDEyLjc4ODQgMTEuOTk5M0gzLjE4MjI3TDMuMTY0NTUgMTEuOTk5OUMzLjE0NDA2IDEyLjAwMDYgMy4xMjM0MyAxMS45OTcxIDMuMTAzODMgMTEuOTg5M0MzLjA4NDIxIDExLjk4MTUgMy4wNjU2NyAxMS45Njk0IDMuMDQ5NjcgMTEuOTUzM0MzLjAzMzY0IDExLjkzNzEgMy4wMjA1MSAxMS45MTcxIDMuMDExNjUgMTEuODk0NEMzLjAwMjc4IDExLjg3MTcgMi45OTg1MyAxMS44NDcgMi45OTkzOSAxMS44MjJaIiBmaWxsLW9wYWNpdHk9IjAuMSI+PC9wYXRoPgo8L3N2Zz4=") !important;
|
||||
padding-right: 15px !important;
|
||||
margin-right: -1px !important;
|
||||
}
|
||||
|
||||
/* Add down arrow to folders on the bookmark bar */
|
||||
.bookmark-item[container]::after {
|
||||
|
|
@ -235,6 +253,5 @@ toolbarseparator {
|
|||
|
||||
/* Change the Avatar size for the Firefox Account to what makes sense */
|
||||
[label="Firefox Account"] #fxa-avatar-image {
|
||||
scale: 1.175;
|
||||
scale: 1.175;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue