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 } 182
