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