Помогите создать в userChrome.css сепаратор (разделитель, нижн/верх граница) между панелью навигации и закладок при таком их расположении [ FF40 Linux ] (синяя линия на рисунке)
Желательны настройки цвет, толщина, отступ от границы панели
Отредактировано VICTORPRO (20-08-2015 11:50:05)
Цапу надо крутить, цапу !!!
Отсутствует
VICTORPRO
Цвет, толщину сами подберите
#PersonalToolbar {-moz-appearance:none!important; border-top: 2px solid #000 !important;}
или так
#PersonalToolbar {-moz-appearance:none!important; box-shadow: inset 0px 2px 0px #000 !important; }
Отредактировано villa7 (20-08-2015 13:04:46)
Лучше спросить у знающих - чем лезть не зная.
Отсутствует
У меня странная проблема:
Зеленым обозначил зону по нажатии на которую открывается менюшка. То есть закрыть окно очень трудно, что бы крестик покраснел нужно жать вне зеленой зоны.
Если убрать кнопку меню крестик работает нормально:
Пробовал задать height но чето изменений не увидил.
Отредактировано VINRARUS (21-08-2015 20:20:29)
Отсутствует
VINRARUS
А если так, только размер свой
Отредактировано villa7 (21-08-2015 20:28:56)
Лучше спросить у знающих - чем лезть не зная.
Отсутствует
villa7 Ну PanelUI-menu-button перекосил интерфейс, с PanelUI-button да уменьшает, но та невидимая зона осталась.
Короче включив дополнение The Fox, Only Better браузер чудесным образом убрал тот баг. Хз че твориться, ну пусть будет так если ему так хочется.
Отсутствует
Есть у меня такой стиль:
/* Back Button image */ #back-button:not([disabled="true"]):not(:hover) > .toolbarbutton-icon, #back-button[disabled="true"] > .toolbarbutton-icon {background: none !important;} /* Back Button image (hover) */ #nav-bar #back-button:not([disabled]):not([open="true"]):hover .toolbarbutton-icon{ background-clip: padding-box !important; background-color: transparent !important; background-image: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .1)) !important; border: 1px solid !important; border-color: rgba(0, 0, 0, .25) rgba(0, 0, 0, .27) rgba(0, 0, 0, .32) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .15), 0 0 1px rgba(255, 255, 255, .7), 0 1px 0 rgba(255, 255, 255, .5) inset !important; margin: -1px !important;} /* Back Button image (open) */ #nav-bar #back-button[open="true"] > .toolbarbutton-icon{ background-clip: padding-box !important; background-color: transparent !important; background-image: linear-gradient(rgba(255, 255, 255, .75), rgba(255, 255, 255, .1)) !important; border: 1px solid !important; border-color: rgba(0, 0, 0, .25) rgba(0, 0, 0, .27) rgba(0, 0, 0, .32) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .15), 0 0 1px rgba(255, 255, 255, .7), 0 1px 0 rgba(255, 255, 255, .5) inset !important; margin: -1px !important;} /* Back Button image (disabled) */ #back-button[disabled="true"] > .toolbarbutton-icon { box-shadow: 0 1px 0 rgba(225, 225, 225, .1), 0 0 1px rgba(255, 255, 255, .55), 0 0 2px transparent, 0 0 1px rgba(0, 0, 0, .4) inset !important;}
Помогите решить проблему.
Отредактировано becool (23-08-2015 10:09:04)
Отсутствует
becool
/* Back Button image */ #back-button:not([disabled="true"]):not([open="true"]):not(:hover) > .toolbarbutton-icon, #back-button[disabled="true"] > .toolbarbutton-icon { background: none !important; } /* Back Button image (hover) */ #nav-bar #back-button:not([disabled]):not([open="true"]):hover .toolbarbutton-icon { background-color: transparent !important; background-image: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .1)) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .15), 0 0 1px rgba(255, 255, 255, .7), 0 1px 0 rgba(255, 255, 255, .5) inset !important; } /* Back Button image (open) */ #nav-bar #back-button[open="true"] > .toolbarbutton-icon { background-color: transparent !important; background-image: linear-gradient(rgba(255, 255, 255, .75), rgba(255, 255, 255, .1)) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .15), 0 0 1px rgba(255, 255, 255, .7), 0 1px 0 rgba(255, 255, 255, .5) inset !important; } /* Back Button image (disabled) */ #back-button[disabled="true"] > .toolbarbutton-icon { box-shadow: 0 1px 0 rgba(225, 225, 225, .1), 0 0 1px rgba(255, 255, 255, .55), 0 0 2px transparent, 0 0 1px rgba(0, 0, 0, .4) inset !important; }
Отсутствует
becool
Тогда так, но по умолчанию этого бордюра нет
/* Back Button image */ #back-button:not([disabled="true"]):not([open="true"]):not(:hover) > .toolbarbutton-icon, #back-button[disabled="true"] > .toolbarbutton-icon { background: none !important; } #nav-bar #back-button > .toolbarbutton-icon { border: 1px solid !important; border-color: transparent !important; width: auto !important; height: 30px !important; padding: 5px !important; } /* Back Button image (hover) */ #nav-bar #back-button:not([disabled]):not([open="true"]):hover > .toolbarbutton-icon { background-clip: padding-box !important; background-color: transparent !important; background-image: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .1)) !important; border-color: rgba(0, 0, 0, .25) rgba(0, 0, 0, .27) rgba(0, 0, 0, .32) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .15), 0 0 1px rgba(255, 255, 255, .7), 0 1px 0 rgba(255, 255, 255, .5) inset !important; } /* Back Button image (open) */ #nav-bar #back-button[open="true"] > .toolbarbutton-icon { background-clip: padding-box !important; background-color: transparent !important; background-image: linear-gradient(rgba(255, 255, 255, .75), rgba(255, 255, 255, .1)) !important; border-color: rgba(0, 0, 0, .25) rgba(0, 0, 0, .27) rgba(0, 0, 0, .32) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .15), 0 0 1px rgba(255, 255, 255, .7), 0 1px 0 rgba(255, 255, 255, .5) inset !important; } /* Back Button image (disabled) */ #back-button[disabled="true"] > .toolbarbutton-icon { box-shadow: 0 1px 0 rgba(225, 225, 225, .1), 0 0 1px rgba(255, 255, 255, .55), 0 0 2px transparent, 0 0 1px rgba(0, 0, 0, .4) inset !important; }
Отредактировано Vitaliy V. (23-08-2015 12:27:04)
Отсутствует
Vitaliy V., самое то, спасибо!
Добавлено 23-08-2015 12:31:45
Vitaliy V., а как добавить на кнопку черную рамку как на адресной строке, когда кнопка неактивна?
Отредактировано becool (23-08-2015 12:31:57)
Отсутствует
becool
Замените
/* Back Button image */ #nav-bar #back-button:not([disabled="true"]):not([open="true"]):not(:hover) > .toolbarbutton-icon, #nav-bar #back-button[disabled="true"] > .toolbarbutton-icon { background: none !important; } #nav-bar #back-button > .toolbarbutton-icon { border: 1px solid !important; border-color: transparent !important; width: auto !important; height: 30px !important; padding: 5px !important; } /* Back Button image (hover) */ #nav-bar #back-button:not([disabled]):not([open="true"]):hover > .toolbarbutton-icon { background-clip: padding-box !important; background-color: transparent !important; background-image: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .1)) !important; border-color: rgba(0, 0, 0, .25) rgba(0, 0, 0, .27) rgba(0, 0, 0, .32) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .15), 0 0 1px rgba(255, 255, 255, .7), 0 1px 0 rgba(255, 255, 255, .5) inset !important; } /* Back Button image (open) */ #nav-bar #back-button[open="true"] > .toolbarbutton-icon { background-clip: padding-box !important; background-color: transparent !important; background-image: linear-gradient(rgba(255, 255, 255, .75), rgba(255, 255, 255, .1)) !important; border-color: rgba(0, 0, 0, .25) rgba(0, 0, 0, .27) rgba(0, 0, 0, .32) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .15), 0 0 1px rgba(255, 255, 255, .7), 0 1px 0 rgba(255, 255, 255, .5) inset !important; } /* Back Button image (disabled) */ #nav-bar #back-button[disabled="true"] > .toolbarbutton-icon { border-color: rgba(0, 0, 0, .35) rgba(0, 0, 0, .37) rgba(0, 0, 0, .42) !important; box-shadow: 0 1px 0 rgba(225, 225, 225, .1), 0 0 1px rgba(255, 255, 255, .55), 0 0 2px transparent, 0 0 1px rgba(0, 0, 0, .4) inset !important; }
Отсутствует
Vitaliy V., спасибо, остановился на таком варианте:
/* Back Button image */ #nav-bar #back-button:not([disabled="true"]):not([open="true"]):not(:hover) > .toolbarbutton-icon, #nav-bar #back-button[disabled="true"] > .toolbarbutton-icon { background: none !important; margin: -1px !important;} #nav-bar #back-button > .toolbarbutton-icon { border: 1px solid !important; border-color: rgba(0, 0, 0, .45) rgba(0, 0, 0, .47) rgba(0, 0, 0, .52) !important; width: auto !important; height: 32px !important; padding: 7px !important;} /* Back Button image (hover) */ #nav-bar #back-button:not([disabled]):not([open="true"]):hover > .toolbarbutton-icon { background-clip: padding-box !important; background-color: transparent !important; background-image: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .1)) !important; border-color: rgba(0, 0, 0, .25) rgba(0, 0, 0, .27) rgba(0, 0, 0, .32) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .15), 0 0 1px rgba(255, 255, 255, .7), 0 1px 0 rgba(255, 255, 255, .5) inset !important; margin: -1px !important;} /* Back Button image (open) */ #nav-bar #back-button[open="true"] > .toolbarbutton-icon { background-clip: padding-box !important; background-color: transparent !important; background-image: linear-gradient(rgba(255, 255, 255, .75), rgba(255, 255, 255, .1)) !important; border-color: rgba(0, 0, 0, .25) rgba(0, 0, 0, .27) rgba(0, 0, 0, .32) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .15), 0 0 1px rgba(255, 255, 255, .7), 0 1px 0 rgba(255, 255, 255, .5) inset !important; margin: -1px !important;} /* Back Button image (disabled) */ #nav-bar #back-button[disabled="true"] > .toolbarbutton-icon { border-color: black !important; box-shadow: 0 1px 0 rgba(225, 225, 225, .1), 0 0 1px rgba(255, 255, 255, .55), 0 0 2px transparent, 0 0 1px rgba(0, 0, 0, .4) inset !important;}
Отредактировано becool (23-08-2015 13:09:52)
Отсутствует
becool
Нет так не пойдёт margin: -1px !important; в моём коде теперь не нужен
И padding: 7px !important; многовато иконка уменьшена.
Или так height: 30px !important;
padding: 5px !important;
либо так height: 32px !important;
padding: 6px !important;
Отредактировано Vitaliy V. (23-08-2015 13:25:06)
Отсутствует
Vitaliy V.,
Это я так сделал размер стрелки "назад" таким же, как и у кнопки "вперед". Вот только теперь понял, что кнопка "вперед" у меня тоже на пиксель уменьшена, оказывается.
/* Forward Button image */ #forward-button:not([disabled="true"]):not(:hover) > .toolbarbutton-icon, #forward-button[disabled="true"] > .toolbarbutton-icon { background: none !important; border-color: rgba(0, 0, 0, .45) rgba(0, 0, 0, .47) rgba(0, 0, 0, .52) !important; box-shadow: 0 1px 0 rgba(225, 225, 225, .1), 0 0 1px rgba(255, 255, 255, .55), 0 0 2px transparent, 0 0 1px rgba(0, 0, 0, .4) inset !important;}
Как исправить?
Отредактировано becool (23-08-2015 13:44:47)
Отсутствует
Как исправить?
С этим кодом всё в порядке, ищите где есть padding(и), border(ы) и width: height:
Отредактировано Vitaliy V. (23-08-2015 13:59:10)
Отсутствует
Отбой, стрелка "вперед" сама по себе по дефолту меньше стрелки "назад" оказывается. Тогда все путем. А без margin: -1px у меня вот такой лишний "сектор" отображается:
Отсутствует
А без margin: -1px у меня вот такой лишний "сектор" отображается:
Ну правильно там же бордюр
В том коде margin: -1px нужен был для того чтобы компенсировать разницу из-за бордюра при наведении на кнопку, а так это не нужно.
Отредактировано Vitaliy V. (23-08-2015 15:10:05)
Отсутствует
Извините, а как можно стиль поменять в браузере, у меня там всего две строчки таких: меню, вид, использовать стиль - нет и основной стиль. Как использовать несколько стилей, это нужно несколько разных файлов - userChrome.css делать или как?
Отсутствует
fokanik
Забудь за тот пункт. Зачем его делали нихто не знает, бесполезная хрень. Ставь Stylish или делай стили в userContent.css с использованием нужного урл/домена
Отсутствует
Выручайте, вот этот стиль:
/* Button image (hover) */ #nav-bar toolbarbutton.toolbarbutton-1:not([disabled]):not([checked]):not(:active):hover .toolbarbutton-icon { background-color: transparent !important; background-image: linear-gradient(rgba(210, 210, 210, .65), rgba(210, 210, 210, .2)) !important; background-clip: border-box !important; border-color: rgba(0, 0, 0, .45) rgba(0, 0, 0, .47) rgba(0, 0, 0, .52) !important; box-shadow: 0 1px 0 rgba(225, 225, 225, .1), 0 0 1px rgba(255, 255, 255, .55), 0 0 2px transparent, 0 0 1px rgba(0, 0, 0, .4) inset !important; -moz-transition: none !important;} /* Button image (active) */ #nav-bar toolbarbutton.toolbarbutton-1:not([disabled])[checked] .toolbarbutton-icon, #nav-bar toolbarbutton.toolbarbutton-1:not([disabled]):active .toolbarbutton-icon { background-color: transparent !important; background-image: linear-gradient(rgba(210, 210, 210, .65), rgba(210, 210, 210, .2)) !important; background-clip: padding-box !important; border-color: rgba(0, 0, 0, .45) rgba(0, 0, 0, .47) rgba(0, 0, 0, .52) !important; box-shadow: 0 1px 0 rgba(225, 225, 225, .1), 0 0 1px rgba(255, 255, 255, .55), 0 0 2px transparent, 0 0 1px rgba(0, 0, 0, .4) inset !important; -moz-transition: none !important;} /* Button image (pressed, open) */ #navigator-toolbox #nav-bar .toolbarbutton-1[open="true"] > .toolbarbutton-icon, #navigator-toolbox #nav-bar .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):hover:active > .toolbarbutton-icon{ background-color: transparent !important; background-image: linear-gradient(rgba(210, 210, 210, .45), rgba(210, 210, 210, .2)) !important; background-clip: padding-box !important; border-color: rgba(0, 0, 0, .45) rgba(0, 0, 0, .47) rgba(0, 0, 0, .52) !important; box-shadow: 0 1px 0 rgba(225, 225, 225, .1), 0 0 0px rgba(255, 255, 255, .55), 0 0 2px transparent, 0 0 1px rgba(0, 0, 0, .4) inset !important; -moz-transition: none !important;}
toolbarbutton [36×40] namespaceURI: XUL margin: 0 border: 0 padding: 8px 2px id = PanelUI-menu-button class = toolbarbutton-1 badged-button label = Cyberfox tooltiptext = Открыть меню
Отредактировано becool (29-08-2015 07:56:45)
Отсутствует
becool
У меня при наведении, нажатии кнопок на панели навигации так сделано
#nav-bar .toolbarbutton-1:not([disabled="true"]) > .toolbarbutton-menubutton-button[open="true"] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, #nav-bar .toolbarbutton-1:not([disabled="true"]):-moz-any(:hover,[open="true"]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon, #nav-bar .toolbarbutton-1:not([disabled="true"]):-moz-any(:hover,[open="true"]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, #nav-bar .toolbarbutton-1:not([disabled="true"]):not(:-moz-any(#back-button)):not([checked="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon, #nav-bar .toolbarbutton-1:not([disabled="true"]):not([checked="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-text, #nav-bar .toolbarbutton-1:not([disabled="true"]):not([checked="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-badge-container, #nav-bar .toolbarbutton-1:not([disabled="true"]):not([checked="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-badge-stack, window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open="true"]):not(:active):not([disabled="true"]):hover > .toolbarbutton-icon, #nav-bar .toolbarbutton-1:not([buttonover]):not([open="true"]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]) > .dropmarker-icon { background: rgba(52,153,255,0.12) !important; border-color: rgba(52,153,255,0.3) !important; box-shadow: none !important; } #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled="true"]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon, #nav-bar .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]) > .dropmarker-icon, #nav-bar .toolbarbutton-1:not([disabled="true"]):not(:-moz-any(#back-button)):-moz-any([open="true"],[checked="true"],:hover:active) > .toolbarbutton-icon, #nav-bar .toolbarbutton-1:not([disabled="true"]):-moz-any([open="true"],[checked="true"],:hover:active) > .toolbarbutton-text, #nav-bar .toolbarbutton-1:not([disabled="true"]):-moz-any([open="true"],[checked="true"],:hover:active) > .toolbarbutton-badge-container, #nav-bar .toolbarbutton-1:not([disabled="true"]):-moz-any([open="true"],[checked="true"],:hover:active) > .toolbarbutton-badge-stack { background: rgba(52,153,255,0.2) !important; border-color: rgba(52,153,255,0.3) rgba(52,153,255,0.1) rgba(52,153,255,0.1) !important; box-shadow: 0 1px 0 0 rgba(52,153,255,0.2) inset !important; } #nav-bar #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon { background: rgba(52,153,255,0.12) !important; box-shadow: 0 0 0 1px rgba(52,153,255,0.3) !important; } #nav-bar #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon, #nav-bar #back-button[open="true"] > .toolbarbutton-icon { background: rgba(52,153,255,0.2) !important; box-shadow: 0 1px 0 0 rgba(52,153,255,0.2) inset, 0 0 0 1px rgba(52,153,255,0.3) !important; }
Отредактировано Vitaliy V. (01-09-2015 09:14:21)
Отсутствует
Немного измененный стиль от Vitaliy V.
/* AGENT_SHEET */ @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); .icon-container{margin:0px 0px!important;width:24px!important;height:24px!important;} .name-container,.description,.description-container,.basicinfo-container{max-height:20px!important;min-height:20px!important;margin:0px 2px!important;} .name-container{font-size:12px!important;margin:0px 0px!important;} .advancedinfo-container{max-height:25px!important;min-height:25px!important;font-size:11px!important;margin:-6px 0px!important;color:#004a00!important;} .addon-control.enable{margin:-1px 0px!important;color:green!important;} .addon-control.disable{margin:-1px 0px!important;color:blueviolet!important;} .addon-control.remove{margin:-1px 0px!important;color:red!important;} .addon-control{margin:-1px 0px!important;color:blue!important;} .control-container {height: 24px;} .status-control-wrapper {display: block !important;} .update-available .addon-control.update {height: 20px; color: #009999;} @-moz-document url("about:addons") { /* Iconize 'category' tabs */ /* disabled */ /* dark 'categories' background */ #categories, #nav-header { background-color: #171717; } .category[selected="true"] { background-color: #373737; } /* Make 'Recent Updates' category always visible */ /* disabled */ /* Make 'Available Updates' category always visible */ /* disabled */ /* Category - Discover */ #category-discover { visibility: collapse !important; } /* Category - Service */ #category-service { visibility: collapse !important; } /* Header Search Bar */ #header-search { visibility: collapse !important; } /* add-on icon size */ #list-view .addon .icon, #updates-view .addon .icon { max-width: 24px !important; max-height: 24px !important; } #list-view .addon .icon-container, #updates-view .addon .icon-container { width: inherit !important; height: inherit !important; } #updates-list > .addon.addon-view { background-color: initial; } /* Add-on Description */ .description-container { visibility: collapse !important; } .content-inner-container { display: inline-block; } /* User Styles category specific */ #userstyle-footer { visibility: collapse; } /* Hide Addon-Signing warnings */ /* disabled */ /* Sort buttons */ #greasemonkey-sort-bar .sorter[checkState="1"], #greasemonkey-sort-bar .sorter[checkState="2"], #userstyle-sorting .sorter[checked="true"], #updates-sorters .sorter[checked="true"] { max-height: 32px; background: none; box-shadow: none; } /* UserStyles category specific */ #list-view[type="userstyle"] .addon[styleTypes=""] .icon-container:before { content: "Und"; font-size: 13px; border-style: solid; border-width: 1px; border-color: #3e6284; background: purple; color:#373737; font-weight: 600 !important; padding-right:14px!important; padding-left:15px!important; } #list-view[type="userstyle"] .addon[styleTypes="undefined"] .icon-container:before { content: "Und"; font-size: 13px; border-style: solid; border-width: 1px; border-color: #3e6284; background: purple; color:#373737; font-weight: 600 !important; padding-right:14px!important; padding-left:15px!important; } #list-view[type="userstyle"] .addon[styleTypes*="app"] .icon-container:before { content: "App"; font-size: 13px; border-style: solid; border-width: 1px; border-color: #3e6284; background: #F9CACA; color:#373737; font-weight: 600 !important; padding-right:14px!important; padding-left:15px!important; } #list-view[type="userstyle"] .addon[styleTypes*="site"] .icon-container:before { content: "Website"; font-size: 13px; border-style: solid; border-width: 1px; border-color: #3e6284; background: #D6F0C3; color:#373737; font-weight: 600 !important; padding-right:2px!important; padding-left:2px!important; } #list-view[type="userstyle"] .addon[styleTypes*="global"] .icon-container:before { content: "Global"; font-size: 13px; border-style: solid; border-width: 1px; border-color: #3e6284; background: #bae1ff; color:#373737; font-weight: 600 !important; padding-right:7px!important; padding-left:8px!important; } #list-view[type="userstyle"] .addon[active="false"] .icon-container:before { opacity: 0.5; } #list-view[type="userstyle"] .addon .icon { display: none !important; } }
Отсутствует
Немного измененный стиль от Vitaliy V.
Не понял юмора, если это один из моих стилей, то он не немного а полностью изменённый.
Отсутствует