chrome/browser/resources/ntp4/apps_page.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 .app {
   6   outline: none;
   7   position: absolute;
   8   text-align: center;
   9 }
  10
  11 .app-contents {
  12   -webkit-transition: -webkit-transform 100ms;
  13 }
  14
  15 .app-contents:active:not(.suppress-active),
  16 .app:not(.click-focus):focus .app-contents:not(.suppress-active),
  17 .drag-representation:not(.placing) .app-contents {
  18   -webkit-transform: scale(1.1);
  19 }
  20
  21 /* Don't animate the initial scaling.  */
  22 .app-contents:active:not(.suppress-active),
  23 /* Active gets applied right before .suppress-active, so to avoid flicker
  24  * we need to make the scale go back to normal without an animation. */
  25 .app-contents.suppress-active {
  26   -webkit-transition-duration: 0ms;
  27 }
  28
  29 .app-contents > span {
  30   display: block;
  31   overflow: hidden;
  32   text-overflow: ellipsis;
  33   white-space: nowrap;
  34 }
  35
  36 .app-img-container {
  37   /* -webkit-mask-image set by JavaScript to the image source. */
  38   -webkit-mask-size: 100% 100%;
  39   margin-left: auto;
  40   margin-right: auto;
  41 }
  42
  43 .app-img-container > * {
  44   height: 100%;
  45   width: 100%;
  46 }
  47
  48 .app-icon-div {
  49   -webkit-box-align: center;
  50   -webkit-box-pack: center;
  51   background-color: white;
  52   border: 1px solid #d5d5d5;
  53   border-radius: 5px;
  54   display: -webkit-box;
  55   margin-left: auto;
  56   margin-right: auto;
  57   position: relative;
  58   vertical-align: middle;
  59   z-index: 0;
  60 }
  61
  62 .app-icon-div .app-img-container {
  63   bottom: 10px;
  64   left: 10px;
  65   position: absolute;
  66 }
  67
  68 .app-icon-div .color-stripe {
  69   border-bottom-left-radius: 5px 5px;
  70   border-bottom-right-radius: 5px 5px;
  71   bottom: 0;
  72   height: 3px;
  73   opacity: 1.0;
  74   position: absolute;
  75   width: 100%;
  76   z-index: 100;
  77 }
  78
  79 .app-context-menu > button:first-child {
  80   font-weight: bold;
  81 }
  82
  83 .app-context-menu {
  84   z-index: 1000;
  85 }
  86
  87 .app-context-menu > [checked]::before {
  88   height: 5px;
  89 }
  90
  91 .launch-click-target {
  92   cursor: pointer;
  93 }
  94
  95 .app-img-container > img:first-child {
  96   display: block;
  97 }
  98
  99 .app .invisible {
 100   visibility: hidden;
 101 }
 102
 103 #app-launcher-promo {
 104   background-color: white;
 105   border: 1px solid lightgray;
 106   border-bottom-width: 3px;
 107   border-radius: 2px;
 108   border-top-width: 2px;
 109   bottom: 90px;
 110   height: 120px;
 111   left: 50%;
 112   margin-left: -300px;
 113   position: fixed;
 114   width: 600px;
 115 }
 116
 117 #app-launcher-promo > .close-button {
 118   position: absolute;
 119   right: 10px;
 120   top: 10px;
 121   width: 14px;
 122 }
 123
 124 .apps-promo-text {
 125   color: #222;
 126   font-size: 16px;
 127   left: 30px;
 128   line-height: 24px;
 129   position: absolute;
 130   top: 30px;
 131 }
 132
 133 .apps-promo-learn-more {
 134   background-color: rgb(77, 144, 254);
 135   border: 1px solid rgb(47, 91, 183);
 136   border-radius: 2px;
 137   color: white;
 138   cursor: default;
 139   font-size: 11px;
 140   font-weight: bold;
 141   height: 27px;
 142   left: 30px;
 143   line-height: 27px;
 144   padding: 0 8px;
 145   position: absolute;
 146   text-align: center;
 147   text-decoration: none;
 148   top: 70px;
 149   width: 90px;
 150 }
 151
 152 .apps-promo-learn-more:hover {
 153   background-image: -webkit-linear-gradient(
 154       top, rgb(77, 144, 254), rgb(53, 122, 232));
 155   border: 1px solid rgb(47, 91, 183);
 156 }
 157
 158 #app-launcher-promo > img {
 159   bottom: 0;
 160   position: absolute;
 161   right: 30px;
 162 }