margin: 0;
}
+input:focus, button:focus {
+ outline: 1px solid rgb(77, 144, 254);
+}
+
+input[type='checkbox'] {
+ width: 15px;
+ height: 15px;
+ background: -webkit-image-set(
+ url(../../file_manager/foreground/images/common/checkbox_white_unchecked.png) 1x,
+ url(../../file_manager/foreground/images/common/2x/checkbox_white_unchecked.png) 2x)
+ -1px -1px;
+ -webkit-appearance: none;
+ display: inline-block;
+ margin: 1px 6px 1px 1px;
+ vertical-align: text-bottom;
+}
+
+input[type='checkbox']:checked {
+ background: -webkit-image-set(
+ url(../../file_manager/foreground/images/common/checkbox_white_checked.png) 1x,
+ url(../../file_manager/foreground/images/common/2x/checkbox_white_checked.png) 2x)
+ -1px -1px;
+}
+
.gallery,
.gallery .content {
bottom: 0;
background-color: black;
}
-/* Close button */
-
-/* We actually want (left,top) to be (0,0) but for some weird reason
- this triggers :hover style on page reload which is ugly. */
-.gallery > .back-button {
- cursor: pointer;
- left: 1px;
- position: absolute;
- top: 1px;
- z-index: 200;
-}
-
-/* The close icon is in a nested div so that its opacity can be manipulated
- independently from its parent (which can be dimmed when the crop frame
- overlaps it) */
-.gallery > .back-button div {
- background-image: -webkit-image-set(
- url(../images/100/back_to_files.png) 1x,
- url(../images/200/back_to_files.png) 2x);
- background-position: center center;
- background-repeat: no-repeat;
- height: 40px;
- opacity: 0;
- width: 64px;
-}
-
-.gallery[tools] > .back-button div {
- opacity: 0.5;
-}
-
-.gallery[tools] > .back-button div:hover {
- opacity: 1;
-}
-
/* Image container and canvas elements */
.gallery .image-container {
max-height: 100%;
max-width: 100%;
}
-
- /* Print video at the center of the page */
- .gallery .image-container > video.image {
- position: auto !important;
- }
}
/* Toolbar */
-webkit-box-orient: horizontal;
-webkit-box-pack: start;
background-color: rgba(30, 30, 30, 0.8);
- display: -webkit-box;
+ display: flex;
left: 0;
opacity: 0;
padding: 0 10px;
border-top: 1px solid rgba(50, 50, 50, 0.8);
bottom: 0;
height: 55px;
- min-width: 800px;
+ overflow: hidden;
}
.gallery[tools]:not([slideshow]) > .header,
/* Filename */
.gallery .filename-spacer {
+ flex: 0 1 auto;
height: 100%;
+ min-width: 140px;
overflow: hidden;
position: relative;
- width: 270px;
+ width: 252px;
}
.gallery .filename-spacer > * {
pointer-events: none;
}
-.gallery .filename-spacer .overwrite-original input {
- margin-bottom: -2px;
- margin-right: 6px;
-}
-
.gallery .filename-spacer .saved[highlighted] {
-webkit-transform: scaleX(1.1) scaleY(1.1) rotate(0);
opacity: 1;
}
/* Bubble */
+
.gallery .toolbar .bubble {
bottom: 65px;
font-size: 85%;
display: none;
}
+/* Middle spacer */
+
+.gallery .middle-spacer {
+ align-items: center;
+ display: flex;
+ flex: 1 0 auto;
+ flex-direction: column;
+}
+
/* Toolbar buttons */
.gallery .button-spacer {
- -webkit-box-flex: 1;
- display: -webkit-box;
+ display: flex;
+ flex: none;
+ justify-content: flex-end;
+ width: 252px; /* 42px button x 6 */
}
/* Thumbnails */
.gallery .ribbon-spacer {
- -webkit-box-align: center;
- -webkit-box-orient: horizontal;
- -webkit-box-pack: center;
- display: -webkit-box;
- height: 100%;
- left: 280px;
- position: absolute;
- right: 280px;
+ height: 55px;
+ margin-bottom: -55px;
}
.gallery .toolbar .ribbon {
- -webkit-box-flex: 0;
- -webkit-box-orient: horizontal;
- -webkit-box-pack: start;
- display: -webkit-box;
height: 100%;
overflow: hidden;
transition: opacity 180ms linear, visibility 0 linear;
}
.gallery .ribbon-image {
- -webkit-box-align: center;
- -webkit-box-orient: horizontal;
- -webkit-box-pack: center;
border: 2px solid rgba(255, 255, 255, 0); /* transparent white */
cursor: pointer;
- display: -webkit-box;
+ display: inline-block;
height: 47px;
margin: 2px;
overflow: hidden;
}
.gallery .ribbon-image[selected] {
- border: 2px solid rgba(255, 233, 168, 1);
+ border: 2px solid rgb(77, 144, 254);
}
.gallery .toolbar .ribbon.fade-left {
height: 100%;
left: 280px;
opacity: 0;
- position: absolute;
right: 280px;
transition: opacity 180ms linear, visibility 0 linear 180ms;
visibility: hidden;
+ margin-bottom: -55px;
}
.gallery .toolbar .edit-main {
.gallery .toolbar button,
.gallery .header button[disabled],
.gallery .toolbar button[disabled] {
- -webkit-box-align: center;
- -webkit-box-flex: 0;
- -webkit-box-orient: horizontal;
- -webkit-box-pack: end;
background-color: rgba(0, 0, 0, 0);
background-position: center;
background-repeat: no-repeat;
box-shadow: none;
color: white;
cursor: pointer;
- display: -webkit-box;
+ display: inline-block;
+ flex: none;
opacity: 0.99; /* Workaround for http://crosbug.com/21065 */
padding: 1px; /* Instead of a border. */
position: relative;
width: 40px;
}
+.gallery .toolbar button:focus {
+ z-index: 11;
+}
+
/* By default, labels are hidden. */
.gallery > .toolbar button span {
display: none;
display: none;
}
-.gallery[mode='slide'] > .toolbar > button.mode {
+.gallery[mode='slide'] > .toolbar button.mode {
background-image: -webkit-image-set(
url(../images/100/icon_mosaic.png) 1x,
url(../images/200/icon_mosaic.png) 2x);
}
-.gallery[mode='slide'] > .toolbar > button.mode:active {
+.gallery[mode='slide'] > .toolbar button.mode:active {
background-image: -webkit-image-set(
url(../images/100/icon_mosaic_selected.png) 1x,
url(../images/200/icon_mosaic_selected.png) 2x);
}
-.gallery[mode='mosaic'] > .toolbar > button.mode {
+.gallery[mode='mosaic'] > .toolbar button.mode {
background-image: -webkit-image-set(
url(../images/100/icon_1up.png) 1x,
url(../images/200/icon_1up.png) 2x);
}
-.gallery[mode='mosaic'] > .toolbar > button.mode:active {
+.gallery[mode='mosaic'] > .toolbar button.mode:active {
background-image: -webkit-image-set(
url(../images/100/icon_1up_selected.png) 1x,
url(../images/200/icon_1up_selected.png) 2x);
}
-.gallery > .toolbar > button.slideshow {
+.gallery > .toolbar button.slideshow {
background-image: -webkit-image-set(
url(../images/100/icon_slideshow.png) 1x,
url(../images/200/icon_slideshow.png) 2x);
}
-.gallery > .toolbar > button.slideshow:active,
-.gallery > .toolbar > button.slideshow[pressed] {
+.gallery > .toolbar button.slideshow:active,
+.gallery > .toolbar button.slideshow[pressed] {
background-image: -webkit-image-set(
url(../images/100/icon_slideshow_selected.png) 1x,
url(../images/200/icon_slideshow_selected.png) 2x);
}
-.gallery > .toolbar > button.delete {
+.gallery > .toolbar button.delete {
background-image: -webkit-image-set(
url(../images/100/icon_delete.png) 1x,
url(../images/200/icon_delete.png) 2x);
}
-.gallery > .toolbar > button.delete:active {
+.gallery > .toolbar button.delete:active {
background-image: -webkit-image-set(
url(../images/100/icon_delete_selected.png) 1x,
url(../images/200/icon_delete_selected.png) 2x);
}
-.gallery > .toolbar > button.edit {
+.gallery > .toolbar button.edit {
background-image: -webkit-image-set(
url(../images/100/icon_edit.png) 1x,
url(../images/200/icon_edit.png) 2x);
}
-.gallery > .toolbar > button.edit:active,
-.gallery > .toolbar > button.edit[pressed] {
+.gallery > .toolbar button.edit:active,
+.gallery > .toolbar button.edit[pressed] {
background-image: -webkit-image-set(
url(../images/100/icon_edit_selected.png) 1x,
url(../images/200/icon_edit_selected.png) 2x);
}
-.gallery > .toolbar > button.print {
+.gallery > .toolbar button.print {
background-image: -webkit-image-set(
url(../images/100/icon_print.png) 1x,
url(../images/200/icon_print.png) 2x);
}
-.gallery > .toolbar > button.print:active,
-.gallery > .toolbar > button.print[pressed] {
+.gallery > .toolbar button.print:active,
+.gallery > .toolbar button.print[pressed] {
background-image: -webkit-image-set(
url(../images/100/icon_print_selected.png) 1x,
url(../images/200/icon_print_selected.png) 2x);
}
-.gallery > .toolbar > button.share {
+.gallery > .toolbar button.share {
background-image: -webkit-image-set(
url(../images/100/icon_share.png) 1x,
url(../images/200/icon_share.png) 2x);
}
-.gallery > .toolbar > button.share:active,
-.gallery > .toolbar > button.share[pressed] {
+.gallery > .toolbar button.share:active,
+.gallery > .toolbar button.share[pressed] {
background-image: -webkit-image-set(
url(../images/100/icon_share_selected.png) 1x,
url(../images/200/icon_share_selected.png) 2x);
}
-.gallery > .toolbar > button.share[disabled] {
+.gallery > .toolbar button.share[disabled] {
display: none;
}
background-color: rgba(0, 0, 0, 0.75);
color: white;
display: -webkit-box;
- padding-right: 5px;
pointer-events: auto;
}
margin-left: 15px;
}
+.gallery .edit-modal button {
+ background: transparent;
+ border: 0 none;
+ border-image: none;
+ box-sizing: border-box;
+ color: #fff;
+ height: 100%;
+ min-width: 0;
+ padding: 8px 16px;
+}
+
+.gallery .edit-modal button * {
+ pointer-events: none;
+}
+
+.gallery .edit-modal button:hover {
+ background: #1f1f1f;
+ color: #fff;
+}
+
+.gallery .edit-modal button.selected,
+.gallery .edit-modal button:active {
+ background: #f0f0f0;
+ color: black;
+}
+
.gallery .edit-modal .range {
-webkit-appearance: none !important;
- height: 3px;
+ background: transparent;
+ height: 29px;
margin-right: 10px;
- margin-top: 1px;
+ position: relative;
+}
+
+.gallery .edit-modal .range::before {
+ background: #fff;
+ content: '';
+ display: block;
+ height: 3px;
+ left: 3px;
+ position: absolute;
+ right: 3px;
+ top: 13px;
}
.gallery .edit-modal .range::-webkit-slider-thumb {
display: none;
}
-.gallery .prompt-wrapper > div.dimmable {
+.dimmable {
opacity: 1;
transition: opacity 220ms ease;
}
padding-right: 10px;
}
-.gallery .prompt .back-button {
- background-image: -webkit-image-set(
- url(../images/100/butterbar_close_button.png) 1x,
- url(../images/200/butterbar_close_button.png) 2x);
- background-position: center center;
- background-repeat: no-repeat;
- height: 16px;
- margin-left: 16px;
- opacity: 0.65;
- pointer-events: auto;
- width: 16px;
-}
-
-.gallery .prompt .back-button:hover {
- background-color: rgba(81, 81, 81, 1);
- opacity: 1.0;
-}
-
.gallery .share-menu {
-webkit-box-align: stretch;
-webkit-box-orient: vertical;
display: none;
}
-/* Video playback support. */
-
-.gallery video {
- height: 100%;
- position: absolute;
- width: 100%;
-}
-
-.gallery .video-controls-spacer {
- -webkit-box-align: center;
- -webkit-box-orient: horizontal;
- -webkit-box-pack: center;
- bottom: 60px; /* Just above the toolbar */
- display: -webkit-box;
- height: 30px;
- left: 0;
- opacity: 0;
- pointer-events: none;
- position: absolute;
- right: 0;
-}
-
-.gallery[video] .video-controls-spacer {
- /* Animate opacity on 'tools' attribute toggle. */
- /* Change opacity immediately on 'video' attribute change. */
- transition: opacity 280ms ease;
-}
-
-.gallery[video][tools] .video-controls-spacer {
- opacity: 1;
-}
-
-.gallery .video-controls {
- display: none;
- max-width: 800px;
-}
-
-.gallery[video] .video-controls {
- -webkit-box-flex: 1;
- display: -webkit-box;
-}
-
-.gallery[video] > .toolbar .edit-main {
- display: none;
-}
-
/* Mosaic view. */
.mosaic {
bottom: 55px; /* Toolbar height. */
outline-color: rgb(51, 153, 255);
}
-.mosaic[visible='normal'].hover-visible .mosaic-tile:hover {
- -webkit-transform: scale(1.05);
- z-index: 50;
-}
-
.mosaic[visible='normal'].hover-visible
.mosaic-tile:hover:not([selected]) .img-border {
outline-color: rgb(182, 212, 252);
projects / platform / framework / web / crosswalk.git / blobdiff