Табы в FF4 как в FF3

ArtLive · №1

В FF3 настроил, чтобы табы выглядели следующим образом:

в chrome.css:

Код:

.tabbrowser-tab {
border-top: 0px solid !important;
border-right: 0px solid !important;
border-left: 0px solid !important;
border-bottom: 1px solid !important;
-moz-border-top-colors: auto !important;
-moz-border-right-colors: auto !important;
-moz-border-left-colors: auto !important;
-moz-border-bottom-colors: auto !important;
-moz-border-radius: none !important;
margin-left:0px!important;
padding: 2px 0px 5px 0px !important;
position:relative;bottom:5px;
}

но в FF4 этот кусок chrome.css не роляет, видимо, потому что вкладки все равно выглядят забором:

как убрать эти вот рамки, обводящие каждый таб?

спасибо.

Infocatcher · №2

Как-то так:

Выделить код

Код:

.tabbrowser-tab {
  -moz-box-flex: 0 !important;
  width: auto !important;
  min-width: 16px !important;
  border: none !important;
  /*
  padding-left: 2px !important;
  padding-right: 2px !important;
  */
}
.tabbrowser-tab > .tab-text {
  display: none !important;
}

iDev.Pi · №3

и ещё строчку добавить

Выделить код

Код:

tab[selected="true"], tab[beforeselected="true"], tab:hover {
background: none !important;
}

Отредактировано iDev.Pi (18-08-2010 20:56:38)

ArtLive · №4

Получилась какая-то ерунда:

Как бы активными отображаются две вкладки: настоящая, и слева от нее. Ну и хотелось бы убрать серый фон у неактивных...

Infocatcher · №5

ArtLive пишет

убрать серый фон у неактивных...

Тогда что-то вроде вот такого:

Выделить код

Код:

.tabbrowser-tab {
  -moz-box-flex: 0 !important;
  width: auto !important;
  min-width: 16px !important;
  border: none !important;
  -moz-border-radius: 0 !important;
  background: transparent !important;
  /*
  padding-left: 2px !important;
  padding-right: 2px !important;
  */
}
.tabbrowser-tab > .tab-text {
  display: none !important;
}
.tabbrowser-tab[selected="true"] {
  background: white !important;
}

Добавлено 18-08-2010 22:26:50
Пример с подсветкой вкладок под курсором:

Выделить код

Код:

.tabbrowser-tab {
  -moz-box-flex: 0 !important;
  width: auto !important;
  min-width: 16px !important;
  border: none !important;
  -moz-border-radius: 0 !important;
  background: transparent !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
}
.tabbrowser-tab > .tab-text,
.tabbrowser-tab > .tab-close-button {
  display: none !important;
}
.tabbrowser-tab > .tab-icon-image {
  margin: 0 !important;
}
.tabbrowser-tab[selected="true"] {
  background: #fff !important;
}
.tabbrowser-tab:hover {
  background: #eee !important;
}
.tabbrowser-tab[selected="true"]:hover {
  background: #f5f5f5 !important;
}

ArtLive · №6

спасибо всем за помощь, получилось вот что:

Выделить код

Код:

.tabbrowser-tab {
-moz-box-flex: 0 !important;
width: auto !important;
border: none !important;
padding-top: 1px !important;
padding-right: 1px !important;
padding-botton: 1px !important;
padding-left: 5px !important;
height:25px !important;  
border-bottom: 1px solid #BAE4FE !important;
}

.tabbrowser-tab > .tab-text { display: none !important; }

tab { background: none !important; }
tab[selected="true"] { background: #0389DA !important; }
tab:hover { background: #92D6FE !important; }

foxweb · №7

не знал что при помощи css можно изменять внешний вид файрфокса

igorsub · №8

foxweb
http://forum.mozilla-russia.org/doku.ph … chrome.css

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

№118-08-2010 20:11:43