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   /* 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: 0ms !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 > :-webkit-any(button,
 145                                             input[type='button'],
 146                                             input[type='submit']) {
 147   -webkit-margin-start: 10px;
 148   display: block;
 149 }
 150
 151 .overlay .page .button-strip > .default-button:not(:focus) {
 152   border-color: rgba(0, 0, 0, 0.5);
 153 }
 154
 155 .overlay .page .spacer-div {
 156   -webkit-box-flex: 1;
 157 }
 158
 159 /* On OSX 10.7, hidden scrollbars may prevent the user from realizing that the
 160  * overlay contains scrollable content. To resolve this, style the scrollbars on
 161  * OSX so they are always visible. See http://crbug.com/123010. */
 162 <if expr="is_macosx or is_ios">
 163 .overlay .page .content-area::-webkit-scrollbar {
 164   -webkit-appearance: none;
 165   width: 11px;
 166 }
 167
 168 .overlay .page .content-area::-webkit-scrollbar-thumb {
 169   background-color: rgba(0, 0, 0, 0.2);
 170   border: 2px solid white;
 171   border-radius: 8px;
 172 }
 173
 174 .overlay .page .content-area::-webkit-scrollbar-thumb:hover {
 175   background-color: rgba(0, 0, 0, 0.5);
 176 }
 177 </if>
 178
 179 .gray-bottom-bar {
 180   background-color: #f5f5f5;
 181   border-bottom-left-radius: inherit;
 182   border-bottom-right-radius: inherit;
 183   border-color: #e7e7e7;
 184   border-top-style: solid;
 185   border-width: 1px;
 186   color: #888;
 187   display: -webkit-box;
 188   padding: 14px 17px;
 189 }
 190
 191 /* Prevent the page underneath the overlay from scrolling. */
 192 .frozen {
 193   position: fixed;
 194 }
 195
 196 #overlay-container-1 {
 197   z-index: 11;
 198 }
 199 #overlay-container-2 {
 200   z-index: 12;
 201 }
 202
 203 .transparent {
 204   opacity: 0;
 205 }