Кнопки табов как в iE9 ,только кнопки

parlament1 · №1

Я не фанат IE 9
но кнопки табов очень нравятся и хочу что бы в Firefox были такие же

1. нужно придать им эффект прозрачности
2. что бы они были 2х цветные с плавным переходом цвета
3.контур окна темно-серый линией в 1 пиксель обвести сверху таким же контуром в 1 пиксель цвета открытой вкладки
4 кнопку вкладки из нутри по краю тоже обвести контуром в 3 сторонах сверху-низ не трогать
(с боков конур помимо прочего еще и темнеет к низу)
5.убрать округлости сверху кнопок если возможно
6. поменять алгоритм работы закрытия кнопки-вкладки от действия мыши

Все о чем я говорю видно-если увеличить немного мои скриншоты

Если посоветуете хоть по одному пункту как сделать- буду благодарен

скрин неактивных интерфейсов

скрин активных

http://i050.radikal.ru/1103/8d/9266312dd631.jpg

активных увеличеных

http://i016.radikal.ru/1103/b3/a8bb2dcf3c9e.jpg

неактивные на черном

http://s004.radikal.ru/i207/1103/9e/8da6a997d3fd.jpg

увеличеные на черном

http://s56.radikal.ru/i153/1103/2c/638cdf824e67.jpg

если кому нужен код как убрать межу вкладками расстояние на 1 пиксел-дам(там их 2 пиксела)

Отредактировано parlament1 (06-03-2011 23:19:58)

shumomer · №2

Практически на все вопросы есть ответы тут: http://forum.mozilla-russia.org/viewtopic.php?id=37396

parlament1 · №3

shumomer - шутник

shumomer · №4

Хмм... И в чем-же юмор?
Даже если там нет прямого рецепта - там есть подсказки. Ну например переход цветов + прозрачность неактивных:

Выделить код

Код:

.tabbrowser-tab{
  -moz-appearance: none !important;
  background-image: -moz-linear-gradient(top, rgb(250, 251, 253), rgb(168, 169, 171)) !important;
}
.tabbrowser-tab:not([selected]){
  opacity:.5;
}

parlament1 · №5

да ,действительно !

1й код придает двух цветность также - только и активной тоже(этого не надо) - нужно только неактивным

2й - придает прозрачность - но всей кнопке и тексту и иконке(а этого тоже не надо) - нужно только кнопке

так что пока остается лучшим такой вид

Отредактировано parlament1 (06-03-2011 23:33:30)

parlament1 · №6

shumomer
я немного исправил код

Выделить код

Код:

.tabbrowser-tab:not([selected]){
  -moz-appearance: none !important;
  background-image: -moz-linear-gradient(top, rgb(250, 251, 253), rgb(168, 169, 171)) !important;
}


.tabbrowser-tab:not([selected]){
  opacity:.5;
}

может его можно совместить раз он сейчс только для неактивных вкладок
но вид стал похожий

как только написать что бы он не трогал шрифт,иконку и границу кнопки,
как у активной?

раз так пока сыро смотрится исправил пока opacity:.5; на opacity:.8;

вот пока как это смотрится
http://s004.radikal.ru/i206/1103/37/b456bbc8e55c.jpg

Отредактировано parlament1 (07-03-2011 02:56:12)

shumomer · №7

parlament1 пишет

как только написать что бы он не трогал шрифт,иконку и границу кнопки,как у активной?

Выделить код

Код:

.tabbrowser-tab:not([selected]){
  -moz-appearance: none !important;
  background-image: -moz-linear-gradient(top, rgba(250, 251, 253, 0.5), rgba(168, 169, 171, 0.5)) !important;
}

Второй класс вообще убрать

Отредактировано shumomer (07-03-2011 12:08:10)

parlament1 · №8

я поставил этот

Выделить код

Код:

.tabbrowser-tab:not([selected]){
  -moz-appearance: none !important;
  background-image: -moz-linear-gradient(top, rgba(250, 251, 253, 0.8), rgba(168, 169, 171, 0.8)) !important;
}

намного лучше работает - предыдущий убрал полностью
изменил только одну цифру-

но уже двухцветность т о что нужно, и шрифт и иконки и рамка кнопки остались преждими

как дополнить код и вписть в него ,что бы это правило действовало еще и на кнопку открытия новых вкладок( с плюсиком + )?

может кто знает как она называется ?

