github.com/thanos-io/thanos@v0.32.5/pkg/ui/react-app/src/thanos/pages/blocks/blocks.module.css (about)

     1  .container {
     2    display: flex;
     3    --top: 72px;
     4    min-height: calc(100vh - var(--top));
     5    position: relative;
     6    z-index: 1;
     7  }
     8  
     9  .grid {
    10    width: 100%;
    11  }
    12  
    13  .sources {
    14    max-height: calc(100vh - 2 * var(--top));
    15    overflow-y: auto;
    16    scrollbar-color: #b1b1b1 transparent;
    17    scrollbar-width: thin;
    18  }
    19  
    20  .sources::-webkit-scrollbar {
    21    width: 8px;
    22  }
    23  
    24  .sources::-webkit-scrollbar-thumb {
    25    background-color: #b1b1b1;
    26    border-radius: 6px;
    27  }
    28  
    29  .blockDetails {
    30    width: 0;
    31    overflow-x: hidden;
    32    overflow-y: auto;
    33    min-width: 0;
    34    max-width: 55vw;
    35    box-sizing: border-box;
    36    transition: all 0.2s ease-in-out;
    37    margin-top: -16px;
    38    margin-right: -15px;
    39  }
    40  
    41  .blockDetails.open {
    42    min-width: 420px;
    43    padding: 2em;
    44    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    45  }
    46  
    47  .detailsTop {
    48    width: 100%;
    49    display: flex;
    50    justify-content: space-between;
    51    align-items: center;
    52    flex-wrap: wrap-reverse;
    53  }
    54  
    55  .header {
    56    margin: 0;
    57    padding: 0;
    58    font-weight: 700;
    59    font-size: 1.1em;
    60  }
    61  
    62  .closeBtn {
    63    border: none;
    64    background: none;
    65    font-size: 2em;
    66    transform: translateY(-10%);
    67  }
    68  
    69  .timeRangeDiv {
    70    box-sizing: border-box;
    71    padding: 0em 3em;
    72    display: flex;
    73    justify-content: space-evenly;
    74    flex-direction: column;
    75    align-items: center;
    76    height: var(--top);
    77  }
    78  
    79  .timeRange {
    80    display: flex;
    81    justify-content: space-between;
    82    align-items: center;
    83    font-size: 0.9em;
    84    width: 100%;
    85  }
    86  
    87  .source {
    88    width: 100%;
    89    display: flex;
    90    align-items: center;
    91  }
    92  
    93  .title {
    94    box-sizing: border-box;
    95    padding: 0 1em;
    96  }
    97  
    98  .title > span {
    99    display: block;
   100    width: 8vw;
   101    margin: 0;
   102    text-align: center;
   103    text-overflow: ellipsis;
   104    overflow: hidden;
   105    box-sizing: border-box;
   106  }
   107  
   108  .rowsContainer {
   109    display: flex;
   110    flex-direction: column;
   111    width: 100%;
   112    box-sizing: border-box;
   113    border-left: solid 3px teal;
   114  }
   115  
   116  .row {
   117    width: 100%;
   118    position: relative;
   119    --block-height: 1.2em;
   120    height: var(--block-height);
   121    box-sizing: content-box;
   122    margin: 0.1em 0;
   123    overflow-x: hidden;
   124  }
   125  
   126  .blockSpan {
   127    position: absolute;
   128    border: none;
   129    height: 100%;
   130    min-width: 0.5%;
   131    padding: 0;
   132    margin: 0;
   133    min-width: 0;
   134    box-sizing: border-box;
   135    mix-blend-mode: multiply;
   136  }
   137  
   138  .blockSpan:hover,
   139  .blockSpan:focus {
   140    outline: none;
   141    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.3) inset;
   142  }
   143  
   144  /*
   145  * block colors
   146  * https://coolors.co/9b5de5-f15bb5-fee440-00bbf9-00f5d4
   147  */
   148  .res-0 {
   149    --level-1: #bd96ee;
   150    --level-2: #9250e2;
   151    --level-3: #7c2cdd;
   152    --level-4: #681fc1;
   153    --level-5: #4c178c;
   154    --level-6: #391169;
   155  }
   156  
   157  .res-300000 {
   158    --level-1: #f15bb5;
   159    --level-2: #ef43aa;
   160    --level-3: #eb1e99;
   161    --level-4: #ce1283;
   162    --level-5: #a90f6b;
   163    --level-6: #830b53;
   164  }
   165  
   166  .res-3600000 {
   167    --level-1: #70dbff;
   168    --level-2: #47d1ff;
   169    --level-3: #1fc7ff;
   170    --level-4: #00b8f5;
   171    --level-5: #0099cc;
   172    --level-6: #007aa3;
   173  }
   174  
   175  .level-1 {
   176    background: var(--level-1);
   177  }
   178  .level-2 {
   179    background: var(--level-2);
   180  }
   181  .level-3 {
   182    background: var(--level-3);
   183  }
   184  .level-4 {
   185    background: var(--level-4);
   186  }
   187  .level-5 {
   188    background: var(--level-5);
   189  }
   190  .level-6 {
   191    background: var(--level-6);
   192  }
   193  
   194  .blockInput {
   195    margin-bottom: 12px;
   196  }
   197  
   198  .blockFilter {
   199    display: flex;
   200    flex-direction: row;
   201    align-items: center;
   202  }