Wed, 31 Dec 2014 07:22:50 +0100
Correct previous dual key logic pending first delivery installment.
michael@0 | 1 | /* This Source Code Form is subject to the terms of the Mozilla Public |
michael@0 | 2 | * License, v. 2.0. If a copy of the MPL was not distributed with this |
michael@0 | 3 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ |
michael@0 | 4 | |
michael@0 | 5 | /* Customization mode */ |
michael@0 | 6 | |
michael@0 | 7 | #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox { |
michael@0 | 8 | margin-bottom: 2em; |
michael@0 | 9 | } |
michael@0 | 10 | |
michael@0 | 11 | #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck, |
michael@0 | 12 | #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox, |
michael@0 | 13 | #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox { |
michael@0 | 14 | margin-left: 2em; |
michael@0 | 15 | margin-right: 2em; |
michael@0 | 16 | } |
michael@0 | 17 | |
michael@0 | 18 | #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck { |
michael@0 | 19 | pointer-events: none; |
michael@0 | 20 | } |
michael@0 | 21 | |
michael@0 | 22 | #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before, |
michael@0 | 23 | #PanelUI-contents > .panel-customization-placeholder { |
michael@0 | 24 | -moz-outline-radius: 2.5px; |
michael@0 | 25 | outline: 1px dashed transparent; |
michael@0 | 26 | } |
michael@0 | 27 | |
michael@0 | 28 | #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before { |
michael@0 | 29 | /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */ |
michael@0 | 30 | -moz-box-ordinal-group: 0; |
michael@0 | 31 | content: ""; |
michael@0 | 32 | display: -moz-box; |
michael@0 | 33 | height: 100%; |
michael@0 | 34 | left: 0; |
michael@0 | 35 | outline-offset: -2px; |
michael@0 | 36 | pointer-events: none; |
michael@0 | 37 | position: absolute; |
michael@0 | 38 | top: 0; |
michael@0 | 39 | width: 100%; |
michael@0 | 40 | } |
michael@0 | 41 | |
michael@0 | 42 | /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the |
michael@0 | 43 | #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the |
michael@0 | 44 | offset from the bottom effectively the same as other targets (-2px). */ |
michael@0 | 45 | #main-window[customize-entered] #TabsToolbar.customization-target::before { |
michael@0 | 46 | top: -2px; |
michael@0 | 47 | } |
michael@0 | 48 | |
michael@0 | 49 | /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */ |
michael@0 | 50 | #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover, |
michael@0 | 51 | #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)), |
michael@0 | 52 | #main-window[customize-entered] #nav-bar-customization-target.customization-target { |
michael@0 | 53 | position: relative; |
michael@0 | 54 | } |
michael@0 | 55 | |
michael@0 | 56 | /* Most target outlines are shown on hover and drag over but the panel menu uses |
michael@0 | 57 | placeholders instead. */ |
michael@0 | 58 | #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before, |
michael@0 | 59 | #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before, |
michael@0 | 60 | /* nav-bar and panel outlines are always shown */ |
michael@0 | 61 | #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before { |
michael@0 | 62 | outline-color: rgb(102,102,102); |
michael@0 | 63 | } |
michael@0 | 64 | |
michael@0 | 65 | #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before { |
michael@0 | 66 | transition: outline-color 250ms linear; |
michael@0 | 67 | } |
michael@0 | 68 | |
michael@0 | 69 | #PanelUI-contents[showoutline=true] > .panel-customization-placeholder { |
michael@0 | 70 | transition: outline-color 250ms linear; |
michael@0 | 71 | outline-color: #bbb; |
michael@0 | 72 | } |
michael@0 | 73 | |
michael@0 | 74 | #PanelUI-contents > .panel-customization-placeholder { |
michael@0 | 75 | cursor: auto; |
michael@0 | 76 | outline-offset: -5px; |
michael@0 | 77 | } |
michael@0 | 78 | |
michael@0 | 79 | #main-window[customizing] .customization-target:not(#PanelUI-contents) { |
michael@0 | 80 | min-width: 100px; |
michael@0 | 81 | padding-left: 10px; |
michael@0 | 82 | padding-right: 10px; |
michael@0 | 83 | } |
michael@0 | 84 | |
michael@0 | 85 | #customization-container { |
michael@0 | 86 | background-color: rgb(247,247,247); |
michael@0 | 87 | } |
michael@0 | 88 | |
michael@0 | 89 | #customization-palette, |
michael@0 | 90 | #customization-empty { |
michael@0 | 91 | padding: 0 25px 25px; |
michael@0 | 92 | } |
michael@0 | 93 | |
michael@0 | 94 | #customization-header { |
michael@0 | 95 | font-size: 1.5em; |
michael@0 | 96 | line-height: 1.5em; |
michael@0 | 97 | color: rgb(64,100,128); |
michael@0 | 98 | font-weight: lighter; |
michael@0 | 99 | margin-bottom: 1em; |
michael@0 | 100 | padding: 25px 25px 0; |
michael@0 | 101 | } |
michael@0 | 102 | |
michael@0 | 103 | #customization-panel-container { |
michael@0 | 104 | padding: 15px 25px 25px; |
michael@0 | 105 | background-image: linear-gradient(to bottom, #3e86ce, #3878ba); |
michael@0 | 106 | } |
michael@0 | 107 | |
michael@0 | 108 | #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox, |
michael@0 | 109 | #customization-footer { |
michael@0 | 110 | background-color: rgb(236,236,236); |
michael@0 | 111 | } |
michael@0 | 112 | |
michael@0 | 113 | #customization-footer { |
michael@0 | 114 | border-top: 1px solid rgb(221,221,221); |
michael@0 | 115 | padding: 15px; |
michael@0 | 116 | } |
michael@0 | 117 | |
michael@0 | 118 | .customizationmode-button { |
michael@0 | 119 | border: 1px solid rgb(192,192,192); |
michael@0 | 120 | border-radius: 3px; |
michael@0 | 121 | margin: 0; |
michael@0 | 122 | padding: 2px 12px; |
michael@0 | 123 | background-color: rgb(251,251,251); |
michael@0 | 124 | color: rgb(71,71,71); |
michael@0 | 125 | box-shadow: 0 1px rgba(255, 255, 255, 0.5), |
michael@0 | 126 | inset 0 1px rgba(255, 255, 255, 0.5); |
michael@0 | 127 | -moz-appearance: none; |
michael@0 | 128 | } |
michael@0 | 129 | |
michael@0 | 130 | .customizationmode-button[disabled="true"] { |
michael@0 | 131 | opacity: .5; |
michael@0 | 132 | } |
michael@0 | 133 | |
michael@0 | 134 | #customization-titlebar-visibility-button { |
michael@0 | 135 | list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png"); |
michael@0 | 136 | -moz-image-region: rect(0, 24px, 24px, 0); |
michael@0 | 137 | padding: 2px 7px; |
michael@0 | 138 | -moz-margin-end: 10px; |
michael@0 | 139 | } |
michael@0 | 140 | |
michael@0 | 141 | #customization-titlebar-visibility-button > .button-box > .button-text { |
michael@0 | 142 | /* Sadly, button.css thinks its margins are perfect for everyone. */ |
michael@0 | 143 | -moz-margin-start: 6px !important; |
michael@0 | 144 | } |
michael@0 | 145 | |
michael@0 | 146 | #customization-titlebar-visibility-button[checked] { |
michael@0 | 147 | -moz-image-region: rect(0, 48px, 24px, 24px); |
michael@0 | 148 | background-color: rgb(218, 218, 218); |
michael@0 | 149 | border-color: rgb(168, 168, 168); |
michael@0 | 150 | text-shadow: 0 1px rgb(236, 236, 236); |
michael@0 | 151 | box-shadow: 0 1px rgba(255, 255, 255, 0.5), |
michael@0 | 152 | inset 0 1px rgb(196, 196, 196); |
michael@0 | 153 | } |
michael@0 | 154 | |
michael@0 | 155 | #customization-undo-reset-button { |
michael@0 | 156 | -moz-margin-end: 10px; |
michael@0 | 157 | } |
michael@0 | 158 | |
michael@0 | 159 | #main-window[customize-entered] #customization-panel-container { |
michael@0 | 160 | background-image: url("chrome://browser/skin/customizableui/customizeMode-separatorHorizontal.png"), |
michael@0 | 161 | url("chrome://browser/skin/customizableui/customizeMode-separatorVertical.png"), |
michael@0 | 162 | url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"), |
michael@0 | 163 | url("chrome://browser/skin/customizableui/background-noise-toolbar.png"), |
michael@0 | 164 | linear-gradient(to bottom, #3e86ce, #3878ba); |
michael@0 | 165 | background-position: center top, left center, left top, left top, left top; |
michael@0 | 166 | background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat; |
michael@0 | 167 | background-size: auto 12px, 12px 100%, auto, auto, auto; |
michael@0 | 168 | background-attachment: scroll, scroll, fixed, fixed, scroll; |
michael@0 | 169 | } |
michael@0 | 170 | |
michael@0 | 171 | toolbarpaletteitem[place="toolbar"] { |
michael@0 | 172 | transition: border-width 250ms ease-in-out; |
michael@0 | 173 | } |
michael@0 | 174 | |
michael@0 | 175 | toolbarpaletteitem[mousedown] { |
michael@0 | 176 | cursor: -moz-grabbing; |
michael@0 | 177 | } |
michael@0 | 178 | |
michael@0 | 179 | .panel-customization-placeholder, |
michael@0 | 180 | toolbarpaletteitem[place="palette"], |
michael@0 | 181 | toolbarpaletteitem[place="panel"] { |
michael@0 | 182 | transition: transform .3s ease-in-out; |
michael@0 | 183 | } |
michael@0 | 184 | |
michael@0 | 185 | #customization-palette { |
michael@0 | 186 | transition: opacity .3s ease-in-out; |
michael@0 | 187 | opacity: 0; |
michael@0 | 188 | } |
michael@0 | 189 | |
michael@0 | 190 | #customization-palette[showing="true"] { |
michael@0 | 191 | opacity: 1; |
michael@0 | 192 | } |
michael@0 | 193 | |
michael@0 | 194 | toolbarpaletteitem[notransition].panel-customization-placeholder, |
michael@0 | 195 | toolbarpaletteitem[notransition][place="toolbar"], |
michael@0 | 196 | toolbarpaletteitem[notransition][place="palette"], |
michael@0 | 197 | toolbarpaletteitem[notransition][place="panel"] { |
michael@0 | 198 | transition: none; |
michael@0 | 199 | } |
michael@0 | 200 | |
michael@0 | 201 | toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon, |
michael@0 | 202 | toolbarpaletteitem > toolbaritem.panel-wide-item, |
michael@0 | 203 | toolbarpaletteitem > toolbarbutton[type="menu-button"] { |
michael@0 | 204 | transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important; |
michael@0 | 205 | } |
michael@0 | 206 | |
michael@0 | 207 | toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon { |
michael@0 | 208 | transform: scale(1.3); |
michael@0 | 209 | } |
michael@0 | 210 | |
michael@0 | 211 | toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item, |
michael@0 | 212 | toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] { |
michael@0 | 213 | transform: scale(1.1); |
michael@0 | 214 | } |
michael@0 | 215 | |
michael@0 | 216 | /* Override the toolkit styling for items being dragged over. */ |
michael@0 | 217 | toolbarpaletteitem[place="toolbar"] { |
michael@0 | 218 | border-left-width: 0; |
michael@0 | 219 | border-right-width: 0; |
michael@0 | 220 | margin-right: 0; |
michael@0 | 221 | margin-left: 0; |
michael@0 | 222 | } |
michael@0 | 223 | |
michael@0 | 224 | #customization-palette:not([hidden]) { |
michael@0 | 225 | margin-bottom: 25px; |
michael@0 | 226 | } |
michael@0 | 227 | |
michael@0 | 228 | #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton, |
michael@0 | 229 | #wrapper-edit-controls[place="palette"] > #edit-controls > separator, |
michael@0 | 230 | #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton, |
michael@0 | 231 | #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator { |
michael@0 | 232 | margin-top: 20px; |
michael@0 | 233 | } |
michael@0 | 234 | |
michael@0 | 235 | #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton, |
michael@0 | 236 | #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton { |
michael@0 | 237 | margin-left: 0; |
michael@0 | 238 | margin-right: 0; |
michael@0 | 239 | max-width: 24px; |
michael@0 | 240 | min-width: 24px; |
michael@0 | 241 | max-height: 24px; |
michael@0 | 242 | min-height: 24px; |
michael@0 | 243 | padding: 4px; |
michael@0 | 244 | } |
michael@0 | 245 | |
michael@0 | 246 | #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon, |
michael@0 | 247 | #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon { |
michael@0 | 248 | width: 16px; |
michael@0 | 249 | } |
michael@0 | 250 | |
michael@0 | 251 | #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon { |
michael@0 | 252 | opacity: 1; /* To ensure these buttons always look enabled in customize mode */ |
michael@0 | 253 | } |
michael@0 | 254 | |
michael@0 | 255 | #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button, |
michael@0 | 256 | #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator { |
michael@0 | 257 | display: none; |
michael@0 | 258 | } |
michael@0 | 259 | |
michael@0 | 260 | #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks { |
michael@0 | 261 | -moz-box-pack: center; |
michael@0 | 262 | min-height: 48px; |
michael@0 | 263 | } |
michael@0 | 264 | |
michael@0 | 265 | #customization-palette > toolbarpaletteitem > label { |
michael@0 | 266 | text-align: center; |
michael@0 | 267 | margin-left: 0; |
michael@0 | 268 | margin-right: 0; |
michael@0 | 269 | } |
michael@0 | 270 | |
michael@0 | 271 | %include customizeTip.inc.css |