michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: /* Customization mode */
michael@0: 
michael@0: #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
michael@0:   margin-bottom: 2em;
michael@0: }
michael@0: 
michael@0: #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
michael@0: #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
michael@0: #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
michael@0:   margin-left: 2em;
michael@0:   margin-right: 2em;
michael@0: }
michael@0: 
michael@0: #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
michael@0:   pointer-events: none;
michael@0: }
michael@0: 
michael@0: #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
michael@0: #PanelUI-contents > .panel-customization-placeholder {
michael@0:   -moz-outline-radius: 2.5px;
michael@0:   outline: 1px dashed transparent;
michael@0: }
michael@0: 
michael@0: #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
michael@0:   /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
michael@0:   -moz-box-ordinal-group: 0;
michael@0:   content: "";
michael@0:   display: -moz-box;
michael@0:   height: 100%;
michael@0:   left: 0;
michael@0:   outline-offset: -2px;
michael@0:   pointer-events: none;
michael@0:   position: absolute;
michael@0:   top: 0;
michael@0:   width: 100%;
michael@0: }
michael@0: 
michael@0: /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
michael@0:    #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
michael@0:    offset from the bottom effectively the same as other targets (-2px). */
michael@0: #main-window[customize-entered] #TabsToolbar.customization-target::before {
michael@0:   top: -2px;
michael@0: }
michael@0: 
michael@0: /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
michael@0: #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
michael@0: #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
michael@0: #main-window[customize-entered] #nav-bar-customization-target.customization-target {
michael@0:   position: relative;
michael@0: }
michael@0: 
michael@0: /* Most target outlines are shown on hover and drag over but the panel menu uses
michael@0:    placeholders instead. */
michael@0: #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
michael@0: #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
michael@0: /* nav-bar and panel outlines are always shown */
michael@0: #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
michael@0:   outline-color: rgb(102,102,102);
michael@0: }
michael@0: 
michael@0: #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
michael@0:   transition: outline-color 250ms linear;
michael@0: }
michael@0: 
michael@0: #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
michael@0:   transition: outline-color 250ms linear;
michael@0:   outline-color: #bbb;
michael@0: }
michael@0: 
michael@0: #PanelUI-contents > .panel-customization-placeholder {
michael@0:   cursor: auto;
michael@0:   outline-offset: -5px;
michael@0: }
michael@0: 
michael@0: #main-window[customizing] .customization-target:not(#PanelUI-contents) {
michael@0:   min-width: 100px;
michael@0:   padding-left: 10px;
michael@0:   padding-right: 10px;
michael@0: }
michael@0: 
michael@0: #customization-container {
michael@0:   background-color: rgb(247,247,247);
michael@0: }
michael@0: 
michael@0: #customization-palette,
michael@0: #customization-empty {
michael@0:   padding: 0 25px 25px;
michael@0: }
michael@0: 
michael@0: #customization-header {
michael@0:   font-size: 1.5em;
michael@0:   line-height: 1.5em;
michael@0:   color: rgb(64,100,128);
michael@0:   font-weight: lighter;
michael@0:   margin-bottom: 1em;
michael@0:   padding: 25px 25px 0;
michael@0: }
michael@0: 
michael@0: #customization-panel-container {
michael@0:   padding: 15px 25px 25px;
michael@0:   background-image: linear-gradient(to bottom, #3e86ce, #3878ba);
michael@0: }
michael@0: 
michael@0: #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
michael@0: #customization-footer {
michael@0:   background-color: rgb(236,236,236);
michael@0: }
michael@0: 
michael@0: #customization-footer {
michael@0:   border-top: 1px solid rgb(221,221,221);
michael@0:   padding: 15px;
michael@0: }
michael@0: 
michael@0: .customizationmode-button {
michael@0:   border: 1px solid rgb(192,192,192);
michael@0:   border-radius: 3px;
michael@0:   margin: 0;
michael@0:   padding: 2px 12px;
michael@0:   background-color: rgb(251,251,251);
michael@0:   color: rgb(71,71,71);
michael@0:   box-shadow: 0 1px rgba(255, 255, 255, 0.5),
michael@0:               inset 0 1px rgba(255, 255, 255, 0.5);
michael@0:   -moz-appearance: none;
michael@0: }
michael@0: 
michael@0: .customizationmode-button[disabled="true"] {
michael@0:   opacity: .5;
michael@0: }
michael@0: 
michael@0: #customization-titlebar-visibility-button {
michael@0:   list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
michael@0:   -moz-image-region: rect(0, 24px, 24px, 0);
michael@0:   padding: 2px 7px;
michael@0:   -moz-margin-end: 10px;
michael@0: }
michael@0: 
michael@0: #customization-titlebar-visibility-button > .button-box > .button-text {
michael@0:   /* Sadly, button.css thinks its margins are perfect for everyone. */
michael@0:   -moz-margin-start: 6px !important;
michael@0: }
michael@0: 
michael@0: #customization-titlebar-visibility-button[checked] {
michael@0:   -moz-image-region: rect(0, 48px, 24px, 24px);
michael@0:   background-color: rgb(218, 218, 218);
michael@0:   border-color: rgb(168, 168, 168);
michael@0:   text-shadow: 0 1px rgb(236, 236, 236);
michael@0:   box-shadow: 0 1px rgba(255, 255, 255, 0.5),
michael@0:               inset 0 1px rgb(196, 196, 196);
michael@0: }
michael@0: 
michael@0: #customization-undo-reset-button {
michael@0:   -moz-margin-end: 10px;
michael@0: }
michael@0: 
michael@0: #main-window[customize-entered] #customization-panel-container {
michael@0:   background-image: url("chrome://browser/skin/customizableui/customizeMode-separatorHorizontal.png"),
michael@0:                     url("chrome://browser/skin/customizableui/customizeMode-separatorVertical.png"),
michael@0:                     url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"),
michael@0:                     url("chrome://browser/skin/customizableui/background-noise-toolbar.png"),
michael@0:                     linear-gradient(to bottom, #3e86ce, #3878ba);
michael@0:   background-position: center top, left center, left top, left top, left top;
michael@0:   background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat;
michael@0:   background-size: auto 12px, 12px 100%, auto, auto, auto;
michael@0:   background-attachment: scroll, scroll, fixed, fixed, scroll;
michael@0: }
michael@0: 
michael@0: toolbarpaletteitem[place="toolbar"] {
michael@0:   transition: border-width 250ms ease-in-out;
michael@0: }
michael@0: 
michael@0: toolbarpaletteitem[mousedown] {
michael@0:   cursor: -moz-grabbing;
michael@0: }
michael@0: 
michael@0: .panel-customization-placeholder,
michael@0: toolbarpaletteitem[place="palette"],
michael@0: toolbarpaletteitem[place="panel"] {
michael@0:   transition: transform .3s ease-in-out;
michael@0: }
michael@0: 
michael@0: #customization-palette {
michael@0:   transition: opacity .3s ease-in-out;
michael@0:   opacity: 0;
michael@0: }
michael@0: 
michael@0: #customization-palette[showing="true"] {
michael@0:   opacity: 1;
michael@0: }
michael@0: 
michael@0: toolbarpaletteitem[notransition].panel-customization-placeholder,
michael@0: toolbarpaletteitem[notransition][place="toolbar"],
michael@0: toolbarpaletteitem[notransition][place="palette"],
michael@0: toolbarpaletteitem[notransition][place="panel"] {
michael@0:   transition: none;
michael@0: }
michael@0: 
michael@0: toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
michael@0: toolbarpaletteitem > toolbaritem.panel-wide-item,
michael@0: toolbarpaletteitem > toolbarbutton[type="menu-button"] {
michael@0:   transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
michael@0: }
michael@0: 
michael@0: toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon {
michael@0:   transform: scale(1.3);
michael@0: }
michael@0: 
michael@0: toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
michael@0: toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
michael@0:   transform: scale(1.1);
michael@0: }
michael@0: 
michael@0: /* Override the toolkit styling for items being dragged over. */
michael@0: toolbarpaletteitem[place="toolbar"] {
michael@0:   border-left-width: 0;
michael@0:   border-right-width: 0;
michael@0:   margin-right: 0;
michael@0:   margin-left: 0;
michael@0: }
michael@0: 
michael@0: #customization-palette:not([hidden]) {
michael@0:   margin-bottom: 25px;
michael@0: }
michael@0: 
michael@0: #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
michael@0: #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
michael@0: #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
michael@0: #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
michael@0:   margin-top: 20px;
michael@0: }
michael@0: 
michael@0: #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
michael@0: #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
michael@0:   margin-left: 0;
michael@0:   margin-right: 0;
michael@0:   max-width: 24px;
michael@0:   min-width: 24px;
michael@0:   max-height: 24px;
michael@0:   min-height: 24px;
michael@0:   padding: 4px;
michael@0: }
michael@0: 
michael@0: #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
michael@0: #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
michael@0:   width: 16px;
michael@0: }
michael@0: 
michael@0: #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
michael@0:   opacity: 1; /* To ensure these buttons always look enabled in customize mode */
michael@0: }
michael@0: 
michael@0: #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
michael@0: #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
michael@0:   -moz-box-pack: center;
michael@0:   min-height: 48px;
michael@0: }
michael@0: 
michael@0: #customization-palette > toolbarpaletteitem > label {
michael@0:   text-align: center;
michael@0:   margin-left: 0;
michael@0:   margin-right: 0;
michael@0: }
michael@0: 
michael@0: %include customizeTip.inc.css