forked from enviPath/enviPy
Current Dev State
This commit is contained in:
Tim Lorsbach
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));
|
||||
}
|
||||
Reference in New Issue
Block a user