css refactoring, cleaning up

Makefile

@@ -3,13 +3,16 @@ BIN := $(shell npm bin)
 TSC := $(BIN)/tsc
 LESSC := $(BIN)/lessc
 ESBUILD := $(BIN)/esbuild
-GCC := $(BIN)/google-closure-compiler
 
 JS := .js
 FLAG := $(JS)/.tsflag
 APP := my-mind.js
+STYLE := my-mind.css map.css
 
-all: $(APP)
+all: $(APP) $(STYLE)
+
+%.css: css/*.less
+	$(LESSC) css/$*.less > $@
 
 $(APP): $(FLAG)
 	$(ESBUILD) --bundle $(JS)/$(APP) > $@
@@ -19,9 +22,9 @@ $(FLAG): $(shell find src -type f)
 	touch $@
 
 watch: all
-	while inotifywait -e MODIFY -r src ; do $(MAKE) $^ ; done
+	while inotifywait -e MODIFY -r src css ; do $(MAKE) $^ ; done
 
 clean:
-	rm -rf $(JS) $(APP)
+	rm -rf $(JS) $(APP) $(STYLE)
 
 .PHONY: all clean watch

css/context-menu.less

@@ -0,0 +1,26 @@
+#context-menu {
+ 	&:not([hidden]) { display: flex; }
+
+	position: absolute;
+	border: 1px solid #666;
+	background-color: #fff;
+	box-shadow: 0 0 3px #666;
+	flex-direction: column;
+	width: 130px;
+
+	button {
+		background-color: transparent;
+		border: none;
+		margin: 0;
+		padding: 3px 6px;
+		font-size: 15px;
+		text-align: left;
+		&:hover { font-weight: bold; }
+	}
+
+	span {
+		border-top: 1px solid #666;
+		margin-top: 4px;
+		padding-top: 4px;
+	}
+}

css/item.css → css/map.less

@@ -1,3 +1,7 @@
+* {
+	font-family: source sans pro, sans-serif;
+}
+
 .item.cut {
 	opacity: 0.5;
 }
@@ -81,10 +85,10 @@ canvas {
 .notes-indicator {
 	width: 16px;
 	height: 100%;
-	background: url("../icons/notes-indicator.png") right center no-repeat;
+	background: url("../img/notes-indicator.png") right center no-repeat; // fixme nefunguje v exportu
 	position: absolute;
 	top: -8px;
-	right: 0;
+	right: 0; // fixme dostava chybne margin zprava
 	opacity: 0.4;
 	display: none;
 }
@@ -126,3 +130,48 @@ canvas {
 :not(.current):not(.collapsed) > .toggle {
 	display: none;
 }
+
+[data-shape=box] > foreignObject > .content {
+	padding: 0.15em 0.4em;
+	background-color: #fff;
+	border: 1px solid #666;
+	border-radius: 3px;
+}
+
+[data-shape=ellipse] > foreignObject > .content {
+	background-color: #fff;
+	border: 1px solid #666;
+	border-radius: 50%;
+	padding: 0.5em 1em;
+}
+
+/* current */
+
+.current > foreignObject > .content {
+	background-color: rgba(255, 255, 187, 0.9);
+}
+
+/* root */
+
+svg {
+	font-size: 15px;
+}
+
+svg > .item > foreignObject > .content {
+	font-weight: bold;
+	border-width: 2px;
+	font-size: 140%;
+}
+
+svg > .item > .toggle {
+	display: none;
+}
+
+/* 1st children */
+
+svg > .item > .item > foreignObject > .content {
+	border-width: 2px;
+	font-size: 120%;
+}
+
+@import "font.less";

css/style.css → css/my-mind.less

@@ -1,8 +1,3 @@
-@import url(ui.css);
-@import url(item.css);
-@import url(shape.css);
-@import url(menu.css);
-
 * {
 	font-family: source sans pro, sans-serif;
 }
@@ -12,51 +7,46 @@ html, body {
 	overflow: hidden;
 	height: 100%;
 	background-color: #eed;
-	-webkit-user-select: none; /* no magnifier on hold */
+	-webkit-user-select: none; // no magnifier on hold
 }
 
-[contenteditable] { /* allow for editable items */
+[contenteditable] { // allow for editable items
 	-webkit-user-select: auto;
 }
 
-ul {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-}
-
 svg {
 	position: absolute;
-	overflow: visible; /* shadow */
+	overflow: visible; // shadow
 }
 
-#port {
-	overflow: hidden;
-	font-size: 15px;
+main {
+	position: relative; // anchor for #tip
+}
+
+button:not(:disabled) {
+	cursor: pointer;
 }
 
 #throbber {
 	position: absolute;
 	top: 50px;
 	left: -60px;
-	width: 50px;
-	height: 50px;
-	background-image: url(throbber.gif);
 }
 
 .ghost {
-	position: absolute !important; /* to prevent collision with .content */
+	position: absolute !important; // to prevent collision with .content
 	opacity: 0.5;
 	z-index: 1;
 }
 
 #tip {
-	position: fixed;
+	position: absolute;
 	z-index: 1;
 	left: 10px;
 	bottom: 5px;
 	transition: all 500ms;
 	font-size: 1rem; /* do not scale with map zoom */
+
 }
 
 #tip:before {
@@ -72,3 +62,8 @@ svg {
 #tip.hidden {
 	opacity: 0;
 }
+
+@import "font.less";
+@import "pane.less";
+@import "context-menu.less";
+@import "print.less" print;