• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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   * 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
49html[dir='rtl'] body.uber-frame header {
50  left: 0;
51  right: 155px;
52}
53
54body.uber-frame header > .search-field-container,
55body.uber-frame header > .header-extras,
56body.uber-frame header > button {
57  position: absolute;
58  right: 20px;
59  top: 21px;
60}
61
62html[dir='rtl'] body.uber-frame header > .search-field-container,
63html[dir='rtl'] body.uber-frame header > .header-extras,
64html[dir='rtl'] body.uber-frame header > button {
65  left: 20px;
66  right: auto;
67}
68
69body.uber-frame header input[type='search'],
70body.uber-frame header input[type='text'],
71body.uber-frame header button {
72  margin: 0;
73}
74
75body.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). */
82body.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
92body.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. */
103body.uber-frame section {
104  -webkit-padding-start: 18px;
105  margin-bottom: 24px;
106  margin-top: 8px;
107  max-width: 600px;
108}
109
110body.uber-frame section:last-of-type {
111  margin-bottom: 0;
112}
113
114body.uber-frame section > h3 {
115  -webkit-margin-start: -18px;
116}
117
118body.uber-frame section > div:only-of-type {
119  -webkit-box-flex: 1;
120}
121
122body.uber-frame .section-header {
123  -webkit-margin-start: -18px;
124  margin-bottom: 0.8em;
125  margin-top: 1.2em;
126}
127
128body.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}
178