From: Robert Kaiser Date: Mon, 17 Mar 2014 02:01:27 +0000 (+0100) Subject: more Australis update work X-Git-Tag: LCARStrek-2.25~3 X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=commitdiff_plain;h=e28f3f71465fc35bd3c71fae071ff71890271323 more Australis update work --- diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css index 61d7ba15..761dab91 100644 --- a/LCARStrek/browser/browser.css +++ b/LCARStrek/browser/browser.css @@ -4420,17 +4420,69 @@ notification.pluginVulnerable .messageImage { /* === BEGIN customizeMode.inc.css === */ /* Customization mode */ -#nav-bar[customize-entered] > #nav-bar-customization-target { - margin: 1px 3px; + +#main-window:-moz-any([customize-entering],[customize-entered]) #content-deck { + margin: 0 1em 1em; +} + +#main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox { + margin-left: 1em; + margin-right: 1em; } -#nav-bar[customize-entered] > #nav-bar-customization-target, +#main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck { + pointer-events: none; +} + +#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before, #PanelUI-contents > .panel-customization-placeholder { + -moz-outline-radius: 2.5px; outline: 1px dashed transparent; } -#main-window[customizing-movingItem] #nav-bar-customization-target, -#main-window[customizing-movingItem] .panel-customization-placeholder { +#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before { + /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */ + -moz-box-ordinal-group: 0; + content: ""; + display: -moz-box; + height: 100%; + left: 0; + outline-offset: -2px; + pointer-events: none; + position: absolute; + top: 0; + width: 100%; +} + +/* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the + #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the + offset from the bottom effectively the same as other targets (-2px). */ +#main-window[customize-entered] #TabsToolbar.customization-target::before { + top: -2px; +} + +/* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */ +#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover, +#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)), +#main-window[customize-entered] #nav-bar-customization-target.customization-target { + position: relative; +} + +/* Most target outlines are shown on hover and drag over but the panel menu uses + placeholders instead. */ +#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before, +#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before, +/* nav-bar and panel outlines are always shown */ +#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before { + outline-color: #A09090; +} + +#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before { + transition: outline-color 250ms linear; +} + +#PanelUI-contents[showoutline=true] > .panel-customization-placeholder { + transition: outline-color 250ms linear; outline-color: #9C9CFF; } @@ -4439,7 +4491,7 @@ notification.pluginVulnerable .messageImage { outline-offset: -5px; } -#main-window[customize-entered] .customization-target { +#main-window[customizing] .customization-target:not(#PanelUI-contents) { min-width: 100px; padding-left: 10px; padding-right: 10px; @@ -4449,8 +4501,9 @@ notification.pluginVulnerable .messageImage { background-color: #000000; } -#customization-palette-container { - padding: 25px; +#customization-palette, +#customization-empty { + padding: 0 15px 15px; } #customization-header { @@ -4459,10 +4512,51 @@ notification.pluginVulnerable .messageImage { color: #9C9CFF; font-weight: lighter; margin-bottom: 1em; + padding: 15px 15px 0; } #customization-panel-container { - padding: 15px 25px 25px; + padding: 10px 10px 0px; +} + +#customization-footer { + /*background-color: rgb(236,236,236);*/ + border-top: 1px solid #9C9CFF; + padding: 15px; +} + +.customizationmode-button { + margin: 0; +} + +.customizationmode-button:hover { +} + +.customizationmode-button[disabled="true"] { +} + +#customization-titlebar-visibility-button { + list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png"); + -moz-image-region: rect(0, 24px, 24px, 0); + padding: 2px 7px; + -moz-margin-end: 10px; +} + +#customization-titlebar-visibility-button > .button-box > .button-text { + /* Sadly, button.css thinks its margins are perfect for everyone. */ + -moz-margin-start: 6px !important; +} + +#customization-titlebar-visibility-button[checked] { + -moz-image-region: rect(0, 48px, 24px, 24px); + background-color: #008484; +} + +#customization-undo-reset-button { + -moz-margin-end: 10px; +} + +#main-window[customize-entered] #customization-panel-container { background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"); background-position: left top; background-repeat: repeat; @@ -4470,10 +4564,8 @@ notification.pluginVulnerable .messageImage { background-attachment: fixed; } -toolbarpaletteitem { - transition: background-color, border-color, box-shadow, border-width; - transition-duration: 10ms, 10ms, 10ms, 250ms; - transition-timing-function: linear, linear, linear, ease-in-out; +toolbarpaletteitem[place="toolbar"] { + transition: border-width 250ms ease-in-out; } toolbarpaletteitem[mousedown] { @@ -4485,23 +4577,37 @@ toolbarpaletteitem[mousedown] { .panel-customization-placeholder, toolbarpaletteitem[place="palette"], toolbarpaletteitem[place="panel"] { - transition: background-color, border-color, box-shadow, transform; - transition-duration: 10ms, 10ms, 10ms, 250ms; - transition-timing-function: linear, linear, linear, ease-in-out; + transition: transform .3s ease-in-out; +} + +#customization-palette { + transition: opacity .3s ease-in-out; + opacity: 0; } +#customization-palette[showing="true"] { + opacity: 1; +} + +toolbarpaletteitem[notransition].panel-customization-placeholder, +toolbarpaletteitem[notransition][place="toolbar"], toolbarpaletteitem[notransition][place="palette"], toolbarpaletteitem[notransition][place="panel"] { - transition: background-color, border-color, box-shadow; - transition-duration: 10ms, 10ms, 10ms; - transition-timing-function: linear, linear, linear; + transition: none; } -toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon { - transition: transform 50ms ease-in-out; +toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon, +toolbarpaletteitem > toolbaritem.panel-wide-item, +toolbarpaletteitem > toolbarbutton[type="menu-button"] { + transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important; } toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon { + transform: scale(1.3); +} + +toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item, +toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] { transform: scale(1.1); } @@ -4517,44 +4623,42 @@ toolbarpaletteitem[place="toolbar"] { margin-bottom: 25px; } -/* Remove |:-moz-any(#customization-palette, #panelUI-contents)| selector when Australis lands - this makes it only apply post-Australis as those elements only exist there */ -#customization-palette > #wrapper-edit-controls, -:-moz-any(#customization-palette, #panelUI-contents) > #customization-palette > #wrapper-zoom-controls { - width: 225px; -} - -#wrapper-edit-controls[place="palette"] > .toolbarpaletteitem-box, -#wrapper-zoom-controls[place="palette"] > .toolbarpaletteitem-box { - width: 225px; - max-width: 225px; -} - #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton, #wrapper-edit-controls[place="palette"] > #edit-controls > separator, -:-moz-any(#customization-palette, #panelUI-contents) > #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton, -:-moz-any(#customization-palette, #panelUI-contents) > #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator { - margin-top: 24px; +#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton, +#wrapper-zoom-controls[place="palette"] > #zoom-controls > separator { + margin-top: 20px; } +/* Remove |:-moz-any(#customization-palette, #panelUI-contents)| selector when Australis lands - this makes it only apply post-Australis as those elements only exist there */ #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton, :-moz-any(#customization-palette, #panelUI-contents) > #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton { margin-left: 0; margin-right: 0; - max-width: 70px; - min-width: 70px; + max-width: 24px; + min-width: 24px; max-height: 24px; height: 24px; + padding: 4px; } -#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-text, -:-moz-any(#customization-palette, #panelUI-contents) > #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button > .toolbarbutton-text { - display: inline; +#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon, +#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon { + width: 16px; } -#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon, -:-moz-any(#customization-palette, #panelUI-contents) > #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon { - margin: 0; - -moz-margin-start: 5px; +#wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon { + opacity: 1; /* To ensure these buttons always look enabled in customize mode */ +} + +:-moz-any(#customization-palette, #panelUI-contents) > #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button, +:-moz-any(#customization-palette, #panelUI-contents) > #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator { + display: none; +} + +#wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks { + -moz-box-pack: center; + min-height: 48px; } #customization-palette > toolbarpaletteitem > label { @@ -4565,6 +4669,82 @@ toolbarpaletteitem[place="toolbar"] { /* === END customizeMode.inc.css === */ +/* === BEGIN customizeTip.inc.css === */ + +#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; + margin: 0; + min-width: 400px; + max-width: 1000px; + min-height: 200px; + border-radius: 3px; +/* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/ + border: 1px solid #9C9CFF; +} + +#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) { +/* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/ +} + +.customization-tipPanel-infoBox { + margin: 20px 25px 25px; + width: 25px; + background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png"); + background-repeat: no-repeat; +} + +.customization-tipPanel-content { + margin: 25px 0; + font-size: 12px; + line-height: 18px; +} + +.customization-tipPanel-em { + margin: 0; + font-weight: bold; +} + +.customization-tipPanel-contentImage { + margin-top: 25px; + list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png"); + min-width: 300px; + max-width: 300px; + min-height: 190px; + max-height: 190px; + display: -moz-box; +} + +.customization-tipPanel-contentImage:-moz-locale-dir(rtl) { + list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png"); +} + +.customization-tipPanel-link { + -moz-appearance: none; + background: transparent; + border: none; + box-shadow: none; + color: #3333FF; + margin: 0; + cursor: pointer; +} + +.customization-tipPanel-link > .button-box > .button-text { + margin: 0 !important; +} + +.customization-tipPanel-closeBox > .close-icon { + -moz-appearance: none; + border: 0; + -moz-margin-end: -25px; +} + +#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"], +#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] { + list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png"); +} + +/* === END customizeTip.inc.css === */ + #main-window[customizing] { background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"); background-attachment: fixed; diff --git a/LCARStrek/browser/customizableui/customize-illustration-rtl.png b/LCARStrek/browser/customizableui/customize-illustration-rtl.png new file mode 100644 index 00000000..42ef805b Binary files /dev/null and b/LCARStrek/browser/customizableui/customize-illustration-rtl.png differ diff --git a/LCARStrek/browser/customizableui/customize-illustration.png b/LCARStrek/browser/customizableui/customize-illustration.png new file mode 100644 index 00000000..b71fe496 Binary files /dev/null and b/LCARStrek/browser/customizableui/customize-illustration.png differ diff --git a/LCARStrek/browser/customizableui/customize-titleBar-toggle.png b/LCARStrek/browser/customizableui/customize-titleBar-toggle.png new file mode 100644 index 00000000..230d7d1e Binary files /dev/null and b/LCARStrek/browser/customizableui/customize-titleBar-toggle.png differ diff --git a/LCARStrek/browser/customizableui/info-icon-customizeTip.png b/LCARStrek/browser/customizableui/info-icon-customizeTip.png new file mode 100644 index 00000000..ef70e1ed Binary files /dev/null and b/LCARStrek/browser/customizableui/info-icon-customizeTip.png differ diff --git a/LCARStrek/browser/customizableui/menuPanel-customizeFinish.png b/LCARStrek/browser/customizableui/menuPanel-customizeFinish.png new file mode 100644 index 00000000..ed1367e5 Binary files /dev/null and b/LCARStrek/browser/customizableui/menuPanel-customizeFinish.png differ diff --git a/LCARStrek/browser/customizableui/panelUIOverlay.css b/LCARStrek/browser/customizableui/panelUIOverlay.css index cb3d4650..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,8 +32,43 @@ -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 { - background-color: #000000; display: flex; flex-direction: column; border-radius: 4px; @@ -81,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; @@ -99,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; @@ -191,35 +321,65 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { #PanelUI-footer { display: flex; - 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,76 +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 { } -#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; +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-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: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) { +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%) +} + +.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; } @@ -349,14 +610,55 @@ 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 { list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); } @@ -368,51 +670,77 @@ panelview toolbarseparator, height: 16px; } -#PanelUI-footer.panel-multiview-anchor, -#PanelUI-footer.panel-multiview-anchor > #PanelUI-help, -toolbarbutton.panel-multiview-anchor { +#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) { +.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: 1px; + 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; */ } @@ -436,20 +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; } +.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; } @@ -468,57 +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-history > 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-history > 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-history > 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-history > 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 === */ @@ -533,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 diff --git a/LCARStrek/browser/customizableui/subView-arrow-back-inverted-rtl.png b/LCARStrek/browser/customizableui/subView-arrow-back-inverted-rtl.png new file mode 100644 index 00000000..c8dee289 Binary files /dev/null and b/LCARStrek/browser/customizableui/subView-arrow-back-inverted-rtl.png differ diff --git a/LCARStrek/browser/customizableui/subView-arrow-back-inverted.png b/LCARStrek/browser/customizableui/subView-arrow-back-inverted.png new file mode 100644 index 00000000..dcc17fa7 Binary files /dev/null and b/LCARStrek/browser/customizableui/subView-arrow-back-inverted.png differ diff --git a/LCARStrek/browser/sync-horizontalbar.png b/LCARStrek/browser/sync-horizontalbar.png new file mode 100644 index 00000000..beead7d3 Binary files /dev/null and b/LCARStrek/browser/sync-horizontalbar.png differ diff --git a/LCARStrek/browser/syncProgress-horizontalbar.png b/LCARStrek/browser/syncProgress-horizontalbar.png new file mode 100644 index 00000000..396723c9 Binary files /dev/null and b/LCARStrek/browser/syncProgress-horizontalbar.png differ diff --git a/LCARStrek/customizemode.inc.css b/LCARStrek/customizemode.inc.css new file mode 100644 index 00000000..8f09dc94 --- /dev/null +++ b/LCARStrek/customizemode.inc.css @@ -0,0 +1,145 @@ + +/* Customization mode */ +#nav-bar[customize-entered] > #nav-bar-customization-target { + margin: 1px 3px; +} + +#nav-bar[customize-entered] > #nav-bar-customization-target, +#PanelUI-contents > .panel-customization-placeholder { + outline: 1px dashed transparent; +} + +#main-window[customizing-movingItem] #nav-bar-customization-target, +#main-window[customizing-movingItem] .panel-customization-placeholder { + outline-color: #9C9CFF; +} + +#PanelUI-contents > .panel-customization-placeholder { + cursor: auto; + outline-offset: -5px; +} + +#main-window[customize-entered] .customization-target { + min-width: 100px; + padding-left: 10px; + padding-right: 10px; +} + +#customization-container { + background-color: #000000; +} + +#customization-palette-container { + padding: 15px; +} + +#customization-header { + font-size: 1.5em; + line-height: 1.5em; + color: #9C9CFF; + font-weight: lighter; + margin-bottom: 1em; +} + +#customization-panel-container { + padding: 10px 10px 0px; + background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"); + background-position: left top; + background-repeat: repeat; + background-size: auto; + background-attachment: fixed; +} + +toolbarpaletteitem { + transition: background-color, border-color, box-shadow, border-width; + transition-duration: 10ms, 10ms, 10ms, 250ms; + transition-timing-function: linear, linear, linear, ease-in-out; +} + +toolbarpaletteitem[mousedown] { + outline: 1px solid #008484; + cursor: -moz-grabbing; + opacity: 0.8; +} + +.panel-customization-placeholder, +toolbarpaletteitem[place="palette"], +toolbarpaletteitem[place="panel"] { + transition: background-color, border-color, box-shadow, transform; + transition-duration: 10ms, 10ms, 10ms, 250ms; + transition-timing-function: linear, linear, linear, ease-in-out; +} + +toolbarpaletteitem[notransition][place="palette"], +toolbarpaletteitem[notransition][place="panel"] { + transition: background-color, border-color, box-shadow; + transition-duration: 10ms, 10ms, 10ms; + transition-timing-function: linear, linear, linear; +} + +toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon { + transition: transform 50ms ease-in-out; +} + +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon { + transform: scale(1.1); +} + +/* Override the toolkit styling for items being dragged over. */ +toolbarpaletteitem[place="toolbar"] { + border-left-width: 0; + border-right-width: 0; + margin-right: 0; + margin-left: 0; +} + +#customization-palette:not([hidden]) { + margin-bottom: 25px; +} + +/* Remove |:-moz-any(#customization-palette, #panelUI-contents)| selector when Australis lands - this makes it only apply post-Australis as those elements only exist there */ +#customization-palette > #wrapper-edit-controls, +:-moz-any(#customization-palette, #panelUI-contents) > #customization-palette > #wrapper-zoom-controls { + width: 225px; +} + +#wrapper-edit-controls[place="palette"] > .toolbarpaletteitem-box, +#wrapper-zoom-controls[place="palette"] > .toolbarpaletteitem-box { + width: 225px; + max-width: 225px; +} + +#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton, +#wrapper-edit-controls[place="palette"] > #edit-controls > separator, +:-moz-any(#customization-palette, #panelUI-contents) > #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton, +:-moz-any(#customization-palette, #panelUI-contents) > #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator { + margin-top: 24px; +} + +#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton, +:-moz-any(#customization-palette, #panelUI-contents) > #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton { + margin-left: 0; + margin-right: 0; + max-width: 70px; + min-width: 70px; + max-height: 24px; + height: 24px; +} + +#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-text, +:-moz-any(#customization-palette, #panelUI-contents) > #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button > .toolbarbutton-text { + display: inline; +} + +#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon, +:-moz-any(#customization-palette, #panelUI-contents) > #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon { + margin: 0; + -moz-margin-start: 5px; +} + +#customization-palette > toolbarpaletteitem > label { + text-align: center; + margin-left: 0; + margin-right: 0; +} +