src/ui/webui/resources/css/dialogs.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 .cr-dialog-container {
   6   -webkit-box-align: center;
   7   -webkit-box-pack: center;
   8   -webkit-transition: opacity 250ms linear;
   9   -webkit-user-select: none;
  10   display: -webkit-box;
  11   height: 100%;
  12   left: 0;
  13   overflow: hidden;
  14   position: absolute;
  15   top: 0;
  16   width: 100%;
  17   z-index: 9999;
  18 }
  19
  20 .cr-dialog-frame {
  21   -webkit-box-orient: vertical;
  22   -webkit-box-shadow: 5px 5px 5px rgba(100, 100, 100, 0.5);
  23   background-color: white;
  24   border: 1px solid rgba(0, 0, 0, 0.3);
  25   border-radius: 3px;
  26   box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2),
  27               0 2px 6px rgba(0, 0, 0, 0.15);
  28   cursor: default;
  29   display: -webkit-box;
  30   padding: 14px 17px;
  31   position: relative;
  32   width: 460px;
  33 }
  34
  35 .cr-dialog-frame:focus {
  36   outline: none;
  37 }
  38
  39 @-webkit-keyframes pulse {
  40  0% {
  41    -webkit-transform: scale(1);
  42  }
  43  40% {
  44    -webkit-transform: scale(1.02);
  45   }
  46  60% {
  47    -webkit-transform: scale(1.02);
  48   }
  49  100% {
  50    -webkit-transform: scale(1);
  51  }
  52 }
  53
  54 .cr-dialog-frame.pulse {
  55   -webkit-animation-duration: 180ms;
  56   -webkit-animation-iteration-count: 1;
  57   -webkit-animation-name: pulse;
  58   -webkit-animation-timing-function: ease-in-out;
  59 }
  60
  61 .shown > .cr-dialog-frame {
  62   -webkit-transform: perspective(500px) scale(1)
  63                      translateY(0) rotateX(0);
  64   opacity: 1;
  65 }
  66
  67 .cr-dialog-frame {
  68   -webkit-transform: perspective(500px) scale(0.99)
  69                      translateY(-20px) rotateX(5deg);
  70   -webkit-transition: all 180ms;
  71   -webkit-transition-duration: 250ms;
  72   opacity: 0;
  73 }
  74
  75 .cr-dialog-shield {
  76   -webkit-transition: opacity 500ms;
  77   background-color: white;
  78   bottom: 0;
  79   display: block;
  80   left: 0;
  81   opacity: 0;
  82   pointer-events: none;
  83   position: absolute;
  84   right: 0;
  85   top: 0;
  86 }
  87
  88 .shown > .cr-dialog-shield {
  89   -webkit-transition: opacity 500ms;
  90   opacity: 0.75;
  91 }
  92
  93 [hidden] {
  94   display: none;
  95 }
  96
  97 .cr-dialog-title {
  98   -webkit-margin-end: 20px;
  99   display: block;
 100   font-size: 120%;
 101   font-weight: bold;
 102   margin-bottom: 10px;
 103   white-space: nowrap;
 104   word-wrap: normal;
 105 }
 106
 107 .cr-dialog-text {
 108   margin: 13px 0;
 109 }
 110
 111 .cr-dialog-text,
 112 .cr-dialog-title {
 113   overflow: hidden;
 114   text-overflow: ellipsis;
 115 }
 116
 117 .cr-dialog-frame input {
 118   -webkit-box-sizing: border-box;
 119   width: 100%;
 120 }
 121
 122 .cr-dialog-buttons {
 123   -webkit-box-orient: horizontal;
 124   -webkit-box-pack: end;
 125   display: -webkit-box;
 126   padding-top: 10px;
 127 }
 128
 129 .cr-dialog-close {
 130   background: url('chrome://theme/IDR_CLOSE_DIALOG') center no-repeat;
 131   display: inline-block;
 132   height: 44px;
 133   opacity: 0.7;
 134   position: absolute;
 135   right: 0;
 136   top: 0;
 137   width: 44px;
 138 }
 139
 140 .cr-dialog-close:hover {
 141   background-image: url('chrome://theme/IDR_CLOSE_DIALOG_H');
 142 }
 143
 144 .cr-dialog-close:active {
 145   background-image: url('chrome://theme/IDR_CLOSE_DIALOG_P');
 146 }