balance.template.html (2758B)
1 <!doctype html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>Milion</title> 7 <link rel="stylesheet" type="text/css" href="tabs.css" /> 8 <style> 9 body { 10 font-family: monospace; 11 margin: 0; 12 font-size: 12px; 13 } 14 15 h1 { 16 text-align: center; 17 text-transform: uppercase; 18 } 19 20 table { 21 border-collapse: collapse; 22 width: 100%; 23 } 24 25 table tr:hover td { 26 background-color: #e6e6e6; 27 } 28 29 table.head tr td:first-child { 30 text-align: right 31 } 32 33 table.head tr td:last-child { 34 text-align: left 35 } 36 37 th, 38 td { 39 padding: 8px; 40 text-align: left; 41 border-bottom: 1px solid #ddd; 42 white-space: nowrap; 43 } 44 45 td.positive { 46 color: green; 47 } 48 49 td.negative { 50 color: red; 51 } 52 53 td.money { 54 text-align: right; 55 } 56 57 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@600;700&display=swap"); 58 59 * { 60 box-sizing: border-box; 61 } 62 63 body { 64 margin: 0; 65 font-family: monospace; 66 } 67 68 .mono { 69 font-family: monospace; 70 } 71 72 .page-contain { 73 height: auto; 74 display: flex; 75 flex-wrap: wrap; 76 align-items: center; 77 justify-content: center; 78 background: #627084; 79 font-family: "Open Sans", sans-serif; 80 } 81 82 .data-card { 83 display: flex; 84 flex-direction: column; 85 max-width: 20em; 86 overflow: hidden; 87 border-radius: 0.5em; 88 text-decoration: none; 89 background: white; 90 margin: 1em; 91 padding: 1em; 92 box-shadow: 0 1.5em 2.5em -0.5em rgba(0, 0, 0, 0.1); 93 transition: transform 0.45s ease; 94 } 95 96 .data-card h3 { 97 color: #2e3c40; 98 font-size: 2em; 99 font-weight: 600; 100 line-height: 1; 101 padding-bottom: 0.5em; 102 margin: 0 0 0.142857143em; 103 border-bottom: 2px solid #363e49; 104 transition: border 0.45s ease; 105 } 106 107 .data-card h4 { 108 color: #627084; 109 text-transform: uppercase; 110 font-size: 1.125em; 111 font-weight: 700; 112 line-height: 1; 113 letter-spacing: 0.1em; 114 margin-top: 0; 115 margin-bottom: 0; 116 } 117 118 .data-card p { 119 color: #627084; 120 margin: 0; 121 } 122 123 .data-card:hover { 124 transform: scale(1.02); 125 } 126 127 .data-card.active { 128 background: #363e49; 129 } 130 131 .data-card:hover h3 { 132 border-bottom-color: darkorange; 133 } 134 135 .data-card.active h3 { 136 color: #ffffff; 137 border-bottom-color: darkorange; 138 } 139 140 .data-card.active h4 { 141 color: #ffffff; 142 } 143 144 .data-card.active p { 145 color: #ffffff; 146 } 147 </style> 148 </head> 149 150 <body> 151 <section class="page-contain"> 152 {{CARDS}} 153 </section> 154 <h1>{{NAME}}</h1> 155 <table>{{LIST}}</table> 156 </body> 157 158 </html>