chrome/browser/resources/uber/uber_shared.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 body {
   6   -webkit-margin-start: 23px;
   7   color: rgb(48, 57, 66);
   8 }
   9
  10 body.uber-frame {
  11   -webkit-margin-start: 155px;
  12 }
  13
  14 html[dir='rtl'] body.uber-frame {
  15   /* Enable vertical scrollbar at all times in RTL to avoid visual glitches when
  16    * showing sub-pages that vertically overflow. */
  17   overflow-y: scroll;
  18 }
  19
  20 /* TODO(dbeam): Remove .page class from overlays in settings so the junk below
  21  * isn't necessary. */
  22 body #extension-settings.page,
  23 body #mainview-content .page,
  24 body .subpage-sheet-container .page,
  25 body > .page {
  26   -webkit-margin-end: 24px;
  27   min-width: 576px;
  28   padding-bottom: 20px;
  29   padding-top: 55px;
  30 }
  31
  32 body header {
  33   background-image: -webkit-linear-gradient(white,
  34                                             white 40%,
  35                                             rgba(255, 255, 255, 0.92));
  36   left: 23px;
  37   /* <section>s in options currently amount to 638px total, broken up into
  38    * 600px max-width + 18px -webkit-padding-start + 20px -webkit-margin-end
  39    * so we mirror this value here so the headers match width and horizontal
  40    * alignment when scrolling sideways.
  41    * other-devices.css' .device width depends on this, please keep in sync.
  42    */
  43   max-width: 738px;
  44   min-width: 600px;
  45   position: fixed;
  46   right: 0;
  47   top: 0;
  48   /* list.css sets a z-index of up to 2, this is set to 3 to ensure that the
  49    * header is in front of the selected list item. */
  50   z-index: 3;
  51 }
  52
  53 body.uber-frame header {
  54   left: 155px;
  55 }
  56
  57 html[dir='rtl'] body header {
  58   left: 0;
  59   right: 23px;
  60 }
  61
  62 html[dir='rtl'] body.uber-frame header {
  63   right: 155px;
  64 }
  65
  66 body header > .search-field-container,
  67 body header > .header-extras,
  68 body header > button {
  69   position: absolute;
  70   right: 20px;
  71   top: 21px;
  72 }
  73
  74 html[dir='rtl'] body header > .search-field-container,
  75 html[dir='rtl'] body header > .header-extras,
  76 html[dir='rtl'] body header > button {
  77   left: 20px;
  78   right: auto;
  79 }
  80
  81 body header input[type='search'],
  82 body header input[type='text'],
  83 body header button {
  84   margin: 0;
  85 }
  86
  87 body header > h1 {
  88   margin: 0;
  89   padding: 21px 0 13px;
  90 }
  91
  92 /* Create a border under the h1 (but before anything that gets appended
  93  * to the end of the header). */
  94 body header > h1::after {
  95   -webkit-margin-end: 20px;
  96   background-color: #eee;
  97   content: ' ';
  98   display: block;
  99   height: 1px;
 100   position: relative;
 101   top: 13px;
 102 }
 103
 104 body footer {
 105   border-top: 1px solid #eee;
 106   margin-top: 16px;
 107   /* min-width and max-width should match the header */
 108   max-width: 638px;
 109   min-width: 600px;
 110   padding: 8px 0;
 111 }
 112
 113 /* Sections are used in options pages, help page and history page. This defines
 114  * the section metrics to match the header metrics above. */
 115 body section {
 116   -webkit-padding-start: 18px;
 117   margin-bottom: 24px;
 118   margin-top: 8px;
 119   max-width: 600px;
 120 }
 121
 122 body section:last-of-type {
 123   margin-bottom: 0;
 124 }
 125
 126 body section > h3 {
 127   -webkit-margin-start: -18px;
 128 }
 129
 130 body section > div:only-of-type {
 131   -webkit-box-flex: 1;
 132 }
 133
 134 body .section-header {
 135   -webkit-margin-start: -18px;
 136   margin-bottom: 0.8em;
 137   margin-top: 1.2em;
 138 }
 139
 140 body .section-header > h3 {
 141   display: inline;
 142 }
 143
 144 /* Styles for a hideable notification banner at the top of a page. */
 145 .page.showing-banner {
 146   margin-top: 45px;
 147 }
 148
 149 .page-banner {
 150   background-color: white;
 151   width: 100%;
 152   z-index: 2;
 153 }
 154
 155 .page:not(.showing-banner) .page-banner {
 156   display: none;
 157 }
 158
 159 .page-banner-gradient {
 160   background: -webkit-linear-gradient(rgb(255, 242, 183),
 161                                       rgb(250, 230, 145));
 162   border: 1px solid rgb(201, 189, 141);
 163   border-radius: 3px;
 164   margin: 9px 9px 0 9px;
 165   min-height: 25px;
 166 }
 167
 168 .page-banner .page-banner-gradient {
 169   -webkit-margin-end: 20px;
 170   -webkit-margin-start: 0;
 171   margin-bottom: 9px;
 172 }
 173
 174 .page-banner-text {
 175   -webkit-padding-end: 8px;
 176   -webkit-padding-start: 26px;
 177   background-image: url(../../../../ui/webui/resources/images/business.svg);
 178   background-position: 0 center;
 179   background-repeat: no-repeat;
 180   background-size: 18px;
 181   display: block;
 182   padding-bottom: 8px;
 183   padding-top: 8px;
 184 }
 185
 186 .page-banner.clickable:active .page-banner-text {
 187   background: -webkit-linear-gradient(rgb(250, 230, 145),
 188                                       rgb(255, 242, 183));
 189 }