/* file: main.css author: Leif DeJong created: Jan 2012 Tristan Wright July 2012 modified to support new elements for eDisplay-v2 removed .menu styles, original in archive Lillian Gray 2017-2020 */ /***** Begin Generic Styles *****/ * { margin: 0; padding: 0; outline: none; font-family: Georgia, Serif; } /* used to easily hide objects in main.js */ .displayNone { display: none; } /*gives support for flexbox in more browsers margins can be edited once there is support for row-gap and column-gap*/ .flexParent { display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -10px; } .flexParent>* { margin: 10px; } button { font-size: 18px; border: 1px solid #666; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -moz-box-shadow: 0px 0px 2px #666; -webkit-box-shadow: 0px 0px 2px #666; box-shadow: 0px 0px 2px #666; cursor: pointer; } button:active { background-color: #ddd; } /***** End Generic Styles *****/ body { background: url("../images/header_bg.png") repeat-x scroll left top #EDEDED; overflow-x: hidden; } header { max-width: 1000px; margin: 0 auto; } header a, header button { text-decoration: none; align-self: flex-end; } #pageTitle { font-size: 30px; color: #9f2d42; white-space: nowrap; } #pageTitle:hover, #pageTitle:active { color: #000; } .aboutButton { font-size: 15px; height: 35px; width: 100px; background-color: white; text-align: center; vertical-align: text-top; } .aboutButton:hover { border: 1px solid #222; -moz-box-shadow: 0px 0px 4px #222; -webkit-box-shadow: 0px 0px 4px #222; box-shadow: 0px 0px 4px #222; } #chart { width: 100%; margin: 20px 0; flex-wrap: nowrap; } #leftLegend, #rightLegend { width: 10%; margin: 0; } #dashboard { width: 75%; margin: 0; /* height is responsive, + 75 is for height of control */ height: calc(100vh * .6 + 75px); position: relative; overflow: hidden; background-color: #fff; /* border radius */ border-radius: 5px 5px; -moz-border-radius: 5px 5px; -khtml-border-radius: 5px 5px; -webkit-border-radius: 5px 5px; /* box shadow */ -moz-box-shadow: 0px 0px 5px #666; -webkit-box-shadow: 0px 0px 5px #666; box-shadow: 0px 0px 5px #666; -webkit-transition: -webkit-box-shadow 0.1s ease-out; -moz-transition: -webkit-box-shadow 0.1s ease-out; -o-transition: -webkit-box-shadow 0.1s ease-out; transition: -webkit-box-shadow 0.1s ease-out; } /***** Begin Close Button Styles *****/ .close { position: absolute; right: 16px; top: 16px; width: 32px; height: 32px; opacity: 0.75; cursor: pointer; } .close:hover { opacity: 1; } .close:before, .close:after { position: absolute; left: 14px; content: ' '; height: 32px; width: 4px; background-color: #9f2d42; } .close:before { transform: rotate(45deg); } .close:after { transform: rotate(-45deg); } /***** End Close Button Styles *****/ /***** Begin Loading Icon Styles *****/ .spinner { margin: auto; width: 70px; text-align: center; height: 18px; /* padding used to center loading icon and so it fills the dashboard =(dashboard height - spinner height) / 2 */ padding: calc((100vh * .6 + 57px) / 2) 0; } .spinner > div { width: 18px; height: 18px; background-color: #9f2d42; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } .spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) } } @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1.0); transform: scale(1.0); } } /***** End Loading Icon Styles *****/ #lineChart { width: 100%; /* keep in sync with height of dashboard */ height: calc(100vh * .6); } #control { width: 100%; /* keep in sync with height of dashboard */ height: 75px; } #aboutText, #howToUse { margin: 48px; } .about { line-height: 25px; text-align: justify; padding: 4%; text-indent: 6%; margin: auto; max-width: 700px; } .selectTitle, .selectOptionsWrapper, .selectOption, .checkbox { cursor: pointer; } .selectTitle, .selectOption { padding: 5px 15px; height: 20px; } .selectTitle, .selectOptionsWrapper { border: 1px solid #666; border-radius: 2px; background-color: #FFF; } .selectTitle { width: 120px; position: relative; } .selectTitle::after { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 8px 10px 8px; border-color: transparent transparent #444 transparent; position: absolute; right: 15px; /* center arrow vertically 50% - half of height */ bottom: calc(50% - 4px); } .selectOptionsWrapper { z-index:1; position: absolute; bottom: 20px; display: none; max-height: 180px; overflow-y: scroll; /* width of .selectTitle +30px */ width: 150px; } .selectOptionsWrapper::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; } .selectOptionsWrapper::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } .selectOptionsWrapper::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555; } .selectOption { margin: 1px 0px; } #siteOptions { width: 80%; margin: 20px auto; align-items: center; } .csvButton, .getPermalink { padding: 3px; font-size: 16px; background-color: white; position: relative; } #permalink { width: 150px; height: 20px; font-size: 14px; } /***** Begin Tooltip Styles *****/ .getPermalink::before, .getPermalink::after { position: absolute; opacity: 0; transition: opacity 1s ease-in-out; } .getPermalink.inactive::before, .getPermalink.inactive::after { visibility: hidden; } .getPermalink.active::before, .getPermalink.active::after { opacity: 1; } .getPermalink::before { content: 'Permalink Copied!'; font-size: 12px; color: white; margin: 0 auto; width: 60%; height: 140%; line-height: 140%; border-radius: 5px; background-color: #9f2d42; bottom: 150%; left: 20%; } .getPermalink::after { content: ''; width: 0; height: 0; border: 10px solid transparent; border-top-color: #9f2d42; left: calc(50% - 10px); bottom: calc(150% - 16px); } /***** End Tooltip Styles *****/ #siteDetails { margin-bottom: 20px; text-align: center; font-size: 10px; color: #888; }