[Summary view] [Print] [Text view]

   1  /**
   2   * @provides pholio-edit-css
   3   */
   4  
   5  .pholio-uploaded-image {
   6    position: relative;
   7    overflow: hidden;
   8  
   9    /* When we activate the image control to show that we're going to replace
  10       it on drag-and-drop, this gives us a border which looks good without
  11       crowding anything or leaving elements misaligned. */
  12    border: 1px solid transparent;
  13    margin: -4px -4px 12px;
  14    padding: 4px;
  15  }
  16  
  17  .pholio-thumb-box {
  18    margin: 2px 0;
  19    float: left;
  20    background: #f7f7f7;
  21    border: 1px solid #D5D9DF;
  22    border-radius: 3px;
  23    width: 296px;
  24    overflow: hidden;
  25  }
  26  
  27  .device .pholio-thumb-box {
  28    width: 100%;
  29  }
  30  
  31  .device-desktop .pholio-thumb-box {
  32    /* Provide room for the draggable grip. */
  33    margin-left: 12px;
  34  }
  35  
  36  .device .pholio-thumb-box {
  37    float: none;
  38    margin: 0 auto;
  39  }
  40  
  41  .pholio-thumb-frame {
  42    background-color: #ffffff;
  43    background-position: center center;
  44    background-repeat: no-repeat;
  45    background-size: 280px 210px;
  46    width: 280px;
  47    height: 210px;
  48    padding: 8px;
  49  }
  50  
  51  .device .pholio-thumb-frame {
  52    width: 100%;
  53  }
  54  
  55  .pholio-thumb-title {
  56    padding: 4px 8px;
  57    font-weight: bold;
  58    color: {$darkgreytext};
  59    overflow: hidden;
  60    border-bottom: 1px solid #d7d7d7;
  61  }
  62  
  63  .pholio-thumb-name {
  64    line-height: 24px;
  65    margin-right: 48px;
  66    white-space: nowrap;
  67    overflow: hidden;
  68    text-overflow: ellipsis;
  69  }
  70  
  71  .pholio-thumb-title .button {
  72    float: right;
  73  }
  74  
  75  .pholio-image-details {
  76    margin-left: 324px;
  77  }
  78  
  79  .device .pholio-image-details {
  80    margin-left: 0;
  81    clear: both;
  82  }
  83  
  84  .pholio-uploaded-image .pholio-image-details .aphront-form-control {
  85    padding: 0;
  86    margin: 0 0 8px 0;
  87    overflow: hidden;
  88  }
  89  
  90  .pholio-uploaded-image .pholio-image-details .aphront-form-label,
  91  .pholio-uploaded-image .pholio-image-details .aphront-form-input {
  92    display: block;
  93    width: auto;
  94    text-align: left;
  95    padding: 0;
  96    margin: 0;
  97    clear: both;
  98  }
  99  
 100  .pholio-uploaded-image .pholio-image-details .aphront-form-label {
 101    margin: 0 0 4px 0;
 102  }
 103  
 104  .pholio-edit-drop {
 105    border-width: 1px;
 106    border-style: dashed;
 107    border-color: {$lightgreytext};
 108    text-align: center;
 109    padding: 16px;
 110    color: {$greytext};
 111  }
 112  
 113  .device .pholio-edit-drop {
 114    /* For now, no uploading from devices. */
 115    display: none;
 116  }
 117  
 118  .pholio-uploaded-image.pholio-drop-active,
 119  .pholio-edit-drop.pholio-drop-active {
 120    border-style: solid;
 121    border-color: {$green};
 122    background-color: {$lightgreen};
 123  }
 124  
 125  .pholio-replacing {
 126    opacity: 0.5;
 127    border-color: {$green};
 128    background-color: {$lightgreen};
 129  }
 130  
 131  .pholio-drop-uploading {
 132    padding: 24px;
 133    text-align: center;
 134    border: 1px solid #bbbbbb;
 135    background: #fcfcfc;
 136    color: {$greytext};
 137    margin-bottom: 12px;
 138  }
 139  
 140  .pholio-drop-undo {
 141    padding: 8px;
 142    margin-bottom: 12px;
 143    text-align: center;
 144    color: #333333;
 145    border: 1px solid {$yellow};
 146    background-color: {$lightyellow};
 147  }
 148  
 149  .pholio-drop-undo a {
 150    font-weight: bold;
 151  }
 152  
 153  .pholio-drag-handle {
 154    position: absolute;
 155    height: 100%;
 156    width: 12px;
 157    cursor: move;
 158    background-image: url(/rsrc/image/texture/grip.png);
 159    background-position: center center;
 160    background-repeat: no-repeat;
 161  }
 162  
 163  .device .pholio-drag-handle {
 164    display: none;
 165  }