[Summary view] [Print] [Text view]

   1  /**
   2   * @provides pholio-css
   3   */
   4  .pholio-mock-image-container {
   5    text-align: center;
   6    vertical-align: middle;
   7    position: relative;
   8    background: url('/rsrc/image/checker_lighter.png');
   9  }
  10  
  11  .pholio-mock-thumb-grid-container {
  12    padding: 12px;
  13    overflow-x: auto;
  14    overflow-y: hidden;
  15  }
  16  
  17  .pholio-mock-thumb-grid {
  18    margin: 0 auto;
  19  }
  20  
  21  .pholio-mock-thumb-grid-item {
  22    display: inline-block;
  23    cursor: pointer;
  24    width: 100px;
  25    height: 100px;
  26    padding: 4px;
  27    margin: 4px;
  28    vertical-align: middle;
  29    border: 1px solid {$lightgreyborder};
  30    position: relative;
  31    background: url('/rsrc/image/checker_lighter.png');
  32  }
  33  
  34  .device-desktop .pholio-mock-thumb-grid-item:hover {
  35    border-color: {$pink};
  36  }
  37  
  38  .pholio-mock-thumb-grid-current {
  39    border-color: {$sky};
  40  }
  41  
  42  .pholio-mock-thumb-grid-item-obsolete {
  43    opacity: 0.5;
  44  }
  45  
  46  .pholio-mock-thumb-grid-image {
  47    margin: auto;
  48    position: relative;
  49  }
  50  
  51  .pholio-mock-image {
  52    margin: auto;
  53    cursor: crosshair;
  54  }
  55  
  56  .pholio-mock-image-viewport {
  57    position: relative;
  58    margin: auto;
  59    display: inline-block;
  60  }
  61  
  62  .pholio-image-loading img {
  63    opacity: 0.50;
  64  }
  65  
  66  
  67  .pholio-image-info-item {
  68    padding: 0 8px;
  69    margin: 8px 0;
  70  }
  71  
  72  .pholio-visible-size {
  73    color: {$sky};
  74    font-weight: bold;
  75  }
  76  
  77  .pholio-device-lightbox {
  78    position: absolute;
  79    overflow: auto;
  80  }
  81  
  82  .pholio-device-lightbox img {
  83    display: block;
  84    margin: auto;
  85  }
  86  
  87  .pholio-device-lightbox-loading {
  88    background: url(/rsrc/image/darkload.gif) no-repeat center;
  89  }
  90  
  91  .device-desktop .pholio-transaction-inline-image-anchor:hover .phui-image-mask {
  92    border-color: {$pink};
  93  }
  94  
  95  .pholio-transaction-inline-comment {
  96    display: table-row;
  97  }
  98  
  99  .pholio-transaction-inline-comment img {
 100    display: table-cell;
 101    padding-bottom: 2px;
 102  }
 103  
 104  .pholio-transaction-inline-comment .transaction-comment {
 105    display: table-cell;
 106    vertical-align: top;
 107    padding-left: 8px;
 108    padding-top: 4px;
 109  }
 110  
 111  .pholio-mock-reticle {
 112    position: absolute;
 113    display: none;
 114    box-sizing: border-box;
 115    border: 4px solid transparent;
 116  }
 117  
 118  .pholio-mock-reticle-selection {
 119    border: 1px solid rgba(0,0,0,.5);
 120    box-shadow: 0 0 0 4px rgba(255,255,255,.5);
 121  }
 122  
 123  .pholio-mock-comment-icon {
 124    opacity: 1;
 125    -webkit-transition: all .3s ease;
 126    -moz-transition: all .3s ease;
 127    -ms-transition: all .3s ease;
 128    -o-transition: all .3s ease;
 129    transition: all .3s ease;
 130  }
 131  
 132  .pholio-mock-reticle-draft .pholio-mock-comment-icon {
 133    font-size: 2.2em;
 134    color: {$yellow};
 135    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
 136    -webkit-text-stroke: 1px white;
 137  }
 138  
 139  .pholio-mock-reticle-final .pholio-mock-comment-icon {
 140    font-size: 2.2em;
 141    color: {$pink};
 142    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
 143    -webkit-text-stroke: 1px white;
 144  }
 145  
 146  .pholio-mock-reticle-draft:hover,
 147  .pholio-mock-reticle-final:hover {
 148    border: 1px solid rgba(0,0,0,.5);
 149    box-shadow: 0 0 0 4px rgba(255,255,255,.5);
 150    cursor: pointer;
 151  }
 152  
 153  .device-desktop .pholio-mock-reticle-draft:hover .pholio-mock-comment-icon,
 154  .device-desktop .pholio-mock-reticle-final:hover .pholio-mock-comment-icon {
 155    opacity: 0;
 156    -webkit-transition: all .3s ease;
 157    -moz-transition: all .3s ease;
 158    -ms-transition: all .3s ease;
 159    -o-transition: all .3s ease;
 160    transition: all .3s ease;
 161  }
 162  
 163  .device-desktop .mock-has-cursor .pholio-mock-reticle {
 164    display: block;
 165  }
 166  
 167  .pholio-mock-image-header {
 168    position: absolute;
 169    top: 0;
 170    right: 0;
 171    font-size: 14px;
 172    padding: 4px 8px;
 173    background: rgba(255,255,255,.6);
 174    color: {$greytext};
 175  }
 176  
 177  .pholio-image-title {
 178    font-weight: bold;
 179    color: {$bluetext};
 180    font-size: 15px;
 181  }
 182  
 183  .mock-image-description {
 184    background: #fff;
 185    border-top: 1px solid {$thinblueborder};
 186    text-align: left;
 187  }
 188  
 189  .pholio-mock-thumb-grid-comment-count {
 190    position: absolute;
 191    top: -4px;
 192    right: -4px;
 193    width: 20px;
 194    height: 17px;
 195    font-weight: bold;
 196    text-align: center;
 197    line-height: 16px;
 198    border-radius: 2px;
 199    color: #fff;
 200    text-decoration: none;
 201    background: {$pink};
 202  }
 203  
 204  .pholio-image-button {
 205    float: right;
 206    margin-left: 2px;
 207  }
 208  
 209  .pholio-image-button-link {
 210    width: 56px;
 211    height: 56px;
 212    overflow: hidden;
 213    display: block;
 214    position: relative;
 215    background: {$lightgreybackground};
 216    text-align: center;
 217    line-height: 56px;
 218    font-size: 24px;
 219  }
 220  
 221  button.pholio-image-button-link,
 222  button.pholio-image-button-link:active {
 223    /* Remove button styles. */
 224    box-shadow: none;
 225    text-shadow: none;
 226    border: none;
 227    border-radius: 0;
 228  }
 229  
 230  .pholio-image-button-active .pholio-image-button-link .phui-icon-view {
 231    color: {$lightgreytext};
 232  }
 233  
 234  .pholio-image-button-disabled .pholio-image-button-link .phui-icon-view {
 235    color: {$darkgreybackground};
 236  }
 237  
 238  .device-desktop .pholio-image-button-active .pholio-image-button-link:hover {
 239    background: {$darkgreybackground};
 240  }
 241  
 242  .device-desktop .pholio-image-button-active
 243    .pholio-image-button-link:hover .phui-icon-view {
 244    color: {$sky};
 245  }
 246  
 247  .pholio-image-description {
 248    padding: 12px 8px;
 249    border-top: 1px solid {$thinblueborder};
 250  }
 251  
 252  .pholio-image-revision {
 253    color: {$bluetext};
 254  }
 255  
 256  .pholio-history-header {
 257    vertical-align: middle;
 258    color: {$lightbluetext};
 259    font-weight: bold;
 260    padding-right: 8px;
 261    -webkit-font-smoothing: antialiased;
 262    white-space: nowrap;
 263  }