Can someone help me clean-up this CSS code?

User Help for Mozilla Firefox
Post Reply
User avatar
Flycaster
Posts: 1164
Joined: November 19th, 2008, 12:13 pm
Location: Boynton Beach, FL

Can someone help me clean-up this CSS code?

Post by Flycaster »

I am not very good at dealing with code. However, with the use of Google, I do give it a flying try. That is, I find code that I need (or at least I think I need) out of existing code; and then patch things up. So far I now have FX65 nearly where I want it, but at the same time I think that I have more code within the userChrome.css file than I need and would appreciate if someone can help me to clean it up...show me which part of the code may not be needed. Here's what I'm happy with: Tabs on bottom, rounded tabs, bold black text within tabs, the sizes of the various toolbars and their text sizes and fonts, hover over tabs shows text, dragging tabs to new position and into Bookmarks, color change of text in active/inactive tabs. And BTW, all this is working nicely with the extension Tab Colors. Thanks.

@namespace url("http://www.mozilla.org/keymaster/gateke ... s.only.xul"); /* only needed once */

/* TABS: on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}

#TabsToolbar {
position: absolute !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;}

/* TABS: height */
:root {
--tab-toolbar-navbar-overlap: 0px !important;
--tab-min-height: 27px !important; /* adjust to suit your needs */
}
:root #tabbrowser-tabs {
--tab-min-height: 27px !important; /* needs to be the same as above under :root */
--tab-min-width: 80px !important;
}

#TabsToolbar {
height: var(--tab-min-height) !important;
margin-bottom: 1px !important;
box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
}

#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
min-height: var(--tab-min-height) !important;
max-height: var(--tab-min-height) !important;
}

/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
width: 40px;
}

/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
padding-bottom: unset !important;
margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
margin-top: unset !important;
}

/*Inactive tab text color*/
.tabbrowser-tab:not[selected] .tab-content{
color: black !important;
}



/* text color */
.tabbrowser-tab[selected] .tab-label {
color: white !important;
}



/*bold*//*
.tabbrowser-tab[selected] .tab-label {
font-weight: 900 !important;
}
/* italic *//*
.tabbrowser-tab[selected] .tab-label {
font-style: italic !important;
}



/* Rounded Tabs*/

.tabbrowser-tab {
box-sizing: border-box;
margin: 0 1px 0 1px !important;
border-radius: 10px 10px 0 0 !important;
}


.tabbrowser-tab .tab-text.tab-label {
color: black !important; /* tab text color - customizable */
}


.tabbrowser-tab[selected="true"] .tab-text.tab-label {
color: white !important; /* tab text color - customizable */
}


.tabbrowser-tab[selected="true"] .tab-background {
border: 1px solid gray !important; /* color is customizable */
border-bottom: none !important;
opacity: 1;
}


.tab-background {
border: none !important;
border-radius: 10px 10px 0 0 !important;
background: black;
opacity: .1;
}


.tab-line { /* = light top line in selected tab in Quantum default */
display: none !important;
}


.tabbrowser-tab:hover,
.tabbrowser-tab .tab-text.tab-label:hover {
cursor: pointer !important;
}


.tabbrowser-tab:hover {
border: 1px solid grey !important;
}


.tabbrowser-tab[selected="true"]:hover {
border: none !important;
}


[tabsintitlebar]:root:not([extradragspace]) .tabbrowser-tab::after,
.tabbrowser-tab:hover::after,
#tabbrowser-tabs:not([movingtab])>.tabbrowser-tab[beforehovered]::after {
border: none !important; /* leave as is; affects the New Tab icon (the plus) */
}


.tabbrowser-tab .tab-label {
font-weight: 900 !important;
}
Last edited by Flycaster on February 10th, 2019, 2:01 pm, edited 1 time in total.
Windows 11, FF Latest, Edge v94, Thunderbird Latest, Defender
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: Can someone help me clean-up this CSS code?

Post by Frank Lion »

Flycaster wrote:I am not very good at dealing with code.
It would seem that you're not very good at posting code in this forum either.
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
Flycaster
Posts: 1164
Joined: November 19th, 2008, 12:13 pm
Location: Boynton Beach, FL

Re: Can someone help me clean-up this CSS code?

Post by Flycaster »

Sorry Frank. I forgot to say I'm am forgetful... I think I worked most of my needs out, but now I'm thinking there may be some clutter that needs cleaning??? Here's the code; much of which you'll see came from you (mucho thanks for the headstart):

@namespace url("http://www.mozilla.org/keymaster/gateke ... s.only.xul"); /* only needed once */

/* TABS: on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}

#TabsToolbar {
position: absolute !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;}

/* TABS: height */
:root {
--tab-toolbar-navbar-overlap: 0px !important;
--tab-min-height: 27px !important; /* adjust to suit your needs */
}
:root #tabbrowser-tabs {
--tab-min-height: 27px !important; /* needs to be the same as above under :root */
--tab-min-width: 80px !important;
}

#TabsToolbar {
height: var(--tab-min-height) !important;
margin-bottom: 1px !important;
box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
}

