src/chrome/common/extensions/docs/examples/api/fontSettings/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 }
  42
  43 /* If the options page is loading don't do the transition. */
  44 .loading .overlay,
  45 .loading .overlay .page {
  46   -webkit-transition-duration: 0 !important;
  47 }
  48
  49 /* keyframes used to pulse the overlay */
  50 @-webkit-keyframes pulse {
  51  0% {
  52    -webkit-transform: scale(1);
  53  }
  54  40% {
  55    -webkit-transform: scale(1.02);
  56   }
  57  60% {
  58    -webkit-transform: scale(1.02);
  59   }
  60  100% {
  61    -webkit-transform: scale(1);
  62  }
  63 }
  64
  65 .overlay .page.pulse {
  66   -webkit-animation-duration: 180ms;
  67   -webkit-animation-iteration-count: 1;
  68   -webkit-animation-name: pulse;
  69   -webkit-animation-timing-function: ease-in-out;
  70 }
  71
  72 .overlay .page > .close-button {
  73   background-image: url('../images/x.png');
  74   background-position: center;
  75   background-repeat: no-repeat;
  76   height: 14px;
  77   position: absolute;
  78   right: 7px;
  79   top: 7px;
  80   width: 14px;
  81 }
  82
  83 html[dir='rtl'] .overlay .page > .close-button {
  84   left: 10px;
  85   right: auto;
  86 }
  87
  88 .overlay .page > .close-button:hover {
  89   background-image: url('../images/x-hover.png');
  90 }
  91
  92 .overlay .page > .close-button:active {
  93   background-image: url('../images/x-pressed.png');
  94 }
  95
  96 .overlay .page h1 {
  97   -webkit-padding-end: 24px;
  98   -webkit-user-select: none;
  99   color: #333;
 100   /* 120% of the body's font-size of 84% is 16px. This will keep the relative
 101    * size between the body and these titles consistent. */
 102   font-size: 120%;
 103   /* TODO(flackr): Pages like sync-setup and delete user collapse the margin
 104    * above the top of the page. Use padding instead to make sure that the
 105    * headers of these pages have the correct spacing, but this should not be
 106    * necessary. See http://crbug.com/119029. */
 107   margin: 0;
 108   padding: 14px 17px 14px;
 109   text-shadow: white 0 1px 2px;
 110 }
 111
 112 .overlay .page .content-area {
 113   -webkit-box-flex: 1;
 114   overflow: auto;
 115   padding: 6px 17px 6px;
 116   position: relative;
 117 }
 118
 119 .overlay .page .action-area {
 120   -webkit-box-align: center;
 121   -webkit-box-orient: horizontal;
 122   -webkit-box-pack: end;
 123   display: -webkit-box;
 124   padding: 14px 17px;
 125 }
 126
 127 html[dir='rtl'] .overlay .page .action-area {
 128   left: 0;
 129 }
 130
 131 .overlay .page .action-area-right {
 132   display: -webkit-box;
 133 }
 134
 135 .overlay .page .button-strip {
 136   -webkit-box-orient: horizontal;
 137   display: -webkit-box;
 138 }
 139
 140 .overlay .page .button-strip > button {
 141   -webkit-margin-start: 10px;
 142   display: block;
 143 }
 144
 145 /* On OSX 10.7, hidden scrollbars may prevent the user from realizing that the
 146  * overlay contains scrollable content. To resolve this, style the scrollbars on
 147  * OSX so they are always visible. See http://crbug.com/123010. */
 148 <if expr="is_macosx">
 149 .overlay .page .content-area::-webkit-scrollbar {
 150   -webkit-appearance: none;
 151   width: 11px;
 152 }
 153
 154 .overlay .page .content-area::-webkit-scrollbar-thumb {
 155   background-color: rgba(0, 0, 0, 0.2);
 156   border: 2px solid white;
 157   border-radius: 8px;
 158 }
 159
 160 .overlay .page .content-area::-webkit-scrollbar-thumb:hover {
 161   background-color: rgba(0, 0, 0, 0.5);
 162 }
 163 </if>