MozillaZine

Can someone help me clean-up this CSS code?

User Help for Mozilla Firefox
Flycaster

User avatar
 
Posts: 883
Joined: November 19th, 2008, 12:13 pm
Location: Boynton Beach, FL

Post Posted February 10th, 2019, 1:25 pm

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/gatekeeper/there.is.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 10 H 64-bit, Quantum The Latest, Chrome v68, IE11, Thunderbird The Latest, Avast Pro

Frank Lion

User avatar
 
Posts: 20229
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted February 10th, 2019, 1:55 pm

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.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

Flycaster

User avatar
 
Posts: 883
Joined: November 19th, 2008, 12:13 pm
Location: Boynton Beach, FL

Post Posted February 10th, 2019, 2:04 pm

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/gatekeeper/there.is.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 10 H 64-bit, Quantum The Latest, Chrome v68, IE11, Thunderbird The Latest, Avast Pro

Frank Lion

User avatar
 
Posts: 20229
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted February 10th, 2019, 2:38 pm

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;
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

Flycaster

User avatar
 
Posts: 883
Joined: November 19th, 2008, 12:13 pm
Location: Boynton Beach, FL

Post Posted February 10th, 2019, 2:52 pm

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 10 H 64-bit, Quantum The Latest, Chrome v68, IE11, Thunderbird The Latest, Avast Pro

Flycaster

User avatar
 
Posts: 883
Joined: November 19th, 2008, 12:13 pm
Location: Boynton Beach, FL

Post Posted February 11th, 2019, 7:31 am

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 10 H 64-bit, Quantum The Latest, Chrome v68, IE11, Thunderbird The Latest, Avast Pro

Frank Lion

User avatar
 
Posts: 20229
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted February 11th, 2019, 8:32 am

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*/
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

Flycaster

User avatar
 
Posts: 883
Joined: November 19th, 2008, 12:13 pm
Location: Boynton Beach, FL

Post Posted February 11th, 2019, 9:33 am

Thank you for the clarification.
Windows 10 H 64-bit, Quantum The Latest, Chrome v68, IE11, Thunderbird The Latest, Avast Pro

Frank Lion

User avatar
 
Posts: 20229
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted February 11th, 2019, 10:07 am

Flycaster wrote:Thank you for the clarification.

No problem.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

Return to Firefox Support


Who is online

Users browsing this forum: No registered users and 12 guests