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

Mozilla Россия — свежие версии программ Mozilla, а также масса полезной информации по каждому продукту.
  • Форумы
  •  » Firefox
  •  » Кнопки табов как в iE9 ,только кнопки

№105-03-2011 23:42:22

parlament1
Участник
 
Группа: Members
Зарегистрирован: 17-03-2009
Сообщений: 91
UA: Firefox 4.0

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

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

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

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

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



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

5a709d1a486c.jpg

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

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)


∎•★٩(̾●̮̮̃̾•̃̾)۶★•∎

Отсутствует

 

№206-03-2011 02:21:50

shumomer
Участник
 
Группа: Members
Откуда: из вашего воображения
Зарегистрирован: 25-02-2011
Сообщений: 380
UA: Firefox 4.0

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

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

Отсутствует

 

№306-03-2011 02:46:31

parlament1
Участник
 
Группа: Members
Зарегистрирован: 17-03-2009
Сообщений: 91
UA: Firefox 4.0

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

shumomer - шутник


∎•★٩(̾●̮̮̃̾•̃̾)۶★•∎

Отсутствует

 

№406-03-2011 05:24:37

shumomer
Участник
 
Группа: Members
Откуда: из вашего воображения
Зарегистрирован: 25-02-2011
Сообщений: 380
UA: Firefox 4.0

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

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

Выделить код

Код:

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

Отсутствует

 

№506-03-2011 22:34:53

parlament1
Участник
 
Группа: Members
Зарегистрирован: 17-03-2009
Сообщений: 91
UA: Firefox 4.0

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

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

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

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

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

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


∎•★٩(̾●̮̮̃̾•̃̾)۶★•∎

Отсутствует

 

№607-03-2011 02:41:17

parlament1
Участник
 
Группа: Members
Зарегистрирован: 17-03-2009
Сообщений: 91
UA: Firefox 4.0

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

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;
}

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

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

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

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

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


∎•★٩(̾●̮̮̃̾•̃̾)۶★•∎

Отсутствует

 

№707-03-2011 12:07:20

shumomer
Участник
 
Группа: Members
Откуда: из вашего воображения
Зарегистрирован: 25-02-2011
Сообщений: 380
UA: Firefox 4.0

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

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)

Отсутствует

 

№807-03-2011 12:52:01

parlament1
Участник
 
Группа: Members
Зарегистрирован: 17-03-2009
Сообщений: 91
UA: Firefox 4.0

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

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

Выделить код

Код:

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

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

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

91f12ab68454.jpg


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

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

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


∎•★٩(̾●̮̮̃̾•̃̾)۶★•∎

Отсутствует

 

№907-03-2011 20:58:35

bunda1
Moderator
 
Группа: Moderators
Откуда: Латвия
Зарегистрирован: 09-02-2010
Сообщений: 4811
UA: Firefox 3.6

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

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;
}

Отсутствует

 

№1007-03-2011 21:40:01

parlament1
Участник
 
Группа: Members
Зарегистрирован: 17-03-2009
Сообщений: 91
UA: Firefox 4.0

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

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;
}

33f602f6c8cb.jpg

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

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

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

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


∎•★٩(̾●̮̮̃̾•̃̾)۶★•∎

Отсутствует

 

№1107-03-2011 22:55:37

shumomer
Участник
 
Группа: Members
Откуда: из вашего воображения
Зарегистрирован: 25-02-2011
Сообщений: 380
UA: Firefox 4.0

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

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

Отсутствует

 

№1207-03-2011 23:07:40

bunda1
Moderator
 
Группа: Moderators
Откуда: Латвия
Зарегистрирован: 09-02-2010
Сообщений: 4811
UA: Firefox 3.6

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

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;
}

Отсутствует

 

№1307-03-2011 23:45:00

parlament1
Участник
 
Группа: Members
Зарегистрирован: 17-03-2009
Сообщений: 91
UA: Firefox 4.0

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

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

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

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


∎•★٩(̾●̮̮̃̾•̃̾)۶★•∎

Отсутствует

 

№1407-03-2011 23:52:45

=Agasfer=
linux user #526929
 
Группа: Extensions
Откуда: /home
Зарегистрирован: 06-11-2008
Сообщений: 6578
UA: Firefox 4.0

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

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;
}

Arch Linux & xmonad

Отсутствует

 

№1508-03-2011 00:07:10

bunda1
Moderator
 
Группа: Moderators
Откуда: Латвия
Зарегистрирован: 09-02-2010
Сообщений: 4811
UA: Firefox 3.6

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

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

Отсутствует

 

№1608-03-2011 01:17:01

Гангстер
Участник
 
Группа: Members
Зарегистрирован: 04-07-2009
Сообщений: 42
UA: Firefox 4.0

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

Вот попробовал стиль написать, приближенный к 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;
}

Отсутствует

 

№1708-03-2011 08:12:04

parlament1
Участник
 
Группа: Members
Зарегистрирован: 17-03-2009
Сообщений: 91
UA: Firefox 4.0

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

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

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


∎•★٩(̾●̮̮̃̾•̃̾)۶★•∎

Отсутствует

 

№1808-03-2011 17:03:11

parlament1
Участник
 
Группа: Members
Зарегистрирован: 17-03-2009
Сообщений: 91
UA: Firefox 4.0

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

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

зато обработав все данные и потратив сутки на всю эту информацию - подобрал код!!!!!!!
Цвета остались Гангстера(кроме этого    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;
}

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

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

cc48a6d5a151.jpg

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


∎•★٩(̾●̮̮̃̾•̃̾)۶★•∎

Отсутствует

 

№1908-03-2011 18:48:45

bunda1
Moderator
 
Группа: Moderators
Откуда: Латвия
Зарегистрирован: 09-02-2010
Сообщений: 4811
UA: Firefox 3.6

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

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

Отсутствует

 

№2008-03-2011 20:09:04

bunda1
Moderator
 
Группа: Moderators
Откуда: Латвия
Зарегистрирован: 09-02-2010
Сообщений: 4811
UA: Firefox 3.6

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

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

Отсутствует

 

№2109-03-2011 10:49:19

parlament1
Участник
 
Группа: Members
Зарегистрирован: 17-03-2009
Сообщений: 91
UA: Firefox 4.0

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

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фичи- скрытие значка оранжевого , уменьшения места между вкладками и строкой адреса и между строкой адреса и верхней полоской.Взял еще чтобы исчезли  контуры кнопок.

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

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


∎•★٩(̾●̮̮̃̾•̃̾)۶★•∎

Отсутствует

 
  • Форумы
  •  » Firefox
  •  » Кнопки табов как в iE9 ,только кнопки

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia GitHub mark
Язык отображения форума: [Русский] [English]