[Summary view] [Print] [Text view]

   1  /**
   2   * @provides aphront-table-view-css
   3   */
   4  
   5  .device-phone .aphront-table-wrap,
   6  .device-tablet .aphront-table-wrap {
   7    overflow-x: auto;
   8  }
   9  
  10  .aphront-table-view {
  11    width: 100%;
  12    border-collapse:  collapse;
  13    background: #fff;
  14    border: 1px solid {$lightblueborder};
  15    border-bottom: 1px solid {$blueborder};
  16  }
  17  
  18  .aphront-table-view tr.alt {
  19    background: {$lightgreybackground};
  20  }
  21  
  22  .aphront-table-view th {
  23    font-weight: bold;
  24    font-size: 13px;
  25    white-space: nowrap;
  26    color: {$bluetext};
  27    text-shadow: 0 1px 0 white;
  28    font-weight: bold;
  29    border-bottom: 1px solid {$thinblueborder};
  30    background-color: {$lightbluebackground};
  31  }
  32  
  33  th.aphront-table-view-sortable-selected {
  34    background-color: {$greybackground};
  35  }
  36  
  37  .aphront-table-view th a,
  38  .aphront-table-view th a:hover,
  39  .aphront-table-view th a:link {
  40    color: {$bluetext};
  41    text-shadow: 0 1px 0 white;
  42    display: block;
  43    text-decoration: none;
  44  }
  45  
  46  .aphront-table-view th a:hover {
  47    text-decoration: underline;
  48    color: {$darkbluetext};
  49  }
  50  
  51  .aphront-table-view td.header {
  52    padding: 4px 8px;
  53    white-space: nowrap;
  54    text-align: right;
  55    color: {$bluetext};
  56    font-weight: bold;
  57  }
  58  
  59  .aphront-table-view td {
  60    white-space: nowrap;
  61    vertical-align: middle;
  62  }
  63  
  64  .aphront-table-down-sort {
  65    display: inline-block;
  66    margin-top: 5px;
  67    width: 0;
  68    height: 0;
  69    vertical-align: top;
  70    border-top: 4px solid {$bluetext};
  71    border-right: 4px solid transparent;
  72    border-left: 4px solid transparent;
  73    content: "";
  74  }
  75  
  76  .aphront-table-up-sort {
  77    display: inline-block;
  78    margin-top: 5px;
  79    width: 0;
  80    height: 0;
  81    vertical-align: top;
  82    border-bottom: 4px solid {$bluetext};
  83    border-right: 4px solid transparent;
  84    border-left: 4px solid transparent;
  85    content: "";
  86  }
  87  
  88  /* - Padding -------------------------------------------------------------------
  89  
  90    On desktops, we have more horizontal space and use it to space columns out.
  91  
  92    On devices, we make each row slightly taller to create a larger hit target
  93    for links.
  94  
  95  */
  96  
  97  .aphront-table-view th {
  98    padding: 8px 10px;
  99    font-size: 13px;
 100  }
 101  
 102  .aphront-table-view td {
 103    padding: 6px 10px;
 104    font-size: 12px;
 105  }
 106  
 107  .device-tablet .aphront-table-view td,
 108  .device-phone .aphront-table-view td {
 109    padding: 6px;
 110  }
 111  
 112  .device-tablet .aphront-table-view td + td,
 113  .device-phone .aphront-table-view td + td {
 114    padding-left: 0px;
 115  }
 116  
 117  .device-tablet .aphront-table-view th,
 118  .device-phone .aphront-table-view th {
 119    padding: 6px;
 120    overflow: hidden;
 121  }
 122  
 123  .device-tablet .aphront-table-view th + th,
 124  .device-phone .aphront-table-view th + th {
 125    padding-left: 0px;
 126  }
 127  
 128  .aphront-table-view td.sorted-column {
 129    background: {$lightbluebackground};
 130  }
 131  
 132  .aphront-table-view tr.alt td.sorted-column {
 133    background: {$greybackground};
 134  }
 135  
 136  .aphront-table-view td.action {
 137    padding-top: 1px;
 138    padding-bottom: 1px;
 139  }
 140  
 141  .aphront-table-view td.larger {
 142    font-size: 14px;
 143  }
 144  
 145  .aphront-table-view td.pri {
 146    font-weight: bold;
 147    color: {$darkbluetext};
 148  }
 149  
 150  .aphront-table-view td.wide {
 151    white-space: normal;
 152    width: 100%;
 153  }
 154  
 155  .aphront-table-view td.right {
 156    text-align: right;
 157  }
 158  
 159  .aphront-table-view td.mono {
 160    font-family: "Monaco", monospace;
 161    font-size: 11px;
 162  }
 163  
 164  .aphront-table-view td.n {
 165    font-family: "Monaco", monospace;
 166    font-size: 11px;
 167    text-align: right;
 168  }
 169  
 170  .aphront-table-view td.wrap {
 171    white-space:      normal;
 172  }
 173  
 174  .aphront-table-view td.prewrap {
 175    font-family: "Monaco", monospace;
 176    font-size: 11px;
 177    white-space: pre-wrap;
 178  }
 179  
 180  .aphront-table-view td.narrow {
 181    width: 1px;
 182  }
 183  
 184  .aphront-table-view td.icon, .aphront-table-view th.icon {
 185    width: 1px;
 186    padding: 0px;
 187  }
 188  
 189  div.single-display-line-bounds {
 190    width: 100%;
 191    position: relative;
 192    overflow: hidden;
 193  }
 194  
 195  span.single-display-line-content {
 196    white-space: pre;
 197    position: absolute;
 198  }
 199  
 200  .device-phone span.single-display-line-content {
 201    white-space: nowrap;
 202    position: static;
 203  }
 204  
 205  .aphront-table-view tr.highlighted {
 206    background: #fcf8e2;
 207  }
 208  
 209  .aphront-table-view tr.alt-highlighted {
 210    background: #fcf2bb;
 211  }
 212  
 213  .aphront-table-view tr.no-data td {
 214    padding: 12px;
 215    text-align: center;
 216    color: {$lightgreytext};
 217    font-style: italic;
 218  }
 219  
 220  .aphront-table-view td.thumb img {
 221    max-width: 64px;
 222    max-height: 64px;
 223  }
 224  
 225  .aphront-table-view td.threads {
 226    font-family: monospace;
 227    white-space: pre;
 228    padding: 0 0 0 8px;
 229  }
 230  
 231  .aphront-table-view td.threads canvas {
 232    display: block;
 233  }
 234  
 235  .aphront-table-view td.radio {
 236    text-align: center;
 237    padding: 2px 4px 0px;
 238  }
 239  
 240  .aphront-table-view th.center,
 241  .aphront-table-view td.center {
 242    text-align: center;
 243  }
 244  
 245  .device .aphront-table-view td + td.center,
 246  .device .aphront-table-view th + th.center {
 247    padding-left: 3px;
 248    padding-right: 3px;
 249  }
 250  
 251  .device-desktop .aphront-table-view-device {
 252    display: none;
 253  }
 254  
 255  .device-tablet .aphront-table-view-nodevice,
 256  .device-phone .aphront-table-view-nodevice {
 257    display: none;
 258  }
 259  
 260  .aphront-table-view-device-ready {
 261    width: 99%;
 262    margin: 8px auto;
 263  }
 264  
 265  .aphront-table-view td.link {
 266    padding: 0;
 267  }
 268  
 269  .aphront-table-view td.link a {
 270    display: block;
 271    padding: 6px 8px;
 272    font-weight: bold;
 273  }
 274  
 275  .phui-object-box .aphront-table-view {
 276    border: none;
 277  }