diff --git a/src/routePlanner/style.css b/src/routePlanner/style.css index 72289d0..43354f2 100644 --- a/src/routePlanner/style.css +++ b/src/routePlanner/style.css @@ -14,28 +14,71 @@ section.route-planner > section.markers { grid-area: markers; } +section.route-planner > section.markers ol { + padding: 0 +} + +section.route-planner > section.markers li::before { + content: '⋮'; +} + +section.route-planner > section.markers li { + list-style-type: none; + width: 100%; + text-align: left; + cursor: grab; +} + +section.route-planner > section.markers li:active { + cursor: grabbing; +} + +section.route-planner > section.markers li .buttons { + float: right; +} + +section.route-planner > section.markers li button { + background: transparent; + border: 0; +} + +section.route-planner > section.markers li button[disabled] { + visibility: hidden; +} + section.route-planner > section.export { grid-area: export; } +section.route-planner > section.export > button { + width: 100%; + background-color: lime; + padding: 0.5em; + font-weight: bold; +} + +section.route-planner > section.export > button[disabled] { + visibility: hidden; +} + section.route-planner > section.map { grid-area: map; } section.route-planner .map-container { - width: 500px; - height: 500px; + width: 700px; + height: 700px; } section.route-planner .map-container .leaflet-tooltip-pane .text { background: transparent; - border:0; + border: 0; box-shadow: none; color: white; font-weight: bold; } -@media (max-width: 639px) { +@media (max-width: 1000px) { section.route-planner { grid-template-columns: 1fr; grid-template-rows: 1fr min-content 2fr; diff --git a/src/style.css b/src/style.css index 38f5277..8444aae 100644 --- a/src/style.css +++ b/src/style.css @@ -3,8 +3,8 @@ line-height: 1.5; font-weight: 400; - color: #222; - background-color: #ffffff; + color: white; + background-color: darkgreen; font-synthesis: none; text-rendering: optimizeLegibility; @@ -32,32 +32,3 @@ img { img:hover { filter: drop-shadow(0 0 2em #673ab8aa); } - -.resource { - padding: 0.75rem 1.5rem; - border-radius: 0.5rem; - text-align: left; - text-decoration: none; - color: #222; - background-color: #f1f1f1; - border: 1px solid transparent; -} - -.resource:hover { - border: 1px solid #000; - box-shadow: 0 25px 50px -12px #673ab888; -} - -@media (prefers-color-scheme: dark) { - :root { - color: #ccc; - background-color: #1a1a1a; - } - .resource { - color: #ccc; - background-color: #161616; - } - .resource:hover { - border: 1px solid #bbb; - } -}