From 02284958a1189ffcb10b34a4c3a02417f8136a4d Mon Sep 17 00:00:00 2001 From: Anson Bridges Date: Mon, 11 Aug 2025 22:24:05 -0700 Subject: Initialize git repo from local project files --- static/css/editor.css | 325 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 325 insertions(+) create mode 100644 static/css/editor.css (limited to 'static/css/editor.css') diff --git a/static/css/editor.css b/static/css/editor.css new file mode 100644 index 0000000..add8792 --- /dev/null +++ b/static/css/editor.css @@ -0,0 +1,325 @@ + +@font-face { + font-family: "HWYGOTH"; + src: url("/static/fonts/HWYGOTH.ttf"); +} +* { + font-family:HWYGOTH; +} +#map { height: 100%; } +* { +box-sizing: border-box; +} +html{ + padding:0; + margin: 0; + height:100%; +} + +body{ + padding:0; + margin: 0; + height: 100vh; + max-height:100vh; + margin:0px; + display:flex; + flex-direction: column; +} +.page-container { + display: flex; + height:100%; + flex-grow:0; +} +.page-container > div{ + padding: 8px; + } +.left-column { + /* flex:0.75 1 auto; */ + flex-basis:50%; + display: flex; + flex-direction: column; + gap: 5px; + max-height:100%; + min-height:0; +} +.tab-section { + flex: 1 1 50%; + display: flex; + flex-direction: column; + min-height:0; +} +.media-preview { + display: none; + flex: 0 0 50%; + overflow:hidden; + justify-content: center; + align-items: center; + min-height: 0; +} +.right-column { + /* flex:0.25 1 auto; */ + flex-grow:0; + flex-basis:50%; + display: flex; + flex-direction: column; + gap: 5px; +} +.right-column > div{ + border: 3px double lightgray; + padding: 0px; +} +.map-frame { + /* flex:0.2 1 auto; */ + flex-grow:1.0; +} +.content-info { + flex-basis:40%; +} + +.leaflet-popup-content { + color: black; +} +.leaflet-control-layers-overlays > label > span > span { + color: black; +} + + +.tab-header { +overflow: hidden; +border: 1px solid #ccc; +background-color: #f1f1f1; +} + +.tab-header button { +background-color: inherit; +float: left; +border: none; +outline: none; +padding: 14px 16px; +transition: 0.3s; +margin:0; +} + +.tab-header button:hover { +background-color: #ddd; +cursor: pointer; +} + +.tab-header button.active { +background-color: #ccc; +} + +.tab-content { + display: none; + margin:0; + height: 0; + flex-grow: 1; + min-height: 0; + border: 1px solid #ccc; + border-top: none; +} + +.media-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + gap: 15px; + padding: 20px; + height: 100%; +} + +.media { + position: relative; + border-radius: 5px; + aspect-ratio: 1; + transition: transform 0.2s, box-shadow 0.2s; + user-select: none; +} + +.media > img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +.media p { + margin-top:0; + margin-bottom:0; + text-align:center; + overflow:hidden; + text-overflow:ellipsis; +} + +.media::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 4px solid transparent; + transition: border-color 0.2s; +} + +.media.selected::after { + border-color: #4285f4; +} + +.media:hover { + transform: scale(1.03); + cursor: pointer; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); +} + +.media-timestamp { + color: grey; + font-size: 10pt; +} + +.leaflet-container.crosshair-cursor-enabled { + cursor:crosshair; +} + +.no-hover{ + pointer-events: none; +} + +.content-info-edit { + display: grid; + grid-template-columns: max-content 1fr; + gap: 8px 12px; + align-items: center; +} + +.content-info-edit-label { + margin-left: 10px; +} + +.content-info-edit-field { + margin-right: 10px; +} + +.delete-button { + color:brown; + text-align: right; + margin-right: 10px; + margin-top: 5px; + text-decoration: underline; +} + +.delete-button:hover { + cursor: pointer; +} + +#preview-img { + border-radius: 5px; + cursor: pointer; + transition: 0.3s; +} + +#preview-img:hover {opacity: 0.7;} + +/* The Modal (background) */ +.modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 10000; /* Sit on top */ + padding-top: 3%; + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ +} + +/* Modal Content (image) */ +.modal-content { + margin: auto; + display: block; + width: auto; + height: auto; + max-width: 95%; + max-height: 95%; +} + +/* Add Animation */ +.modal-content, #caption { + -webkit-animation-name: zoom; + -webkit-animation-duration: 0.6s; + animation-name: zoom; + animation-duration: 0.6s; +} + +@-webkit-keyframes zoom { + from {-webkit-transform:scale(0)} + to {-webkit-transform:scale(1)} +} + +@keyframes zoom { + from {transform:scale(0)} + to {transform:scale(1)} +} + +/* 100% Image Width on Smaller Screens */ +@media only screen and (max-width: 700px){ + .modal-content { + width: 100%; + } +} + +.share-box { + display: flex; + flex-direction:column; + width:30%; + min-width: 500px; + height: 70%; + background-color: white; + margin:auto; + border: 3px double lightgray; +} + +.user-share-section { + display: grid; + grid-template-columns: 65% 15% 10%; + grid-auto-rows: min-content; + row-gap: 10px; + column-gap: 5%; + padding: 15px; + flex: 1; + margin:10px; + border: 3px double lightgray; + width:auto; + overflow-y:auto; + overflow-x:hidden; +} + +.user-unshare-button { + cursor: pointer; + color: red; + text-decoration: underline; + margin-top: 0; + margin-bottom: 0; +} + +.collection-box { + display: flex; + flex-direction:column; + width:30%; + min-width: 500px; + height: 20%; + background-color: white; + margin:auto; + border: 3px double lightgray; +} + +.tab-filters { + padding-top:10px; + padding-bottom:10px; + border-bottom: 1px solid #ccc; + display: flex; + flex-direction: row; + padding-left:15px; + padding-right:15px; +} \ No newline at end of file -- cgit v1.2.3