nft-deal-score/viz/www/styles.css
flipside-kellen 9dd1d71538 levana
2021-12-23 12:00:31 -08:00

351 lines
12 KiB
CSS

/******************/
/* Header */
/******************/
.margin-bottom-0 {
margin-bottom: 0;
}
.header-images {
padding-bottom: 10px;
}
.header-images img {
height: 60px;
width: 60px;
}
.header-images img.opacity50 {
opacity: 0.15;
}
#tokenid {
padding-bottom: 5px;
}
.beta {
opacity: 0.3;
font-size: 14px;
}
.title {
font-weight: 900;
font-size: 36px;
color: white;
text-align: center;
padding: 20px 0 15px;
}
.light-container > .title {
padding-bottom: 15px;
}
.subtitle {
font-size: 14px;
font-weight: 100;
}
.top-banner {
background: #161E26;
height: 48px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.top-banner > section {
align-items: center;
display: flex;
height: 100%;
justify-content: space-between;
margin: 0 auto;
padding: 0 15px;
max-width: 1000px;
}
.top-banner a {
background-color: transparent;
}
.top-banner a:hover, .top-banner a:active {
color: #FFF;
text-decoration: none;
}
.fs-logo {
background: url("data:image/svg+xml,%3Csvg%20width=%2216%22%20height=%2216%22%20viewBox=%220%200%2016%2016%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M7.52088%2016C6.92112%2016%206.32136%2015.8477%205.78403%2015.543C4.56881%2014.8541%202.95205%2013.9375%201.73686%2013.2485C0.662092%2012.6393%200%2011.5131%200%2010.2945L0%205.70554C0%204.48686%200.662092%203.36075%201.73686%202.75144C2.95205%202.06249%204.56881%201.14593%205.78403%200.456977C6.85876%20-0.152326%208.18288%20-0.152326%209.25772%200.456977C10.4729%201.14593%2012.0896%202.06249%2013.3048%202.75144C13.8258%203.04684%2014.2499%203.46376%2014.5486%203.95377L9.23759%207.01154C8.19179%207.61937%207.52579%208.76857%207.52088%209.95417L7.52088%2016ZM15.0416%209.50549L15.0416%2010.2945C15.0416%2011.5131%2014.3796%2012.6393%2013.3048%2013.2485C12.0896%2013.9375%2010.4729%2014.8541%209.25772%2015.543C9.14451%2015.6072%209.02845%2015.6646%208.91038%2015.7153L8.91038%2014.29C8.91339%2013.5805%209.30794%2012.8961%209.9254%2012.5304C11.4418%2011.6491%2012.9692%2010.7862%2014.4855%209.90463C14.6838%209.78731%2014.8695%209.65331%2015.0416%209.50549ZM15.013%205.26806C15.0319%205.412%2015.0416%205.558%2015.0416%205.70554L15.0416%206.53731C15.0379%207.43057%2014.5405%208.27874%2013.7728%208.73349C12.2564%209.6148%2010.729%2010.4778%209.21271%2011.3591C9.10783%2011.4212%209.00693%2011.4887%208.91038%2011.5609L8.91038%209.95691C8.91333%209.23703%209.31737%208.5508%209.94293%208.1872L15.013%205.26806Z%22%20fill=%22white%22/%3E%3C/svg%3E") no-repeat left center;
padding-left: 24px;
}
.socials {
align-items: center;
display: flex;
}
.socials a {
display: inline-block;
margin: 0 0.5em;
overflow: hidden;
text-indent: -9999px;
white-space: nowrap;
width: 24px;
}
.socials a:last-child {
margin-right: 0;
overflow: visible;
text-indent: 0;
width: auto;
}
.socials a:last-child::before {
content: "|";
margin: 0 0.5em;
}
.twitter {
color: red;
background: 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 fill-rule='evenodd' clip-rule='evenodd' d='M8.94 18.7051C11.4989 18.7212 13.9577 17.7118 15.7672 15.9023C17.5767 14.0928 18.5861 11.634 18.57 9.0751V8.6326C19.2267 8.15147 19.7951 7.56023 20.25 6.8851C19.6316 7.15555 18.9773 7.33491 18.3075 7.4176C19.0177 6.99444 19.5506 6.32835 19.8075 5.5426C19.1456 5.93968 18.4199 6.21883 17.6625 6.3676C16.6139 5.25027 14.9461 4.97529 13.5943 5.69684C12.2425 6.41839 11.5428 7.95705 11.8875 9.4501C9.16635 9.31653 6.63036 8.03218 4.9125 5.9176C4.02372 7.46019 4.4828 9.42766 5.9625 10.4176C5.43646 10.3973 4.92259 10.2534 4.4625 9.9976V10.0351C4.45287 11.6359 5.56204 13.0263 7.125 13.3726C6.63573 13.5042 6.12322 13.5247 5.625 13.4326C6.07495 14.7902 7.33014 15.7181 8.76 15.7501C7.56691 16.7105 6.08407 17.2391 4.5525 17.2501C4.28396 17.2423 4.01606 17.2198 3.75 17.1826C5.30022 18.1703 7.1019 18.691 8.94 18.6826' fill='%23F4F6F8'/%3E%3C/svg%3E%0A") no-repeat center center;
}
.linkedin {
background: 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 fill-rule='evenodd' clip-rule='evenodd' d='M19.6575 3.00002H4.3425C3.61669 2.99566 3.02038 3.57199 3 4.29752V19.65C3.01639 20.3773 3.61508 20.9559 4.3425 20.9475H19.6575C20.3849 20.9559 20.9836 20.3773 21 19.65V4.29752C20.9796 3.57199 20.3833 2.99566 19.6575 3.00002ZM8.3325 18.3075H5.6925V9.75002H8.3325V18.3075ZM7.0425 8.55752C6.19951 8.55777 5.51036 7.88527 5.49 7.04252C5.47516 6.6264 5.63396 6.22284 5.92839 5.92841C6.22282 5.63398 6.62638 5.47519 7.0425 5.49002C7.8561 5.54668 8.48716 6.2232 8.48716 7.03877C8.48716 7.85435 7.8561 8.53087 7.0425 8.58752V8.55752ZM18.36 18.255H15.75V14.07C15.75 13.0725 15.75 11.775 14.355 11.775C12.96 11.775 12.75 12.87 12.75 13.9725V18.21H10.08V9.75002H12.57V10.875H12.6225C13.1428 9.97149 14.1234 9.43343 15.165 9.48002C17.8575 9.48002 18.36 11.28 18.36 13.5675V18.255Z' fill='%23F4F6F8'/%3E%3C/svg%3E%0A") no-repeat center center;
}
.discord {
background: 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='M10.2354 11.1801C10.0175 11.1617 9.79902 11.2095 9.60868 11.3172C9.41833 11.425 9.26496 11.5877 9.16863 11.7841C9.07229 11.9804 9.0375 12.2013 9.06879 12.4178C9.10008 12.6343 9.19601 12.8363 9.34401 12.9973C9.492 13.1584 9.68518 13.271 9.89825 13.3205C10.1113 13.3699 10.3344 13.3539 10.5382 13.2744C10.742 13.195 10.917 13.0559 11.0405 12.8753C11.1639 12.6948 11.2299 12.4811 11.2299 12.2624C11.2358 12.126 11.2147 11.9898 11.1678 11.8616C11.121 11.7334 11.0493 11.6157 10.957 11.5151C10.8646 11.4146 10.7533 11.3333 10.6295 11.2758C10.5057 11.2184 10.3718 11.1858 10.2354 11.1801ZM13.7942 11.1801C13.5762 11.1617 13.3578 11.2095 13.1674 11.3172C12.9771 11.425 12.8237 11.5877 12.7274 11.7841C12.631 11.9804 12.5962 12.2013 12.6275 12.4178C12.6588 12.6343 12.7548 12.8363 12.9028 12.9973C13.0508 13.1584 13.2439 13.271 13.457 13.3205C13.6701 13.3699 13.8931 13.3539 14.0969 13.2744C14.3007 13.195 14.4758 13.0559 14.5992 12.8753C14.7226 12.6948 14.7887 12.4811 14.7887 12.2624C14.7945 12.126 14.7734 11.9898 14.7266 11.8616C14.6797 11.7334 14.6081 11.6157 14.5157 11.5151C14.4234 11.4146 14.3121 11.3333 14.1883 11.2758C14.0645 11.2184 13.9306 11.1858 13.7942 11.1801Z' fill='%23F4F6F8'/%3E%3Cpath d='M18.5325 3H5.46751C5.20438 3.00063 4.94396 3.05308 4.70111 3.15436C4.45826 3.25564 4.23774 3.40376 4.05213 3.59027C3.86653 3.77678 3.71948 3.99802 3.61939 4.24136C3.51929 4.4847 3.46811 4.74538 3.46876 5.0085V18.1905C3.46811 18.4536 3.51929 18.7143 3.61939 18.9576C3.71948 19.201 3.86653 19.4222 4.05213 19.6087C4.23774 19.7952 4.45826 19.9434 4.70111 20.0446C4.94396 20.1459 5.20438 20.1984 5.46751 20.199H16.524L16.0073 18.3953L17.2553 19.5555L18.435 20.6475L20.5313 22.5V5.0085C20.5319 4.74538 20.4807 4.4847 20.3806 4.24136C20.2805 3.99802 20.1335 3.77678 19.9479 3.59027C19.7623 3.40376 19.5418 3.25564 19.2989 3.15436C19.0561 3.05308 18.7956 3.00063 18.5325 3ZM14.769 15.7335C14.769 15.7335 14.418 15.3142 14.1255 14.9437C14.8322 14.7774 15.4573 14.3664 15.8903 13.7835C15.5394 14.017 15.1633 14.21 14.769 14.3588C14.3154 14.5524 13.8411 14.693 13.3553 14.778C12.5202 14.9317 11.6638 14.9284 10.83 14.7682C10.3405 14.6725 9.86073 14.5321 9.39676 14.349C9.15219 14.255 8.91437 14.1442 8.68501 14.0175C8.65576 13.998 8.62651 13.9882 8.59726 13.9688C8.58259 13.9614 8.56937 13.9515 8.55826 13.9395C8.38276 13.842 8.28526 13.7738 8.28526 13.7738C8.70251 14.3444 9.30604 14.7514 9.99151 14.9242C9.69901 15.2948 9.33826 15.7335 9.33826 15.7335C8.75909 15.7491 8.18497 15.6221 7.66642 15.3636C7.14787 15.1052 6.70078 14.7233 6.36451 14.2515C6.39616 12.2749 6.87623 10.3313 7.76851 8.56725C8.55372 7.95055 9.51103 7.59283 10.5083 7.5435L10.6058 7.6605C9.66755 7.89268 8.79203 8.32877 8.04151 8.93775C8.04151 8.93775 8.25601 8.82075 8.61676 8.655C9.3176 8.33509 10.0645 8.12779 10.83 8.04075C10.8846 8.02945 10.94 8.02293 10.9958 8.02125C11.6491 7.93613 12.3103 7.92958 12.9653 8.00175C13.9952 8.11938 14.9922 8.43735 15.9 8.93775C15.1875 8.3578 14.36 7.93574 13.4723 7.6995L13.6088 7.5435C14.606 7.59283 15.5633 7.95055 16.3485 8.56725C17.2408 10.3313 17.7209 12.2749 17.7525 14.2515C17.4135 14.7229 16.9645 15.1043 16.4446 15.3625C15.9246 15.6208 15.3494 15.7482 14.769 15.7335Z' fill='%23F4F6F8'/%3E%3C/svg%3E%0A") no-repeat center center;
}
.hero {
margin: 1.5em 0;
text-align: center;
}
.hero > p {
color: #E5E5E5;
font-size: 20px;
margin-top: 1em;
}
.header {
margin: 0;
color: #03E1FF;
font-family: 'Inter', sans-serif;
text-align: center;
}
@supports(mix-blend-mode: lighten) {
.header {
/* color: #FFF; */
position: relative;
mix-blend-mode: lighten;
background: #000;
}
.header::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(90deg, #0AD7EC, #2AF7AC);
content: "";
mix-blend-mode: multiply;
pointer-events: none;
}
}
/*********************/
/* Top Panel */
/*********************/
#tokenimg {
padding: 0 0 15px;
}
#tokenimg img {
max-height: 300px;
max-width: 100%;
margin: auto;
display: block;
}
.light-container {
background: rgba(3,225,255,.1);
padding: 10px;
border-radius: 10px;
}
#fairmarketprice {
font-weight: 100;
font-size: 28px;
}
/*****************/
/* Forms */
/*****************/
.selectize-input, .selectize-dropdown {
background: #10151A !important;
border: 1px solid #03E1FF !important;
border-radius: 4px !important;
font-family: Roboto Mono !important;
color: #FFF !important;
}
.selectize-input.focus {
border-color: #10151A !important;
}
.selectize-control.single .selectize-input::after {
border-color: #FFF transparent transparent transparent transparent;
}
.form-group {
padding: 10px 10px 0;
margin: none !important;
}
.form-control {
background: #10151A;
border: 1px solid #03E1FF;
border-radius: 4px;
font-family: Roboto Mono !important;
color: #FFFFFF;
}
.inputtitle {
margin-left: 4%;
margin-right: 4%;
font-family: Inter;
}
.inputtitle > i.fa {
float: right;
padding-left: 5px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
/*****************/
/* Plots */
/*****************/
.plotly {
font-family: Roboto Mono !important;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 150%;
display: flex;
align-items: center;
text-align: center;
}
.listing-plot {
padding-bottom: 20px;
}
/***********************/
/* React Table */
/***********************/
.ReactTable {
background-color: #212B36;
color: #C4CDD5;
border: none;
}
.rt-page-button-current {
color: #FFF;
}
.rt-thead {
background-color: #10151A;
color: #FFFFFF;
}
.ReactTable {
color: #C4CDD5;
border: none;
}
.ReactTable .rt-table {
background-color: #171e25;
}
.rt-th {
border: 0px solid #000000 !important;
padding-top: 15px;
padding-bottom: 15px;
font-weight: 400;
font-family: Inter;
}
.rt-pagination {
margin: 0;
background: #171e25;
opacity: 0.5;
border-bottom: 1px solid #C4CDD5;
border-top: 1px solid #C4CDD5;
}
.rt-tr {
padding-top: 0px;
padding-bottom: 0px;
}
tr {
border: none;
}
/****************/
/* FAQ */
/****************/
.faq > h4 {
font-size: 22px;
padding-top: 32px;
}
/*******************/
/* General */
/*******************/
.row {
margin: 0;
}
body {
background-color: #10151A;
background-attachment:fixed;
background-size: auto 100%;
background-position: center;
padding-left: 10%;
padding-right: 10%;
font-family: 'Inter';
color: #FFFFFF;
}
.container-fluid {
background-color: #10151A;
max-width: 1000px;
margin: 0 auto;
height: 100%;
padding-top: 48px;
z-index: 1;
}
hr {
margin: 0;
background: #10151A;
opacity: 0.5;
border: 1px solid #637381;
}
.grey8row {
background-color: #212B36;
border-radius: 16px 16px 16px 16px;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 150%;
padding: 2%;
margin-bottom: 5%;
margin-right: 0;
position: relative;
}
.col-sm-6 {
z-index: 1;
}
a {
background: transparent;
color: #FFFFFF;
}
a:hover {
text-decoration: underline;
color: #03E1FF;
}
.padding-left-10 {
padding-left: 10px;
}
.padding-left-5 {
padding-left: 5px;
}
.link {
font-size: 10px;
}
.link a {
text-decoration: underline;
}
.description {
font-size: 9px;
font-weight: 100;
font-style: italic;
line-height: 110%;
}
h2 > i {
font-size: 20px;
}