标签页超过一定数量时,新建标签页按钮外观发生变化

RT
我想一直保持未超过一定数量时的外观,该怎么做呢?

不会没人遇到吧

实际上那两个是两个不同的按钮，试试下面的。

#new-tab-button {
  -moz-appearance: none;
  background: -moz-linear-gradient(bottom, rgba(10%,10%,10%,.4) 1px, transparent 1px), -moz-linear-gradient(transparent, hsla(0,0%,45%,.1) 1px, hsla(0,0%,32%,.2) 80%, hsla(0,0%,0%,.2)),
              -moz-linear-gradient(-moz-dialog, -moz-dialog);
  background-origin: border-box;
  background-position: 1px 2px;
  background-size: -moz-calc(100% - 2px) -moz-calc(100% - 2px);
  background-repeat: no-repeat;
  margin: 0;
  padding: 2px 0 4px;
  -moz-border-image: url(tabbrowser/tab.png) 4 3 0 / 4px 3px 0 repeat stretch;
}

#new-tab-button:hover {
  background: -moz-linear-gradient(bottom, rgba(10%,10%,10%,.4) 1px, transparent 1px), -moz-linear-gradient(hsla(0,0%,100%,.3) 1px, hsla(0,0%,75%,.2) 80%, hsla(0,0%,60%,.2)),
                    -moz-linear-gradient(-moz-dialog, -moz-dialog) !important;
 
}

@media all and (-moz-windows-theme: luna-blue) {
#new-tab-button {
    background-image: -moz-linear-gradient(bottom, rgba(10%,10%,10%,.4) 1px, transparent 1px),
                      -moz-linear-gradient(hsla(51,34%,89%,.9), hsla(51,15%,79%,.9) 1px, hsla(51,9%,68%,.9));
  }

#new-tab-button:hover {
    background: -moz-linear-gradient(bottom, rgba(10%,10%,10%,.4) 1px, transparent 1px),
                      -moz-linear-gradient(hsla(51,34%,100%,.9), hsla(51,15%,94%,.9) 1px, hsla(51,9%,83%,.9)) !important;
  }
}

楼主的意思是说挤出来多一行？

每小时版 好像还没整合tab 动画是吧
好慢阿

kmc：楼主的意思是说挤出来多一行？回到原帖

不是的...就是新建标签按钮变了.

alanfly：实际上那两个是两个不同的按钮，试试下面的。

#new-tab-button {
  -moz-appearance: none;
  background: -moz-linear-gradient(bottom, rgba(10%,10%,10%,.4) 1px, transparent 1px), -moz-linear-gradient(transparent, hsla(0,0%,45%,.1) 1px, hsla(0,0%,32%,.2) 80%, hsla(0,0%,0%,.2)),-moz-linear-gradient(-moz-dialog, -moz-dialog);...................

回到原帖

谢谢~~
如果是两个不同的按钮,那就一直保持第一个按钮,第二个直接去掉~
效果差不多出来~就是外观和自带的有点出入.
修改后的按钮,暂时称为效果按钮~
比如:
1.鼠标滑过时,自带的没有调整大小,只是稍微改变了鼠标滑过时的颜色和中间加号的颜色.
2.效果按钮和自带的按钮大小也有点出入.
3.一个细节:当标签页数量达到一定数量时(可能需要滚动滚轮键),效果按钮左边的空白像素也和自带的有点出入.(如图)
麻烦alan再看下~再次感谢...

隐藏掉一个按钮不可行，因为当标签超过一定数量时第一个按钮会自动被推到右边看不到的地方，这时第二个按钮就出现了；
1.hover大小改变修正了；
2.可以自己调整width:28px这个值，4个都要改；
3.效果按钮是固定不动的，所以会这样。

#new-tab-button {
  -moz-appearance: none;
  background: -moz-linear-gradient(bottom, rgba(10%,10%,10%,.4) 1px, transparent 1px), -moz-linear-gradient(transparent, hsla(0,0%,45%,.1) 1px, hsla(0,0%,32%,.2) 80%, hsla(0,0%,0%,.2)),
              -moz-linear-gradient(-moz-dialog, -moz-dialog);
  background-origin: border-box;
  background-position: 1px 2px;
  background-size: -moz-calc(100% - 2px) -moz-calc(100% - 2px);
  background-repeat: no-repeat;
  margin: 0;
  padding: 2px 0 4px;
  -moz-border-image: url(tabbrowser/tab.png) 4 3 0 / 4px 3px 0 repeat stretch;
  width:28px !Important;
}

#new-tab-button:hover {
  background: -moz-linear-gradient(bottom, rgba(10%,10%,10%,.4) 1px, transparent 1px), -moz-linear-gradient(hsla(0,0%,100%,.3) 1px, hsla(0,0%,75%,.2) 80%, hsla(0,0%,60%,.2)),
                    -moz-linear-gradient(-moz-dialog, -moz-dialog) !important;
background-origin: border-box !important;
  background-position: 1px 2px !important;
  background-size: -moz-calc(100% - 2px) -moz-calc(100% - 2px) !important;
  background-repeat: no-repeat !important;
  width:28px !Important;

}

@media all and (-moz-windows-theme: luna-blue) {
#new-tab-button {
    background-image: -moz-linear-gradient(bottom, rgba(10%,10%,10%,.4) 1px, transparent 1px),
                      -moz-linear-gradient(hsla(51,34%,89%,.9), hsla(51,15%,79%,.9) 1px, hsla(51,9%,68%,.9));
width:28px !Important;
  }

#new-tab-button:hover {
    background: -moz-linear-gradient(bottom, rgba(10%,10%,10%,.4) 1px, transparent 1px),
                      -moz-linear-gradient(hsla(51,34%,100%,.9), hsla(51,15%,94%,.9) 1px, hsla(51,9%,83%,.9)) !important;
background-origin: border-box !important;
  background-position: 1px 2px !important;
  background-size: -moz-calc(100% - 2px) -moz-calc(100% - 2px) !important;
  background-repeat: no-repeat !important;
  width:28px !Important;
  }
}

隐藏掉一个按钮不可行，因为当标签超过一定数量时第一个按钮会自动被推到右边看不到的地方，这时第二个按钮就出现了；
1.hover大小改变修正了；
2.可以自己调整width:28px这个值，4个都要改；
3.效果按钮是固定不动的，所以会这样。

#new-tab-button {
  -moz-appearance: none;
  background: -moz-linear-gradient(bottom, rgba(10%,10%,10%,.4) 1px, transparent 1px), -moz-linear-gradient(transparent, hsla(0,0%,45%,.1) 1px, hsla(0,0%,32%,.2) 80%, hsla(0,0%,0%,.2)),
              -moz-linear-gradient(-moz-dialog, -moz-dialog);
..............

现在这个效果很棒了~~谢谢~