612 lines
16 KiB
CSS
612 lines
16 KiB
CSS
/*
|
|
Default styles for jsPlumb Toolkit/Community Editions.
|
|
|
|
Copyright 2020 https://jsplumbtoolkit.com
|
|
*/
|
|
|
|
/**
|
|
jtk-connector is assigned to connector SVG elements. overflow:visible here ensures we dont have to take into account path
|
|
width and overlay sizes when computing the size of the svg element. In the Community edition this is a change from
|
|
2.14.0 onwards.
|
|
*/
|
|
.jtk-connector {
|
|
overflow:visible;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------------------------- */
|
|
/* --- SURFACE WIDGET -------------------------------------------------------------------------- */
|
|
/* --------------------------------------------------------------------------------------------- */
|
|
|
|
/*
|
|
Assigned to every Node managed by an instance of the Toolkit. They are required to be positioned absolute, to
|
|
enable dragging to work properly.
|
|
*/
|
|
.jtk-node {
|
|
position: absolute;
|
|
}
|
|
|
|
/*
|
|
Assigned to every Group managed by an instance of the Toolkit. They are required to be positioned absolute, to
|
|
enable dragging to work properly. We set overflow:visible on Group elements too, as a drag outside of the bounds
|
|
is automatically reverted anyway, and without overflow:visible you cannot drag a node to some other element. You can
|
|
also drag a node out of the element's viewport and if you drop it you can never get it back.
|
|
*/
|
|
.jtk-group {
|
|
position: absolute;
|
|
overflow: visible;
|
|
}
|
|
|
|
/*
|
|
|
|
This is the attribute used to mark which part of a Group DOM element should contain the child Nodes. We mark it
|
|
as having `position:relative` so that the absolute positioned Nodes are drawn correctly.
|
|
*/
|
|
[jtk-group-content] {
|
|
position:relative;
|
|
}
|
|
|
|
/*
|
|
This style was created in response to this Chrome bug:
|
|
http://stackoverflow.com/questions/13758215/artifacts-when-css-scaled-in-chrome
|
|
|
|
Basically it's about how sometimes there can be artefacts left on screen when the user drags an element. It seems
|
|
the issue has been fixed in more recent versions of Chrome, but the style is left here in case you come across
|
|
the problem.
|
|
*/
|
|
.jtk-node.jtk-drag {
|
|
/*-webkit-backface-visibility: hidden;*/
|
|
}
|
|
|
|
/*
|
|
Suppresses the pointer events on an element that was created by Katavorio in response to a drag in which the element
|
|
should first be cloned. Having this clone ignore pointer events means there is less chance that any other
|
|
mouse activity (such as click) on the original element will not be consumed by katavorio.
|
|
*/
|
|
.katavorio-clone-drag {
|
|
pointer-events:none;
|
|
}
|
|
|
|
/*
|
|
Assigned to an element that is the `Container` in a `render` call.
|
|
Elements that are acting as Surface widgets should have overflow:hidden set to prevent libs from
|
|
scrolling them during drag (we don't want scrollbars; we have an infinite canvas). Position is set to
|
|
`relative` as this is the parent for nodes, which are positioned absolute (and for absolute positioning
|
|
to work, you need to ensure the parent node has `position:relative`). This style also sets some default
|
|
values for the cursor - using a `grab` cursor where supported.
|
|
*/
|
|
.jtk-surface {
|
|
overflow: hidden !important;
|
|
position: relative;
|
|
cursor: move;
|
|
cursor: -moz-grab;
|
|
cursor: -webkit-grab;
|
|
|
|
/*
|
|
For IE10+. As discussed on this page:
|
|
|
|
https://msdn.microsoft.com/en-us/library/ie/jj583807(v=vs.85).aspx
|
|
|
|
Microsoft have very helpfully implemented default behaviours for a bunch of touch events and
|
|
then consumed the events so you don't have to be bothered by them. They've "done a lot of research"
|
|
about this stuff and put together a really great default experience for everyone in the entire world.
|
|
*/
|
|
touch-action:none;
|
|
|
|
/*
|
|
Another Chrome issue that appears to have been fixed in later versions
|
|
http://stackoverflow.com/questions/15464055/css-transition-effect-makes-image-blurry-moves-image-1px-in-chrome
|
|
*/
|
|
/*
|
|
-webkit-backface-visibility: hidden;
|
|
-webkit-transform: translateZ(0) scale(1.0, 1.0);
|
|
*/
|
|
}
|
|
|
|
/*
|
|
Assigned to the surface when it is being panned. The default is to change the cursor (in browsers that support
|
|
a `grabbing` cursor), and to disable text selection.
|
|
*/
|
|
.jtk-surface-panning {
|
|
cursor: -moz-grabbing;
|
|
cursor: -webkit-grabbing;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/*
|
|
The work area in a surface renderer.
|
|
*/
|
|
.jtk-surface-canvas {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/*
|
|
For IE10+. Discussed above in the .jtk-surface styles. This one is specific to elements that are configured
|
|
to be droppable on a Surface via its `registerDroppableNodes` method.
|
|
*/
|
|
.jtk-surface-droppable-node {
|
|
touch-action:none;
|
|
}
|
|
|
|
/*
|
|
Assigned to a Surface widget when panning is disabled (and therefore the app is relying on scrollbars when the content overflows).
|
|
*/
|
|
.jtk-surface-nopan {
|
|
overflow: scroll !important;
|
|
cursor:default;
|
|
}
|
|
|
|
/*
|
|
Assigned to tile images in a tiled background
|
|
*/
|
|
.jtk-surface-tile {
|
|
border:none;
|
|
outline:none;
|
|
margin:0;
|
|
-webkit-transition: opacity .3s ease .15s;
|
|
-moz-transition: opacity .3s ease .15s;
|
|
-o-transition: opacity .3s ease .15s;
|
|
-ms-transition: opacity .3s ease .15s;
|
|
transition: opacity .3s ease .15s;
|
|
}
|
|
|
|
/*
|
|
Assigned to the element used for node select with the mouse ("lasso").
|
|
*/
|
|
.jtk-lasso {
|
|
border: 2px solid rgb(49, 119, 184);
|
|
background-color: WhiteSmoke;
|
|
opacity: 0.5;
|
|
display: none;
|
|
z-index: 20000;
|
|
position: absolute;
|
|
}
|
|
|
|
/*
|
|
This class is added to the document body on lasso drag start and removed at the end of lasso dragging. Its purpose
|
|
is to switch off text selection on all elements while the user is dragging the lasso.
|
|
*/
|
|
.jtk-lasso-select-defeat * {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/**
|
|
Added to the lasso mask when it is operating in 'inverted' mode, ie. the excluded parts of the UI are covered, rather
|
|
than the normal mode in which the selected parts of the UI are covered.
|
|
*/
|
|
.jtk-lasso-mask {
|
|
position:fixed;
|
|
z-index:20000;
|
|
display:none;
|
|
opacity:0.5;
|
|
background-color: #07234E;
|
|
top:0;
|
|
bottom:0;
|
|
left:0;
|
|
right:0;
|
|
}
|
|
|
|
/*
|
|
Assigned to some element that has been selected (either via lasso or programmatically).
|
|
*/
|
|
.jtk-surface-selected-element {
|
|
border: 2px dashed #f76258 !important;
|
|
}
|
|
|
|
/*
|
|
Assigned to all pan buttons in a surface widget.
|
|
*/
|
|
.jtk-surface-pan {
|
|
background-color: Azure;
|
|
opacity: 0.4;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
z-index: 2;
|
|
-webkit-transition: background-color 0.15s ease-in;
|
|
-moz-transition: background-color 0.15s ease-in;
|
|
-o-transition: background-color 0.15s ease-in;
|
|
transition: background-color 0.15s ease-in;
|
|
}
|
|
|
|
/*
|
|
Specific styles for the top and bottom pan buttons.
|
|
Top/bottom are 100% width and 20px high by default
|
|
*/
|
|
.jtk-surface-pan-top, .jtk-surface-pan-bottom {
|
|
width: 100%;
|
|
height: 20px;
|
|
}
|
|
|
|
/*
|
|
Hover styles for all pan buttons.
|
|
On hover, change color, background color, font weight and opacity.
|
|
*/
|
|
.jtk-surface-pan-top:hover, .jtk-surface-pan-bottom:hover, .jtk-surface-pan-left:hover, .jtk-surface-pan-right:hover {
|
|
opacity: 0.6;
|
|
background-color: rgb(49, 119, 184);
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/*
|
|
Specific styles for the left and right pan buttons.
|
|
Left/right pan buttons are 100% height and 20px wide
|
|
*/
|
|
.jtk-surface-pan-left, .jtk-surface-pan-right {
|
|
width: 20px;
|
|
height: 100%;
|
|
line-height: 40;
|
|
}
|
|
|
|
|
|
/*
|
|
Assigned to a pan button when the user is pressing it.
|
|
*/
|
|
.jtk-surface-pan-active, .jtk-surface-pan-active:hover {
|
|
background-color: #f76258;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------------------------- */
|
|
/* --- MINIVIEW WIDGET ------------------------------------------------------------------------- */
|
|
/* --------------------------------------------------------------------------------------------- */
|
|
|
|
/*
|
|
Assigned to an element that is acting as a Miniview.
|
|
As with Surface, Miniview elements should have overflow:hidden set to prevent
|
|
libs from scrolling them during drag. This style also provides a default width/height for a miniview,
|
|
which you may wish to override.
|
|
*/
|
|
.jtk-miniview {
|
|
overflow: hidden !important;
|
|
width: 125px;
|
|
height: 125px;
|
|
position: relative;
|
|
background-color: #B2C9CD;
|
|
border: 1px solid #E2E6CD;
|
|
border-radius: 4px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/*
|
|
Assigned to the element that shows the size of the related viewport in a Miniview widget, and which can be dragged to
|
|
move the surface.
|
|
*/
|
|
.jtk-miniview-panner {
|
|
border: 5px dotted WhiteSmoke;
|
|
opacity: 0.4;
|
|
background-color: rgb(79, 111, 126);
|
|
cursor: move;
|
|
cursor: -moz-grab;
|
|
cursor: -webkit-grab;
|
|
}
|
|
|
|
/*
|
|
Assigned to the miniview's panner when it is being dragged.
|
|
*/
|
|
.jtk-miniview-panning {
|
|
cursor: -moz-grabbing;
|
|
cursor: -webkit-grabbing;
|
|
}
|
|
|
|
/*
|
|
Added to all elements displayed in a miniview.
|
|
*/
|
|
.jtk-miniview-element {
|
|
background-color: rgb(96, 122, 134);
|
|
position: absolute;
|
|
}
|
|
|
|
/*
|
|
Added to Group elements displayed in a miniview
|
|
*/
|
|
.jtk-miniview-group-element {
|
|
background: transparent;
|
|
border: 2px solid rgb(96,122,134);
|
|
}
|
|
|
|
/*
|
|
Assigned to the collapse/expand miniview button
|
|
*/
|
|
.jtk-miniview-collapse {
|
|
color: whiteSmoke;
|
|
position: absolute;
|
|
font-size: 18px;
|
|
top: -1px;
|
|
right: 3px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/*
|
|
The '-' symbol when the miniview is expanded
|
|
*/
|
|
.jtk-miniview-collapse:before {
|
|
content: "\2012";
|
|
}
|
|
|
|
/*
|
|
Assigned to the miniview element when it is collapsed.
|
|
*/
|
|
.jtk-miniview-collapsed {
|
|
background-color: #449ea6;
|
|
border-radius: 4px;
|
|
height: 22px;
|
|
margin-right: 0;
|
|
padding: 4px;
|
|
width: 21px;
|
|
}
|
|
|
|
/*
|
|
Hide all children of the miniview (except the expand button) when it is collapsed so you don't see anything
|
|
poking through under the + icon.
|
|
*/
|
|
.jtk-miniview-collapsed .jtk-miniview-element, .jtk-miniview-collapsed .jtk-miniview-panner {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/*
|
|
The '+' symbol when the miniview is collapsed.
|
|
*/
|
|
.jtk-miniview-collapsed .jtk-miniview-collapse:before {
|
|
content: "+";
|
|
}
|
|
|
|
/*
|
|
Hover state for the collapse/expand icon.
|
|
*/
|
|
.jtk-miniview-collapse:hover {
|
|
color: #E4F013;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------------------------------- */
|
|
/* --- DIALOGS --------------------------------------------------------------------------------*/
|
|
/* ------------------------------------------------------------------------------------------- */
|
|
|
|
/*
|
|
This is the element that acts as the dialog underlay - the modal "mask". Note the high z-index default
|
|
set here (and note also the overlay style below has a z-index with a value higher by one).
|
|
*/
|
|
.jtk-dialog-underlay {
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
position: fixed;
|
|
z-index: 100000;
|
|
opacity: 0.8;
|
|
background-color: #CCC;
|
|
display: none;
|
|
}
|
|
|
|
/*
|
|
This is the element that acts as the parent for dialog content.
|
|
*/
|
|
.jtk-dialog-overlay {
|
|
position: fixed;
|
|
z-index: 100001;
|
|
display: none;
|
|
background-color: white;
|
|
font-family: "Open Sans", sans-serif;
|
|
padding: 7px;
|
|
box-shadow: 0 0 5px gray;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.jtk-dialog-overlay-x {
|
|
max-height:0;
|
|
transition: max-height 0.5s ease-in;
|
|
-moz-transition: max-height 0.5s ease-in;
|
|
-ms-transition: max-height 0.5s ease-in;
|
|
-o-transition: max-height 0.5s ease-in;
|
|
-webkit-transition: max-height 0.5s ease-in;
|
|
}
|
|
|
|
.jtk-dialog-overlay-y {
|
|
max-width:0;
|
|
transition: max-width 0.5s ease-in;
|
|
-moz-transition: max-width 0.5s ease-in;
|
|
-ms-transition: max-width 0.5s ease-in;
|
|
-o-transition: max-width 0.5s ease-in;
|
|
-webkit-transition: max-width 0.5s ease-in;
|
|
}
|
|
|
|
.jtk-dialog-overlay-top {
|
|
top:20px;
|
|
}
|
|
|
|
.jtk-dialog-overlay-bottom {
|
|
bottom:20px;
|
|
}
|
|
|
|
.jtk-dialog-overlay-left {
|
|
left:20px;
|
|
}
|
|
|
|
.jtk-dialog-overlay-right {
|
|
right:20px;
|
|
}
|
|
|
|
.jtk-dialog-overlay-x.jtk-dialog-overlay-visible {
|
|
max-height:1000px;
|
|
}
|
|
|
|
.jtk-dialog-overlay-y.jtk-dialog-overlay-visible {
|
|
max-width:1000px;
|
|
}
|
|
|
|
/*
|
|
The element containing buttons in a dialog.
|
|
*/
|
|
.jtk-dialog-buttons {
|
|
text-align: right;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/*
|
|
An individual button in a dialog.
|
|
*/
|
|
.jtk-dialog-button {
|
|
border: none;
|
|
cursor: pointer;
|
|
margin-right: 5px;
|
|
min-width: 56px;
|
|
background-color: white;
|
|
outline: 1px solid #ccc;
|
|
}
|
|
|
|
/*
|
|
Hover style for an individual button in a dialog.
|
|
*/
|
|
.jtk-dialog-button:hover {
|
|
color: white;
|
|
background-color: #234b5e;
|
|
}
|
|
|
|
/*
|
|
The titlebar of a dialog.
|
|
*/
|
|
.jtk-dialog-title {
|
|
text-align: left;
|
|
font-size: 14px;
|
|
margin-bottom: 9px;
|
|
}
|
|
|
|
.jtk-dialog-content {
|
|
font-size:12px;
|
|
text-align:left;
|
|
min-width:250px;
|
|
margin: 0 14px;
|
|
}
|
|
|
|
.jtk-dialog-content ul {
|
|
width:100%;
|
|
padding-left:0;
|
|
}
|
|
|
|
.jtk-dialog-content label {
|
|
cursor: pointer;
|
|
font-weight: inherit;
|
|
}
|
|
|
|
.jtk-dialog-overlay input, .jtk-dialog-overlay textarea {
|
|
background-color: #FFF;
|
|
border: 1px solid #CCC;
|
|
color: #333;
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
outline: none;
|
|
padding: 6px 4px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.jtk-dialog-overlay input:focus, .jtk-dialog-overlay textarea:focus {
|
|
background-color: #cbeae1;
|
|
border: 1px solid #83b8a8;
|
|
color: #333;
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
outline: none;
|
|
}
|
|
|
|
/* -------------------------------------------------------------------------------------------- */
|
|
/* --- DRAWING TOOLS -------------------------------------------------------------------------- */
|
|
/* -------------------------------------------------------------------------------------------- */
|
|
|
|
/*
|
|
Assigned to the element that is drawn around some other element when a drawing operation is taking place.
|
|
*/
|
|
.jtk-draw-skeleton {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
outline: 2px solid #84acb3;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/*
|
|
Assigned to every handle (top left, top right, bottom left, bottom right, center) in a draw skeleton.
|
|
*/
|
|
.jtk-draw-handle {
|
|
position: absolute;
|
|
width: 7px;
|
|
height: 7px;
|
|
background-color: #84acb3;
|
|
}
|
|
|
|
/*
|
|
Assigned to the top left handle in a draw skeleton
|
|
*/
|
|
.jtk-draw-handle-tl {
|
|
left: 0;
|
|
top: 0;
|
|
cursor: nw-resize;
|
|
}
|
|
|
|
/*
|
|
Assigned to the top right handle in a draw skeleton
|
|
*/
|
|
.jtk-draw-handle-tr {
|
|
right: 0;
|
|
top: 0;
|
|
cursor: ne-resize;
|
|
}
|
|
|
|
/*
|
|
Assigned to the bottom left handle in a draw skeleton
|
|
*/
|
|
.jtk-draw-handle-bl {
|
|
left: 0;
|
|
bottom: 0;
|
|
cursor: sw-resize;
|
|
}
|
|
|
|
/*
|
|
Assigned to the bottom right handle in a draw skeleton
|
|
*/
|
|
.jtk-draw-handle-br {
|
|
bottom: 0;
|
|
right: 0;
|
|
cursor: se-resize;
|
|
}
|
|
|
|
/*
|
|
Assigned to the center handle in a draw skeleton (the handle by which the element may be dragged). This is
|
|
not visible by defaut; enable if you need it.
|
|
*/
|
|
.jtk-draw-drag {
|
|
display:none;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-left: -10px;
|
|
margin-top: -10px;
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: #84acb3;
|
|
cursor: move;
|
|
}
|
|
|
|
/*
|
|
This class is added to the document body on drag resize start and removed at the end of resizing. Its purpose
|
|
is to switch off text selection on all elements while the user is resizing an element.
|
|
*/
|
|
.jtk-drag-select-defeat * {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|