chrome-extensions-samples/api-samples/fontSettings/fontSettings Advanced/css/overlay.css

/* Copyright (c) 2012 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* The shield that overlays the background. */
.overlay {
  -webkit-box-align: center;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  background-color: rgba(255, 255, 255, 0.75);
  bottom: 0;
  display: -webkit-box;
  left: 0;
  overflow: auto;
  padding: 20px;
  position: fixed;
  right: 0;
  top: 0;
  transition: 200ms opacity;
}

/* Used to slide in the overlay. */
.overlay.transparent .page {
  /* TODO(flackr): Add perspective(500px) rotateX(5deg) when accelerated
   * compositing is enabled on chrome:// pages. See http://crbug.com/116800. */
  transform: scale(0.99) translateY(-20px);
}

/* The foreground dialog. */
.overlay .page {
  -webkit-border-radius: 3px;
  -webkit-box-orient: vertical;
  background: white;
  box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
  color: #333;
  display: -webkit-box;
  min-width: 400px;
  padding: 0;
  position: relative;
  transition: 200ms transform;
}

/* If the options page is loading don't do the transition. */
.loading .overlay,
.loading .overlay .page {
  transition-duration: 0ms !important;
}

/* keyframes used to pulse the overlay */
@keyframes pulse {
 0% {
   transform: scale(1);
 }
 40% {
   transform: scale(1.02);
  }
 60% {
   transform: scale(1.02);
  }
 100% {
   transform: scale(1);
 }
}

.overlay .page.pulse {
  animation-duration: 180ms;
  animation-iteration-count: 1;
  animation-name: pulse;
  animation-timing-function: ease-in-out;
}

.overlay .page > .close-button {
  background-image: url('../images/x.png');
  background-position: center;
  background-repeat: no-repeat;
  height: 14px;
  position: absolute;
  right: 7px;
  top: 7px;
  width: 14px;
}

html[dir='rtl'] .overlay .page > .close-button {
  left: 10px;
  right: auto;
}

.overlay .page > .close-button:hover {
  background-image: url('../images/x-hover.png');
}

.overlay .page > .close-button:active {
  background-image: url('../images/x-pressed.png');
}

.overlay .page h1 {
  -webkit-user-select: none;
  color: #333;
  /* 120% of the body's font-size of 84% is 16px. This will keep the relative
   * size between the body and these titles consistent. */
  font-size: 120%;
  /* TODO(flackr): Pages like sync-setup and delete user collapse the margin
   * above the top of the page. Use padding instead to make sure that the
   * headers of these pages have the correct spacing, but this should not be
   * necessary. See http://crbug.com/119029. */
  margin: 0;
  padding: 14px 17px 14px;
  text-shadow: white 0 1px 2px;
}

.overlay .page .content-area {
  -webkit-box-flex: 1;
  overflow: auto;
  padding: 6px 17px 6px;
  position: relative;
}

.overlay .page .action-area {
  -webkit-box-align: center;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: end;
  display: -webkit-box;
  padding: 14px 17px;
}

html[dir='rtl'] .overlay .page .action-area {
  left: 0;
}

.overlay .page .action-area-right {
  display: -webkit-box;
}

.overlay .page .button-strip {
  -webkit-box-orient: horizontal;
  display: -webkit-box;
}

.overlay .page .button-strip > button {
  display: block;
  margin-inline-start: 10px;
}

/* On OSX 10.7, hidden scrollbars may prevent the user from realizing that the
 * overlay contains scrollable content. To resolve this, style the scrollbars on
 * OSX so they are always visible. See http://crbug.com/123010. */
<if expr="is_macosx">
.overlay .page .content-area::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 11px;
}

.overlay .page .content-area::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border: 2px solid white;
  border-radius: 8px;
}

.overlay .page .content-area::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
</if>