piece-bar-map.css 1012 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. /* piece-bar / piece-map */
  2. .piece-bar-wrapper {
  3. height: 20px;
  4. }
  5. .piece-bar {
  6. width: 100%;
  7. }
  8. .piece-map {
  9. padding-left: 6px;
  10. padding-right: 2px;
  11. line-height: 11px;
  12. }
  13. @media screen and (orientation: landscape) {
  14. .tab-pane > .piece-map {
  15. padding-right: calc(2px + env(safe-area-inset-right));
  16. }
  17. }
  18. .piece-legends {
  19. text-align: center;
  20. margin-top: 4px;
  21. margin-bottom: 4px;
  22. }
  23. @media screen and (orientation: landscape) {
  24. .tab-pane > .piece-legends {
  25. padding-right: env(safe-area-inset-right);
  26. }
  27. }
  28. .piece-legend {
  29. display: inline-block;
  30. margin-right: 4px;
  31. }
  32. .piece-map .piece, .piece-legend > .piece {
  33. width: 10px;
  34. height: 10px;
  35. background-color: #eef2f4;
  36. border: #dee2e5 solid 1px;
  37. display: inline-block;
  38. margin-right: 1px;
  39. }
  40. .piece-map .piece.piece-completed, .piece-legend > .piece.piece-completed {
  41. background-color: #b8dd69;
  42. border-color: #b8dd69;
  43. }
  44. .piece-legend > .piece {
  45. margin-right: 4px;
  46. }