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
5body.uber-frame {
6  -webkit-margin-start: 155px;
7  color: rgb(48, 57, 66);
8}
9
10html[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. */
18body.uber-frame #extension-settings.page,
19body.uber-frame #mainview-content .page,
20body.uber-frame .subpage-sheet-container .page,
21body.uber-frame > .page {
22  -webkit-margin-end: 24px;
23  min-width: 576px;
24  padding-bottom: 20px;
25  padding-top: 55px;
26}
27
28body.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  max-width: 738px;
38  min-width: 600px;
39  position: fixed;
40  right: 0;
41  top: 0;
42  /* list.css sets a z-index of up to 2, this is set to 3 to ensure that the
43   * header is in front of the selected list item. */
44  z-index: 3;
45}
46
47html[dir='rtl'] body.uber-frame header {
48  left: 0;
49  right: 155px;
50}
51
52body.uber-frame header > .search-field-container,
53body.uber-frame header > .header-extras,
54body.uber-frame header > button {
55  position: absolute;
56  right: 20px;
57  top: 21px;
58}
59
60html[dir='rtl'] body.uber-frame header > .search-field-container,
61html[dir='rtl'] body.uber-frame header > .header-extras,
62html[dir='rtl'] body.uber-frame header > button {
63  left: 20px;
64  right: auto;
65}
66
67body.uber-frame header input[type='search'],
68body.uber-frame header input[type='text'],
69body.uber-frame header button {
70  margin: 0;
71}
72
73body.uber-frame header > h1 {
74  margin: 0;
75  padding: 21px 0 13px;
76}
77
78/* Create a border under the h1 (but before anything that gets appended
79 * to the end of the header). */
80body.uber-frame header > h1::after {
81  -webkit-margin-end: 20px;
82  background-color: #eee;
83  content: ' ';
84  display: block;
85  height: 1px;
86  position: relative;
87  top: 13px;
88}
89
90body.uber-frame footer {
91  border-top: 1px solid #eee;
92  margin-top: 16px;
93  /* min-width and max-width should match the header */
94  max-width: 638px;
95  min-width: 600px;
96  padding: 8px 0;
97}
98
99/* Sections are used in options pages, help page and history page. This defines
100 * the section metrics to match the header metrics above. */
101body.uber-frame section {
102  -webkit-padding-start: 18px;
103  margin-bottom: 24px;
104  margin-top: 8px;
105  max-width: 600px;
106}
107
108body.uber-frame section:last-of-type {
109  margin-bottom: 0;
110}
111
112body.uber-frame section > h3 {
113  -webkit-margin-start: -18px;
114}
115
116body.uber-frame section > div:only-of-type {
117  -webkit-box-flex: 1;
118}
119