apps.css revision 201ade2fbba22bfb27ae029f4d23fca6ded109a0
1c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch/* Apps */ 2c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 3731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick#apps-content { 4731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick position: relative; 5731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick width: intrinsic; 6731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick max-width: 780px; /* (124 + margin * 2) * 6 */ 7731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick} 8731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick 9731df977c0511bca2206b5f333555b1205ff1f43Iain Merrickhtml.apps-promo-visible #apps-content { 10731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick max-width: 650px; /* (124 + margin * 2) * 5 */ 11731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick} 12731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick 13731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick/* small */ 14731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick@media (max-width: 940px) { 15731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick /* 16731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick We don't need to do anything for html.apps-promo-visible because there is 17731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick enough extra space in the small grid layout. 18731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick */ 19731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick #apps-content, 20731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick html.apps-promo-visible #apps-content { 21731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick max-width: 520px; /* (124 + margin * 2) * 4 */ 22731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick } 23731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick} 24731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick 253345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrick.app, 263345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrick.app[new=installed] { 27c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-box-sizing: border-box; 28c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-perspective: 400; 29c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch border-radius: 10px; 30c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch color: black; 31c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch display: inline-block; 32c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch margin: 5px 3px; 33c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch position: relative; 34c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch height: 136px; 35c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch width: 124px; /* 920 / 7 - margin * 2 */ 36c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 37c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 38c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.app a { 39c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch border-radius: 10px; 40c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch bottom: 0; 41c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch left: 0; 42c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch position: absolute; 43c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch right: 0; 44c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch top: 0; 45c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 46c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 47c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.app a { 48c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transition: background-color .5s; 49c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background: rgba(255, 255, 255, 0) /* transparent white */ 50c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch no-repeat center 10px; 51c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background-size: 96px 96px; 523345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrick font-family: Helvetica, Arial; 533345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrick font-size: 107%; 54c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch overflow: hidden; 55c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch padding: 111px 10px 10px; /* 10 + 96 + 5 */ 56c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch text-align: center; 57c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch text-decoration: none; 58c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch text-overflow: ellipsis; 59c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch white-space: nowrap; 60c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 61c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 623345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrick.app .app-settings { 63c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background-color: transparent; 643345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrick background-position: center center; 65c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch border: 0; 66c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch height: 14px; 67c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch padding: 0; 68c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch position: absolute; 69c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch right: 5px; 70c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch top: 5px; 71c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch width: 14px; 72c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 73c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 743345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrick.app > .app-settings { 75c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transition: opacity .3s; 76c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transition-delay: 0; 77c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background-image: url(chrome://theme/IDR_BALLOON_WRENCH); 78c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch opacity: 0; 79c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 80c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 813345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrick.app > .app-settings:hover { 82c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transition: none; 833345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrick background-image: url(chrome://theme/IDR_BALLOON_WRENCH_H); 84c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 85c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 863345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrick.app:hover > .app-settings, 873345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrick.app > .app-settings:focus { 88c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transition-delay: .5s; 89c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch opacity: .9; 90c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 91c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 92c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch@-webkit-keyframes bounce { 93c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 0% { 94c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transform: scale(0, 0); 95c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch } 96c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 97c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 60% { 98c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transform: scale(1.2, 1.2); 99c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch } 100c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 101c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 100% { 102c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transform: scale(1, 1); 103c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch } 104c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 105c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 1063345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrickhtml[install-animation-enabled=true] .app[new=new] { 107c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch opacity: 0; 108c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 109c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 1103345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrickhtml[install-animation-enabled=true] .app[new=installed] { 111c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-animation: bounce .5s ease-in-out; 112c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transition: opacity .5s; 113c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 114c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 115731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick.app[app-id=web-store-entry] > a { 116201ade2fbba22bfb27ae029f4d23fca6ded109a0Ben Murdoch background-image: url("chrome://theme/IDR_WEBSTORE_ICON"); 117c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 118c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 1193345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrickmenu > button.default { 1203345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrick font-weight: bold; 121c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 122731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick 123731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick#apps-promo { 124731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick display: none; 125731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick} 126731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick 127731df977c0511bca2206b5f333555b1205ff1f43Iain Merrickhtml.apps-promo-visible #apps-promo { 128731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick display: block; 129731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick} 130731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick 131731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick#apps-promo > h3 { 132731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick font-size: 16px; 133731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick margin-top: 1em; 134731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick margin-bottom: 0.25em; 135731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick} 136731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick 137731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick#apps-promo-text1 { 138731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick margin-top: 0; 139731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick} 140731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick 141731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick#apps-promo-hide { 142731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick float: right; 143731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick -webkit-appearance: none; 144731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick -webkit-transition: opacity .15s; 145731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick background-color: transparent; 146731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick border: 0; 147731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick cursor: pointer; 148731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick font-family: inherit; 149731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick font-size: 90%; 150731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick text-decoration: underline; 151731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick} 152731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick 153731df977c0511bca2206b5f333555b1205ff1f43Iain Merrickhtml[dir=rtl] #apps-promo-hide { 154731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick float: left; 155731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick} 156731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick 157731df977c0511bca2206b5f333555b1205ff1f43Iain Merrickhtml.apps-promo-visible .app[app-id=web-store-entry] { 158731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick position: absolute; 159731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick left: 100%; 160731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick top: 0; 161731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick -webkit-margin-start: 22px; 162731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick} 163731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick 164731df977c0511bca2206b5f333555b1205ff1f43Iain Merrickhtml.apps-promo-visible[dir=rtl] .app[app-id=web-store-entry] { 165731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick right: 100%; 166731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick} 167731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick 168731df977c0511bca2206b5f333555b1205ff1f43Iain Merrickhtml.apps-promo-visible .app[app-id=web-store-entry] a { 169731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick font-weight: bold; 170731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick} 171731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick 172731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick/* 173731df977c0511bca2206b5f333555b1205ff1f43Iain MerrickWe position the web store entry all by its lonesome in the top of the rightmost 174731df977c0511bca2206b5f333555b1205ff1f43Iain Merrickcolumn when there is at least one full row of apps. Note that this is similar, 175731df977c0511bca2206b5f333555b1205ff1f43Iain Merrickbut different than its position during promo (html.apps-promo-visible), so we 176731df977c0511bca2206b5f333555b1205ff1f43Iain Merricknever set .loner while the promo is running. 177731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick*/ 178731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick.app[app-id=web-store-entry].loner { 179731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick position: absolute; 180731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick left: 100%; 181731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick top: 0; 182731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick} 183731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick 184731df977c0511bca2206b5f333555b1205ff1f43Iain Merrickhtml[dir=rtl] .app[app-id=web-store-entry].loner { 185731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick right: 100%; 186731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick} 187