#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
min-height: var(--tab-min-height) !important;
max-height: var(--tab-min-height) !important;
}

/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
width: 40px;
}

/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
padding-bottom: unset !important;
margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
margin-top: unset !important;
}

/*Inactive tab text color*/
.tabbrowser-tab:not[selected] .tab-content{
color: black !important;
}



/* text color */
.tabbrowser-tab[selected] .tab-label {
color: white !important;
}



/*bold*//*
.tabbrowser-tab[selected] .tab-label {
font-weight: 900 !important;
}
/* italic *//*
.tabbrowser-tab[selected] .tab-label {
font-style: italic !important;
}



/* Rounded Tabs*/

.tabbrowser-tab {
box-sizing: border-box;
margin: 0 1px 0 1px !important;
border-radius: 10px 10px 0 0 !important;
}


.tabbrowser-tab .tab-text.tab-label {
color: black !important; /* tab text color - customizable */
}


.tabbrowser-tab[selected="true"] .tab-text.tab-label {
color: white !important; /* tab text color - customizable */
}


.tabbrowser-tab[selected="true"] .tab-background {
border: 1px solid gray !important; /* color is customizable */
border-bottom: none !important;
opacity: 1;
}


.tab-background {
border: none !important;
border-radius: 10px 10px 0 0 !important;
background: black;
opacity: .1;
}


.tab-line { /* = light top line in selected tab in Quantum default */
display: none !important;
}


.tabbrowser-tab:hover,
.tabbrowser-tab .tab-text.tab-label:hover {
cursor: pointer !important;
}


.tabbrowser-tab:hover {
border: 1px solid grey !important;
}


.tabbrowser-tab[selected="true"]:hover {
border: none !important;
}


[tabsintitlebar]:root:not([extradragspace]) .tabbrowser-tab::after,
.tabbrowser-tab:hover::after,
#tabbrowser-tabs:not([movingtab])>.tabbrowser-tab[beforehovered]::after {
border: none !important; /* leave as is; affects the New Tab icon (the plus) */
}


.tabbrowser-tab .tab-label {
font-weight: 900 !important;
}
Windows 11, FF Latest, Edge v94, Thunderbird Latest, Defender
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: Can someone help me clean-up this CSS code?

Post by Frank Lion »

All the code seems valid and syntax correct.

However, this is sloppy commenting out -

Code: Select all

/*bold*//*
.tabbrowser-tab[selected] .tab-label {
font-weight: 900 !important;
}
/* italic *//*
.tabbrowser-tab[selected] .tab-label {
font-style: italic !important;
}
Amend it to -

Code: Select all

/*bold*//*
.tabbrowser-tab[selected] .tab-label {
font-weight: 900 !important;
}*/
/* italic *//*
.tabbrowser-tab[selected] .tab-label {
font-style: italic !important;
}*/
Also put !important after everything to force it to override default code. ie -

Code: Select all

opacity: 1;
Goes to -

Code: Select all

opacity: 1!important;
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
Flycaster
Posts: 1164
Joined: November 19th, 2008, 12:13 pm
Location: Boynton Beach, FL

Re: Can someone help me clean-up this CSS code?

Post by Flycaster »

Thanks, Frank. You've been very big help and I've learned a lot; but unfortunately, I don't do this too often and I am prone to forget how to dot the "i's" and cross the "t's". Nonetheless, thoroughly appreciated.
Windows 11, FF Latest, Edge v94, Thunderbird Latest, Defender
User avatar
Flycaster
Posts: 1164
Joined: November 19th, 2008, 12:13 pm
Location: Boynton Beach, FL

Re: Can someone help me clean-up this CSS code?

Post by Flycaster »

I think I spoke a little too soon as I am not quite sure that I understand the amendment. Specifically: It appears to me that you want me to add two "*/", one each at the end of the bold and italic codes. And, if correct, then wouldn't that stop those codes from working? You see, I think that when one begins something with "/*" and ends with "*/", then that script becomes a notation and not active code??? Obviously, I need a little guidance here.
Windows 11, FF Latest, Edge v94, Thunderbird Latest, Defender
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: Can someone help me clean-up this CSS code?

Post by Frank Lion »

Flycaster wrote:Specifically: It appears to me that you want me to add two "*/", one each at the end of the bold and italic codes. And, if correct, then wouldn't that stop those codes from working?
Those codes were already not working - as seen by the syntax highlighting on my .css editor.

If you want the code sections to work (only a mindreader would know that) then get rid of the initial comment out. i.e. This -

Code: Select all

/*bold*//*
Goes to this -

Code: Select all

/*bold*/
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
Flycaster
Posts: 1164
Joined: November 19th, 2008, 12:13 pm
Location: Boynton Beach, FL

Re: Can someone help me clean-up this CSS code?

Post by Flycaster »

Thank you for the clarification.
Windows 11, FF Latest, Edge v94, Thunderbird Latest, Defender
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: Can someone help me clean-up this CSS code?

Post by Frank Lion »

Flycaster wrote:Thank you for the clarification.
No problem.
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
Post Reply