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>

151
res/main.less
View File

@ -1,5 +1,5 @@
@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;
@ -12,34 +12,41 @@
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 {
// DONE!
display: block; display: block;
margin-bottom: 1em; 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 { #grammar {
color: #666666; color: @gray;
font-style: italic; font-style: italic;
margin-left: 1em; 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: "
@ -60,32 +67,22 @@
margin-left: 2em; margin-left: 2em;
.sense-definition { .sense-definition {
display: inline; //done!
cursor: pointer; margin-left: 0.4em;
margin: 0 0.2em;
&:hover { ._hoverable();
background-color: #CCCCCC;
}
&:after { &:after {
content: ")"; content: ")";
} }
&:before { &:before {
content: "("; content: "(";
} }
} }
.sense-label { .sense-label {
display: inline; // done!
cursor: pointer; color: @blue;
margin: 0 0.2em; ._hoverable();
color: lightgreen;
font-size: 0.8em;
&:hover {
background-color: #CCCCCC;
}
} }
.translation-div { .translation-div {
@ -93,36 +90,17 @@
.translation-tags { .translation-tags {
display: inline; display: inline;
color: green; color: @green;
font-size: 0.6em; font-size: 0.6em;
} }
.translation-text { .translation-text {
cursor: pointer;
display: inline; display: inline;
color: blue; color: @maroon;
.translation-element-margin(); .translation-element-margin();
} }
select { ._hoverable();
.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-add {
@ -143,50 +121,57 @@
} }
} }
#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;
} }