github.com/pdaian/flashboys2@v0.0.0-20190718175736-b101c35361f0/webapp/static/css/main.css (about)

     1  /* frontrun.me specific stuff */
     2  
     3  @font-face {
     4    font-family: 'Potra';
     5    src: url('../fonts/potra.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
     6     url('../fonts/potra.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
     7  }  
     8  
     9  #top {
    10      padding: 20px;
    11      margin-bottom: 20px;
    12  }
    13  
    14  
    15  .proftable {
    16          transform-origin: top left;
    17    zoom: 50 %;
    18    transform: scale(calc(2/3));}
    19  
    20  #header {
    21        display: inline-block;
    22        font-family: 'Potra', Fallback, sans-serif;
    23        font-size: 6em;
    24        vertical-align: middle;
    25        margin-left: 20px;
    26  }
    27  
    28  #logo {
    29        display: inline-block;
    30        vertical-align: middle;
    31        width: 20em;
    32  }
    33  
    34  #content {
    35      padding: 20px;
    36  }
    37  
    38  /* pagination */
    39  .pagination {
    40      display: inline-block;
    41      margin-left: auto;
    42      margin-right: auto;
    43  }
    44  
    45  .pagination a {
    46      color: black;
    47      float: left;
    48      padding: 8px 16px;
    49      text-decoration: none;
    50      border: 1px solid #ddd;
    51  }
    52  
    53  .pagination a.active {
    54      background-color: #4CAF50;
    55      color: white;
    56      border: 1px solid #4CAF50;
    57  }
    58  
    59  .pagination a:hover:not(.active) {background-color: #ddd;}
    60  
    61  .pagination a:first-child {
    62      border-top-left-radius: 5px;
    63      border-bottom-left-radius: 5px;
    64  }
    65  
    66  .pagination a:last-child {
    67      border-top-right-radius: 5px;
    68      border-bottom-right-radius: 5px;
    69  }
    70  
    71  /* alert modal */
    72  
    73  /* The alert message box */
    74  .alert {
    75      margin: 0px 20px 0px 20px;
    76      padding: 20px;
    77      background-color: #eeeeee; /* Red */
    78      color: black;
    79  }
    80  
    81  /* The close button */
    82  .closebtn {
    83      margin-left: 15px;
    84      color: black;
    85      font-weight: bold;
    86      float: right;
    87      font-size: 22px;
    88      line-height: 20px;
    89      cursor: pointer;
    90      transition: 0.3s;
    91  }
    92  
    93  /* When moving the mouse over the close button */
    94  .closebtn:hover {
    95      color: black;
    96  } 
    97  
    98  
    99  /* table boilerplate */
   100  
   101  /*//////////////////////////////////////////////////////////////////
   102  [ FONT ]*/
   103  
   104  
   105  @font-face {
   106    font-family: OpenSans-Regular;
   107    src: url('../fonts/OpenSans/OpenSans-Regular.ttf'); 
   108  }
   109  
   110  
   111  
   112  /*//////////////////////////////////////////////////////////////////
   113  [ RESTYLE TAG ]*/
   114  * {
   115  	margin: 0px; 
   116  	padding: 0px; 
   117  	box-sizing: border-box;
   118  }
   119  
   120  body, html {
   121  	height: 100%;
   122  	font-family: sans-serif;
   123  }
   124  
   125  /* ------------------------------------ */
   126  a {
   127  	margin: 0px;
   128  	transition: all 0.4s;
   129  	-webkit-transition: all 0.4s;
   130    -o-transition: all 0.4s;
   131    -moz-transition: all 0.4s;
   132  }
   133  
   134  a:focus {
   135  	outline: none !important;
   136  }
   137  
   138  a:hover {
   139  	text-decoration: none;
   140  }
   141  
   142  /* ------------------------------------ */
   143  h1,h2,h3,h4,h5,h6 {margin: 0px;}
   144  
   145  p {margin: 0px;}
   146  
   147  ul, li {
   148  	margin: 0px;
   149  	list-style-type: none;
   150  }
   151  
   152  
   153  /* ------------------------------------ */
   154  input {
   155    display: block;
   156  	outline: none;
   157  	border: none !important;
   158  }
   159  
   160  textarea {
   161    display: block;
   162    outline: none;
   163  }
   164  
   165  textarea:focus, input:focus {
   166    border-color: transparent !important;
   167  }
   168  
   169  /* ------------------------------------ */
   170  button {
   171  	outline: none !important;
   172  	border: none;
   173  	background: transparent;
   174  }
   175  
   176  button:hover {
   177  	cursor: pointer;
   178  }
   179  
   180  iframe {
   181  	border: none !important;
   182  }
   183  
   184  
   185  
   186  
   187  /*//////////////////////////////////////////////////////////////////
   188  [ Utiliti ]*/
   189  
   190  
   191  
   192  
   193  
   194  
   195  /*//////////////////////////////////////////////////////////////////
   196  [ Table ]*/
   197  
   198  .limiter {
   199    width: 100%;
   200    margin: 0 auto;
   201  }
   202  
   203  .container-table100 {
   204    display: -webkit-box;
   205    display: -webkit-flex;
   206    display: -moz-box;
   207    display: -ms-flexbox;
   208    display: flex;
   209    align-items: center;
   210    justify-content: center;
   211    flex-wrap: wrap;
   212  }
   213  
   214  .wrap-table100 {
   215    width: 100%;
   216  }
   217  
   218  table {
   219    border-spacing: 1;
   220    border-collapse: collapse;
   221    background: #eeeeee;
   222    border-radius: 10px;
   223    overflow: hidden;
   224    width: 100%;
   225    margin: 0 auto;
   226    position: relative;
   227  }
   228  table * {
   229    position: relative;
   230  }
   231  table td, table th {
   232    padding-left: 8px;
   233  }
   234  table thead tr {
   235    height: 60px;
   236    background: #36304a;
   237  }
   238  table tbody tr {
   239    height: 50px;
   240  }
   241  table tbody tr:last-child {
   242    border: 0;
   243  }
   244  table td, table th {
   245    text-align: left;
   246  }
   247  table td.l, table th.l {
   248    text-align: right;
   249  }
   250  table td.c, table th.c {
   251    text-align: center;
   252  }
   253  table td.r, table th.r {
   254    text-align: center;
   255  }
   256  
   257  
   258  .table100-head th{
   259    font-family: OpenSans-Regular;
   260    font-size: 18px;
   261    color: #fff;
   262    line-height: 1.2;
   263    font-weight: unset;
   264  }
   265  
   266  tbody tr:nth-child(even) {
   267    background-color: #f5f5f5;
   268  }
   269  
   270  tbody tr {
   271    font-family: OpenSans-Regular;
   272    font-size: 15px;
   273    color: #808080;
   274    line-height: 1.2;
   275    font-weight: unset;
   276  }
   277  
   278  tbody tr:hover {
   279    color: #555555;
   280    background-color: #f5f5f5;
   281    cursor: pointer;
   282  }
   283  
   284  .column1 {
   285    padding-left: 40px;
   286    padding-right: 40px;
   287    text-align: left;
   288  }
   289  
   290  .column2 {
   291    width: 300px;
   292    text-align: left;
   293  }
   294  
   295  .column3 {
   296    width: 245px;
   297    text-align: left;
   298  }
   299  
   300  .columnprofit {
   301      text-align: left;
   302      padding-left: 20px;
   303  }
   304  
   305  .column4 {
   306    width: 110px;
   307    padding-left: 30px;
   308    text-align: center;
   309  }
   310  
   311  .column5 {
   312    width: 170px;
   313    text-align: center;
   314  }
   315  
   316  .column6 {
   317    text-align: center;
   318    padding-right: 62px;
   319    padding-left: 30px;
   320  }
   321  
   322  .column7 {
   323  }
   324  
   325  .column8 {
   326    width: 100px;
   327    text-align: right;
   328    padding-right: 40px;
   329  }
   330  
   331  
   332  @media screen and (max-width: 992px) {
   333    table {
   334      display: block;
   335    }
   336    table > *, table tr, table td, table th {
   337      display: block;
   338    }
   339    table thead {
   340      display: none;
   341    }
   342    table tbody tr {
   343      height: auto;
   344      padding: 37px 0;
   345    }
   346    table tbody tr td {
   347      padding-left: 40% !important;
   348      margin-bottom: 24px;
   349    }
   350    table tbody tr td:last-child {
   351      margin-bottom: 0;
   352    }
   353    table tbody tr td:before {
   354      font-family: OpenSans-Regular;
   355      font-size: 14px;
   356      color: #999999;
   357      line-height: 1.2;
   358      font-weight: unset;
   359      position: absolute;
   360      width: 40%;
   361      left: 30px;
   362      top: 0;
   363    }
   364    table tbody tr td:nth-child(1):before {
   365      content: "Date";
   366    }
   367    table tbody tr td:nth-child(2):before {
   368      content: "Order ID";
   369    }
   370    table tbody tr td:nth-child(3):before {
   371      content: "Name";
   372    }
   373    table tbody tr td:nth-child(4):before {
   374      content: "Price";
   375    }
   376    table tbody tr td:nth-child(5):before {
   377      content: "Quantity";
   378    }
   379    table tbody tr td:nth-child(6):before {
   380      content: "Total";
   381    }
   382  
   383    .column4,
   384    .column5,
   385    .column6 {
   386      text-align: left;
   387    }
   388  
   389    .column4,
   390    .column5,
   391    .column6,
   392    .column1,
   393    .column2,
   394    .column3 {
   395      width: 100%;
   396    }
   397  
   398    tbody tr {
   399      font-size: 14px;
   400    }
   401  }
   402  
   403  @media (max-width: 576px) {
   404    .container-table100 {
   405      padding-left: 15px;
   406      padding-right: 15px;
   407    }
   408  }