Настройка внешнего вида Firefox в userChrome.css

Vitaliy V. · №2351

Nerazzurro пишет

убрать вращающийся кружок во вкладке при загрузке страниц.

При загрузке

Код:

.tab-throbber[progress] {
    list-style-image: none !important;
}

И при соединении с сервером

Выделить код

Код:

.tab-throbber[busy]:not([progress]) {
    list-style-image: none !important;
}

Отредактировано Vitaliy V. (17-09-2015 14:50:45)

jars · №2352

Nerazzurro
да-да эта штука подлая в Мазилке. Уже давно его убрал ибо бывало что изза него проц жрет. заменил на статичную картинку себе:

Выделить код

Код:

/* иконка загружающейся вкладки */
.tab-throbber, .tab-throbber[progress] {
    -moz-appearance: none !important;
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAC/UlEQVRIib2UT2gjVRzHP+9N4iRsCsk2xSD4Zwv2ICzk4MGT7R6cgz3IdhEWEdy9eFZED4IH6aFUWLz0qFi8pEsP3UMRKUKtHnrZ4h4spiKpW1kC2VrHJE0mM3nv56FJNt02a1y6Pvjy4/fe730/85v3ZhRDjDfnbstz2QQCIFC8V+ebT19Rw+yNDVN0PhXn6uSzvfzjxe1htg0PqDbbFO+3ennYNmcLqDXblPaDXh5FZwxoBRF/+s1e3g7bZwxohhz89QBgwmhowKk34eJbK1ophdIKwEmcS4TZXLq3fm+3ghiTEpGWiLhi5emfl66UTvPSp02KMV+KtUZpbbTjhMZY6odhT0qBcpy6dpzItk1djP3kP3UA8NKVm18lMyPXnHh8UAlR0CLw64u/rFy9Pqhm4BmYtnn/8L6fj59L5rU+2aiJIsLD4PtfV98eaA6P6ADgxde/TovIuhOP51VfpVjBhNEdlLr027fv+I8NABh/7Ys01qyLmPzRDgXCHaWdS6Xv3n2kOYBaXl6WIAjQWqOU6imZTLK0tHShUCj8/vyrN9I2aqy3W34+lsj42nEv3P3xQx9gYWHhp2w2mxcR+mWtxXVdYvv7+6ytreE4DlrrnkZHR/E87/NCoXD57g8f+M+8/NF1MCsmrF7+4/ZnPsDMzMxUJpPJr66uIiIYY7DWYq3FGIPneaj5+XnZ2NjAcZxjEKUUExMTaK0XZ2dnTxzk9PT0lOd5K1tbW+lms9l76q65tZbJyUlitVqNMAxPdKCUYnt7m/Hx8Wtzc3NTBwcHt0ql0t8jIyPkcrk3UqlUfnNzkyAIjpn3Q6rV6gNAv3k/pFgssrOz80Imk3lvbGyMMAzZ3d2lXq+feOcPq1arESuXy+zt7R074K6OLs3xXEQGxoeVy+WIVSoVyuXyv922xxqVSgXdaDSeiDlAo9FAua4rT4zA0ZesAAd4CogDLpDoxK7iHWlAAANEQAi0gKATu4o6sv2/CtUx6AJ1X+yudYd0ZDuw/tid/3/GP3GNpryAHeymAAAAAElFTkSuQmCC") !important;
    }

Vitaliy V. · №2353

Если говорить про замену картинками, то их нужно как минимум две

Выделить код

Код:

