• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/* Apps */
2
3#apps-content {
4  position: relative;
5  max-width: 780px;  /* (124 + margin * 2) * 6 */
6}
7
8html.apps-promo-visible #apps-content {
9  max-width: 650px; /* (124 + margin * 2) * 5 */
10}
11
12#apps-maxiview {
13  overflow: hidden;
14}
15
16/*
17We don't need to do anything for html.apps-promo-visible because there is
18enough extra space in the small grid layout.
19*/
20.small-layout #apps-content,
21.small-layout html.apps-promo-visible #apps-content {
22  max-width: 520px;  /* (124 + margin * 2) * 4 */
23}
24
25.app,
26.app[new=installed] {
27  box-sizing: border-box;
28  -webkit-perspective: 400;
29  border-radius: 10px;
30  color: black;
31  margin: 5px 3px;
32  position: absolute;
33  height: 136px;
34  width: 124px; /* 920 / 7 - margin * 2 */
35  visibility: hidden;
36}
37
38.app a {
39  border-radius: 10px;
40  bottom: 0;
41  left: 0;
42  position: absolute;
43  right: 0;
44  top: 0;
45}
46
47.app a {
48  -webkit-transition: background-color .5s;
49  background: rgba(255, 255, 255, 0) /* transparent white */
50              no-repeat center 10px;
51  background-size: 96px 96px;
52  font-family: Helvetica, Arial, sans-serif;
53  font-size: 107%;
54  overflow: hidden;
55  padding: 111px 10px 10px;  /* 10 + 96 + 5 */
56  text-align: center;
57  text-decoration: none;
58  text-overflow: ellipsis;
59  white-space: nowrap;
60}
61
62.app .app-settings {
63  background-color: transparent;
64  background-position: center center;
65  background-repeat: no-repeat;
66  border: 0;
67  height: 14px;
68  padding: 0;
69  position: absolute;
70  right: 5px;
71  top: 5px;
72  width: 14px;
73}
74
75.app > .app-settings {
76  -webkit-transition: opacity .3s;
77  -webkit-transition-delay: 0;
78  background-image: url(chrome://theme/IDR_BALLOON_WRENCH);
79  opacity: 0;
80}
81
82.app > .app-settings:hover {
83  -webkit-transition: none;
84  background-image: url(chrome://theme/IDR_BALLOON_WRENCH_H);
85}
86
87.app:hover > .app-settings,
88.app > .app-settings:focus {
89  -webkit-transition-delay: .5s;
90  opacity: .9;
91}
92
93.app.dragging > .app-settings {
94  background-image: none;
95}
96
97.app.dragging {
98  opacity: .7;
99}
100
101#apps-content[launcher-animations=true] .app {
102  -webkit-transition: top .2s, left .2s, right .2s, opacity .2s;
103}
104
105#apps-content.visible .app {
106  visibility: visible;
107}
108
109@-webkit-keyframes bounce {
110  0% {
111    -webkit-transform: scale(0, 0);
112  }
113
114  60% {
115    -webkit-transform: scale(1.2, 1.2);
116  }
117
118  100% {
119    -webkit-transform: scale(1, 1);
120  }
121}
122
123html[install-animation-enabled=true] .app[new=new] {
124  opacity: 0;
125}
126
127html[install-animation-enabled=true] .app[new=installed] {
128  -webkit-animation: bounce .5s ease-in-out;
129  -webkit-transition: opacity .5s;
130}
131
132.app.web-store-entry > a {
133  background-image: url("chrome://theme/IDR_WEBSTORE_ICON");
134}
135
136menu > button.default {
137  font-weight: bold;
138}
139
140#apps-promo {
141  display: none;
142}
143
144html.apps-promo-visible #apps-promo {
145  background: url('chrome://theme/IDR_WEBSTORE_ICON') no-repeat;
146  height: 125px;
147  -webkit-padding-start: 125px;
148  display: table-cell;
149  vertical-align: text-bottom;
150}
151
152#apps-promo-heading {
153  font-size: 115%;
154  font-weight: bold;
155  margin-bottom: 5px;
156  -webkit-margin-start: 3px;
157}
158
159#apps-promo-hide {
160  -webkit-appearance: none;
161  -webkit-transition: opacity .15s;
162  background-color: transparent;
163  border: 0;
164  cursor: pointer;
165  font-family: inherit;
166  font-size: 90%;
167  text-decoration: underline;
168  margin-top: 2px;
169}
170
171html[dir=rtl] #apps-promo-hide {
172  float: left;
173}
174
175/*
176We position the web store entry all by its lonesome in the top of the rightmost
177column when there is at least one full row of apps. Note that this is similar,
178but different than its position during promo (html.apps-promo-visible), so we
179never set .loner while the promo is running.
180*/
181.app.web-store-entry.loner {
182  position: absolute;
183  left: 100%;
184  top: 0;
185}
186
187html[dir=rtl] .app.web-store-entry.loner {
188  right: 100%;
189}
190
191.g-button-basic {
192  display: inline-block;
193  border-width: 6px 10px 12px 6px;
194  -webkit-border-image: url('g-button-chocobo.png') 6 10 12 6;
195  font-size: 1.3em;
196  color: #fff !important;
197  text-decoration: none;
198  font-weight: bold;
199  text-align: center;
200  padding: 2px 10px;
201  white-space: nowrap;
202}
203
204