ui/webui/resources/css/overlay.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 }