X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fcustomizableui%2FpanelUIOverlay.css;h=10a7c48060de8e68ce40cdce4a0375563ff3f4b1;hp=afc8e4413297b5b1e52a1fcdcebfe4fbdd0a5141;hb=e28f3f71465fc35bd3c71fae071ff71890271323;hpb=cc4b0b0d84ada84e11e522567465e086f075f966 diff --git a/LCARStrek/browser/customizableui/panelUIOverlay.css b/LCARStrek/browser/customizableui/panelUIOverlay.css index afc8e441..10a7c480 100644 --- a/LCARStrek/browser/customizableui/panelUIOverlay.css +++ b/LCARStrek/browser/customizableui/panelUIOverlay.css @@ -8,14 +8,18 @@ border-radius: 4px; } +#PanelUI-button { +} + +#PanelUI-button:-moz-locale-dir(rtl) { +} + .panel-subviews { + padding: 4px; background-color: #000000; -moz-margin-start: 38px; } -.panel-subviews:-moz-locale-dir(rtl) { -} - .panel-viewstack[viewtype="main"] > .panel-subviews { transform: translateX(21em); } @@ -28,6 +32,42 @@ -moz-box-flex: 1; } +.panel-subview-body { + overflow-y: auto; + overflow-x: hidden; + -moz-box-flex: 1; +} + +#PanelUI-popup .panel-subview-body { + margin: -4px; + padding: 2px 4px; +} + +.panel-subview-header, +.subviewbutton.panel-subview-footer { + padding: 3px; +} + +.panel-subview-header { + margin: 0 0 4px; + background-color: #A09090; + color: #000000; + border-radius: 4px; +} + +.panel-subview-footer { + border-top: 1px solid #A09090; +} + +.cui-widget-panelview .panel-subview-header { + display: none; +} + +.cui-widget-panelview .subviewbutton.panel-subview-footer { + margin: 4px 0 0; + -moz-box-pack: center; +} + #PanelUI-mainView { display: flex; flex-direction: column; @@ -80,12 +120,20 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-it } panelview:not([mainview]) .toolbarbutton-text, -#customizationui-widget-panel toolbarbutton > .toolbarbutton-text { +.cui-widget-panel toolbarbutton > .toolbarbutton-text { text-align: start; -moz-padding-start: 8px; display: -moz-box; } +.cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; +} + +.cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent { + padding-bottom: 0; +} + #PanelUI-contents { display: block; flex: auto; @@ -98,83 +146,166 @@ panelview:not([mainview]) .toolbarbutton-text, overflow-y: auto; overflow-x: hidden; width: 21em; - padding-left: 5px; - padding-right: 5px; flex: auto; } -#edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton > .toolbarbutton-icon, -#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton > .toolbarbutton-icon { +.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton > .toolbarbutton-icon { min-width: 0; min-height: 0; margin: 0; } toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item), -#PanelUI-contents toolbarbutton, -toolbarpaletteitem[place="panel"] > toolbarbutton, -toolbarpaletteitem[place="palette"] > toolbarbutton, -toolbarpaletteitem[place="panel"] > toolbaritem > toolbarbutton, -toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton, -.panel-customization-placeholder { +.panelUI-grid .toolbarbutton-1, +.panel-customization-placeholder-child { -moz-appearance: none; -moz-box-orient: vertical; - min-width: 7em; - max-width: 7em; - height: 6em; - max-height: 6em; + width: calc(7em - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */ + height: calc(51px + 2.2em); +} + +/* Help SDK buttons fit in. */ +toolbarpaletteitem[place="palette"] > toolbarbutton[sdk-button="true"] > .toolbarbutton-icon, +toolbarbutton[sdk-button="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon { + height: 32px; + width: 32px; +} + +.customization-palette .toolbarbutton-1 { + -moz-appearance: none; + -moz-box-orient: vertical; +} + +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button { + -moz-appearance: none; + -moz-box-orient: vertical; + width: calc(7em - 2px); + height: calc(49px + 2.2em); + border: 0; +} + +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text, +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text { + margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */ +} + +.panel-customization-placeholder-child { + margin: 6px 0 0; +/* padding: 2px 6px;*/ +} + +.panelUI-grid .toolbarbutton-1[type="menu"] { + background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif"); + background-position: right 3px top 16px; + background-repeat: no-repeat; +} + +.panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) { + background-position: left 3px top 16px; +} + +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker { + display: none; +} + +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { + -moz-box-align: center; + width: 16px; + -moz-margin-start: -16px; + height: 51px; + margin-bottom: 2.2em; padding: 0; - margin: 0; } -.panel-customization-placeholder[expand], -.panel-customization-placeholder[contract] { - transition-property: width; - transition-duration: 170ms; - transition-delay: 20ms; - transition-timing-function: ease-in-out; - min-width: 0; - max-width: none; +.panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker { + border-radius: 0 0 0 2px; +} + +.panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) { + border-radius: 0 0 2px 0; } .panel-combined-button[disabled] > .toolbarbutton-icon { /* opacity: .5; */ } -toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] { +toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) { width: 7em; margin: 0 !important; } -toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-widget) { +toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) { -moz-box-align: center; -moz-box-pack: center; } toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe { - margin: calc(5em / 12) auto; + margin: 4px auto; +} + +/* + * XXXgijs: this is a workaround for a layout issue that was caused by these iframes, + * which was affecting subview display. Because of this, we're hiding the iframe *only* + * when displaying a subview. The discerning user might notice this, but it's not nearly + * as bad as the brokenness. + * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375 + * is addressed. + */ +#PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe { + visibility: hidden; } toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text { text-align: center; } -.panel-customization-placeholder-child > .toolbarbutton-icon, -#bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon, -toolbarbutton[cui-areatype="menu-panel"] > .toolbarbutton-icon, -toolbaritem[cui-areatype="menu-panel"] > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem[place="palette"] > #bookmarks-menu-button > .toolbarbutton-menubutton-button > .toolbarbutton-icon, -toolbarpaletteitem[place="palette"] > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton > .toolbarbutton-icon { - min-width: calc(8em / 3); - min-height: calc(8em / 3); - margin: calc(5em / 12); +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon, +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container, +.customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, +.customization-palette .toolbarbutton-1 > .toolbarbutton-icon, +.panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon, +.customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon, +.panel-customization-placeholder-child > .toolbarbutton-icon { + min-width: 32px; + min-height: 32px; + /* Explanation for the below formula (A / B - C) + A + Each button is 7em (menuPanelButtonWidth) wide + B + Each button has two margins. + C (44px / 2 = 22px) + The button icon is 32 pixels wide. + The button has 12px of horizontal padding (6 on each side). + The button has 0px of horizontal border (0 on each side). + Total width of button's icon + button padding should therefore be 44px, + which means each horizontal margin should be the half the button's width - (44/2) px. + */ + margin: 4px calc(7em / 2 - 22px); +} + +/* above we treat the container as the icon for the margins, that is so the +/* badge itself is positioned correctly. Here we make sure that the icon itself +/* has the minum size we want, but no padding/margin. */ +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon { + min-width: 32px; + min-height: 32px; + margin: 0; + padding: 0; } toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { -moz-box-flex: 1; } +#personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder { + -moz-box-flex: 1; +} + +#personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon { + -moz-margin-end: 2px; +} + #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #copy-button, #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-reset-button { border-left: none; @@ -190,36 +321,65 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { #PanelUI-footer { display: flex; - background-color: #000000; - border-top: 1px solid #9C9CFF; + flex-shrink: 0; + flex-direction: column; +/* background-color: hsla(210,4%,10%,.07);*/ padding: 0; margin: 0; - min-height: 4em; +/* min-height: 4em;*/ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } +#PanelUI-footer-inner { + display: flex; + border-top: 1px solid #9C9CFF; +} + +#PanelUI-footer-inner > toolbarseparator { + border: 0; + border-left: 1px solid #9C9CFF; + margin: 0; +} + +#PanelUI-footer-inner:hover > toolbarseparator { +/* margin: 0;*/ +} + #PanelUI-help, +#PanelUI-fxa-status, #PanelUI-customize, #PanelUI-quit { margin: 0; padding: 10px 0; - -moz-appearance: none; + min-height: 2em; box-shadow: none; background-image: none; - border: 1px solid transparent; - border-bottom-style: none; + border: none; border-radius: 0; transition: background-color; -moz-box-orient: horizontal; } +#PanelUI-fxa-status { + border-top: 1px solid #9C9CFF; + border-bottom: 1px solid transparent; + margin-bottom: -1px; +} + +#PanelUI-fxa-status > .toolbarbutton-text { + width: 0; /* Fancy cropping solution for flexbox. */ +} + #PanelUI-help, #PanelUI-quit { - min-width: 46px; + min-width: 44px; } +#PanelUI-fxa-status > .toolbarbutton-text, #PanelUI-customize > .toolbarbutton-text { + margin: 0; + padding: 0 6px; text-align: start; } @@ -237,9 +397,24 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { flex: 1; -moz-padding-start: 15px; -moz-border-start-style: none; +} + +#PanelUI-fxa-status { + list-style-image: url("chrome://browser/skin/sync-horizontalbar.png"); +} + +#PanelUI-fxa-status[status="active"] { + list-style-image: url("chrome://browser/skin/syncProgress-horizontalbar.png"); +} + +#PanelUI-customize { list-style-image: url("chrome://browser/skin/menuPanel-customize.png"); } +#customization-panelHolder #PanelUI-customize { + list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png"); +} + #PanelUI-help { list-style-image: url("chrome://browser/skin/menuPanel-help.png"); } @@ -249,6 +424,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { list-style-image: url("chrome://browser/skin/menuPanel-exit.png"); } +#PanelUI-fxa-status, #PanelUI-customize, #PanelUI-help, #PanelUI-quit { @@ -269,84 +445,161 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { -moz-image-region: rect(0, 48px, 16px, 32px); } +#PanelUI-fxa-status:not([disabled]):hover, #PanelUI-help:not([disabled]):hover, #PanelUI-customize:hover, #PanelUI-quit:not([disabled]):hover { -/* border-color: rgba(8,25,42,0.2); - border-top-color: rgba(8,25,42,0.1); - background-color: rgba(0,0,0,0.1); - box-shadow: none;*/ } -#main-window[customize-entered] #PanelUI-customize { +#PanelUI-fxa-status:not([disabled]):hover:active, +#PanelUI-help:not([disabled]):hover:active, +#PanelUI-customize:hover:active, +#PanelUI-quit:not([disabled]):hover:active { +} + +#PanelUI-fxa-status:not([disabled]):hover, +#PanelUI-fxa-status:not([disabled]):hover:active { +} + +#PanelUI-quit:not([disabled]):hover { +/* background-color: #d94141; + outline-color: #c23a3a;*/ +} + +#PanelUI-quit:not([disabled]):hover:active { +/* background-color: #ad3434; + outline-color: #992e2e;*/ +} + +#customization-panelHolder #PanelUI-customize { color: #FFCF00; background-color: #008484; + text-shadow: none; + margin-top: -1px; } -#main-window[customize-entered] #PanelUI-customize:hover, -#main-window[customize-entered] #PanelUI-customize:hover:active { - color: #000000; +#customization-panelHolder #PanelUI-customize + toolbarseparator { + display: none; +} + +#customization-panelHolder #PanelUI-customize:hover, +#customization-panelHolder #PanelUI-customize:hover:active { background-color: #FFCF00; + color: #000000; } +#customization-palette .toolbarbutton-multiline-text, #customization-palette .toolbarbutton-text { display: none; } -panelview toolbarbutton, -#widget-overflow-list > toolbarbutton, -.customizationmode-button, -#edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton, -#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton, -#BMB_bookmarksPopup > menu, -#BMB_bookmarksPopup > menuitem { - -moz-appearance: none; - padding: 2px 6px; -/* background-color: hsla(210,4%,10%,0); +panelview .toolbarbutton-1, +.subviewbutton, +.widget-overflow-list .toolbarbutton-1, +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button, +.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton { +/* padding: 2px 6px; + background-color: hsla(210,4%,10%,0); border-radius: 2px; - border: 1px solid; + border-style: solid; border-color: hsla(210,4%,10%,0);*/ transition-property: background-color, border-color; transition-duration: 150ms; } panelview .toolbarbutton-1, -#widget-overflow-list > toolbarbutton { +.subviewbutton, +.widget-overflow-list .toolbarbutton-1, +.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton { + border-width: 0; +} + +.subviewbutton.panel-subview-footer { + border-radius: 0; + border: none; +} + +.subviewbutton.panel-subview-footer > .toolbarbutton-text, +.subviewbutton.panel-subview-footer > .menu-text { + -moz-padding-start: 0; + -moz-padding-end: 12px; + -moz-box-flex: 0; +} + +.subviewbutton:not(.panel-subview-footer) { +/* margin: 2px 0;*/ +} + +.subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text, +/* Bookmark items need a more specific selector. */ +.PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text, +.PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text { +/* font-size: 1.1em;*/ +} + +.cui-widget-panelview .subviewbutton:not(.panel-subview-footer) { + margin-left: 4px; + margin-right: 4px; +} + +panelview .toolbarbutton-1, +.widget-overflow-list .toolbarbutton-1 { margin-top: 6px; } + /* -panelview toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover, -#widget-overflow-list > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover, -.customizationmode-button, -#edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover, -#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover, -#edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem):not(:-moz-any([disabled],[checked="true"],[open],:active)):hover, -#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem):not(:-moz-any([disabled],[checked="true"],[open],:active)):hover, -#BMB_bookmarksPopup > menu:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover, -#BMB_bookmarksPopup > menuitem:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover { +panelview toolbarbutton-1:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover, +toolbarbutton.subviewbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover, +menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive], +menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive], +.widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover, +.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) + > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover { background-color: hsla(210,4%,10%,.08); - border-color: hsla(210,4%,10%,.1); + border-color: hsla(210,4%,10%,.11); +} + +.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem):not(:-moz-any([disabled],[checked="true"],[open],:active)):hover { + border-color: hsla(210,4%,10%,.11); +} + +panelview .toolbarbutton-1:not([disabled]):-moz-any([open],[checked="true"],:hover:active), +toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active), +menu.subviewbutton:not([disabled])[_moz-menuactive]:active, +menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active, +.widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],[checked="true"],:hover:active), +.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) + > toolbarbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active) { + background-color: hsla(210,4%,10%,.12); + border-color: hsla(210,4%,10%,.14); + box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset; +} + +.subviewbutton.panel-subview-footer { + margin: 4px -4px -4px; + background-color: hsla(210,4%,10%,.07); + border-top: 1px solid hsla(210,4%,10%,.12); + border-radius: 0; + color: hsl(0,0%,25%) } -panelview toolbarbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active), -.customizationmode-button:not([disabled]):-moz-any([open],[checked="true"],:hover:active), -#widget-overflow-list > toolbarbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active), -#edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active), -#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active), -#BMB_bookmarksPopup > menu:not([disabled]):-moz-any([open],[checked="true"],:hover:active), -#BMB_bookmarksPopup > menuitem:not([disabled]):-moz-any([open],[checked="true"],:hover:active) { +.subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover { + background-color: hsla(210,4%,10%,.1); + border-top: 1px solid hsla(210,4%,10%,.12); +} + +.subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],[checked="true"],:hover:active) { background-color: hsla(210,4%,10%,.15); - border-color: hsla(210,4%,10%,.15); - box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset; + border-top: 1px solid hsla(210,4%,10%,.12); + box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; } -*/ -#BMB_bookmarksPopup > menu, -#BMB_bookmarksPopup > menuitem { + +#BMB_bookmarksPopup .subviewbutton { font: inherit; + font-weight: normal; } -#BMB_bookmarksPopup > menu:not([disabled="true"]), -#BMB_bookmarksPopup > menuitem:not([disabled="true"]) { +#BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) { color: inherit; } @@ -357,12 +610,53 @@ panelview toolbarbutton:not([disabled]):-moz-any([open],[checked="true"],:hover: margin-bottom: 0; } -panelview toolbarseparator, -#BMB_bookmarksPopup > menuseparator { +/ Remove padding on xul:arrowscrollbox to avoid extra padding on footer / +#BMB_bookmarksPopup arrowscrollbox { + padding-bottom: 0px; +} + +#BMB_bookmarksPopup menupopup { + padding-top: 2px; +} + +#BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator { + / Hide bottom separator as the styled footer includes a top border serving the same purpose / + display: none; +} +*/ + +.PanelUI-subView menuseparator, +.PanelUI-subView toolbarseparator, +.cui-widget-panelview menuseparator { -moz-appearance: none; min-height: 0; - border-top: 1px solid ThreeDShadow; - margin: 5px 0; + border-top: 1px solid #9C9CFF; + margin: 2px 0; + padding: 0; +} + +.PanelUI-subView menuseparator, +.PanelUI-subView toolbarseparator { +/* -moz-margin-start: -5px; + -moz-margin-end: -4px;*/ +} + +.PanelUI-subView menuseparator.small-separator, +.PanelUI-subView toolbarseparator.small-separator { + margin-left: 5px; + margin-right: 5px; +} + +.cui-widget-panelview menuseparator.small-separator { + margin-left: 10px; + margin-right: 10px; +} + +.subviewbutton > .menu-accel-container { + -moz-box-pack: start; + -moz-margin-start: 10px; + -moz-margin-end: auto; +/* color: hsl(0,0%,50%);*/ } #PanelUI-historyItems > toolbarbutton { @@ -376,59 +670,77 @@ panelview toolbarseparator, height: 16px; } -#PanelUI-footer.panel-multiview-anchor, -#PanelUI-footer.panel-multiview-anchor > #PanelUI-help, -toolbarbutton.panel-multiview-anchor { -/* background-color: Highlight; - background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0)); - background-repeat: repeat-x; - color: HighlightText;*/ +#PanelUI-footer > #PanelUI-footer-inner[panel-multiview-anchor=true], +toolbarbutton[panel-multiview-anchor=true] { + background-color: #008484; } -toolbarpaletteitem[place="palette"] > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker, +toolbarbutton[panel-multiview-anchor=true] { + background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png"); + background-position: right 5px center; + background-repeat: no-repeat; +} + +toolbarbutton[panel-multiview-anchor=true]:-moz-locale-dir(rtl) { + background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png"); + background-position: left 5px center; +} + +#PanelUI-footer > #PanelUI-footer-inner[panel-multiview-anchor=true], +toolbarbutton[panel-multiview-anchor=true], +toolbarbutton[panel-multiview-anchor=true] > .toolbarbutton-menubutton-button { + color: #000000; +} + +toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker, #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker { display: none; } -#search-container[cui-areatype="menu-panel"] { +#search-container[cui-areatype="menu-panel"], +#wrapper-search-container[place="panel"] { width: 21em; } +#search-container[cui-areatype="menu-panel"] { + margin-top: 6px; + margin-bottom: 6px; +} + toolbarpaletteitem[place="palette"] > #search-container { min-width: 7em; width: 7em; } -#edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem), -#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) { -/* background-color: hsla(210,4%,10%,0); - border-radius: 2px; - border: 1px solid; - border-color: hsla(210,4%,10%,0); - border-bottom-color: hsla(210,4%,10%,.1);*/ +.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) { padding: 0; - margin-bottom: -1px; transition-property: background-color, border-color; transition-duration: 150ms; } -#edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton, -#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton { +.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton { border: 0; padding: .5em; margin: 0; -moz-box-flex: 1; - /* reduce the width with 2px for each button to compensate for two separators - of 3px. */ - min-width: calc(7em - 2px); - max-width: calc(7em - 2px); - height: auto; + min-width: 7em; + max-width: 7em; + /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope: + 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */ + height: calc(2.2em + 4px); max-height: none; -moz-box-orient: horizontal; } -#edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton[disabled] > .toolbarbutton-icon, -#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton[disabled] > .toolbarbutton-icon { +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #copy-button, +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-reset-button { + /* reduce the width with 2px for this button to compensate for two separators + of 1px. */ + min-width: calc(7em - 2px); + max-width: calc(7em - 2px); +} + +#main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton[disabled] > .toolbarbutton-icon { /* opacity: .25; */ } @@ -452,26 +764,38 @@ toolbarpaletteitem[place="palette"] > #search-container { border-bottom-left-radius: 0; } -#edit-controls > separator, -#zoom-controls > separator { +.toolbaritem-combined-buttons > separator { + -moz-appearance: none; width: 3px; -moz-box-align: stretch; -/* background-image: linear-gradient(to bottom, hsla(0,0%,100%,0), hsla(0,0%,100%,.3) 40%, hsla(0,0%,100%,.3) 60%, hsla(0,0%,100%,0)), - linear-gradient(to bottom, hsla(210,54%,20%,0), hsla(210,54%,20%,.15) 40%, hsla(210,54%,20%,.15) 60%, hsla(210,54%,20%,0)), - linear-gradient(to bottom, hsla(0,0%,100%,0), hsla(0,0%,100%,.3) 40%, hsla(0,0%,100%,.3) 60%, hsla(0,0%,100%,0)); - background-size: 1px, 1px, 1px; - background-position: 0 0, 1px 0, 2px 0; - background-repeat: no-repeat;*/ +} + +.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > separator { + margin: .5em 0; + width: 1px; + height: auto; +/* background: hsla(210,4%,10%,.15);*/ + transition-property: margin; + transition-duration: 10ms; + transition-timing-function: ease; +} + +.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem):hover > separator { + margin: 0; } #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent { padding: 0; } +.cui-widget-panelview, #widget-overflow-scroller { - max-height: 30em; overflow-y: auto; overflow-x: hidden; +} + +#widget-overflow-scroller { + max-height: 30em; margin-top: 10px; margin-bottom: 10px; } @@ -490,53 +814,47 @@ toolbarpaletteitem[place="palette"] > #search-container { background-position: 0 center; } -#widget-overflow-list > toolbarbutton, -#widget-overflow-list > toolbarbutton > toolbarbutton { +.widget-overflow-list .toolbarbutton-1, +.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button { -moz-box-align: center; -moz-box-orient: horizontal; } -#widget-overflow-list > toolbarbutton > .toolbarbutton-text, -#widget-overflow-list > #bookmarks-menu-button > toolbarbutton > .toolbarbutton-text { +.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-text, +.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text { text-align: start; -moz-padding-start: .5em; } -#widget-overflow-list > #edit-controls, -#widget-overflow-list > #zoom-controls { +#widget-overflow-list > .toolbaritem-combined-buttons { min-height: 28px; } -#PanelUI-developerItems > toolbarbutton[checked="true"], -#PanelUI-bookmarks > toolbarbutton[checked="true"], -.PanelUI-characterEncodingView-list > toolbarbutton[current] { - -moz-padding-start: 4px; +.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after { + content: ""; + display: -moz-box; + width: 1px; + height: 18px; + -moz-margin-end: -1px; } -#PanelUI-developerItems > toolbarbutton[checked="true"] > .toolbarbutton-text, -#PanelUI-bookmarks > toolbarbutton[checked="true"] > .toolbarbutton-text, -.PanelUI-characterEncodingView-list > toolbarbutton[current] > .toolbarbutton-text, -#customizationui-widget-panel .PanelUI-characterEncodingView-list > toolbarbutton[current] > .toolbarbutton-text { - -moz-padding-start: 0px; +.subviewbutton[checked="true"] { + background-image: url("chrome://global/skin/menu/menu-check.gif"); + background-position: top 5px left 4px; + background-repeat: no-repeat; } -#BMB_bookmarksPopup > menuitem[checked="true"]::before, -#PanelUI-bookmarks > toolbarbutton[checked="true"]::before, -#PanelUI-developerItems > toolbarbutton[checked="true"]::before, -.PanelUI-characterEncodingView-list > toolbarbutton[current]::before { - content: "✓"; - display: -moz-box; - width: 12px; +.subviewbutton[checked="true"]:hover { + background-image: url("chrome://global/skin/menu/menu-check-hover.gif"); } -#PanelUI-bookmarks > toolbarbutton[checked="true"]::before, -#PanelUI-developerItems > toolbarbutton[checked="true"]::before, -.PanelUI-characterEncodingView-list > toolbarbutton[current]::before { - -moz-margin-end: -2px; +.PanelUI-subView .menu-iconic-left { + -moz-appearance: none; + -moz-margin-end: 3px; } - -#BMB_bookmarksPopup > menuitem[checked="true"] > .menu-iconic-left { - display: none; + +.PanelUI-subView menuitem[checked="true"] > .menu-iconic-left { + visibility: hidden; } /* === END panelUIOverlay.inc.css === */ @@ -551,17 +869,79 @@ toolbarpaletteitem[place="palette"] > #search-container { padding-right: 12px; } -#BMB_bookmarksPopup > menu, -#BMB_bookmarksPopup > menuitem { - padding-top: 1px; - padding-bottom: 1px; +/* bookmark panel submenus */ + +#BMB_bookmarksPopup menupopup { + background: transparent; + border: none; + padding: 6px; } -#BMB_bookmarksPopup > menu > .menu-text, -#BMB_bookmarksPopup > menuitem > .menu-text, -#BMB_bookmarksPopup > menu > .menu-iconic-text, -#BMB_bookmarksPopup > menuitem > .menu-iconic-text, -#BMB_bookmarksPopup > menuseparator { +#BMB_bookmarksPopup menupopup > hbox { + /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */ +/* background: #FFF; + border: 1px solid rgba(0,0,0,0.25); + border-radius: 3.5px; + margin-top: -4px;*/ +} + +#BMB_bookmarksPopup .menu-text { +/* color: #000;*/ +} + +/* bookmark panel separator */ +#BMB_bookmarksPopup menuseparator { padding-top: 0; padding-bottom: 0; } + +.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button { + -moz-appearance: none; + border: 0; + -moz-margin-start: 3px; +} + +.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { + padding: 0 2px; + -moz-padding-start: 0; + height: 18px; +} + +.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { + padding: 0 6px; +} + +.subviewbutton > .toolbarbutton-text { + -moz-padding-start: 16px; +} + +.subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text { + -moz-padding-start: 0; +} + +.subviewbutton.bookmark-item > .toolbarbutton-icon { + -moz-margin-start: 3px; +} + +/* subviewbutton entries for social sidebars have images that come from external +/* sources, and are not guaranteed to be the size we want, so force the size on +/* those icons. */ +toolbarbutton.social-provider-menuitem > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +.subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon { + visibility: hidden; +} +/* +menu.subviewbutton > .menu-right { + -moz-appearance: none; + list-style-image: url("chrome://browser/skin/places/bookmarks-menu-arrow.png"); + -moz-image-region: rect(0, 16px, 16px, 0); +} + +menu[disabled="true"].subviewbutton > .menu-right { + -moz-image-region: rect(0, 32px, 16px, 16px); +} +*/ \ No newline at end of file