lexonomy/lexonomy_custom_editor
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

WIP: Updating css and html. Now using picnic!

Browse Source
This commit is contained in:
Ozbolt Menegatti 2019-11-11 22:58:34 +01:00
parent 8d7bc60e78
commit b37290d733
3 changed files with 172 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
res/colors.less Normal file
View File

@ -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;

1
res/main.html
View File

@ -6,7 +6,6 @@
<link rel="stylesheet" href="main.css" />
</head>
<body>
<h1>My First App</h1>
<div id="app"></div>
<script src="bundle.js"></script>
</body>

317
res/main.less
View File

@ -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;
#entry-header {
// DONE!
display: block;
margin-bottom: 1em;
#headword {
font-size: 1.2em;
color: @title-color;
font-weight: bold;
}
#grammar {
color: #666666;
font-style: italic;
margin-left: 1em;
}
#comment {
background-color: #e9d76d;
padding: 0.5em;
float: right;
cursor: pointer;
&:before {
content: "Opomba: "
}
}
#headword {
font-size: 1.2em;
color: @blue;
font-weight: bold;
}
#sense-container {
border-top: 1px dotted #999999;
padding-top: 0.5em;
margin-top: 0.5em;
.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();
}
}
.example {
.example-dot, .example-rest {
float: left;
}
.example-arrow, .example-dot {
margin-right: 1em;
}
}
#grammar {
color: @gray;
font-style: italic;
margin-left: 1em;
}
#comment {
border-radius: 0em;
float: right;
&:before {
content: "Opomba: "
}
}
}
#sense-container {
border-top: 1px dotted #999999;
padding-top: 0.5em;
margin-top: 0.5em;
.sense-num {
float: left;
}
.sense {
margin-left: 2em;
.sense-definition {
//done!
margin-left: 0.4em;
._hoverable();
&:after {
content: ")";
}
&:before {
content: "(";
}
}
.sense-label {
// done!
color: @blue;
._hoverable();
}
.translation-div {
display: inline;
.translation-tags {
display: inline;
color: @green;
font-size: 0.6em;
}
.translation-text {
display: inline;
color: @maroon;
.translation-element-margin();
}
._hoverable();
}
.translation-add {
.translation-element-margin();
.translation-button();
}
}
.example {
.example-dot, .example-rest {
float: left;
}
.example-arrow, .example-dot {
margin-right: 1em;
}
}
}
}
#xml-status {
margin-left: 3em;
height: 1em;
margin-bottom: -1em;
font-size: 1em;
// if span left of input it is just too high, this is a fix
.span-left-of-input {
margin-top: 0.3em;
}
.xml-status-bad { color: red; }
.xml-status-good { color: green; }
.xml-status-wait { color: yellow; }
#log {
overflow: scroll;
border: 2px solid red;
height: 10em;
:nth-last-child(odd) {
background-color: lightgray;
}
// if modal on full screen, it gets too small
@media (min-width: 60em) {
.modal > article {
width: 40em;
}
}
// sweet modal edit entry
// TODO:
// #log {
// overflow: scroll;
// border: 2px solid red;
// height: 10em;
//
// :nth-last-child(odd) {
// background-color: lightgray;
// }
// }
.tag-div {
.tag-key {
width: 10em;
display: inline-block
}
.popup-menu {
// DONE!
position: absolute;
.tag-input {
margin-left: 1em;
width: 9em;
}
//better look with border
padding: 0 0.2em;
border: 1px solid @silver;
background-color: @white;
border-radius: 0.2em;
select {
width: 9em;
}
// 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
}
}
#cluster-group-div {
margin-top: 1em;
span {
width: 10em;
display: inline-block
}
// remove me
.blk {
&:before {
content: '\a';
white-space: pre;
}
display: block;
}