Home | History | Annotate | Download | only in 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 }
    189