@media (resolution: 1dppx) {
.tab-throbber[busy] {
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB98CBBAcJWtL6gcAAAIoSURBVDjLnZNBSFRRFIb/8+579z1HjdCahS2UQplFbme2QRDoIjfRohYitLOghUWbVhERBLURIQgSwrbpYlpE+3RRkIsmTVAJknQ08r037955554WoViMBn1w4Idz73/vgf8Q/qLnmZQkw32Ocdaku30AoHRU89uDqu7A9NdrVDt4ngCg+ET095tke6ZktplguJk2fLAFMwOkoDxAKIAuFHK/DdVvN2jk5CPRmxNkac+p+Fjm8zgrN00qe8YtEK01BYWOhY0Jquz/oPuhzLK1F9nE4qlAlB/YVrddbjQzUxAWCMDc9t22ETp+z1xSSr208baC0gLAw9E4CFMQFphNMugppa6yiX14igBY/BsLgJrW+CpsH/VE3Gl2vzu9XUFk6usw9XX0dgU4REcHzIZ9tlkJwgCApeUVmMlBAEA4vnioDrtOAcLgvFnynE3wvzibgAq31j+rsH0AAHq7IywtrwAABvrPHKrX6hngGHn64yNF1xcf+J3FO6R8gFQGIDryWeEMQCS5ATftO49tY5rT7RykBMIawjiygAikJI/rua2vjnnNp+Va3titcrpDIEXixAnnWcty4kBKON0hu7tV5efnavuRVaNv58Nif1lFxwTCraNMSvKkTo2NpQXMDFWwn7orrzVPn6+ka+/nzOYXZpNAOD8wdg42CbKNT9xY+zCHmaEKLr/SaLk0F6ZKONF324s6x0hpJ44Btj+diV9ga3USb8b/WOdfHv5GEt1AvEsAAAAASUVORK5CYII=") !important;
}

.tab-throbber[progress] {
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB98CBBAhDq0fW/kAAAJiSURBVDjLbZPNatNBFMV/986/abEW0ZXupKCGVotWbFofwYWCqAtd+A6u+gLufYEK2SgIVRrRN5CSYrup2ChaFUEKCSqmH8k/M/e6yIdRPDAMXGbOOXMOI/yDyz8vF23P7qdmOpv200kALWgtTISXOqHl1WOrteHzClD6UioALOwsrHQanc1Oo3M97aVTnjy4eWZtm+n86CzGRtyc/zq/AjD3Ya4AIH2m0qdSNTbjnLUsiUpEwM3/yDiCkWlBNYyHtbVTa6UBwaV3l1Yst6t2YC6ZpCAhurjQve+AOI6b48lHdEwVqKzPrF+Ti5sXb4jK47SbAhmpRyqAbsxuADC7MWuCRO8yBhKqY5q85edUVO5Yy7JuGsThZw1n5XgGKE5CcMstkzG5qziT7t63qkMO/kImmWhXxQHr7VfUcivS9dZf/I8gehy01ktGPHpRvT1Q70PKxTKr518NBq8vvGbp9JIYpsMC3nbUOvYZ7xXVw7PGM1Z/VYkeMTeqzSrL9eVhQ4JBOki1zPbtqRRkUYIEnAjwovGCeruOuTEaRinvlHmz9wYcw7sNeXLI2Jfp59PFMBY2w9EQMAwIgAeCTI1Poaq833vPgR30wxMUiY2YUjOdE4DpyvRKdiS7quPqnjxig6T7hqXXUZAgarumeT2vbN3cujZIe+rJVHXk+MicHtLUc+IIYZC5Iyik3RTyb/la7XatNKil+KhYeHvrbam13ark33Ozto24eQEn4ARPnlnbQl7PvfWxVandrpXOlM8U/tv35IPJ4uiJ0bt6WBclEwPw3BupmR7mO3l5+972X9/5N5xcQ4MgHUVlAAAAAElFTkSuQmCC") !important;
}
}

Плюс ещё для

Выделить код

Код:

@media (min-resolution: 1.1dppx) {код с крупными иконками 32x32}

Отредактировано Vitaliy V. (17-09-2015 15:48:14)

Kiril__777 · №2354

А на мой вопрос кто-нибудь знает ответ?

fokanik · №2355

Vitaliy V. пишет

Если говорить про замену картинками, то их нужно как минимум две

Выделить код

Код:

/* Цвет и стиль текста на вкладке во время загрузки страницы */
tab[busy] {color:Red !important; font-weight:bold !important;}
.tab-throbber[busy] {list-style-image: none !important;}
.tab-throbber, .tab-throbber[busy]  {-moz-appearance: none !important;
    list-style-image: url("icons\\upload.ico") !important;}
tab[progress] {color:Green !important; font-weight:bold !important;}
.tab-throbber[progress] {list-style-image: none !important;}
.tab-throbber, .tab-throbber[progress] {-moz-appearance: none !important;
    list-style-image: url("icons\\download.ico") !important;}

