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.
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.
Skaityti atsakymą kartu su kontekstu 👍 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
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.