| /* Copyright (c) 2014 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| /* The order of z-index: |
| * - -1: text-measure |
| * - 2: drag-selection-border |
| * - 3: preview-panel |
| * - 500: scrollbar |
| * - 500: splitter |
| * - 525: spinner |
| * - 550: autocomplete-suggestions |
| * - 600: menus |
| * - 600: tooltip |
| * - 1000: preview thumbnail popup |
| * - 1000: overlay panel (ie. image editor) |
| */ |
| |
| /* Special attribute used in HTML to hide elements. */ |
| body[type='folder'] [invisibleif~='folder'], |
| body[type='upload-folder'] [invisibleif~='upload-folder'], |
| body[type='saveas-file'] [invisibleif~='saveas-file'], |
| body[type='open-file'] [invisibleif~='open-file'], |
| body[type='open-multi-file'] [invisibleif~='open-multi-file'], |
| body[type='full-page'] [invisibleif~='full-page'], |
| |
| body[type='folder'] [visibleif]:not([visibleif~='folder']), |
| body[type='upload-folder'] [visibleif]:not([visibleif~='upload-folder']), |
| body[type='saveas-file'] [visibleif]:not([visibleif~='saveas-file']), |
| body[type='open-file'] [visibleif]:not([visibleif~='open-file']), |
| body[type='open-multi-file'] [visibleif]:not([visibleif~='open-multi-file']), |
| body[type='full-page'] [visibleif]:not([visibleif~='full-page']) { |
| display: none !important; |
| } |
| |
| html { |
| height: 100%; |
| } |
| |
| html.col-resize * { |
| cursor: col-resize !important; |
| } |
| |
| /* Outer frame of the dialog. */ |
| body { |
| -webkit-tap-highlight-color: transparent; |
| -webkit-user-select: none; |
| cursor: default; |
| display: flex; |
| flex: auto; |
| flex-direction: column; |
| height: 100%; |
| margin: 0; |
| padding: 0; |
| width: 100%; |
| } |
| |
| button:focus, |
| input[type='button']:focus, |
| input[type='submit']:focus, |
| select:focus, |
| a:focus { |
| outline-color: rgb(77, 144, 254); |
| } |
| |
| /* Drop opacity of selected rows to give a visual feedback on copy/cut |
| * operation. */ |
| .blink { |
| opacity: 0.8; |
| } |
| |
| ::-webkit-scrollbar { |
| height: 0; |
| width: 0; |
| } |
| |
| /* TODO(mtomasz): Flip scrollbars to the opposite side for RTL languages. */ |
| .scrollbar-vertical { |
| bottom: 0; |
| flex: none; |
| position: absolute; |
| right: 0; |
| top: 0; |
| width: 10px; |
| z-index: 500; /* Must be below the contextmenu (600). */ |
| } |
| |
| .scrollbar-button { |
| background-color: black; |
| border: 1px solid #ccc; |
| border-radius: 3px; |
| box-sizing: border-box; |
| height: 50%; |
| margin-right: 2px; |
| opacity: 0; |
| position: absolute; |
| transition: opacity 100ms; |
| width: 8px; |
| } |
| |
| :hover > .scrollbar-vertical > .scrollbar-button, |
| .scrollbar-vertical > .scrollbar-button.scrolling { |
| opacity: 0.3; |
| } |
| |
| .scrollbar-vertical > .scrollbar-button:hover { |
| opacity: 0.4; |
| } |
| |
| .scrollbar-vertical > .scrollbar-button.pressed { |
| opacity: 0.5; |
| } |
| |
| /* Main part of the dialog between header and footer. */ |
| .dialog-container { |
| align-items: stretch; |
| background-color: white; /* Makes #drag-container invisible. */ |
| display: flex; |
| flex: auto; |
| flex-direction: row; |
| overflow: hidden; |
| position: relative; |
| } |
| |
| /* The style applied when a modal dialog box overlap the dialog container. */ |
| .dialog-container.disable-header-drag .dialog-navigation-list-header, |
| .dialog-container.disable-header-drag .dialog-header { |
| -webkit-app-region: no-drag; |
| } |
| |
| /* List/grid and preview are inside this container. */ |
| .dialog-main { |
| align-items: stretch; |
| display: flex; |
| flex: auto; |
| flex-direction: column; |
| } |
| |
| /* Directory tree at the left. */ |
| .dialog-navigation-list { |
| -webkit-border-end: 1px solid rgba(20, 20, 22, 0.1); |
| background-color: #f1f1f1; |
| display: flex; |
| flex: none; |
| flex-direction: column; |
| max-width: 40%; |
| min-width: 100px; |
| overflow: hidden; |
| position: relative; |
| width: 190px; |
| } |
| |
| .dialog-navigation-list-header { |
| -webkit-app-region: drag; |
| flex: none; |
| height: 48px; /* Keep in sync with #dialog-header. */ |
| line-height: 45px; |
| } |
| |
| .dialog-navigation-list-header #app-name { |
| color: #303030; |
| font-size: 130%; |
| margin: 0 15px; |
| } |
| |
| .dialog-navigation-list-contents { |
| display: flex; |
| flex: 1 1 auto; |
| position: relative; |
| } |
| |
| .dialog-navigation-list-footer { |
| display: flex; |
| flex: none; |
| flex-direction: column; |
| } |
| |
| /* A vertical splitter between the roots list and the file list. It is actually |
| a transparent area centered on the roots list right border.*/ |
| div.splitter { |
| cursor: col-resize; |
| flex: none; |
| margin-left: -3px; |
| margin-right: -3px; |
| position: relative; |
| width: 6px; |
| z-index: 500; /* Must be below the contextmenu (600). */ |
| } |
| |
| #middlebar-header { |
| -webkit-border-end: 1px solid rgba(20, 20, 22, 0.1); |
| -webkit-box-sizing: border-box; |
| -webkit-padding-start: 20px; |
| color: rgb(100, 100, 100); |
| flex: none; |
| height: 47px; |
| line-height: 40px; |
| overflow-x: hidden; |
| position: absolute; |
| text-overflow: ellipsis; |
| width: 100%; |
| } |
| |
| #directory-tree { |
| bottom: 0; |
| flex: none; |
| left: 0; |
| overflow-x: hidden; |
| overflow-y: auto; |
| padding-bottom: 0; /* For the preview panel. Will be overridden by JS. */ |
| position: absolute; |
| right: 0; |
| top: 0; |
| } |
| |
| #directory-tree .tree-row { |
| align-items: center; |
| cursor: pointer; |
| display: flex; |
| line-height: 29px; |
| padding: 0 3px; |
| } |
| |
| /* For rows of subitems (non-top items) */ |
| #directory-tree .tree-children .tree-row { |
| line-height: 29px; |
| } |
| |
| #directory-tree .tree-row > .expand-icon { |
| flex: none; |
| height: 37px; |
| left: 3px; |
| margin: -12px -10px -13px -13px; |
| right: 3px; |
| top: 0; |
| width: 37px; |
| } |
| |
| #directory-tree:focus .tree-row[selected] > .expand-icon { |
| background-image: -webkit-canvas(tree-triangle-inverted); |
| } |
| |
| #directory-tree .tree-row > .volume-icon { |
| background-position: center 3px; |
| background-repeat: no-repeat; |
| flex: none; |
| height: 24px; |
| width: 24px; |
| } |
| |
| #directory-tree .tree-row > .label { |
| display: block; |
| flex: auto; |
| margin: 0 3px; |
| overflow-x: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| #directory-tree .tree-item.accepts > .tree-row, |
| #directory-tree .tree-row[lead][selected], |
| #directory-tree .tree-row[lead], |
| #directory-tree .tree-row[selected], |
| #directory-tree .tree-row[anchor], |
| #directory-tree .tree-row:active { |
| background-color: rgb(225, 225, 225); |
| } |
| |
| #directory-tree:focus .tree-item.accepts > .tree-row, |
| #directory-tree:focus .tree-row[lead][selected], |
| #directory-tree:focus .tree-row[lead], |
| #directory-tree:focus .tree-row[selected], |
| #directory-tree:focus .tree-row[anchor] { |
| background-color: rgb(193, 209, 232); |
| } |
| |
| #directory-tree:focus .tree-item.accepts > .tree-row, |
| #directory-tree:focus .tree-row[lead][selected], |
| #directory-tree:focus .tree-row[lead], |
| #directory-tree:focus .tree-row[selected], |
| #directory-tree:focus .tree-row[anchor] { |
| background-color: rgb(66, 129, 244); |
| color: white; |
| } |
| |
| /* Make top-level items thicker and their expand-icno invisible */ |
| #directory-tree > .tree-item > .tree-row { |
| line-height: 40px; |
| } |
| |
| #directory-tree > .tree-item > .tree-row > .expand-icon { |
| visibility: hidden; |
| } |
| |
| #directory-tree .tree-row > div.root-eject { |
| background: -webkit-image-set( |
| url('../images/files/ui/eject.png') 1x, |
| url('../images/files/ui/2x/eject.png') 2x) no-repeat center; |
| cursor: pointer; |
| flex: none; |
| height: 20px; |
| margin-right: 6px; |
| opacity: 0.7; |
| transition: opacity 70ms linear; |
| width: 20px; |
| } |
| |
| #directory-tree:focus .tree-row[selected] > div.root-eject { |
| background: -webkit-image-set( |
| url('../images/files/ui/eject_white.png') 1x, |
| url('../images/files/ui/2x/eject_white.png') 2x) no-repeat center; |
| opacity: 1; |
| } |
| |
| #directory-tree .root-item[disabled] { |
| opacity: 0.5; |
| pointer-events: none; |
| } |
| |
| /* Breadcrumbs and things under the title but above the list view. */ |
| .dialog-header { |
| -webkit-app-region: drag; |
| align-items: center; |
| display: flex; |
| flex: none; |
| flex-direction: row; |
| height: 48px; |
| margin: 0; |
| transition: all 180ms ease; |
| } |
| |
| .dialog-header .volume-icon { |
| -webkit-margin-start: 10px; |
| background-position: center center; |
| background-repeat: no-repeat; |
| flex: none; |
| height: 24px; |
| width: 24px; |
| } |
| |
| .dialog-header > .spacer { |
| flex: auto; |
| } |
| |
| /* Search box */ |
| |
| #search-box { |
| display: flex; |
| flex: none; |
| } |
| |
| #search-box input { |
| -webkit-app-region: no-drag; |
| background-color: #fff; |
| border-style: none; |
| color: #333; |
| cursor: default; |
| display: block; |
| height: 48px; |
| line-height: 1em; |
| margin: 0; |
| max-width: 100%; |
| outline: none; |
| padding: 0; |
| transition: width 0.2s ease; |
| width: 0; |
| } |
| |
| #search-box input::-webkit-search-cancel-button { |
| -webkit-appearance: none; |
| } |
| |
| #search-box.has-cursor input, |
| #search-box.has-text input { |
| width: 176px; |
| } |
| |
| #search-box .clear { |
| -webkit-app-region: no-drag; |
| -webkit-margin-end: 30px; |
| align-self: center; |
| background: -webkit-image-set( |
| url(../images/files/ui/search_clear.png) 1x, |
| url(../images/files/ui/2x/search_clear.png) 2x) |
| no-repeat center; |
| border: none; |
| display: none; |
| flex: none; |
| height: 12px; |
| min-height: 0; |
| min-width: 0; |
| outline: none; |
| padding: 0; |
| visibility: hidden; |
| width: 12px; |
| } |
| |
| #search-box.has-cursor .clear, |
| #search-box.has-text .clear { |
| display: block; |
| } |
| |
| #search-box.has-text .clear { |
| visibility: visible; |
| } |
| |
| #search-box .clear:hover { |
| background-image: -webkit-image-set( |
| url(../images/files/ui/search_clear_hover.png) 1x, |
| url(../images/files/ui/2x/search_clear_hover.png) 2x); |
| } |
| |
| #search-box .clear:active { |
| background-image: -webkit-image-set( |
| url(../images/files/ui/search_clear_pressed.png) 1x, |
| url(../images/files/ui/2x/search_clear_pressed.png) 2x); |
| } |
| |
| .topbutton-bar { |
| flex: none; |
| } |
| |
| .topbutton-bar .search-button { |
| background-image: -webkit-image-set( |
| url(../images/files/ui/search_icon_active.png) 1x, |
| url(../images/files/ui/2x/search_icon_active.png) 2x); |
| } |
| |
| .topbutton-bar .view-button.table { |
| background-image: -webkit-image-set( |
| url('../images/files/ui/button_list_view.png') 1x, |
| url('../images/files/ui/2x/button_list_view.png') 2x); |
| } |
| |
| .topbutton-bar .view-button.grid { |
| background-image: -webkit-image-set( |
| url('../images/files/ui/button_mosaic_view.png') 1x, |
| url('../images/files/ui/2x/button_mosaic_view.png') 2x); |
| } |
| |
| /* Container for the detail and thumbnail list views. */ |
| .dialog-body { |
| -webkit-transition: all 180ms ease; |
| border-top: 1px solid rgba(20, 20, 22, 0.1); |
| flex: auto; |
| position: relative; |
| } |
| |
| .main-panel { |
| bottom: 0; |
| display: flex; |
| left: 0; |
| position: absolute; |
| right: 0; |
| top: 0; |
| } |
| |
| .dialog-middlebar-contents { |
| display: flex; |
| flex: none; |
| max-width: 50%; |
| min-width: 45px; |
| position: relative; |
| width: 180px; |
| } |
| |
| /* Container for the ok/cancel buttons. */ |
| .dialog-footer { |
| align-items: center; |
| border-top: 1px solid rgb(225, 225, 225); |
| display: flex; |
| flex: none; |
| flex-direction: row; |
| outline: none; |
| padding: 10px; |
| } |
| |
| .progressable:not([progress]) .progress-bar, |
| .progressable:not([progress]) .preparing-label { |
| display: none; |
| } |
| |
| .progressable[progress] .ok, |
| .progressable[progress] #filename-input-box, |
| .progressable[progress] #preview-lines, |
| .progressable[progress] .file-type { |
| display: none; |
| } |
| |
| .progressable .progress-bar { |
| -webkit-margin-end: 20px; |
| -webkit-margin-start: 20px; |
| flex: auto; |
| } |
| |
| /* The container for breadcrumb elements. */ |
| .breadcrumbs { |
| align-items: center; |
| display: flex; |
| flex: auto; |
| flex-direction: row; |
| line-height: 20px; |
| overflow: hidden; |
| padding-top: 1px; |
| } |
| |
| .breadcrumbs > [collapsed]::before { |
| content: '...'; |
| } |
| |
| .breadcrumbs > [collapsed] { |
| width: 1em; |
| } |
| |
| /* A single directory name in the list of path breadcrumbs. */ |
| .breadcrumb-path { |
| color: #141414; |
| cursor: pointer; |
| flex: none; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| /* The final breadcrumb, representing the current directory. */ |
| #search-breadcrumbs .breadcrumb-path.breadcrumb-last { |
| color: #141414; |
| cursor: default; |
| } |
| |
| /* The > arrow between breadcrumbs. */ |
| |
| .breadcrumbs .separator { |
| background-image: -webkit-image-set( |
| url('../images/files/ui/breadcrumb-separator.png') 1x, |
| url('../images/files/ui/2x/breadcrumb-separator.png') 2x); |
| background-position: center center; |
| background-repeat: no-repeat; |
| flex: none; |
| height: 10px; |
| overflow: hidden; |
| width: 25px; |
| } |
| |
| html[dir='rtl'] .breadcrumbs .separator { |
| -webkit-transform: scaleX(-1); |
| } |
| |
| #filename-input-box input { |
| border: 1px solid #c8c8c8; |
| border-radius: 1px; |
| box-sizing: border-box; |
| height: 31px; /* border-box */ |
| margin-right: 30px; |
| } |
| |
| .filelist-panel { |
| display: flex; |
| flex: auto; |
| flex-direction: column; |
| } |
| |
| #list-container { |
| display: flex; |
| flex: auto; |
| flex-direction: column; |
| position: relative; |
| } |
| |
| #detail-table { |
| display: flex; |
| flex: auto; |
| flex-direction: column; |
| } |
| |
| #detail-table > list, |
| .thumbnail-grid { |
| flex: auto; |
| padding-bottom: 0; /* For the preview panel. Will be overridden by JS. */ |
| } |
| |
| #file-list { |
| /* Override overflow specifying by table_list.js to use the original scroll |
| bar. crbug.com/391698 */ |
| overflow: scroll !important; |
| } |
| |
| #file-list .drag-selection-border { |
| -webkit-box-sizing: border-box; |
| background-color: rgba(255, 255, 255, 0.3); |
| border: 2px solid rgba(255, 255, 255, 0.6); |
| outline: 1px solid rgba(0, 0, 0, 0.1); |
| position: absolute; |
| z-index: 2; |
| } |
| |
| .spinner { |
| background: url(../images/common/spinner.svg) center/100% no-repeat; |
| height: 16px; |
| left: 50%; |
| margin-left: -8px; |
| margin-top: -8px; |
| opacity: 0.5; |
| position: absolute; |
| top: 50%; |
| width: 16px; |
| } |
| |
| .spinner-layer { |
| background: url(../images/common/spinner.svg) center / 16px no-repeat; |
| bottom: 0; |
| left: 0; |
| position: absolute; |
| right: 0; |
| top: 0; |
| z-index: 525; |
| } |
| |
| .downloads-warning { |
| align-items: center; |
| background-color: #f0f0f0; |
| background-image: -webkit-image-set( |
| url('../images/files/ui/warning_icon_square.png') 1x, |
| url('../images/files/ui/2x/warning_icon_square.png') 2x); |
| background-position: 15px center; |
| background-repeat: no-repeat; |
| color: #666; |
| display: flex; |
| flex: none; |
| flex-direction: row; |
| font-size: 13px; |
| height: 44px; |
| overflow: hidden; |
| padding-left: 57px; /* Make space for the icon. */ |
| transition: height 70ms linear; |
| } |
| |
| .downloads-warning[hidden] { |
| display: flex !important; /* Overrides [hidden] for animation. */ |
| height: 0; |
| } |
| |
| @-webkit-keyframes heightAnimation { |
| 0% { |
| display: flex; |
| height: 0; |
| } |
| } |
| |
| /* Drive space warning banner. */ |
| .volume-warning { |
| -webkit-animation: heightAnimation 70ms linear; |
| align-items: center; |
| background-image: url(chrome://resources/images/clouds.png); |
| background-repeat: repeat-x; |
| background-size: 150px 44px; |
| color: #333; |
| display: flex; |
| flex: none; |
| flex-direction: row; |
| font-size: 13px; |
| height: 44px; |
| overflow: hidden; |
| position: relative; |
| } |
| |
| .volume-warning[hidden] { |
| border-top-width: 0; |
| height: 0; |
| } |
| |
| .volume-warning .drive-icon { |
| background-image: -webkit-image-set( |
| url('../images/files/ui/drive_logo.png') 1x, |
| url('../images/files/ui/2x/drive_logo.png') 2x); |
| background-position: center; |
| background-repeat: no-repeat; |
| background-size: 25px 22px; |
| flex: none; |
| height: 44px; |
| width: 50px; |
| } |
| |
| .volume-warning .drive-text { |
| flex: none; |
| margin-right: 11px; |
| } |
| |
| /* The cr.ui.Grid representing the detailed file list. */ |
| .thumbnail-grid { |
| overflow-y: auto; |
| padding-bottom: 0; /* For the preview panel. Will be overridden by JS. */ |
| width: 100%; |
| } |
| |
| body[type='full-page'] .thumbnail-frame > .img-container { |
| position: relative; |
| } |
| |
| body[type='full-page'] .thumbnail-frame > .img-container, |
| body[type='full-page'] .detail-name .detail-icon { |
| cursor: pointer; |
| } |
| |
| .img-container > img { |
| -webkit-user-drag: none; |
| position: absolute; |
| } |
| |
| .img-container > img:not(.cached) { |
| -webkit-animation: fadeIn 250ms linear; |
| } |
| |
| .thumbnail-bottom { |
| align-items: center; |
| bottom: 0; |
| cursor: auto; |
| display: flex; |
| flex-direction: row; |
| justify-content: center; |
| left: 0; |
| padding: 0 10px; |
| position: absolute; |
| right: 0; |
| } |
| |
| .thumbnail-bottom .filename-label { |
| flex: auto; |
| } |
| |
| /* Styles specific for the grid view. */ |
| |
| .thumbnail-grid .thumbnail-item { |
| -webkit-margin-start: 21px; |
| border: 3px solid transparent; /* Selection will make the border visible. */ |
| margin-top: 20px; |
| position: relative; |
| } |
| |
| .thumbnail-grid .thumbnail-frame { |
| background-color: rgb(245, 245, 245); |
| height: 120px; |
| overflow: hidden; |
| position: relative; |
| width: 160px; |
| } |
| |
| .thumbnail-grid .thumbnail-item[selected] .thumbnail-frame, |
| .thumbnail-grid .thumbnail-item.accepts .thumbnail-frame { |
| border-color: white; |
| } |
| |
| .thumbnail-grid .img-container { |
| height: 100%; |
| width: 100%; |
| } |
| |
| .thumbnail-grid .thumbnail-bottom { |
| background: rgba(0, 0, 0, 0.55); |
| color: #fff; |
| height: 30px; |
| } |
| |
| /* Padding counterweights negative margins of items, thus eliminating scroll |
| bar when it's not needed. Max height is set to fit 8 items before showing |
| scroll bar. */ |
| #default-actions-list { |
| max-height: 328px; |
| padding: 1px 0; |
| } |
| |
| #default-actions-list > li > * { |
| background-position: 5px center; |
| background-repeat: no-repeat; |
| background-size: 16px 16px; |
| padding-left: 26px; |
| } |
| |
| #list-container list > li[selected], |
| #list-container list > li:active, |
| #list-container grid > li[selected], |
| #list-container grid > li:active, |
| #default-actions-list > li[selected] { |
| background-color: rgb(225, 225, 225); |
| } |
| |
| #list-container list:focus > li[selected], |
| #list-container grid:focus > li[selected], |
| #default-actions-list:focus > li[selected] { |
| background-color: rgb(66, 129, 244); |
| color: white; |
| } |
| |
| #list-container list > li.accepts[selected], |
| #list-container grid > li.accepts[selected] { |
| background-color: rgb(215, 215, 215); |
| } |
| |
| #list-container list:focus > li.accepts[selected], |
| #list-container grid:focus > li.accepts[selected] { |
| background-color: rgb(48, 125, 254); |
| } |
| |
| #list-container list > li.accepts, |
| #list-container grid > li.accepts { |
| background-color: #f1f1f1; |
| } |
| |
| #list-container.nohover grid > .accepts { |
| background-color: transparent; |
| } |
| |
| #directory-tree .tree-item.accepts > .tree-row, |
| #list-container list > li.accepts, |
| #list-container grid > li.accepts { |
| -webkit-animation: acceptsBlink 200ms linear 1s 3; |
| } |
| |
| @-webkit-keyframes acceptsBlink { |
| 0% { |
| background-color: transparent; |
| } |
| } |
| |
| .table-row-cell .filename-label, |
| .thumbnail-item .filename-label, |
| /* Show ellipsis in cells. The name column has different structure and overrides |
| this rule. */ |
| .table-row-cell > div { |
| display: block; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| /* Text box used for renaming in the detail list. */ |
| .table-row-cell input.rename { |
| border-width: 0; |
| padding: 2px 0; |
| } |
| |
| input.rename:focus { |
| outline-color: rgb(77, 144, 254); |
| } |
| |
| input.rename { |
| font: inherit; |
| line-height: 1; |
| text-align: inherit; |
| } |
| |
| .table-row-cell .filename-label, |
| .table-row-cell input.rename { |
| flex: auto; |
| } |
| |
| li[renaming=''] .filename-label { |
| display: none; |
| } |
| |
| /* Text box used for renaming in the thumbnail list. */ |
| .thumbnail-grid input.rename { |
| -webkit-margin-start: -1px; |
| box-sizing: border-box; |
| height: 20px; |
| width: 114px; |
| } |
| |
| /* The cr.ui.Table representing the detailed file list. */ |
| .detail-table { |
| width: 100%; |
| } |
| |
| /* Bottom pane describing current selection. */ |
| .preview-panel { |
| -webkit-transition: background-color 150ms ease; |
| align-items: center; |
| background: white; |
| border-top: 1px solid rgba(20, 20, 22, 0.1); |
| bottom: 0; |
| display: flex; |
| flex-direction: row; |
| height: 51px; |
| left: 0; |
| opacity: 1; |
| padding: 0 10px 0 7px; |
| position: absolute; |
| right: 0; |
| z-index: 3; |
| } |
| |
| .preview-panel[visibility=hiding] { |
| -webkit-transform: translate(0, 5px); |
| opacity: 0; |
| /* Using all seems to cause preview panel and checkbox flicking issue. */ |
| transition: opacity 220ms ease, |
| -webkit-transform 220ms ease; |
| } |
| |
| .preview-panel[visibility=hidden] { |
| display: none; |
| opacity: 0; |
| } |
| |
| .preview-panel > .left, |
| .dialog-footer > .left { |
| align-items: center; |
| display: flex; |
| flex: auto; |
| flex-direction: row; |
| } |
| |
| .preview-panel > .right, |
| .dialog-footer > .right { |
| flex: none; |
| justify-content: flex-end; |
| } |
| |
| .preview-panel .preparing-label { |
| -webkit-margin-start: 30px; |
| flex: none; |
| } |
| |
| .preview-panel .progress-bar { |
| flex: auto; |
| } |
| |
| .preview-panel .preview-text { |
| color: #333; |
| } |
| |
| .preview-thumbnails { |
| display: flex; |
| flex-direction: row; |
| padding-left: 25px; |
| } |
| |
| .preview-thumbnails > .img-container { |
| background-color: white; |
| background-size: 35px 35px; /* For file icons. */ |
| border: 2px solid white; |
| box-shadow: 0 1px 1px rgba(80, 80, 80, 0.5); |
| box-sizing: border-box; |
| cursor: pointer; |
| height: 35px; |
| margin: 0 0 0 -25px; /* Overlapped images. */ |
| overflow: hidden; |
| position: relative; |
| width: 35px; |
| } |
| |
| .preview-thumbnails > .popup { |
| -webkit-transform: translate(0, 3px) scale(0.95); |
| background-color: #f2f2f2; |
| border: 2px solid #fff; |
| bottom: 8px; |
| box-shadow: 0 0 0 1px #F0F0F0, |
| 0 0 0 2px #D0D0D0, |
| 2px 2px 6px rgba(0, 0, 0, 0.2); |
| display: flex; |
| left: -8px; |
| opacity: 0; |
| pointer-events: none; |
| position: absolute; |
| transition: opacity 180ms ease-in 300ms, |
| -webkit-transform 180ms ease-in 300ms; |
| z-index: 1000; |
| } |
| |
| .preview-thumbnails.has-zoom:hover > .popup { |
| -webkit-transform: translate(0, 0) scale(1.0); |
| opacity: 1; |
| pointer-events: auto; |
| } |
| |
| @-webkit-keyframes fadeIn { |
| from { |
| opacity: 0; |
| } |
| to { |
| opacity: 1; |
| } |
| } |
| |
| .preview-thumbnails img { |
| -webkit-animation: fadeIn 180ms ease-in-out; |
| } |
| |
| .preview-thumbnails > .popup > img { |
| flex: 1 1 0; |
| -webkit-user-drag: none; |
| } |
| |
| /* Table splitter element */ |
| .table-header-splitter { |
| background-image: -webkit-image-set( |
| url('../images/files/ui/vertical_separator.png') 1x, |
| url('../images/files/ui/2x/vertical_separator.png') 2x); |
| background-position: center; |
| background-repeat: repeat-y; |
| height: 20px; |
| top: 10px; |
| width: 5px; |
| } |
| |
| .table-header-splitter:last-child { |
| display: none; |
| } |
| |
| /* Container for a table header. */ |
| .table-header { |
| box-sizing: border-box; |
| flex: none; |
| height: 47px; |
| } |
| |
| .table-header-sort-image-desc::after { |
| -webkit-padding-start: 13px; |
| background-image: -webkit-image-set( |
| url('../images/files/ui/sort_desc.png') 1x, |
| url('../images/files/ui/2x/sort_desc.png') 2x); |
| background-position: center center; |
| background-repeat: no-repeat; |
| color: #888; |
| content: '\00a0'; |
| position: relative; |
| top: 1px; |
| } |
| |
| .table-header-sort-image-asc::after { |
| -webkit-padding-start: 13px; |
| background-image: -webkit-image-set( |
| url('../images/files/ui/sort_asc.png') 1x, |
| url('../images/files/ui/2x/sort_asc.png') 2x); |
| background-position: center center; |
| background-repeat: no-repeat; |
| color: #888; |
| content: '\00a0'; |
| position: relative; |
| top: -1px; |
| } |
| |
| .preview-container .table-header { |
| border-radius: 0 4px 0 0; |
| } |
| |
| /* Text label in a table header. */ |
| .table-header-label { |
| color: rgb(100, 100, 100); |
| line-height: 40px; |
| margin: 0 7px; |
| } |
| |
| .table-row-cell > * { |
| align-items: center; |
| flex: auto; |
| flex-direction: row; |
| padding: 0 10px; |
| } |
| |
| .table-row-cell { |
| color: rgb(100, 100, 100); |
| } |
| |
| .table-row-cell > .detail-name { |
| display: flex; |
| } |
| |
| .table-row-cell > .detail-name { |
| color: rgb(0, 0, 0); |
| } |
| |
| |
| #list-container list:focus > [selected] .table-row-cell, |
| #list-container list:focus > [selected] .detail-name { |
| color: white; |
| } |
| |
| .table-row-cell { |
| align-items: center; |
| } |
| |
| #list-container li.table-row, |
| #default-actions-list li { |
| height: 32px; |
| line-height: 32px; |
| } |
| |
| /* The icon in the name column. See file_types.css for specific icons. */ |
| .detail-icon { |
| height: 24px; |
| width: 24px; |
| } |
| |
| #detail-table .detail-icon { |
| /* To shift the icon position. */ |
| margin-bottom: 2px; |
| } |
| |
| .preview-panel .spacer { |
| flex: auto; |
| } |
| |
| #delete-button { |
| min-width: 21px; /* overrride */ |
| padding: 0; /* overrride */ |
| width: 21px; |
| } |
| |
| #delete-button::before { |
| /* Background image should be specified in the before pseudo element because |
| * border image fill is specified to delete-button. */ |
| background: -webkit-image-set( |
| url(../images/files/ui/onbutton_trash.png) 1x, |
| url(../images/files/ui/2x/onbutton_trash.png) 2x) no-repeat center; |
| content: ''; |
| display: block; |
| height: 100%; |
| width: 100%; |
| } |
| |
| #delete-button[disabled] { |
| display: none; |
| } |
| |
| #tasks-menu menuitem:not(.change-default) { |
| background-position: left 10px center; |
| padding-left: 32px; |
| } |
| |
| #share-button { |
| display: block; |
| min-width: 0; /* overrride */ |
| } |
| |
| #preview-lines { |
| -webkit-margin-end: 10px; |
| -webkit-margin-start: 10px; |
| flex: auto; |
| } |
| |
| /* The selection summary text at the bottom of the preview pane. */ |
| .preview-summary { |
| color: #666; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| vertical-align: middle; |
| white-space: nowrap; |
| } |
| |
| .preview-summary .calculating-size { |
| margin-left: 5px; |
| opacity: 0.5; |
| } |
| |
| .detail-name > * { |
| align-items: center; |
| display: flex; |
| flex: none; |
| } |
| |
| #filename-input-box { |
| align-items: center; |
| display: flex; |
| flex: auto; |
| } |
| |
| #filename-input-box input { |
| flex: auto; |
| padding: 1px 2px; |
| } |
| |
| #filename-input-box .filename-label { |
| background-color: white; |
| color: #333; |
| flex: none; |
| padding-right: 4px; |
| } |
| |
| body:not([type='saveas-file']) #filename-input-box { |
| display: none; |
| } |
| |
| /* Dimmed items */ |
| |
| body[type='folder'] .file, |
| body[type='upload-folder'] .file, |
| body[drive] .dialog-container[connection='offline'] .dim-offline { |
| opacity: 0.4; |
| } |
| |
| /* Invisible container for elements representing files while dragging. */ |
| #drag-container { |
| left: 0; |
| position: fixed; |
| top: 0; |
| z-index: -1; /* below .dialog-container */ |
| } |
| |
| #drag-container .drag-contents { |
| background-color: #fafafa; |
| border: 1px solid #bbb; |
| border-radius: 3px; |
| box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .2); |
| display: flex; |
| flex-direction: row; |
| line-height: 0; |
| margin-bottom: 5px; |
| padding: 6px; |
| transition: opacity 200ms ease-in; |
| } |
| |
| #drag-container .drag-contents.for-image { |
| flex: none; |
| padding: 2px; |
| } |
| |
| #drag-container .thumbnail-item { |
| display: flex; |
| flex-direction: row; |
| } |
| |
| #drag-container .label { |
| flex: auto; |
| font-weight: bold; |
| line-height: 24px; |
| max-width: 320px; |
| overflow: hidden; |
| padding: 0 5px; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| menu.file-context-menu { |
| z-index: 600; /* Must be below the overlay pane (1000). */ |
| } |
| |
| menu.chrome-menu hr { |
| color: transparent; |
| font-size: 0; |
| } |
| |
| div.shade { |
| /* transition: opacity 1000ms linear; */ |
| background-color: rgba(255, 255, 255, 0.8); |
| bottom: 0; |
| left: 0; |
| opacity: 0; |
| position: absolute; |
| right: 0; |
| top: 0; |
| } |
| |
| div.shade[fadein] { |
| opacity: 1; |
| } |
| |
| /* Message panel for unmounted Drive */ |
| #unmounted-panel, |
| #format-panel { |
| bottom: 0; |
| color: #333; |
| display: none; |
| left: 0; |
| padding-left: 50px; |
| padding-top: 20px; |
| position: absolute; |
| right: 0; |
| top: 0; |
| } |
| |
| body[drive='mounting'] .dialog-container #unmounted-panel, |
| body[drive='error'] .dialog-container #unmounted-panel, |
| body[unformatted] .dialog-container #format-panel { |
| display: block; |
| } |
| |
| body[drive='unmounted'] .dialog-container .filelist-panel, |
| body[drive='mounting'] .dialog-container .filelist-panel, |
| body[drive='error'] .dialog-container .filelist-panel, |
| body[unformatted] .dialog-container .filelist-panel { |
| /* Hide file list when Drive is not mounted. |
| Use opacity to avoid manual resizing.*/ |
| opacity: 0; |
| } |
| |
| #unmounted-panel > *, |
| #format-panel > * { |
| align-items: center; |
| display: none; |
| flex-direction: row; |
| height: 22px; |
| justify-content: flex-start; |
| margin-bottom: 10px; |
| } |
| |
| #unmounted-panel > .loading { |
| position: relative; |
| } |
| |
| #unmounted-panel > .loading > .spinner-box { |
| bottom: 0; |
| position: absolute; |
| right: 100%; |
| top: 0; |
| width: 40px; |
| } |
| |
| body[unformatted] #format-panel > .error, |
| body[drive='mounting'] #unmounted-panel > .loading, |
| body[drive='error'] #unmounted-panel > .error, |
| #format-panel > #format-button, |
| #unmounted-panel.retry-enabled > .learn-more { |
| display: flex; |
| } |
| |
| .plain-link { |
| color: rgb(17, 85, 204); |
| cursor: pointer; |
| text-decoration: none; |
| } |
| |
| .buttonbar > * { |
| position: relative; |
| } |
| |
| .buttonbar .tooltip, |
| .topbutton-bar .tooltip { |
| right: -12px; |
| top: 35px; |
| } |
| |
| /* Tooltips */ |
| .tooltip { |
| background: #2d2d2d; |
| border-radius: 0; |
| box-shadow: 1px 2px 4px #ccc; |
| box-sizing: border-box; |
| color: white; |
| display: block; |
| font-size: 11px; |
| font-weight: bold; |
| height: 29px; |
| line-height: 29px; |
| margin-left: -20px; |
| min-width: 50px; |
| opacity: 0; |
| outline: 1px solid rgba(255, 255, 255, 0.5); |
| padding: 0 10px; |
| pointer-events: none; |
| position: absolute; |
| text-align: center; |
| top: 5px; |
| white-space: nowrap; |
| z-index: 600; /* Must be below the overlay pane (1000). */ |
| } |
| |
| .tooltip::after, |
| .tooltip::before { |
| border-left: 5px solid transparent; |
| border-right: 5px solid transparent; |
| border-top: transparent; |
| content: ''; |
| display: block; |
| margin-left: -5px; |
| position: absolute; |
| right: 24px; |
| top: -5px; |
| } |
| |
| .tooltip::after { |
| border-bottom: 5px solid #2d2d2d; |
| } |
| |
| .tooltip::before { |
| border-bottom: 5px solid rgba(255, 255, 255, 0.5); |
| } |
| |
| /* Show with delay, disappear instantly */ |
| @-webkit-keyframes tooltip-show { |
| 0% { opacity: 0; } |
| 90% { opacity: 0; } |
| 100% { opacity: 1; } |
| } |
| |
| :hover > .tooltip { |
| -webkit-animation-duration: 800ms; |
| -webkit-animation-iteration-count: 1; |
| -webkit-animation-name: tooltip-show; |
| -webkit-animation-timing-function: linear; |
| opacity: 1; |
| } |
| |
| #no-search-results { |
| bottom: 0; |
| display: none; |
| flex: none; |
| left: 0; |
| padding: 10px; |
| position: absolute; |
| right: 0; |
| top: 28px; /* Leave room for the file list header. */ |
| } |
| |
| .dialog-container:not([drive-welcome='page']) #no-search-results[show] { |
| display: block; |
| } |
| |
| #volume-space-info-contents { |
| align-items: center; |
| display: flex; |
| } |
| |
| #volume-space-info-contents > div { |
| -webkit-margin-start: 15px; |
| display: flex; |
| flex: auto; |
| } |
| |
| #list-container .table-header-inner { |
| height: 100%; |
| } |
| |
| #list-container .table-header-cell:hover { |
| background-color: inherit; |
| } |
| |
| #list-container .table-header-cell:first-child { |
| -webkit-box-sizing: border-box; |
| -webkit-padding-start: 8px; |
| } |
| |
| #new-folder-button { |
| flex: none; |
| margin-right: 30px; |
| } |
| |
| #default-action-dialog { |
| min-width: 300px; |
| width: auto; |
| } |
| |
| .drive-welcome-wrapper { |
| /* drive_welcome.css will override it once loaded. */ |
| display: none; |
| } |
| |
| list.autocomplete-suggestions { |
| -webkit-margin-start: -38px; |
| background-color: rgb(250, 250, 250); |
| border-radius: 3px; |
| box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .5); |
| box-sizing: border-box; /* To match the width with the search box's. */ |
| color: rgb(34, 34, 34); |
| flex: none; |
| margin-top: -7px; |
| overflow: hidden; |
| padding: 5px 0; |
| position: fixed; |
| width: 300px !important; /* This overrides the value specified by script. */ |
| z-index: 550; |
| } |
| |
| list.autocomplete-suggestions > li { |
| align-items: center; |
| display: flex; |
| padding: 3px 0; |
| } |
| |
| list.autocomplete-suggestions > li > div.detail-icon { |
| -webkit-margin-end: 6px; |
| -webkit-margin-start: 6px; |
| } |
| |
| list.autocomplete-suggestions > li > div.detail-text { |
| flex: auto; |
| overflow-x: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| list.autocomplete-suggestions > li > div.detail-text em { |
| color: rgb(150, 150, 150); |
| font-style: normal; |
| } |
| |
| list.autocomplete-suggestions > li > div[search-icon] { |
| background: -webkit-image-set( |
| url('../images/files/ui/search_icon_active.png') 1x, |
| url('../images/files/ui/2x/search_icon_active.png') 2x) center no-repeat; |
| } |
| |
| list.autocomplete-suggestions > li[selected] > div[search-icon], |
| list.autocomplete-suggestions > li[lead] > div[search-icon] { |
| background: -webkit-image-set( |
| url('../images/files/ui/search_icon_white.png') 1x, |
| url('../images/files/ui/2x/search_icon_white.png') 2x) center no-repeat; |
| } |
| |
| list.autocomplete-suggestions > [selected], |
| list.autocomplete-suggestions > [lead] { |
| background-color: rgb(66, 129, 244); |
| color: white; |
| } |
| |
| list.autocomplete-suggestions > [selected] > div.detail-text em, |
| list.autocomplete-suggestions > [lead] > div.detail-text em { |
| color: white; |
| } |
| |
| #gear-menu { |
| margin-top: 8px; |
| } |
| |
| #gear-menu > menuitem:not(.menuitem-button) { |
| -webkit-margin-end: 50px; |
| } |
| |
| #suggest-app-dialog { |
| background-color: #fff; |
| border: 0; |
| padding: 0; |
| width: auto; |
| } |
| |
| #suggest-app-dialog .cr-dialog-title { |
| /* Entire height: 44px (content-box 22px + padding 11px * 2) */ |
| font-size: 16px; |
| height: 22px; |
| margin: 0; |
| padding: 11px 18px; |
| } |
| |
| #suggest-app-dialog #webview-container { |
| border-bottom: solid 1px #bbb; |
| border-top: solid 1px #bbb; |
| position: relative; |
| } |
| |
| #suggest-app-dialog.show-spinner #webview-container webview { |
| pointer-events: none; |
| } |
| |
| #suggest-app-dialog:not(.show-spinner) .spinner-layer { |
| display: none; |
| } |
| |
| #suggest-app-dialog .spinner-layer { |
| background-color: rgba(255, 255, 255, 0.7); |
| } |
| |
| #suggest-app-dialog .cr-dialog-buttons, |
| #suggest-app-dialog .cr-dialog-ok, |
| #suggest-app-dialog .cr-dialog-cancel { |
| display: none; |
| } |
| |
| #suggest-app-dialog .cr-dialog-text { |
| padding: 0 20px 10px; |
| margin: 0; |
| } |
| |
| #suggest-app-dialog #buttons { |
| background: #eee; |
| width: 100%; |
| } |
| |
| #suggest-app-dialog #buttons > #webstore-button { |
| -webkit-padding-end: 10px; |
| -webkit-padding-start: 36px; |
| background-image: -webkit-image-set( |
| url('chrome://theme/IDR_WEBSTORE_ICON_16') 1x, |
| url('chrome://theme/IDR_WEBSTORE_ICON_16@2x') 2x); |
| background-position: 12px center; |
| background-repeat: no-repeat; |
| color: #00f; |
| cursor: pointer; |
| display: inline-block; |
| height: 16px; |
| padding-bottom: 10px; |
| padding-top: 10px; |
| } |
| |
| .cr-dialog-frame.error-dialog-frame { |
| width: 300px; |
| } |
| |
| .error-dialog-frame .error-dialog-img { |
| background-image: -webkit-image-set( |
| url('chrome://theme/IDR_ERROR_NETWORK_GENERIC') 1x, |
| url('chrome://theme/IDR_ERROR_NETWORK_GENERIC@2x') 2x); |
| background-position: center; |
| background-repeat: no-repeat; |
| height: 40px; |
| } |
| |
| .error-dialog-frame .cr-dialog-cancel { |
| display: none; |
| } |
| |
| .error-dialog-frame .cr-dialog-close, |
| .error-dialog-frame .cr-dialog-title { |
| display: none; |
| } |
| |
| .error-dialog-frame .cr-dialog-text { |
| text-align: center; |
| } |
| |
| #multi-profile-share-dialog .cr-dialog-title { |
| margin-bottom: 0; |
| } |
| |
| #multi-profile-share-dialog .cr-dialog-text { |
| line-height: 18px; |
| margin-top: 0; |
| } |
| |
| #multi-profile-share-dialog .mail-label { |
| padding-right: 16px; |
| } |
| |
| #multi-profile-share-dialog .mail-label::after { |
| content: ':'; |
| } |
| |
| #multi-profile-share-dialog .share-line { |
| margin: 8px 16px; |
| } |
| |
| #conflict-confirm-dialog .cr-dialog-buttons { |
| align-items: baseline; |
| display: flex; |
| } |
| |
| #conflict-confirm-dialog input[type=checkbox] { |
| -webkit-margin-start: -2px; |
| width: auto; |
| } |
| |
| #conflict-confirm-dialog label { |
| flex: 1 0 auto; |
| } |
| |
| /* Progress center */ |
| |
| @-webkit-keyframes progress-center-toggle { |
| /* Height values of each frame are set by script. |
| * Keep the animation sync with JS. */ |
| from { |
| } |
| to { |
| } |
| } |
| |
| #progress-center { |
| background-color: transparent; |
| border-top: 1px solid transparent; |
| overflow: hidden; |
| position: relative; |
| transition: background-color 300ms linear, |
| border 300ms linear; |
| } |
| |
| #progress-center.opened { |
| background-color: #ebebeb; |
| border-top: 1px solid #d8d8d8; |
| } |
| |
| #progress-center.animated { |
| -webkit-animation: progress-center-toggle 300ms ease-out; |
| } |
| |
| #progress-center-open-view { |
| opacity: 1; |
| padding-top: 10px; |
| transition: opacity 300ms linear; |
| } |
| |
| #progress-center:not(.opened) #progress-center-open-view { |
| opacity: 0; |
| pointer-events: none; |
| position: absolute; |
| } |
| |
| #progress-center-close-view { |
| opacity: 1; |
| padding-top: 10px; |
| transition: opacity 300ms linear; |
| } |
| |
| #progress-center.opened #progress-center-close-view { |
| opacity: 0; |
| pointer-events: none; |
| position: absolute; |
| } |
| |
| #progress-center.animated #progress-center-open-view, |
| #progress-center.animated #progress-center-close-view { |
| left: 0; |
| pointer-events: none; |
| position: absolute; |
| right: 0; |
| top: 0; |
| z-index: 1; |
| } |
| |
| #progress-center li { |
| -webkit-padding-end: 10px; |
| display: flex; |
| /* This must not be margin-bottom to calculate parent's height correctly. */ |
| padding-bottom: 20px; |
| } |
| |
| #progress-center label { |
| color: #777; |
| display: block; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| #progress-center li.error.single label { |
| white-space: normal; |
| } |
| |
| #progress-center .progress-frame { |
| -webkit-padding-end: 10px; |
| -webkit-padding-start: 20px; |
| flex: 1 0 0; |
| } |
| |
| #progress-center .progress-bar { |
| background: #d8d8d8; |
| border-radius: 3px; |
| display: inline-block; |
| height: 6px; |
| opacity: 1; |
| overflow: hidden; |
| width: 100%; |
| } |
| |
| #progress-center li.error .progress-bar, |
| #progress-center li.quiet .progress-bar { |
| display: none; |
| } |
| |
| #progress-center .progress-track { |
| background: #787878; |
| height: 100%; |
| } |
| |
| #progress-center .progress-track.animated { |
| transition: width 300ms linear; |
| } |
| |
| #progress-center .button-frame { |
| align-self: flex-end; |
| flex: none; |
| } |
| |
| #progress-center button { |
| border: none; |
| cursor: pointer; |
| display: inline-block; |
| height: 12px; |
| min-height: 0; |
| min-width: 0; |
| outline: none; |
| padding: 0; |
| vertical-align: middle; |
| width: 12px; |
| } |
| |
| #progress-center li.error.single .button-frame { |
| display: none; |
| } |
| |
| #progress-center button.close { |
| -webkit-margin-end: 10px; |
| -webkit-margin-start: auto; |
| background: -webkit-image-set( |
| url(../images/files/ui/process_drawer_button_opened.png) 1x, |
| url(../images/files/ui/2x/process_drawer_button_opened.png) 2x) |
| no-repeat; |
| display: block; |
| margin-bottom: 20px; |
| } |
| |
| #progress-center button.close:hover { |
| background: -webkit-image-set( |
| url(../images/files/ui/process_drawer_button_opened_hover.png) 1x, |
| url(../images/files/ui/2x/process_drawer_button_opened_hover.png) 2x) |
| no-repeat; |
| } |
| |
| #progress-center button.close:active { |
| background: -webkit-image-set( |
| url(../images/files/ui/process_drawer_button_opened_pressed.png) 1x, |
| url(../images/files/ui/2x/process_drawer_button_opened_pressed.png) 2x) |
| no-repeat; |
| } |
| |
| #progress-center button.open { |
| background: -webkit-image-set( |
| url(../images/files/ui/process_drawer_button_closed.png) 1x, |
| url(../images/files/ui/2x/process_drawer_button_closed.png) 2x) |
| no-repeat; |
| } |
| |
| #progress-center button.open:hover { |
| background: -webkit-image-set( |
| url(../images/files/ui/process_drawer_button_closed_hover.png) 1x, |
| url(../images/files/ui/2x/process_drawer_button_closed_hover.png) 2x) |
| no-repeat; |
| } |
| |
| #progress-center button.open:active { |
| background: -webkit-image-set( |
| url(../images/files/ui/process_drawer_button_closed_pressed.png) 1x, |
| url(../images/files/ui/2x/process_drawer_button_closed_pressed.png) 2x) |
| no-repeat; |
| } |
| |
| #progress-center button.cancel { |
| background: -webkit-image-set( |
| url(../images/files/ui/close_bar.png) 1x, |
| url(../images/files/ui/2x/close_bar.png) 2x) |
| no-repeat; |
| } |
| |
| #progress-center-close-view:not(.single) button.cancel { |
| display: none; |
| } |
| |
| #progress-center-close-view.single button.open { |
| display: none; |
| } |
| |
| #progress-center li:not(.cancelable) button.cancel { |
| visibility: hidden; |
| } |
| |
| .text-measure { |
| pointer-events: none; |
| position: absolute; |
| top: 0; |
| visibility: hidden; |
| z-index: -1; |
| } |