chrome/browser/resources/options/chromeos/change_picture_options.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 #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 }