| OLD | NEW |
|---|
| (Empty) |
| 1 /* | |
| 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 | |
| 4 * found in the LICENSE file. | |
| 5 */ | |
| 6 | |
| 7 body { | |
| 8 margin: 0; | |
| 9 -webkit-user-select: none; | |
| 10 font-family: Open Sans,Droid Sans Fallback,sans-serif; | |
| 11 font-size: 84%; | |
| 12 } | |
| 13 | |
| 14 .gallery { | |
| 15 background: black; | |
| 16 position: absolute; | |
| 17 left: 0; | |
| 18 right: 0; | |
| 19 top: 0; | |
| 20 bottom: 0; | |
| 21 overflow: hidden; | |
| 22 } | |
| 23 | |
| 24 /* Close button */ | |
| 25 .gallery > .close { | |
| 26 position: absolute; | |
| 27 right: 5px; | |
| 28 top: 5px; | |
| 29 cursor: pointer; | |
| 30 z-index: 200; | |
| 31 } | |
| 32 | |
| 33 /* 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 | |
| 35 overlaps it) */ | |
| 36 .gallery > .close div { | |
| 37 opacity: 0; | |
| 38 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 } | |
| 44 | |
| 45 .gallery[tools] > .close div { | |
| 46 opacity: 0.5; | |
| 47 } | |
| 48 | |
| 49 .gallery[tools] > .close div:hover { | |
| 50 opacity: 0.7; | |
| 51 background-color: rgba(81,81,81,1); | |
| 52 } | |
| 53 | |
| 54 /* Image container and canvas elements */ | |
| 55 | |
| 56 .gallery > .image-container { | |
| 57 position: absolute; | |
| 58 height: 100%; | |
| 59 width: 100%; | |
| 60 background-color: rgba(0,0,0,1); | |
| 61 cursor: none; /* Only visible when the toolbar is active */ | |
| 62 } | |
| 63 | |
| 64 .gallery[tools][locked] *, | |
| 65 .gallery[tools][locked] .image-container[cursor] { | |
| 66 cursor: wait; | |
| 67 } | |
| 68 | |
| 69 .gallery[tools] .image-container[cursor='default'] { | |
| 70 cursor: default; | |
| 71 } | |
| 72 | |
| 73 .gallery[tools] .image-container[cursor='move'] { | |
| 74 cursor: url(../../images/gallery/cursor_move.png) 18 18; | |
| 75 } | |
| 76 | |
| 77 .gallery[tools] .image-container[cursor='crop'] { | |
| 78 cursor: url(../../images/gallery/cursor_crop.png) 18 18; | |
| 79 } | |
| 80 | |
| 81 .gallery[tools] .image-container[cursor='n-resize'], | |
| 82 .gallery[tools] .image-container[cursor='s-resize'] { | |
| 83 cursor: url(../../images/gallery/cursor_updown.png) 18 18; | |
| 84 } | |
| 85 | |
| 86 .gallery[tools] .image-container[cursor='e-resize'], | |
| 87 .gallery[tools] .image-container[cursor='w-resize'] { | |
| 88 cursor: url(../../images/gallery/cursor_leftright.png) 18 18; | |
| 89 } | |
| 90 | |
| 91 .gallery[tools] .image-container[cursor='nw-resize'], | |
| 92 .gallery[tools] .image-container[cursor='se-resize'] { | |
| 93 cursor: url(../../images/gallery/cursor_nwse.png) 18 18; | |
| 94 } | |
| 95 | |
| 96 .gallery[tools] .image-container[cursor='ne-resize'], | |
| 97 .gallery[tools] .image-container[cursor='sw-resize'] { | |
| 98 cursor: url(../../images/gallery/cursor_swne.png) 18 18; | |
| 99 } | |
| 100 | |
| 101 .gallery > .image-container > .image { | |
| 102 position: absolute; | |
| 103 pointer-events: none; | |
| 104 | |
| 105 -webkit-transition-property: -webkit-transform, opacity; | |
| 106 -webkit-transition-timing-function: ease-in-out; | |
| 107 | |
| 108 /* Keep in sync with ImageView.ANIMATION_DURATION in image_view.js*/ | |
| 109 -webkit-transition-duration: 180ms; | |
| 110 } | |
| 111 | |
| 112 .gallery > .image-container > .image[fade] { | |
| 113 opacity: 0; | |
| 114 } | |
| 115 | |
| 116 .gallery > .image-container > .image[fade='left'] { | |
| 117 -webkit-transform: translate(-40px,0); | |
| 118 } | |
| 119 | |
| 120 .gallery > .image-container > .image[fade='right'] { | |
| 121 -webkit-transform: translate(40px,0); | |
| 122 } | |
| 123 | |
| 124 /* Toolbar */ | |
| 125 | |
| 126 .gallery > .toolbar { | |
| 127 position: absolute; | |
| 128 bottom: 0; | |
| 129 width: 100%; | |
| 130 height: 55px; | |
| 131 display: -webkit-box; | |
| 132 -webkit-box-orient: horizontal; | |
| 133 -webkit-box-pack: start; | |
| 134 -webkit-box-align: stretch; | |
| 135 background-color: rgba(18,18,18,0.75); | |
| 136 border-top: 1px solid rgba(31,31,31,0.75); | |
| 137 | |
| 138 pointer-events: none; | |
| 139 opacity: 0; | |
| 140 -webkit-transform: translate(0, 0); | |
| 141 | |
| 142 -webkit-transition-property: webkit-transform, opacity; | |
| 143 -webkit-transition-duration: 300ms; | |
| 144 -webkit-transition-timing-function: ease; | |
| 145 } | |
| 146 | |
| 147 .gallery[tools] > .toolbar { | |
| 148 pointer-events: auto; | |
| 149 opacity: 1; | |
| 150 -webkit-transform: translate(0, 0); | |
| 151 } | |
| 152 | |
| 153 .gallery[tools][locked] > .toolbar { | |
| 154 pointer-events: none; | |
| 155 } | |
| 156 | |
| 157 .gallery .arrow-box { | |
| 158 position: absolute; | |
| 159 z-index: 100; | |
| 160 width: 100%; | |
| 161 height: 100%; | |
| 162 pointer-events: none; | |
| 163 display: -webkit-box; | |
| 164 -webkit-box-orient: horizontal; | |
| 165 -webkit-box-align: center; | |
| 166 -webkit-box-pack: center; | |
| 167 } | |
| 168 | |
| 169 .gallery .arrow-box .arrow { | |
| 170 pointer-events: none; | |
| 171 } | |
| 172 | |
| 173 .gallery .arrow-box .arrow-spacer { | |
| 174 -webkit-box-flex: 1; | |
| 175 pointer-events: none; | |
| 176 } | |
| 177 | |
| 178 .gallery[tools] .arrow[active] { | |
| 179 pointer-events: auto; | |
| 180 cursor: pointer; | |
| 181 } | |
| 182 | |
| 183 /* 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 | |
| 185 overlaps it) */ | |
| 186 .gallery .arrow div{ | |
| 187 width: 105px; | |
| 188 height: 193px; | |
| 189 background-repeat: no-repeat; | |
| 190 background-position: center center; | |
| 191 opacity: 0; | |
| 192 } | |
| 193 | |
| 194 .gallery[tools] .arrow[active] div{ | |
| 195 opacity: 0.25; | |
| 196 } | |
| 197 | |
| 198 .gallery[tools] .arrow[active] div:hover{ | |
| 199 opacity: 1; | |
| 200 } | |
| 201 | |
| 202 .gallery .arrow.left div{ | |
| 203 background-image: url(../../images/gallery/arrow_left.png); | |
| 204 } | |
| 205 | |
| 206 .gallery .arrow.right div{ | |
| 207 background-image: url(../../images/gallery/arrow_right.png); | |
| 208 } | |
| 209 | |
| 210 /* Special behavior on mouse drag. | |
| 211 Redundant .gallery attributes included to make the rules more specific */ | |
| 212 | |
| 213 /* Everything but the image container should become mouse-transparent */ | |
| 214 .gallery[tools][editing][mousedrag] * { | |
| 215 pointer-events: none; | |
| 216 } | |
| 217 | |
| 218 .gallery[tools][editing][mousedrag] .image-container { | |
| 219 pointer-events: auto; | |
| 220 } | |
| 221 | |
| 222 /* The editor marks elements with 'dimmed' attribute to get them out of the way | |
| 223 of the crop frame */ | |
| 224 .gallery[tools][editing] *[dimmed], | |
| 225 .gallery[tools][editing] *[dimmed] * { | |
| 226 pointer-events: none; | |
| 227 } | |
| 228 | |
| 229 .gallery[tools][editing] *[dimmed] { | |
| 230 opacity: 0.2; | |
| 231 } | |
| 232 | |
| 233 /* Filename */ | |
| 234 | |
| 235 .gallery .filename-spacer { | |
| 236 position: relative; | |
| 237 width: 270px; | |
| 238 } | |
| 239 | |
| 240 .gallery[renaming] .filename-spacer > div, | |
| 241 .gallery .filename-spacer > input { | |
| 242 opacity: 0; | |
| 243 z-index: 0; | |
| 244 } | |
| 245 | |
| 246 .gallery .filename-spacer > div, | |
| 247 .gallery[renaming] .filename-spacer > input { | |
| 248 opacity: 1; | |
| 249 z-index: 1; | |
| 250 } | |
| 251 | |
| 252 .gallery .filename-spacer > input, | |
| 253 .gallery .filename-spacer > div { | |
| 254 font-family: Open Sans,Droid Sans Fallback,sans-serif; | |
| 255 position: absolute; | |
| 256 left: 10px; | |
| 257 top: 15px; | |
| 258 background-color: transparent; | |
| 259 color: white; | |
| 260 width: 260px; | |
| 261 height: 21px; | |
| 262 border: none; | |
| 263 outline: none; | |
| 264 font-size: 120%; | |
| 265 overflow: hidden; | |
| 266 text-overflow: ellipsis; | |
| 267 white-space: nowrap; | |
| 268 } | |
| 269 | |
| 270 .gallery .filename-spacer > div:hover { | |
| 271 background-color: rgba(48, 48, 48, 1.0); | |
| 272 cursor: pointer; | |
| 273 } | |
| 274 | |
| 275 .gallery .filename-spacer > input:focus, | |
| 276 .gallery .filename-spacer > input:focus:hover { | |
| 277 background-color: white; | |
| 278 color: black; | |
| 279 border-right: 1px solid white; | |
| 280 border-bottom: 1px solid white; | |
| 281 } | |
| 282 | |
| 283 .gallery .button-spacer { | |
| 284 display: -webkit-box; | |
| 285 -webkit-box-flex: 1; | |
| 286 } | |
| 287 | |
| 288 /* Thumbnails */ | |
| 289 | |
| 290 .gallery .ribbon-spacer { | |
| 291 position: absolute; | |
| 292 left: 280px; | |
| 293 right: 280px; | |
| 294 height: 100%; | |
| 295 display: -webkit-box; | |
| 296 -webkit-box-orient: horizontal; | |
| 297 -webkit-box-pack: center; | |
| 298 -webkit-box-align: center; | |
| 299 } | |
| 300 | |
| 301 .gallery .toolbar .ribbon { | |
| 302 overflow: hidden; | |
| 303 height: 100%; | |
| 304 -webkit-box-flex: 0; | |
| 305 display: -webkit-box; | |
| 306 -webkit-box-orient: horizontal; | |
| 307 -webkit-box-pack: start; | |
| 308 | |
| 309 -webkit-transition: opacity 180ms linear; | |
| 310 z-index: 0; | |
| 311 } | |
| 312 | |
| 313 .gallery[editing] .toolbar .ribbon { | |
| 314 opacity: 0; | |
| 315 } | |
| 316 | |
| 317 .gallery .ribbon-image { | |
| 318 display: -webkit-box; | |
| 319 -webkit-box-orient: horizontal; | |
| 320 -webkit-box-pack: center; | |
| 321 -webkit-box-align: center; | |
| 322 overflow: hidden; | |
| 323 cursor: pointer; | |
| 324 width: 47px; | |
| 325 height: 47px; | |
| 326 margin: 2px; | |
| 327 border: 2px solid rgba(255,255,255,0); /* transparent white */ | |
| 328 -webkit-transition: margin-left 180ms linear; | |
| 329 } | |
| 330 | |
| 331 .gallery .ribbon-image[selected] { | |
| 332 border: 2px solid rgba(255,233,168,1); | |
| 333 } | |
| 334 | |
| 335 .gallery .toolbar .ribbon.fade-left { | |
| 336 -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0, rgba(0,0,0,
1) 40px); | |
| 337 } | |
| 338 | |
| 339 .gallery .toolbar .ribbon.fade-right { | |
| 340 -webkit-mask-image: -webkit-linear-gradient(right, rgba(0,0,0,0) 0, rgba(0,0,0
,1) 40px); | |
| 341 } | |
| 342 | |
| 343 .gallery .toolbar .ribbon.fade-left.fade-right { | |
| 344 -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%); | |
| 345 } | |
| 346 | |
| 347 .gallery .image-wrapper { | |
| 348 position: relative; | |
| 349 overflow: hidden; | |
| 350 width: 45px; | |
| 351 height: 45px; | |
| 352 border: 1px solid rgba(0,0,0,0); /* transparent black */ | |
| 353 } | |
| 354 | |
| 355 /* Editor buttons */ | |
| 356 | |
| 357 .gallery .toolbar .edit-bar { | |
| 358 position: absolute; | |
| 359 overflow: hidden; | |
| 360 pointer-events: none; | |
| 361 right: 0; | |
| 362 width: 100%; | |
| 363 opacity: 0; | |
| 364 height: 55px; | |
| 365 color: white; | |
| 366 display: -webkit-box; | |
| 367 -webkit-box-orient: horizontal; | |
| 368 -webkit-box-pack: center; | |
| 369 -webkit-transition: opacity 180ms linear; | |
| 370 } | |
| 371 | |
| 372 .gallery[editing] .toolbar .edit-bar { | |
| 373 opacity: 1; | |
| 374 } | |
| 375 | |
| 376 .gallery .edit-main { | |
| 377 display: -webkit-box; | |
| 378 -webkit-box-orient: horizontal; | |
| 379 opacity: 0; | |
| 380 -webkit-transition: opacity 250ms ease-in-out; | |
| 381 } | |
| 382 | |
| 383 .gallery[editing] .edit-main { | |
| 384 pointer-events: auto; | |
| 385 opacity: 1.0; | |
| 386 } | |
| 387 | |
| 388 .gallery > .toolbar .button { | |
| 389 -webkit-box-flex: 0; | |
| 390 padding: 0 10px 0 35px; | |
| 391 cursor: pointer; | |
| 392 margin: 8px 0 7px 3px; | |
| 393 height: 40px; | |
| 394 | |
| 395 display: -webkit-box; | |
| 396 -webkit-box-orient: horizontal; | |
| 397 -webkit-box-align: center; | |
| 398 -webkit-box-pack: end; | |
| 399 | |
| 400 background-repeat: no-repeat; | |
| 401 background-position: 5px center; | |
| 402 | |
| 403 opacity: 0.99; /* Workaround for http://crosbug.com/21065 */ | |
| 404 } | |
| 405 | |
| 406 .gallery > .toolbar .button { | |
| 407 background-color: rgba(0,0,0,0); | |
| 408 color: white; | |
| 409 } | |
| 410 | |
| 411 .gallery > .toolbar .button:hover { | |
| 412 background-color: rgba(31,31,31,1); | |
| 413 color: white; | |
| 414 } | |
| 415 | |
| 416 .gallery > .toolbar .button[pressed] { | |
| 417 background-color: rgba(240,240,240,1); | |
| 418 color: black; | |
| 419 } | |
| 420 | |
| 421 .gallery > .toolbar .button[pressed]:hover { | |
| 422 background-color: rgba(240,240,240,1); | |
| 423 color: black; | |
| 424 } | |
| 425 | |
| 426 .gallery > .toolbar .button.autofix { | |
| 427 background-image: url(../../images/gallery/icon_autofix.png); | |
| 428 } | |
| 429 | |
| 430 .gallery > .toolbar .button.autofix[pressed] { | |
| 431 background-image: url(../../images/gallery/icon_autofix_selected.png); | |
| 432 } | |
| 433 | |
| 434 .gallery > .toolbar .button.crop { | |
| 435 background-image: url(../../images/gallery/icon_crop.png); | |
| 436 } | |
| 437 | |
| 438 .gallery > .toolbar .button.crop[pressed] { | |
| 439 background-image: url(../../images/gallery/icon_crop_selected.png); | |
| 440 } | |
| 441 | |
| 442 .gallery > .toolbar .button.exposure { | |
| 443 background-image: url(../../images/gallery/icon_brightness.png); | |
| 444 } | |
| 445 | |
| 446 .gallery > .toolbar .button.exposure[pressed] { | |
| 447 background-image: url(../../images/gallery/icon_brightness_selected.png); | |
| 448 } | |
| 449 | |
| 450 .gallery > .toolbar .button.rotate_right { | |
| 451 background-image: url(../../images/gallery/icon_rotate.png); | |
| 452 } | |
| 453 | |
| 454 .gallery > .toolbar .button.rotate_right[pressed] { | |
| 455 background-image: url(../../images/gallery/icon_rotate_selected.png); | |
| 456 } | |
| 457 | |
| 458 .gallery > .toolbar .button.rotate_left { | |
| 459 background-image: url(../../images/gallery/icon_rotate_left.png); | |
| 460 } | |
| 461 | |
| 462 .gallery > .toolbar .button.rotate_left[pressed] { | |
| 463 background-image: url(../../images/gallery/icon_rotate_left_selected.png); | |
| 464 } | |
| 465 | |
| 466 .gallery > .toolbar .button.undo { | |
| 467 background-image: url(../../images/gallery/icon_undo.png); | |
| 468 } | |
| 469 | |
| 470 .gallery > .toolbar .button.redo { | |
| 471 position: absolute; /* Exclude from center-packing*/ | |
| 472 background-image: url(../../images/gallery/icon_redo.png); | |
| 473 } | |
| 474 | |
| 475 .gallery > .toolbar .button[disabled] { | |
| 476 pointer-events: none; | |
| 477 opacity: 0.5; | |
| 478 } | |
| 479 | |
| 480 .gallery > .toolbar .button[hidden] { | |
| 481 display: none; | |
| 482 } | |
| 483 | |
| 484 .gallery > .toolbar > .button.edit { | |
| 485 position: relative; | |
| 486 z-index: 10; | |
| 487 background-image: url(../../images/gallery/icon_edit.png); | |
| 488 } | |
| 489 | |
| 490 .gallery > .toolbar > .button.edit[pressed] { | |
| 491 background-image: url(../../images/gallery/icon_edit_selected.png); | |
| 492 } | |
| 493 | |
| 494 .gallery > .toolbar > .button.share { | |
| 495 position: relative; | |
| 496 z-index: 10; | |
| 497 background-image: url(../../images/gallery/icon_share.png); | |
| 498 } | |
| 499 | |
| 500 .gallery > .toolbar > .button.share[pressed] { | |
| 501 background-image: url(../../images/gallery/icon_share_selected.png); | |
| 502 } | |
| 503 | |
| 504 .gallery > .toolbar > .button:last-child { | |
| 505 margin-right: 8px; | |
| 506 } | |
| 507 | |
| 508 /* Secondary toolbar (mode-specific tools) */ | |
| 509 | |
| 510 .gallery .edit-modal { | |
| 511 position: absolute; | |
| 512 width: 100%; | |
| 513 bottom: 80px; | |
| 514 height: 40px; | |
| 515 display: -webkit-box; | |
| 516 -webkit-box-orient: horizontal; | |
| 517 -webkit-box-pack: center; | |
| 518 pointer-events: none; | |
| 519 } | |
| 520 | |
| 521 .gallery .edit-modal-wrapper[hidden] { | |
| 522 display: none; | |
| 523 } | |
| 524 | |
| 525 .gallery .edit-modal-wrapper { | |
| 526 color: white; | |
| 527 padding-right: 5px; | |
| 528 background-color: rgba(0, 0, 0, 0.75); | |
| 529 display: -webkit-box; | |
| 530 -webkit-box-orient: horizontal; | |
| 531 -webkit-box-pack: center; | |
| 532 -webkit-box-align: center; | |
| 533 pointer-events: auto; | |
| 534 } | |
| 535 | |
| 536 .gallery .edit-modal .label { | |
| 537 height: 20px; | |
| 538 padding-left: 50px; | |
| 539 padding-right: 10px; | |
| 540 | |
| 541 display: -webkit-box; | |
| 542 -webkit-box-orient: horizontal; | |
| 543 -webkit-box-align: center; | |
| 544 | |
| 545 background-repeat: no-repeat; | |
| 546 background-position: 20px center; | |
| 547 } | |
| 548 | |
| 549 .gallery .edit-modal .label.brightness { | |
| 550 background-image: url(../../images/gallery/icon_brightness.png); | |
| 551 } | |
| 552 | |
| 553 .gallery .edit-modal .label.contrast { | |
| 554 margin-left: 15px; | |
| 555 background-image: url(../../images/gallery/icon_contrast.png); | |
| 556 } | |
| 557 | |
| 558 .gallery .edit-modal .range { | |
| 559 -webkit-appearance: none !important; | |
| 560 height: 3px; | |
| 561 margin-top: 1px; | |
| 562 margin-right: 10px; | |
| 563 } | |
| 564 | |
| 565 .gallery .edit-modal .range::-webkit-slider-thumb { | |
| 566 -webkit-appearance: none; | |
| 567 width: 16px; | |
| 568 height: 29px; | |
| 569 background-image: url(../../images/gallery/slider_thumb.png); | |
| 570 } | |
| 571 | |
| 572 /* Crop frame */ | |
| 573 | |
| 574 .gallery .crop-overlay { | |
| 575 position: absolute; | |
| 576 pointer-events: none; | |
| 577 display: -webkit-box; | |
| 578 -webkit-box-orient: vertical; | |
| 579 } | |
| 580 | |
| 581 .gallery .crop-overlay .shadow { | |
| 582 background-color: rgba(0,0,0,0.65); | |
| 583 } | |
| 584 | |
| 585 .gallery .crop-overlay .middle-box { | |
| 586 display: -webkit-box; | |
| 587 -webkit-box-orient: horizontal; | |
| 588 -webkit-box-flex: 1; | |
| 589 } | |
| 590 | |
| 591 .gallery .crop-frame { | |
| 592 position: relative; | |
| 593 display: -webkit-box; | |
| 594 -webkit-box-flex: 1; | |
| 595 } | |
| 596 | |
| 597 .gallery .crop-frame div{ | |
| 598 position: absolute; | |
| 599 background-color: rgba(255, 255, 255, 1); | |
| 600 -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.75); | |
| 601 } | |
| 602 | |
| 603 .gallery .crop-frame .horizontal { | |
| 604 left: 7px; | |
| 605 right: 7px; | |
| 606 height: 1px; | |
| 607 } | |
| 608 | |
| 609 .gallery .crop-frame .horizontal.top { | |
| 610 top: 0; | |
| 611 } | |
| 612 | |
| 613 .gallery .crop-frame .horizontal.bottom { | |
| 614 bottom: 0; | |
| 615 } | |
| 616 | |
| 617 .gallery .crop-frame .vertical { | |
| 618 top: 7px; | |
| 619 bottom: 7px; | |
| 620 width: 1px; | |
| 621 } | |
| 622 | |
| 623 .gallery .crop-frame .vertical.left { | |
| 624 left: 0; | |
| 625 } | |
| 626 | |
| 627 .gallery .crop-frame .vertical.right { | |
| 628 right: 0; | |
| 629 } | |
| 630 | |
| 631 .gallery .crop-frame .corner { | |
| 632 border-radius: 6px; | |
| 633 width: 13px; | |
| 634 height: 13px; | |
| 635 } | |
| 636 | |
| 637 .gallery .crop-frame .corner.left { | |
| 638 left: -6px; | |
| 639 } | |
| 640 | |
| 641 .gallery .crop-frame .corner.right { | |
| 642 right: -6px; | |
| 643 } | |
| 644 | |
| 645 .gallery .crop-frame .corner.top { | |
| 646 top: -6px; | |
| 647 } | |
| 648 | |
| 649 .gallery .crop-frame .corner.bottom { | |
| 650 bottom: -6px; | |
| 651 } | |
| 652 | |
| 653 /* Prompt/notification panel */ | |
| 654 | |
| 655 .gallery .prompt-wrapper { | |
| 656 position: absolute; | |
| 657 pointer-events: none; | |
| 658 | |
| 659 width: 100%; | |
| 660 height: 100%; | |
| 661 | |
| 662 display: -webkit-box; | |
| 663 -webkit-box-orient: horizontal; | |
| 664 -webkit-box-align: center; | |
| 665 -webkit-box-pack: center; | |
| 666 } | |
| 667 | |
| 668 .gallery .prompt-wrapper > div.dimmable { | |
| 669 opacity: 1; | |
| 670 -webkit-transition: opacity 220ms ease; | |
| 671 } | |
| 672 | |
| 673 .gallery .prompt { | |
| 674 font-size: 120%; | |
| 675 height: 40px; | |
| 676 padding: 0 20px; | |
| 677 color: white; | |
| 678 background-color: rgba(0, 0, 0, 0.8); | |
| 679 | |
| 680 display: -webkit-box; | |
| 681 -webkit-box-orient: horizontal; | |
| 682 -webkit-box-align: center; | |
| 683 | |
| 684 position: relative; | |
| 685 top: 5px; | |
| 686 opacity: 0; | |
| 687 -webkit-transition: all 180ms ease; | |
| 688 } | |
| 689 | |
| 690 .gallery .prompt[state='fadein'] { | |
| 691 top: 0; | |
| 692 opacity: 1; | |
| 693 } | |
| 694 | |
| 695 .gallery .prompt[state='fadeout'] { | |
| 696 top: 0; | |
| 697 opacity: 0; | |
| 698 } | |
| 699 | |
| 700 .gallery .share-menu { | |
| 701 position: absolute; | |
| 702 right: 10px; | |
| 703 bottom: 60px; | |
| 704 background-color: white; | |
| 705 opacity: 1.0; | |
| 706 -webkit-transition: opacity 500ms ease-in-out; | |
| 707 padding: 8px; | |
| 708 display: -webkit-box; | |
| 709 -webkit-box-orient: vertical; | |
| 710 -webkit-box-align: stretch; | |
| 711 -webkit-box-pack: start; | |
| 712 border: 1px solid #7f7f7f; | |
| 713 -webkit-border-radius: 1px; | |
| 714 } | |
| 715 | |
| 716 .gallery .share-menu .bubble-point { | |
| 717 background-image: url(../../images/gallery/bubble_point.png); | |
| 718 background-position: center top; | |
| 719 background-repeat: no-repeat; | |
| 720 position: absolute; | |
| 721 width: 20px; | |
| 722 height: 8px; | |
| 723 bottom: -8px; | |
| 724 right: 20px; | |
| 725 padding: 0; | |
| 726 } | |
| 727 | |
| 728 .gallery .share-menu[hidden] { | |
| 729 opacity: 0.0; | |
| 730 bottom: -100%; /* offscreen so that 'dimmed' attribute does not show it*/ | |
| 731 pointer-events: none; | |
| 732 } | |
| 733 | |
| 734 .gallery .share-menu > div { | |
| 735 cursor: pointer; | |
| 736 background-color: rgba(0,0,0,0); | |
| 737 padding: 5px; | |
| 738 display: -webkit-box; | |
| 739 -webkit-box-align: center; | |
| 740 -webkit-box-pack: start; | |
| 741 } | |
| 742 | |
| 743 .gallery .share-menu > div:hover { | |
| 744 background-color: rgba(240,240,240,1); | |
| 745 } | |
| 746 | |
| 747 .gallery .share-menu > div > img { | |
| 748 margin-right: 5px; | |
| 749 display: block; | |
| 750 } | |
| 751 | |
| 752 /* Video playback support. */ | |
| 753 | |
| 754 .gallery video { | |
| 755 position: absolute; | |
| 756 width: 100%; | |
| 757 height: 100%; | |
| 758 } | |
| 759 | |
| 760 .gallery .video-controls-spacer { | |
| 761 position: absolute; | |
| 762 left: 0; | |
| 763 right: 0; | |
| 764 height: 30px; | |
| 765 bottom: 60px; /* Just above the toolbar */ | |
| 766 display: -webkit-box; | |
| 767 -webkit-box-orient: horizontal; | |
| 768 -webkit-box-align: center; | |
| 769 -webkit-box-pack: center; | |
| 770 pointer-events: none; | |
| 771 opacity: 0; | |
| 772 } | |
| 773 | |
| 774 .gallery[video] .video-controls-spacer { | |
| 775 /* Animate opacity on 'tools' attribute toggle. */ | |
| 776 /* Change opacity immediately on 'video' attribute change. */ | |
| 777 -webkit-transition: opacity 0.28s ease; | |
| 778 } | |
| 779 | |
| 780 .gallery[video][tools] .video-controls-spacer { | |
| 781 opacity: 1; | |
| 782 } | |
| 783 | |
| 784 .gallery .video-controls { | |
| 785 max-width: 800px; | |
| 786 display: none; | |
| 787 } | |
| 788 | |
| 789 .gallery[video] .video-controls { | |
| 790 display: -webkit-box; | |
| 791 -webkit-box-flex: 1; | |
| 792 } | |
| 793 | |
| 794 .gallery[video] > .toolbar .button.edit, | |
| 795 .gallery[video] > .toolbar .edit-bar { | |
| 796 display: none; | |
| 797 } | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 9583009:
[File Manager] Cleanup: Moving js/css/html files to dedicated directories (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src