Bonjour,
Code trouver sur le net et bidouiller
Dans l'ordre:
- Barre de menu (affichée)
- Barre d'adresse
- Barre personnelle sur une ligne (et affichée sur plusieurs lignes au survol de la souris)
- Barre d'onglets (sur 3 lignes " et scrollable après 3 lignes, affichage d'une couleur de l'onglet sélectionné, affichage d'une autre couleur de l'onglet au survol de la souris)
Et aussi:
- Affichage du panneau latéral des Marque-pages au passage de la souris (sur gauche)
Il est possible de modifier le nombre d'onglet affichés
Dans "/* Faites de la place pour créer Scrollbar */" rechercher la ligne:
max-height: calc( 3 * 30px ) !important;
Remplacer le chiffre 3 par le nombre de ligne souhaiter
Exp:
max-height: calc( 5 * 30px ) !important; pour 5 ligne affichées et scrollable après 5 lignes
Code : Tout sélectionner
/* ----------------------------*/
/* Lignes d'onglets multilignes dessous */
#TabsToolbar {
position: absolute !important;
display:block !important;
bottom: 0 !important;
width: 100vw !important;
}
#tabbrowser-tabs {
width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
padding-bottom: var(--tab-min-height) !important;
}
/* Largeur fixe de l'onglet unique */
.tabbrowser-tab:not([pinned]) {
min-width: 211px !important;
}
/* Faites de la place pour créer Scrollbar */
scrollbox[part][orient="horizontal"] {
background: lightgrey !important;
position: absolute !important;
display:block !important;
/* display: flex; */
/* flex-wrap: wrap; */
/* overflow: visible !important; */
/* overflow-x: hidden !important; */
overflow-y: scroll !important;
min-height: 30px !important; /* Hauteur de l'onglet(28px) + 2px */
max-height: calc( 3 * 30px ) !important; /* Nombre de lignes d'onglets * Hauteur minimale */
-moz-window-dragging: no-drag !important;
}
/* Masquer les boutons / espaces */
hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]),
[class="scrollbutton-up"],
[class="scrollbutton-up"] + spacer,
scrollbox[part][orient="horizontal"] + spacer,
[class="scrollbutton-down"] {
display: none;
}
/* -----------------------------*/
/* Hauteur de l'onglet */
.tabbrowser-tab {
min-height: 28px !important;
max-height: 28px !important;
vertical-align: bottom !important;
margin-top: 1px !important;
margin-bottom: 1px !important;
}
/* Supprimer le cadre de l'onglet */
#TabsToolbar .tabbrowser-tab[visuallyselected="true"],
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background {
background: unset !important;
border-top: unset !important;
outline: none !important;
}
/*------------------*/
/* Onglet Arrière-plan */
/*------------------*/
/*--- sélectionné ---*/
.tab-background[selected=true]:not(:-moz-lwtheme) > spacer {
background: -moz-linear-gradient(left, #80ce0c 7%, #9fea26 28%, #a4ea3a 47%, #a4ea3a 72%, #e2e907 98%), none !important;
/*background-image: linear-gradient( rgba(230,175,175,1), rgba(84,25,25,1) ), none !important;*/ /* rot */
filter: drop-shadow(4px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-4px 3px 2px rgba(0,0,0,0.33)) !important;
}
.tab-background[selected=true]:-moz-lwtheme > spacer {
background-image: linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important;
filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-2px 3px 2px rgba(0,0,0,0.33)) !important;
}
/*--- survoler (non sélectionné) ---*/
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
background: -moz-linear-gradient(left, rgba(251,131,250,1) 0%, rgba(233,60,236,1) 100% ), none !important;
filter: brightness(130%) contrast(95%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme > spacer {
background-image: linear-gradient( rgba(225,225,225,0.66), rgba(100,125,145,0.66) ), none !important;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
}
/*--- non sélectionné ---*/
.tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
background-image: linear-gradient( rgba(255,255,255,1), rgba(125,125,125,1) ), none !important;
filter: brightness(115%) contrast(90%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important;
}
.tab-background:not([selected=true]):-moz-lwtheme > spacer {
background-image: linear-gradient( rgba(255,255,255,0.33), rgba(110,110,110,0.33) ), none !important;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
}
/*===== Barre personnelle multilignes =====*/
#PlacesToolbarItems {
display: block !important;
overflow: visible !important;
}
/* Barre personnelle cachée */
#PersonalToolbar {
max-height: 5px !important;
transition-duration: 1s !important;
}
#PersonalToolbar:hover{
max-height:200px !important;
transition-duration: 1s !important;
}
/*===== Affichage du panneau latéral au passage de la souris =====*/
#sidebar-box {
overflow: hidden !important;
min-width: 0px !important;
max-width: [b]250[/b]px !important;
}
:root {
--sidebar-hover-width: 5px;
--sidebar-visible-width: [b]250[/b]px;
}
#sidebar-box {
position: relative !important;
overflow-x: hidden !important;
left: var(--sidebar-hover-width) !important;
min-width: var(--sidebar-hover-width) !important;
max-width: var(--sidebar-hover-width) !important;
transition-duration: 1s !important;
}
#sidebar-box:hover {
left: var(--sidebar-visible-width) !important;
min-width: 250px !important;
transition-duration: .0.1s !important;
}
/*===== Fin d'affichage du panneau latéral au passage de la souris =====*/
Et pour les dossiers en couleur dans la barre personnelle cela ne change pas, il suffit de mettre à la suite dans le fichier
2 Exemples:
pour un dossier que l'on va appeler
Nouveau dossier avec une couleur vert pastel
et un dossier que l'on va appeler
Tagada TsoinTsoin avec une couleur jaune
IMPORTANT: bien respecter les majuscules, minuscule, espace, etc... du nom du dossier dans le code
Code : Tout sélectionner
/*==== Couleur des dossiers ====*/
/*==== dossier "Nouveau dossier" ====*/
[container="true"][label="Nouveau dossier"] {
background-color: #7fffd4 !important;
}
/*==== dossier "Tagada TsoinTsoin" ====*/
[container="true"][label="Tagada TsoinTsoin"] {
background-color: #fce94f !important;
}
Pour changer la couleur du dossier:
après le # mettre le chiffre Hexadécimal de la couleur que l'on souhaite
http://www.proftnj.com/RGB3.htm
A+