Подскажите, почему в firefox все работает, а в seamonkey иконки не отображаются (иконки в папке, размер 16х16)? И еще текст на вкладке после загрузки страницы не меняется, остается зеленым постоянно

Отредактировано fokanik (17-09-2015 16:03:54)

Vitaliy V. · №2356

Kiril__777
А стиль какой используете? И ещё Tab Utilities установлен? Из-за него такое может быть

jars · №2357

Vitaliy V. пишет

про замену картинками, то их нужно как минимум две

а, не нужно У мя PaleMoon и переделанно почти все, все шрифты везде и цвета. Подсвечивают "бузи" цветом шрифта. Так удобнее и менее накладно:

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

Выделить код

Код:

/* текст вкладок сделать жирным */
.tabbrowser-tab {
    color: #000 !important;
    font-weight: bold !important;
    font-family: "Helvetica Neue", Tahoma, "Liberation Sans" !important;
    text-shadow: 1px 1px 2px silver !important;
    }

/* Цвет активной вкладки */
.tabbrowser-tab[selected="true"] {
    -moz-appearance: none !important;
    color: black !important;
    background: -moz-linear-gradient(gold,khaki 20%,#A8A800) !important;
    text-shadow: 2px 2px 2px #F4F400 !important;
    }

/* Цвет вкладок во время загрузки страницы */
.tabbrowser-tab[busy],
.tabbrowser-tab[busy][unread="true"] {
    color: yellow !important;
    text-shadow: 1px 1px 2px black !important;
    }

/* Цвет текста не прочитанной вкладки */
.tabbrowser-tab[unread="true"] {
    color: #0000DD !important;
    text-shadow: 1px 1px 2px #9BCDFF; 
    }

fokanik пишет

текст на вкладке после загрузки страницы не меняется, остается зеленым постоянно

попробуй поставить цвет для вкладок в "спокойном состоянии", а то все пеереопределил кроме ...

Выделить код

Код:

.tabbrowser-tab {
    color: #000 !important;
}

Vitaliy V. · №2358

fokanik пишет

в seamonkey иконки не отображаются (иконки в папке, размер 16х16)? И еще текст на вкладке после загрузки страницы не меняется

Там так можно сделать

Выделить код

Код:

.tabbrowser-tab[busy] {
    list-style-image: url("иконка 16x16") !important;
    color: red !important;
}

Добавлено 17-09-2015 16:33:36

jars пишет

Подсвечивают "бузи" цветом шрифта

Речь про то как должно быть в браузере, а не как вы сделали себе. У меня тоже подсвечивает цветом шрифта, но иконки две.

Отредактировано Vitaliy V. (17-09-2015 16:33:36)

Kiril__777 · №2359

Vitaliy V. Tab Utilities нету, я понял в чем дело, спасибо.

jars · №2360

Vitaliy V.
Уже больше года как сделал и ни разу еще не заметил отсутствие иконки на вкладке. Может и нужно, но у мя ни разу не понадобилось. Там жеж указано заменять и в состоянии "загрузки" .tab-throbber[progress]
и в целом этот "троблер"(хз. как его назвать) .tab-throbber
Может и правильней будет два, для разных ОСей(или еще чего), не спорю. для себялюбимого и так работет.

off

зы.вообще не понимаю что значит "бузи" состояние.

iBobik · №2361

Vitaliy V.

Да, при extensions.adblockplus.defaulttoolbaraction - 0 - всё нормально с кнопкой. И стиль отлично смотрится.
Но у меня установлено в значение - 1 т.е при нажатии ЛКМ открывается список элементов на странице, и вот при таком параметре (и скрытом дропмаркера, граница у кнопки с правой стороны отсутствует). Можно с этим что-то сделать?

дропмаркер скрыт так:

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

#abp-toolbarbutton > dropmarker {
display: none !important;
}

Vitaliy V. · №2362

jars пишет

вообще не понимаю что значит "бузи" состояние

А у вас типа такого не было разве - превышено время ожидания соединения с сервером
А с одной иконкой особенно если вкладка закреплена, непонятно - грузится страница или нет соединения.

Отредактировано Vitaliy V. (17-09-2015 16:58:20)

fokanik · №2363

