Allow only one bookmark to be added for multiple fast starring
[chromium-blink-merge.git] / chrome / browser / resources / chromeos / wallpaper_manager / css / wallpaper_manager.css
bloba43373118322e544310d4edf0e71547b07d99235
1 /* Copyright (c) 2013 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. */
5 html {
6 height: 100%;
9 body {
10 -webkit-app-region: drag;
11 background-color: rgba(20, 20, 20, 0.93);
12 color: #999;
13 font-size: 80%;
14 height: 100%;
15 margin: 0;
16 padding: 0;
19 /* Click events are not received in draggable area. Making all clickable areas
20 * not draggable to receive click events.
21 * TODO(bshe): Remove this when http://crbug.com/142275 fixed.
23 .dialog-topbar #navstrip,
24 .dialog-topbar #window-close-button,
25 .overlay-container .page,
26 #author-website,
27 /* TODO(bshe): Once http://crbug.com/369651 fixed, use .image-picker instead of
28 * #category-container.
30 #category-container,
31 #surprise-me {
32 -webkit-app-region: no-drag;
35 .dialog-container {
36 display: flex;
37 flex-direction: column;
38 height: 100%;
39 overflow: hidden;
42 .dialog-topbar {
43 -webkit-box-align: center;
44 display: -webkit-box;
45 height: 54px;
46 overflow: hidden;
47 padding: 0 15px;
48 position: relative;
51 .dialog-topbar .spacer {
52 -webkit-box-flex: 1;
55 #categories-list {
56 -webkit-box-orient: horizontal;
57 display: -webkit-box;
58 height: 54px;
59 outline: none;
60 width: 100%;
63 #categories-list > li {
64 -webkit-box-align: center;
65 -webkit-transition: border-top 130ms ease;
66 -webkit-user-select: none;
67 border-top: 4px solid transparent;
68 color: #777;
69 display: -webkit-box;
70 height: 50px;
73 #categories-list:not([disabled]) > li:hover {
74 border-top-color: rgba(255, 255, 255, 0.4);
75 cursor: pointer;
78 #categories-list > li[selected] {
79 color: rgb(70, 78, 90);
80 cursor: default;
83 #categories-list > li > div {
84 line-height: 34px;
85 padding: 0 10px;
88 #categories-list > li[selected] > div {
89 color: #eee;
92 .close {
93 background-position: center;
94 background-repeat: no-repeat;
95 height: 14px;
96 padding: 10px;
97 position: absolute;
98 right: 0;
99 top: 0;
100 width: 14px;
103 #window-close-button {
104 background-image: url(../images/ui/close-white.png);
107 #window-close-button:hover {
108 background-image: url(../images/ui/close-white-hover.png);
111 #bar {
112 -webkit-transition: left 130ms ease-in-out;
113 background-color: #eee;
114 height: 4px;
115 position: absolute;
116 top: 0;
119 .dialog-main {
120 display: flex;
121 flex: 1;
124 #category-container {
125 flex: 1;
126 position: relative;
129 #spinner-container {
130 -webkit-box-align: center;
131 -webkit-box-pack: center;
132 background: url(chrome://resources/images/throbber.svg) center/32px no-repeat;
133 display: -webkit-box;
134 height: 287px;
135 padding-bottom: 15px;
136 padding-top: 5px;
137 position: absolute;
138 top: 0;
139 width: 100%;
142 #wallpaper-set-by-message {
143 -webkit-padding-end: 5px;
144 -webkit-padding-start: 15px;
145 height: 17px;
148 #wallpaper-set-by-message:empty {
149 display: none;
152 .image-picker {
153 -webkit-padding-end: 5px;
154 -webkit-padding-start: 15px;
155 display: block;
156 /* Set font size to 0 to remove the extra vertical margin between two rows of
157 * thumbnails.
158 * TODO(bshe): Find the root cause of the margin.
160 font-size: 0;
161 height: 287px;
162 outline: none;
163 overflow-y: auto;
164 padding-bottom: 15px;
165 padding-top: 5px;
168 .image-picker .spacer {
169 display: block;
172 .image-picker > * {
173 display: inline-block;
174 margin: 0;
175 overflow: hidden;
176 padding: 0;
179 .image-picker [role=listitem] {
180 -webkit-margin-end: 1px;
181 height: 68px;
182 margin-bottom: 1px;
183 position: relative;
184 width: 108px;
187 .image-picker:not([disabled]) [role=listitem]:hover {
188 outline: 3px solid #f1f1f1;
189 z-index: 1;
192 .image-picker .check {
193 background-image: url(../images/ui/check.png);
194 height: 32px;
195 left: 38px;
196 position: absolute;
197 top: 18px;
198 width: 32px;
199 z-index: 2;
202 ::-webkit-scrollbar {
203 width: 6px;
206 ::-webkit-scrollbar-thumb {
207 background: #aaa;
210 ::-webkit-scrollbar-thumb:hover {
211 background: #888;
214 /* The width and height of img tag need to be set here. Otherwise, an incorrect
215 * image size may be used during layout. Some images may be misaligned as a
216 * result. See http://code.google.com/p/chromium/issues/detail?id=148480 for
217 * screen shot.
219 .image-picker img {
220 height: 68px;
221 width: 108px;
224 .image-picker[disabled]~.bottom-bar #online-wallpaper-attribute,
225 .image-picker[disabled] .check {
226 visibility: hidden;
229 .image-picker[disabled],
230 .image-picker-offline img:not([offline]) {
231 -webkit-filter: grayscale(1);
234 #wallpaper-attribute {
235 -webkit-box-orient: vertical;
236 display: -webkit-box;
239 .bottom-bar {
240 -webkit-box-align: center;
241 -webkit-box-orient: horizontal;
242 -webkit-box-pack: end;
243 display: -webkit-box;
244 height: 40px;
245 padding: 11px 15px 8px 15px;
248 .bottom-bar > .spacer {
249 -webkit-box-flex: 1;
252 #online-wallpaper-attribute {
253 display: -webkit-box;
256 #attribute-image {
257 -webkit-margin-end: 10px;
258 height: 34px;
259 width: 54px;
262 #author-website {
263 color: #999;
264 overflow: hidden;
265 white-space: nowrap;
266 width: 240px;
269 /* [hidden] does display:none, but its priority is too low. */
270 [hidden],
271 body[custom] [visibleif]:not([visibleif~='custom']),
272 body:not([custom]) [visibleif~='custom'] {
273 display: none !important;
276 body[surprise-me-disabled] [visibleif]:not([visibleif~='surprise-me-disabled']),
277 body:not([surprise-me-disabled]) [visibleif~='surprise-me-disabled'] {
278 display: none !important;
281 .progress-bar {
282 background-color: rgba(255, 255, 255, 0.7);
283 height: 6px;
284 position: absolute;
285 top: 62px;
286 width: 100%;
289 .progress-track {
290 -webkit-transition: width 1ms linear;
291 background-color: rgb(66, 129, 244);
292 height: 100%;
293 width: 0;
296 .overlay-container {
297 -webkit-box-align: center;
298 -webkit-box-orient: vertical;
299 -webkit-box-pack: center;
300 background-color: rgba(25, 25, 25, 0.25);
301 bottom: 0;
302 display: -webkit-box;
303 left: 0;
304 overflow: auto;
305 position: fixed;
306 right: 0;
307 top: 0;
308 z-index: 4;
311 .overlay-container .page {
312 -webkit-box-orient: vertical;
313 background: rgb(255, 255, 255);
314 border-radius: 3px;
315 box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
316 color: #333;
317 display: -webkit-box;
318 padding: 20px;
319 position: relative;
320 width: 302px;
323 #error-container {
324 z-index: 5;
327 .overlay-container .close {
328 background-image: url(../images/ui/close-overlay.png);
331 .overlay-container .close:hover {
332 background-image: url(../images/ui/close-overlay-hover.png);
335 /* Custom wallpaper thumbnail container. */
336 #add-new img {
337 content: url(../images/ui/add-wallpaper-thumbnail.png);
340 .image-picker:not([disabled]) #add-new:hover img {
341 content: url(../images/ui/add-wallpaper-thumbnail-hover.png);
344 #wallpaper-selection-container #content div {
345 margin: 20px 0 5px 0;
348 #wallpaper-selection-container #warning span {
349 line-height: 17px;
352 #wallpaper-selection-container select {
353 height: 30px;
356 #wallpaper-selection-container input[type='file']::-webkit-file-upload-button {
357 height: 30px;
360 #wallpaper-selection-container .remember-icon {
361 content: url(../images/ui/remember.png);
364 #surprise-me #checkbox {
365 background-image: url(../images/ui/checkbox_unchecked.png);
366 display: inline-block;
367 height: 17px;
368 margin-right: 4px;
369 opacity: 0.7;
370 position: relative;
371 top: 4px;
372 width: 17px;
375 #surprise-me #checkbox.checked {
376 background-image: url(../images/ui/checkbox_checked.png);