src/chrome/browser/resources/file_manager/foreground/css/drive_welcome.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 /* Google Drive welcome banners.*/
   6 .drive-welcome-wrapper {
   7   /* This image looks good in high DPI as is. */
   8   background-image: url(chrome://resources/images/clouds.png);
   9   background-repeat: repeat-x;
  10   color: #333;
  11 }
  12
  13 .drive-welcome-icon {
  14   background-image: -webkit-image-set(
  15     url('../images/files/ui/drive_logo.png') 1x,
  16     url('../images/files/ui/2x/drive_logo.png') 2x);
  17   background-repeat: no-repeat;
  18 }
  19
  20 .drive-welcome-links {
  21   -webkit-box-orient: horizontal;
  22   display: -webkit-box;
  23 }
  24
  25 .drive-welcome-button {
  26   -webkit-user-select: none;
  27   background-image: linear-gradient(to bottom, #f5f5f5, #f1f1f1);
  28   border: 1px solid rgba(0,0,0,0.1);
  29   border-radius: 2px;
  30   color: #444;
  31   cursor: default;
  32   display: inline-block;
  33   font-size: 13px;
  34   font-weight: bold;
  35   height: 27px;
  36   line-height: 27px;
  37   padding: 0 8px;
  38   text-align: center;
  39   transition: all 218ms;
  40 }
  41
  42 .drive-welcome-button:hover {
  43   background-image: linear-gradient(to bottom, #f8f8f8, #f1f1f1);
  44   border-color: #C6C6C6;
  45   box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  46   color: #222;
  47   transition: all 0;
  48 }
  49
  50 .drive-welcome-button:active {
  51   background-image: linear-gradient(to bottom, #f6f6f6, #f1f1f1);
  52   box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  53 }
  54
  55
  56 .drive-welcome-button.drive-welcome-start {
  57   background-image:
  58     linear-gradient(to bottom, rgb(77, 144, 254), rgb(71, 135, 237));
  59   border-color: rgb(48, 121, 237);
  60   color: white;
  61   text-decoration: none;
  62 }
  63
  64 .drive-welcome-button.drive-welcome-start:hover {
  65   background-image:
  66     linear-gradient(to bottom, rgb(77, 144, 254), rgb(53, 122, 232));
  67   border-color: rgb(47, 91, 183);
  68   box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  69 }
  70
  71 /* Header welcome banner. */
  72 .drive-welcome.header {
  73   -webkit-box-flex: 0;
  74   height: 100px;
  75   overflow: hidden;
  76   position: relative;
  77   transition: height 180ms ease, visibility 0 linear 180ms;
  78 }
  79
  80 .dialog-container:not([drive-welcome='header']) .drive-welcome.header {
  81   height: 0;
  82   visibility: hidden;
  83 }
  84
  85 .drive-welcome.header .drive-welcome-wrapper {
  86   -webkit-box-orient: horizontal;
  87   background-size: 308px 100px;
  88   bottom: 0;
  89   display: -webkit-box;
  90   left: 0;
  91   position: absolute;
  92   right: 0;
  93   top: 0;
  94 }
  95
  96 .drive-welcome.header .drive-welcome-icon {
  97   background-position: center 18px;
  98   background-size: 51px 44px;
  99   width: 120px;
 100 }
 101
 102 .drive-welcome.header .drive-welcome-message {
 103   -webkit-box-flex: 1;
 104   -webkit-box-orient: vertical;
 105   display: -webkit-box;
 106 }
 107
 108 .drive-welcome.header .drive-welcome-title {
 109   font-size: 140%;
 110   margin-bottom: 4px;
 111   margin-top: 14px;
 112 }
 113
 114 .drive-welcome.header .drive-welcome-text {
 115   margin-bottom: 6px;
 116 }
 117
 118 .drive-welcome.header .drive-welcome-dismiss {
 119   display: none;
 120 }
 121
 122 /* Full page welcome banner. */
 123 .drive-welcome.page {
 124   bottom: 0;
 125   left: 0;
 126   position: absolute;
 127   right: 0;
 128   top: 0;
 129 }
 130
 131 .dialog-container:not([drive-welcome='page']) .drive-welcome.page {
 132   display: none;
 133 }
 134
 135 .drive-welcome.page .cr-dialog-close {
 136   display: none;
 137 }
 138
 139 .drive-welcome.page .drive-welcome-wrapper {
 140   -webkit-box-align: center;
 141   -webkit-box-orient: vertical;
 142   background-size: 520px 173px;
 143   bottom: 0;
 144   display: -webkit-box;
 145   font-size: 120%;
 146   left: 0;
 147   overflow: hidden;
 148   position: absolute;
 149   right: 0;
 150   top: 0;
 151 }
 152
 153 .drive-welcome.page .drive-welcome-icon {
 154   background-position: center center;
 155   height: 240px;
 156   left: 0;
 157   right: 0;
 158   top: 0;
 159   width: 100%;
 160 }
 161
 162 .drive-welcome.page .drive-welcome-message {
 163   margin-left: 10px;
 164   margin-right: 10px;
 165   max-width: 525px;
 166 }
 167
 168 .drive-welcome.page .drive-welcome-title {
 169   font-size: 133%;
 170   margin-bottom: 30px;
 171   text-align: center;
 172 }
 173
 174 .drive-welcome.page .drive-welcome-text {
 175   margin-bottom: 24px;
 176 }
 177
 178 .drive-welcome.page .drive-welcome-dismiss {
 179   margin-left: 20px;
 180 }
 181
 182 body:not([type='full-page']) .drive-welcome.page .drive-welcome-wrapper {
 183   background-position: 0 0;
 184 }
 185
 186 body:not([type='full-page']) .drive-welcome.page .drive-welcome-icon {
 187   height: 200px;
 188 }