--- a +++ b/src/overview.css @@ -0,0 +1,241 @@ +*{ + box-sizing: border-box; + margin: 0; + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; +} +html{ + height: 100%; +} +body{ + height: 100%; + background:#ebebeb; +} +a{ + color:#007bff; + text-decoration:none; + font-weight: bold; + -ms-touch-action:manipulation; + touch-action:manipulation; +} +a:hover{ + color:#0056b3; + text-decoration:underline; +} +a:active{ + color:#263c53; +} +a:visited{ + color:#58a9ff; +} +nav a:visited{ + color: #007bff;; +} +input[type=number]{ + height: 25px; + font-size: 1rem; +} +button{ + font-size: 1.1rem; + height: 24.4px; + display: inline-flex; + align-items: center; +} +h1, h2{ + text-align: center; +} +main{ + margin:0 auto; + padding: 1em 2em; + max-width: 1200px; +} +ul li{ + padding:0.3rem; +} +nav{ + width: 100%; + height: 60px; + background-color: #c8c8c8; + text-align: center; + font-size: 46px; +} + +.container{ + width: 100%; + max-width: 1200px; + margin: 0 auto; +} + +#overview{ + display: flex; + flex-flow: row wrap; + justify-content: center; + align-items: center; +} +div:has(.preview-card){ + position: relative; +} +.preview-card{ + display: inline-block; + width: 10em; + height: 20em; + margin: 1em; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + background-color: white; + text-align: center; +} +.preview-info{ + position: absolute; + bottom: 20px; + left: 15px; + text-align: center; + width: 10em; +} +.info-tools{ + display: flex; + justify-content: space-between; + font-size: 1.2rem; +} +.switch { + position: relative; + top: 5px; + display: inline-block; + width: 60px; + height: 20px; +} +.switch input { + opacity: 0; + width: 0; + height: 0; +} +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; +} +.slider:before { + position: absolute; + content: ""; + width: 26px; + left: 4px; + bottom: 3px; + top: 3px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; +} +input:checked + .slider { + background-color: #007bff; +} +input:focus + .slider { + box-shadow: 0 0 1px #007bff; +} +input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} +#popup-list{ + position: fixed; + width: auto; + max-height: 78vh; + left: 1vw; + top: 20vh; + overflow: auto; + font-weight: bold; + text-shadow: 0 0 1px rgb(255, 255, 255); + z-index: 999; +} +#popup-list tbody{ + height: max-content; + background-color: rgba(245, 245, 245, 0.749); +} +.leaflet-container { +height: 60em; +width: 100%; +max-width: 100%; +max-height: 100%; +border: 2px solid #5e5e5e; +background: white; +} +.leaflet-container:hover{ + cursor: crosshair; +} +.leaflet-control-attribution { + display: none; +} +table { + width: 100%; + margin-bottom: 20px; +} +td, th{ + border: 2px solid #5e5e5e; +} +td:first-child{ + width: 35%; +} +#map { + max-width: clamp(1200px, 80vw, 80vw); + height: 80vh; + margin: 0 auto; +} +.cut-viewer-container{ + width: 95%; + margin: 0 auto; + display: flex; +} +.fragment-map { + position: relative; + flex: 0 1 1000%; +} + #fragment { + height: 100%; + cursor: crosshair; +} +#markerInfo{ + flex: 0 1 auto; +} +#markerInfo tr, td{ + height: 1rem; +} +#markerInfo td:nth-child(2)::before, #markerInfo td:nth-child(3)::before{ + content: ''; + display: block; + width: 50px; +} +#markerInfo td:first-child::before { + content: ''; + display: block; + width: 95px; +} +.marker { + position: absolute; + color: greenyellow; + font-weight: bold; + pointer-events: none; + white-space: nowrap; + opacity: 0.8; +} +.comment { + text-shadow: 0 0 5px black; + font-size: 3rem; + position: relative; + left: -25px; + top: -10px; +} +.marker-link{ + color: #007bff; + font-weight: bold; + cursor: pointer; +} +.marker-link:hover{ + text-decoration: underline; + color: #0056b3; +} \ No newline at end of file