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
pull/1/head
Ozbolt Menegatti 5 years ago
parent 8d7bc60e78
commit b37290d733
3 changed files with 165 additions and 160 deletions
Show Stats Download Patch File Download Diff File

21
res/colors.less
Unescape 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
Unescape 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>

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

Write Preview
Loading…
Cancel
Save