github.com/cryptohub-digital/blockbook-fork@v0.0.0-20230713133354-673c927af7f1/static/css/main.css (about)

     1  @import "TTHoves/TTHoves.css";
     2  
     3  * {
     4      margin: 0;
     5      padding: 0;
     6      outline: none;
     7      font-family: "TT Hoves", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
     8  }
     9  
    10  html,
    11  body {
    12      height: 100%;
    13  }
    14  
    15  body {
    16      min-height: 100%;
    17      margin: 0;
    18      background: linear-gradient(to bottom, #f6f6f6 360px, #e5e5e5 0), #e5e5e5;
    19      background-repeat: no-repeat;
    20  }
    21  
    22  a {
    23      color: #00854d;
    24      text-decoration: none;
    25  }
    26  
    27  a:hover {
    28      color: #00854d;
    29      text-decoration: underline;
    30  }
    31  
    32  select {
    33      border-radius: 0.5rem;
    34      padding-left: 0.5rem;
    35      border: 1px solid #ced4da;
    36      color: var(--bs-body-color);
    37      min-height: 45px;
    38  }
    39  
    40  #header {
    41      position: fixed;
    42      top: 0;
    43      left: 0;
    44      width: 100%;
    45      margin: 0;
    46      padding-bottom: 0;
    47      padding-top: 0;
    48      background-color: white;
    49      border-bottom: 1px solid #f6f6f6;
    50      z-index: 10;
    51  }
    52  
    53  #header a {
    54      color: var(--bs-navbar-brand-color);
    55  }
    56  
    57  #header a:hover {
    58      color: var(--bs-navbar-brand-hover-color);
    59  }
    60  
    61  #header .navbar {
    62      --bs-navbar-padding-y: 0.7rem;
    63  }
    64  
    65  #header .form-control-lg {
    66      font-size: 1rem;
    67      padding: 0.75rem 1rem;
    68  }
    69  
    70  #header .container {
    71      min-height: 50px;
    72  }
    73  
    74  #header .btn.dropdown-toggle {
    75      padding-right: 0;
    76  }
    77  
    78  #header .dropdown-menu {
    79      --bs-dropdown-min-width: 13rem;
    80  }
    81  
    82  #header .dropdown-menu[data-bs-popper] {
    83      left: initial;
    84      right: 0;
    85  }
    86  
    87  #header .dropdown-menu.show {
    88      display: flex;
    89  }
    90  
    91  .form-control:focus {
    92      outline: 0;
    93      box-shadow: none;
    94      border-color: #00854d;
    95  }
    96  
    97  .base-value {
    98      color: #757575 !important;
    99      padding-left: 0.5rem;
   100      font-weight: normal;
   101  }
   102  
   103  .badge {
   104      vertical-align: middle;
   105      text-transform: uppercase;
   106      letter-spacing: 0.15em;
   107      --bs-badge-padding-x: 0.8rem;
   108      --bs-badge-font-weight: normal;
   109      --bs-badge-border-radius: 0.6rem;
   110  }
   111  
   112  .bg-secondary {
   113      background-color: #757575 !important;
   114  }
   115  
   116  .accordion {
   117      --bs-accordion-border-radius: 10px;
   118      --bs-accordion-inner-border-radius: calc(10px - 1px);
   119      --bs-accordion-color: var(--bs-body-color);
   120      --bs-accordion-active-color: var(--bs-body-color);
   121      --bs-accordion-active-bg: white;
   122      --bs-accordion-btn-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
   123  }
   124  
   125  .accordion-button:focus {
   126      outline: 0;
   127      box-shadow: none;
   128  }
   129  
   130  .accordion-body {
   131      letter-spacing: -0.01em;
   132  }
   133  
   134  .bb-group {
   135      border: 0.6rem solid #f6f6f6;
   136      background-color: #f6f6f6;
   137      border-radius: 0.5rem;
   138      position: relative;
   139      display: inline-flex;
   140      vertical-align: middle;
   141  }
   142  
   143  .bb-group>.btn {
   144      --bs-btn-padding-x: 0.5rem;
   145      --bs-btn-padding-y: 0.22rem;
   146      --bs-btn-border-radius: 0.3rem;
   147      --bs-btn-border-width: 0;
   148      color: #545454;
   149  }
   150  
   151  .bb-group>.btn-check:checked+.btn,
   152  .bb-group .btn.active {
   153      color: black;
   154      font-weight: bold;
   155      background-color: white;
   156  }
   157  
   158  .paging {
   159      display: flex;
   160  }
   161  
   162  .paging .bb-group>.btn {
   163      min-width: 2rem;
   164      margin-left: 0.1rem;
   165      margin-right: 0.1rem;
   166  }
   167  
   168  .paging .bb-group>.btn:hover {
   169      background-color: white;
   170  }
   171  
   172  .paging a {
   173      text-decoration: none;
   174  }
   175  
   176  .btn-paging {
   177      --bs-btn-color: #757575;
   178      --bs-btn-border-color: #e2e2e2;
   179      --bs-btn-hover-color: black;
   180      --bs-btn-hover-bg: #f6f6f6;
   181      --bs-btn-hover-border-color: #e2e2e2;
   182      --bs-btn-focus-shadow-rgb: 108, 117, 125;
   183      --bs-btn-active-color: #fff;
   184      --bs-btn-active-bg: #e2e2e2;
   185      --bs-btn-active-border-color: #e2e2e2;
   186      --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   187      --bs-gradient: none;
   188      --bs-btn-padding-y: 0.75rem;
   189      --bs-btn-padding-x: 1.1rem;
   190      --bs-btn-border-radius: 0.5rem;
   191      --bs-btn-font-weight: bold;
   192      background-color: #f6f6f6;
   193  }
   194  
   195  span.btn-paging {
   196      cursor: initial;
   197  }
   198  
   199  span.btn-paging:hover {
   200      color: #757575;
   201  }
   202  
   203  .paging-group {
   204      border: 1px solid #e2e2e2;
   205      border-radius: 0.5rem;
   206  }
   207  
   208  .paging-group>.bb-group {
   209      border: 0.53rem solid #f6f6f6;
   210  }
   211  
   212  #wrap {
   213      min-height: 100%;
   214      height: auto;
   215      padding: 112px 0 75px 0;
   216      margin: 0 auto -56px;
   217  }
   218  
   219  #footer {
   220      background-color: black;
   221      color: #757575;
   222      height: 56px;
   223      overflow: hidden;
   224  }
   225  
   226  .navbar-form {
   227      width: 60%;
   228  }
   229  
   230  .navbar-form button {
   231      margin-left: -50px;
   232      position: relative;
   233  }
   234  
   235  .search-icon {
   236      width: 16px;
   237      height: 16px;
   238      position: absolute;
   239      top: 16px;
   240      background-size: cover;
   241      background-image: url("data:image/svg+xml, %3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.24976 12.5C10.1493 12.5 12.4998 10.1495 12.4998 7.25C12.4998 4.35051 10.1493 2 7.24976 2C4.35026 2 1.99976 4.35051 1.99976 7.25C1.99976 10.1495 4.35026 12.5 7.24976 12.5Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M10.962 10.9625L13.9996 14.0001' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
   242  }
   243  
   244  .navbar-form ::placeholder {
   245      color: #e2e2e2;
   246  }
   247  
   248  .ellipsis {
   249      overflow: hidden;
   250      text-overflow: ellipsis;
   251      white-space: nowrap;
   252  }
   253  
   254  .data-table {
   255      table-layout: fixed;
   256      overflow-wrap: anywhere;
   257      margin-left: 8px;
   258      margin-top: 2rem;
   259      margin-bottom: 2rem;
   260      width: calc(100% - 16px);
   261  }
   262  
   263  .data-table thead {
   264      padding-bottom: 20px;
   265  }
   266  
   267  .table.data-table> :not(caption)>*>* {
   268      padding: 0.8rem 0.8rem;
   269      background-color: var(--bs-table-bg);
   270      border-bottom-width: 1px;
   271      box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
   272  }
   273  
   274  .table.data-table>thead>*>* {
   275      padding-bottom: 1.5rem;
   276  }
   277  
   278  .table.data-table>*>*:last-child>* {
   279      border-bottom: none;
   280  }
   281  
   282  .data-table thead,
   283  .data-table thead tr,
   284  .data-table thead th {
   285      color: #757575;
   286      border: none;
   287      font-weight: normal;
   288  }
   289  
   290  .data-table tbody th {
   291      color: #757575;
   292      font-weight: normal;
   293  }
   294  
   295  .data-table tbody {
   296      background: white;
   297      border-radius: 8px;
   298      box-shadow: 0 0 0 8px white;
   299  }
   300  
   301  .data-table h3,
   302  .data-table h5,
   303  .data-table h6 {
   304      margin-bottom: 0;
   305  }
   306  
   307  .data-table h3,
   308  .data-table h5 {
   309      color: var(--bs-body-color);
   310  }
   311  
   312  .accordion .table.data-table>thead>*>* {
   313      padding-bottom: 0;
   314  }
   315  
   316  .info-table tbody {
   317      display: inline-table;
   318      width: 100%;
   319  }
   320  
   321  .info-table td {
   322      font-weight: bold;
   323  }
   324  
   325  .info-table tr>td:first-child {
   326      font-weight: normal;
   327      color: #757575;
   328  }
   329  
   330  .ns:before {
   331      content: " ";
   332  }
   333  
   334  .nc:before {
   335      content: ",";
   336  }
   337  
   338  .trezor-logo {
   339      width: 128px;
   340      height: 32px;
   341      position: absolute;
   342      top: 16px;
   343      background-size: cover;
   344      background-image: url("data:image/svg+xml,%3Csvg style='width: 128px%3B' version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 163.7 41.9' space='preserve'%3E%3Cpolygon points='101.1 12.8 118.2 12.8 118.2 17.3 108.9 29.9 118.2 29.9 118.2 35.2 101.1 35.2 101.1 30.7 110.4 18.1 101.1 18.1'%3E%3C/polygon%3E%3Cpath d='M158.8 26.9c2.1-0.8 4.3-2.9 4.3-6.6c0-4.5-3.1-7.4-7.7-7.4h-10.5v22.3h5.8v-7.5h2.2l4.1 7.5h6.7L158.8 26.9z M154.7 22.5h-4V18h4c1.5 0 2.5 0.9 2.5 2.2C157.2 21.6 156.2 22.5 154.7 22.5z'%3E%3C/path%3E%3Cpath d='M130.8 12.5c-6.8 0-11.6 4.9-11.6 11.5s4.9 11.5 11.6 11.5s11.7-4.9 11.7-11.5S137.6 12.5 130.8 12.5z M130.8 30.3c-3.4 0-5.7-2.6-5.7-6.3c0-3.8 2.3-6.3 5.7-6.3c3.4 0 5.8 2.6 5.8 6.3C136.6 27.7 134.2 30.3 130.8 30.3z'%3E%3C/path%3E%3Cpolygon points='82.1 12.8 98.3 12.8 98.3 18 87.9 18 87.9 21.3 98 21.3 98 26.4 87.9 26.4 87.9 30 98.3 30 98.3 35.2 82.1 35.2'%3E%3C/polygon%3E%3Cpath d='M24.6 9.7C24.6 4.4 20 0 14.4 0S4.2 4.4 4.2 9.7v3.1H0v22.3h0l14.4 6.7l14.4-6.7h0V12.9h-4.2V9.7z M9.4 9.7c0-2.5 2.2-4.5 5-4.5s5 2 5 4.5v3.1H9.4V9.7z M23 31.5l-8.6 4l-8.6-4V18.1H23V31.5z'%3E%3C/path%3E%3Cpath d='M79.4 20.3c0-4.5-3.1-7.4-7.7-7.4H61.2v22.3H67v-7.5h2.2l4.1 7.5H80l-4.9-8.3C77.2 26.1 79.4 24 79.4 20.3z M71 22.5h-4V18h4c1.5 0 2.5 0.9 2.5 2.2C73.5 21.6 72.5 22.5 71 22.5z'%3E%3C/path%3E%3Cpolygon points='40.5 12.8 58.6 12.8 58.6 18.1 52.4 18.1 52.4 35.2 46.6 35.2 46.6 18.1 40.5 18.1'%3E%3C/polygon%3E%3C/svg%3E");
   345  }
   346  
   347  .copyable::before,
   348  .copied::before {
   349      width: 18px;
   350      height: 16px;
   351      margin: 3px -18px;
   352      content: "";
   353      position: absolute;
   354      background-size: cover;
   355  }
   356  
   357  .copyable::before {
   358      display: none;
   359      cursor: copy;
   360      background-image: url("data:image/svg+xml,%3Csvg width='18' height='16' viewBox='0 0 18 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 10.4996H13.5V2.49963H5.5V5.49963' stroke='%2300854D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.4998 5.49976H2.49976V13.4998H10.4998V5.49976Z' stroke='%2300854D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   361  }
   362  
   363  .copyable:hover::before {
   364      display: inline-block;
   365  }
   366  
   367  .copied::before {
   368      transition: all 0.4s ease;
   369      transform: scale(1.2);
   370      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' viewBox='-30 -30 330 330'%3E%3Cpath d='M 30,180 90,240 240,30' style='stroke:%2300854D; stroke-width:32; fill:none'/%3E%3C/svg%3E");
   371  }
   372  
   373  .h-data {
   374      letter-spacing: 0.12em;
   375      font-weight: normal !important;
   376  }
   377  
   378  .tx-detail {
   379      background: #f6f6f6;
   380      color: #757575;
   381      border-radius: 10px;
   382      box-shadow: 0 0 0 10px white;
   383      width: calc(100% - 20px);
   384      margin-left: 10px;
   385      margin-top: 3rem;
   386      overflow-wrap: break-word;
   387  }
   388  
   389  .tx-detail:first-child {
   390      margin-top: 1rem;
   391  }
   392  
   393  .tx-detail:last-child {
   394      margin-bottom: 2rem;
   395  }
   396  
   397  .tx-detail span.ellipsis,
   398  .tx-detail a.ellipsis {
   399      display: block;
   400      float: left;
   401      max-width: 100%;
   402  }
   403  
   404  .tx-detail>.head,
   405  .tx-detail>.footer {
   406      padding: 1.5rem;
   407      --bs-gutter-x: 0;
   408  }
   409  
   410  .tx-detail>.head {
   411      border-radius: 10px 10px 0 0;
   412  }
   413  
   414  .tx-detail .txid {
   415      font-size: 106%;
   416      letter-spacing: -0.01em;
   417  }
   418  
   419  .tx-detail>.body {
   420      padding: 0 1.5rem;
   421      --bs-gutter-x: 0;
   422      letter-spacing: -0.01em;
   423  }
   424  
   425  
   426  .tx-detail>.subhead {
   427      padding: 1.5rem 1.5rem 0.4rem 1.5rem;
   428      --bs-gutter-x: 0;
   429      letter-spacing: 0.1em;
   430      text-transform: uppercase;
   431      color: var(--bs-body-color);
   432  }
   433  
   434  .tx-detail>.subhead-2 {
   435      padding: 0.3rem 1.5rem 0 1.5rem;
   436      --bs-gutter-x: 0;
   437      font-size: .875em;
   438      color: var(--bs-body-color);
   439  }
   440  
   441  .tx-in .col-12,
   442  .tx-out .col-12,
   443  .tx-addr .col-12 {
   444      background-color: white;
   445      padding: 1.2rem 1.3rem;
   446      border-bottom: 1px solid #f6f6f6;
   447  }
   448  
   449  .amt-out {
   450      padding: 1.2rem 0 1.2rem 1rem;
   451      text-align: right;
   452      overflow-wrap: break-word;
   453  }
   454  
   455  .tx-in .col-12:last-child,
   456  .tx-out .col-12:last-child {
   457      border-bottom: none;
   458  }
   459  
   460  .tx-own {
   461      background-color: #fff9e3 !important;
   462  }
   463  
   464  .tx-amt {
   465      float: right !important;
   466  }
   467  
   468  .spent {
   469      color: #dc3545 !important;
   470  }
   471  
   472  .unspent {
   473      color: #28a745 !important;
   474  }
   475  
   476  .outpoint {
   477      color: #757575 !important;
   478  }
   479  
   480  .spent,
   481  .unspent,
   482  .outpoint {
   483      display: inline-block;
   484      text-align: right;
   485      min-width: 18px;
   486      text-decoration: none !important;
   487  }
   488  
   489  .octicon {
   490      height: 24px;
   491      width: 24px;
   492      margin-left: -12px;
   493      margin-top: 19px;
   494      position: absolute;
   495      background-size: cover;
   496      background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 4.5L16.5 12L9 19.5' stroke='%23AFAFAF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
   497  }
   498  
   499  .txvalue {
   500      color: var(--bs-body-color);
   501      font-weight: bold;
   502  }
   503  
   504  .txerror {
   505      color: #c51f13;
   506  }
   507  
   508  .txerror a,
   509  .txerror .txvalue {
   510      color: #c51f13;
   511  }
   512  
   513  .txerror .copyable::before,
   514  .txerror .copied::before {
   515      /* turn svg stroke to red */
   516      filter: invert(86%) sepia(43%) saturate(732%) hue-rotate(367deg) brightness(84%);
   517  }
   518  
   519  .tx-amt .amt:hover,
   520  .tx-amt.amt:hover,
   521  .amt-out>.amt:hover {
   522      color: var(--bs-body-color);
   523  }
   524  
   525  .prim-amt {
   526      display: initial;
   527  }
   528  
   529  .sec-amt {
   530      display: none;
   531  }
   532  
   533  .csec-amt {
   534      display: none;
   535  }
   536  
   537  .base-amt {
   538      display: none;
   539  }
   540  
   541  .cbase-amt {
   542      display: none;
   543  }
   544  
   545  .tooltip {
   546      --bs-tooltip-opacity: 1;
   547      --bs-tooltip-max-width: 380px;
   548      --bs-tooltip-bg: #fff;
   549      --bs-tooltip-color: var(--bs-body-color);
   550      --bs-tooltip-padding-x: 1rem;
   551      --bs-tooltip-padding-y: 0.8rem;
   552      filter: drop-shadow(0px 24px 64px rgba(22, 27, 45, 0.25));
   553  }
   554  
   555  .l-tooltip {
   556      text-align: start;
   557      display: inline-block;
   558  }
   559  
   560  .l-tooltip .prim-amt,
   561  .l-tooltip .sec-amt,
   562  .l-tooltip .csec-amt,
   563  .l-tooltip .base-amt,
   564  .l-tooltip .cbase-amt {
   565      display: initial;
   566      float: right;
   567  }
   568  
   569  .l-tooltip .amt-time {
   570      padding-right: 3rem;
   571      float: left;
   572  }
   573  
   574  .amt-dec {
   575      font-size: 95%;
   576  }
   577  
   578  .unconfirmed {
   579      color: white;
   580      background-color: #c51e13;
   581      padding: 0.7rem 1.2rem;
   582      border-radius: 1.4rem;
   583  }
   584  
   585  .json {
   586      word-wrap: break-word;
   587      font-size: smaller;
   588      background: #002b31;
   589      border-radius: 8px;
   590  }
   591  
   592  #raw {
   593      padding: 1.5rem 2rem;
   594      color: #ffffff;
   595      letter-spacing: 0.02em;
   596  }
   597  
   598  #raw .string {
   599      color: #2bca87;
   600  }
   601  
   602  #raw .number,
   603  #raw .boolean {
   604      color: #efc941;
   605  }
   606  
   607  #raw .null {
   608      color: red;
   609  }
   610  
   611  @media (max-width: 768px) {
   612      body {
   613          font-size: 0.8rem;
   614          background: linear-gradient(to bottom, #f6f6f6 500px, #e5e5e5 0), #e5e5e5;
   615      }
   616  
   617      .container {
   618          padding-left: 2px;
   619          padding-right: 2px;
   620      }
   621  
   622      .accordion-body {
   623          padding: var(--bs-accordion-body-padding-y) 0;
   624      }
   625  
   626      .octicon {
   627          scale: 60% !important;
   628          margin-top: -2px;
   629      }
   630  
   631      .unconfirmed {
   632          padding: 0.1rem 0.8rem;
   633      }
   634  
   635      .btn {
   636          --bs-btn-font-size: 0.8rem;
   637      }
   638  }
   639  
   640  @media (max-width: 991px) {
   641      #header .container {
   642          min-height: 40px;
   643      }
   644  
   645      #header .dropdown-menu[data-bs-popper] {
   646          left: 0;
   647          right: initial;
   648      }
   649  
   650      .trezor-logo {
   651          top: 10px;
   652      }
   653  
   654      .octicon {
   655          scale: 80%;
   656      }
   657  
   658      .table.data-table>:not(caption)>*>* {
   659          padding: 0.8rem 0.4rem;
   660      }
   661  
   662      .tx-in .col-12,
   663      .tx-out .col-12,
   664      .tx-addr .col-12 {
   665          padding: 0.7rem 1.1rem;
   666      }
   667  
   668      .amt-out {
   669          padding: 0.7rem 0 0.7rem 1rem
   670      }
   671  }
   672  
   673  @media (min-width: 769px) {
   674      body {
   675          font-size: 0.9rem;
   676      }
   677  
   678      .btn {
   679          --bs-btn-font-size: 0.9rem;
   680      }
   681  }
   682  
   683  @media (min-width: 1200px) {
   684  
   685      .h1,
   686      h1 {
   687          font-size: 2.4rem;
   688      }
   689  
   690      body {
   691          font-size: 1rem;
   692      }
   693  
   694      .btn {
   695          --bs-btn-font-size: 1rem;
   696      }
   697  }