| OLD | NEW |
| 1 /* | 1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| 2 * Copyright (c) 2012 The Chromium Authors. All rights reserved. | |
| 3 * Use of this source code is governed by a BSD-style license that can be | 2 * Use of this source code is governed by a BSD-style license that can be |
| 4 * found in the LICENSE file. | 3 * found in the LICENSE file. |
| 5 */ | 4 */ |
| 6 | 5 |
| 7 body { | 6 body { |
| 8 margin: 0; | |
| 9 -webkit-user-select: none; | 7 -webkit-user-select: none; |
| 10 font-family: Open Sans,Droid Sans Fallback,sans-serif; | 8 font-family: Open Sans,Droid Sans Fallback,sans-serif; |
| 11 font-size: 84%; | 9 font-size: 84%; |
| 10 margin: 0; |
| 12 } | 11 } |
| 13 | 12 |
| 14 .gallery { | 13 .gallery { |
| 15 background: black; | 14 background: black; |
| 15 bottom: 0; |
| 16 left: 0; |
| 17 overflow: hidden; |
| 16 position: absolute; | 18 position: absolute; |
| 17 left: 0; | |
| 18 right: 0; | 19 right: 0; |
| 19 top: 0; | 20 top: 0; |
| 20 bottom: 0; | |
| 21 overflow: hidden; | |
| 22 } | 21 } |
| 23 | 22 |
| 24 /* Close button */ | 23 /* Close button */ |
| 25 .gallery > .close { | 24 .gallery > .close { |
| 25 cursor: pointer; |
| 26 position: absolute; | 26 position: absolute; |
| 27 right: 5px; | 27 right: 5px; |
| 28 top: 5px; | 28 top: 5px; |
| 29 cursor: pointer; | |
| 30 z-index: 200; | 29 z-index: 200; |
| 31 } | 30 } |
| 32 | 31 |
| 33 /* The close icon is in a nested div so that its opacity can be manipulated | 32 /* The close icon is in a nested div so that its opacity can be manipulated |
| 34 independently from its parent (which can be dimmed when the crop frame | 33 independently from its parent (which can be dimmed when the crop frame |
| 35 overlaps it) */ | 34 overlaps it) */ |
| 36 .gallery > .close div { | 35 .gallery > .close div { |
| 36 background-image: url(../images/gallery/close_x.png); |
| 37 background-position: center center; |
| 38 background-repeat: no-repeat; |
| 39 height: 20px; |
| 37 opacity: 0; | 40 opacity: 0; |
| 38 width: 20px; | 41 width: 20px; |
| 39 height: 20px; | |
| 40 background-image: url(../images/gallery/close_x.png); | |
| 41 background-repeat: no-repeat; | |
| 42 background-position: center center; | |
| 43 } | 42 } |
| 44 | 43 |
| 45 .gallery[tools] > .close div { | 44 .gallery[tools] > .close div { |
| 46 opacity: 0.5; | 45 opacity: 0.5; |
| 47 } | 46 } |
| 48 | 47 |
| 49 .gallery[tools] > .close div:hover { | 48 .gallery[tools] > .close div:hover { |
| 49 background-color: rgba(81,81,81,1); |
| 50 opacity: 0.7; | 50 opacity: 0.7; |
| 51 background-color: rgba(81,81,81,1); | |
| 52 } | 51 } |
| 53 | 52 |
| 54 /* Image container and canvas elements */ | 53 /* Image container and canvas elements */ |
| 55 | 54 |
| 56 .gallery > .image-container { | 55 .gallery > .image-container { |
| 57 position: absolute; | |
| 58 height: 100%; | |
| 59 width: 100%; | |
| 60 background-color: rgba(0,0,0,1); | 56 background-color: rgba(0,0,0,1); |
| 61 cursor: none; /* Only visible when the toolbar is active */ | 57 cursor: none; /* Only visible when the toolbar is active */ |
| 58 height: 100%; |
| 59 position: absolute; |
| 60 width: 100%; |
| 62 } | 61 } |
| 63 | 62 |
| 64 .gallery[tools][locked] *, | 63 .gallery[tools][locked] *, |
| 65 .gallery[tools][locked] .image-container[cursor] { | 64 .gallery[tools][locked] .image-container[cursor] { |
| 66 cursor: wait; | 65 cursor: wait; |
| 67 } | 66 } |
| 68 | 67 |
| 69 .gallery[tools] .image-container[cursor='default'] { | 68 .gallery[tools] .image-container[cursor='default'] { |
| 70 cursor: default; | 69 cursor: default; |
| 71 } | 70 } |
| (...skipping 20 matching lines...) Expand all Loading... |
| 92 .gallery[tools] .image-container[cursor='se-resize'] { | 91 .gallery[tools] .image-container[cursor='se-resize'] { |
| 93 cursor: url(../images/gallery/cursor_nwse.png) 18 18; | 92 cursor: url(../images/gallery/cursor_nwse.png) 18 18; |
| 94 } | 93 } |
| 95 | 94 |
| 96 .gallery[tools] .image-container[cursor='ne-resize'], | 95 .gallery[tools] .image-container[cursor='ne-resize'], |
| 97 .gallery[tools] .image-container[cursor='sw-resize'] { | 96 .gallery[tools] .image-container[cursor='sw-resize'] { |
| 98 cursor: url(../images/gallery/cursor_swne.png) 18 18; | 97 cursor: url(../images/gallery/cursor_swne.png) 18 18; |
| 99 } | 98 } |
| 100 | 99 |
| 101 .gallery > .image-container > .image { | 100 .gallery > .image-container > .image { |
| 102 position: absolute; | 101 /* Keep in sync with ImageView.ANIMATION_DURATION in image_view.js*/ |
| 103 pointer-events: none; | 102 -webkit-transition-duration: 180ms; |
| 104 | |
| 105 -webkit-transition-property: -webkit-transform, opacity; | 103 -webkit-transition-property: -webkit-transform, opacity; |
| 106 -webkit-transition-timing-function: ease-in-out; | 104 -webkit-transition-timing-function: ease-in-out; |
| 107 | 105 pointer-events: none; |
| 108 /* Keep in sync with ImageView.ANIMATION_DURATION in image_view.js*/ | 106 position: absolute; |
| 109 -webkit-transition-duration: 180ms; | |
| 110 } | 107 } |
| 111 | 108 |
| 112 .gallery > .image-container > .image[fade] { | 109 .gallery > .image-container > .image[fade] { |
| 113 opacity: 0; | 110 opacity: 0; |
| 114 } | 111 } |
| 115 | 112 |
| 116 .gallery > .image-container > .image[fade='left'] { | 113 .gallery > .image-container > .image[fade='left'] { |
| 117 -webkit-transform: translate(-40px,0); | 114 -webkit-transform: translate(-40px,0); |
| 118 } | 115 } |
| 119 | 116 |
| 120 .gallery > .image-container > .image[fade='right'] { | 117 .gallery > .image-container > .image[fade='right'] { |
| 121 -webkit-transform: translate(40px,0); | 118 -webkit-transform: translate(40px,0); |
| 122 } | 119 } |
| 123 | 120 |
| 124 /* Toolbar */ | 121 /* Toolbar */ |
| 125 | 122 |
| 126 .gallery > .toolbar { | 123 .gallery > .toolbar { |
| 127 position: absolute; | 124 -webkit-box-align: stretch; |
| 128 bottom: 0; | |
| 129 width: 100%; | |
| 130 height: 55px; | |
| 131 display: -webkit-box; | |
| 132 -webkit-box-orient: horizontal; | 125 -webkit-box-orient: horizontal; |
| 133 -webkit-box-pack: start; | 126 -webkit-box-pack: start; |
| 134 -webkit-box-align: stretch; | 127 -webkit-transform: translate(0, 0); |
| 128 -webkit-transition-duration: 300ms; |
| 129 -webkit-transition-property: webkit-transform, opacity; |
| 130 -webkit-transition-timing-function: ease; |
| 135 background-color: rgba(18,18,18,0.75); | 131 background-color: rgba(18,18,18,0.75); |
| 136 border-top: 1px solid rgba(31,31,31,0.75); | 132 border-top: 1px solid rgba(31,31,31,0.75); |
| 137 | 133 bottom: 0; |
| 134 display: -webkit-box; |
| 135 height: 55px; |
| 136 opacity: 0; |
| 138 pointer-events: none; | 137 pointer-events: none; |
| 139 opacity: 0; | 138 position: absolute; |
| 140 -webkit-transform: translate(0, 0); | 139 width: 100%; |
| 141 | |
| 142 -webkit-transition-property: webkit-transform, opacity; | |
| 143 -webkit-transition-duration: 300ms; | |
| 144 -webkit-transition-timing-function: ease; | |
| 145 } | 140 } |
| 146 | 141 |
| 147 .gallery[tools] > .toolbar { | 142 .gallery[tools] > .toolbar { |
| 143 -webkit-transform: translate(0, 0); |
| 144 opacity: 1; |
| 148 pointer-events: auto; | 145 pointer-events: auto; |
| 149 opacity: 1; | |
| 150 -webkit-transform: translate(0, 0); | |
| 151 } | 146 } |
| 152 | 147 |
| 153 .gallery[tools][locked] > .toolbar { | 148 .gallery[tools][locked] > .toolbar { |
| 154 pointer-events: none; | 149 pointer-events: none; |
| 155 } | 150 } |
| 156 | 151 |
| 157 .gallery .arrow-box { | 152 .gallery .arrow-box { |
| 158 position: absolute; | 153 -webkit-box-align: center; |
| 159 z-index: 100; | 154 -webkit-box-orient: horizontal; |
| 160 width: 100%; | 155 -webkit-box-pack: center; |
| 156 display: -webkit-box; |
| 161 height: 100%; | 157 height: 100%; |
| 162 pointer-events: none; | 158 pointer-events: none; |
| 163 display: -webkit-box; | 159 position: absolute; |
| 164 -webkit-box-orient: horizontal; | 160 width: 100%; |
| 165 -webkit-box-align: center; | 161 z-index: 100; |
| 166 -webkit-box-pack: center; | |
| 167 } | 162 } |
| 168 | 163 |
| 169 .gallery .arrow-box .arrow { | 164 .gallery .arrow-box .arrow { |
| 170 pointer-events: none; | 165 pointer-events: none; |
| 171 } | 166 } |
| 172 | 167 |
| 173 .gallery .arrow-box .arrow-spacer { | 168 .gallery .arrow-box .arrow-spacer { |
| 174 -webkit-box-flex: 1; | 169 -webkit-box-flex: 1; |
| 175 pointer-events: none; | 170 pointer-events: none; |
| 176 } | 171 } |
| 177 | 172 |
| 178 .gallery[tools] .arrow[active] { | 173 .gallery[tools] .arrow[active] { |
| 174 cursor: pointer; |
| 179 pointer-events: auto; | 175 pointer-events: auto; |
| 180 cursor: pointer; | |
| 181 } | 176 } |
| 182 | 177 |
| 183 /* The arrow icons are in nested divs so that their opacity can be manipulated | 178 /* The arrow icons are in nested divs so that their opacity can be manipulated |
| 184 independently from their parent (which can be dimmed when the crop frame | 179 * independently from their parent (which can be dimmed when the crop frame |
| 185 overlaps it) */ | 180 * overlaps it) */ |
| 186 .gallery .arrow div{ | 181 .gallery .arrow div { |
| 182 background-position: center center; |
| 183 background-repeat: no-repeat; |
| 184 height: 193px; |
| 185 opacity: 0; |
| 187 width: 105px; | 186 width: 105px; |
| 188 height: 193px; | |
| 189 background-repeat: no-repeat; | |
| 190 background-position: center center; | |
| 191 opacity: 0; | |
| 192 } | 187 } |
| 193 | 188 |
| 194 .gallery[tools] .arrow[active] div{ | 189 .gallery[tools] .arrow[active] div { |
| 195 opacity: 0.25; | 190 opacity: 0.25; |
| 196 } | 191 } |
| 197 | 192 |
| 198 .gallery[tools] .arrow[active] div:hover{ | 193 .gallery[tools] .arrow[active] div:hover { |
| 199 opacity: 1; | 194 opacity: 1; |
| 200 } | 195 } |
| 201 | 196 |
| 202 .gallery .arrow.left div{ | 197 .gallery .arrow.left div { |
| 203 background-image: url(../images/gallery/arrow_left.png); | 198 background-image: url(../images/gallery/arrow_left.png); |
| 204 } | 199 } |
| 205 | 200 |
| 206 .gallery .arrow.right div{ | 201 .gallery .arrow.right div { |
| 207 background-image: url(../images/gallery/arrow_right.png); | 202 background-image: url(../images/gallery/arrow_right.png); |
| 208 } | 203 } |
| 209 | 204 |
| 210 /* Special behavior on mouse drag. | 205 /* Special behavior on mouse drag. |
| 211 Redundant .gallery attributes included to make the rules more specific */ | 206 Redundant .gallery attributes included to make the rules more specific */ |
| 212 | 207 |
| 213 /* Everything but the image container should become mouse-transparent */ | 208 /* Everything but the image container should become mouse-transparent */ |
| 214 .gallery[tools][editing][mousedrag] * { | 209 .gallery[tools][editing][mousedrag] * { |
| 215 pointer-events: none; | 210 pointer-events: none; |
| 216 } | 211 } |
| (...skipping 26 matching lines...) Expand all Loading... |
| 243 z-index: 0; | 238 z-index: 0; |
| 244 } | 239 } |
| 245 | 240 |
| 246 .gallery .filename-spacer > .name, | 241 .gallery .filename-spacer > .name, |
| 247 .gallery[renaming] .filename-spacer > input { | 242 .gallery[renaming] .filename-spacer > input { |
| 248 opacity: 1; | 243 opacity: 1; |
| 249 z-index: 1; | 244 z-index: 1; |
| 250 } | 245 } |
| 251 | 246 |
| 252 .gallery .filename-spacer > * { | 247 .gallery .filename-spacer > * { |
| 248 background-color: transparent; |
| 249 color: white; |
| 253 font-family: Open Sans,Droid Sans Fallback,sans-serif; | 250 font-family: Open Sans,Droid Sans Fallback,sans-serif; |
| 251 height: 21px; |
| 254 position: absolute; | 252 position: absolute; |
| 255 background-color: transparent; | |
| 256 height: 21px; | |
| 257 width: 260px; | 253 width: 260px; |
| 258 color: white; | |
| 259 } | 254 } |
| 260 | 255 |
| 261 .gallery .filename-spacer > input, | 256 .gallery .filename-spacer > input, |
| 262 .gallery .filename-spacer > .name { | 257 .gallery .filename-spacer > .name { |
| 263 border: none; | 258 border: none; |
| 259 font-size: 120%; |
| 260 left: 10px; |
| 264 outline: none; | 261 outline: none; |
| 265 font-size: 120%; | |
| 266 overflow: hidden; | 262 overflow: hidden; |
| 267 text-overflow: ellipsis; | 263 text-overflow: ellipsis; |
| 264 top: 5px; |
| 268 white-space: nowrap; | 265 white-space: nowrap; |
| 269 left: 10px; | |
| 270 top: 5px; | |
| 271 } | 266 } |
| 272 | 267 |
| 273 .gallery .filename-spacer > .name:hover { | 268 .gallery .filename-spacer > .name:hover { |
| 274 background-color: rgba(48, 48, 48, 1.0); | 269 background-color: rgba(48, 48, 48, 1.0); |
| 275 cursor: pointer; | 270 cursor: pointer; |
| 276 } | 271 } |
| 277 | 272 |
| 278 .gallery .filename-spacer > input:focus, | 273 .gallery .filename-spacer > input:focus, |
| 279 .gallery .filename-spacer > input:focus:hover { | 274 .gallery .filename-spacer > input:focus:hover { |
| 280 background-color: white; | 275 background-color: white; |
| 276 border-bottom: 1px solid white; |
| 277 border-right: 1px solid white; |
| 281 color: black; | 278 color: black; |
| 282 border-right: 1px solid white; | |
| 283 border-bottom: 1px solid white; | |
| 284 } | 279 } |
| 285 | 280 |
| 286 .gallery .filename-spacer > .options { | 281 .gallery .filename-spacer > .options { |
| 287 left: 10px; | 282 left: 10px; |
| 288 top: 26px; | 283 top: 26px; |
| 289 } | 284 } |
| 290 | 285 |
| 291 .gallery .filename-spacer .saved, | 286 .gallery .filename-spacer .saved, |
| 292 .gallery .filename-spacer .keep-original { | 287 .gallery .filename-spacer .keep-original { |
| 288 -webkit-transition: all linear 120ms; |
| 289 color: gray; |
| 290 cursor: inherit; |
| 293 display: none; | 291 display: none; |
| 294 color: gray; | |
| 295 font-size: 90%; | 292 font-size: 90%; |
| 296 -webkit-transition: all linear 120ms; | 293 margin-right: 10px; |
| 297 pointer-events: none; | 294 pointer-events: none; |
| 298 cursor: inherit; | |
| 299 margin-right: 10px; | |
| 300 } | 295 } |
| 301 | 296 |
| 302 .gallery .filename-spacer .saved[highlighted] { | 297 .gallery .filename-spacer .saved[highlighted] { |
| 298 -webkit-transform: scaleX(1.1) scaleY(1.1) rotate(0); |
| 303 color: white; | 299 color: white; |
| 304 -webkit-transform: scaleX(1.1) scaleY(1.1) rotate(0deg); | |
| 305 } | 300 } |
| 306 | 301 |
| 307 .gallery .filename-spacer .keep-original[visible] { | 302 .gallery .filename-spacer .keep-original[visible] { |
| 303 color: white; |
| 304 cursor: pointer; |
| 308 display: inline-block; | 305 display: inline-block; |
| 309 cursor: pointer; | |
| 310 color: white; | |
| 311 pointer-events: auto; | 306 pointer-events: auto; |
| 312 } | 307 } |
| 313 | 308 |
| 314 .gallery .button-spacer { | 309 .gallery .button-spacer { |
| 310 -webkit-box-flex: 1; |
| 315 display: -webkit-box; | 311 display: -webkit-box; |
| 316 -webkit-box-flex: 1; | |
| 317 } | 312 } |
| 318 | 313 |
| 319 /* Thumbnails */ | 314 /* Thumbnails */ |
| 320 | 315 |
| 321 .gallery .ribbon-spacer { | 316 .gallery .ribbon-spacer { |
| 322 position: absolute; | 317 -webkit-box-align: center; |
| 323 left: 280px; | |
| 324 right: 280px; | |
| 325 height: 100%; | |
| 326 display: -webkit-box; | |
| 327 -webkit-box-orient: horizontal; | 318 -webkit-box-orient: horizontal; |
| 328 -webkit-box-pack: center; | 319 -webkit-box-pack: center; |
| 329 -webkit-box-align: center; | 320 display: -webkit-box; |
| 321 height: 100%; |
| 322 left: 280px; |
| 323 position: absolute; |
| 324 right: 280px; |
| 330 } | 325 } |
| 331 | 326 |
| 332 .gallery .toolbar .ribbon { | 327 .gallery .toolbar .ribbon { |
| 333 overflow: hidden; | |
| 334 height: 100%; | |
| 335 -webkit-box-flex: 0; | 328 -webkit-box-flex: 0; |
| 336 display: -webkit-box; | |
| 337 -webkit-box-orient: horizontal; | 329 -webkit-box-orient: horizontal; |
| 338 -webkit-box-pack: start; | 330 -webkit-box-pack: start; |
| 339 | |
| 340 -webkit-transition: opacity 180ms linear; | 331 -webkit-transition: opacity 180ms linear; |
| 332 display: -webkit-box; |
| 333 height: 100%; |
| 334 overflow: hidden; |
| 341 z-index: 0; | 335 z-index: 0; |
| 342 } | 336 } |
| 343 | 337 |
| 344 .gallery[editing] .toolbar .ribbon { | 338 .gallery[editing] .toolbar .ribbon { |
| 345 opacity: 0; | 339 opacity: 0; |
| 346 } | 340 } |
| 347 | 341 |
| 348 .gallery .ribbon-image { | 342 .gallery .ribbon-image { |
| 349 display: -webkit-box; | 343 -webkit-box-align: center; |
| 350 -webkit-box-orient: horizontal; | 344 -webkit-box-orient: horizontal; |
| 351 -webkit-box-pack: center; | 345 -webkit-box-pack: center; |
| 352 -webkit-box-align: center; | 346 -webkit-transition: margin-left 180ms linear; |
| 353 overflow: hidden; | 347 border: 2px solid rgba(255,255,255,0); /* transparent white */ |
| 354 cursor: pointer; | 348 cursor: pointer; |
| 355 width: 47px; | 349 display: -webkit-box; |
| 356 height: 47px; | 350 height: 47px; |
| 357 margin: 2px; | 351 margin: 2px; |
| 358 border: 2px solid rgba(255,255,255,0); /* transparent white */ | 352 overflow: hidden; |
| 359 -webkit-transition: margin-left 180ms linear; | 353 width: 47px; |
| 360 } | 354 } |
| 361 | 355 |
| 362 .gallery .ribbon-image[selected] { | 356 .gallery .ribbon-image[selected] { |
| 363 border: 2px solid rgba(255,233,168,1); | 357 border: 2px solid rgba(255,233,168,1); |
| 364 } | 358 } |
| 365 | 359 |
| 366 .gallery .toolbar .ribbon.fade-left { | 360 .gallery .toolbar .ribbon.fade-left { |
| 367 -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0, rgba(0,0,0,
1) 40px); | 361 -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, |
| 362 rgba(0, 0, 0, 1) 40px); |
| 368 } | 363 } |
| 369 | 364 |
| 370 .gallery .toolbar .ribbon.fade-right { | 365 .gallery .toolbar .ribbon.fade-right { |
| 371 -webkit-mask-image: -webkit-linear-gradient(right, rgba(0,0,0,0) 0, rgba(0,0,0
,1) 40px); | 366 -webkit-mask-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0) 0, |
| 367 rgba(0, 0, 0, 1) 40px); |
| 372 } | 368 } |
| 373 | 369 |
| 374 .gallery .toolbar .ribbon.fade-left.fade-right { | 370 .gallery .toolbar .ribbon.fade-left.fade-right { |
| 375 -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0, rgba(0,0,0,
1) 40px, rgba(0,0,0,1) 230px, rgba(0,0,0,0) 100%); | 371 -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, |
| 372 rgba(0, 0, 0, 1) 40px, |
| 373 rgba(0, 0, 0, 1) 230px, |
| 374 rgba(0, 0, 0, 0) 100%); |
| 376 } | 375 } |
| 377 | 376 |
| 378 .gallery .image-wrapper { | 377 .gallery .image-wrapper { |
| 378 border: 1px solid rgba(0, 0, 0, 0); /* transparent black */ |
| 379 height: 45px; |
| 380 overflow: hidden; |
| 379 position: relative; | 381 position: relative; |
| 380 overflow: hidden; | |
| 381 width: 45px; | 382 width: 45px; |
| 382 height: 45px; | |
| 383 border: 1px solid rgba(0,0,0,0); /* transparent black */ | |
| 384 } | 383 } |
| 385 | 384 |
| 386 /* Editor buttons */ | 385 /* Editor buttons */ |
| 387 | 386 |
| 388 .gallery .toolbar .edit-bar { | 387 .gallery .toolbar .edit-bar { |
| 389 position: absolute; | |
| 390 overflow: hidden; | |
| 391 pointer-events: none; | |
| 392 right: 0; | |
| 393 width: 100%; | |
| 394 opacity: 0; | |
| 395 height: 55px; | |
| 396 color: white; | |
| 397 display: -webkit-box; | |
| 398 -webkit-box-orient: horizontal; | 388 -webkit-box-orient: horizontal; |
| 399 -webkit-box-pack: center; | 389 -webkit-box-pack: center; |
| 400 -webkit-transition: opacity 180ms linear; | 390 -webkit-transition: opacity 180ms linear; |
| 391 color: white; |
| 392 display: -webkit-box; |
| 393 height: 55px; |
| 394 opacity: 0; |
| 395 overflow: hidden; |
| 396 pointer-events: none; |
| 397 position: absolute; |
| 398 right: 0; |
| 399 width: 100%; |
| 401 } | 400 } |
| 402 | 401 |
| 403 .gallery[editing] .toolbar .edit-bar { | 402 .gallery[editing] .toolbar .edit-bar { |
| 404 opacity: 1; | 403 opacity: 1; |
| 405 } | 404 } |
| 406 | 405 |
| 407 .gallery .edit-main { | 406 .gallery .edit-main { |
| 407 -webkit-box-orient: horizontal; |
| 408 -webkit-transition: opacity 250ms ease-in-out; |
| 408 display: -webkit-box; | 409 display: -webkit-box; |
| 409 -webkit-box-orient: horizontal; | |
| 410 opacity: 0; | 410 opacity: 0; |
| 411 -webkit-transition: opacity 250ms ease-in-out; | |
| 412 } | 411 } |
| 413 | 412 |
| 414 .gallery[editing] .edit-main { | 413 .gallery[editing] .edit-main { |
| 414 opacity: 1.0; |
| 415 pointer-events: auto; | 415 pointer-events: auto; |
| 416 opacity: 1.0; | |
| 417 } | 416 } |
| 418 | 417 |
| 419 .gallery > .toolbar .button { | 418 .gallery > .toolbar .button { |
| 419 -webkit-box-align: center; |
| 420 -webkit-box-flex: 0; | 420 -webkit-box-flex: 0; |
| 421 -webkit-box-orient: horizontal; |
| 422 -webkit-box-pack: end; |
| 423 background-position: 5px center; |
| 424 background-repeat: no-repeat; |
| 425 cursor: pointer; |
| 426 display: -webkit-box; |
| 427 height: 40px; |
| 428 margin: 8px 0 7px 3px; |
| 429 opacity: 0.99; /* Workaround for http://crosbug.com/21065 */ |
| 421 padding: 0 10px 0 35px; | 430 padding: 0 10px 0 35px; |
| 422 cursor: pointer; | |
| 423 margin: 8px 0 7px 3px; | |
| 424 height: 40px; | |
| 425 | |
| 426 display: -webkit-box; | |
| 427 -webkit-box-orient: horizontal; | |
| 428 -webkit-box-align: center; | |
| 429 -webkit-box-pack: end; | |
| 430 | |
| 431 background-repeat: no-repeat; | |
| 432 background-position: 5px center; | |
| 433 | |
| 434 opacity: 0.99; /* Workaround for http://crosbug.com/21065 */ | |
| 435 } | 431 } |
| 436 | 432 |
| 437 .gallery > .toolbar .button { | 433 .gallery > .toolbar .button { |
| 438 background-color: rgba(0,0,0,0); | 434 background-color: rgba(0,0,0,0); |
| 439 color: white; | 435 color: white; |
| 440 } | 436 } |
| 441 | 437 |
| 442 .gallery > .toolbar .button:hover { | 438 .gallery > .toolbar .button:hover { |
| 443 background-color: rgba(31,31,31,1); | 439 background-color: rgba(31,31,31,1); |
| 444 color: white; | 440 color: white; |
| (...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 492 | 488 |
| 493 .gallery > .toolbar .button.rotate_left[pressed] { | 489 .gallery > .toolbar .button.rotate_left[pressed] { |
| 494 background-image: url(../images/gallery/icon_rotate_left_selected.png); | 490 background-image: url(../images/gallery/icon_rotate_left_selected.png); |
| 495 } | 491 } |
| 496 | 492 |
| 497 .gallery > .toolbar .button.undo { | 493 .gallery > .toolbar .button.undo { |
| 498 background-image: url(../images/gallery/icon_undo.png); | 494 background-image: url(../images/gallery/icon_undo.png); |
| 499 } | 495 } |
| 500 | 496 |
| 501 .gallery > .toolbar .button.redo { | 497 .gallery > .toolbar .button.redo { |
| 498 background-image: url(../images/gallery/icon_redo.png); |
| 502 position: absolute; /* Exclude from center-packing*/ | 499 position: absolute; /* Exclude from center-packing*/ |
| 503 background-image: url(../images/gallery/icon_redo.png); | |
| 504 } | 500 } |
| 505 | 501 |
| 506 .gallery > .toolbar .button[disabled] { | 502 .gallery > .toolbar .button[disabled] { |
| 503 opacity: 0.5; |
| 507 pointer-events: none; | 504 pointer-events: none; |
| 508 opacity: 0.5; | |
| 509 } | 505 } |
| 510 | 506 |
| 511 .gallery > .toolbar .button[hidden] { | 507 .gallery > .toolbar .button[hidden] { |
| 512 display: none; | 508 display: none; |
| 513 } | 509 } |
| 514 | 510 |
| 515 .gallery > .toolbar > .button.edit { | 511 .gallery > .toolbar > .button.edit { |
| 512 background-image: url(../images/gallery/icon_edit.png); |
| 516 position: relative; | 513 position: relative; |
| 517 z-index: 10; | 514 z-index: 10; |
| 518 background-image: url(../images/gallery/icon_edit.png); | |
| 519 } | 515 } |
| 520 | 516 |
| 521 .gallery > .toolbar > .button.edit[pressed] { | 517 .gallery > .toolbar > .button.edit[pressed] { |
| 522 background-image: url(../images/gallery/icon_edit_selected.png); | 518 background-image: url(../images/gallery/icon_edit_selected.png); |
| 523 } | 519 } |
| 524 | 520 |
| 525 .gallery > .toolbar > .button.share { | 521 .gallery > .toolbar > .button.share { |
| 522 background-image: url(../images/gallery/icon_share.png); |
| 526 position: relative; | 523 position: relative; |
| 527 z-index: 10; | 524 z-index: 10; |
| 528 background-image: url(../images/gallery/icon_share.png); | |
| 529 } | 525 } |
| 530 | 526 |
| 531 .gallery > .toolbar > .button.share[pressed] { | 527 .gallery > .toolbar > .button.share[pressed] { |
| 532 background-image: url(../images/gallery/icon_share_selected.png); | 528 background-image: url(../images/gallery/icon_share_selected.png); |
| 533 } | 529 } |
| 534 | 530 |
| 535 .gallery[error] > .toolbar .button.edit, | 531 .gallery[error] > .toolbar .button.edit, |
| 536 .gallery[error] > .toolbar .button.share { | 532 .gallery[error] > .toolbar .button.share { |
| 533 opacity: 0.7; |
| 537 pointer-events: none; | 534 pointer-events: none; |
| 538 opacity: 0.7; | |
| 539 } | 535 } |
| 540 | 536 |
| 541 .gallery > .toolbar > .button:last-child { | 537 .gallery > .toolbar > .button:last-child { |
| 542 margin-right: 8px; | 538 margin-right: 8px; |
| 543 } | 539 } |
| 544 | 540 |
| 545 /* Secondary toolbar (mode-specific tools) */ | 541 /* Secondary toolbar (mode-specific tools) */ |
| 546 | 542 |
| 547 .gallery .edit-modal { | 543 .gallery .edit-modal { |
| 544 -webkit-box-orient: horizontal; |
| 545 -webkit-box-pack: center; |
| 546 bottom: 80px; |
| 547 display: -webkit-box; |
| 548 height: 40px; |
| 549 pointer-events: none; |
| 548 position: absolute; | 550 position: absolute; |
| 549 width: 100%; | 551 width: 100%; |
| 550 bottom: 80px; | |
| 551 height: 40px; | |
| 552 display: -webkit-box; | |
| 553 -webkit-box-orient: horizontal; | |
| 554 -webkit-box-pack: center; | |
| 555 pointer-events: none; | |
| 556 } | 552 } |
| 557 | 553 |
| 558 .gallery .edit-modal-wrapper[hidden] { | 554 .gallery .edit-modal-wrapper[hidden] { |
| 559 display: none; | 555 display: none; |
| 560 } | 556 } |
| 561 | 557 |
| 562 .gallery .edit-modal-wrapper { | 558 .gallery .edit-modal-wrapper { |
| 563 color: white; | 559 -webkit-box-align: center; |
| 564 padding-right: 5px; | |
| 565 background-color: rgba(0, 0, 0, 0.75); | |
| 566 display: -webkit-box; | |
| 567 -webkit-box-orient: horizontal; | 560 -webkit-box-orient: horizontal; |
| 568 -webkit-box-pack: center; | 561 -webkit-box-pack: center; |
| 569 -webkit-box-align: center; | 562 background-color: rgba(0, 0, 0, 0.75); |
| 563 color: white; |
| 564 display: -webkit-box; |
| 565 padding-right: 5px; |
| 570 pointer-events: auto; | 566 pointer-events: auto; |
| 571 } | 567 } |
| 572 | 568 |
| 573 .gallery .edit-modal .label { | 569 .gallery .edit-modal .label { |
| 570 -webkit-box-align: center; |
| 571 -webkit-box-orient: horizontal; |
| 572 background-position: 20px center; |
| 573 background-repeat: no-repeat; |
| 574 display: -webkit-box; |
| 574 height: 20px; | 575 height: 20px; |
| 575 padding-left: 50px; | 576 padding-left: 50px; |
| 576 padding-right: 10px; | 577 padding-right: 10px; |
| 577 | |
| 578 display: -webkit-box; | |
| 579 -webkit-box-orient: horizontal; | |
| 580 -webkit-box-align: center; | |
| 581 | |
| 582 background-repeat: no-repeat; | |
| 583 background-position: 20px center; | |
| 584 } | 578 } |
| 585 | 579 |
| 586 .gallery .edit-modal .label.brightness { | 580 .gallery .edit-modal .label.brightness { |
| 587 background-image: url(../images/gallery/icon_brightness.png); | 581 background-image: url(../images/gallery/icon_brightness.png); |
| 588 } | 582 } |
| 589 | 583 |
| 590 .gallery .edit-modal .label.contrast { | 584 .gallery .edit-modal .label.contrast { |
| 585 background-image: url(../images/gallery/icon_contrast.png); |
| 591 margin-left: 15px; | 586 margin-left: 15px; |
| 592 background-image: url(../images/gallery/icon_contrast.png); | |
| 593 } | 587 } |
| 594 | 588 |
| 595 .gallery .edit-modal .range { | 589 .gallery .edit-modal .range { |
| 596 -webkit-appearance: none !important; | 590 -webkit-appearance: none !important; |
| 597 height: 3px; | 591 height: 3px; |
| 592 margin-right: 10px; |
| 598 margin-top: 1px; | 593 margin-top: 1px; |
| 599 margin-right: 10px; | |
| 600 } | 594 } |
| 601 | 595 |
| 602 .gallery .edit-modal .range::-webkit-slider-thumb { | 596 .gallery .edit-modal .range::-webkit-slider-thumb { |
| 603 -webkit-appearance: none; | 597 -webkit-appearance: none; |
| 598 background-image: url(../images/gallery/slider_thumb.png); |
| 599 height: 29px; |
| 604 width: 16px; | 600 width: 16px; |
| 605 height: 29px; | |
| 606 background-image: url(../images/gallery/slider_thumb.png); | |
| 607 } | 601 } |
| 608 | 602 |
| 609 /* Crop frame */ | 603 /* Crop frame */ |
| 610 | 604 |
| 611 .gallery .crop-overlay { | 605 .gallery .crop-overlay { |
| 606 -webkit-box-orient: vertical; |
| 607 display: -webkit-box; |
| 608 pointer-events: none; |
| 612 position: absolute; | 609 position: absolute; |
| 613 pointer-events: none; | |
| 614 display: -webkit-box; | |
| 615 -webkit-box-orient: vertical; | |
| 616 } | 610 } |
| 617 | 611 |
| 618 .gallery .crop-overlay .shadow { | 612 .gallery .crop-overlay .shadow { |
| 619 background-color: rgba(0,0,0,0.65); | 613 background-color: rgba(0,0,0,0.65); |
| 620 } | 614 } |
| 621 | 615 |
| 622 .gallery .crop-overlay .middle-box { | 616 .gallery .crop-overlay .middle-box { |
| 617 -webkit-box-flex: 1; |
| 618 -webkit-box-orient: horizontal; |
| 623 display: -webkit-box; | 619 display: -webkit-box; |
| 624 -webkit-box-orient: horizontal; | |
| 625 -webkit-box-flex: 1; | |
| 626 } | 620 } |
| 627 | 621 |
| 628 .gallery .crop-frame { | 622 .gallery .crop-frame { |
| 623 -webkit-box-flex: 1; |
| 624 display: -webkit-box; |
| 629 position: relative; | 625 position: relative; |
| 630 display: -webkit-box; | |
| 631 -webkit-box-flex: 1; | |
| 632 } | 626 } |
| 633 | 627 |
| 634 .gallery .crop-frame div{ | 628 .gallery .crop-frame div { |
| 629 -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.75); |
| 630 background-color: rgba(255, 255, 255, 1); |
| 635 position: absolute; | 631 position: absolute; |
| 636 background-color: rgba(255, 255, 255, 1); | |
| 637 -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.75); | |
| 638 } | 632 } |
| 639 | 633 |
| 640 .gallery .crop-frame .horizontal { | 634 .gallery .crop-frame .horizontal { |
| 635 height: 1px; |
| 641 left: 7px; | 636 left: 7px; |
| 642 right: 7px; | 637 right: 7px; |
| 643 height: 1px; | |
| 644 } | 638 } |
| 645 | 639 |
| 646 .gallery .crop-frame .horizontal.top { | 640 .gallery .crop-frame .horizontal.top { |
| 647 top: 0; | 641 top: 0; |
| 648 } | 642 } |
| 649 | 643 |
| 650 .gallery .crop-frame .horizontal.bottom { | 644 .gallery .crop-frame .horizontal.bottom { |
| 651 bottom: 0; | 645 bottom: 0; |
| 652 } | 646 } |
| 653 | 647 |
| 654 .gallery .crop-frame .vertical { | 648 .gallery .crop-frame .vertical { |
| 649 bottom: 7px; |
| 655 top: 7px; | 650 top: 7px; |
| 656 bottom: 7px; | |
| 657 width: 1px; | 651 width: 1px; |
| 658 } | 652 } |
| 659 | 653 |
| 660 .gallery .crop-frame .vertical.left { | 654 .gallery .crop-frame .vertical.left { |
| 661 left: 0; | 655 left: 0; |
| 662 } | 656 } |
| 663 | 657 |
| 664 .gallery .crop-frame .vertical.right { | 658 .gallery .crop-frame .vertical.right { |
| 665 right: 0; | 659 right: 0; |
| 666 } | 660 } |
| 667 | 661 |
| 668 .gallery .crop-frame .corner { | 662 .gallery .crop-frame .corner { |
| 669 border-radius: 6px; | 663 border-radius: 6px; |
| 664 height: 13px; |
| 670 width: 13px; | 665 width: 13px; |
| 671 height: 13px; | |
| 672 } | 666 } |
| 673 | 667 |
| 674 .gallery .crop-frame .corner.left { | 668 .gallery .crop-frame .corner.left { |
| 675 left: -6px; | 669 left: -6px; |
| 676 } | 670 } |
| 677 | 671 |
| 678 .gallery .crop-frame .corner.right { | 672 .gallery .crop-frame .corner.right { |
| 679 right: -6px; | 673 right: -6px; |
| 680 } | 674 } |
| 681 | 675 |
| 682 .gallery .crop-frame .corner.top { | 676 .gallery .crop-frame .corner.top { |
| 683 top: -6px; | 677 top: -6px; |
| 684 } | 678 } |
| 685 | 679 |
| 686 .gallery .crop-frame .corner.bottom { | 680 .gallery .crop-frame .corner.bottom { |
| 687 bottom: -6px; | 681 bottom: -6px; |
| 688 } | 682 } |
| 689 | 683 |
| 690 /* Prompt/notification panel */ | 684 /* Prompt/notification panel */ |
| 691 | 685 |
| 692 .gallery .prompt-wrapper { | 686 .gallery .prompt-wrapper { |
| 693 position: absolute; | |
| 694 pointer-events: none; | |
| 695 | |
| 696 width: 100%; | |
| 697 height: 100%; | |
| 698 | |
| 699 display: -webkit-box; | |
| 700 -webkit-box-orient: horizontal; | 687 -webkit-box-orient: horizontal; |
| 701 -webkit-box-pack: center; | 688 -webkit-box-pack: center; |
| 689 display: -webkit-box; |
| 690 height: 100%; |
| 691 pointer-events: none; |
| 692 position: absolute; |
| 693 width: 100%; |
| 702 } | 694 } |
| 703 | 695 |
| 704 .gallery .prompt-wrapper[pos=top] { | 696 .gallery .prompt-wrapper[pos=top] { |
| 705 -webkit-box-align: start; | 697 -webkit-box-align: start; |
| 706 } | 698 } |
| 707 | 699 |
| 708 .gallery .prompt-wrapper[pos=center] { | 700 .gallery .prompt-wrapper[pos=center] { |
| 709 -webkit-box-align: center; | 701 -webkit-box-align: center; |
| 710 } | 702 } |
| 711 | 703 |
| 712 .gallery .prompt-wrapper[pos=center] .close { | 704 .gallery .prompt-wrapper[pos=center] .close { |
| 713 display: none; | 705 display: none; |
| 714 } | 706 } |
| 715 | 707 |
| 716 .gallery .prompt-wrapper > div.dimmable { | 708 .gallery .prompt-wrapper > div.dimmable { |
| 709 -webkit-transition: opacity 220ms ease; |
| 717 opacity: 1; | 710 opacity: 1; |
| 718 -webkit-transition: opacity 220ms ease; | |
| 719 } | 711 } |
| 720 | 712 |
| 721 .gallery .prompt { | 713 .gallery .prompt { |
| 714 -webkit-box-align: center; |
| 715 -webkit-box-orient: horizontal; |
| 716 -webkit-transition: all 180ms ease; |
| 717 background-color: rgba(0, 0, 0, 0.8); |
| 718 color: white; |
| 719 display: -webkit-box; |
| 722 font-size: 120%; | 720 font-size: 120%; |
| 723 height: 40px; | 721 height: 40px; |
| 722 opacity: 0; |
| 724 padding: 0 20px; | 723 padding: 0 20px; |
| 725 color: white; | |
| 726 background-color: rgba(0, 0, 0, 0.8); | |
| 727 | |
| 728 display: -webkit-box; | |
| 729 -webkit-box-orient: horizontal; | |
| 730 -webkit-box-align: center; | |
| 731 | |
| 732 position: relative; | 724 position: relative; |
| 733 top: 5px; | 725 top: 5px; |
| 734 opacity: 0; | |
| 735 -webkit-transition: all 180ms ease; | |
| 736 } | 726 } |
| 737 | 727 |
| 738 .gallery .prompt[state='fadein'] { | 728 .gallery .prompt[state='fadein'], |
| 729 .gallery .prompt[state='fadeout'] { |
| 730 opacity: 0; |
| 739 top: 0; | 731 top: 0; |
| 740 opacity: 1; | |
| 741 } | |
| 742 | |
| 743 .gallery .prompt[state='fadeout'] { | |
| 744 top: 0; | |
| 745 opacity: 0; | |
| 746 } | 732 } |
| 747 | 733 |
| 748 .gallery .prompt-wrapper[pos=top] .prompt { | 734 .gallery .prompt-wrapper[pos=top] .prompt { |
| 749 padding-right: 10px; | 735 padding-right: 10px; |
| 750 } | 736 } |
| 751 | 737 |
| 752 .gallery .prompt .close { | 738 .gallery .prompt .close { |
| 753 pointer-events: auto; | 739 background-image: url(../images/gallery/butterbar_close_x.png); |
| 754 width: 16px; | 740 background-position: center center; |
| 741 background-repeat: no-repeat; |
| 755 height: 16px; | 742 height: 16px; |
| 756 margin-left: 16px; | 743 margin-left: 16px; |
| 757 opacity: 0.65; | 744 opacity: 0.65; |
| 758 background-image: url(../images/gallery/butterbar_close_x.png); | 745 pointer-events: auto; |
| 759 background-repeat: no-repeat; | 746 width: 16px; |
| 760 background-position: center center; | |
| 761 } | 747 } |
| 762 | 748 |
| 763 .gallery .prompt .close:hover { | 749 .gallery .prompt .close:hover { |
| 750 background-color: rgba(81,81,81,1); |
| 764 opacity: 1.0; | 751 opacity: 1.0; |
| 765 background-color: rgba(81,81,81,1); | |
| 766 } | 752 } |
| 767 | 753 |
| 768 | |
| 769 .gallery .share-menu { | 754 .gallery .share-menu { |
| 755 -webkit-border-radius: 1px; |
| 756 -webkit-box-align: stretch; |
| 757 -webkit-box-orient: vertical; |
| 758 -webkit-box-pack: start; |
| 759 -webkit-transition: opacity 500ms ease-in-out; |
| 760 background-color: white; |
| 761 border: 1px solid #7f7f7f; |
| 762 bottom: 60px; |
| 763 display: -webkit-box; |
| 764 opacity: 1.0; |
| 765 padding: 8px; |
| 770 position: absolute; | 766 position: absolute; |
| 771 right: 10px; | 767 right: 10px; |
| 772 bottom: 60px; | |
| 773 background-color: white; | |
| 774 opacity: 1.0; | |
| 775 -webkit-transition: opacity 500ms ease-in-out; | |
| 776 padding: 8px; | |
| 777 display: -webkit-box; | |
| 778 -webkit-box-orient: vertical; | |
| 779 -webkit-box-align: stretch; | |
| 780 -webkit-box-pack: start; | |
| 781 border: 1px solid #7f7f7f; | |
| 782 -webkit-border-radius: 1px; | |
| 783 } | 768 } |
| 784 | 769 |
| 785 .gallery .share-menu .bubble-point { | 770 .gallery .share-menu .bubble-point { |
| 786 background-image: url(../images/gallery/bubble_point.png); | 771 background-image: url(../images/gallery/bubble_point.png); |
| 787 background-position: center top; | 772 background-position: center top; |
| 788 background-repeat: no-repeat; | 773 background-repeat: no-repeat; |
| 774 bottom: -8px; |
| 775 height: 8px; |
| 776 padding: 0; |
| 789 position: absolute; | 777 position: absolute; |
| 778 right: 20px; |
| 790 width: 20px; | 779 width: 20px; |
| 791 height: 8px; | |
| 792 bottom: -8px; | |
| 793 right: 20px; | |
| 794 padding: 0; | |
| 795 } | 780 } |
| 796 | 781 |
| 797 .gallery .share-menu[hidden] { | 782 .gallery .share-menu[hidden] { |
| 783 bottom: -100%; /* offscreen so that 'dimmed' attribute does not show it*/ |
| 798 opacity: 0.0; | 784 opacity: 0.0; |
| 799 bottom: -100%; /* offscreen so that 'dimmed' attribute does not show it*/ | |
| 800 pointer-events: none; | 785 pointer-events: none; |
| 801 } | 786 } |
| 802 | 787 |
| 803 .gallery .share-menu > div { | 788 .gallery .share-menu > div { |
| 804 cursor: pointer; | |
| 805 background-color: rgba(0,0,0,0); | |
| 806 padding: 5px; | |
| 807 display: -webkit-box; | |
| 808 -webkit-box-align: center; | 789 -webkit-box-align: center; |
| 809 -webkit-box-pack: start; | 790 -webkit-box-pack: start; |
| 791 background-color: rgba(0,0,0,0); |
| 792 cursor: pointer; |
| 793 display: -webkit-box; |
| 794 padding: 5px; |
| 810 } | 795 } |
| 811 | 796 |
| 812 .gallery .share-menu > div:hover { | 797 .gallery .share-menu > div:hover { |
| 813 background-color: rgba(240,240,240,1); | 798 background-color: rgba(240,240,240,1); |
| 814 } | 799 } |
| 815 | 800 |
| 816 .gallery .share-menu > div > img { | 801 .gallery .share-menu > div > img { |
| 802 display: block; |
| 817 margin-right: 5px; | 803 margin-right: 5px; |
| 818 display: block; | |
| 819 } | 804 } |
| 820 | 805 |
| 821 /* Load spinner and error banner */ | 806 /* Load spinner and error banner */ |
| 822 | 807 |
| 823 .gallery .spinner { | 808 .gallery .spinner { |
| 824 width: 32px; | 809 background-image: url(../images/gallery/spinner_white.svg); |
| 810 background-size: 100%; |
| 825 height: 32px; | 811 height: 32px; |
| 826 position: absolute; | |
| 827 left: 50%; | 812 left: 50%; |
| 828 top: 50%; | |
| 829 margin-left: -16px; | 813 margin-left: -16px; |
| 830 margin-top: -16px; | 814 margin-top: -16px; |
| 831 opacity: 0.5; | 815 opacity: 0.5; |
| 832 background-size: 100%; | 816 position: absolute; |
| 833 background-image: url(../images/gallery/spinner_white.svg); | 817 top: 50%; |
| 818 width: 32px; |
| 834 } | 819 } |
| 835 | 820 |
| 836 .gallery:not([spinner]) .spinner { | 821 .gallery:not([spinner]) .spinner { |
| 837 display: none; | 822 display: none; |
| 838 } | 823 } |
| 839 | 824 |
| 840 .gallery .error-banner { | 825 .gallery .error-banner { |
| 826 -webkit-box-align: center; |
| 827 -webkit-box-orient: horizontal; |
| 828 -webkit-box-pack: center; |
| 829 background-color: rgba(24, 24, 24, 1); |
| 830 background-image: url(../images/media/error.png); |
| 831 background-position: 25px center; |
| 832 background-repeat: no-repeat; |
| 841 color: white; | 833 color: white; |
| 842 background-color: rgba(24, 24, 24, 1); | 834 display: -webkit-box; |
| 843 height: 54px; | 835 height: 54px; |
| 844 padding-left: 70px; | 836 padding-left: 70px; |
| 845 padding-right: 35px; | 837 padding-right: 35px; |
| 846 | |
| 847 display: -webkit-box; | |
| 848 -webkit-box-orient: horizontal; | |
| 849 -webkit-box-align: center; | |
| 850 -webkit-box-pack: center; | |
| 851 | |
| 852 background-image: url(../images/media/error.png); | |
| 853 background-repeat: no-repeat; | |
| 854 background-position: 25px center; | |
| 855 } | 838 } |
| 856 | 839 |
| 857 .gallery:not([error]) .error-banner { | 840 .gallery:not([error]) .error-banner { |
| 858 display: none; | 841 display: none; |
| 859 } | 842 } |
| 860 | 843 |
| 861 /* Video playback support. */ | 844 /* Video playback support. */ |
| 862 | 845 |
| 863 .gallery video { | 846 .gallery video { |
| 847 height: 100%; |
| 864 position: absolute; | 848 position: absolute; |
| 865 width: 100%; | 849 width: 100%; |
| 866 height: 100%; | |
| 867 } | 850 } |
| 868 | 851 |
| 869 .gallery .video-controls-spacer { | 852 .gallery .video-controls-spacer { |
| 870 position: absolute; | 853 -webkit-box-align: center; |
| 871 left: 0; | 854 -webkit-box-orient: horizontal; |
| 872 right: 0; | 855 -webkit-box-pack: center; |
| 873 height: 30px; | |
| 874 bottom: 60px; /* Just above the toolbar */ | 856 bottom: 60px; /* Just above the toolbar */ |
| 875 display: -webkit-box; | 857 display: -webkit-box; |
| 876 -webkit-box-orient: horizontal; | 858 height: 30px; |
| 877 -webkit-box-align: center; | 859 left: 0; |
| 878 -webkit-box-pack: center; | 860 opacity: 0; |
| 879 pointer-events: none; | 861 pointer-events: none; |
| 880 opacity: 0; | 862 position: absolute; |
| 863 right: 0; |
| 881 } | 864 } |
| 882 | 865 |
| 883 .gallery[video] .video-controls-spacer { | 866 .gallery[video] .video-controls-spacer { |
| 884 /* Animate opacity on 'tools' attribute toggle. */ | 867 /* Animate opacity on 'tools' attribute toggle. */ |
| 885 /* Change opacity immediately on 'video' attribute change. */ | 868 /* Change opacity immediately on 'video' attribute change. */ |
| 886 -webkit-transition: opacity 0.28s ease; | 869 -webkit-transition: opacity 280ms ease; |
| 887 } | 870 } |
| 888 | 871 |
| 889 .gallery[video][tools] .video-controls-spacer { | 872 .gallery[video][tools] .video-controls-spacer { |
| 890 opacity: 1; | 873 opacity: 1; |
| 891 } | 874 } |
| 892 | 875 |
| 893 .gallery .video-controls { | 876 .gallery .video-controls { |
| 877 display: none; |
| 894 max-width: 800px; | 878 max-width: 800px; |
| 895 display: none; | |
| 896 } | 879 } |
| 897 | 880 |
| 898 .gallery[video] .video-controls { | 881 .gallery[video] .video-controls { |
| 882 -webkit-box-flex: 1; |
| 899 display: -webkit-box; | 883 display: -webkit-box; |
| 900 -webkit-box-flex: 1; | |
| 901 } | 884 } |
| 902 | 885 |
| 903 .gallery[video] > .toolbar .button.edit, | 886 .gallery[video] > .toolbar .button.edit, |
| 904 .gallery[video] > .toolbar .edit-bar { | 887 .gallery[video] > .toolbar .edit-bar { |
| 905 display: none; | 888 display: none; |
| 906 } | 889 } |
| OLD | NEW |