Home | History | Annotate | Download | only in css 
      1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
      2  * Use of this source code is governed by a BSD-style license that can be
      3  * found in the LICENSE file. */
      4 
      5 .photo-import {
      6   -webkit-user-select: none;
      7   bottom: 0;
      8   font-family: Noto Sans UI, Droid Sans Fallback, sans-serif;
      9   font-size: 84%;
     10   left: 0;
     11   margin: 0;
     12   overflow: hidden;
     13   position: absolute;
     14   right: 0;
     15   top: 0;
     16 }
     17 
     18 .photo-import[loading] grid,
     19 .photo-import:not([loading]) .spinner {
     20   display: none;
     21 }
     22 
     23 .grid-container {
     24   -webkit-box-orient: vertical;
     25   bottom: 0;
     26   display: -webkit-box;
     27   left: 0;
     28   padding: 0 20px;
     29   position: absolute;
     30   right: 0;
     31   top: 0;
     32 }
     33 
     34 .spinner {
     35   background-image: url('../images/common/spinner_white.svg');
     36   background-size: 100%;
     37   height: 22px;
     38   left: 50%;
     39   margin-left: -11px;
     40   margin-top: -11px;
     41   position: absolute;
     42   top: 50%;
     43   width: 22px;
     44 }
     45 
     46 /* The top and bottom bars with buttons */
     47 
     48 .topbar,
     49 .bottombar {
     50   -webkit-box-align: center;
     51   -webkit-box-orient: horizontal;
     52   display: -webkit-box;
     53   height: 65px;
     54   width: 100%;
     55 }
     56 
     57 .caption {
     58   font-size: 150%;
     59   margin-left: 8px;
     60 }
     61 
     62 .select {
     63   -webkit-margin-start: 15px;
     64   color: blue;
     65   cursor: pointer;
     66   padding-top: 5px;
     67 }
     68 
     69 .bottombar label {
     70   -webkit-box-flex: 1;
     71   display: block;
     72 }
     73 
     74 .bottombar input {
     75   margin-top: 10px;
     76 }
     77 
     78 button.import {
     79   min-width: 100px;
     80 }
     81 
     82 /* The cr.ui.Grid representing the files. */
     83 .photo-import grid {
     84   -webkit-box-flex: 1;
     85   overflow-y: auto;
     86   width: 100%;
     87 }
     88 
     89 
     90 .photo-import grid::-webkit-scrollbar {
     91   background: white;
     92   width: 8px;
     93 }
     94 
     95 .photo-import grid::-webkit-scrollbar-thumb {
     96   background: rgb(200, 200, 200);
     97 }
     98 
     99 /* Keep width in sync with PhotoImport.ITEM_WIDTH */
    100 .grid-container grid {
    101   line-height: 0;
    102 }
    103 
    104 .grid-item {
    105   border: 2px solid transparent;  /* Selection will make the border visible. */
    106   border-radius: 0;
    107   height: 120px;
    108   margin-bottom: 5px;
    109   margin-right: 6px;
    110   margin-top: 1px;
    111   overflow: visible;
    112   padding: 0;
    113   position: relative;
    114   width: 160px;
    115 }
    116 
    117 .grid-frame {
    118   background-image: -webkit-image-set(
    119     url('../images/files/ui/hashed_bg.gif') 1x,
    120     url('../images/files/ui/2x/hashed_bg.gif') 2x);
    121   border: 1px solid #d9d9d9;
    122   bottom: 0;
    123   left: 0;
    124   overflow: hidden;
    125   position: absolute;
    126   right: 0;
    127   top: 0;
    128 }
    129 
    130 .grid-item .check {
    131   background: -webkit-image-set(
    132     url('../images/common/check_blue.png') 1x,
    133     url('../images/common/2x/check_blue.png') 2x) no-repeat;
    134   bottom: -3px;
    135   display: none;
    136   height: 26px;
    137   left: -4px;
    138   position: absolute;
    139   width: 26px;
    140 }
    141 
    142 .img-container {
    143   height: 100%;
    144   position: relative;
    145   width: 100%;
    146 }
    147 
    148 .img-container > img {
    149   -webkit-user-drag: none;
    150   box-sizing: border-box;
    151   position: absolute;
    152 }
    153 
    154 .img-container > img:not(.cached) {
    155   -webkit-animation: fadeIn ease-in 1;
    156   -webkit-animation-duration: 100ms;
    157   -webkit-animation-fill-mode: forwards;
    158 }
    159 
    160 @-webkit-keyframes fadeIn {
    161   from {
    162     opacity: 0;
    163   }
    164   to {
    165     opacity: 1;
    166   }
    167 }
    168 
    169 .grid-item[lead] {
    170   border: 2px solid transparent !important;
    171 }
    172 
    173 .grid-item[selected],
    174 .grid-item[lead][selected],
    175 .grid-item:hover {
    176   border: 2px solid rgb(51, 153, 255) !important;
    177 }
    178 
    179 .grid-item[selected] .check {
    180   display: block;
    181 }
    182 
    183 /* Importing dialog styles */
    184 .importing-dialog .cr-dialog-frame {
    185   -webkit-box-orient: horizontal;
    186   padding: 14px;
    187 }
    188 
    189 .importing-dialog .cr-dialog-frame .progress-container {
    190   -webkit-box-flex: 1;
    191   -webkit-box-orient: vertical;
    192   display: -webkit-box;
    193 }
    194 
    195 .importing-dialog .img-container {
    196   display: -webkit-box;
    197   height: 120px;
    198   overflow: hidden;
    199   width: 120px;
    200 }
    201 
    202 .importing-dialog .content {
    203   -webkit-box-flex: 1;
    204   -webkit-box-orient: vertical;
    205   -webkit-margin-before: 14px;
    206   -webkit-margin-start: 15px;
    207   display: -webkit-box;
    208 }
    209 
    210 .importing-dialog .cr-dialog-title {
    211   display: none;
    212 }
    213 
    214 .importing-dialog .img-container[state=success]::after {
    215   background: -webkit-image-set(
    216     url('../images/common/check_circled.png') 1x,
    217     url('../images/common/2x/check_circled.png') 2x)
    218     no-repeat center rgba(20, 20, 22, 0.5);
    219   content: '';
    220   height: 120px;
    221   left: 0;
    222   opacity: 0.9;
    223   position: absolute;
    224   top: 0;
    225   width: 120px;
    226 }
    227 
    228 .importing-dialog .img-container[state=error]::after {
    229   background: rgba(20, 20, 22, 0.5);
    230   content: '';
    231   height: 120px;
    232   left: 0;
    233   opacity: 0.9;
    234   position: absolute;
    235   top: 0;
    236   width: 120px;
    237 }
    238