aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/css
diff options
context:
space:
mode:
authorHsieh Chin Fan <pham@topo.tw>2024-08-13 23:58:38 +0800
committerHsieh Chin Fan <pham@topo.tw>2024-09-07 17:02:01 +0800
commit15a939d234910016d36d4297ec14de51c96168ce (patch)
tree4b3fe24f842485242949c19e3b2d0c078cae7797 /src/css
Initial Commit
Diffstat (limited to 'src/css')
l---------src/css/css1
-rw-r--r--src/css/dumbymap.css206
-rw-r--r--src/css/index.css80
-rw-r--r--src/css/style.css114
-rw-r--r--src/css/tiny-mde.min.css1
5 files changed, 402 insertions, 0 deletions
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 @@
1[class^="leader-line"] {
2 z-index: 9999;
3}
4
5.with-leader-line:not(:has(> *)) {
6 display: inline-block;
7 left: 0px;
8 top: 0px;
9
10 padding-right: 15px;
11 padding-left: 6px;
12
13 background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cG9seWdvbiBwb2ludHM9IjI0LDAgMCw4IDgsMTEgMCwxOSA1LDI0IDEzLDE2IDE2LDI0IiBmaWxsPSJjb3JhbCIvPjwvc3ZnPg==");
14 background-size: 12px 12px;
15 background-repeat: no-repeat;
16 background-position: right 2px top 2px;
17 color: #555;
18
19 &.geolink {
20 background-color: rgb(248, 248, 129);
21 }
22 &.doclink {
23 background-color: #9ee7ea;
24 }
25
26 &:hover {
27 padding-right: 6px;
28 background-image: none;
29
30 font-weight: bolder;
31 text-decoration: none;
32 }
33}
34
35.result-html {
36 position: relative;
37 max-width: 60em;
38 margin: 0 auto;
39 padding: 0;
40 display: flex;
41 overflow-x: scroll;
42 /* height: 100vh; */
43
44 #map {
45 flex: 0;
46 #mapPlaceholder {
47 display: none;
48 }
49 }
50
51 #markdown {
52 flex: 1;
53 padding: 20px;
54 overflow-y: scroll;
55
56 > .draggable-block {
57 width: 100%;
58 position: relative;
59 pointer-events: auto;
60 border-radius: 0.5rem;
61 padding: 0.5rem;
62 background-color: white;
63 margin-bottom: 3rem;
64
65 * {
66 width: fit-content;
67 }
68
69 .draggable {
70 display: none;
71 }
72 }
73
74 pre:has(.map-container) {
75 display: flex;
76 justify-content: flex-start;
77 width: 100%;
78 background-color: inherit;
79 }
80
81 .map-container {
82 margin: 2px;
83 &.focus {
84 border: solid gray;
85 }
86 }
87
88 #mapPlaceholder {
89 flex: 1;
90 display: flex;
91 justify-content: center;
92 align-items: center;
93 background-color: lightgray;
94 > * {
95 width: fit-content;
96 flex: 0 0;
97 }
98 }
99 }
100
101 :has(> .map-container) {
102 display: flex;
103 width: fit-content;
104 }
105
106 #map .map-container {
107 width: 100% !important;
108 height: 100% !important;
109 }
110}
111
112.result-html[data-layout]:not([data-layout=none]) {
113 margin: 0;
114
115 height: 100vh;
116 width: 100%;
117 max-width: none;
118 border: none;
119
120 & ~ :not(.leader-line) {
121 display: none;
122 pointer-events: none;
123 }
124}
125
126.result-html[data-layout=side] {
127 #map,
128 #markdown {
129 flex: 50%;
130 overflow-y: scroll;
131 height: 100vh;
132 }
133}
134
135.result-html[data-layout=overlay] {
136 #map,
137 #markdown {
138 position: fixed;
139 height: 100%;
140 width: 100%;
141 }
142
143 #markdown {
144 font-size: 12px;
145 pointer-events: none;
146
147 > .draggable-block {
148 box-sizing: content-box;
149 width: fit-content;
150 max-height: 50vh;
151 overflow: scroll;
152 border: solid gray;
153
154 * {
155 max-width: calc(100vw/4);
156 }
157
158 .draggable {
159 width: 100%;
160 display: block;
161 top: 0;
162 left: 0;
163 position: sticky;
164 margin-bottom: -18px;
165 opacity: 0.3;
166 transform: translate(0, -16px);
167 text-align: center;
168 z-index: 100;
169 transition: all 0.3s ease-out;
170 &:hover {
171 background-color: lightgray;
172 }
173 }
174 }
175 > :not(.draggable-block) {
176 display: none;
177 }
178 }
179}
180
181*:has(> nav) {
182 position: absolute;
183 right: 10px;
184 bottom: 10px;
185 /* FIXME */
186 display: none;
187
188 padding: 0.5rem;
189 min-width: 120px;
190 border: 2px solid gray;
191 border-radius: 0.5rem;
192 background-color: white;
193 z-index: 500;
194
195 &:has(> nav:empty) {
196 display: none;
197 }
198 ol {
199 margin-top: 0;
200 margin-bottom: 0.5rem;
201 }
202}
203
204.bold-options {
205 font-weight: bold;
206}
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 @@
1body {
2 display: flex;
3 justify-items: stretch;
4}
5
6.result-html {
7 flex: 1;
8 height: calc(100vh - 20px);
9 border: solid lightgray 2px;
10 border-radius: 5px;
11 margin: 10px;
12}
13
14.editor {
15 flex: 1;
16 max-width: 50vw;
17 margin: 10px;
18}
19
20.TinyMDE {
21 height: calc(100vh - 55px);
22 padding: 16px;
23 overflow-y: scroll;
24 border: 2px solid lightgray;
25 border-radius: 5px;
26
27 span {
28 white-space: pre;
29 }
30 .invalid-input {
31 text-decoration: red wavy underline 1px;
32 }
33}
34
35.container__suggestions {
36 display: none;
37 position: absolute;
38 width: fit-content;
39 min-width: 10rem;
40 max-height: 40vh;
41 overflow-y: scroll;
42 border: 2px solid lightgray;
43 border-radius: 0.5rem;
44
45 background: #fff;
46}
47.container__suggestion {
48 cursor: pointer;
49 display: flex;
50 justify-content: space-between;
51 overflow: hidden;
52
53 height: fit-content;
54 min-height: 2rem;
55 white-space: nowrap;
56 align-items: center;
57
58 * {
59 flex-shrink: 0;
60 display: inline-block;
61 overflow: hidden;
62 padding-inline: 1em;
63 }
64 .info {
65 color: #4682B4;
66 font-weight: bold;
67 }
68 .truncate {
69 text-overflow: ellipsis;
70 ::before {
71 width: 2rem
72 }
73 }
74}
75.container__suggestion:not(:first-child) {
76 border-top: 1px solid rgb(203 213 225);
77}
78.container__suggestion.focus {
79 background: rgb(226 232 240);
80}
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 @@
1/* CSS Reset */
2*, *::before, *::after {
3 box-sizing: border-box;
4}
5
6* {
7 margin: 0;
8 line-height: calc(1em + 0.5rem);
9}
10
11img, picture, video, canvas, svg {
12 display: block;
13 max-width: 100%;
14}
15
16input, button, textarea, select {
17 font: inherit;
18}
19
20p, h1, h2, h3, h4, h5, h6 {
21 overflow-wrap: break-word;
22 hyphens: auto;
23}
24/* End of Reset */
25
26body {
27 font-family: sans-serif;
28 line-height: 1.6;
29}
30
31h1, h2, h3, h4, h5, h6 {
32 font-weight: bold;
33 margin-bottom: 0.5em;
34}
35
36h1 {
37 font-size: 2em;
38}
39
40h2 {
41 font-size: 1.5em;
42}
43
44h3 {
45 font-size: 1.25em;
46}
47
48p {
49 margin-top: 1em;
50 margin-bottom: 1em;
51}
52
53a {
54 color: #007bff;
55 text-decoration: none;
56}
57
58a:hover {
59 text-decoration: underline;
60}
61
62pre:has([class^="language-"]) {
63 min-width: 400px;
64 display: block;
65 padding: 9.5px;
66 margin: 0 0 10px;
67 font-size: 13px;
68 line-height: 1.42857143;
69 color: #333;
70 word-break: break-all;
71 word-wrap: break-word;
72 background-color: #f5f5f5;
73 border: 1px solid #ccc;
74 border-radius: 4px;
75
76 code {
77 padding: 0;
78 font-size: inherit;
79 color: inherit;
80 white-space: pre-wrap;
81 background-color: transparent;
82 border-radius: 0;
83 }
84}
85
86ul, ol {
87 margin-top: 1em;
88 margin-bottom: 1em;
89 padding-left: 20px;
90}
91
92li {
93 margin-bottom: 0.5em;
94}
95
96table {
97 border-collapse: collapse;
98 width: 100%;
99}
100
101th, td {
102 border: 1px solid #ddd;
103 padding: 8px;
104 text-align: left;
105}
106
107th {
108 background-color: #f0f0f0;
109}
110
111img {
112 max-width: 100%;
113 height: auto;
114}
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}}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-07-04 02:10:12 +0800