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 input:focus,
      6 button:focus {
      7   outline-color: rgb(77, 144, 254);
      8 }
      9 
     10 .action-choice {
     11   -webkit-box-align: center;
     12   -webkit-box-pack: center;
     13   -webkit-user-select: none;
     14   background: white;
     15   bottom: 0;
     16   color: black;
     17   display: -webkit-box;
     18   font-family: Open Sans, Droid Sans Fallback, sans-serif;
     19   font-size: 84%;
     20   left: 0;
     21   margin: 0;
     22   overflow: hidden;
     23   padding: 10px;
     24   position: absolute;
     25   right: 0;
     26   top: 0;
     27 }
     28 
     29 .action-choice[loading] .content,
     30 .action-choice:not([loading]) .loading {
     31   display: none;
     32 }
     33 
     34 .action-choice h1 {
     35   font-size: 14px;
     36   font-weight: normal;
     37   line-height: 1.5;
     38   margin: 5px 3px;
     39 }
     40 
     41 /* The loading preview */
     42 
     43 .loading {
     44   -webkit-box-align: center;
     45   -webkit-box-orient: vertical;
     46   color: #333;
     47   display: -webkit-box;
     48   font-size: 12px;
     49 }
     50 
     51 .spinner {
     52   background-image: url('../images/common/spinner.svg');
     53   background-size: 100%;
     54   height: 21px;
     55   left: 44px;
     56   margin-left: -10px;
     57   margin-top: -10px;
     58   opacity: 0.5;
     59   position: absolute;
     60   top: 29px;
     61   width: 21px;
     62 }
     63 
     64 .device-type {
     65   height: 64px;
     66   position: relative;
     67   width: 116px;
     68 }
     69 
     70 .device-type[device-type=usb] {
     71   background-image: -webkit-image-set(
     72     url('../images/files/volumes/device_usb_large.png') 1x,
     73     url('../images/files/volumes/2x/device_usb_large.png') 2x);
     74 }
     75 
     76 .device-type[device-type=sd] {
     77   -webkit-transform: rotate(-90deg);
     78   background-image: -webkit-image-set(
     79     url('../images/files/volumes/device_sd_large.png') 1x,
     80     url('../images/files/volumes/2x/device_sd_large.png') 2x);
     81   bottom: 10px; /* Adjust the rotated image to not overlap with element below */
     82 }
     83 
     84 /* The action choice content */
     85 
     86 .content {
     87   -webkit-box-align: start;
     88   -webkit-box-orient: vertical;
     89   display: -webkit-box;
     90   height: 100%;
     91   overflow: hidden;
     92   position: relative;
     93   width: 100%;
     94 }
     95 
     96 .previews {
     97   -webkit-box-orient: horizontal;
     98   -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0,
     99                                                rgba(0, 0, 0, 1) 80px);
    100   display: -webkit-box;
    101   position: relative;
    102   width: 100%;
    103 }
    104 
    105 .img-container {
    106   height: 120px;
    107   margin: 0 2px;
    108   overflow: hidden;
    109   position: relative;
    110   width: 120px;
    111 }
    112 
    113 .img-container > img {
    114   -webkit-user-drag: none;
    115   position: absolute;
    116 }
    117 
    118 .counter {
    119   color: #808080;
    120   margin: 5px 3px;
    121   width: 100%;
    122 }
    123 
    124 .choices {
    125   width: 100%;
    126 }
    127 
    128 /* Padding counterweights negative margins of items, thus eliminating scroll
    129    bar when it's not needed. Max height is set to fit 8 items before showing
    130    scroll bar. */
    131 #actions-list {
    132   display: block;
    133   max-height: 328px;
    134   outline: none;
    135   overflow: auto;
    136   padding: 1px 0;
    137   position: relative;
    138 }
    139 
    140 #actions-list > li {
    141   cursor: default;
    142   list-style-type: none;
    143 }
    144 
    145 #actions-list > li > div {
    146   background-position: 5px center;
    147   background-repeat: no-repeat;
    148   line-height: 39px;
    149   padding-left: 43px;
    150 }
    151 
    152 #actions-list > [selected] {
    153   background-color: #dedede;
    154 }
    155 
    156 #actions-list:focus > [selected] {
    157   background-color: rgb(203, 219, 241);
    158 }
    159 
    160 #actions-list > [selected]:hover {
    161   background-color: rgb(193, 211, 236);
    162   border-color: hsl(214, 91%, 85%);
    163 }
    164 
    165 #actions-list > :hover {
    166   background-color: #f1f1f1;
    167   border-color: hsl(214, 91%, 85%);
    168 }
    169 
    170 #actions-list > li > div.disabled {
    171   opacity: 0.5;
    172 }
    173