Open VLM-TechEd opened 8 months ago
I was able to modify the tab ui by modifying the file chrome/userChrome.css.
Here is my chrome/userChrome.css:
/*
about:config -> toolkit.legacyUserProfileCustomizations.stylesheets -> true
create <user-profile-dir>/chrome/userChrome.css and insert:
*/
/*
below from: https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/
*/
@import url(chrome/window_control_placeholder_support.css);
@import url(chrome/tabs_on_bottom.css);
@import url(chrome/tabs_on_bottom_menubar_on_top_patch.css);
@import url(chrome/tab_loading_progress_bar.css);
.tabbrowser-tab .tab-background {
box-shadow: 0 0 0px 1px color-mix(in srgb, currentColor 40%, transparent), 0 10px 10px rgba(255,255,255,0.2) inset !important;
background-image: var(--toolbar-non-lwt-bgimage) !important;
border-radius: 3px 3px 0 0 !important;
margin-bottom: 0px !important;
max-height: 28px !important;
max-width: 120px !important;
}
.tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background {
box-shadow: 0 0 0px 1px color-mix(in srgb, currentColor 40%, transparent), 0 10px 10px rgba(255,255,255,0.2) inset !important;
background-image: none !important;
background-color: #dadada !important;
border-radius: 3px 3px 0 0 !important;
margin-bottom: 0px !important;
}
.tabbrowser-tab[pending="true"]:not([selected=true]):not([multiselected=true]) .tab-background {
box-shadow: 0 0 0px 1px color-mix(in srgb, currentColor 40%, transparent), 0 10px 10px rgba(255,255,255,0.2) inset !important;
background-image: none !important;
background-color: #ece9da !important;
border-radius: 3px 3px 0 0 !important;
margin-bottom: 0px !important;
}
.tabbrowser-tab[pending="true"]:not([selected=true]):not([multiselected=true]) .tab-label {
color: red !important;
font-style: italic !important;
}
.tab-close-button:hover {
background-color: color-mix(in srgb, #000000 15%, transparent) !important;
color: #ff0000 !important;
}
menupopup>menu,
menupopup>menuitem {
padding-block: 5px !important;
}
:root {
--arrowpanel-menuitem-padding: 5px !important;
--tab-min-height: 28px !important;
--tab-max-height: 28px !important;
--tab-min-width: 120px !important;
--tab-max-width: 120px !important;
}
/*https://raw.githubusercontent.com/MatMoul/firefox-gui-chrome-css/master/chrome/userChrome.css*/
:root:not([inFullscreen]) #a11y-announcement {
/* Kludge to make "a11y-announcement" a replacement for the "browser-bottombox" element removed by FF 109 */
display: block !important;
background-color: var(--toolbar-bgcolor) !important;
}
#a11y-announcement,
#browser-bottombox {
height: 20px;
border-top: solid 1px #505050;
}
#statuspanel {
position: fixed !important;
height: 20px !important;
width: 100% !important;
left: 0px !important;
bottom: 0px !important;
padding: 0px !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
transition-property: none !important;
}
#statuspanel-label {
color: var(--toolbar-color) !important;
background: transparent !important;
border: none !important;
}
html[inFullscreen="true"] #a11y-announcement,
html[inFullscreen="true"] #browser-bottombox {
display:none !important;
}
/* Make status bar invisible when fullscreen */
html[inFullscreen="true"] #statuspanel {
display:none !important;
}
/* Make status bar visible (as a pop-up box) when fullscreen */
/*
html[inFullscreen="true"] #statuspanel-label {
border: 1px solid #505050 !important;
padding-left: 2px !important;
padding-bottom: 6px !important;
background: var(--toolbar-bgcolor) !important;
}
*/
and for smaller tabs:
From: https://support.mozilla.org/en-US/kb/compact-mode-workaround-firefox
This allows me for it to look mostly like how it was in firefox version 56.
test how Tab Mix Plus
works for you without chrome/userChrome.css
?
Here is what is in my chrome/userChrome.css. I use it primarily to make TMP display multiple spaces in tab names. Could I perhaps put it into StyloaiX instead?
/* Fx 110+
*/
.tabbrowser-tab .tab-label {
white-space: pre !important;
}
/*
.tabbrowser-tab .tab-label {
white-space: -moz-pre-space !important;
}
*/
/ Remove Unified Extensions button /
padding-inline: 0 !important
}
width: 0 !important;
}
From: onemen @.> Sent: Sunday, November 5, 2023 12:28 AM To: onemen/TabMixPlus @.> Cc: VLMin @.>; Author @.> Subject: Re: [onemen/TabMixPlus] Fx 119: Display > Tab > Customize Styles (Issue #244)
test how Tab Mix Plus works for you without chrome/userChrome.css ?
— Reply to this email directly, view it on GitHub https://github.com/onemen/TabMixPlus/issues/244#issuecomment-1793661101 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AB6YURQNERXEEHDDYODVE7DYC45ZRAVCNFSM6AAAAAA657DAV2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJTGY3DCMJQGE . You are receiving this because you authored the thread. https://github.com/notifications/beacon/AB6YURQNPU75G363DYTJ2ITYC45ZRA5CNFSM6AAAAAA657DAV2WGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTTK5EMK2.gif Message ID: @. @.> >
download and try this test build
Much better, thank you! Have a wonderful and blessed day!
version 1.0.0-pre.18 is out
TMP Pre 17, Win 10. The Customize Styles feature seems to be working only partially, if at all. Some font colors appear to work, until I try to change them. And background colors aren't working at all; they all appear to be white, when that is clearly not requested. Only started in Fx 119, AFAIK.