Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(512)

Side by Side Diff: chrome/browser/resources/ntp/apps.css

Issue 8344013: remove ntp3 resources (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Created 9 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « chrome/browser/resources/new_tab_theme.css ('k') | chrome/browser/resources/ntp/apps.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 /* Apps */
2
3 #apps-content {
4 position: relative;
5 max-width: 780px; /* (124 + margin * 2) * 6 */
6 }
7
8 html.apps-promo-visible #apps-content {
9 max-width: 650px; /* (124 + margin * 2) * 5 */
10 }
11
12 #apps-maxiview {
13 overflow: hidden;
14 }
15
16 /*
17 We don't need to do anything for html.apps-promo-visible because there is
18 enough 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: 150px;
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 .app_notification {
102 color: gray;
103 display: block;
104 -webkit-transition: color .15s linear;
105 }
106 .app_notification:hover {
107 color: Blue;
108 }
109
110 #app-notification-close {
111 height: 14px;
112 position: absolute;
113 right: 6px;
114 top: 6px;
115 width: 14px;
116 }
117
118 #apps-content[launcher-animations=true] .app {
119 -webkit-transition: top .2s, left .2s, right .2s, opacity .2s;
120 }
121
122 #apps-content.visible .app {
123 visibility: visible;
124 }
125
126 @-webkit-keyframes bounce {
127 0% {
128 -webkit-transform: scale(0, 0);
129 }
130
131 60% {
132 -webkit-transform: scale(1.2, 1.2);
133 }
134
135 100% {
136 -webkit-transform: scale(1, 1);
137 }
138 }
139
140 html[install-animation-enabled=true] .app[new=new] {
141 opacity: 0;
142 }
143
144 html[install-animation-enabled=true] .app[new=installed] {
145 -webkit-animation: bounce .5s ease-in-out;
146 -webkit-transition: opacity .5s;
147 }
148
149 .app.web-store-entry > a {
150 background-image: url("chrome://theme/IDR_WEBSTORE_ICON");
151 }
152
153 menu > button.default {
154 font-weight: bold;
155 }
156
157 #apps-promo {
158 display: none;
159 }
160
161 html.apps-promo-visible #apps-promo {
162 height: 125px;
163 -webkit-padding-start: 125px;
164 display: table-cell;
165 vertical-align: text-bottom;
166 }
167
168 #apps-promo-heading {
169 font-size: 115%;
170 font-weight: bold;
171 margin-bottom: 5px;
172 -webkit-margin-start: 3px;
173 }
174
175 #apps-promo-hide {
176 -webkit-appearance: none;
177 -webkit-transition: opacity .15s;
178 background-color: transparent;
179 border: 0;
180 cursor: pointer;
181 font-family: inherit;
182 font-size: 90%;
183 text-decoration: underline;
184 margin-top: 2px;
185 }
186
187 html[dir=rtl] #apps-promo-hide {
188 float: left;
189 }
190
191 /*
192 We position the web store entry all by its lonesome in the top of the rightmost
193 column when there is at least one full row of apps. Note that this is similar,
194 but different than its position during promo (html.apps-promo-visible), so we
195 never set .loner while the promo is running.
196 */
197 .app.web-store-entry.loner {
198 position: absolute;
199 left: 100%;
200 top: 0;
201 }
202
203 html[dir=rtl] .app.web-store-entry.loner {
204 right: 100%;
205 }
206
207 .g-button-basic {
208 display: inline-block;
209 border-width: 6px 10px 12px 6px;
210 -webkit-border-image: url('g-button-chocobo.png') 6 10 12 6;
211 font-size: 1.3em;
212 color: #fff !important;
213 text-decoration: none;
214 font-weight: bold;
215 text-align: center;
216 padding: 2px 10px;
217 white-space: nowrap;
218 }
219
220 .notification-bubble {
221 background-color: White;
222 border: 1px solid #B5B5B5;
223 font-family: Helvetica, Arial, sans-serif;
224 font-size : 107%;
225 min-height: 100px;
226 opacity: 0;
227 padding: 10px;
228 position: absolute;
229 width: 200px;
230 -webkit-border-radius: 5px;
231 -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
232 -webkit-transition: opacity 0.2s linear;
233 }
234 .notification-bubble:focus {
235 outline: none;
236 }
237
238 .notification-bubble-opened {
239 opacity: 1;
240 pointer-events: auto;
241 }
242 .notification-bubble-closed {
243 opacity: 0;
244 pointer-events: none;
245 }
246
247 div#arrow-container {
248 position: absolute;
249 -webkit-transition: opacity 0.2s linear;
250 }
251 /* The following arrow class (div.arrow) creates a triangle when used in
252 conjunction with the next three div styles below it (arrow-contents,
253 shadow and border). The border-color property determines which direction
254 the arrow is facing. */
255 div.arrow {
256 border-style: solid;
257 border-width: 12px;
258 height: 0;
259 width: 0;
260 }
261 div#arrow-contents {
262 border-color: transparent white transparent transparent;
263 padding-left: 3px;
264 position: absolute;
265 z-index: 2;
266 }
267 div#arrow-shadow {
268 border-color: transparent #B5B5B5 transparent transparent;
269 opacity: 0.5;
270 padding-left: 1px;
271 position: absolute;
272 }
273 div#arrow-border {
274 border-color: transparent #B5B5B5 transparent transparent;
275 padding-left: 2px;
276 position: absolute;
277 z-index: 1;
278 }
OLDNEW
« no previous file with comments | « chrome/browser/resources/new_tab_theme.css ('k') | chrome/browser/resources/ntp/apps.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698