Полный(!) переворот tab'ов в tabbrowser'е

Василий Литвинов · №1

Я пытаюсь добиться вот этого:

Для этого и изменил стили, подключив свои перевернутые картинки:

Код:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

#s_browser_bottom > tabbox {-moz-box-direction: reverse;}

#s_browser_bottom .tabbrowser-tab > .tab-image-left 
  {background: url("skin/icons/tab-left.png") no-repeat;}
#s_browser_bottom .tabbrowser-tab[chromedir="rtl"] > .tab-image-left 
  {background: url("skin/icons/tab-right.png") no-repeat;}
#s_browser_bottom .tabbrowser-tab:not([selected="true"]) > .tab-image-left 
  {background: url("skin/icons/tab-left-bkgnd.png") no-repeat;}
#s_browser_bottom .tabbrowser-tab[chromedir="rtl"]:not([selected="true"]) > .tab-image-left 
  {background: url("skin/icons/tab-right-bkgnd.png") no-repeat;}
#s_browser_bottom .tabbrowser-tab:hover:not([selected="true"]) > .tab-image-left 
  {background: url("skin/icons/tab-left-hover.png") no-repeat;}
#s_browser_bottom .tabbrowser-tab[chromedir="rtl"]:hover:not([selected="true"]) > .tab-image-left 
  {background: url("skin/icons/tab-right-hover.png") no-repeat;}
#s_browser_bottom .tabbrowser-tab > .tab-image-middle 
  {background: url("skin/icons/tab-middle.png") repeat-x;}
#s_browser_bottom .tabbrowser-tab:not([selected="true"]) > .tab-image-middle 
  {background: url("skin/icons/tab-middle-bkgnd.png") repeat-x;}
#s_browser_bottom .tabbrowser-tab:hover:not([selected="true"]) > .tab-image-middle 
  {background: url("skin/icons/tab-middle-hover.png") repeat-x;}
#s_browser_bottom .tabbrowser-tab > .tab-image-right 
  {background: url("skin/icons/tab-right.png") no-repeat;}
#s_browser_bottom .tabbrowser-tab[chromedir="rtl"] > .tab-image-right 
  {background: url("skin/icons/tab-left.png") no-repeat;}
#s_browser_bottom .tabbrowser-tab:not([selected="true"]) > .tab-image-right 
  {background: url("skin/icons/tab-right-bkgnd.png") no-repeat;}
#s_browser_bottom .tabbrowser-tab[chromedir="rtl"]:not([selected="true"]) > .tab-image-right 
  {background: url("skin/icons/tab-left-bkgnd.png") no-repeat;}
#s_browser_bottom .tabbrowser-tab:hover:not([selected="true"]) > .tab-image-right 
  {background: url("skin/icons/tab-right-hover.png") no-repeat;}
#s_browser_bottom .tabbrowser-tab[chromedir="rtl"]:hover:not([selected="true"]) > .tab-image-right 
  {background: url("skin/icons/tab-left-hover.png") no-repeat;}
#s_browser_bottom .tabbrowser-tab > .tab-close-button 
  {background-image: url("skin/icons/tab-middle-bkgnd.png");}
#s_browser_bottom .tabbrowser-tab:hover > .tab-close-button 
  {background-image: url("skin/icons/tab-middle-hover.png");}
#s_browser_bottom .tabbrowser-tab[selected="true"] > .tab-close-button 
  {background-image: url("skin/icons/tab-middle.png");}

Но у меня осталась единственная проблемма, я не могу перевернуть вот это полоску:

Что мне нужно сделать, чтобы она оказалась на своем месте (как на первом рисунке) ?
Может нужно делать что-то вроде:

Выделить код

Код:

#s_browser_bottom > tabs > vbox {-moz-box-direction: reverse;}

Но это в данном случае не помогает.
P.S. Google не помог мне в решении этого вороса

Отредактировано Василий Литвинов (11-07-2007 01:36:34)

Shutnik · №2

покопался инспектором, поковырял chrome...

Выделить код

Код:

#alltabs-place-holder {
	display: none !important;
}

скрывает полоску с табов, с фона убрать не смог...

Василий Литвинов · №3

скрывает полоску с табов, с фона убрать не смог...

Убрать эту полоску я могу, это делается вот так:

Выделить код

Код:

#s_browser_bottom .tabs-bottom 
  {display: none !important;}

Но задача состоит не в этом, чтоб ее убрать. А в том, что ее всетаки нужно разместить сверху от вкладок.

Отредактировано Василий Литвинов (11-07-2007 15:44:35)

Anton · №4

а если так:

Выделить код

Код:

.tabs-stack > vbox
{
	-moz-box-direction: reverse !important;
}

Василий Литвинов · №5

а если так:
Выделить код
Код:
.tabs-stack > vbox
  {-moz-box-direction: reverse !important;}

Не помогает, реакции ноль.
Я решил вопрос вот так:

Выделить код

Код:

#s_browser_bottom .tabbrowser-tabs
  {border-top: 1px solid red/*threedshadow*/;
   background: -moz-dialog url("skin/icons/tabstrip-bottom.png") repeat !important;
   margin: 1px !important;}
#s_browser_bottom .tabs-bottom
  {border-top: 1px solid red/*threedshadow*/;
   border-bottom: 0px solid green/*threedshadow*/;
   height: 26px !important;
   margin: 0px !important;}

Anton · №6

Не помогает, реакции ноль.

У меня сработало: http://forum.mozilla-russia.org/uploaded/tbr.png

vZ · №7

кстати в чатзилле тожа ж табики снизу сидит как раз как вам надо посмотрите может там ещё проще

Полезная информация

№111-07-2007 01:31:46