Отредактировано parlament1 (07-03-2011 16:32:48)

bunda1 · №9

parlament1 пишет

как дополнить код и вписть в него ,что бы это правило действовало еще и на кнопку открытия новых вкладок( с плюсиком + )?
[/b]

.tabs-newtab-button,
.tabbrowser-tab:not([selected]){
-moz-appearance: none !important;
background-image: -moz-linear-gradient(top, rgba(250, 251, 253, 0.8), rgba(168, 169, 171, 0.8)) !important;
}

parlament1 · №10

bunda1

спасибо!
для себя выбрал такие значения
.tabs-newtab-button,
.tabbrowser-tab:not([selected]){
-moz-appearance: none !important;
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(132, 147, 165, 0.8)) !important;
}

кнопочка тоже стала как вкладки -красивее!

вот только я заметил у неактивных вкладок и этой кнопки пропала функция отзываться на стрелочку мыши- т.е. они перестали немного светлеть .

что то блокирует в этом правиле эту функцию,либо в правиле для поведения этих кнопок надо дописывать то что они сейчас изменили цвет .,но с измененным цветом хотят как и раньше при наведении мышки на них немного светлеть

Отредактировано parlament1 (07-03-2011 23:24:47)

shumomer · №11

Дописывать надо.

bunda1 · №12

parlament1 пишет

bunda1
что то блокирует в этом правиле эту функцию,либо в правиле для поведения этих кнопок надо дописывать то что они сейчас изменили цвет .,но с измененным цветом хотят как и раньше при наведении мышки на них немного светлеть

А если так?

скрытый текст

Выделить код

Код:

#TabsToolbar > .toolbarbutton-1 {
  -moz-transition: .2s background-color !important;
  -moz-appearance: none !important;
  margin: 1px 0 0 1px !important;
  background: -moz-linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.5)) !important;
  background-color: transparent !important;
  background-clip: padding-box !important;
  padding: 0 3px 0 3px !important;
  -moz-border-image: none !important;
  border: 2px solid !important;
  border-bottom: 0 !important;
  -moz-border-left-colors: rgba(0,0,0,.30) rgba(255,255,255,.45) !important;
  -moz-border-top-colors: rgba(0,0,0,.30) rgba(255,255,255,.45) !important;
  -moz-border-right-colors: rgba(0,0,0,.30) rgba(255,255,255,.45) !important;
  border-radius: 2.5px 2.5px 0 0 !important;
}

.tabbrowser-tab {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -moz-border-image: none !important;
}



.tabbrowser-tab[pinned="true"]{
  padding-left: 1px !important;
}

.tabbrowser-tab[pinned="true"] .tab-stack {
  margin-top: 1px !important;
  box-shadow: none !important;
}

.tabbrowser-tab:not([selected="true"]) .tab-text {
  text-shadow: 0 1px rgba(255,255,255,.5) !important;
}

.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) .tab-stack {
  background: -moz-radial-gradient(50%, rgba(255,255,255,.5), rgba(255,255,255,0)),
 -moz-linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,0)) 0 0 border-box  !important;
  background-color: #FF8426 !important;
}

.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):hover .tab-stack {
  background-color: #4CA7FF !important;
}

#TabsToolbar > .toolbarbutton-1:hover {
  background: -moz-linear-gradient(top, rgba(250, 251, 253, 0.8), rgba(168, 169, 171, 0.8)) padding-box !important;
  background-color: rgba(255,255,255,.1) !important;
  background-clip: padding-box !important;
}

#tabbrowser-tabs {
  min-height: 23px !important;
}

.tabbrowser-tab .tab-stack,
.tabs-newtab-button {
  -moz-transition: .2s background-color !important;
  height: 22px !important;
  max-height: 22px !important;
  background: -moz-linear-gradient(top, rgba(250, 251, 253, 0.8), rgba(168, 169, 171, 0.8)) !important;
  background-clip: padding-box !important;
  background-color: transparent !important;
  padding: 0 2px 0 2px !important;
  -moz-border-image: none !important;
  border-radius: 2.5px 2.5px 0 0 !important;
  border: 2px solid !important;
  border-bottom: 0 !important;
  -moz-border-left-colors: rgba(0,0,0,.30) rgba(255,255,255,.45) !important;
  -moz-border-top-colors: rgba(0,0,0,.30) rgba(255,255,255,.45) !important;
  -moz-border-right-colors: rgba(0,0,0,.30) rgba(255,255,255,.45) !important;
}

