popup.css revision d3868032626d59662ff73b372b5d584c1d144c53 
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. */
4
5body {
6  text-align: center;
7}
8
9#outer,
10#empty,
11#open-folder,
12.file-url,
13.time-left,
14.more-left {
15  display: inline-block;
16}
17
18#head {
19  position: fixed;
20  width: 100%;
21  left: 0;
22  top: 0;
23  background: white;
24  border-bottom: 1px solid grey;
25}
26
27#search-zero,
28#items {
29  margin-top: 2em;
30}
31
32#head,
33#empty,
34#searching,
35#search-zero,
36.item,
37.start-time,
38.complete-size,
39.error,
40.file-url-head,
41.removed,
42.open-filename,
43.progress,
44.time-left,
45.url,
46#text-width-probe {
47  white-space: nowrap;
48}
49
50#head,
51.item {
52  text-align: left;
53}
54
55#empty {
56  vertical-align: bottom;
57  height: 2em;
58}
59
60#q {
61  margin-top: 0.5em;
62  margin-left: 3%;
63}
64
65#clear-all,
66#open-folder {
67  float: right;
68}
69
70svg {
71  width: 2em;
72  height: 2em;
73}
74
75svg rect.border {
76  fill-opacity: 0;
77  stroke-width: 6;
78}
79
80#open-folder svg,
81.show-folder svg {
82  stroke: brown;
83  fill: white;
84  stroke-width: 3;
85}
86
87#clear-all svg {
88  fill: white;
89  stroke-width: 3;
90}
91
92#clear-all svg,
93.remove-file svg,
94.erase svg {
95  stroke: black;
96}
97
98.clearfix {
99  clear: both;
100  float: right;
101}
102
103#older,
104#loading-older,
105.item {
106  margin-top: 1em;
107}
108
109.more {
110  position: absolute;
111  border: 1px solid grey;
112  background: white;
113  z-index: 1;
114}
115
116.complete-size,
117.error,
118.removed,
119.open-filename,
120.progress,
121.time-left {
122  margin-right: 0.4em;
123}
124
125.error {
126  color: darkred;
127}
128
129.referrer svg {
130  stroke: blue;
131  fill-opacity: 0;
132  stroke-width: 7;
133}
134
135.removed,
136.open-filename {
137  max-width: 400px;
138  overflow: hidden;
139  display: inline-block;
140}
141
142.remove-file svg {
143  fill-opacity: 0;
144  stroke-width: 5;
145}
146
147.remove-file svg line {
148  stroke-width: 7;
149  stroke: red;
150}
151
152.erase svg ellipse,
153.erase svg line {
154  fill-opacity: 0;
155  stroke-width: 5;
156}
157
158.pause svg {
159  stroke: #333;
160}
161
162.resume svg {
163  stroke: rgb(68, 187, 68);
164  fill: rgb(68, 187, 68);
165}
166
167.cancel svg line {
168  stroke-width: 7;
169}
170
171.cancel svg {
172  stroke: rgb(204, 68, 68);
173}
174
175.meter {
176  height: 0.5em;
177  position: relative;
178  background: grey;
179}
180
181.meter > span {
182  display: block;
183  height: 100%;
184  background-color: rgb(43, 194, 83);
185  background-image: -webkit-gradient(
186    linear, left bottom, left top,
187    color-stop(0, rgb(43,194,83)),
188    color-stop(1, rgb(84,240,84)));
189  position: relative;
190  overflow: hidden;
191}
192
193.meter > span:after {
194  content: '';
195  position: absolute;
196  top: 0; left: 0; bottom: 0; right: 0;
197  background-image: -webkit-gradient(
198    linear, 0 0, 100% 100%,
199    color-stop(.25, rgba(255, 255, 255, .2)),
200    color-stop(.25, transparent),
201    color-stop(.5, transparent),
202    color-stop(.5, rgba(255, 255, 255, .2)),
203    color-stop(.75, rgba(255, 255, 255, .2)),
204    color-stop(.75, transparent),
205    to(transparent));
206  z-index: 1;
207  -webkit-background-size: 50px 50px;
208  background-size: 50px 50px;
209  -webkit-animation: move 2s linear infinite;
210  overflow: hidden;
211}
212
213@-webkit-keyframes move {
214  0% { background-position: 0 0; }
215  100% { background-position: 50px 50px; }
216}
217
218.url {
219  color: grey;
220  max-width: 700px;
221  overflow: hidden;
222  display: block;
223}
224
225#text-width-probe {
226  position: absolute;
227  top: -100px;
228  left: 0;
229}
230