2 /* Customization mode */
3 #nav-bar[customize-entered] > #nav-bar-customization-target {
7 #nav-bar[customize-entered] > #nav-bar-customization-target,
8 #PanelUI-contents > .panel-customization-placeholder {
9 outline: 1px dashed transparent;
12 #main-window[customizing-movingItem] #nav-bar-customization-target,
13 #main-window[customizing-movingItem] .panel-customization-placeholder {
14 outline-color: #9C9CFF;
17 #PanelUI-contents > .panel-customization-placeholder {
22 #main-window[customize-entered] .customization-target {
28 #customization-container {
29 background-color: #000000;
32 #customization-palette-container {
36 #customization-header {
44 #customization-panel-container {
45 padding: 10px 10px 0px;
46 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
47 background-position: left top;
48 background-repeat: repeat;
49 background-size: auto;
50 background-attachment: fixed;
54 transition: background-color, border-color, box-shadow, border-width;
55 transition-duration: 10ms, 10ms, 10ms, 250ms;
56 transition-timing-function: linear, linear, linear, ease-in-out;
59 toolbarpaletteitem[mousedown] {
60 outline: 1px solid #008484;
61 cursor: -moz-grabbing;
65 .panel-customization-placeholder,
66 toolbarpaletteitem[place="palette"],
67 toolbarpaletteitem[place="panel"] {
68 transition: background-color, border-color, box-shadow, transform;
69 transition-duration: 10ms, 10ms, 10ms, 250ms;
70 transition-timing-function: linear, linear, linear, ease-in-out;
73 toolbarpaletteitem[notransition][place="palette"],
74 toolbarpaletteitem[notransition][place="panel"] {
75 transition: background-color, border-color, box-shadow;
76 transition-duration: 10ms, 10ms, 10ms;
77 transition-timing-function: linear, linear, linear;
80 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon {
81 transition: transform 50ms ease-in-out;
84 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon {
85 transform: scale(1.1);
88 /* Override the toolkit styling for items being dragged over. */
89 toolbarpaletteitem[place="toolbar"] {
91 border-right-width: 0;
96 #customization-palette:not([hidden]) {
100 /* Remove |:-moz-any(#customization-palette, #panelUI-contents)| selector when Australis lands - this makes it only apply post-Australis as those elements only exist there */
101 #customization-palette > #wrapper-edit-controls,
102 :-moz-any(#customization-palette, #panelUI-contents) > #customization-palette > #wrapper-zoom-controls {
106 #wrapper-edit-controls[place="palette"] > .toolbarpaletteitem-box,
107 #wrapper-zoom-controls[place="palette"] > .toolbarpaletteitem-box {
112 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
113 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
114 :-moz-any(#customization-palette, #panelUI-contents) > #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
115 :-moz-any(#customization-palette, #panelUI-contents) > #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
119 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
120 :-moz-any(#customization-palette, #panelUI-contents) > #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
129 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-text,
130 :-moz-any(#customization-palette, #panelUI-contents) > #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button > .toolbarbutton-text {
134 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
135 :-moz-any(#customization-palette, #panelUI-contents) > #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
137 -moz-margin-start: 5px;
140 #customization-palette > toolbarpaletteitem > label {