resources/tools/dash/app/pal/static/less/table.less

   1 body,
   2 html {
   3   height: 100% !important;
   4   padding: 0;
   5   background: #e7ecf7 !important;
   6   font-family: 'Lato', sans-serif;
   7   margin: 0;
   8 }
   9
  10 .dash-template {
  11   h1 {
  12     display: inline-block;
  13     margin: 0;
  14     font-size: 1.5em;
  15   }
  16
  17   .logo {
  18     width: 40px;
  19     margin-right: 20px;
  20
  21     &:hover {
  22       opacity: .7;
  23     }
  24   }
  25
  26   .nav-wrapper a {
  27     display: flex;
  28     align-items: center;
  29   }
  30 }
  31
  32 #dash-container {
  33   width: 1200px;
  34   max-width: 95%;
  35   margin: 50px auto 0;
  36 }
  37
  38 .container {
  39   margin: 90px 30px;
  40   color: #182635;
  41 }
  42
  43 #_dash-app-content {
  44   max-width: 95% !important;
  45   margin: 90px auto !important;
  46   overflow: hidden;
  47 }
  48
  49 nav {
  50   a {
  51     display: flex;
  52     align-items: center;
  53     justify-content: space-between;
  54     color: #59657b;
  55     line-height: 1;
  56     text-decoration: none;
  57     transition: all 0.3s ease-out;
  58
  59     &:hover {
  60       cursor: pointer;
  61       opacity: 0.7;
  62     }
  63
  64     i {
  65       margin-right: 5px;
  66     }
  67   }
  68 }
  69
  70 .dash-spreadsheet-container {
  71   max-width: 100%;
  72   margin: 0 auto 20px !important;
  73   overflow: hidden;
  74   border: 0;
  75   border-radius: 4px;
  76   box-shadow: 0 0 4px #cdd3e2;
  77   font-family: 'Lato', sans-serif;
  78
  79   * {
  80     box-shadow: none !important;
  81     font-family: Lato, sans-serif;
  82   }
  83
  84   th,
  85   tr {
  86     box-shadow: none !important;
  87   }
  88
  89   td:first-of-type,
  90   tr:first-of-type {
  91     width: 55px;
  92   }
  93
  94   td:last-of-type,
  95   tr:last-of-type {
  96     width: 100px;
  97   }
  98
  99   th {
 100     padding: 25px 12px !important;
 101     border-top: 0 !important;
 102     border-right: 0 !important;
 103     border-bottom: 1px solid #e5e7eb !important;
 104     border-left: 0 !important;
 105     background: white !important;
 106     color: #404552;
 107
 108     .column-header--sort {
 109       margin-right: 7px;
 110       transition: all 0.2s ease-out;
 111
 112       &:hover {
 113         color: #9bd2eb !important;
 114       }
 115
 116       svg {
 117         width: 0.5em;
 118       }
 119     }
 120
 121     .sort {
 122       order: 2;
 123       color: #aeaeae !important;
 124       transition: all 0.3s ease-out;
 125
 126       &:hover {
 127         text-decoration: none;
 128         cursor: pointer;
 129         opacity: 0.7;
 130       }
 131     }
 132
 133     & > div {
 134       display: flex;
 135       align-items: center;
 136       width: fit-content;
 137
 138       span:last-of-type {
 139         font-size: 0.8em;
 140         font-weight: 600;
 141         text-transform: uppercase;
 142       }
 143     }
 144   }
 145
 146   td {
 147     padding: 12px !important;
 148     font-size: .95em;
 149     text-align: left !important;
 150
 151     &:first-of-type,
 152     &:last-of-type {
 153       max-width: 50px !important;
 154     }
 155
 156     .dash-cell-value {
 157       display: block !important;
 158       max-width: 500px;
 159       overflow: hidden !important;
 160       font-size: 1.2em;
 161       font-weight: 300;
 162       text-align: left;
 163       text-overflow: ellipsis;
 164       white-space: nowrap;
 165       opacity: .8;
 166     }
 167   }
 168
 169   td[data-dash-column="command"],
 170   .column-1 {
 171     max-width: 200px !important;
 172   }
 173
 174   td[data-dash-column="index"] {
 175     text-align: center !important;
 176
 177     div {
 178       text-align: center !important;
 179     }
 180   }
 181
 182   td[data-dash-column="index"] {
 183     color: #939da4;
 184     font-size: 1.1em;
 185     font-weight: 500;
 186   }
 187
 188   tr:nth-child(even) {
 189     background: #f5f8fc !important;
 190   }
 191 }
 192
 193 table {
 194   tbody {
 195     box-shadow: 0 0 7px #bdbdd2 !important;
 196
 197     tr {
 198       border: 0 !important;
 199
 200       &:nth-child(even) {
 201         background: #e7eefa !important;
 202       }
 203
 204       td {
 205         padding: 12px 10px !important;
 206         overflow: hidden !important;
 207         border: 0 !important;
 208         font-size: 0.65em !important;
 209         line-height: 1.25 !important;
 210         text-align: center !important;
 211       }
 212     }
 213   }
 214 }
 215
 216 .dash-spreadsheet-container .dash-spreadsheet-inner td.focused {
 217   background-color: rgba(154, 212, 255, 0.2) !important;
 218   box-shadow: 0 0 4px #cdd3e2;
 219 }
 220
 221 .dash-spreadsheet-container .dash-spreadsheet-inner td .input-cell-value-shadow {
 222   width: 100%;
 223 }
 224
 225 .dash-spreadsheet-container .dash-spreadsheet-inner td input.dash-cell-value.unfocused {
 226   caret-color: #317ed1 !important;
 227 }
 228
 229 .dash-spreadsheet-inner .input-active {
 230   overflow: visible !important;
 231   color: #829ab2;
 232   text-align: left !important;
 233 }
 234
 235 .dash-spreadsheet-inner input {
 236   &::placeholder {
 237     color: grey;
 238   }
 239 }
 240
 241 #histogram-graph {
 242   margin-bottom: 30px;
 243   padding-bottom: 176px !important;
 244   overflow: hidden;
 245   border-radius: 4px;
 246   background: white;
 247   box-shadow: 0 0 4px #cdd3e2;
 248 }
 249
 250 .main-svg {
 251   overflow: visible !important;
 252 }
 253
 254 header .nav-wrapper {
 255   width: 1200px !important;
 256 }