Userchrome.css help
Hi, I have written this code:
#titlebar-content
{
margin-top: -3px !important;
}
.tabbrowser-tab
.tab-close-button
{
visibility: collapse !important;
}
.tabbrowser-tab:not([pinned]):hover
.tab-close-button
{
visibility: visible !important;
margin-right: 3px !important;
display: -moz-box !important;
}
.tabbrowser-tab:not([pinned])
.tab-text
{
-moz-box-ordinal-group: 4 !important;
}
.tabbrowser-tab:not([pinned])
.tab-throbber,
.tabbrowser-tab:not([pinned])
.tab-icon-image,
.tabbrowser-tab:not([pinned])
.tab-close-button
{
margin-left: 2px !important;
}
.tabbrowser-tab:not([pinned]):hover
.tab-icon-image,
.tabbrowser-tab:not([pinned]):hover
.tab-throbber
{
display: none !important;
}
#urlbar-container
{
min-width: 300px !important;
max-width: 300px !important;
}
#urlbar
{
border-style: none !important;
}
#star-button
{
display: none !important;
}
#identity-box
{
display: none;
}
#navigator-toolbox::after
{
height: 0px !important;
}
#appmenu-button
{
background-color: transparent !important;
background-image:
-moz-linear-gradient(hsla(0, 0%, 80%, .4), hsla(0, 0%, 20%, .2)),
/*URL data has been broken into separate lines. Put back together before using !! */
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAASCAYAAAC5DOVpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAA
AAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41Ljg3O4BdAAAElElEQVQ4T32UeVAVVBSHX8N7gCzvP
R4QCohoLBrjVrhQYiJqyObCJpugKCCiEomMiaMopo1EuSEIuYAYWigUKLhkxiYDIvDYHqAIKabIIiIikl9P/3DGybozZ87MvXO/Ob/fvecIBO9Y0hm
bzcevTNoTeLL0xu7fm/uPlLeT2dzV872iq8j+u6tbjDxSRr3r3pu958ftNEQWKzQlH69LnBKSMRwr7ya/72/kgy+pV0atMsqfveTgrS7WHD474BJzP
CYx0EfjX9CB+I9cb26y3qFm7nfT1GEvLvE32H/iFH/kpVH05AWl/cOvc37vEEl3+/HMlJORl0zaoS97c90sfd8CPvDR/bnFTUKC5zRORniQEeDCNX
dTkutaye4eoqBvmJyeIXYpugkv6cAxuZrYlEzaKkPI3etJTdz0iDfA+qXaRX+G6tLko0Ojrw4Vi2UUBExkn7yJlHs9nOh5wZFHQ8S19RN8/SFelx8w
a+NJelpDeVzuSUnq/IHnDUv0BL27jEw7wnSeNbqoU+ukRY2rGLmXjDJnCU1LtbgT9gFhv5YR1fCEtdWP8S/tYV5aM5O2/UZqYhD9VYsYqHNlsO
pzd0HvduOvW9w0qXPQoGqBJpULxdR46dESNYXanH2s3pPBoqw23PM7mX+skRnfVmC1o5gx3odZHxnM06I5vGhx4fH5qZsF3dtNChteVeSgRZ
WTEuShlLt2HPfjbfDb+QM2RxTYHrvF9PhyPozMwWRZEkYeiejbbaXqQih9+Z8xJF/A9UirVsH9dYZlciWoWgl6JS9rqiapJqpYL96KVUQWltuKmR
BbgkXMNUYvT8Ng4Tfo2+9EOmMjXRXODBZPY7B8GgdWWD8T3FqiU1tpr6zKVcoNdxlnzIVc/VQNr9VbMArJYXRYLlbhp5m8/jRGQT8hs41BOj
MayaRg+krteXpxAr2/jOXaQUuFoMpmxKGimUqvXHSo8dalzFYFhYsQxVpDzqyzIzPcjpbosdw5YMuyDXFoT49mhNUaokLm0p9jRv85EzqTdJW
2aCUKCs1VnPLM1SicrU31Mj2a/CS0+Yzg0mwNCuylFC6SsX+eJWafRKA+ay/C8eGoGHtTkTCW3rSRdB6U0rZZjduR2jMFV0xVRGcNRW2njFU
pmi+lxk+fppD3uRVmwNY5Exlj4YXAMgqBSQACfWeMzZ1Y5TybrqMmPNonpv0rNbJdTVBs8jZ7/XGzDYV+KVIhaaPVuO4oo9pXn8bgkTSHj6JklQ
lfzLXGf7IR2+31kYdr8tcOCXdjpbTHiMnz0+Pi7rnVwx3J773pggyZMD1BQ4V0U3WK50moVD6G3F+fhpV6NAbJUASJqV8upiFQm9ZwDe7tMaBjlx
a9x3U6np/Tm/BWf6ZLVESpElHKAbEKR0cKuWKjReViKbXeUhr8JSgCtGkK1KI1VIv2CLHSI02lRHF+Z4L2f4+jHw1EHukGwnsnDIRkW6hSbKtOla
MaDW6q1Hspc6Aquf6G5LiaXSp3nCT537n26jB3nFDzvIVofYGV6MLlyaLKEhvRw5sOqlfrfDWymjeI425HS2a9C/IPcDqo7+BRMssAAAAASUVORK
5CYII="),
-moz-linear-gradient(rgb(247, 182, 82), rgb(215, 98, 10)),
-moz-linear-gradient(rgb(153, 38, 211), rgb(105, 19, 163)) !important;
background-position: -100px 0px, 2px center, 0px 0px, -100px 0px !important;
background-repeat: no-repeat !important;
margin-top: 3px !important;
min-height: 20px !important;
max-height: 20px !important;
min-width: 34px !important;
max-width: 34px !important;
border: none !important;
}
#main-window[privatebrowsingmode=temporary] #appmenu-button:not(:-moz-window-inactive)
{
background-position: -100px 0px, 2px center, -100px 0px, 0px 0px !important;
}
#appmenu-button:-moz-window-inactive
{
background-position: 0px 0px, 2px center, -100px 0px, -100px 0px !important;
}
#appmenu-button
.button-text
{
display: none !important;
}
.tabbrowser-tab,
.tabs-newtab-button
{
padding: 0px 0px 4px 0px !important;
}
.tabbrowser-tab[pinned],
.tabs-newtab-button
{
max-width: 22px !important;
min-width: 22px !important;
}
#TabsToolbar
{
margin-bottom: -2px !important;
}
and when there aren't that many tabs, it looks fine.
http://i.imgur.com/vXjLcDo.png
However, when tab overflow occurs, app tabs don't look quite right. http://i.imgur.com/8XLuWka.png
Is there a way to fix this?
Also, when are the svg versions of the firefox logo coming out? The status has been "will be released soon" for over a year now.
Hi, I have written this code:
#titlebar-content
{
margin-top: -3px !important;
}
.tabbrowser-tab
.tab-close-button
{
visibility: collapse !important;
}
.tabbrowser-tab:not([pinned]):hover
.tab-close-button
{
visibility: visible !important;
margin-right: 3px !important;
display: -moz-box !important;
}
.tabbrowser-tab:not([pinned])
.tab-text
{
-moz-box-ordinal-group: 4 !important;
}
.tabbrowser-tab:not([pinned])
.tab-throbber,
.tabbrowser-tab:not([pinned])
.tab-icon-image,
.tabbrowser-tab:not([pinned])
.tab-close-button
{
margin-left: 2px !important;
}
.tabbrowser-tab:not([pinned]):hover
.tab-icon-image,
.tabbrowser-tab:not([pinned]):hover
.tab-throbber
{
display: none !important;
}
#urlbar-container
{
min-width: 300px !important;
max-width: 300px !important;
}
#urlbar
{
border-style: none !important;
}
#star-button
{
display: none !important;
}
#identity-box
{
display: none;
}
#navigator-toolbox::after
{
height: 0px !important;
}
#appmenu-button
{
background-color: transparent !important;
background-image:
-moz-linear-gradient(hsla(0, 0%, 80%, .4), hsla(0, 0%, 20%, .2)),
/*URL data has been broken into separate lines. Put back together before using !! */
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAASCAYAAAC5DOVpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAA
AAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41Ljg3O4BdAAAElElEQVQ4T32UeVAVVBSHX8N7gCzvP
R4QCohoLBrjVrhQYiJqyObCJpugKCCiEomMiaMopo1EuSEIuYAYWigUKLhkxiYDIvDYHqAIKabIIiIikl9P/3DGybozZ87MvXO/Ob/fvecIBO9Y0hm
bzcevTNoTeLL0xu7fm/uPlLeT2dzV872iq8j+u6tbjDxSRr3r3pu958ftNEQWKzQlH69LnBKSMRwr7ya/72/kgy+pV0atMsqfveTgrS7WHD474BJzP
CYx0EfjX9CB+I9cb26y3qFm7nfT1GEvLvE32H/iFH/kpVH05AWl/cOvc37vEEl3+/HMlJORl0zaoS97c90sfd8CPvDR/bnFTUKC5zRORniQEeDCNX
dTkutaye4eoqBvmJyeIXYpugkv6cAxuZrYlEzaKkPI3etJTdz0iDfA+qXaRX+G6tLko0Ojrw4Vi2UUBExkn7yJlHs9nOh5wZFHQ8S19RN8/SFelx8w
a+NJelpDeVzuSUnq/IHnDUv0BL27jEw7wnSeNbqoU+ukRY2rGLmXjDJnCU1LtbgT9gFhv5YR1fCEtdWP8S/tYV5aM5O2/UZqYhD9VYsYqHNlsO
pzd0HvduOvW9w0qXPQoGqBJpULxdR46dESNYXanH2s3pPBoqw23PM7mX+skRnfVmC1o5gx3odZHxnM06I5vGhx4fH5qZsF3dtNChteVeSgRZ
WTEuShlLt2HPfjbfDb+QM2RxTYHrvF9PhyPozMwWRZEkYeiejbbaXqQih9+Z8xJF/A9UirVsH9dYZlciWoWgl6JS9rqiapJqpYL96KVUQWltuKmR
BbgkXMNUYvT8Ng4Tfo2+9EOmMjXRXODBZPY7B8GgdWWD8T3FqiU1tpr6zKVcoNdxlnzIVc/VQNr9VbMArJYXRYLlbhp5m8/jRGQT8hs41BOj
MayaRg+krteXpxAr2/jOXaQUuFoMpmxKGimUqvXHSo8dalzFYFhYsQxVpDzqyzIzPcjpbosdw5YMuyDXFoT49mhNUaokLm0p9jRv85EzqTdJW
2aCUKCs1VnPLM1SicrU31Mj2a/CS0+Yzg0mwNCuylFC6SsX+eJWafRKA+ay/C8eGoGHtTkTCW3rSRdB6U0rZZjduR2jMFV0xVRGcNRW2njFU
pmi+lxk+fppD3uRVmwNY5Exlj4YXAMgqBSQACfWeMzZ1Y5TybrqMmPNonpv0rNbJdTVBs8jZ7/XGzDYV+KVIhaaPVuO4oo9pXn8bgkTSHj6JklQ
lfzLXGf7IR2+31kYdr8tcOCXdjpbTHiMnz0+Pi7rnVwx3J773pggyZMD1BQ4V0U3WK50moVD6G3F+fhpV6NAbJUASJqV8upiFQm9ZwDe7tMaBjlx
a9x3U6np/Tm/BWf6ZLVESpElHKAbEKR0cKuWKjReViKbXeUhr8JSgCtGkK1KI1VIv2CLHSI02lRHF+Z4L2f4+jHw1EHukGwnsnDIRkW6hSbKtOla
MaDW6q1Hspc6Aquf6G5LiaXSp3nCT537n26jB3nFDzvIVofYGV6MLlyaLKEhvRw5sOqlfrfDWymjeI425HS2a9C/IPcDqo7+BRMssAAAAASUVORK
5CYII="),
-moz-linear-gradient(rgb(247, 182, 82), rgb(215, 98, 10)),
-moz-linear-gradient(rgb(153, 38, 211), rgb(105, 19, 163)) !important;
background-position: -100px 0px, 2px center, 0px 0px, -100px 0px !important;
background-repeat: no-repeat !important;
margin-top: 3px !important;
min-height: 20px !important;
max-height: 20px !important;
min-width: 34px !important;
max-width: 34px !important;
border: none !important;
}
#main-window[privatebrowsingmode=temporary] #appmenu-button:not(:-moz-window-inactive)
{
background-position: -100px 0px, 2px center, -100px 0px, 0px 0px !important;
}
#appmenu-button:-moz-window-inactive
{
background-position: 0px 0px, 2px center, -100px 0px, -100px 0px !important;
}
#appmenu-button
.button-text
{
display: none !important;
}
.tabbrowser-tab,
.tabs-newtab-button
{
padding: 0px 0px 4px 0px !important;
}
.tabbrowser-tab[pinned],
.tabs-newtab-button
{
max-width: 22px !important;
min-width: 22px !important;
}
#TabsToolbar
{
margin-bottom: -2px !important;
}
and when there aren't that many tabs, it looks fine.
http://i.imgur.com/vXjLcDo.png
However, when tab overflow occurs, app tabs don't look quite right.
http://i.imgur.com/8XLuWka.png
Is there a way to fix this?
Also, when are the svg versions of the firefox logo coming out? The status has been "will be released soon" for over a year now.
Chosen solution
.tabbrowser-tab[pinned=true] .tab-throbber, .tabbrowser-tab[pinned=true] .tab-icon-image { margin-left: 1px !important; margin-right: 1px !important; }
from https://addons.mozilla.org/en-us/firefox/addon/noverflow/
fixed the problem. =) Thanks for helping me find the errors in my ways.
Read this answer in context 👍 0All Replies (5)
That is caused by this rule and it is better to leave pinned tabs as they are and remove this rule.
.tabbrowser-tab[pinned],
.tabs-newtab-button {
max-width: 22px !important;
min-width: 22px !important;
}
Removing that rule results in this: http://i.imgur.com/ViFvRTu.png where the apptab is drawn over the tab toolbar. Would I be able to resolve that via z-index or moz-box-ordinal-group?
If that's not the correct way to change the width, what is the recommended way?
Modified by boogerlad
Are that the two pixels added by the last rule causing this?
#TabsToolbar { margin-bottom: -2px !important; }
Yes, you are right again. As you can probably infer, I'm going for a minimalistic theme. I'm trying to reduce the space as much as possible.
#titlebar-content { margin-top: -3px !important; }
removes the top 3 pixels on top of the tab bar, and the last rule
#TabsToolbar { margin-bottom: -2px !important; }
is to make the tab height shorter. My original solution was manually adjusting the tab-height, but it would cause the fonts and the favicon to be squished and it would look quite ugly. Can you recommend an alternate method then?
Chosen Solution
.tabbrowser-tab[pinned=true] .tab-throbber, .tabbrowser-tab[pinned=true] .tab-icon-image { margin-left: 1px !important; margin-right: 1px !important; }
from https://addons.mozilla.org/en-us/firefox/addon/noverflow/
fixed the problem. =) Thanks for helping me find the errors in my ways.