Глючило вроде из-за list-style-image: none !important; , да пофиг уже.

Vitaliy V., jars - спасибо.

Vitaliy V. · №2364

iBobik
Добавьте ещё это (цвет бордюра при наведении, нажатии)

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

Выделить код

Код:

#nav-bar #abp-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
     -moz-border-end: 1px solid transparent !important;
}

#nav-bar #abp-toolbarbutton > .toolbarbutton-menubutton-button:not([disabled="true"]):not([open]):not(:active):hover > .toolbarbutton-icon  {
    -moz-border-end-color: hsla(210,54%,20%,.4) !important;
}

#nav-bar #abp-toolbarbutton > .toolbarbutton-menubutton-button:not([disabled="true"]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon {
    -moz-border-end-color: hsla(210,4%,10%,.1) !important;
}

Цвета только подберите если нужно

Отредактировано Vitaliy V. (17-09-2015 17:35:04)

iBobik · №2365

Vitaliy V.
Всё получилось, спасибо!

jars · №2366

Vitaliy V.
Насчет обрыва соединения, это упоротость(упертость) самих разрабов Мозиллы(да всех похоже, и Оперы тоже). Нафига они ставят по-умолчанию 16 соединений с каждым сервером яхз. Сервы могут за бота принять и сбросить, было такое, давненько правда. Сразу ставлю 4, макс. 6 и норм. Почти никогда не бывает, ооочень редко. Да и пользуюсь я бравзером совсем не так. ~25вкладок остальное закладки|temp, форумы в RSS, ютубу смотрю в плеере, в PaleMoon панель вкадок шшикарная... :cool:
а "закрепленные"... да так норм. Главное что я не вижу этого анимированного , "стандартного троблера зеленого". Именно изза него были тормоза. Может уже и и справили, но уже привык к статичной иконе.
Но если надо - знач надо. Будем знать

fokanik · №2367

jars пишет

попробуй поставить цвет для вкладок в "спокойном состоянии", а то все пеереопределил кроме ...
скрытый текст
.tabbrowser-tab {
color: #000 !important;
}

И без этого работает, ляпота просто , анимация:

Только вот я не знаю, эта крутящаяся штука на вкладке - точно отключилась? Или, может, она еще на втором плане где-то вращается?

Выделить код

Код:

/* Внешний вид вкладок */
//.tab-throbber[busy] {list-style-image: none !important;}
tab[busy] {color:Red !important; font-weight:bold !important;} 
.tab-throbber, .tab-throbber[busy] {-moz-appearance: none !important; list-style-image: url("icons\\upload.ico") !important;}
//.tab-throbber[progress] {list-style-image: none !important;}
tab[progress] {color:Green !important; font-weight:bold !important;} 
.tab-throbber, .tab-throbber[progress] {-moz-appearance: none !important; list-style-image: url("icons\\download.ico") !important;}

Отредактировано fokanik (17-09-2015 20:47:55)

Vitaliy V. · №2368

fokanik пишет

Только вот я не знаю, эта крутящаяся штука на вкладке - точно отключилась?

Точно, это всего лишь APNG, т. е. анимационная картинка - заменить картинку значит заменить и анимацию

Только у вас много лишнего, вот так лучше сделать:

Выделить код

Код:

/* Внешний вид вкладок */
tab[busy] {color: Red !important; font-weight: bold !important;} 
.tab-throbber[busy] {list-style-image: url("иконка") !important;}
tab[progress] {color: Green !important; font-weight: bold !important;} 
.tab-throbber[progress] {list-style-image: url("Иконка") !important;}

fokanik · №2369

Vitaliy V., спасибо, сохранился.

iBobik · №2370

Подскажите, можно ли сделать:

1. Цвет текста для неактивной вкладки c Истекшим соединением и Сервер не найден?

Использую такой (и данная вкладка, в конечном итоге - остается зеленой):

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

/* Цвет неактивной вкладки (при соединении) */
tab[busy]
color: red !important;

/* Цвет неактивной вкладки (при загрузке) */
tab[progress]
{color: green !important;}

/* Цвет неактивной вкладки (загруженной) */
tab
color: silver !important;

2. Цвет текста выбранной вкладки - при загрузке?

Для выбранной, полностью загруженной, использую такой:

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

