github.com/munnerz/test-infra@v0.0.0-20190108210205-ce3d181dc989/experiment/tracer/static/style.css (about)

     1  body {
     2      font-family: "Roboto", "Arial", sans-serif;
     3      line-height: 1.4;
     4      background: #f4f4f4;
     5      color: #444;
     6      padding: 0;
     7      margin: 0;
     8      -webkit-font-smoothing: antialiased;
     9      -moz-osx-font-smoothing: grayscale;
    10  }
    11  
    12  header {
    13      background-color: #3f51b5;
    14      color: white;
    15      padding: .1em;
    16      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    17  }
    18  
    19  header h2 {
    20      margin-left: 10px;
    21  }
    22  
    23  header a {
    24      color: inherit !important;
    25  }
    26  
    27  header a.logo {
    28      height: 2.5em;
    29      padding: 0;
    30      margin: 0;
    31      margin-top: .2em;
    32  }
    33  
    34  a, a.current {
    35      text-decoration: none;
    36  }
    37  
    38  .hide {
    39      display: none !important;
    40  }
    41  
    42  #response {
    43      margin-top: 8px;
    44  }
    45  /* search style */
    46  
    47  .search {
    48      width: 100%;
    49      position: relative;
    50      display: flex;
    51      font-weight: 300;
    52      font-size: 40px;
    53      color: #555;
    54  }
    55  
    56  .search-term {
    57      float: left;
    58      width: 100%;
    59      border-radius: 5px;
    60      outline: none;
    61      color: #616161;
    62      flex: 1 0 auto;
    63      padding: 8px 20px;
    64      height: 40px;
    65      border: 0;
    66      box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    67      transition: all .15s ease-in-out;
    68  }
    69  
    70  .search-term:focus{
    71      color: #212121;
    72  }
    73  
    74  .search-btn {
    75      position: absolute;
    76      right: -30px;
    77      top: 10px;
    78      width: 40px;
    79      height: 36px;
    80      border: 0;
    81      background: transparent;
    82      text-align: center;
    83      color: #212121;
    84      border-radius: 5px;
    85      cursor: pointer;
    86      font-size: 20px;
    87  }
    88  
    89  .search-btn:after {
    90      content: '\1F50D';
    91  }
    92  /*Resize the wrap to see the search bar change!*/
    93  .wrapper {
    94      width: 50%;
    95      position: absolute;
    96      top: 300px;
    97      left: 50%;
    98      transform: translate(-50%, -50%);
    99  }
   100  
   101  /* loader spinner */
   102  #loading {
   103      display: inline-block;
   104      position: absolute;
   105      right: 45px;
   106      width: 20px;
   107      height: 20px;
   108      border: 3px solid rgb(62, 81, 181);
   109      border-radius: 50%;
   110      border-top-color: #fff;
   111      animation: spin 1s ease-in-out infinite;
   112      -webkit-animation: spin 1s ease-in-out infinite;
   113  }
   114  
   115  @keyframes spin {
   116      to { -webkit-transform: rotate(360deg); }
   117  }
   118  @-webkit-keyframes spin {
   119      to { -webkit-transform: rotate(360deg); }
   120  }
   121  
   122  #error-message {
   123      font-size: 12px;
   124      color: #D50000;
   125      margin-top: 12px;
   126  }
   127  
   128  /* search style in the header */
   129  
   130  .wrapper.top  {
   131      width: 30%;
   132      position: absolute;
   133      top: 40px;
   134      left: 81%;
   135      transform: translate(-50%, -50%);
   136  }
   137  
   138  .wrapper.top .search-term {
   139      height: 30px;
   140  }
   141  
   142  .wrapper.top .search-btn {
   143      top: 5px;
   144  }
   145  
   146  .wrapper.top #error-message {
   147      color: white;
   148      margin-top: 6px;
   149  }
   150  
   151  /* Table style */
   152  
   153  table {
   154      background: #fff;
   155      border-radius: 2px;
   156      box-shadow: 0 0 4px #e0e0e0;
   157      border-collapse: collapse;
   158      width: 100%;
   159  }
   160  
   161  tr {
   162      border-top: 1px solid #f4f4f4;
   163  }
   164  
   165  td:first-child, th:first-child {
   166      padding-left: 16px;
   167  }
   168  
   169  td:last-child, th:last-child {
   170      padding-right: 16px;
   171  }
   172  
   173  td, th {
   174      text-align: left;
   175      padding: 8px;
   176  }
   177  
   178  th {
   179      color: #333;
   180  }