Home | History | Annotate | Download | only in chromeos 
      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 #user-images-area {
      6   display: -webkit-box;
      7 }
      8 
      9 #user-image-grid {
     10   -webkit-user-drag: none;
     11   -webkit-user-select: none;
     12   height: 264px;
     13   margin: 10px;
     14   outline: none;
     15   /* Necessary for correct metrics calculation by grid.js. */
     16   overflow: hidden;
     17   padding: 0;
     18   width: 530px;
     19 }
     20 
     21 #user-image-grid * {
     22   margin: 0;
     23   padding: 0;
     24 }
     25 
     26 #user-image-grid img {
     27   background-color: white;
     28   height: 64px;
     29   vertical-align: middle;
     30   width: 64px;
     31 }
     32 
     33 #user-image-grid > li {
     34   border: 1px solid rgba(0, 0, 0, 0.15);
     35   border-radius: 4px;
     36   display: inline-block;
     37   margin: 8px;
     38   padding: 3px;
     39 }
     40 
     41 #user-image-grid [selected] {
     42   border: 2px solid rgb(0, 102, 204);
     43   padding: 2px;
     44 }
     45 
     46 /**
     47  * #user-image-preview can have the following classes:
     48  * .default-image: one of the default images is selected (including the grey
     49  *                 silhouette);
     50  * .profile-image: profile image is selected;
     51  * .online: camera is streaming video;
     52  * .camera: camera (live or photo) is selected;
     53  * .live: camera is in live mode (no photo taken yet/last photo removed).
     54  */
     55 
     56 #user-image-preview {
     57   margin: 18px 10px 0 0;
     58   max-width: 220px;
     59   position: relative;
     60 }
     61 
     62 #user-image-preview .perspective-box {
     63   -webkit-perspective: 600px;
     64   border: solid 1px #cacaca;
     65   border-radius: 4px;
     66   padding: 3px;
     67   width: 220px;
     68 }
     69 
     70 #user-image-preview-img {
     71   background: white;
     72   border: solid 1px #cacaca;
     73   border-radius: 4px;
     74   max-height: 220px;
     75   max-width: 220px;
     76   padding: 3px;
     77 }
     78 
     79 .camera.live #user-image-preview-img {
     80   display: none;
     81 }
     82 
     83 .animation #user-image-preview-img {
     84   -webkit-transition: -webkit-transform 200ms linear;
     85 }
     86 
     87 .camera.flip-x #user-image-preview-img {
     88   -webkit-transform: rotateY(180deg);
     89 }
     90 
     91 .user-image-stream-area {
     92   display: none;
     93   position: relative;
     94 }
     95 
     96 .camera.live .user-image-stream-area {
     97   display: block;
     98 }
     99 
    100 #user-image-stream-crop {
    101   /* TODO(ivankr): temporary workaround for crbug.com/142347. */
    102   -webkit-transform: rotateY(360deg);
    103   -webkit-transition: -webkit-transform 200ms linear;
    104   height: 220px;
    105   overflow: hidden;
    106   position: relative;
    107   width: 220px;
    108 }
    109 
    110 .flip-x #user-image-stream-crop {
    111   -webkit-transform: rotateY(180deg);
    112 }
    113 
    114 /* TODO(ivankr): specify dimensions from real capture size. */
    115 .user-image-stream {
    116   border: solid 1px #cacaca;
    117   height: 220px;
    118   /* Center image for 4:3 aspect ratio. */
    119   left: -16.6%;
    120   position: absolute;
    121   visibility: hidden;
    122 }
    123 
    124 .online .user-image-stream {
    125   visibility: visible;
    126 }
    127 
    128 .user-image-stream-area .spinner {
    129   display: none;
    130   height: 44px;
    131   left: 50%;
    132   margin: -22px 0 0 -22px;
    133   position: absolute;
    134   top: 50%;
    135   width: 44px;
    136 }
    137 
    138 .camera.live:not(.online) .user-image-stream-area .spinner {
    139   display: block;
    140 }
    141 
    142 #flip-photo {
    143   -webkit-transition: opacity 75ms linear;
    144   background: url('chrome://theme/IDR_MIRROR_FLIP') no-repeat;
    145   border: none;
    146   bottom: 44px;  /* 8px + image bottom. */
    147   display: block;
    148   height: 32px;
    149   opacity: 0;
    150   position: absolute;
    151   right: 8px;
    152   width: 32px;
    153 }
    154 
    155 /* TODO(merkulova): remove when webkit crbug.com/126479 is fixed. */
    156 .flip-trick {
    157   -webkit-transform: translateZ(1px);
    158 }
    159 
    160 html[dir=rtl] #flip-photo {
    161   left: 8px;
    162   right: auto;
    163 }
    164 
    165 /* "Flip photo" button is hidden during flip animation. */
    166 .camera.online:not(.animation) #flip-photo,
    167 .camera:not(.live):not(.animation) #flip-photo {
    168   opacity: 0.75;
    169 }
    170 
    171 #discard-photo,
    172 #take-photo {
    173   display: none;
    174   height: 25px;
    175   margin: 4px;
    176   padding: 0;
    177   width: 220px;
    178 }
    179 
    180 .camera:not(.live) #discard-photo {
    181   background: url('chrome://theme/IDR_USER_IMAGE_RECYCLE')
    182       no-repeat center center;
    183   display: block;
    184 }
    185 
    186 .camera.live.online #take-photo {
    187   background: url('chrome://theme/IDR_USER_IMAGE_CAPTURE')
    188       no-repeat center -1px;
    189   display: block;
    190 }
    191 
    192 #user-image-attribution {
    193   -webkit-padding-start: 34px;
    194   line-height: 26px;
    195 }
    196 
    197 #user-image-author-website {
    198   -webkit-padding-start: 5px;
    199 }
    200