1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/themes/shared/customizableui/customizeMode.inc.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,271 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.6 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +/* Customization mode */
1.9 +
1.10 +#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
1.11 + margin-bottom: 2em;
1.12 +}
1.13 +
1.14 +#main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
1.15 +#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
1.16 +#main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
1.17 + margin-left: 2em;
1.18 + margin-right: 2em;
1.19 +}
1.20 +
1.21 +#main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
1.22 + pointer-events: none;
1.23 +}
1.24 +
1.25 +#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
1.26 +#PanelUI-contents > .panel-customization-placeholder {
1.27 + -moz-outline-radius: 2.5px;
1.28 + outline: 1px dashed transparent;
1.29 +}
1.30 +
1.31 +#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
1.32 + /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
1.33 + -moz-box-ordinal-group: 0;
1.34 + content: "";
1.35 + display: -moz-box;
1.36 + height: 100%;
1.37 + left: 0;
1.38 + outline-offset: -2px;
1.39 + pointer-events: none;
1.40 + position: absolute;
1.41 + top: 0;
1.42 + width: 100%;
1.43 +}
1.44 +
1.45 +/* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
1.46 + #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
1.47 + offset from the bottom effectively the same as other targets (-2px). */
1.48 +#main-window[customize-entered] #TabsToolbar.customization-target::before {
1.49 + top: -2px;
1.50 +}
1.51 +
1.52 +/* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
1.53 +#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
1.54 +#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
1.55 +#main-window[customize-entered] #nav-bar-customization-target.customization-target {
1.56 + position: relative;
1.57 +}
1.58 +
1.59 +/* Most target outlines are shown on hover and drag over but the panel menu uses
1.60 + placeholders instead. */
1.61 +#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
1.62 +#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
1.63 +/* nav-bar and panel outlines are always shown */
1.64 +#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
1.65 + outline-color: rgb(102,102,102);
1.66 +}
1.67 +
1.68 +#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
1.69 + transition: outline-color 250ms linear;
1.70 +}
1.71 +
1.72 +#PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
1.73 + transition: outline-color 250ms linear;
1.74 + outline-color: #bbb;
1.75 +}
1.76 +
1.77 +#PanelUI-contents > .panel-customization-placeholder {
1.78 + cursor: auto;
1.79 + outline-offset: -5px;
1.80 +}
1.81 +
1.82 +#main-window[customizing] .customization-target:not(#PanelUI-contents) {
1.83 + min-width: 100px;
1.84 + padding-left: 10px;
1.85 + padding-right: 10px;
1.86 +}
1.87 +
1.88 +#customization-container {
1.89 + background-color: rgb(247,247,247);
1.90 +}
1.91 +
1.92 +#customization-palette,
1.93 +#customization-empty {
1.94 + padding: 0 25px 25px;
1.95 +}
1.96 +
1.97 +#customization-header {
1.98 + font-size: 1.5em;
1.99 + line-height: 1.5em;
1.100 + color: rgb(64,100,128);
1.101 + font-weight: lighter;
1.102 + margin-bottom: 1em;
1.103 + padding: 25px 25px 0;
1.104 +}
1.105 +
1.106 +#customization-panel-container {
1.107 + padding: 15px 25px 25px;
1.108 + background-image: linear-gradient(to bottom, #3e86ce, #3878ba);
1.109 +}
1.110 +
1.111 +#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
1.112 +#customization-footer {
1.113 + background-color: rgb(236,236,236);
1.114 +}
1.115 +
1.116 +#customization-footer {
1.117 + border-top: 1px solid rgb(221,221,221);
1.118 + padding: 15px;
1.119 +}
1.120 +
1.121 +.customizationmode-button {
1.122 + border: 1px solid rgb(192,192,192);
1.123 + border-radius: 3px;
1.124 + margin: 0;
1.125 + padding: 2px 12px;
1.126 + background-color: rgb(251,251,251);
1.127 + color: rgb(71,71,71);
1.128 + box-shadow: 0 1px rgba(255, 255, 255, 0.5),
1.129 + inset 0 1px rgba(255, 255, 255, 0.5);
1.130 + -moz-appearance: none;
1.131 +}
1.132 +
1.133 +.customizationmode-button[disabled="true"] {
1.134 + opacity: .5;
1.135 +}
1.136 +
1.137 +#customization-titlebar-visibility-button {
1.138 + list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
1.139 + -moz-image-region: rect(0, 24px, 24px, 0);
1.140 + padding: 2px 7px;
1.141 + -moz-margin-end: 10px;
1.142 +}
1.143 +
1.144 +#customization-titlebar-visibility-button > .button-box > .button-text {
1.145 + /* Sadly, button.css thinks its margins are perfect for everyone. */
1.146 + -moz-margin-start: 6px !important;
1.147 +}
1.148 +
1.149 +#customization-titlebar-visibility-button[checked] {
1.150 + -moz-image-region: rect(0, 48px, 24px, 24px);
1.151 + background-color: rgb(218, 218, 218);
1.152 + border-color: rgb(168, 168, 168);
1.153 + text-shadow: 0 1px rgb(236, 236, 236);
1.154 + box-shadow: 0 1px rgba(255, 255, 255, 0.5),
1.155 + inset 0 1px rgb(196, 196, 196);
1.156 +}
1.157 +
1.158 +#customization-undo-reset-button {
1.159 + -moz-margin-end: 10px;
1.160 +}
1.161 +
1.162 +#main-window[customize-entered] #customization-panel-container {
1.163 + background-image: url("chrome://browser/skin/customizableui/customizeMode-separatorHorizontal.png"),
1.164 + url("chrome://browser/skin/customizableui/customizeMode-separatorVertical.png"),
1.165 + url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"),
1.166 + url("chrome://browser/skin/customizableui/background-noise-toolbar.png"),
1.167 + linear-gradient(to bottom, #3e86ce, #3878ba);
1.168 + background-position: center top, left center, left top, left top, left top;
1.169 + background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat;
1.170 + background-size: auto 12px, 12px 100%, auto, auto, auto;
1.171 + background-attachment: scroll, scroll, fixed, fixed, scroll;
1.172 +}
1.173 +
1.174 +toolbarpaletteitem[place="toolbar"] {
1.175 + transition: border-width 250ms ease-in-out;
1.176 +}
1.177 +
1.178 +toolbarpaletteitem[mousedown] {
1.179 + cursor: -moz-grabbing;
1.180 +}
1.181 +
1.182 +.panel-customization-placeholder,
1.183 +toolbarpaletteitem[place="palette"],
1.184 +toolbarpaletteitem[place="panel"] {
1.185 + transition: transform .3s ease-in-out;
1.186 +}
1.187 +
1.188 +#customization-palette {
1.189 + transition: opacity .3s ease-in-out;
1.190 + opacity: 0;
1.191 +}
1.192 +
1.193 +#customization-palette[showing="true"] {
1.194 + opacity: 1;
1.195 +}
1.196 +
1.197 +toolbarpaletteitem[notransition].panel-customization-placeholder,
1.198 +toolbarpaletteitem[notransition][place="toolbar"],
1.199 +toolbarpaletteitem[notransition][place="palette"],
1.200 +toolbarpaletteitem[notransition][place="panel"] {
1.201 + transition: none;
1.202 +}
1.203 +
1.204 +toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
1.205 +toolbarpaletteitem > toolbaritem.panel-wide-item,
1.206 +toolbarpaletteitem > toolbarbutton[type="menu-button"] {
1.207 + transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
1.208 +}
1.209 +
1.210 +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon {
1.211 + transform: scale(1.3);
1.212 +}
1.213 +
1.214 +toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
1.215 +toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
1.216 + transform: scale(1.1);
1.217 +}
1.218 +
1.219 +/* Override the toolkit styling for items being dragged over. */
1.220 +toolbarpaletteitem[place="toolbar"] {
1.221 + border-left-width: 0;
1.222 + border-right-width: 0;
1.223 + margin-right: 0;
1.224 + margin-left: 0;
1.225 +}
1.226 +
1.227 +#customization-palette:not([hidden]) {
1.228 + margin-bottom: 25px;
1.229 +}
1.230 +
1.231 +#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
1.232 +#wrapper-edit-controls[place="palette"] > #edit-controls > separator,
1.233 +#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
1.234 +#wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
1.235 + margin-top: 20px;
1.236 +}
1.237 +
1.238 +#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
1.239 +#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
1.240 + margin-left: 0;
1.241 + margin-right: 0;
1.242 + max-width: 24px;
1.243 + min-width: 24px;
1.244 + max-height: 24px;
1.245 + min-height: 24px;
1.246 + padding: 4px;
1.247 +}
1.248 +
1.249 +#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
1.250 +#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
1.251 + width: 16px;
1.252 +}
1.253 +
1.254 +#wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
1.255 + opacity: 1; /* To ensure these buttons always look enabled in customize mode */
1.256 +}
1.257 +
1.258 +#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
1.259 +#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
1.260 + display: none;
1.261 +}
1.262 +
1.263 +#wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
1.264 + -moz-box-pack: center;
1.265 + min-height: 48px;
1.266 +}
1.267 +
1.268 +#customization-palette > toolbarpaletteitem > label {
1.269 + text-align: center;
1.270 + margin-left: 0;
1.271 + margin-right: 0;
1.272 +}
1.273 +
1.274 +%include customizeTip.inc.css
