From 15a939d234910016d36d4297ec14de51c96168ce Mon Sep 17 00:00:00 2001 From: Hsieh Chin Fan Date: Tue, 13 Aug 2024 23:58:38 +0800 Subject: Initial Commit --- src/css/css | 1 + src/css/dumbymap.css | 206 +++++++++++++++++++++++++++++++++++++++++++++++ src/css/index.css | 80 ++++++++++++++++++ src/css/style.css | 114 ++++++++++++++++++++++++++ src/css/tiny-mde.min.css | 1 + 5 files changed, 402 insertions(+) create mode 120000 src/css/css create mode 100644 src/css/dumbymap.css create mode 100644 src/css/index.css create mode 100644 src/css/style.css create mode 100644 src/css/tiny-mde.min.css (limited to 'src/css') diff --git a/src/css/css b/src/css/css new file mode 120000 index 0000000..9913b8c --- /dev/null +++ b/src/css/css @@ -0,0 +1 @@ +/home/pham/git/dumbymap/src/css \ No newline at end of file diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css new file mode 100644 index 0000000..bfdcc2b --- /dev/null +++ b/src/css/dumbymap.css @@ -0,0 +1,206 @@ +[class^="leader-line"] { + z-index: 9999; +} + +.with-leader-line:not(:has(> *)) { + display: inline-block; + left: 0px; + top: 0px; + + padding-right: 15px; + padding-left: 6px; + + background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cG9seWdvbiBwb2ludHM9IjI0LDAgMCw4IDgsMTEgMCwxOSA1LDI0IDEzLDE2IDE2LDI0IiBmaWxsPSJjb3JhbCIvPjwvc3ZnPg=="); + background-size: 12px 12px; + background-repeat: no-repeat; + background-position: right 2px top 2px; + color: #555; + + &.geolink { + background-color: rgb(248, 248, 129); + } + &.doclink { + background-color: #9ee7ea; + } + + &:hover { + padding-right: 6px; + background-image: none; + + font-weight: bolder; + text-decoration: none; + } +} + +.result-html { + position: relative; + max-width: 60em; + margin: 0 auto; + padding: 0; + display: flex; + overflow-x: scroll; + /* height: 100vh; */ + + #map { + flex: 0; + #mapPlaceholder { + display: none; + } + } + + #markdown { + flex: 1; + padding: 20px; + overflow-y: scroll; + + > .draggable-block { + width: 100%; + position: relative; + pointer-events: auto; + border-radius: 0.5rem; + padding: 0.5rem; + background-color: white; + margin-bottom: 3rem; + + * { + width: fit-content; + } + + .draggable { + display: none; + } + } + + pre:has(.map-container) { + display: flex; + justify-content: flex-start; + width: 100%; + background-color: inherit; + } + + .map-container { + margin: 2px; + &.focus { + border: solid gray; + } + } + + #mapPlaceholder { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + background-color: lightgray; + > * { + width: fit-content; + flex: 0 0; + } + } + } + + :has(> .map-container) { + display: flex; + width: fit-content; + } + + #map .map-container { + width: 100% !important; + height: 100% !important; + } +} + +.result-html[data-layout]:not([data-layout=none]) { + margin: 0; + + height: 100vh; + width: 100%; + max-width: none; + border: none; + + & ~ :not(.leader-line) { + display: none; + pointer-events: none; + } +} + +.result-html[data-layout=side] { + #map, + #markdown { + flex: 50%; + overflow-y: scroll; + height: 100vh; + } +} + +.result-html[data-layout=overlay] { + #map, + #markdown { + position: fixed; + height: 100%; + width: 100%; + } + + #markdown { + font-size: 12px; + pointer-events: none; + + > .draggable-block { + box-sizing: content-box; + width: fit-content; + max-height: 50vh; + overflow: scroll; + border: solid gray; + + * { + max-width: calc(100vw/4); + } + + .draggable { + width: 100%; + display: block; + top: 0; + left: 0; + position: sticky; + margin-bottom: -18px; + opacity: 0.3; + transform: translate(0, -16px); + text-align: center; + z-index: 100; + transition: all 0.3s ease-out; + &:hover { + background-color: lightgray; + } + } + } + > :not(.draggable-block) { + display: none; + } + } +} + +*:has(> nav) { + position: absolute; + right: 10px; + bottom: 10px; + /* FIXME */ + display: none; + + padding: 0.5rem; + min-width: 120px; + border: 2px solid gray; + border-radius: 0.5rem; + background-color: white; + z-index: 500; + + &:has(> nav:empty) { + display: none; + } + ol { + margin-top: 0; + margin-bottom: 0.5rem; + } +} + +.bold-options { + font-weight: bold; +} diff --git a/src/css/index.css b/src/css/index.css new file mode 100644 index 0000000..adc1cfe --- /dev/null +++ b/src/css/index.css @@ -0,0 +1,80 @@ +body { + display: flex; + justify-items: stretch; +} + +.result-html { + flex: 1; + height: calc(100vh - 20px); + border: solid lightgray 2px; + border-radius: 5px; + margin: 10px; +} + +.editor { + flex: 1; + max-width: 50vw; + margin: 10px; +} + +.TinyMDE { + height: calc(100vh - 55px); + padding: 16px; + overflow-y: scroll; + border: 2px solid lightgray; + border-radius: 5px; + + span { + white-space: pre; + } + .invalid-input { + text-decoration: red wavy underline 1px; + } +} + +.container__suggestions { + display: none; + position: absolute; + width: fit-content; + min-width: 10rem; + max-height: 40vh; + overflow-y: scroll; + border: 2px solid lightgray; + border-radius: 0.5rem; + + background: #fff; +} +.container__suggestion { + cursor: pointer; + display: flex; + justify-content: space-between; + overflow: hidden; + + height: fit-content; + min-height: 2rem; + white-space: nowrap; + align-items: center; + + * { + flex-shrink: 0; + display: inline-block; + overflow: hidden; + padding-inline: 1em; + } + .info { + color: #4682B4; + font-weight: bold; + } + .truncate { + text-overflow: ellipsis; + ::before { + width: 2rem + } + } +} +.container__suggestion:not(:first-child) { + border-top: 1px solid rgb(203 213 225); +} +.container__suggestion.focus { + background: rgb(226 232 240); +} diff --git a/src/css/style.css b/src/css/style.css new file mode 100644 index 0000000..e650c1e --- /dev/null +++ b/src/css/style.css @@ -0,0 +1,114 @@ +/* CSS Reset */ +*, *::before, *::after { + box-sizing: border-box; +} + +* { + margin: 0; + line-height: calc(1em + 0.5rem); +} + +img, picture, video, canvas, svg { + display: block; + max-width: 100%; +} + +input, button, textarea, select { + font: inherit; +} + +p, h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; + hyphens: auto; +} +/* End of Reset */ + +body { + font-family: sans-serif; + line-height: 1.6; +} + +h1, h2, h3, h4, h5, h6 { + font-weight: bold; + margin-bottom: 0.5em; +} + +h1 { + font-size: 2em; +} + +h2 { + font-size: 1.5em; +} + +h3 { + font-size: 1.25em; +} + +p { + margin-top: 1em; + margin-bottom: 1em; +} + +a { + color: #007bff; + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +pre:has([class^="language-"]) { + min-width: 400px; + display: block; + padding: 9.5px; + margin: 0 0 10px; + font-size: 13px; + line-height: 1.42857143; + color: #333; + word-break: break-all; + word-wrap: break-word; + background-color: #f5f5f5; + border: 1px solid #ccc; + border-radius: 4px; + + code { + padding: 0; + font-size: inherit; + color: inherit; + white-space: pre-wrap; + background-color: transparent; + border-radius: 0; + } +} + +ul, ol { + margin-top: 1em; + margin-bottom: 1em; + padding-left: 20px; +} + +li { + margin-bottom: 0.5em; +} + +table { + border-collapse: collapse; + width: 100%; +} + +th, td { + border: 1px solid #ddd; + padding: 8px; + text-align: left; +} + +th { + background-color: #f0f0f0; +} + +img { + max-width: 100%; + height: auto; +} diff --git a/src/css/tiny-mde.min.css b/src/css/tiny-mde.min.css new file mode 100644 index 0000000..f317628 --- /dev/null +++ b/src/css/tiny-mde.min.css @@ -0,0 +1 @@ +.TinyMDE{background-color:#fff;color:#000;font-size:16px;line-height:24px;outline:none;padding:5px}.TMBlankLine{height:24px}.TMH1,.TMSetextH1{font-size:22px;font-weight:700;line-height:32px;margin-bottom:8px}.TMSetextH1{margin-bottom:0}.TMSetextH1Marker{margin-bottom:8px}.TMH2,.TMSetextH2{font-size:20px;font-weight:700;line-height:28px;margin-bottom:4px}.TMMark_TMCode{font-family:monospace;font-size:.9em}.TMCode,.TMFencedCodeBacktick,.TMFencedCodeTilde,.TMIndentedCode{background-color:#e0e0e0;font-family:monospace;font-size:.9em}.TMCodeFenceBacktickOpen,.TMCodeFenceTildeOpen{border-bottom:1px solid silver;font-family:monospace;font-size:.9em}.TMCodeFenceBacktickClose,.TMCodeFenceTildeClose{border-top:1px solid silver;font-family:monospace;font-size:.9em}.TMInfoString{color:#00f}.TMCode{border:1px solid silver;border-radius:2px}.TMBlockquote{border-left:2px solid silver;font-style:italic;margin-left:10px;padding-left:10px}.TMMark{color:#a0a0a0}.TMMark_TMH1,.TMMark_TMH2,.TMMark_TMOL,.TMMark_TMUL{color:#ff8080}.TMImage{text-decoration:underline;text-decoration-color:#0f0}.TMLink{text-decoration:underline;text-decoration-color:#00f}.TMLinkLabel{font-family:monospace;text-decoration:underline}.TMLinkLabel_Definition,.TMLinkLabel_Valid{color:#40c040}.TMLinkLabel_Invalid{color:red}.TMLinkTitle{font-style:italic}.TMAutolink,.TMLinkDestination{color:#00f;text-decoration:underline}.TMHR{position:relative}.TMHR:before{border-bottom:2px solid grey;bottom:50%;content:"";left:40%;position:absolute;width:20%;z-index:0}.TMHTML,.TMHTMLBlock{color:#8000ff;font-family:monospace;font-size:.9em}.TMHTMLBlock{color:#6000c0}.TMCommandBar{-ms-overflow-style:none;background-color:#f8f8f8;border:4px solid #f8f8f8;box-sizing:content-box;display:flex;height:24px;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;-webkit-user-select:none;user-select:none}.TMCommandBar::-webkit-scrollbar{display:none}.TMCommandButton{fill:#404040;box-sizing:border-box;color:#404040;cursor:pointer;display:inline-block;font-family:sans-serif;font-size:20px;height:24px;line-height:18px;margin-right:4px;padding:3px;text-align:center;vertical-align:middle;width:24px}.TMCommandDivider{border-left:1px solid silver;border-right:1px solid #fff;box-sizing:content-box;height:24px;margin-left:4px;margin-right:8px;width:0}.TMCommandButton_Active{fill:navy;background-color:#c0c0ff;color:navy;font-weight:700}.TMCommandButton_Inactive{background-color:#f8f8f8}.TMCommandButton_Disabled{fill:#a0a0a0;color:#a0a0a0}@media (hover:hover){.TMCommandButton_Active:hover,.TMCommandButton_Disabled:hover,.TMCommandButton_Inactive:hover{fill:#000;background-color:#e0e0ff}} -- cgit v1.2.3-70-g09d2