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 body.uber-frame section > div:only-of-type {
 119   -webkit-box-flex: 1;
 120 }
 121
 122 body.uber-frame .section-header {
 123   -webkit-margin-start: -18px;
 124   margin-bottom: 0.8em;
 125   margin-top: 1.2em;
 126 }
 127
 128 body.uber-frame .section-header > h3 {
 129   display: inline;
 130 }
 131
 132 /* Styles for a hideable notification banner at the top of a page. */
 133 .page.showing-banner {
 134   margin-top: 45px;
 135 }
 136
 137 .page-banner {
 138   background-color: white;
 139   width: 100%;
 140   z-index: 2;
 141 }
 142
 143 .page:not(.showing-banner) .page-banner {
 144   display: none;
 145 }
 146
 147 .page-banner-gradient {
 148   background: -webkit-linear-gradient(rgb(255, 242, 183),
 149                                       rgb(250, 230, 145));
 150   border: 1px solid rgb(201, 189, 141);
 151   border-radius: 3px;
 152   margin: 9px 9px 0 9px;
 153   min-height: 25px;
 154 }
 155
 156 .page-banner .page-banner-gradient {
 157   -webkit-margin-end: 20px;
 158   -webkit-margin-start: 0;
 159   margin-bottom: 9px;
 160 }
 161
 162 .page-banner-text {
 163   -webkit-padding-end: 8px;
 164   -webkit-padding-start: 26px;
 165   background-image: url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY');
 166   background-position: 5px center;
 167   background-repeat: no-repeat;
 168   background-size: 16px;
 169   display: block;
 170   padding-bottom: 8px;
 171   padding-top: 8px;
 172 }
 173
 174 .page-banner.clickable:active .page-banner-text {
 175   background: -webkit-linear-gradient(rgb(250, 230, 145),
 176                                       rgb(255, 242, 183));
 177 }