Home | History | Annotate | Download | only in ntp 
      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: 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 
    123 html[install-animation-enabled=true] .app[new=new] {
    124   opacity: 0;
    125 }
    126 
    127 html[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 
    136 menu > button.default {
    137   font-weight: bold;
    138 }
    139 
    140 #apps-promo {
    141   display: none;
    142 }
    143 
    144 html.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 
    171 html[dir=rtl] #apps-promo-hide {
    172   float: left;
    173 }
    174 
    175 /*
    176 We position the web store entry all by its lonesome in the top of the rightmost
    177 column when there is at least one full row of apps. Note that this is similar,
    178 but different than its position during promo (html.apps-promo-visible), so we
    179 never 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 
    187 html[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