Шукати в статтях підтримки

Остерігайтеся нападів зловмисників. Mozilla ніколи не просить вас зателефонувати, надіслати номер телефону у повідомленні або поділитися з кимось особистими даними. Будь ласка, повідомте про підозрілі дії за допомогою меню “Повідомити про зловживання”

Докладніше

Ця тема перенесена в архів. Якщо вам потрібна допомога, запитайте.

Userchrome.css help

  • 5 відповідей
  • 2 мають цю проблему
  • 1 перегляд
  • Остання відповідь від 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.

Обране рішення

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

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?

Змінено 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

Вибране рішення

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