gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
287 lines (243 loc) • 6.26 kB
CSS
/*
* goeditor.css
* Used for the goeditor framework
* DO NOT edit this file. Use a custom CSS file for app-specific style changes
* DO NOT delete or rename this file
*/
/********************************************** MAIN CONTENT STYLING ***********************************************/
body {font-family: Arial; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
canvas:focus {outline:0;} /*don't outline palette and diagram when they are focused*/
p, h1,h2,h3,h4,h5,h6{cursor: default}
/*Style placeholder text to be black on all browsers*/
::-webkit-input-placeholder { color: black; }
::-moz-placeholder { color: black; }
:-ms-input-placeholder { color: black; }
/************************************************************* NAV BAR STYLING *************************************************/
nav {background: linear-gradient(#efefef ,#bbbbbb ); padding: 5px;}
nav ul { /*file menus and tool menus*/
list-style: none;
position: relative;
display: flex;
margin: 0; padding: 0;
}
nav ul li { /*menu tabs*/
float: left;
transition-property: background;
transition-duration: 0.3s;
}
nav ul li:hover {
transition-delay: 0.1s, 0.1s;
background: #4f5964;
}
nav ul li a { /*menu tabs text*/
display: block;
padding-left: 25px; padding-right: 25px; padding-top: 2px;
color: #757575; text-decoration: none;
transition-property: background, color;
transition-duration: 0.4s, 0.4s;
}
nav ul li:hover a {color: #fff;}
nav ul ul { /*drop down menus, general*/
display: block;
z-index: 20; /*in front of everything, even .draggables*/
visibility: hidden; opacity: 0;
transition-property: opacity;
transition-duration: 0.3s;
background: #5f6975; padding: 0;
position: absolute; top: 100%;
width: max-content;
/* width: 220%; /*band aid fix for menu width -- TODO*/
}
nav ul li:hover > ul { /*drop down menus, visible*/
visibility: visible; opacity: 1;
transition-delay: 0.1s;
}
nav ul ul li { /*drop down menu items*/
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative; float: none;
}
nav ul ul li a { /*drown down menu items text*/
padding: 5px;
transition-property: background;
transition-duration: 0.1s;
}
nav ul ul li a:hover {
background: #4b545f;
transition-delay: 0.1s;
}
nav ul ul ul { /*drop down submenu (import from)*/
left: 100%; top:0;
}
nav p { /* grid input area, wall width area, and 'Tools' all wrapped in <p> tag*/
float: left;
margin-bottom: 0px;
margin-top: 3px;
padding-left: 25px;
padding-right: 25px;
color: #4b545f;
}
nav p.ge-shortcut {
font-size: 9pt;
float: right;
color: #efefef;
padding: 0;
}
#ge-header {
float: right;
}
#ge-filename {
text-align: center;
}
#ge-filemenus {
float: left;
}
.ge-menu {
z-index: 100;
background: white;
width: 400px;
max-width: 500px;
border: 1px solid black;
top: 25%;
left: 40%;
position: absolute;
box-shadow: 10px 10px 5px #888888;
text-align: center;
padding-bottom: 10px;
}
.ge-handle * {
padding: 2px;
margin: 0;
margin-bottom: 10px;
background: gray;
color: white;
cursor: move;
}
.ge-scrollable {
max-height: 300px;
overflow: auto;
}
.ge-clickable {
cursor: pointer;
color: black;
}
.ge-clickable.ge-selected {
color: blue;
}
.ge-button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
border-radius: 4px;
cursor: pointer;
}
#ge-datas-div {
margin: 10px;
overflow: auto;
}
.ge-data-option-div {
padding: 5px;
}
.ge-data-option-div span {
padding: 10px;
}
.ge-build-event-property-div, .ge-build-range-property-div {
padding: 5px;
}
.ge-build-event-property-div button, .ge-build-range-property-div button {
padding: 5px;
}
.ge-build-event-property-div select, .ge-build-event-property-div input, .ge-build-range-property-div label, .ge-build-range-property-div button,
.ge-edit-timeline-property-div input, .ge-edit-timeline-property-div label {
margin: 10px;
}
.ge-replace-event-data-checkbox-div {
float: left;
}
.ge-clickable {cursor: pointer;}
label > input{ /* HIDE RADIO */
visibility: hidden; /* Makes input not-clickable */
position: absolute; /* Remove input from document flow */
}
label > input + img{ /* IMAGE STYLES */
cursor:pointer;
border:2px solid transparent;
}
label > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
border:2px solid #f00;
}
#ge-footer {
background: linear-gradient(#efefef ,#bbbbbb);
text-align: center;
padding: 5px;
}
#ge-palettes-window {
height: inherit;
top:12%;
left:.5%;
}
#ge-overviews-window {
height: inherit;
top: 12%;
left: 87.5%;
}
/********************************** DRAGGABLE WINDOWS GENERAL **************/
.ge-draggable {
border: 1px solid gray;
background-color: #e2e2e2;
position: absolute;
top: 40%;
left: 50%;
width: 300px;
height: unset;
z-index: 10;
text-align: center;
}
.ge-handle {
background-color: #4b545f;
text-align: center;
font: bold 12px sans-serif;
color: white;
cursor: move;
width: 100%;
}
.ge-window-button{
float: right;
border: none;
font: bold 12px sans-serif;
padding-bottom: 0; padding-top: 0;
padding-left: 10px; padding-right: 10px;
}
/* jQuery UI specific stylings */
.ui-accordion .ui-accordion-content, .ui-accordion .ui-accordion-icons {padding: 0px;}
.ui-widget * { outline: none; }
.ui-widget-content { border: none; }
/* Inspector window */
#ge-inspector-window {
height: unset;
width: auto;
}
#ge-inspector {
height: inherit; width: inherit;
}
/****** GO CLOUD STORAGE STYLINGS OVERRIDES ***/
.ge-menu .goCustomFilepicker {
width: -webkit-fill-available;
height: unset;
top: auto; left: auto;
border: none;
}
.ge-menu #goCloudStorageManagerMenu {
width: unset;
top: auto; left: auto;
border: none;
}
#ge-goCloudStorageManagerMenu-window {
height: auto;
}