src/chrome/test/data/extensions/api_test/notifications/galore/app/style.css

   1 /* Copyright (c) 2013 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 /* Globals ********************************************************************/
   6
   7 body {
   8   -webkit-app-region: drag;
   9   cursor: default;
  10   margin: 0;
  11   padding: 15px 4px 4px;
  12 }
  13
  14 .section {
  15   margin: 12px 0 0;
  16   position: relative;
  17   padding: 23px 0 0;
  18 }
  19
  20 h1 {
  21   /* White with a vertically centered one pixel horizontal black line. */
  22   background: -webkit-linear-gradient(white, white 59%,
  23                                       black 60%, black 64%,
  24                                       white 65%, white);
  25   font: normal 16px 'Arimo', 'Gill Sans', 'Open Sans',
  26                     'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  27   left: 0;
  28   margin: 0;
  29   position: absolute;
  30   right: 0;
  31   text-align: center;
  32   top: 0;
  33 }
  34
  35 h1 span {
  36   background: white;
  37   padding: 0 4px;
  38 }
  39
  40 button {
  41   background: none;
  42   border: 1px solid white;
  43   margin: 0;
  44   padding: 3px;
  45 }
  46
  47 ::-webkit-scrollbar {
  48   display: none !important;
  49 }
  50
  51 /* Template section (invisible) ***********************************************/
  52
  53 #templates {
  54   position: absolute;
  55   visibility: hidden;
  56 }
  57
  58 /* Priority section ***********************************************************/
  59
  60 #priority {
  61   font-size: 0;  /* To collapse the spaces between buttons. */
  62 }
  63
  64 #priority .priority:first-of-type {
  65   margin: 0 0 0 96px;  /* Leftmost button is 96 pixels in. */
  66 }
  67
  68 button.priority {
  69   font: normal 14px 'Arimo', 'Gill Sans', 'Open Sans',
  70                     'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  71   height: 24px;
  72   width: 48px;
  73 }
  74
  75 /* Notification sections ******************************************************/
  76
  77 button.notification {
  78   height: 48px;
  79   width: 48px;
  80 }
  81
  82 img {
  83   display: block;
  84   height: 40px;
  85   margin: 0;
  86   padding: 0;
  87   width: 40px;
  88 }
  89
  90 /* Events section *************************************************************/
  91
  92 #events {
  93   position: relative;
  94   height: 183px;
  95 }
  96
  97 #events-scroll {
  98   bottom: 4px;
  99   font-weight: lighter;
 100   left: 4px;
 101   padding: 0;
 102   max-height: 190px;
 103   overflow: scroll;
 104   position: absolute;
 105   right: 4px;
 106   -webkit-user-select: text;
 107 }
 108
 109 #events-fade {
 110   background: -webkit-linear-gradient(rgba(255, 255, 255, 1),
 111                                       rgba(255, 255, 255, 1) 50%,
 112                                       rgba(255, 255, 255, 0));
 113   height: 46px;
 114   left: 0;
 115   pointer-events: none;
 116   position: absolute;
 117   right: 0;
 118   top: 0;
 119 }
 120
 121 .event {
 122   color: gray;
 123   font: 11px 'Arimo', 'Gill Sans', 'Open Sans',
 124              'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
 125 }
 126
 127 .error {
 128   color: red;
 129   font: bold 16px 'Arimo', 'Gill Sans', 'Open Sans',
 130              'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
 131   text-align: center;
 132 }
 133
 134 /* Menu ***********************************************************************/
 135
 136 body[data-active="menu"] #popup,
 137 body[data-popup="true"] #popup {
 138   bottom: 0;
 139   left: 0;
 140   position: absolute;
 141   right: 0;
 142   top: 0;
 143 }
 144
 145 body:not([data-active="menu"]):not([data-popup="true"]) #popup {
 146   left: -9999px !important;
 147   position: absolute !important;
 148   top: -9999px !important;
 149 }
 150
 151 #shadow {
 152   background: gray;
 153   bottom: 0;
 154   left: 0;
 155   opacity: 0.33;
 156   position: absolute;
 157   right: 0;
 158   top: 0;
 159 }
 160
 161 #menu {
 162   left: 12px;
 163   padding: 0;
 164   position: absolute;
 165   top: 26px;
 166   width: auto;
 167 }
 168
 169 #menu-items {
 170   background: white;
 171   box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.7);
 172   margin: 7px 0 0;
 173   padding: 4px;
 174 }
 175
 176 #menu-items button {
 177   display: block;
 178   text-align: left;
 179   width: 100%;
 180 }
 181
 182 #show-settings {
 183   /* TODO(dharcourt): Add a settings panel and make this open it. */
 184   display: none !important;
 185 }
 186
 187 #arrow {
 188   border-bottom: 7px solid white;
 189   border-left: 7px solid transparent;
 190   border-right: 7px solid transparent;
 191   height: 0;
 192   position: absolute;
 193   top: 0;
 194   width: 0;
 195 }
 196
 197 /* Menu and close buttons *****************************************************/
 198
 199 #show-menu,
 200 #close {
 201   border: 1px solid transparent;
 202   height: 16px;
 203   opacity: 0.15;
 204   position: absolute;
 205   top: 11px;
 206   width: 16px;
 207 }
 208
 209 #show-menu {
 210   background: url("/images/menu-14x14.png");
 211   left: 11px;
 212 }
 213
 214 #close {
 215   background: url("/images/close-14x14.png");
 216   right: 11px;
 217 }
 218
 219 #show-menu:hover,
 220 #close:hover {
 221   opacity: 0.6;
 222 }
 223
 224 body[data-active="close"] #close,
 225 body[data-active="menu"] #show-menu {
 226   opacity: 1;
 227 }
 228
 229 /* Highlighting ***************************************************************/
 230
 231 body[data-active=""] button[data-hover="true"],
 232 body[data-active="close"] button.close[data-hover="true"],
 233 body[data-active="menu"] button.menu[data-hover="true"],
 234 body[data-active="notification"] button.notification[data-hover="true"],
 235 body[data-active="priority"] button.priority[data-hover="true"] {
 236   border: 1px solid black !important;
 237 }
 238
 239 body[data-active="notification"] button.notification[data-hover="true"],
 240 body[data-active="priority"] button.priority[data-hover="true"] {
 241   opacity: 0.5;
 242 }
 243
 244 body[data-priority="-2"] button.priority[data-priority="-2"],
 245 body[data-priority="-1"] button.priority[data-priority="-1"],
 246 body[data-priority="0"] button.priority[data-priority="0"],
 247 body[data-priority="1"] button.priority[data-priority="1"],
 248 body[data-priority="2"] button.priority[data-priority="2"] {
 249   background: rgb(255, 255, 85);
 250   -webkit-box-shadow: inset 3px 3px 0 white, inset -3px -3px 0 white;
 251 }
 252
 253 /* Cursor and dragging control ************************************************/
 254
 255 body:not([data-active=""]),
 256 body:not([data-active="menu"]):not([data-popup="true"]) button,
 257 button.menu,
 258 button.close {
 259   -webkit-app-region: no-drag;
 260   cursor: pointer;
 261 }
 262
 263 body:not([data-active="menu"]):not([data-popup="true") #events {
 264   -webkit-app-region: no-drag;
 265   cursor: text;
 266 }
 267
 268 /* That's all folks! **********************************************************/