.tabbrowser-tab:not([pinned="true"]),
.tabs-newtab-button {
  margin-left: 1px !important;
  margin-top: 1px !important;
}

.tabs-newtab-button {
  width: 28px !important;
}
.tabbrowser-tab[selected="true"] .tab-stack {
  -moz-transition: none !important;
  height: 23px !important;
  max-height: 23px !important;
  box-shadow: 0 0 1px 0 rgba(0,0,0,.20) !important;
  background-image: none !important;
  background-color: #FAFCFD !important;
  background-clip: padding-box !important;
  border: 1px solid rgba(0,0,0,.30) !important;
  border-bottom: 0 !important;
  margin-bottom: -1px !important;
  padding: 0 3px 0 3px !important;
}

.tabbrowser-tab:not([selected="true"]):hover .tab-stack,
.tabs-newtab-button:hover {
  background: -moz-linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.70)) !important;
  background-color: rgba(255,255,255,.1) !important;
  background-clip: padding-box !important;
}

parlament1 · №13

если оставить старый код и добавить этот новый огромный-
неактивные табы при наведении мышкой меняют цвет
на свой изначальный

если только оставить огромный новый код
неактивные табы при наведении мышкой становятся прозрачными

но во всех случаях у меня по крайней мере они стали узкие как в старых бета версиях
и растояние между ними увеличилось
пропала полоска разделяющая табы от страницы просмотра
и открытый таб стал белым
щас посижу подумаю поэкспериментирую как оставить все как прежде и добавить функцию только светлеть при наведении мышкой
пока вот как они выглядят с новым кодом

=Agasfer= · №14

parlament1 пишет

добавить функцию только светлеть при наведении мышкой

Есть вот такой код. Может из него что-то извлечь можно настроив цветовую гамму

Выделить код

Код:

.tabbrowser-tab[selected="true"]{
  background-color: #0011F1 !important;
  color: #1601D8!important;
}
.tabbrowser-tab[selected="true"]:hover{
  background-color: #0011F1 !important;
  color: #1601D8 !important;
}
.tabbrowser-tab:not([selected]){
  -moz-appearance: none !important;
  background-image: -moz-linear-gradient(top, rgba(250, 251, 253, 0.8), rgba(168, 169, 171, 0.8)) !important;
}

bunda1 · №15

.tabbrowser-tab:not([selected="true"]):hover,
.tabs-newtab-button:hover {
-moz-appearance: none !important;
background: transparent !important;
}

.tabs-newtab-button,
.tabbrowser-tab:not([selected]){
-moz-appearance: none !important;
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(132, 147, 165, 0.8)) !important;
}

Гангстер · №16

Вот попробовал стиль написать, приближенный к ie 9.

Выделить код

Код:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.tabbrowser-tab
{
margin-right:-1px !important;
}
.tabbrowser-tab, .tabs-newtab-button
{
background:#fff !important;
-moz-border-radius: 0px !important;
-moz-border-image:none !important;
border:1px inset rgba(0,0,0,.3)!important;
border-bottom:none !important;
}
.tabs-newtab-button, .tabbrowser-tab:not([selected="true"])
{
background: -moz-linear-gradient(
    center bottom,
    rgba(100,100,100,.45) 0%,
    rgba(255,255,255,.95) 100%
) !important;
}
.tabs-newtab-button:hover, .tabbrowser-tab:not([selected="true"]):hover 
{
background: -moz-linear-gradient(
    center bottom,
    rgba(200,200,200,.8) 0%,
    rgba(255,255,255,.9) 100%
) !important;
}

parlament1 · №17

.tabs-newtab-button,
.tabbrowser-tab:not([selected]){

background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(132, 147, 165, 0.8)) !important;
}

.tabbrowser-tab:not([selected]):hover,
.tabs-newtab-button:hover {
background: -moz-linear-gradient(top, rgba(132, 147, 165, 0.8), rgba(255, 255, 255, 0.8)) !important;
background-clip: padding-box !important;
}

покачто оствил только этот
специально цветовую гамму сделал наоборот что бы видно было что появляется внутри кнопки нужная область и границы кнопки не теряются в отличие от других кодов
остается самое трудное заставить эту область внутри кнопки заполнить ее ,но при этом что бы не исчезала нижняя граница кнопки

