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" /> <link rel="stylesheet" href="main.css" />
</head> </head>
<body> <body>
<h1>My First App</h1>
<div id="app"></div> <div id="app"></div>
<script src="bundle.js"></script> <script src="bundle.js"></script>
</body> </body>

317
res/main.less
View File

@ -1,192 +1,177 @@
@title-color: #cc3366; @import (less) "picnic.css";
@line-image: "./line.png"; @import (less) "colors.less";
.translation-element-margin { .translation-element-margin {
margin: 0 0.3em; margin: 0 0.3em;
padding: 0; padding: 0;
} }
.translation-button { .translation-button {
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;
border: 1px solid #ccc; border: 1px solid #ccc;
} }
.elm-div { ._hoverable {
clear: both; &:hover {
overflow: auto; background-color: @silver;
margin-bottom: 1em; cursor: pointer;
}
} }
// do I need this @ lexonomy?
// .elm-div {
// clear: both;
// overflow: auto;
// margin-bottom: 1em;
// }
#entry { #entry {
#entry-header { #entry-header {
display: block; // DONE!
margin-bottom: 1em; display: block;
margin-bottom: 1em;
#headword { #headword {
font-size: 1.2em; font-size: 1.2em;
color: @title-color; color: @blue;
font-weight: bold; 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: "
}
}
} }
#sense-container { #grammar {
border-top: 1px dotted #999999; color: @gray;
padding-top: 0.5em; font-style: italic;
margin-top: 0.5em; margin-left: 1em;
.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;
}
}
} }
#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 { // if span left of input it is just too high, this is a fix
margin-left: 3em; .span-left-of-input {
height: 1em; margin-top: 0.3em;
margin-bottom: -1em;
font-size: 1em;
} }
.xml-status-bad { color: red; } // if modal on full screen, it gets too small
.xml-status-good { color: green; } @media (min-width: 60em) {
.xml-status-wait { color: yellow; } .modal > article {
width: 40em;
}
#log {
overflow: scroll;
border: 2px solid red;
height: 10em;
:nth-last-child(odd) {
background-color: lightgray;
}
} }
// sweet modal edit entry // TODO:
// #log {
// overflow: scroll;
// border: 2px solid red;
// height: 10em;
//
// :nth-last-child(odd) {
// background-color: lightgray;
// }
// }
.tag-div { .popup-menu {
.tag-key { // DONE!
width: 10em; position: absolute;
display: inline-block
}
.tag-input { //better look with border
margin-left: 1em; padding: 0 0.2em;
width: 9em; border: 1px solid @silver;
} background-color: @white;
border-radius: 0.2em;
select { // by default hidden
width: 9em; 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 { // remove me
margin-top: 1em; .blk {
span { &:before {
width: 10em; content: '\a';
display: inline-block white-space: pre;
} }
display: block;
} }