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