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 /* The shield that overlays the background. */
      6 .overlay {
      7   -webkit-box-align: center;
      8   -webkit-box-orient: vertical;
      9   -webkit-box-pack: center;
     10   /* TODO(dbeam): remove perspective when http://crbug.com/374970 is fixed. */
     11   -webkit-perspective: 1px;
     12   -webkit-transition: 200ms opacity;
     13   background-color: rgba(255, 255, 255, 0.75);
     14   bottom: 0;
     15   display: -webkit-box;
     16   left: 0;
     17   overflow: auto;
     18   padding: 20px;
     19   position: fixed;
     20   right: 0;
     21   top: 0;
     22 }
     23 
     24 /* Used to slide in the overlay. */
     25 .overlay.transparent .page {
     26   /* TODO(flackr): Add perspective(500px) rotateX(5deg) when accelerated
     27    * compositing is enabled on chrome:// pages. See http://crbug.com/116800. */
     28   -webkit-transform: scale(0.99) translateY(-20px);
     29 }
     30 
     31 /* The foreground dialog. */
     32 .overlay .page {
     33   -webkit-border-radius: 3px;
     34   -webkit-box-orient: vertical;
     35   -webkit-transition: 200ms -webkit-transform;
     36   background: white;
     37   box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
     38   color: #333;
     39   display: -webkit-box;
     40   min-width: 400px;
     41   padding: 0;
     42   position: relative;
     43   z-index: 0;
     44 }
     45 
     46 /* If the options page is loading don't do the transition. */
     47 .loading .overlay,
     48 .loading .overlay .page {
     49   -webkit-transition-duration: 0 !important;
     50 }
     51 
     52 /* keyframes used to pulse the overlay */
     53 @-webkit-keyframes pulse {
     54  0% {
     55    -webkit-transform: scale(1);
     56  }
     57  40% {
     58    -webkit-transform: scale(1.02);
     59   }
     60  60% {
     61    -webkit-transform: scale(1.02);
     62   }
     63  100% {
     64    -webkit-transform: scale(1);
     65  }
     66 }
     67 
     68 .overlay .page.pulse {
     69   -webkit-animation-duration: 180ms;
     70   -webkit-animation-iteration-count: 1;
     71   -webkit-animation-name: pulse;
     72   -webkit-animation-timing-function: ease-in-out;
     73 }
     74 
     75 .overlay .page > .close-button {
     76   background-image: url('chrome://theme/IDR_CLOSE_DIALOG');
     77   background-position: center;
     78   background-repeat: no-repeat;
     79   height: 14px;
     80   position: absolute;
     81   right: 7px;
     82   top: 7px;
     83   width: 14px;
     84   z-index: 1;
     85 }
     86 
     87 html[dir='rtl'] .overlay .page > .close-button {
     88   left: 10px;
     89   right: auto;
     90 }
     91 
     92 .overlay .page > .close-button:hover {
     93   background-image: url('chrome://theme/IDR_CLOSE_DIALOG_H');
     94 }
     95 
     96 .overlay .page > .close-button:active {
     97   background-image: url('chrome://theme/IDR_CLOSE_DIALOG_P');
     98 }
     99 
    100 .overlay .page h1 {
    101   -webkit-padding-end: 24px;
    102   -webkit-user-select: none;
    103   color: #333;
    104   /* 120% of the body's font-size of 84% is 16px. This will keep the relative
    105    * size between the body and these titles consistent. */
    106   font-size: 120%;
    107   /* TODO(flackr): Pages like sync-setup and delete user collapse the margin
    108    * above the top of the page. Use padding instead to make sure that the
    109    * headers of these pages have the correct spacing, but this should not be
    110    * necessary. See http://crbug.com/119029. */
    111   margin: 0;
    112   padding: 14px 17px 14px;
    113   text-shadow: white 0 1px 2px;
    114 }
    115 
    116 .overlay .page .content-area {
    117   -webkit-box-flex: 1;
    118   overflow: auto;
    119   padding: 6px 17px 6px;
    120   position: relative;
    121 }
    122 
    123 .overlay .page .action-area {
    124   -webkit-box-align: center;
    125   -webkit-box-orient: horizontal;
    126   -webkit-box-pack: end;
    127   display: -webkit-box;
    128   padding: 14px 17px;
    129 }
    130 
    131 html[dir='rtl'] .overlay .page .action-area {
    132   left: 0;
    133 }
    134 
    135 .overlay .page .action-area-right {
    136   display: -webkit-box;
    137 }
    138 
    139 .overlay .page .button-strip {
    140   -webkit-box-orient: horizontal;
    141   display: -webkit-box;
    142 }
    143 
    144 .overlay .page .button-strip > button {
    145   -webkit-margin-start: 10px;
    146   display: block;
    147 }
    148 
    149 .overlay .page .button-strip > .default-button:not(:focus) {
    150   border-color: rgba(0, 0, 0, 0.5);
    151 }
    152 
    153 /* On OSX 10.7, hidden scrollbars may prevent the user from realizing that the
    154  * overlay contains scrollable content. To resolve this, style the scrollbars on
    155  * OSX so they are always visible. See http://crbug.com/123010. */
    156 <if expr="is_macosx or is_ios">
    157 .overlay .page .content-area::-webkit-scrollbar {
    158   -webkit-appearance: none;
    159   width: 11px;
    160 }
    161 
    162 .overlay .page .content-area::-webkit-scrollbar-thumb {
    163   background-color: rgba(0, 0, 0, 0.2);
    164   border: 2px solid white;
    165   border-radius: 8px;
    166 }
    167 
    168 .overlay .page .content-area::-webkit-scrollbar-thumb:hover {
    169   background-color: rgba(0, 0, 0, 0.5);
    170 }
    171 </if>
    172 
    173 .gray-bottom-bar {
    174   background-color: #f5f5f5;
    175   border-color: #e7e7e7;
    176   border-top-style: solid;
    177   border-width: 1px;
    178   color: #888;
    179   display: -webkit-box;
    180   padding: 14px 17px;
    181 }
    182