Приве.
Мне, как и многим, не нравятся отдельные элементы оформления в новом интерфейсе , который называется Australis.
Я не луддит и потому для меня надолго застрять на старой версии - не вариант.
Можно было бы уйти на другой Gecko-браузер, но боюсь, что пострадает совместимость с дополнениями.
Поэтому, я решил пока остаться на и по возможности переделать её интерфейс обратно в юзабельный.
Начну, пожалуй, со вкладок.
В Australis они:
- занимают адски много места из-за всех этих отступов;
- сделаны в виде накладывающихся друг на друга трапеций (со скруглёнными углами), вместо прямоугольников;
- неактивные вкладки не имеют рамок.
Вернуть вот такой вид вкладок (скриншот сделан с 29):
можно таким стилем:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* AGENT_SHEET */ /* Style name: Revert Australis for tab-bar Version: 3 Last updated: 2015.01.29 04:00 Author: Drugmix Contacts: http://userstyles.org/users/7993 https://forum.mozilla-russia.org/profile.php?id=48107 */ /* Hide close button: use middle click to close tabs */ .tab-close-button.close-icon { display: none !important; } /* Remove padding at left of the tab-bar */ .arrowscrollbox-scrollbox { padding: 0 !important; } /* Remove tab curves */ .tabbrowser-tab .tab-background-start, .tabbrowser-tab .tab-background-end, .tabbrowser-tab:before, /* hide tab separators */ .tabbrowser-tab[last-visible-tab]:after /* Hide another tab separator after the last visible tab */ { display: none !important; } .tab-background, .tab-background-middle, .tabs-newtab-button { background: none !important; } .tab-background, .tab-background-middle, .tabs-newtab-button { border: 0 !important; margin: 0 !important; } /* Apply background colors from Firefox 28 (before Australis) */ .tabbrowser-tab, .tabs-newtab-button { background-image: linear-gradient(to top, rgba(26, 26, 26, 0.4) 1px, transparent 1px), linear-gradient(transparent, rgba(114, 114, 114, 0.1) 1px, rgba(81, 81, 81, 0.2) 80%, rgba(0, 0, 0, 0.2)), linear-gradient(rgb(219, 234, 249), rgb(219, 234, 249)) !important; } .tabbrowser-tab:hover, .tabs-newtab-button:hover { background-image: linear-gradient(to top, rgba(26, 26, 26, 0.4) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.3) 1px, rgba(191, 191, 191, 0.2) 80%, rgba(153, 153, 153, 0.2)), linear-gradient(rgb(219, 234, 249), rgb(219, 234, 249)) !important; } .tabbrowser-tab[selected] { background-image: linear-gradient(rgb(255, 255, 255), rgba(255, 255, 255, 0.5) 50%), linear-gradient(rgb(219, 234, 249), rgb(219, 234, 249)) !important; } /* Adding borders to tabs */ .tabbrowser-tab, .tabs-newtab-button { background-position: 1px 2px !important; background-repeat: no-repeat !important; background-size: calc(-2px + 100%) calc(-2px + 100%) !important; } /* Adding borders as border-images to tabs */ .tabbrowser-tab, .tabs-newtab-button { border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAcCAYAAABh2p9gAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAPZJREFUSEutz0kKwlAQhGHjFRQED+BCtx5ANwq6EcnG2cR5NteM59BrxP4lD4IiglRDbar7ffBy8imWyp6lZulaBmlCS2AZZToXOnbcuI63GB5gvdf3h3F885MkaaRpW1qWZqZzoWPHzavjLQYWoH9/PDq2KFjymXjpJz6G3dttAQMLcGRF1fIV+DW8xcByYCXd/T0YDhwLwTHgRAhOAKdCcAo4E4IzwLkQnAMGQjAADIVgCLgQggvApRBcAq6E4ApwLQTXgBshuAHcCsEt4E4I7gD3QnAPeBCCB8CjEDwCnoTgCfAsBM+AFyF4AbwKwStgpAPL0RNseiOcDGPu5QAAAABJRU5ErkJggg==") 4 10 0 3 / 4px 10px 1px 3px stretch !important; } tab[unread] .tabbrowser-tab, tab[pending=true] .tabbrowser-tab { border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAcCAYAAABh2p9gAAAA8ElEQVR42mNkoDYQEZdiBGJtIPYG4kgoTgLiRCCORhIrS03PDCfGQJOAoJCoU6dOh/z//98Bit2B2A2IHWFiQHUJ+YXF7UDajJCBIU+fPfMCahIGYiYkzIimLh4opgakbUA+wmdgNFChFtQAfOriQAZC2e5ArIDPQDUigiYWrA7BDwJiCWwKY7AbSFgdNNL48NlMKGjUsIgnAzEbZtggAOGwxpTLwog9IJPs1ADCoHQKU5gAMpDM9OoKTbPOIH5EVEwnSGEikQayY8lRCdBcFQsTYwAJgA2kEEATfRITkE3NAoKRPgaOGjhq4KiBowYCAPn0tmTZdk9+AAAAAElFTkSuQmCC") 4 10 0 3 / 4px 10px 0px 3px stretch !important; } /* Make the active tab and navigational toolbar have the same color */ #nav-bar { box-shadow: none !important; background-image: linear-gradient(rgb(237, 245, 252), rgba(255, 255, 255, 0.1) 50%), linear-gradient(rgb(219, 234, 249), rgb(219, 234, 249)) !important; } /* Fix AppTabs' height */ #tabbrowser-tabs { min-height: 0 !important; } .tab-background { min-height: 26px !important; } /* */ /* Ergonomics */ /*____________*/ #TabsToolbar { margin: 0 !important; padding: 0 !important; background: none !important; } /* Decrease side padding in tabs */ .tab-content { padding: 0 6px !important; } /* Fix new tab button's width */ .tabs-newtab-button { width: 28px !important; }
[2015.01.29 04:00] UPDATE:
+ совместимость с TreeStyleTab.
И теперь займёмся навигационной панелью:
- в Australis она, опять-таки, занимает до неприличного много места из-за отступов;
- имеет дико большую высоту;
- т.к. от настройки "маленькие значки" решили отказаться, то теперь кнопка "назад" здоровая и круглая.
Все вышеперечисленные проблемы можно решить стилем:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* Style name: Revert Australis for nav-bar Version: 3 Last updated: 2014.08.27 17:10 Author: Drugmix Contacts: https://forum.mozilla-russia.org/viewtopic.php?pid=653208#p653208 http://userstyles.org/users/7993 https://forum.mozilla-russia.org/profile.php?id=48107 */ /* Set minimal height for navigation toolbar */ #nav-bar { min-height: 24px !important; } /* Make "back" button as small, as "forward" button is */ #back-button > .toolbarbutton-icon, #forward-button > .toolbarbutton-icon { border-radius: 0 !important; padding: 0 3px !important; } #back-button { -moz-image-region: rect(0px, 54px, 18px, 36px) !important; } /* Make left edge of adress bar the same as the right edge */ #urlbar { border: 1px solid rgba(23, 51, 78, 0.3) !important; border-radius: 2px !important; } /* #urlbar-wrapper. #forward-buttton and some dropmarker icons have negative left-margin */ #urlbar-wrapper { clip-path: none !important; -moz-margin-start: 0px !important; } #nav-bar-customization-target > toolbarbutton > dropmarker, #forward-button { margin-left: 0px !important; } /* Reduce paddings for items of nav-bar */ #nav-bar-customization-target > toolbarbutton, #nav-bar-customization-target > toolbarbutton *, #nav-bar-overflow-button, #nav-bar-overflow-button > .toolbarbutton-icon, #PanelUI-menu-button, #PanelUI-menu-button > .toolbarbutton-icon, #identity-box, #identity-box > image { padding: 0 1px !important; } #urlbar { margin-left: 3px !important; }
[2014.06.04 14:52] UPDATE:
+ Добавил значение минимальной высоты для панели навигации.
[2014.08.27 17:10] UPDATE:
+ разбил слишком общее правило #nav-bar * на более точные мелкие.
+ удалось победить вылезший баг с кнопкой "вперёд" имевшей слева полукруг.
Отредактировано iDev.Pi (29-01-2015 04:03:55)
mzfx
Отсутствует
iDev.Pi
p.p.s.: у стиля есть известная проблема с еле заметной светлой полосой под активной вкладкой на стыке с панелью навигации. Пока не смог победить это.
Насколько я помню, когда сам все возвращал, полоса эта из-за того что у #nav-bar стоит box-shadow: 0px 1px 0px rgba(253, 253, 253, 0.45) inset; соответственно box-shadow: none; решает проблему.
Отсутствует
А как бы еще удалить округлость кнопки добавления новой вкладки?
Отсутствует
Замечательно, но мне лично неактивные вкладки нравятся прозрачными и без границ. Покопаюсь на досуге в стиле. Или направьте меня, что там исправить.
Не следует делать того, что смущает совесть.
Отсутствует
Насколько я помню, когда сам все возвращал, полоса эта из-за того что у #nav-bar стоит box-shadow: 0px 1px 0px rgba(253, 253, 253, 0.45) inset; соответственно box-shadow: none; решает проблему.
Спасибо, помогло
Но после этого становится заметно, что выбранная вкладка и панель навигации имеют разные цвета и стык всё равно виден. Проблема решается перекрашиванием background-image у #nav-bar.
Ki_rrrilll
Я её не стилизовал потому, что не заметил: у меня кнопка открытия новой вкладки используется другая (слева от вкладок). Обновил код.
Confidence
везде у .tabbrowser-tab просто стоит заменить на .tabbrowser-tab[selected].
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* Style name: Revert Australis for tab-bar Version: 2 Last updated: 2014.05.31 12:40 Author: Drugmix Contacts: http://userstyles.org/users/7993 https://forum.mozilla-russia.org/profile.php?id=48107 */ /* Hide close button: use middle click to close tabs */ .tab-close-button.close-icon { display: none !important; } /* Remove padding at left of the tab-bar */ .arrowscrollbox-scrollbox { padding: 0 !important; } /* Remove tab curves */ .tabbrowser-tab[selected] .tab-background-start, .tabbrowser-tab[selected] .tab-background-end, .tabbrowser-tab[selected]:before, /* hide tab separators */ .tabbrowser-tab[last-visible-tab]:after /* Hide another tab separator after the last visible tab */ { display: none !important; } .tabbrowser-tab[selected] .tab-background, .tabbrowser-tab[selected] .tab-background-middle, .tabs-newtab-button { background: none !important; } .tabbrowser-tab[selected] .tab-background, .tabbrowser-tab[selected] .tab-background-middle, .tabs-newtab-button { border: 0 !important; margin: 0 !important; } /* Apply background colors from Firefox 28 (before Australis) */ .tabbrowser-tab[selected], .tabs-newtab-button { background-image: linear-gradient(to top, rgba(26, 26, 26, 0.4) 1px, transparent 1px), linear-gradient(transparent, rgba(114, 114, 114, 0.1) 1px, rgba(81, 81, 81, 0.2) 80%, rgba(0, 0, 0, 0.2)), linear-gradient(rgb(219, 234, 249), rgb(219, 234, 249)) !important; } .tabbrowser-tab[selected] { background-image: linear-gradient(rgb(255, 255, 255), rgba(255, 255, 255, 0.5) 50%), linear-gradient(rgb(219, 234, 249), rgb(219, 234, 249)) !important; } /* Adding borders to tabs */ .tabbrowser-tab[selected], .tabs-newtab-button { background-position: 1px 2px !important; background-repeat: no-repeat !important; background-size: calc(-2px + 100%) calc(-2px + 100%) !important; } /* Adding borders as border-images to tabs */ .tabbrowser-tab[selected], .tabs-newtab-button { border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAcCAYAAABh2p9gAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAPZJREFUSEutz0kKwlAQhGHjFRQED+BCtx5ANwq6EcnG2cR5NteM59BrxP4lD4IiglRDbar7ffBy8imWyp6lZulaBmlCS2AZZToXOnbcuI63GB5gvdf3h3F885MkaaRpW1qWZqZzoWPHzavjLQYWoH9/PDq2KFjymXjpJz6G3dttAQMLcGRF1fIV+DW8xcByYCXd/T0YDhwLwTHgRAhOAKdCcAo4E4IzwLkQnAMGQjAADIVgCLgQggvApRBcAq6E4ApwLQTXgBshuAHcCsEt4E4I7gD3QnAPeBCCB8CjEDwCnoTgCfAsBM+AFyF4AbwKwStgpAPL0RNseiOcDGPu5QAAAABJRU5ErkJggg==") 4 10 0 3 / 4px 10px 1px 3px stretch !important; } tab[unread] .tabbrowser-tab[selected], tab[pending=true] .tabbrowser-tab[selected] { border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAcCAYAAABh2p9gAAAA8ElEQVR42mNkoDYQEZdiBGJtIPYG4kgoTgLiRCCORhIrS03PDCfGQJOAoJCoU6dOh/z//98Bit2B2A2IHWFiQHUJ+YXF7UDajJCBIU+fPfMCahIGYiYkzIimLh4opgakbUA+wmdgNFChFtQAfOriQAZC2e5ArIDPQDUigiYWrA7BDwJiCWwKY7AbSFgdNNL48NlMKGjUsIgnAzEbZtggAOGwxpTLwog9IJPs1ADCoHQKU5gAMpDM9OoKTbPOIH5EVEwnSGEikQayY8lRCdBcFQsTYwAJgA2kEEATfRITkE3NAoKRPgaOGjhq4KiBowYCAPn0tmTZdk9+AAAAAElFTkSuQmCC") 4 10 0 3 / 4px 10px 0px 3px stretch !important; } /* Make the active tab and navigational toolbar have the same color */ #nav-bar { box-shadow: none !important; background-image: linear-gradient(rgb(237, 245, 252), rgba(255, 255, 255, 0.1) 50%), linear-gradient(rgb(219, 234, 249), rgb(219, 234, 249)) !important; } /* Fix AppTabs' height */ #tabbrowser-tabs { min-height: 0 !important; } .tabbrowser-tab[selected] .tab-background { height: 26px !important; } /* */ /* Ergonomics */ /*____________*/ #TabsToolbar { margin: 0 !important; padding: 0 !important; background: none !important; } /* Decrease side padding in tabs */ .tabbrowser-tab[selected] .tab-content { padding: 0 6px !important; } /* Fix new tab button's width */ .tabs-newtab-button { width: 28px !important; } /* Not sure if this will be needed or not anymore .tabbrowser-tab { z-index: auto !important; background-origin: border-box !important; border-image-slice: 4 3 0 3 fill !important; border-image-source: url("chrome://browser/skin/tabbrowser/tab.png") !important; border-image-width: 1 1 1 1 !important; border-style: solid !important; border-width: 4px 3px 0px 3px !important; } */
Отредактировано iDev.Pi (31-05-2014 12:50:26)
mzfx
Отсутствует
Я её не стилизовал потому, что не заметил: у меня кнопка открытия новой вкладки используется другая (слева от вкладок). Обновил код.
Спасибо!
Отсутствует
Добавил в шапку 2-ой стиль для нормализации панели навигации.
Добавлено 31-05-2014 13:40:52
Ах да: на скриншоте панели навигации видно, что кнопка "вперёд" у меня отображается даже тогда, когда она не кликается.
Достигается это стилем от Infocatcher'а: https://github.com/Infocatcher/UserStyles/tree/master/Australis_always_show_forward_button
Рекомендую всем этот стиль, т.к. без него возможны прыжки элементов на панели.
Отредактировано iDev.Pi (31-05-2014 13:40:52)
mzfx
Отсутствует
mzfx
надо было написать - мазафака
P.S. добавил в FAQ как тема для обсуждения.
Отредактировано feas (31-05-2014 15:22:01)
Добро пожаловать на форум mozilla-russia.org. Здесь вы можете посоветоваться или обратиться за помощью к фанатам и пользователям продуктов Мозиллы. Если не знаете как правильно оформить пост специально для вас расписан пункт 2.2 правил форума
Сброс на примере Firefox – лёгкое решение большинства проблем
Починка браузера. Перенос своих настроек на новый профиль.
Отсутствует
iDev.Pi
А как ты сжимаешь поисковую панель до кнопки? У меня твоим стилем Revert Australis for nav-bar она не сжимается.
В 28 версии я сжимал её таким стилем:
/*-------сжатие поисковой панели------*/ #urlbar-container{max-width:650px!important} #search-container .searchbar-textbox{min-width:23px!important;overflow:hidden!important;-moz-transition-property:min-width!important}#search-container:hover .searchbar-textbox{-moz-transition-delay:130ms!important}#search-container:hover .searchbar-textbox,#search-container .searchbar-textbox[focused]{min-width:200px!important} :-moz-any(#navigator-toolbox,#addon-bar) :not([customizing])#search-container{max-width:0!important}.searchbar-engine-button{margin:0px 0px 0px -1px!important;}
В 29 он не работает.
Отсутствует
А как ты сжимаешь поисковую панель до кнопки?
Я этого не делаю. У меня стоит InstantFox, который по умолчанию убирает поисковую панель с тулбара (ибо она не нужна, если ты запомнил кейворды к своим поисковым машинам).
mzfx
Отсутствует
Отсутствует
А вот так, года я навел указатель мыши на значок поисковика
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); #search-container{ min-width:0px!important; max-width:0px!important; } #search-container .searchbar-textbox { min-width:26px!important; overflow:hidden!important; transition: min-width .2s !important; } #search-container:hover .searchbar-textbox, #search-container .searchbar-textbox[focused] { min-width:200px!important; -moz-transition-delay:200ms!important; }
Отсутствует
Uxapb Отличный скрипт! А можно сделать так, чтобы при наведении на кнопку не раскрывалась строка поиска (была просто кнопка), но функционал настройки поисковых машин висел на правой кнопке мыши, а на левой и средней кнопках мыши открывалась новая вкладка с поисковиком, так как, это происходит если нажать на лупу справа в поисковой строке?
Отредактировано BAd (03-06-2014 16:34:54)
Отсутствует
всем привет!
может кто уже задавался целью убрать тени по краям tab-bar-а. поделитесь рецептом. и заодно может подскажите как уменьшить высоту url-bar-а на 2 пикселя до размера forward-button. я сколько не бился получалось только forward-button увеличить до размера url-bar-а.
Отсутствует
не выйдет изза размера back-button
размер панели >= самый большой элемент на ней
так что тут вариант только уменьшать кнопку назад.
спасибо. значит буду жить так.
про тени непонятно что именно имеется ввиду - укажи на скриншоте.
те, которые из-за уменьшенного tab-bar-а вылезают на nav-bar по краям панели вкладок. в стиле из шапки эти тени тоже есть.
Отсутствует
okkamas_knife, спасибо за попытку помочь. тень не зависит от стиля. впервые она появилась на ночнушке от 11.06.2014. на сборке от 10 числа ее нет ни на текущем ни на чистом профиле. если есть желание, то можете проверить:
ftp://ftp.mozilla.org/pub/firefox/night … .win32.zip
ftp://ftp.mozilla.org/pub/firefox/night … .win32.zip
Отредактировано z_mashine (13-07-2014 18:28:53)
Отсутствует
Обновил стиль для панели навигации:
[2014.08.27 17:10] UPDATE:
+ разбил слишком общее правило #nav-bar * на более точные мелкие.
+ удалось победить вылезший баг с кнопкой "вперёд" имевшей слева полукруг.
mzfx
Отсутствует