WIP: Updating css and html. Now using picnic!
This commit is contained in:
parent
8d7bc60e78
commit
b37290d733
21
res/colors.less
Normal file
21
res/colors.less
Normal 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;
|
||||
|
||||
@ -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
317
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;
|
||||
#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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user