wowtoken.app

style.css (8327B)

---

 /* Adapted from https://github.com/thomasf/solarized-css and https://github.com/altercation/solarized
    Portions Copyright (c) 2015 Thomas Frössman and Copyright (c) 2011 Ethan Schoonover */
 
 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 hgroup,
 nav,
 section,
 summary {
     display: block;
 }
 audio,
 canvas,
 video {
     display: inline-block;
     width: 93%;
     aspect-ratio: 2;
 }
 audio:not([controls]) {
     display: none;
     height: 0;
 }
 [hidden] {
     display: none;
 }
 html {
     font-family: sans-serif;
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
 }
 body {
     margin: 0;
 }
 a:focus {
     outline: thin dotted;
 }
 a:active,
 a:hover {
     outline: 0;
 }
 h1 {
     font-size: 2em;
 }
 abbr[title] {
     border-bottom: 1px dotted;
 }
 b,
 strong {
     font-weight: bold;
 }
 dfn {
     font-style: italic;
 }
 mark {
     background: #ff0;
     color: #000;
 }
 code,
 kbd,
 pre,
 samp {
     font-family: monospace, serif;
     font-size: 1em;
 }
 pre {
     white-space: pre-wrap;
     word-wrap: break-word;
 }
 q {
     quotes: "\201C" "\201D" "\2018" "\2019";
 }
 small {
     font-size: 80%;
 }
 sub,
 sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
 }
 sup {
     top: -0.5em;
 }
 sub {
     bottom: -0.25em;
 }
 img {
     border: 0;
 }
 svg:not(:root) {
     overflow: hidden;
 }
 figure {
     margin: 0;
 }
 fieldset {
     border: 1px solid #c0c0c0;
     margin: 0 2px;
     padding: 0.35em 0.625em 0.75em;
 }
 legend {
     border: 0;
     padding: 0;
 }
 button,
 input,
 select,
 textarea {
     font-family: inherit;
     font-size: 100%;
     margin: 0;
 }
 button,
 input {
     line-height: normal;
 }
 button,
 html input[type="button"],
 input[type="reset"],
 input[type="submit"] {
     -webkit-appearance: button;
     cursor: pointer;
 }
 button[disabled],
 input[disabled] {
     cursor: default;
 }
 input[type="checkbox"],
 input[type="radio"] {
     box-sizing: border-box;
     padding: 0;
 }
 input[type="search"] {
     box-sizing: content-box;
 }
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-decoration {
     -webkit-appearance: none;
 }
 button::-moz-focus-inner,
 input::-moz-focus-inner {
     border: 0;
     padding: 0;
 }
 textarea {
     overflow: auto;
     vertical-align: top;
 }
 table {
     border-collapse: collapse;
     border-spacing: 0;
 }
 html {
     font-family: sans-serif;
 }
 pre,
 code {
     font-family: monospace;
 }
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: sans-serif;
     font-weight: 700;
 }
 html {
     background-color: #073642;
     color: #839496;
     margin: 1em;
 }
 /*body {
 
 }*/
 code {
     background-color: #073642;
     padding: 2px;
 }
 a {
     color: #b58900;
 }
 a:visited {
     color: #cb4b16;
 }
 a:hover {
     color: #cb4b16;
 }
 h1 {
     color: #d33682;
 }
 h2,
 h3,
 h4,
 h5,
 h6 {
     color: #859900;
 }
 pre {
     background-color: #002b36;
     color: #839496;
     border: 1pt solid #586e75;
     padding: 1em;
     box-shadow: 5pt 5pt 8pt #073642;
 }
 pre code {
     background-color: #002b36;
 }
 h1 {
     font-size: 2.4em;
 }
 h2 {
     font-size: 2.4em;
 }
 h3 {
     font-size: 1.8em;
 }
 h4 {
     font-size: 1.4em;
 }
 h5 {
     font-size: 1.3em;
 }
 h6 {
     font-size: 1.15em;
 }
 .tag {
     background-color: #073642;
     color: #d33682;
     padding: 0 0.2em;
 }
 .todo,
 .next,
 .done {
     color: #002b36;
     background-color: #dc322f;
     padding: 0 0.2em;
 }
 .tag {
     -webkit-border-radius: 0.35em;
     -moz-border-radius: 0.35em;
     border-radius: 0.35em;
 }
 .TODO {
     -webkit-border-radius: 0.2em;
     -moz-border-radius: 0.2em;
     border-radius: 0.2em;
     background-color: #2aa198;
 }
 .NEXT {
     -webkit-border-radius: 0.2em;
     -moz-border-radius: 0.2em;
     border-radius: 0.2em;
     background-color: #268bd2;
 }
 .ACTIVE {
     -webkit-border-radius: 0.2em;
     -moz-border-radius: 0.2em;
     border-radius: 0.2em;
     background-color: #268bd2;
 }
 .DONE {
     -webkit-border-radius: 0.2em;
     -moz-border-radius: 0.2em;
     border-radius: 0.2em;
     background-color: #859900;
 }
 .WAITING {
     -webkit-border-radius: 0.2em;
     -moz-border-radius: 0.2em;
     border-radius: 0.2em;
     background-color: #cb4b16;
 }
 .HOLD {
     -webkit-border-radius: 0.2em;
     -moz-border-radius: 0.2em;
     border-radius: 0.2em;
     background-color: #d33682;
 }
 .NOTE {
     -webkit-border-radius: 0.2em;
     -moz-border-radius: 0.2em;
     border-radius: 0.2em;
     background-color: #d33682;
 }
 .CANCELLED {
     -webkit-border-radius: 0.2em;
     -moz-border-radius: 0.2em;
     border-radius: 0.2em;
     background-color: #859900;
 }
 
 .flex-container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     background-color: #002b36;
     margin: 0 auto;
     max-width: 85%;
     border: 1pt solid #586e75;
     padding: 1em;
 }
 
 .flex-container > div {
     flex: 100%;
     margin: 10px;
     text-align: center;
     line-height: 75px;
     font-size: 30px;
 }
 .adv-options-container {
     display: flex;
     padding: 20px;
     flex-flow: row wrap;
     align-items: center;
     justify-content: space-around;
 }
 .box > div {
     border: solid #bfbdbf;
     border-radius: 40px;
     padding: 20px;
     margin: 20px;
     width: 200px;
     height: 200px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
 }
 p {
     margin: 0;
     padding: 0;
     line-height: 3em;
 }
 
 details {
     background-color: #073642;
     border: 1px solid #aaa;
     border-radius: 4px;
     padding: 0.5em 0.5em 0;
     font-size: 17px;
     line-height: 1.5em;
     margin: .5em 5vw;
 }
 
 details > summary {
     color: #aaaaaa;
     cursor: pointer;
     font-weight: bold;
     margin: -0.5em -0.5em 0;
     padding: 0.5em;
 }
 
 details[open] {
     padding: 0.5em;
 }
 
 details[open] summary {
     border-bottom: 1px solid #aaa;
     margin-bottom: 0.5em;
 }
 
 
 #option_select {
     font-size: 20px;
     line-height: 40px;
     display: flex;
     flex-direction: column;
     align-items: center;
     align-content: center;
 }
 
 #option_select > div {
     padding: 10px;
 }
 
 #option_select > fieldset {
     padding-bottom: 20px;
     max-width: fit-content;
 }
 
 #token {
     color: gold;
 }
 
 #source > p {
     font-size: 15px;
     color: grey;
 }
 
 #source > p > a {
     font-size: 15px;
     color: darkgrey;
 }
 
 #token-chart {
     color: white;
 }
 
 #chart-frame {
     display: flex;
     flex-direction: column;
 }
 
 #advanced-options {
     display: none;
     flex-direction: column;
     align-items: center;
     align-content: center;
 }
 
 #advanced-options > fieldset {
     margin: 10px;
 }
 
 .other-projects {
     border: 1px solid silver;
     margin-bottom: 10px;
     font-size: 15px;
 }
 
 .other-projects > p {
     line-height: 1em;
 }
 
 .data-header h1 {
     margin-top: 24px;
     margin-bottom: 24px;
 }
 
 .high-low {
     display: flex;
     justify-content: space-evenly;
 }
 
 .high-low p {
     line-height: 1em;
     font-size: 24px;
 }
 
 .lds-ripple {
     position: relative;
     align-self: center;
     width: 80px;
     height: 80px;
     margin-bottom: -80px;
 }
 .lds-ripple div {
     position: absolute;
     border: 4px solid #fff;
     opacity: 1;
     border-radius: 50%;
     animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
 }
 .lds-ripple div:nth-child(2) {
     animation-delay: -0.5s;
 }
 
 .tooltip {
     position: relative;
     display: inline-block;
 }
 
 .tooltip .tooltiptext {
     visibility: hidden;
     width: 280px;
     background-color: #555;
     color: #fff;
     text-align: center;
     border-radius: 6px;
     padding: 5px;
     position: absolute;
     z-index: 1;
     bottom: 80%;
     left: -15%;
     opacity: 0;
     transition: opacity 0.3s;
 }
 
 .tooltip .tooltiptext::after {
     content: "";
     position: absolute;
     top: 100%;
     left: 50%;
     margin-left: -5px;
     border-width: 5px;
     border-style: solid;
     border-color: #555 transparent transparent transparent;
 }
 
 .tooltip:hover .tooltiptext {
     visibility: visible;
     opacity: 1;
 }
 
 @keyframes lds-ripple {
     0% {
         top: 36px;
         left: 36px;
         width: 0;
         height: 0;
         opacity: 0;
     }
     4.9% {
         top: 36px;
         left: 36px;
         width: 0;
         height: 0;
         opacity: 0;
     }
     5% {
         top: 36px;
         left: 36px;
         width: 0;
         height: 0;
         opacity: 1;
     }
     100% {
         top: 0;
         left: 0;
         width: 72px;
         height: 72px;
         opacity: 0;
     }
 }