parlament1 · №18

Гангстер
спасибо код хороший но немного неправильный

зато обработав все данные и потратив сутки на всю эту информацию - подобрал код!!!!!!!
Цвета остались Гангстера(кроме этого rgba(200,200,200,.8) 0%,
rgba(255,255,255,.95) 100%0 - другие еще не подбирал
но кнопки уже правильно работают - цвета меняются и табы еще регулируются по высоте
-----------------------------------------------------------
}
.tabbrowser-tab
{
margin-right:-1px !important;
}
.tabbrowser-tab, .tabs-newtab-button
{
background:#fff !important;
-moz-border-radius: 0px !important;
-moz-border-image: none !important;
border: 1px solid rgba(0,0,0,.50) !important;
}
.tabs-newtab-button, .tabbrowser-tab:not([selected="true"])
{
background: -moz-linear-gradient(
center bottom,
rgba(100,100,100,.45) 0%,
rgba(255,255,255,.95) 100%
) !important;
}
.tabs-newtab-button:hover, .tabbrowser-tab:not([selected="true"]):hover
{
background: -moz-linear-gradient(
center bottom,
rgba(200,200,200,.8) 0%,
rgba(255,255,255,.95) 100%
) !important;
}
.tabbrowser-tab .tab-stack,
.tabs-newtab-button {

height: 25px !important;
max-height: 25px !important;
}
.tabbrowser-tab .tab-stack,.tabs-newtab-button
{
{border: 1px solid rgba(0,0,0,.50) !important;
}

------------------------------------------------------
вот он красавчег
http://s54.radikal.ru/i144/1103/f8/b99f0d91b345.jpg

самое интересное внизу две повторяющиеся скобки .tabbrowser-tab .tab-stack,.tabs-newtab-button
{
{border: 1px solid rgba(0,0,0,.50) !important;
}

но если одну-вроде лишнюю убрать этот параметр работать правильно не будет! и как это объяснить- не знаю...

следущий этап- светящиеся красные крестики на кнопках может чуть больше но обязательно что бы правильно работали - не так как по умолчанию, а так как надо!

Отредактировано parlament1 (08-03-2011 19:31:21)

bunda1 · №19

IE 9 themes and skins - userstyles.org
http://userstyles.org/styles/browse/app … ction=desc

bunda1 · №20

parlament1 пишет

[b]
самое интересное внизу две повторяющиеся скобки .tabbrowser-tab .tab-stack,.tabs-newtab-button
{
{border: 1px solid rgba(0,0,0,.50) !important;
}
но если одну-вроде лишнюю убрать этот параметр работать правильно не будет! и как это объяснить- не знаю...

удали все

Выделить код

Код:

.tabbrowser-tab .tab-stack,.tabs-newtab-button 
{{border: 1px solid rgba(0,0,0,.50) !important;
}

IE 9 themes and skins - userstyles.org
http://userstyles.org/styles/browse/app … ction=desc

parlament1 · №21

bunda1 пишет

parlament1 пишет
[b]
самое интересное внизу две повторяющиеся скобки .tabbrowser-tab .tab-stack,.tabs-newtab-button
{
{border: 1px solid rgba(0,0,0,.50) !important;
}
но если одну-вроде лишнюю убрать этот параметр работать правильно не будет! и как это объяснить- не знаю...
удали все
Выделить код
Код:
.tabbrowser-tab .tab-stack,.tabs-newtab-button 
{{border: 1px solid rgba(0,0,0,.50) !important;
}
IE 9 themes and skins - userstyles.org
http://userstyles.org/styles/browse/app … ction=desc

если эту строчку (не правильную) убрать- кнопки будут выглядеть хуже.
Т.е. она очень нужна с одним нюансом- дополнительные коды что бы они работали нужно добавлять до нее.
А туда где расширения для Stylish я сходил- посмотрел- они все старые...
одно только более менее для винды 7, но тоже на любителя- из него я взял 3фичи- скрытие значка оранжевого , уменьшения места между вкладками и строкой адреса и между строкой адреса и верхней полоской.Взял еще чтобы исчезли контуры кнопок.

на мой взгляд у меня лучше ... Хотя цветность владок активных неактивных еще не подбирал
пок что имею вот такой вид

Отредактировано parlament1 (09-03-2011 15:35:34)

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