On Aug 14th 11 PM ET/Aug 15th 03:00 UTC, due to scheduled Firefox Account server maintenance, users may not be able to sign in or create a new subscription. This is expected to last approximately 30 minutes. Status updates can be found at https://status.vpn.mozilla.org or https://status.relay.firefox.com.

Pretraži podršku

Izbjegni prevare podrške. Nikad te nećemo tražiti da nas nazoveš, da nam pošalješ telefonski broj ili da podijeliš osobne podatke. Prijavi sumnjive radnje pomoću opcije „Prijavi zlouporabu”.

Learn More

Userchrome.css help

  • 5 odgovora
  • 2 imaju ovaj problem
  • 137 prikaza
  • Posljednji odgovor od boogerlad

more options

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.

Izabrano rješenje

.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.

Pročitaj ovaj odgovor u kontekstu 👍 0

Svi odgovori (5)

more options

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;
}
more options

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?

Izmjenjeno od boogerlad

more options

Are that the two pixels added by the last rule causing this?

#TabsToolbar { margin-bottom: -2px !important; }
more options

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?

more options

Odabrano rješenje

.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.