src/chrome/browser/resources/user_manager/user_manager_tutorial.css

   1 /* Copyright 2014 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
   6 .tutorial-slide {
   7   -webkit-transition: opacity 200ms ease-in-out;
   8   background-color: white;
   9   border-radius: 2px;
  10   bottom: 0;
  11   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  12   height: 408px;
  13   left: 0;
  14   margin: auto;
  15   position: absolute;
  16   right: 0;
  17   top: 0;
  18   width: 320px;
  19   z-index: 100;
  20 }
  21
  22 .tutorial-slide.single-pod {
  23   margin-left: 30px;
  24 }
  25
  26 html[dir=rtl] .tutorial-slide.single-pod {
  27   margin-right: 30px;
  28 }
  29
  30 .hidden {
  31   opacity: 0;
  32   pointer-events: none;
  33 }
  34
  35 #slide-guests {
  36   bottom: 20px;
  37   left: 20px;
  38   margin: 0;
  39   top: auto;
  40 }
  41
  42 html[dir=rtl] #slide-guests {
  43   right: 20px;
  44 }
  45
  46 #slide-friends,
  47 #slide-not-you {
  48   bottom: 20px;
  49   left: 60px;
  50   margin: 0;
  51   top: auto;
  52 }
  53
  54 html[dir=rtl] #slide-friends,
  55 html[dir=rtl] #slide-not-you {
  56   right: 60px;
  57 }
  58
  59 #slide-not-you {
  60   height: 100px;
  61   left: 100px;
  62   margin: 0;
  63   width: 240px;
  64 }
  65
  66 html[dir=rtl] #slide-not-you {
  67   right: 100px;
  68 }
  69
  70 .slide-contents {
  71   padding: 0 20px;
  72   text-align: center;
  73 }
  74
  75 .slide-title {
  76   color: black;
  77   font-size: 20px;
  78   line-height: 20px;
  79   margin: 30px 0;
  80 }
  81
  82 .slide-text {
  83   color: #666;
  84   font-size: 15px;
  85   line-height: 20px;
  86 }
  87
  88 .slide-buttons {
  89   bottom: 20px;
  90   position: absolute;
  91   text-align: center;
  92   width: 100%;
  93 }
  94
  95 .slide-buttons .link-button {
  96   width: 100%;
  97 }
  98
  99 .slide-buttons button {
 100   bottom: 0;
 101   height: 35px;
 102   padding: 0 15px;
 103   width: 138px;
 104 }
 105
 106 .slide-buttons button.left {
 107   left: 16px;
 108   position: absolute;
 109 }
 110
 111 html[dir=rtl] .slide-buttons button.left {
 112   right: 16px;
 113 }
 114
 115 .slide-buttons button.right {
 116   bottom: 0;
 117   position: absolute;
 118 }
 119
 120 .arrow-down {
 121   border-left: 15px solid transparent;
 122   border-right: 15px solid transparent;
 123   border-top: 15px solid white;
 124   bottom: -15px;
 125   height: 0;
 126   left: 120px;
 127   position: absolute;
 128   width: 0;
 129 }
 130
 131 #slide-not-you .arrow-down {
 132   left: 100px;
 133 }
 134
 135 html[dir=rtl] #slide-not-you .arrow-down {
 136   right: 100px;
 137 }
 138
 139 #slide-guests .arrow-down {
 140   left: 60px;
 141 }
 142
 143 html[dir=rtl] #slide-guests .arrow-down {
 144   right: 60px;
 145 }
 146
 147 .slide-image {
 148   height: 182px;
 149 }
 150
 151 #slide-your-chrome .slide-image {
 152   background-color: rgb(241, 202, 58);
 153   background-image: url(
 154       'chrome://theme/IDR_ICON_USER_MANAGER_TUTORIAL_YOUR_CHROME');
 155 }
 156
 157 #slide-guests .slide-image {
 158   background-color: rgb(90, 196, 144);
 159   background-image: url('chrome://theme/IDR_ICON_USER_MANAGER_TUTORIAL_GUESTS');
 160 }
 161
 162 #slide-friends .slide-image {
 163   background-color: rgb(179, 229, 252);
 164   background-image: url(
 165       'chrome://theme/IDR_ICON_USER_MANAGER_TUTORIAL_FRIENDS');
 166 }
 167
 168 #slide-complete .slide-image {
 169   background-color: white;
 170   background-image: url(
 171       'chrome://theme/IDR_ICON_USER_MANAGER_TUTORIAL_COMPLETE');
 172 }
 173
 174 #slide-not-you #dismiss-bubble-button {
 175   background-image: url('chrome://theme/IDR_CLOSE_1');
 176   cursor: pointer;
 177   height: 16px;
 178   position: absolute;
 179   right: 5px;
 180   top: 5px;
 181   width: 16px;
 182 }
 183
 184 html[dir=rtl] #slide-not-you #dismiss-bubble-button {
 185   left: 5px;
 186 }