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