1c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch/* Apps */ 2c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 3731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick#apps-content { 4731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick position: relative; 5731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick max-width: 780px; /* (124 + margin * 2) * 6 */ 6731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick} 7731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick 8731df977c0511bca2206b5f333555b1205ff1f43Iain Merrickhtml.apps-promo-visible #apps-content { 9731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick max-width: 650px; /* (124 + margin * 2) * 5 */ 10731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick} 11731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick 1272a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen#apps-maxiview { 1372a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen overflow: hidden; 1472a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen} 1572a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen 1672a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen/* 1772a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian MonsenWe don't need to do anything for html.apps-promo-visible because there is 1872a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsenenough extra space in the small grid layout. 1972a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen*/ 2072a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen.small-layout #apps-content, 2172a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen.small-layout html.apps-promo-visible #apps-content { 2272a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen max-width: 520px; /* (124 + margin * 2) * 4 */ 23731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick} 24731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick 253345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrick.app, 263345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrick.app[new=installed] { 2721d179b334e59e9a3bfcaed4c4430bef1bc5759dKristian Monsen box-sizing: border-box; 28c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-perspective: 400; 29c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch border-radius: 10px; 30c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch color: black; 31c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch margin: 5px 3px; 3272a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen position: absolute; 33c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch height: 136px; 34c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch width: 124px; /* 920 / 7 - margin * 2 */ 35dc0f95d653279beabeb9817299e2902918ba123eKristian Monsen visibility: hidden; 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; 5272a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen font-family: Helvetica, Arial, sans-serif; 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; 6572a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen background-repeat: no-repeat; 66c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch border: 0; 67c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch height: 14px; 68c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch padding: 0; 69c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch position: absolute; 70c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch right: 5px; 71c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch top: 5px; 72c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch width: 14px; 73c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 74c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 753345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrick.app > .app-settings { 76c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transition: opacity .3s; 77c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transition-delay: 0; 78c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background-image: url(chrome://theme/IDR_BALLOON_WRENCH); 79c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch opacity: 0; 80c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 81c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 823345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrick.app > .app-settings:hover { 83c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transition: none; 843345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrick background-image: url(chrome://theme/IDR_BALLOON_WRENCH_H); 85c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 86c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 873345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrick.app:hover > .app-settings, 883345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrick.app > .app-settings:focus { 89c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transition-delay: .5s; 90c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch opacity: .9; 91c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 92c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 9372a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen.app.dragging > .app-settings { 9472a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen background-image: none; 9572a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen} 9672a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen 9772a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen.app.dragging { 9872a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen opacity: .7; 9972a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen} 10072a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen 10172a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen#apps-content[launcher-animations=true] .app { 10272a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen -webkit-transition: top .2s, left .2s, right .2s, opacity .2s; 10372a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen} 10472a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen 105dc0f95d653279beabeb9817299e2902918ba123eKristian Monsen#apps-content.visible .app { 106dc0f95d653279beabeb9817299e2902918ba123eKristian Monsen visibility: visible; 107dc0f95d653279beabeb9817299e2902918ba123eKristian Monsen} 108dc0f95d653279beabeb9817299e2902918ba123eKristian Monsen 109c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch@-webkit-keyframes bounce { 110c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 0% { 111c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transform: scale(0, 0); 112c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch } 113c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 114c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 60% { 115c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transform: scale(1.2, 1.2); 116c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch } 117c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 118c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 100% { 119c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transform: scale(1, 1); 120c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch } 121c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 122c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 1233345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrickhtml[install-animation-enabled=true] .app[new=new] { 124c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch opacity: 0; 125c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 126c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 1273345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrickhtml[install-animation-enabled=true] .app[new=installed] { 128c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-animation: bounce .5s ease-in-out; 129c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transition: opacity .5s; 130c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 131c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 13272a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen.app.web-store-entry > a { 133201ade2fbba22bfb27ae029f4d23fca6ded109a0Ben Murdoch background-image: url("chrome://theme/IDR_WEBSTORE_ICON"); 134c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 135c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 1363345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrickmenu > button.default { 1373345a6884c488ff3a535c2c9acdd33d74b37e311Iain Merrick font-weight: bold; 138c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 139731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick 140731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick#apps-promo { 141731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick display: none; 142731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick} 143731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick 144731df977c0511bca2206b5f333555b1205ff1f43Iain Merrickhtml.apps-promo-visible #apps-promo { 145ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen background: url('chrome://theme/IDR_WEBSTORE_ICON') no-repeat; 146ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen height: 125px; 147ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen -webkit-padding-start: 125px; 148ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen display: table-cell; 149ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen vertical-align: text-bottom; 150731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick} 151731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick 152ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen#apps-promo-heading { 153ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen font-size: 115%; 154ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen font-weight: bold; 155ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen margin-bottom: 5px; 156ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen -webkit-margin-start: 3px; 157731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick} 158731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick 159731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick#apps-promo-hide { 160731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick -webkit-appearance: none; 161731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick -webkit-transition: opacity .15s; 162731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick background-color: transparent; 163731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick border: 0; 164731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick cursor: pointer; 165731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick font-family: inherit; 166731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick font-size: 90%; 167731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick text-decoration: underline; 168ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen margin-top: 2px; 169731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick} 170731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick 171731df977c0511bca2206b5f333555b1205ff1f43Iain Merrickhtml[dir=rtl] #apps-promo-hide { 172731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick float: left; 173731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick} 174731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick 175731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick/* 176731df977c0511bca2206b5f333555b1205ff1f43Iain MerrickWe position the web store entry all by its lonesome in the top of the rightmost 177731df977c0511bca2206b5f333555b1205ff1f43Iain Merrickcolumn when there is at least one full row of apps. Note that this is similar, 178731df977c0511bca2206b5f333555b1205ff1f43Iain Merrickbut different than its position during promo (html.apps-promo-visible), so we 179731df977c0511bca2206b5f333555b1205ff1f43Iain Merricknever set .loner while the promo is running. 180731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick*/ 18172a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen.app.web-store-entry.loner { 182731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick position: absolute; 183731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick left: 100%; 184731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick top: 0; 185731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick} 186731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick 18772a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsenhtml[dir=rtl] .app.web-store-entry.loner { 188731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick right: 100%; 189731df977c0511bca2206b5f333555b1205ff1f43Iain Merrick} 190ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 191ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen.g-button-basic { 192ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen display: inline-block; 193ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen border-width: 6px 10px 12px 6px; 194ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen -webkit-border-image: url('g-button-chocobo.png') 6 10 12 6; 195ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen font-size: 1.3em; 196ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen color: #fff !important; 197ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen text-decoration: none; 198ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen font-weight: bold; 199ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen text-align: center; 200ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen padding: 2px 10px; 201ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen white-space: nowrap; 202ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen} 203ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 204