forked from enviPath/enviPy
Current Dev State
This commit is contained in:
Tim Lorsbach
101
static/js/ketcher2/style/component.less
Normal file
101
static/js/ketcher2/style/component.less
Normal file
@ -0,0 +1,101 @@
|
||||
@import "variables";
|
||||
|
||||
.-Control {
|
||||
border-radius: 4px;
|
||||
|
||||
display: inline-block;
|
||||
//display: block;
|
||||
vertical-align: middle;
|
||||
|
||||
background: white;
|
||||
line-height: 20 / 14;
|
||||
height: 2.4em;
|
||||
padding: 0.35em 0.15em 0.35em 0.3em;
|
||||
margin: 2px;
|
||||
|
||||
border: 1px solid @border-color;
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
|
||||
box-sizing: border-box;
|
||||
// transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
||||
}
|
||||
|
||||
.-SelectList {
|
||||
&:extend(select all);
|
||||
li {
|
||||
display: block;
|
||||
padding: 0 2px 1px;
|
||||
cursor: default;
|
||||
&:hover {
|
||||
background-color: @form-hover-background;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: white;
|
||||
background-color: @form-selected-background;
|
||||
}
|
||||
|
||||
&.split {
|
||||
margin-top: 2px;
|
||||
padding-top: 2px;
|
||||
border-top: 1px @border-color solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.-Tabs {
|
||||
outline: none;
|
||||
.tabs {
|
||||
width: 100%;
|
||||
a {
|
||||
padding: 8px 12px;
|
||||
margin-right: 2px;
|
||||
line-height: 14px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
background-color: #eee;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px 4px 0 0;
|
||||
&:hover {
|
||||
background-color: #9dc2d0;
|
||||
}
|
||||
&.active {
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-color: transparent;
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabs-content {}
|
||||
}
|
||||
|
||||
.-Accordion {
|
||||
margin: 0.3em;
|
||||
.tab {
|
||||
margin-top: 2px;
|
||||
& > a:first-child {
|
||||
padding: 6px 0;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
background-color: #eee;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
&:before {
|
||||
margin-left: 30px;
|
||||
float: left;
|
||||
content: '+';
|
||||
}
|
||||
&:hover {
|
||||
background-color: #9dc2d0;
|
||||
}
|
||||
&.active {
|
||||
border-radius: 6px 6px 0 0;
|
||||
border-bottom: 0;
|
||||
&:before {
|
||||
content: '-';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
797
static/js/ketcher2/style/dialogs.less
Normal file
797
static/js/ketcher2/style/dialogs.less
Normal file
@ -0,0 +1,797 @@
|
||||
@import "variables";
|
||||
@import "form";
|
||||
@import (reference) "component";
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 40;
|
||||
text-align: center;
|
||||
|
||||
background-image: data-uri('overlay.svg');
|
||||
.background-opacity(#777, 0.2);
|
||||
//opacity: 1;
|
||||
|
||||
&.animate {
|
||||
transition: background-color 0.3s;
|
||||
//transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
&.hide {
|
||||
background-color: fade(#777, 1%);
|
||||
//opacity: 0.1;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
form[role=dialog] {
|
||||
outline: 0;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner {
|
||||
margin: auto;
|
||||
display: block;
|
||||
border: 16px solid #f3f3f3;
|
||||
border-top: 16px solid #0000ff;
|
||||
border-radius: 50%;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
animation: spin 3s linear infinite;
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
}
|
||||
|
||||
form[role=dialog] {
|
||||
text-align: left;
|
||||
background-color: #fff;
|
||||
border: 1px solid #999;
|
||||
border: 1px solid rgba(0,0,0,.3);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 3px 9px rgba(0,0,0,.5);
|
||||
background-clip: padding-box;
|
||||
overflow: visible;
|
||||
.transition-zoom;
|
||||
//outline: 0;
|
||||
>* {
|
||||
margin: 0.3em;
|
||||
}
|
||||
header, footer {
|
||||
margin: 0;
|
||||
padding: 0.2em 0.6em;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
header {
|
||||
font-size: 1.6em;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-radius: 6px 6px 0 0;
|
||||
}
|
||||
footer {
|
||||
clear: both;
|
||||
border-top: 1px solid #ddd;
|
||||
border-radius: 0 0 6px 6px;
|
||||
text-align: right;
|
||||
}
|
||||
.close {
|
||||
.reset-button;
|
||||
position: absolute;
|
||||
top: 0em;
|
||||
right: 0.3em;
|
||||
color: lighten(#000, 60%);
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255, 1);
|
||||
opacity: 0.5;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////
|
||||
|
||||
.template-lib {
|
||||
label {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
input[type=search] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.save {
|
||||
&:extend(button all);
|
||||
cursor: default;
|
||||
float: left;
|
||||
}
|
||||
.groups {
|
||||
&:extend(.-SelectList all);
|
||||
margin-top: 3.5em;
|
||||
height: 27em;
|
||||
width: 11em;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
.table {
|
||||
margin-top: 3.5em;
|
||||
padding: 0;
|
||||
float: left;
|
||||
width: 550px;
|
||||
height: 27em;
|
||||
overflow: auto;
|
||||
}
|
||||
.tr {
|
||||
height: 120px;
|
||||
}
|
||||
.td {
|
||||
width: 33%;
|
||||
float: left;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
&:before {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
left: 0.3em;
|
||||
top: 0;
|
||||
padding: 0 4px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
color: darken(@border-color, 30%);
|
||||
background-color: white;
|
||||
content: attr(title);
|
||||
}
|
||||
&.selected .struct {
|
||||
background-color: lighten(@form-selected-background, 15%);
|
||||
}
|
||||
}
|
||||
.attach-button {
|
||||
margin: 0 4px 2px 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.struct {
|
||||
position: absolute;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
padding: 1em;
|
||||
width: 98%;
|
||||
height: 98%;
|
||||
|
||||
border: 1px solid @border-color;
|
||||
border-radius: 5px;
|
||||
&:hover {
|
||||
background: @form-hover-background;
|
||||
}
|
||||
}
|
||||
div.struct {
|
||||
padding: 0; // TODO: tmp hack to fit viewbox
|
||||
}
|
||||
}
|
||||
|
||||
form.bond {
|
||||
label {
|
||||
text-align: right;
|
||||
display: block;
|
||||
}
|
||||
select {
|
||||
width: 12em;
|
||||
}
|
||||
}
|
||||
|
||||
form.atom-props {
|
||||
label {
|
||||
display: block;
|
||||
text-align: right;
|
||||
line-height: @input-height;
|
||||
height: @input-height;
|
||||
}
|
||||
.main {
|
||||
float: left;
|
||||
&:extend(fieldset.-hidden);
|
||||
input {
|
||||
width: 8em;
|
||||
}
|
||||
}
|
||||
.query, .reaction {
|
||||
float:right;
|
||||
clear: right;
|
||||
width: 16em;
|
||||
}
|
||||
}
|
||||
|
||||
form.attach-points {
|
||||
min-width: 18em;
|
||||
label {
|
||||
margin: 0 20px;
|
||||
display: block;
|
||||
text-align: right;
|
||||
line-height: @input-height;
|
||||
}
|
||||
}
|
||||
|
||||
form.automap {
|
||||
width: 22em;
|
||||
label {
|
||||
display: block;
|
||||
text-align: right;
|
||||
line-height: @input-height;
|
||||
}
|
||||
}
|
||||
|
||||
form.rgroup-logic {
|
||||
label {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
line-height: @input-height;
|
||||
}
|
||||
.cond {
|
||||
display: block;
|
||||
}
|
||||
input[type=text] {
|
||||
width: 7em;
|
||||
}
|
||||
}
|
||||
|
||||
.sgroup, .sgroup-special {
|
||||
width: 20em;
|
||||
label {
|
||||
display: block;
|
||||
text-align: right;
|
||||
input, select {
|
||||
width: 10em;
|
||||
}
|
||||
&:hover:after {
|
||||
margin: 1px 0 0 3px;
|
||||
}
|
||||
}
|
||||
fieldset {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.data {
|
||||
label {
|
||||
text-align: left;
|
||||
fieldset.radio {
|
||||
label {
|
||||
margin: .4em;
|
||||
display: inline-block;
|
||||
}
|
||||
input[type=radio] {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
textarea, select[name=fieldValue] {
|
||||
display: block;
|
||||
width: 19em;
|
||||
height: 12em;
|
||||
overflow: auto;
|
||||
}
|
||||
input[type=text], select[name=fieldName] {
|
||||
width: 19em;
|
||||
display: block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form.settings {
|
||||
width: 35em;
|
||||
.save {
|
||||
margin-left: 10px;
|
||||
&:extend(button all);
|
||||
cursor: default;
|
||||
float: left;
|
||||
}
|
||||
.open {
|
||||
&:extend(button all);
|
||||
float: left;
|
||||
}
|
||||
.warning {
|
||||
margin: 0.3em;
|
||||
}
|
||||
|
||||
.accordion {
|
||||
&:extend(.-Accordion all);
|
||||
fieldset {
|
||||
border-radius: 0 0 6px 6px;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
text-align: right;
|
||||
line-height: @input-height;
|
||||
height: @input-height;
|
||||
select, input {
|
||||
width: 50%;
|
||||
}
|
||||
div {
|
||||
margin: 2px;
|
||||
width: 50%;
|
||||
input {
|
||||
margin: 0 4px 0 0;
|
||||
}
|
||||
select {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
&:hover:after {
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.about {
|
||||
width: 25em;
|
||||
&>a {
|
||||
display: block;
|
||||
margin: 2em 1em;
|
||||
}
|
||||
var {
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
time {
|
||||
font-style: italic;
|
||||
}
|
||||
a {
|
||||
color: @active-color;
|
||||
&:hover {
|
||||
color: @hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
@line-height: 1.4em;
|
||||
dl {
|
||||
position: relative;
|
||||
margin: 0 1em 1em;
|
||||
vertical-align: bottom;
|
||||
line-height: @line-height;
|
||||
}
|
||||
dd {
|
||||
text-align: right;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
dt+dd {
|
||||
margin: -@line-height 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rgroup {
|
||||
ul {
|
||||
width: 26em;
|
||||
padding: 0.5em 0.5em 1em;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0.2em 0.1em;
|
||||
}
|
||||
button {
|
||||
font-size: 1.3em;
|
||||
width: 2.3em;
|
||||
height: 2em;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
padding: 0.15em;
|
||||
background: inherit;
|
||||
&:first-letter {
|
||||
font-weight: 600;
|
||||
color: lighten(@main-color, 20%);
|
||||
}
|
||||
&:hover {
|
||||
.highlight-scale;
|
||||
.highlight-shadow(black);
|
||||
}
|
||||
&:active {
|
||||
.highlight-scale(none);
|
||||
.highlight-shadow(none);
|
||||
}
|
||||
&.selected {
|
||||
.highlight-invert;
|
||||
&:first-letter {
|
||||
color: darken(white, 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.elements-table {
|
||||
width: 57em;
|
||||
.tabs {
|
||||
&:extend(.-Tabs all);
|
||||
.tabs-content {
|
||||
height: 31em;
|
||||
}
|
||||
}
|
||||
|
||||
.period-table {
|
||||
table {
|
||||
position: relative;
|
||||
}
|
||||
td, th {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
th, td.ref {
|
||||
opacity: 0.6;
|
||||
font-weight: normal;
|
||||
font-size: 0.8em;
|
||||
padding: 0.3em 0.8em;
|
||||
}
|
||||
th.ref {
|
||||
vertical-align: top;
|
||||
text-align: right;
|
||||
}
|
||||
tr:nth-of-type(8) {
|
||||
border-bottom: 1em solid transparent;
|
||||
}
|
||||
|
||||
.atom-info {
|
||||
position: absolute;
|
||||
padding: 0.75em 0.75em;
|
||||
left: 18em; top: 2em;
|
||||
width: 7em;
|
||||
.highlight-shadow(black);
|
||||
opacity: 1;
|
||||
transition: opacity 1s, visibility 0s;
|
||||
&.none {
|
||||
opacity: 0;
|
||||
transition: opacity 2s, visibility 2s;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 1.3em;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
line-height: 2;
|
||||
vertical-align: middle;
|
||||
padding: 0.15em;
|
||||
margin: 1px;
|
||||
border: 0;
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
opacity: 0.6;
|
||||
top: 0.3em;
|
||||
right: 0.3em;
|
||||
font-size: 0.5em;
|
||||
line-height: 1;
|
||||
vertical-align: top;
|
||||
content: attr(value);
|
||||
}
|
||||
&:hover, &.selected {
|
||||
&:after {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
&:not(:hover) {
|
||||
color: inherit;
|
||||
}
|
||||
&:hover {
|
||||
.highlight-scale;
|
||||
.highlight-shadow(black);
|
||||
z-index: 60;
|
||||
background: #fff;
|
||||
}
|
||||
&:active {
|
||||
.highlight-scale(none);
|
||||
.highlight-shadow(none);
|
||||
}
|
||||
&.selected {
|
||||
.highlight-invert;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
padding: 0.5em;
|
||||
margin: 0.5em 0 0 1.5em;
|
||||
}
|
||||
|
||||
.diatomic {
|
||||
background: @atom-periodic-diatomic;
|
||||
}
|
||||
.noble {
|
||||
background: @atom-periodic-noble-gas;
|
||||
}
|
||||
.alkali {
|
||||
background: @atom-periodic-alkali-metal;
|
||||
}
|
||||
.alkaline-earth {
|
||||
background: @atom-periodic-alkaline-earth-metal;
|
||||
}
|
||||
.metalloid {
|
||||
background: @atom-periodic-metalloid;
|
||||
}
|
||||
.polyatomic {
|
||||
background: @atom-periodic-polyatomic;
|
||||
}
|
||||
.post-transition {
|
||||
background: @atom-periodic-post-transition-metal;
|
||||
}
|
||||
.transition {
|
||||
background: @atom-periodic-transition-metal;
|
||||
}
|
||||
.lanthanide {
|
||||
background: @atom-periodic-lanthanide;
|
||||
}
|
||||
.actinide {
|
||||
background: @atom-periodic-actinide;
|
||||
}
|
||||
.unknown-props {
|
||||
background: @atom-periodic-unknown-properties;
|
||||
}
|
||||
.metal:after {
|
||||
color: #006;
|
||||
}
|
||||
.gas:after {
|
||||
color: #c00;
|
||||
}
|
||||
.liquid:after {
|
||||
color: #0a0;
|
||||
}
|
||||
}
|
||||
|
||||
.generic-groups {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 1.5em 0;
|
||||
.col {
|
||||
&:first-child {
|
||||
width: 40%;
|
||||
}
|
||||
&>fieldset {
|
||||
margin: 1em;
|
||||
padding: 1em 0.5em;
|
||||
}
|
||||
}
|
||||
.atom>fieldset, .acyclic, .cyclic {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
&+fieldset {
|
||||
margin-left: 0.4em;
|
||||
}
|
||||
}
|
||||
.cyclic>fieldset, .carbo, .hetero {
|
||||
float: left;
|
||||
}
|
||||
.carbo {
|
||||
clear: both;
|
||||
margin-right: 0.4em;
|
||||
}
|
||||
.cyclic>legend+fieldset { // a hack
|
||||
margin: 0 0.4em 0 0.8em;
|
||||
}
|
||||
fieldset {
|
||||
text-align: center;
|
||||
}
|
||||
legend+fieldset,
|
||||
.atom fieldset, .carbo fieldset, .hetero fieldset,
|
||||
.no-carbon {
|
||||
position: relative;
|
||||
border: 0;
|
||||
padding: 0 0 1em;
|
||||
legend {
|
||||
font-size: 0.7em;
|
||||
bottom: 0.1em;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
button {
|
||||
font-size: 1.1em;
|
||||
height: 2em;
|
||||
width: 2.5em;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
padding: 0.15em;
|
||||
background: inherit;
|
||||
&:hover {
|
||||
.highlight-scale;
|
||||
.highlight-shadow(black);
|
||||
}
|
||||
&:active {
|
||||
.highlight-scale(none);
|
||||
.highlight-shadow(none);
|
||||
}
|
||||
&.selected {
|
||||
.highlight-invert;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recognize {
|
||||
.output, .picture {
|
||||
height: 25em;
|
||||
width: 21em;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
img, .struct {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
max-height: 100%;
|
||||
max-width: 21em;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
.open {
|
||||
&:extend(button all);
|
||||
float: left;
|
||||
}
|
||||
.open-filename {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding: 6px;
|
||||
max-width: 200px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.check {
|
||||
.tabs {
|
||||
&:extend(.-Tabs all);
|
||||
}
|
||||
fieldset {
|
||||
margin: 0;
|
||||
overflow-y: auto;
|
||||
height: 25em;
|
||||
width: 25em;
|
||||
border-color: #ddd;
|
||||
border-radius: 0 4px 4px 4px;
|
||||
label {
|
||||
display: block;
|
||||
margin: 1.1em 0 0.3em 0.3em;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
margin: 1.1em 0 0.3em 0.3em;
|
||||
}
|
||||
dd {
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.analyse {
|
||||
label {
|
||||
width: 10em;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 1em;
|
||||
}
|
||||
input[type=text] {
|
||||
width: 14em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
select {
|
||||
width: 10em;
|
||||
margin: 0;
|
||||
}
|
||||
.chem-input {
|
||||
&:extend(input[type=text]);
|
||||
&:active, &:focus {
|
||||
outline: 0;
|
||||
.highlight-shadow(black);
|
||||
}
|
||||
width: 14em;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.open {
|
||||
// constrain dialog resizebility
|
||||
// max-width: 50%;
|
||||
// max-height: 70%;
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
textarea {
|
||||
width: 32em;
|
||||
height: 23em;
|
||||
overflow: auto;
|
||||
white-space: pre;
|
||||
//make it resizable
|
||||
resize: both;
|
||||
}
|
||||
.open {
|
||||
&:extend(button all);
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.save {
|
||||
label {
|
||||
display: block;
|
||||
text-align: right;
|
||||
}
|
||||
select {
|
||||
width: 16em;
|
||||
}
|
||||
textarea {
|
||||
width: 32em;
|
||||
height: 23em;
|
||||
overflow: auto;
|
||||
white-space: pre;
|
||||
cursor: text;
|
||||
resize: both;
|
||||
}
|
||||
.save {
|
||||
&:extend(button all);
|
||||
cursor: default;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.help {
|
||||
overflow: auto;
|
||||
min-height: 500px;
|
||||
min-width: 800px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.miew {
|
||||
iframe {
|
||||
//position: absolute;
|
||||
border: 0;
|
||||
width: 85em;
|
||||
height: 40em;
|
||||
}
|
||||
.window {
|
||||
float: left;
|
||||
}
|
||||
// &.loading {
|
||||
// visibility: hidden;
|
||||
// }
|
||||
}
|
||||
|
||||
.attach {
|
||||
label {
|
||||
display: block;
|
||||
padding: 0 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.warning {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.editor {
|
||||
border: 1px solid @border-color;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
max-height: 30em;
|
||||
max-width: 30em;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
10
static/js/ketcher2/style/font.less
Normal file
10
static/js/ketcher2/style/font.less
Normal file
@ -0,0 +1,10 @@
|
||||
@font-face {
|
||||
font-family: 'ketcher';
|
||||
src: url('@{static-path}/ketcher.eot');
|
||||
src: url('@{static-path}/ketcher.eot#iefix') format('embedded-opentype'),
|
||||
url('@{static-path}/ketcher.woff') format('woff'),
|
||||
url('@{static-path}/ketcher.ttf') format('truetype'),
|
||||
url('@{static-path}/ketcher.svg#ketcher') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
138
static/js/ketcher2/style/form.less
Normal file
138
static/js/ketcher2/style/form.less
Normal file
@ -0,0 +1,138 @@
|
||||
@import "variables";
|
||||
@import (reference) "component";
|
||||
|
||||
button, input[type=submit],
|
||||
input[type=reset], input[type=button] {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
//touch-action: manipulation;
|
||||
//cursor: pointer;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.42em 0.85em;
|
||||
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
border-color: #ccc;
|
||||
border-radius: 4px;
|
||||
user-select: none;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-image: linear-gradient(to bottom, #fff, darken(#fff, 7%));
|
||||
//.gradient-vertical-three(25%, #fff, darken(#fff, 10%), #fff);
|
||||
//color: @btn-default-color;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:active {
|
||||
outline: 0;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
|
||||
}
|
||||
|
||||
&.disabled, &[disabled], fieldset[disabled] & {
|
||||
background-image: none;
|
||||
cursor: not-allowed;
|
||||
opacity: .5;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&>input[type=file] { // hide file input
|
||||
left: -9999px;
|
||||
position: absolute;
|
||||
}
|
||||
&+& {
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
select, textarea,
|
||||
input[type=text], input[type=number], input[type=search] {
|
||||
&:extend(.-Control);
|
||||
&:active, &:focus {
|
||||
outline: 0;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
.highlight-shadow(black);
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&[readonly],
|
||||
fieldset[disabled] & {
|
||||
cursor: not-allowed;
|
||||
//box-shadow: none;
|
||||
background: #efefef;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.suggestList {
|
||||
border: 1px solid #3297FD;
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
margin-left: 3px;
|
||||
padding-left: 3px;
|
||||
width: 93%;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.suggestList li:hover {
|
||||
background-color: #3297FD;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@input-height: 2.4em + 2 * 0.35em;
|
||||
|
||||
label[data-error] {
|
||||
select, textarea,
|
||||
input[type=text], input[type=number], input[type=search] {
|
||||
border: 1px solid @error-color;
|
||||
&:hover, &:focus {
|
||||
.highlight-shadow(@error-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
content: "Error: " attr(data-error);
|
||||
display: block;
|
||||
position: fixed;
|
||||
white-space: pre;
|
||||
padding: 0.35em;
|
||||
background: lighten(@error-color, 30%);
|
||||
border: 1px solid @error-color;
|
||||
border-radius: 4px;
|
||||
line-height: 1em;
|
||||
font-size: 0.9em;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=radio],
|
||||
input[type=checkbox] {
|
||||
vertical-align: middle;
|
||||
//display: inline-block;
|
||||
margin: 0 0.3em;
|
||||
margin-top: 1px \9; // IE8-9
|
||||
line-height: normal;
|
||||
// TODO: style focus, active, etc
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid @border-color;
|
||||
padding: 0.3em;
|
||||
margin: 0;
|
||||
border-radius: 4px;
|
||||
|
||||
&.-hidden {
|
||||
border-color: transparent;
|
||||
margin-top: 0.9em + 2 * 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
legend {
|
||||
color: darken(@border-color, 25%);
|
||||
padding: 0 0.4em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
320
static/js/ketcher2/style/index.less
Normal file
320
static/js/ketcher2/style/index.less
Normal file
@ -0,0 +1,320 @@
|
||||
@import (less) 'normalize.css';
|
||||
@import 'font';
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'dialogs';
|
||||
|
||||
li, ul, menu { // move to reset
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/////////////////////
|
||||
// Basic layout
|
||||
|
||||
.set-size(large);
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body, main[role=application] {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
font: @base-size FreeSans, Arimo, "Droid Sans", Helvetica,
|
||||
"Helvetica Neue", Arial, sans-serif;
|
||||
background-color: white;
|
||||
color: @main-color;
|
||||
|
||||
min-width: 640px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
.canvas;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#mainmenu {
|
||||
.toolbar(top);
|
||||
}
|
||||
#elements {
|
||||
.toolbar(right);
|
||||
}
|
||||
#template {
|
||||
.toolbar(bottom);
|
||||
&>menu {
|
||||
overflow: hidden; // #300 quick fix,
|
||||
} // no menu expansion
|
||||
}
|
||||
#toolbox {
|
||||
.toolbar(left);
|
||||
}
|
||||
|
||||
#meta {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#chiral-flag {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
& > button {
|
||||
.toolbutton-horizontal(large, 2);
|
||||
}
|
||||
}
|
||||
|
||||
[role='toolbar'] {
|
||||
user-select: none;
|
||||
menu {
|
||||
.remove-inline-spacing;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
button {
|
||||
.toolbutton;
|
||||
}
|
||||
.selected button {
|
||||
.highlight-invert;
|
||||
}
|
||||
kbd {
|
||||
display: none;
|
||||
font: 0.8em monospace;
|
||||
color: @border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.cliparea {
|
||||
// Copied from http://bit.ly/12nphsK
|
||||
// Search for less verbose way to make FF happy
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: block;
|
||||
font-size: 1px;
|
||||
z-index: -1;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
padding: 0;
|
||||
resize: none;
|
||||
outline: none;
|
||||
user-select: text;
|
||||
// Because for user-select:none,
|
||||
// Safari won't allow input
|
||||
}
|
||||
|
||||
li.opened {
|
||||
.expanded;
|
||||
}
|
||||
|
||||
#atom, #freq-atoms {
|
||||
button {
|
||||
font-size: @atom-size;
|
||||
}
|
||||
kbd {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
select {
|
||||
// reset select size after inline-block
|
||||
// space removing inside toolbar
|
||||
font-size: @base-size;
|
||||
}
|
||||
|
||||
//////////////////////////
|
||||
// Adjust to custom sizes
|
||||
|
||||
#select, #bond-common, #bond-stereo, #bond-query, #reaction {
|
||||
.collapsed-ifnot(opened);
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
#zoom-in, #zoom-out {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1040px) {
|
||||
#bond-common, #bond-stereo, #bond-query {
|
||||
.collapsed-size(small);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 850px) {
|
||||
#rgroup {
|
||||
.collapsed-ifnot(opened);
|
||||
}
|
||||
@media (max-width: 1040px) { // better way not to dublicate?
|
||||
#rgroup { // inherit 100%, small? overflow-x?
|
||||
.collapsed-size(small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 800px) {
|
||||
#transform {
|
||||
.collapsed-ifnot(opened);
|
||||
}
|
||||
@media (max-width: 1040px) {
|
||||
#transform {
|
||||
.collapsed-size(small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 700px) {
|
||||
li.opened {
|
||||
.expanded-menu;
|
||||
}
|
||||
#bond-common, #bond-stereo, #bond-query {
|
||||
.collapsed(none);
|
||||
}
|
||||
#bond {
|
||||
.collapsed-ifnot(opened);
|
||||
}
|
||||
@media (max-width: 850px) {
|
||||
li.opened {
|
||||
.expanded-menu-size(small);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1040px) {
|
||||
#bond {
|
||||
.collapsed-size(small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 600px) {
|
||||
#rgroup, #transform, #bond {
|
||||
.collapsed-size(small);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 800px) {
|
||||
#reaction {
|
||||
.separate-item(vertical, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 650px) {
|
||||
#erase, #chain, #charge, #transform, #atom, #freq-atoms {
|
||||
.separate-item(vertical, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1160px) {
|
||||
#analyse, #document, #edit, #zoom {
|
||||
.separate-item(horizontal, 10px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 600px), (max-width: 1040px) {
|
||||
.set-size(small);
|
||||
|
||||
body, select {
|
||||
font-size: @base-size;
|
||||
}
|
||||
#canvas {
|
||||
.canvas-size(small);
|
||||
}
|
||||
#mainmenu, #template {
|
||||
.toolbar-size(horizontal, small);
|
||||
}
|
||||
#elements, #toolbox {
|
||||
.toolbar-size(vertical, small);
|
||||
}
|
||||
|
||||
[role='toolbar'] button {
|
||||
.toolbutton-size(small);
|
||||
}
|
||||
#chiral-flag button {
|
||||
.toolbutton-horizontal(small, 2);
|
||||
}
|
||||
|
||||
#select, #reaction {
|
||||
.collapsed-size(small);
|
||||
}
|
||||
|
||||
li.opened {
|
||||
.expanded-size(small);
|
||||
}
|
||||
|
||||
#atom button,
|
||||
#freq-atoms button {
|
||||
font-size: @atom-size;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 770px) {
|
||||
#help, #about {
|
||||
display: none;
|
||||
}
|
||||
#mainmenu {
|
||||
@set-size(@small-dim);
|
||||
left: @toolbar-gap;
|
||||
right: @toolbar-gap;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#template-common {
|
||||
.separate-item(horizontal, 15px);
|
||||
}
|
||||
|
||||
.cellar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: @error-color;
|
||||
&:before {
|
||||
content: '⚠ ';
|
||||
}
|
||||
}
|
||||
|
||||
.monochrome-icons(arom bond-any bond-aromatic bond-crossed bond-double
|
||||
bond-doublearomatic bond-down bond-single
|
||||
bond-singlearomatic bond-singledouble bond-triple bond-up
|
||||
bond-updown chain charge-minus charge-plus layout copy
|
||||
cut dearom dropdown erase generic-groups about new open
|
||||
paste period-table reaction-arrow reaction-automap
|
||||
reaction-map reaction-plus reaction-unmap redo
|
||||
rgroup-attpoints rgroup-fragment save select-fragment
|
||||
select-lasso select-rectangle settings help sgroup template-0
|
||||
template-1 template-2 template-3 template-4 template-5
|
||||
template-6 template-7 template-lib transform-flip-h
|
||||
transform-flip-v transform-rotate undo zoom-in zoom-out
|
||||
sgroup-data rgroup-label clean check analyse cip recognize miew
|
||||
chiral-flag);
|
||||
|
||||
.atom-sketching(h he li be b c n o f ne na mg al si p s cl ar k ca sc ti v
|
||||
cr mn fe co ni cu zn ga ge as se br kr rb sr y zr nb mo tc
|
||||
ru rh pd ag cd in sn sb te i xe cs ba la ce pr nd pm sm eu
|
||||
gd tb dy ho er tm yb lu hf ta w re os ir pt au hg tl pb bi
|
||||
po at rn fr ra ac th pa u np pu am cm bk cf es fm md no lr
|
||||
rf db sg bh hs mt ds rg cn);
|
||||
|
||||
.arrange-icons-new(analyse check cip clean generic-groups layout miew
|
||||
reaction-arrow reaction-automap reaction-map
|
||||
reaction-plus reaction-unmap recognize rgroup-attpoints
|
||||
rgroup-fragment rgroup-label template-lib);
|
||||
|
||||
.arrange-icons-new(@names, @i: 1) when (@i <= length(@names)) {
|
||||
@item: extract(@names, @i);
|
||||
#@{item} button:before {
|
||||
padding: 0.2em 0 0 0.2em;
|
||||
}
|
||||
.arrange-icons-new(@names, (@i + 1));
|
||||
}
|
||||
468
static/js/ketcher2/style/mixins.less
Normal file
468
static/js/ketcher2/style/mixins.less
Normal file
@ -0,0 +1,468 @@
|
||||
// Workaround less issue:
|
||||
// https://github.com/less/less.js/issues/2004
|
||||
|
||||
.set-size(inherit) {
|
||||
}
|
||||
.set-size(small) {
|
||||
#small-dim;
|
||||
}
|
||||
.set-size(large) {
|
||||
#large-dim;
|
||||
}
|
||||
|
||||
/////////////////////
|
||||
|
||||
.canvas(@dim: inherit) {
|
||||
position: absolute;
|
||||
border: @border-color 1px solid;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
.canvas-size(@dim);
|
||||
// svg {
|
||||
// display: block;
|
||||
// }
|
||||
}
|
||||
|
||||
.canvas-size(@dim) {
|
||||
.set-size(@dim);
|
||||
top: @canvas-padding;
|
||||
left: @canvas-padding;
|
||||
right: @canvas-padding;
|
||||
bottom: @canvas-padding;
|
||||
}
|
||||
|
||||
/////////////////////
|
||||
|
||||
.toolbar(@dir, @dim: inherit) {
|
||||
.orientation(@dir);
|
||||
position: absolute;
|
||||
@{dir}: @app-gap;
|
||||
.toolbar-size(@dir, @dim);
|
||||
&>menu {
|
||||
@{main-dim}: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-size(@dir, @dim) {
|
||||
.orientation(@dir);
|
||||
.set-size(@dim);
|
||||
@{main-lose}: @canvas-padding;
|
||||
@{main-rise}: @canvas-padding;
|
||||
@{cross-dim}: @toolbar-size;
|
||||
}
|
||||
|
||||
.toolbar-pos(@icon-count, @separator-count: 0, @loose-pad: 0,
|
||||
@rise-pad: @loose-pad, @dim: inherit) {
|
||||
.set-size(@dim);
|
||||
@offset: @icon-count * @toolbar-size +
|
||||
(@loose-pad + @rise-pad) * @separator-count;
|
||||
}
|
||||
|
||||
/////////////////////
|
||||
|
||||
.toolbutton(@dim: inherit) {
|
||||
display: block;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
background: inherit;
|
||||
background-color: white;
|
||||
//background-image: none;
|
||||
|
||||
//text-align: center;
|
||||
//overflow: hidden;
|
||||
//font: ~"0/0" a;
|
||||
//.text-hide(transparent);
|
||||
|
||||
&:before, &:after {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-family: 'ketcher';
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
&:hover { // &:hover:not(:active)
|
||||
.highlight-scale;
|
||||
.highlight-shadow(black);
|
||||
}
|
||||
&:active, &[disabled] {
|
||||
.highlight-scale(none);
|
||||
.highlight-shadow(none);
|
||||
//.shadow-highlight(black, inset);
|
||||
}
|
||||
.toolbutton-size(@dim);
|
||||
}
|
||||
|
||||
.toolbutton-size(@dim) {
|
||||
.set-size(@dim);
|
||||
width: @button-size;
|
||||
height: @button-size;
|
||||
margin: @button-grow;
|
||||
//line-height: @toolbar-size;
|
||||
|
||||
&:before, &:after {
|
||||
font-size: @icon-size;
|
||||
//padding: @icon-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbutton-horizontal(@dim, @width-cells: 1) {
|
||||
.set-size(@dim);
|
||||
width: @button-size * @width-cells;
|
||||
margin-left: @button-grow * @width-cells;
|
||||
margin-right: @button-grow * @width-cells;
|
||||
}
|
||||
////////////////////
|
||||
|
||||
.collapsed(@dim: inherit) when not (@dim = none) {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.collapsed-size(@dim);
|
||||
.collapsed-icon;
|
||||
}
|
||||
|
||||
.collapsed(none) {
|
||||
position: static;
|
||||
overflow: visible;
|
||||
height: auto;
|
||||
width: auto;
|
||||
// &> menu {
|
||||
// margin: 0 !important; // TODO: fix me in js
|
||||
// }
|
||||
.collapsed-icon(none);
|
||||
}
|
||||
|
||||
.collapsed-size(@dim) {
|
||||
.set-size(@dim);
|
||||
height: @toolbar-size;
|
||||
width: 100%;//@toolbar-size;
|
||||
}
|
||||
|
||||
.collapsed-ifnot(@classname, @dim: inherit) {
|
||||
.collapsed(@dim);
|
||||
&.@{classname} {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsed-icon() {
|
||||
&:after {
|
||||
font-size: 7px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
display: block;
|
||||
font-family: 'ketcher';
|
||||
content: @icon-dropdown;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
&:hover:after {
|
||||
//.scale-highlight;
|
||||
color: @active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsed-icon(none) {
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////
|
||||
|
||||
.expanded(@dim: inherit) {
|
||||
.set-size(@dim);
|
||||
&>menu {
|
||||
margin: 0 !important;
|
||||
position: absolute;
|
||||
left: @toolbar-size + @menu-pad;
|
||||
z-index: 20;
|
||||
|
||||
//display: table-cell;
|
||||
white-space: nowrap;
|
||||
word-break: keep-all;
|
||||
//width: auto;
|
||||
//height: @toolbar-size;
|
||||
|
||||
padding: 2px;
|
||||
.separate-menu(vertical, 3px);
|
||||
|
||||
background: white;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 6px 12px rgba(0,0,0,.175);
|
||||
}
|
||||
}
|
||||
|
||||
.expanded-size(@dim) {
|
||||
&>menu {
|
||||
.set-size(@dim);
|
||||
left: @toolbar-size + @menu-pad;
|
||||
}
|
||||
}
|
||||
|
||||
.expanded-menu(@dim: inherit) {
|
||||
.set-size(@dim);
|
||||
li {
|
||||
display: block;
|
||||
}
|
||||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 1px 0;
|
||||
padding: 0.3em 4.5em 0.3em 0.3em; // 4.5em - place for kbd
|
||||
height: 1.7em;
|
||||
|
||||
font-size: @menu-font-size;
|
||||
//line-height: 18px;
|
||||
text-align: left;
|
||||
&:before, &:after {
|
||||
padding-right: 0.4em;
|
||||
font-size: @menu-icon-size;
|
||||
//padding: @icon-padding;
|
||||
}
|
||||
&[disabled] { // TODO: general button highlight
|
||||
.highlight-invert(disabled); // refactor
|
||||
}
|
||||
}
|
||||
button:hover, .selected button {
|
||||
//&:extend(button:active); not extended while in media
|
||||
.highlight-scale(none);
|
||||
.highlight-shadow(none);
|
||||
.highlight-invert;
|
||||
}
|
||||
kbd {
|
||||
display: inline-block;
|
||||
position: absolute; // how to align right?
|
||||
right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.expanded-menu-size(@dim) {
|
||||
.set-size(@dim);
|
||||
button {
|
||||
font-size: @menu-font-size;
|
||||
&:before, &:after {
|
||||
font-size: @menu-icon-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////
|
||||
|
||||
.separator(@orientation, @lose-pad, @rise-pad) {
|
||||
.orientation(@orientation);
|
||||
margin-@{main-lose}: @lose-pad;
|
||||
border-@{main-lose}: 1px solid @border-color;
|
||||
padding-@{main-lose}: @rise-pad - 1px; // substract 1px to assert
|
||||
// width = lose-pad + rise-pad
|
||||
}
|
||||
|
||||
.separate-item(@orientation, @lose-pad, @rise-pad: @lose-pad) {
|
||||
& + li {
|
||||
.separator(@orientation, @lose-pad, @rise-pad);
|
||||
}
|
||||
}
|
||||
|
||||
.separate-menu(@orientation, @lose-pad, @rise-pad: @lose-pad) {
|
||||
li + li>menu {
|
||||
.separator(@orientation, @lose-pad, @rise-pad);
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////
|
||||
// Highlight effects
|
||||
|
||||
.highlight-scale() {
|
||||
transition: transform, 0.2s, ease-out;
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
.highlight-scale(none) {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.highlight-shadow(inset, @color: @active-color) {
|
||||
box-shadow: 0px -1px 6px fade(@color, 5%) inset,
|
||||
0px 1px 3px @color inset;
|
||||
}
|
||||
|
||||
.highlight-shadow(@color: @active-color) when (iscolor(@color)) {
|
||||
box-shadow: inset 0 0 1px 1px fade(@color, 12%);
|
||||
}
|
||||
|
||||
.highlight-shadow(none) {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.highlight-circle(@color: @active-color, @inset: '') {
|
||||
border-radius: (@icon-size + @icon-padding) / 2;
|
||||
box-shadow: ~'0 0 4px @{color} @{inset}';
|
||||
}
|
||||
|
||||
.highlight-symbol(@color: @active-color) {
|
||||
color: @active-color;
|
||||
text-shadow: 1px 1px 3px @color;
|
||||
}
|
||||
|
||||
.highlight-symbol-invert() {
|
||||
background: #333;
|
||||
text-shadow: 0px 1px 10px white, 0px -1px 10px white;
|
||||
}
|
||||
|
||||
.highlight-invert() {
|
||||
background: #444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.highlight-invert(disabled) {
|
||||
background: inherit;
|
||||
color: @disabled-color; // hint for menus
|
||||
}
|
||||
|
||||
/////////////////////
|
||||
// Transition effects
|
||||
|
||||
.transition-twirl(@time: 0.3s) {
|
||||
transform: rotateX(0);
|
||||
transition: transform @time;
|
||||
&.hide {
|
||||
transform-style: preserve-3d;
|
||||
transform: perspective(350px) rotateX(-70deg);
|
||||
}
|
||||
}
|
||||
|
||||
.transition-zoom(@time: 0.3s) {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transition: transform @time, opacity @time;
|
||||
|
||||
&.hide {
|
||||
opacity: .2;
|
||||
transform: scale(.5);
|
||||
}
|
||||
}
|
||||
|
||||
//////////////////////////
|
||||
// Icon content & coloring
|
||||
|
||||
.colorize(@color) when not (@color = inherit) {
|
||||
color: @color;
|
||||
}
|
||||
|
||||
.monochrome-icons(@names, @color: inherit, @i: 1) when (@i <= length(@names)) {
|
||||
@item: extract(@names, @i);
|
||||
@icon: 'icon-@{item}';
|
||||
#@{item} button:before { content: @@icon; .colorize(@color); }
|
||||
.monochrome-icons(@names, @color, (@i + 1));
|
||||
}
|
||||
|
||||
.atom-sketching(@names, @i: 1) when (@i <= length(@names)) {
|
||||
@item: extract(@names, @i);
|
||||
@color: 'atom-@{item}-sketching-color';
|
||||
.atom-@{item} {
|
||||
color: @@color;
|
||||
}
|
||||
.atom-sketching(@names, (@i + 1));
|
||||
}
|
||||
|
||||
////////////////////////////////////////////
|
||||
// Little bit jankie directions unification
|
||||
|
||||
.orientation(horizontal) {
|
||||
@main-rise: right;
|
||||
@main-lose: left;
|
||||
@main-dim: width;
|
||||
@cross-rise: bottom;
|
||||
@cross-lose: top;
|
||||
@cross-dim: height;
|
||||
}
|
||||
|
||||
.orientation(vertical) {
|
||||
@main-rise: bottom;
|
||||
@main-lose: top;
|
||||
@main-dim: height;
|
||||
@cross-rise: right;
|
||||
@cross-lose: left;
|
||||
@cross-dim: width;
|
||||
}
|
||||
|
||||
.orientation(@dir) when (@dir = top), (@dir = bottom) {
|
||||
.orientation(horizontal);
|
||||
}
|
||||
|
||||
.orientation(@dir) when (@dir = left), (@dir = right) {
|
||||
.orientation(vertical);
|
||||
}
|
||||
|
||||
.direction(@dir) {
|
||||
.to-index(top) { @index: 0; }
|
||||
.to-index(right) { @index: 1; }
|
||||
.to-index(bottom) { @index: 2; }
|
||||
.to-index(left) { @index: 3; }
|
||||
@directions: top right bottom left;
|
||||
@orientations: horizontal vertical;
|
||||
.to-index(@dir);
|
||||
|
||||
@main-start: extract(@directions, mod(@index, 4) + 1);
|
||||
@main-end: extract(@directions, mod((@index + 2), 4) + 1);
|
||||
|
||||
@cross-start: extract(@directions, mod((@index + 3), 4) + 1);
|
||||
@cross-end: extract(@directions, mod((@index + 1), 4) + 1);
|
||||
|
||||
@main-orient: extract(@orientations, mod(@index + 1, 2));
|
||||
@cross-orient: extract(@orientations, mod(@index + 1, 2) + 1);
|
||||
}
|
||||
|
||||
/////////////////////
|
||||
// Basic mixins
|
||||
|
||||
.background-opacity(@color, @opacity) {
|
||||
@rgba-color: rgba(red(@color), green(@color), blue(@color), @opacity);
|
||||
background-color: @rgba-color;
|
||||
|
||||
background: none\9; // Hack for IE8
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d')", argb(@rgba-color), argb(@rgba-color)));
|
||||
//zoom: 1;
|
||||
&:not([ie9]) {
|
||||
// Do not apply to IE9 as it supports rgba
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false');
|
||||
}
|
||||
}
|
||||
|
||||
.text-hide(transparent) {
|
||||
font: ~"0/0" a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.text-hide(indent) {
|
||||
@approximate-em-value: 12px / 1em;
|
||||
@wider-than-any-screen: -9999em;
|
||||
text-indent: @wider-than-any-screen * @approximate-em-value;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-hide() {
|
||||
.text-hide(indent);
|
||||
}
|
||||
|
||||
.reset-button() {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.remove-inline-spacing() {
|
||||
// vanish horizontal spacing between inline blocks
|
||||
font-size: 0.00001px;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
1
static/js/ketcher2/style/overlay.svg
Normal file
1
static/js/ketcher2/style/overlay.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><path d="M0 10L10 0zm12-2l-4 4zM-2 2l4-4z" stroke="#555" stroke-width="2" stroke-opacity=".02"/></svg>
|
||||
|
After Width: | Height: | Size: 165 B |
200
static/js/ketcher2/style/variables.less
Normal file
200
static/js/ketcher2/style/variables.less
Normal file
@ -0,0 +1,200 @@
|
||||
@static-path: '.';
|
||||
|
||||
@main-color: #333;
|
||||
@active-color: #1a7090;
|
||||
@hover-color: #5e5e5e;
|
||||
@border-color: #ccc;
|
||||
@error-color: #ff5555;
|
||||
|
||||
@disabled-color: #baa;
|
||||
@form-hover-background: lighten(@border-color, 15%);
|
||||
@form-selected-background: #9dc2d0;
|
||||
|
||||
// breakpoints for popular resolutions
|
||||
// are copied from bootstrap and unused yet;)
|
||||
// See: http://getbootstrap.com/css/#grid-media-queries
|
||||
@common-screen-tiny: 480px;
|
||||
@common-screen-small: 768px;
|
||||
@common-screen-medium: 992px;
|
||||
@common-screen-large: 1200px;
|
||||
|
||||
#large-dim() {
|
||||
@base-size: 14px;
|
||||
|
||||
@icon-size: 26px;
|
||||
@button-size: 32px;
|
||||
@button-grow: 4px; // additional padding button may grow
|
||||
|
||||
@atom-size: 19px;
|
||||
|
||||
@menu-pad: 7px;
|
||||
@menu-font-size: 14px;
|
||||
@menu-icon-size: 18px;
|
||||
|
||||
@app-gap: 7px - @button-grow;
|
||||
@toolbar-gap: 6px - @button-grow;
|
||||
|
||||
@toolbar-size: @button-size + 2 * @button-grow; // + border?
|
||||
@canvas-padding: @toolbar-size + @toolbar-gap + @app-gap;
|
||||
}
|
||||
|
||||
#small-dim() {
|
||||
@base-size: 11px;
|
||||
|
||||
@icon-size: 20px;
|
||||
@button-size: 24px;
|
||||
@button-grow: 4px;
|
||||
|
||||
@atom-size: 16px;
|
||||
|
||||
@menu-pad: 5px;
|
||||
@menu-font-size: 12px;
|
||||
@menu-icon-size: 16px;
|
||||
|
||||
@app-gap: 7px - @button-grow;
|
||||
@toolbar-gap: 6px - @button-grow;
|
||||
|
||||
@toolbar-size: @button-size + 2 * @button-grow;
|
||||
@canvas-padding: @toolbar-size + @toolbar-gap + @app-gap;
|
||||
}
|
||||
|
||||
// Periodic table coloring
|
||||
|
||||
@atom-periodic-diatomic: #e7ff8f;
|
||||
@atom-periodic-noble-gas: #c0ffff;
|
||||
@atom-periodic-alkali-metal: #ff6666;
|
||||
@atom-periodic-alkaline-earth-metal: #ffdead;
|
||||
@atom-periodic-metalloid: #cccc99;
|
||||
@atom-periodic-polyatomic: #a1ffc3;
|
||||
@atom-periodic-post-transition-metal: #cccccc;
|
||||
@atom-periodic-transition-metal: #ffc0c0;
|
||||
@atom-periodic-lanthanide: #ffbfff;
|
||||
@atom-periodic-actinide: #ff99cc;
|
||||
@atom-periodic-unknown-properties: #e8e8e8;
|
||||
|
||||
// Standard (for sketching applications) atom colors
|
||||
|
||||
@atom-h-sketching-color: #000; //#000000
|
||||
@atom-c-sketching-color: #000;
|
||||
@atom-he-sketching-color: #89a1a1; //#849b9b
|
||||
@atom-li-sketching-color: #bd77ed; //#c87efa
|
||||
@atom-be-sketching-color: #8fbc00; //#82ab00
|
||||
@atom-b-sketching-color: #c18989; //#c38a8a
|
||||
@atom-n-sketching-color: #304ff7;
|
||||
@atom-o-sketching-color: #ff0d0d;
|
||||
@atom-f-sketching-color: #78bc42; //#6dab3c
|
||||
@atom-ne-sketching-color: #80a2af; //#7b9ca8
|
||||
@atom-na-sketching-color: #ab5cf2;
|
||||
@atom-mg-sketching-color: #6fcd00; //#61b400
|
||||
@atom-al-sketching-color: #a99393; //#a79191
|
||||
@atom-si-sketching-color: #b29478; //#b09276
|
||||
@atom-p-sketching-color: #ff8000;
|
||||
@atom-s-sketching-color: #c99a19; //#c39517
|
||||
@atom-cl-sketching-color: #1fd01f; //#1dc51d
|
||||
@atom-ar-sketching-color: #69acba; //#63a2b0
|
||||
@atom-k-sketching-color: #8f40d4;
|
||||
@atom-ca-sketching-color: #38e900; //#2fc300
|
||||
@atom-sc-sketching-color: #999999; //#969696
|
||||
@atom-ti-sketching-color: #979a9e; //#94969a
|
||||
@atom-v-sketching-color: #99999e; //#96969a
|
||||
@atom-cr-sketching-color: #8a99c7; //#8796c3
|
||||
@atom-mn-sketching-color: #9c7ac7;
|
||||
@atom-fe-sketching-color: #e06633;
|
||||
@atom-co-sketching-color: #d37e8e; //#db8293
|
||||
@atom-ni-sketching-color: #4ece4e; //#45b645
|
||||
@atom-cu-sketching-color: #c78033;
|
||||
@atom-zn-sketching-color: #7d80b0;
|
||||
@atom-ga-sketching-color: #bc8b8b; //#bd8c8c
|
||||
@atom-ge-sketching-color: #668f8f;
|
||||
@atom-as-sketching-color: #b87ddd; //#bd80e3
|
||||
@atom-se-sketching-color: #e59100; //#e28f00
|
||||
@atom-br-sketching-color: #a62929;
|
||||
@atom-kr-sketching-color: #59b1c9; //#53a6bc
|
||||
@atom-rb-sketching-color: #702eb0;
|
||||
@atom-sr-sketching-color: #00ff00; //#00d000
|
||||
@atom-y-sketching-color: #66afaf; //#5fa4a4
|
||||
@atom-zr-sketching-color: #71abab; //#6ba2a2
|
||||
@atom-nb-sketching-color: #67aeb4; //#61a4a9
|
||||
@atom-mo-sketching-color: #54b5b5; //#4ea9a9
|
||||
@atom-tc-sketching-color: #3b9e9e;
|
||||
@atom-ru-sketching-color: #248f8f;
|
||||
@atom-rh-sketching-color: #0a7d8c;
|
||||
@atom-pd-sketching-color: #006985;
|
||||
@atom-ag-sketching-color: #9a9a9a; //#969696
|
||||
@atom-cd-sketching-color: #b29764; //#ae9462
|
||||
@atom-in-sketching-color: #a67573;
|
||||
@atom-sn-sketching-color: #668080;
|
||||
@atom-sb-sketching-color: #9e63b5;
|
||||
@atom-te-sketching-color: #d47a00;
|
||||
@atom-i-sketching-color: #940094;
|
||||
@atom-xe-sketching-color: #429eb0;
|
||||
@atom-cs-sketching-color: #57178f;
|
||||
@atom-ba-sketching-color: #00c900;
|
||||
@atom-la-sketching-color: #5caed1; //#57a4c5
|
||||
@atom-ce-sketching-color: #9d9d7b; //#989877
|
||||
@atom-pr-sketching-color: #8ca581; //#869d7b
|
||||
@atom-nd-sketching-color: #84a984; //#7da07d
|
||||
@atom-pm-sketching-color: #71b18a; //#69a581
|
||||
@atom-sm-sketching-color: #66b68e; //#5ea883
|
||||
@atom-eu-sketching-color: #4ac298; //#43b089
|
||||
@atom-gd-sketching-color: #37cb9e; //#31b48d
|
||||
@atom-tb-sketching-color: #28d1a4; //#23b890
|
||||
@atom-dy-sketching-color: #1bd7a8; //#17bb92
|
||||
@atom-ho-sketching-color: #00e98f; //#00c578
|
||||
@atom-er-sketching-color: #00e675; //#00c765
|
||||
@atom-tm-sketching-color: #00d452; //#00c94e
|
||||
@atom-yb-sketching-color: #00bf38;
|
||||
@atom-lu-sketching-color: #00ab24;
|
||||
@atom-hf-sketching-color: #47b3ec; //#42a8dc
|
||||
@atom-ta-sketching-color: #4da6ff; //#4ba2f9
|
||||
@atom-w-sketching-color: #2194d6;
|
||||
@atom-re-sketching-color: #267dab;
|
||||
@atom-os-sketching-color: #266696;
|
||||
@atom-ir-sketching-color: #175487;
|
||||
@atom-pt-sketching-color: #9898a3; //#9595a0
|
||||
@atom-au-sketching-color: #c19e1c; //#b9981a
|
||||
@atom-hg-sketching-color: #9797ac; //#9595a9
|
||||
@atom-tl-sketching-color: #a6544d;
|
||||
@atom-pb-sketching-color: #575961;
|
||||
@atom-bi-sketching-color: #9e4fb5;
|
||||
@atom-po-sketching-color: #ab5c00;
|
||||
@atom-at-sketching-color: #754f45;
|
||||
@atom-rn-sketching-color: #428296;
|
||||
@atom-fr-sketching-color: #420066;
|
||||
@atom-ra-sketching-color: #007d00;
|
||||
@atom-ac-sketching-color: #6aa2ec; //#669ce4
|
||||
@atom-th-sketching-color: #00baff; //#00b8fc
|
||||
@atom-pa-sketching-color: #00a1ff;
|
||||
@atom-u-sketching-color: #008fff;
|
||||
@atom-np-sketching-color: #0080ff;
|
||||
@atom-pu-sketching-color: #006bff;
|
||||
@atom-am-sketching-color: #545cf2;
|
||||
@atom-cm-sketching-color: #785ce3;
|
||||
@atom-bk-sketching-color: #8a4fe3;
|
||||
@atom-cf-sketching-color: #a136d4;
|
||||
@atom-es-sketching-color: #b31fd4;
|
||||
|
||||
// Need to fix colors for the elements below (c)
|
||||
@atom-fm-sketching-color: #000;
|
||||
@atom-md-sketching-color: #000;
|
||||
@atom-no-sketching-color: #000;
|
||||
@atom-lr-sketching-color: #000;
|
||||
@atom-rf-sketching-color: #47b3ec;
|
||||
@atom-db-sketching-color: #4da6ff;
|
||||
@atom-sg-sketching-color: #2194d6;
|
||||
@atom-bh-sketching-color: #267dab;
|
||||
@atom-hs-sketching-color: #266696;
|
||||
@atom-mt-sketching-color: #175487;
|
||||
@atom-ds-sketching-color: #9898a3;
|
||||
@atom-rg-sketching-color: #c19e1c;
|
||||
@atom-cn-sketching-color: #9797ac;
|
||||
|
||||
@atom-sketching-h-like-color: #000;
|
||||
@atom-sketching-n-like-color: #304ff7;
|
||||
@atom-sketching-o-like-color: #ff0d0d;
|
||||
@atom-sketching-s-like-color: #c99a19;
|
||||
@atom-sketching-p-like-color: #ff8000;
|
||||
@atom-sketching-f-like-color: #78bc42;
|
||||
@atom-sketching-cl-like-color: #1fd01f;
|
||||
@atom-sketching-br-like-color: #a62929;
|
||||
@atom-sketching-i-like-color: #940094;
|
||||
Reference in New Issue
Block a user