diff --git a/res/colors.less b/res/colors.less
new file mode 100644
index 0000000..a010051
--- /dev/null
+++ b/res/colors.less
@@ -0,0 +1,21 @@
+// Colors from picnic's github
+@aqua: #7fdbff;
+@blue: #0074d9;
+@navy: #001f3f;
+@teal: #39cccc;
+@green: #2ecc40;
+@olive: #3d9970;
+@lime: #01ff70;
+
+@yellow: #ffdc00;
+@orange: #ff851b;
+@red: #ff4136;
+@fuchsia: #f012be;
+@purple: #b10dc9;
+@maroon: #85144b;
+
+@white: #fff;
+@silver: #ddd;
+@gray: #aaa;
+@black: #111;
+
diff --git a/res/main.html b/res/main.html
index 50a860d..53af99f 100644
--- a/res/main.html
+++ b/res/main.html
@@ -6,7 +6,6 @@
- My First App
diff --git a/res/main.less b/res/main.less
index 02ec05f..2274019 100644
--- a/res/main.less
+++ b/res/main.less
@@ -1,192 +1,177 @@
-@title-color: #cc3366;
-@line-image: "./line.png";
+@import (less) "picnic.css";
+@import (less) "colors.less";
.translation-element-margin {
- margin: 0 0.3em;
- padding: 0;
+ margin: 0 0.3em;
+ padding: 0;
}
.translation-button {
- width: 1.5em;
- height: 1.5em;
- border: 1px solid #ccc;
+ width: 1.5em;
+ height: 1.5em;
+ border: 1px solid #ccc;
}
-.elm-div {
- clear: both;
- overflow: auto;
- margin-bottom: 1em;
+._hoverable {
+ &:hover {
+ background-color: @silver;
+ cursor: pointer;
+ }
}
+// do I need this @ lexonomy?
+// .elm-div {
+// clear: both;
+// overflow: auto;
+// margin-bottom: 1em;
+// }
+
#entry {
- #entry-header {
- display: block;
- margin-bottom: 1em;
-
- #headword {
- font-size: 1.2em;
- color: @title-color;
- font-weight: bold;
- }
+ #entry-header {
+ // DONE!
+ display: block;
+ margin-bottom: 1em;
- #grammar {
- color: #666666;
- font-style: italic;
- margin-left: 1em;
- }
+ #headword {
+ font-size: 1.2em;
+ color: @blue;
+ font-weight: bold;
+ }
+
+ #grammar {
+ color: @gray;
+ font-style: italic;
+ margin-left: 1em;
+ }
- #comment {
- background-color: #e9d76d;
- padding: 0.5em;
- float: right;
- cursor: pointer;
+ #comment {
+ border-radius: 0em;
+ float: right;
- &:before {
- content: "Opomba: "
- }
- }
+ &:before {
+ content: "Opomba: "
+ }
}
+ }
- #sense-container {
- border-top: 1px dotted #999999;
- padding-top: 0.5em;
- margin-top: 0.5em;
+ #sense-container {
+ border-top: 1px dotted #999999;
+ padding-top: 0.5em;
+ margin-top: 0.5em;
- .sense-num {
- float: left;
- }
+ .sense-num {
+ float: left;
+ }
- .sense {
- margin-left: 2em;
-
- .sense-definition {
- display: inline;
- cursor: pointer;
- margin: 0 0.2em;
-
- &:hover {
- background-color: #CCCCCC;
- }
- &:after {
- content: ")";
- }
- &:before {
- content: "(";
- }
-
- }
-
- .sense-label {
- display: inline;
- cursor: pointer;
- margin: 0 0.2em;
- color: lightgreen;
- font-size: 0.8em;
-
- &:hover {
- background-color: #CCCCCC;
- }
- }
-
- .translation-div {
- display: inline;
-
- .translation-tags {
- display: inline;
- color: green;
- font-size: 0.6em;
- }
-
- .translation-text {
- cursor: pointer;
- display: inline;
- color: blue;
- .translation-element-margin();
-
- }
-
- select {
- .translation-element-margin();
- .translation-button();
-
- border: 1px solid #ccc;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
-
- background-size: 100%;
- background-repeat: repeat-y;
- color: rgba(0,0,0,0);
- background-image: data-uri(@line-image); //url(line.png);
- }
-
- &:hover {
- background-color: #CCCCCC;
- }
- }
-
- .translation-add {
- .translation-element-margin();
- .translation-button();
- }
+ .sense {
+ margin-left: 2em;
+
+ .sense-definition {
+ //done!
+ margin-left: 0.4em;
+
+ ._hoverable();
+ &:after {
+ content: ")";
}
-
- .example {
- .example-dot, .example-rest {
- float: left;
- }
-
- .example-arrow, .example-dot {
- margin-right: 1em;
- }
+ &:before {
+ content: "(";
}
- }
-}
+ }
-#xml-status {
- margin-left: 3em;
- height: 1em;
- margin-bottom: -1em;
- font-size: 1em;
-}
+ .sense-label {
+ // done!
+ color: @blue;
+ ._hoverable();
+ }
-.xml-status-bad { color: red; }
-.xml-status-good { color: green; }
-.xml-status-wait { color: yellow; }
+ .translation-div {
+ display: inline;
+ .translation-tags {
+ display: inline;
+ color: @green;
+ font-size: 0.6em;
+ }
-#log {
- overflow: scroll;
- border: 2px solid red;
- height: 10em;
+ .translation-text {
+ display: inline;
+ color: @maroon;
+ .translation-element-margin();
+ }
- :nth-last-child(odd) {
- background-color: lightgray;
+ ._hoverable();
+ }
+
+ .translation-add {
+ .translation-element-margin();
+ .translation-button();
+ }
}
-}
-// sweet modal edit entry
+ .example {
+ .example-dot, .example-rest {
+ float: left;
+ }
-.tag-div {
- .tag-key {
- width: 10em;
- display: inline-block
+ .example-arrow, .example-dot {
+ margin-right: 1em;
+ }
}
+ }
+}
- .tag-input {
- margin-left: 1em;
- width: 9em;
- }
+// if span left of input it is just too high, this is a fix
+.span-left-of-input {
+ margin-top: 0.3em;
+}
- select {
- width: 9em;
- }
+// if modal on full screen, it gets too small
+@media (min-width: 60em) {
+ .modal > article {
+ width: 40em;
+ }
}
-#cluster-group-div {
- margin-top: 1em;
- span {
- width: 10em;
- display: inline-block
- }
+// TODO:
+// #log {
+// overflow: scroll;
+// border: 2px solid red;
+// height: 10em;
+//
+// :nth-last-child(odd) {
+// background-color: lightgray;
+// }
+// }
+
+.popup-menu {
+ // DONE!
+ position: absolute;
+
+ //better look with border
+ padding: 0 0.2em;
+ border: 1px solid @silver;
+ background-color: @white;
+ border-radius: 0.2em;
+
+ // by default hidden
+ visibility: hidden;
+ opacity: 0;
+ transition: visibility 0s, opacity 0.1s linear;
+
+ button {
+ margin-right: 0.1em; // space inbetween them
+ margin-left: 0.1em;
+
+ padding: 0.1em 0.5em; // a little smaller than usual button
+ }
+}
+
+// remove me
+.blk {
+ &:before {
+ content: '\a';
+ white-space: pre;
+ }
+ display: block;
}