salut,
Je me suis également servi de la solution de MrOtherGuy en y apportant quelques compléments.
- pas de barre de titre (que je trouve inutile)
- pas de barre de menus (dont je ne me sers pas - mais on peut la faire apparaître si besoin)
- barre d'adresse avec quelques modules (les autres sont dans le menu "chevrons" ) , les marque-pages, la barre perso qui se résume à un dossier avec les flux rss) , la barre de recherche (préf perso).
Les boutons minimiser/réduire/fermer n'étant plus visibles, ils sont remplacés par des extensions (Minimize window button/Maximize-Restore).
Code : Tout sélectionner
/*----CACHER BOUTONS MINIMIZE, FERMETURE----*/
#navigator-toolbox > #nav-bar{ margin-right: 0px !important; padding-right: 0px !important }
.titlebar-buttonbox-container{ display: none !important }
- la barre d'onglets (on bottom)
Code : Tout sélectionner
/* Modify to change window drag space width TABS ON BOTTOM */
/* IMPORTANT */
/*
Get window_control_placeholder_support.css
Window controls will be all wrong without it.
Additionally on Linux, you may need to get:
linux_gtk_window_control_patch.css
*/
:root{
--uc-titlebar-padding: 0px; }
:root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px }
.titlebar-buttonbox-container{
position: fixed;
display: block;
top: var(--uc-titlebar-padding,0px);
right:0;
height: 40px;
}
/* Mac specific. You should set that font-smoothing pref to true if you are on any platform where window controls are on left */
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
:root{ --uc-titlebar-padding: 0px !important }
.titlebar-buttonbox-container{ left:0; right: unset; }
}
:root[uidensity="compact"] .titlebar-buttonbox-container{ height: 32px }
#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }
#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }
.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }
#titlebar{
-moz-box-ordinal-group: 2;
-moz-appearance: none !important;
}
.titlebar-placeholder,
#TabsToolbar .titlebar-spacer{ display: none; }
/* Also hide the toolbox bottom border which isn't at bottom with this setup */
#navigator-toolbox::after{ display: none !important; }
@media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } }
PROTON COMPACT:
Code : Tout sélectionner
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/compact_proton.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Small changes to make proton roughly as compact as the old compact mode */
:root{
--toolbarbutton-inner-padding: 6px !important;
--proton-tab-block-margin: 2px !important;
--tabs-shadow-size: 0px !important;
--arrowpanel-menuitem-padding: 5px !important;
--panel-font-size: inherit !important;
--arrowpanel-padding: 0.8em !important;
--inline-tab-padding: 8px !important; /* 8px is default value since it looks good - lower values compactify tabs horizontally */
}
.subviewbutton.bookmark-item{ padding-block: 4px !important; }
.subview-subheader{ display: -moz-box }
menupopup > menuitem,
menupopup > menu{ padding-block: 0.3em !important; }
#urlbar-background{ margin-block: 1px }
/* This is kinda weird, but it makes the horizontal line between tabs and nav-bar render "inside" nav-bar thus tabs are more visibily separated even if there is less space there */
#nav-bar{
box-shadow: inset 0 var(--tabs-shadow-size) 0 var(--tabs-border-color) !important;
}
.tab-close-button{
margin-inline-start: 0px !important;
width: 20px !important;
height: 20px !important;
padding: 5px !important;
}
#tabbrowser-tabs{ --uc-tabs-scrollbutton-border: 2px }
#scrollbutton-up,
#scrollbutton-down{ border-block-width: var(--uc-tabs-scrollbutton-border,0px) !important; }
/* OPTIONAL - show audio label in compact mode and make the audio icon behavior match non-compact mode */
/*
.tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]){ display: -moz-box !important; }
#TabsToolbar:not(:hover) .tab-icon-image{ opacity: 1 !important; }
#TabsToolbar:not(:hover) .tab-icon-overlay:not([pinned]){ opacity: 0 !important; }
*/
RETROUVER DES ICONES DANS LE MAIN MENU :
Code : Tout sélectionner
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/iconized_main_menu.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Adds icons to main menu items which were removed in Proton */
#appMenu-fxa-status2[fxastatus] > toolbarbutton::before,
#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image{
fill: currentColor;
-moz-context-properties: fill;
margin-inline: 0 8px !important;
}
#appMenu-new-tab-button2{ list-style-image: url("chrome://browser/skin/new-tab.svg") }
#appMenu-new-window-button2{ list-style-image: url("chrome://browser/skin/window.svg") }
#appMenu-new-private-window-button2{ list-style-image: url("chrome://browser/skin/privateBrowsing.svg") }
#appMenu-bookmarks-button{ list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg") }
#appMenu-history-button{ list-style-image: url("chrome://browser/skin/history.svg") }
#appMenu-downloads-button{ list-style-image: url("chrome://browser/skin/downloads/downloads.svg") }
#appMenu-passwords-button{ list-style-image: url("chrome://browser/skin/login.svg") }
#appMenu-extensions-themes-button{ list-style-image: url("chrome://mozapps/skin/extensions/extension.svg") }
#appMenu-print-button2{ list-style-image: url("chrome://global/skin/icons/print.svg") }
#appMenu-save-file-button2{ list-style-image: url("chrome://browser/skin/save.svg") }
#appMenu-find-button2{ list-style-image: url("chrome://global/skin/icons/search-glass.svg") }
#appMenu-settings-button{ list-style-image: url("chrome://global/skin/icons/settings.svg") }
#appMenu-more-button2{ list-style-image: url("chrome://browser/skin/developer.svg") }
#appMenu-help-button2{ list-style-image: url(chrome://global/skin/icons/info.svg) }
#appMenu-quit-button2{ list-style-image: url(chrome://browser/skin/quit.svg) }
/* Use account-button icon for signed in sync item */
#appMenu-fxa-status2[fxastatus] > toolbarbutton::before{
display: -moz-box;
content: "";
width: 16px;
height: 16px;
background-image: var(--avatar-image-url)
}
/* Add somewhat hacky separator to zoom controls so it looks consistent */
#appMenu-protonMainView > .panel-subview-body::after{
content: "";
display: -moz-box;
border-bottom: 1px solid var(--panel-separator-color);
margin: var(--panel-separator-margin);
}
#appMenu-find-button2 ~ *{
-moz-box-ordinal-group: 2;
}
Ce qui donne un résultat plutôt simple, compacte :
https://zupimages.net/viewer.php?id=21/22/0p1z.png