/* Цвет текста активной вкладки (загруженной) */
tab[selected="true"]
color: yellow !important;
font-weight: bold !important;

3. Цвет текста выбранной вкладки - при соединении?

Отредактировано iBobik (18-09-2015 14:07:59)

Vitaliy V. · №2371

iBobik пишет

Подскажите, можно ли сделать:

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

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

Выделить код

Код:

/* Цвет неактивной вкладки (обычной) */
.tabbrowser-tab:not([selected="true"]) {
    color: silver !important;
}
/* Цвет неактивной вкладки (при соединении) */
.tabbrowser-tab[busy]:not([selected="true"]) {
    color: red !important;
}
/* Цвет неактивной вкладки (при загрузке) */
.tabbrowser-tab[progress]:not([selected="true"]) {
    color: green !important;
}  
/* Цвет неактивной вкладки (не прочитанной) */
.tabbrowser-tab[unread="true"]:not([busy]):not([progress]):not([selected="true"]) {
    color: blue !important;
} 
/* Цвет неактивной вкладки (ошибки соединения) */
.tabbrowser-tab[image^="chrome://global/skin/icons/warning-"]:not([busy]):not([selected="true"]) {
    color: darkkhaki !important;
}
/* Незагруженные вкладки */
.tabbrowser-tab[pending] {
    opacity: .7 !important;
}

Vitaliy V. · №2372

iBobik пишет

Цвет текста выбранной вкладки

Невнимательно прочёл и сделал всё для неактивных.
Ну можете сами заменить :not([selected="true"]) на [selected="true"]

Отредактировано Vitaliy V. (18-09-2015 17:46:45)

iBobik · №2373

Vitaliy V.
Н-да, вот я запутался...
У меня же еще имеется и стиль при наведении (hover)
А учитывая что старый и новый - смешались, так вообще, черт ногу сломит...

Вообщем разложу по полочкам, нужен стиль с нуля:

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

/* Вкладки при соединении */
Активная - красный, жирный
Фоновые - красный
---------------------------------------------------------
/* Вкладки при загрузке */
Активная - зеленый, жирный
Фоновые - зеленый
---------------------------------------------------------
/* Вкладки полностью загруженные */
Активная - жёлтый, жирный + тень (shadow)
Фоновые - серебристый
Фоновые (при наведении) - жёлтый
---------------------------------------------------------
/* Вкладки при Ошибках соединения */
Фоновые - бордовый, жирный

Vitaliy V. · №2374

iBobik
Так жёлтый или оранжевый, сделал жёлтый. Порядок строк только не меняйте

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

Выделить код

Код:

/* Цвет активной вкладки (обычной) */
.tabbrowser-tab[selected="true"]:not([busy]):not([progress]) {
    color: yellow !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 2px black !important;
}
/* Цвет неактивной вкладки (обычной) */
.tabbrowser-tab:not([selected="true"]) {
    color: grey !important;
}
/* Цвет неактивной вкладки (обычной при наведении) */
.tabbrowser-tab:not([selected="true"]):hover {
    color: yellow !important;
}
/* Цвет активной вкладки (при соединении) */
.tabbrowser-tab[busy][selected="true"] {
    color: red !important;
    font-weight: bold !important;
}
/* Цвет неактивной вкладки (при соединении) */
.tabbrowser-tab[busy]:not([selected="true"]) {
    color: red !important;
}
/* Цвет активной вкладки (при загрузке) */
.tabbrowser-tab[progress][selected="true"] {
    color: green !important;
    font-weight: bold !important;
}  
/* Цвет неактивной вкладки (при загрузке) */
.tabbrowser-tab[progress]:not([selected="true"]) {
    color: green !important;
} 
/* Цвет активной вкладки (ошибки соединения) */
.tabbrowser-tab[image^="chrome://global/skin/icons/warning-"]:not([busy])[selected="true"] {
    color: yellow !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 2px black !important;
}
/* Цвет неактивной вкладки (ошибки соединения) */
.tabbrowser-tab[image^="chrome://global/skin/icons/warning-"]:not([busy]):not([selected="true"]) {
    color: maroon !important;
}

iBobik · №2375

Vitaliy V.
Отличная работа, спасибо огромное! :cool:

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

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Board footer