RoundSummary.css 822 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. .round-summary {
  2. flex: 1;
  3. display: flex;
  4. flex-flow: column nowrap;
  5. justify-content: space-around;
  6. align-items: center;
  7. }
  8. .round-summary__info-pane {
  9. display: flex;
  10. flex-flow: column nowrap;
  11. justify-content: space-between;
  12. align-items: center;
  13. }
  14. @media only screen and (min-width: 600px) {
  15. .round-summary {
  16. flex-flow: row nowrap;
  17. }
  18. .round-summary__info-pane {
  19. margin-left: 10px;
  20. align-items: flex-start;
  21. }
  22. }
  23. .round-summary__map {
  24. height: 50%;
  25. width: 50%;
  26. }
  27. .round-summary__guess {
  28. display: inline;
  29. }
  30. .round-summary__guess--timed-out {
  31. color: red;
  32. }
  33. .round-summary__target-point {
  34. display: inline;
  35. }
  36. .round-summary__round-score {
  37. display: inline;
  38. }
  39. .round-summary__total-score {
  40. display: inline;
  41. }
  42. .round-summary__button {
  43. margin-top: 5px;
  44. padding: 1em;
  45. }