1
0

style.css 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749
  1. /* Table of contents ––––––––––––––––––––––––––––––––––––––––––––––––––
  2. Taken from https://codepen.io/chriddyp/pen/bWLwgP.css
  3. - Grid
  4. - Base Styles
  5. - Typography
  6. - Links
  7. - Buttons
  8. - Forms
  9. - Lists
  10. - Code
  11. - Tables
  12. - Spacing
  13. - Utilities
  14. - Clearing
  15. - Media Queries
  16. - Custom App CSS */
  17. /* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */
  18. .container {
  19. position: relative;
  20. width: 100%;
  21. max-width: 960px;
  22. margin: 0 auto;
  23. padding: 0 20px;
  24. box-sizing: border-box;
  25. }
  26. .column, .columns {
  27. width: 100%;
  28. float: left;
  29. box-sizing: border-box;
  30. }
  31. /* For devices larger than 400px */
  32. @media (min-width: 400px) {
  33. .container {
  34. width: 85%;
  35. padding: 0;
  36. }
  37. }
  38. /* For devices larger than 550px */
  39. @media (min-width: 550px) {
  40. .container {
  41. width: 80%;
  42. }
  43. .column, .columns {
  44. margin-left: 4%;
  45. }
  46. .column:first-child, .columns:first-child {
  47. margin-left: 0;
  48. }
  49. .one.column, .one.columns {
  50. width: 4.66666666667%;
  51. }
  52. .two.columns {
  53. width: 13.3333333333%;
  54. }
  55. .three.columns {
  56. width: 22%;
  57. }
  58. .four.columns {
  59. width: 30.6666666667%;
  60. }
  61. .five.columns {
  62. width: 39.3333333333%;
  63. }
  64. .six.columns {
  65. width: 48%;
  66. }
  67. .seven.columns {
  68. width: 56.6666666667%;
  69. }
  70. .eight.columns {
  71. width: 65.3333333333%;
  72. }
  73. .nine.columns {
  74. width: 74.0%;
  75. }
  76. .ten.columns {
  77. width: 82.6666666667%;
  78. }
  79. .eleven.columns {
  80. width: 91.3333333333%;
  81. }
  82. .twelve.columns {
  83. width: 100%;
  84. margin-left: 0;
  85. }
  86. .one-third.column {
  87. width: 30.6666666667%;
  88. }
  89. .two-thirds.column {
  90. width: 65.3333333333%;
  91. }
  92. .one-half.column {
  93. width: 48%;
  94. }
  95. /* Offsets */
  96. .offset-by-one.column, .offset-by-one.columns {
  97. margin-left: 8.66666666667%;
  98. }
  99. .offset-by-two.column, .offset-by-two.columns {
  100. margin-left: 17.3333333333%;
  101. }
  102. .offset-by-three.column, .offset-by-three.columns {
  103. margin-left: 26%;
  104. }
  105. .offset-by-four.column, .offset-by-four.columns {
  106. margin-left: 34.6666666667%;
  107. }
  108. .offset-by-five.column, .offset-by-five.columns {
  109. margin-left: 43.3333333333%;
  110. }
  111. .offset-by-six.column, .offset-by-six.columns {
  112. margin-left: 52%;
  113. }
  114. .offset-by-seven.column, .offset-by-seven.columns {
  115. margin-left: 60.6666666667%;
  116. }
  117. .offset-by-eight.column, .offset-by-eight.columns {
  118. margin-left: 69.3333333333%;
  119. }
  120. .offset-by-nine.column, .offset-by-nine.columns {
  121. margin-left: 78.0%;
  122. }
  123. .offset-by-ten.column, .offset-by-ten.columns {
  124. margin-left: 86.6666666667%;
  125. }
  126. .offset-by-eleven.column, .offset-by-eleven.columns {
  127. margin-left: 95.3333333333%;
  128. }
  129. .offset-by-one-third.column, .offset-by-one-third.columns {
  130. margin-left: 34.6666666667%;
  131. }
  132. .offset-by-two-thirds.column, .offset-by-two-thirds.columns {
  133. margin-left: 69.3333333333%;
  134. }
  135. .offset-by-one-half.column, .offset-by-one-half.columns {
  136. margin-left: 52%;
  137. }
  138. }
  139. /* Base Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */
  140. /* NOTE html is set to 62.5% so that all the REM measurements throughout Skeleton are based on 10px sizing. So basically 1.5rem = 15px :) */
  141. html {
  142. font-size: 62.5%;
  143. }
  144. body {
  145. font-size: 1.5em;
  146. /* currently ems cause chrome bug misinterpreting rems on body element */
  147. line-height: 1.6;
  148. font-weight: 400;
  149. color: rgb(50, 50, 50);
  150. }
  151. /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */
  152. h1, h2, h3, h4, h5, h6 {
  153. margin-top: 0;
  154. margin-bottom: 0;
  155. font-weight: 300;
  156. }
  157. h1 {
  158. font-size: 4.5rem;
  159. line-height: 1.2;
  160. letter-spacing: -.1rem;
  161. margin-bottom: 2rem;
  162. }
  163. h2 {
  164. font-size: 3.6rem;
  165. line-height: 1.25;
  166. letter-spacing: -.1rem;
  167. margin-bottom: 1.8rem;
  168. margin-top: 1.8rem;
  169. }
  170. h3 {
  171. font-size: 3.0rem;
  172. line-height: 1.3;
  173. letter-spacing: -.1rem;
  174. margin-bottom: 1.5rem;
  175. margin-top: 1.5rem;
  176. }
  177. h4 {
  178. font-size: 2.6rem;
  179. line-height: 1.35;
  180. letter-spacing: -.08rem;
  181. margin-bottom: 1.2rem;
  182. margin-top: 1.2rem;
  183. }
  184. h5 {
  185. font-size: 2.2rem;
  186. line-height: 1.5;
  187. letter-spacing: -.05rem;
  188. margin-bottom: 0.6rem;
  189. margin-top: 0.6rem;
  190. }
  191. h6 {
  192. font-size: 2.0rem;
  193. line-height: 1.6;
  194. letter-spacing: 0;
  195. margin-bottom: 0.75rem;
  196. margin-top: 0.75rem;
  197. }
  198. p {
  199. margin-top: 0;
  200. }
  201. /* Blockquotes –––––––––––––––––––––––––––––––––––––––––––––––––– */
  202. blockquote {
  203. border-left: 4px lightgrey solid;
  204. padding-left: 1rem;
  205. margin-top: 2rem;
  206. margin-bottom: 2rem;
  207. margin-left: 0rem;
  208. }
  209. /* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */
  210. a {
  211. color: #1EAEDB;
  212. text-decoration: underline;
  213. cursor: pointer;
  214. }
  215. a:hover {
  216. color: #0FA0CE;
  217. }
  218. /* Buttons –––––––––––––––––––––––––––––––––––––––––––––––––– */
  219. .rc-slider-track {
  220. background-color: #007eff
  221. }
  222. .rc-slider-rail {
  223. background-color: #505050
  224. }
  225. .main-svg {
  226. font-family: "Open Sans Semi Bold"
  227. }
  228. .gtitle {
  229. font-family: "Open Sans Semi Bold" !important
  230. }
  231. .g-title {
  232. font-family: "Open Sans Semi Bold"
  233. }
  234. .button, button, input[type="submit"], input[type="reset"], input[type="button"] {
  235. display: inline-block;
  236. height: 38px;
  237. padding: 0 30px;
  238. color: #555;
  239. text-align: center;
  240. font-size: 11px;
  241. font-weight: 600;
  242. line-height: 38px;
  243. letter-spacing: .1rem;
  244. text-transform: uppercase;
  245. text-decoration: none;
  246. white-space: nowrap;
  247. background-color: transparent;
  248. border-radius: 4px;
  249. border: 1px solid #bbb;
  250. cursor: pointer;
  251. box-sizing: border-box;
  252. }
  253. .button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus {
  254. color: #333;
  255. border-color: #888;
  256. outline: 0;
  257. }
  258. .button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary {
  259. color: #FFF;
  260. background-color: #33C3F0;
  261. border-color: #33C3F0;
  262. }
  263. .button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus {
  264. color: #FFF;
  265. background-color: #1EAEDB;
  266. border-color: #1EAEDB;
  267. }
  268. /* Forms –––––––––––––––––––––––––––––––––––––––––––––––––– */
  269. input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {
  270. height: 38px;
  271. padding: 6px 10px;
  272. /* The 6px vertically centers text on FF, ignored by Webkit */
  273. background-color: #fff;
  274. border: 1px solid #D1D1D1;
  275. border-radius: 4px;
  276. box-shadow: none;
  277. box-sizing: border-box;
  278. font-family: inherit;
  279. font-size: inherit;
  280. /*https://stackoverflow.com/questions/6080413/why-doesnt-input-inherit-the-font-from-body*/
  281. }
  282. /* Removes awkward default styles on some inputs for iOS */
  283. input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea {
  284. -webkit-appearance: none;
  285. -moz-appearance: none;
  286. appearance: none;
  287. }
  288. textarea {
  289. min-height: 65px;
  290. padding-top: 6px;
  291. padding-bottom: 6px;
  292. }
  293. input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
  294. border: 1px solid #33C3F0;
  295. outline: 0;
  296. }
  297. label, legend {
  298. display: block;
  299. margin-bottom: 0px;
  300. }
  301. fieldset {
  302. padding: 0;
  303. border-width: 0;
  304. }
  305. input[type="checkbox"], input[type="radio"] {
  306. display: inline;
  307. }
  308. label > .label-body {
  309. display: inline-block;
  310. margin-left: .5rem;
  311. font-weight: normal;
  312. }
  313. /* Lists –––––––––––––––––––––––––––––––––––––––––––––––––– */
  314. ul {
  315. list-style: circle inside;
  316. }
  317. ol {
  318. list-style: decimal inside;
  319. }
  320. ol, ul {
  321. padding-left: 0;
  322. margin-top: 0;
  323. }
  324. ul ul, ul ol, ol ol, ol ul {
  325. margin: 1.5rem 0 1.5rem 3rem;
  326. font-size: 90%;
  327. }
  328. li {
  329. margin-bottom: 1rem;
  330. }
  331. /* Tables –––––––––––––––––––––––––––––––––––––––––––––––––– */
  332. table {
  333. border-collapse: collapse;
  334. }
  335. th, td {
  336. padding: 12px 15px;
  337. text-align: left;
  338. border-bottom: 1px solid #E1E1E1;
  339. }
  340. th:first-child, td:first-child {
  341. padding-left: 0;
  342. }
  343. th:last-child, td:last-child {
  344. padding-right: 0;
  345. }
  346. /* Spacing –––––––––––––––––––––––––––––––––––––––––––––––––– */
  347. button, .button {
  348. margin-bottom: 0rem;
  349. }
  350. input, textarea, select, fieldset {
  351. margin-bottom: 0rem;
  352. }
  353. pre, dl, figure, table, form {
  354. margin-bottom: 0rem;
  355. }
  356. p, ul, ol {
  357. margin-bottom: 0.75rem;
  358. }
  359. /* Utilities –––––––––––––––––––––––––––––––––––––––––––––––––– */
  360. .u-full-width {
  361. width: 100%;
  362. box-sizing: border-box;
  363. }
  364. .u-max-full-width {
  365. max-width: 100%;
  366. box-sizing: border-box;
  367. }
  368. .u-pull-right {
  369. float: right;
  370. }
  371. .u-pull-left {
  372. float: left;
  373. }
  374. /* Misc –––––––––––––––––––––––––––––––––––––––––––––––––– */
  375. hr {
  376. margin-top: 3rem;
  377. margin-bottom: 3.5rem;
  378. border-width: 0;
  379. border-top: 1px solid #E1E1E1;
  380. }
  381. /* Clearing –––––––––––––––––––––––––––––––––––––––––––––––––– */
  382. /* Self Clearing Goodness */
  383. .container:after, .row:after, .u-cf {
  384. content: "";
  385. display: table;
  386. clear: both;
  387. }
  388. /* Media Queries –––––––––––––––––––––––––––––––––––––––––––––––––– */
  389. /* Note: The best way to structure the use of media queries is to create the queries near the relevant code. For example, if you wanted to change the styles for buttons on small devices, paste the mobile query code up in the buttons section and style it there. */
  390. /* Larger than mobile */
  391. @media (min-width: 400px) {
  392. }
  393. /* Larger than phablet (also point when grid becomes active) */
  394. @media (min-width: 550px) {
  395. }
  396. /* Larger than tablet */
  397. @media (min-width: 750px) {
  398. }
  399. /* Larger than desktop */
  400. @media (min-width: 1000px) {
  401. }
  402. /* Larger than Desktop HD */
  403. @media (min-width: 1200px) {
  404. }
  405. /* Custom App CSS Below --------------------------------- */
  406. /* Main Layout ––––––––––––––––––––––––––––––––––––––––––––––––––*/
  407. html, body {
  408. height: 100%;
  409. }
  410. body {
  411. background-color: #1E1E1E;
  412. color: #d8d8d8;
  413. height: 100%;
  414. margin: 0;
  415. padding: 0;
  416. }
  417. .react-entry-point {
  418. height: 100%;
  419. }
  420. h1, h2 {
  421. font-family: "Open Sans Semi Bold";
  422. letter-spacing: 2.1px;
  423. font-size: 21px;
  424. padding-left: 12px;
  425. }
  426. h3, h4, h5 {
  427. font-family: "Open Sans Light";
  428. letter-spacing: 1px;
  429. font-size: 14px;
  430. padding-left: 12px;
  431. padding-top: 4px;
  432. }
  433. p {
  434. font-family: "Open Sans Light";
  435. font-weight: 400;
  436. font-size: 14px;
  437. padding-left: 12px;
  438. }
  439. a {
  440. text-decoration: none;
  441. }
  442. .bg-grey {
  443. background-color: #31302F;
  444. }
  445. .text-padding {
  446. padding: 5px;
  447. }
  448. /* Graph Layout ––––––––––––––––––––––––––––––––––––––––––––––––––*/
  449. .div-for-charts {
  450. display: flex;
  451. flex-direction: column;
  452. height: 100vh;
  453. width: 100%;
  454. }
  455. #histogram {
  456. flex-grow: 1
  457. }
  458. #map-graph {
  459. flex-grow: 2
  460. }
  461. .mapboxgl-canvas, .mapboxgl-map {
  462. min-width: 100%;
  463. }
  464. /* Graph Control Objects ––––––––––––––––––––––––––––––––––––––––––––––––––*/
  465. .div-user-controls {
  466. padding-left: 55px;
  467. padding-top: 64px;
  468. }
  469. .opdown {
  470. padding-top: 12px;
  471. padding-bottom: 12px;
  472. }
  473. .div-for-dropdown-group {
  474. padding: 12px;
  475. background-color: #31302F;
  476. }
  477. .div-for-slider {
  478. width: 97%;
  479. text-align: center;
  480. }
  481. .logo {
  482. height: 50px;
  483. padding-bottom: 12px;
  484. }
  485. .Select-control, .Select-menu-outer, .Select-multi-value-wrapper, .select-up, .is-open .Select-control {
  486. background-color: #1E1E1E;
  487. color: white;
  488. }
  489. #modelselector .Select-control {
  490. max-height: 82px;
  491. overflow-y: auto;
  492. margin: 0px 0px -3px 0px;
  493. border: 0.5px solid #dbdbdb44;
  494. }
  495. .Select-control {
  496. border: 0.5px solid #dbdbdb44;
  497. }
  498. .has-value.Select--single > .Select-control .Select-value .Select-value-label, .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {
  499. color: white;
  500. background: #1E1E1E;
  501. background-color: #1E1E1E;
  502. }
  503. ._dash-app-content {
  504. overflow-x: hidden;
  505. overflow-y: hidden;
  506. position: relative;
  507. }
  508. .has-value.Select--single > .Select-control .Select-value .Select-value-label, .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-labeln {
  509. color: #d8d8d8;
  510. font-weight: 400;
  511. font-size: 14px;
  512. }
  513. .Input.DateInput_1 {
  514. background-color: #1e1e1e;
  515. }
  516. #date {
  517. background-color: #1e1e1e;
  518. font-family: "Open Sans Light";
  519. font-weight: 400;
  520. color: #dbdbdb;
  521. border: 0.5px solid #dbdbdb44;
  522. }
  523. #date-picker {
  524. width: 100%;
  525. }
  526. ._dash-undo-redo {
  527. display: none;
  528. }
  529. .DateInput.DateInput_1 {
  530. width: 100%;
  531. }
  532. .SingleDatePickerInput__withBorder {
  533. border: none;
  534. }
  535. .DateInput.DateInput_1 {
  536. background-color: #1e1e1e;
  537. }
  538. .SingleDatePickerInput__withBorder {
  539. border-radius: 3px;
  540. color: #dbdbdb;
  541. background: #1e1e1e;
  542. background-color: #1e1e1e;
  543. }
  544. .SingleDatePickerInput.SingleDatePickerInput_1.SingleDatePickerInput__withBorder.SingleDatePickerInput__withBorder_2 {
  545. border: 0.0px solid #dbdbdb;
  546. display: block;
  547. }
  548. .SingleDatePicker_1 {
  549. border: 0.0px solid #dbdbdb;
  550. display: block;
  551. }
  552. .SingleDatePicker_picker, .SingleDatePicker_picker_1, .SingleDatePicker_picker__directionLeft,
  553. .SingleDatePicker_picker__directionLeft_2 {
  554. filter: invert(100%);
  555. }
  556. /* For Mobile Phones and small screens ––––––––––––––––––––––––––––––––––––––––––––––––––*/
  557. @media only screen and (max-width: 768px) {
  558. .four, .eight {
  559. min-width: 100%;
  560. }
  561. h1, h2, h3, p {
  562. text-align: center;
  563. }
  564. body {
  565. display: block;
  566. margin: 0px;
  567. overflow-y: scroll;
  568. }
  569. .div-for-charts {
  570. padding: 0px;
  571. width: 100%;
  572. text-align: center;
  573. }
  574. .div-user-controls {
  575. padding: 32px;
  576. }
  577. .side-by-side {
  578. display: inline-block;
  579. width: 48%;
  580. }
  581. .side-by-side-right {
  582. display: inline-block;
  583. width: 48%;
  584. float: right;
  585. }
  586. .div-for-charts {
  587. margin: 0px;
  588. }
  589. }
  590. /* width */
  591. ::-webkit-scrollbar {
  592. width: 10px !important;
  593. display: block !important;
  594. }
  595. /* Track */
  596. ::-webkit-scrollbar-track {
  597. background: #1e1e1e !important;
  598. border-radius: 10px !important;
  599. display: block !important;
  600. }
  601. /* Handle */
  602. ::-webkit-scrollbar-thumb {
  603. background: transparent;
  604. }
  605. /* Handle on hover */
  606. ::-webkit-scrollbar-thumb:hover {
  607. background: #d8d8d870 !important;
  608. }