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.
Επιλεγμένη λύση
.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.
Ανάγνωση απάντησης σε πλαίσιο 👍 0Όλες οι απαντήσεις (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?
Τροποποιήθηκε στις από το χρήστη 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?
Επιλεγμένη λύση
.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.