578 lines
9.8 KiB
SCSS
578 lines
9.8 KiB
SCSS
|
|
#network_container {
|
|
height: 70vh;
|
|
|
|
div {
|
|
z-index: 1 !important;
|
|
position: absolute !important;
|
|
}
|
|
|
|
&.fullscreen {
|
|
position : fixed;
|
|
left : 0;
|
|
right : 0;
|
|
top : 0;
|
|
bottom : 0;
|
|
width : 100%;
|
|
height : 100%;
|
|
background-color: white;
|
|
z-index : 80;
|
|
}
|
|
}
|
|
|
|
#help_text {
|
|
font-weight: bold;
|
|
display : none;
|
|
position : absolute;
|
|
padding : 10px;
|
|
color : #707e8c;
|
|
font-size : 1.3em;
|
|
z-index : 2;
|
|
}
|
|
|
|
#impact_tools {
|
|
margin-left : auto;
|
|
margin-right : 5px;
|
|
background-color: white;
|
|
padding : 5px;
|
|
border : 1px solid lightgray;
|
|
border-radius : 2px;
|
|
|
|
span:hover {
|
|
background-color: lightgray;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
|
|
.impact-mb-2 {
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.network-parent {
|
|
border : 1px solid #f1f1f1;
|
|
position: relative;
|
|
padding : 0 !important;
|
|
}
|
|
|
|
.network-table {
|
|
max-width: none !important;
|
|
}
|
|
|
|
.impact-dialog {
|
|
display: none;
|
|
}
|
|
|
|
i.fa-impact-manipulation {
|
|
display: inline;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.impact_toolbar {
|
|
position : absolute;
|
|
display : inline-flex;
|
|
justify-content: flex-start;
|
|
left : 0;
|
|
right : 0;
|
|
z-index : 20;
|
|
flex-wrap : wrap;
|
|
|
|
span {
|
|
float : left;
|
|
color : gray;
|
|
font-size : 1.3em;
|
|
padding : 4px 8px;
|
|
transition: all 0.3s ease;
|
|
cursor : pointer;
|
|
border : 2px inset transparent;
|
|
}
|
|
|
|
.active {
|
|
border: 2px inset #f4f4f4;
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
&.fullscreen {
|
|
position: fixed;
|
|
top : 5px;
|
|
z-index : 81;
|
|
}
|
|
}
|
|
|
|
.impact_toolbar_right {
|
|
float: right !important;
|
|
}
|
|
|
|
.clean {
|
|
animation: clean-fade 3s;
|
|
}
|
|
|
|
@keyframes clean-fade {
|
|
0% {
|
|
color: #1ca448;
|
|
}
|
|
100% {
|
|
color: #707e8c;
|
|
}
|
|
}
|
|
|
|
.dirty {
|
|
color: #eea818 !important;
|
|
|
|
&:hover {
|
|
background-color: #fec95c !important;
|
|
color: #8f5a0a !important;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Cytoscape context menu
|
|
*/
|
|
|
|
.cy-context-menus-cxt-menuitem {
|
|
padding-left: 5px !important;
|
|
font-size: 1.15em;
|
|
background-color:white;
|
|
|
|
i {
|
|
padding-right: 10px !important;
|
|
color: gray;
|
|
max-width: 10px;
|
|
}
|
|
}
|
|
|
|
.cy-context-menus-cxt-menu {
|
|
border-radius : 2px;
|
|
border : 1px solid lightgray;
|
|
-webkit-box-shadow: 4px 4px 6px 3px rgba(0,0,0,0.17);
|
|
-moz-box-shadow : 4px 4px 6px 3px rgba(0,0,0,0.17);
|
|
box-shadow : 4px 4px 6px 3px rgba(0,0,0,0.17);
|
|
}
|
|
|
|
/*
|
|
* Custom range input
|
|
*/
|
|
|
|
.impact-range {
|
|
height : 18px;
|
|
-webkit-appearance: none;
|
|
margin : 10px 0;
|
|
border-width : 0 !important;
|
|
margin-top : 0 !important;
|
|
margin-bottom : 0 !important;
|
|
}
|
|
|
|
.impact-range:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.impact-range::-webkit-slider-runnable-track {
|
|
width : 100%;
|
|
height : 4px;
|
|
cursor : pointer;
|
|
animate : 0.2s;
|
|
box-shadow : 0px 0px 0px #000000;
|
|
background : #AEC8D8;
|
|
border-radius: 25px;
|
|
border : 1px solid #8A8A8A;
|
|
}
|
|
|
|
.impact-range::-webkit-slider-thumb {
|
|
box-shadow : 1px 1px 1px #828282;
|
|
border : 1px solid #8A8A8A;
|
|
height : 10px;
|
|
width : 14px;
|
|
border-radius : 2px;
|
|
background : #66757F;
|
|
cursor : pointer;
|
|
-webkit-appearance: none;
|
|
margin-top : -4px;
|
|
}
|
|
|
|
.impact-range:focus::-webkit-slider-runnable-track {
|
|
background: #AEC8D8;
|
|
}
|
|
|
|
.impact-range::-moz-range-track {
|
|
width : 100%;
|
|
height : 4px;
|
|
cursor : pointer;
|
|
animate : 0.2s;
|
|
box-shadow : 0px 0px 0px #000000;
|
|
background : #AEC8D8;
|
|
border-radius: 25px;
|
|
border : 1px solid #8A8A8A;
|
|
}
|
|
|
|
.impact-range::-moz-range-thumb {
|
|
box-shadow : 1px 1px 1px #828282;
|
|
border : 1px solid #8A8A8A;
|
|
height : 10px;
|
|
width : 14px;
|
|
border-radius: 2px;
|
|
background : #66757F;
|
|
cursor : pointer;
|
|
}
|
|
|
|
.impact-range::-ms-track {
|
|
width : 100%;
|
|
height : 4px;
|
|
cursor : pointer;
|
|
animate : 0.2s;
|
|
background : transparent;
|
|
border-color: transparent;
|
|
color : transparent;
|
|
}
|
|
|
|
.impact-range::-ms-fill-lower {
|
|
background : #AEC8D8;
|
|
border : 1px solid #8A8A8A;
|
|
border-radius: 50px;
|
|
box-shadow : 0px 0px 0px #000000;
|
|
}
|
|
|
|
.impact-range::-ms-fill-upper {
|
|
background : #AEC8D8;
|
|
border : 1px solid #8A8A8A;
|
|
border-radius: 50px;
|
|
box-shadow : 0px 0px 0px #000000;
|
|
}
|
|
|
|
.impact-range::-ms-thumb {
|
|
margin-top : 1px;
|
|
box-shadow : 1px 1px 1px #828282;
|
|
border : 1px solid #8A8A8A;
|
|
height : 10px;
|
|
width : 14px;
|
|
border-radius: 2px;
|
|
background : #66757F;
|
|
cursor : pointer;
|
|
}
|
|
|
|
.impact-range:focus::-ms-fill-lower {
|
|
background: #AEC8D8;
|
|
}
|
|
|
|
.impact-range:focus::-ms-fill-upper {
|
|
background: #AEC8D8;
|
|
}
|
|
|
|
/*
|
|
* Header
|
|
*/
|
|
.impact-header {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #f1f1f1;
|
|
|
|
h2 {
|
|
margin-left: auto;
|
|
}
|
|
|
|
#switchview {
|
|
margin-left: auto;
|
|
margin-right: 10px;
|
|
|
|
a {
|
|
font-size: 0.85em !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
#impact_list_view {
|
|
margin-top: 2em;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.impact-list-container {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.impact-list-group {
|
|
margin-bottom: 5em;
|
|
}
|
|
|
|
.impact-left {
|
|
padding-left: 10px !important;
|
|
}
|
|
|
|
.impact-pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.impact-list-toolbar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
text-align: right;
|
|
}
|
|
|
|
.impact-list-toolbar i {
|
|
padding: 10px;
|
|
}
|
|
|
|
.impact-list-header {
|
|
padding: 1px 5px !important;
|
|
}
|
|
|
|
.impact-list-tools {
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
.impact-toggle-subitems-master {
|
|
float: right;
|
|
padding-right: 5px;
|
|
font-size: 1.15rem;
|
|
}
|
|
|
|
.impact-toggle-subitems {
|
|
float: right;
|
|
padding-right: 5px;
|
|
font-size: 1.15rem;
|
|
}
|
|
|
|
/*
|
|
* Sidebar
|
|
*/
|
|
.impact-side {
|
|
height : 100%;
|
|
// width : 40px;
|
|
position : absolute;
|
|
top : 0;
|
|
right : 0;
|
|
background-color: #fafafa;
|
|
z-index : 80;
|
|
border-left : 1px solid #f1f1f1;
|
|
border-right : 1px solid #f1f1f1;
|
|
display : flex;
|
|
justify-content: space-between;
|
|
|
|
ul {
|
|
list-style : none;
|
|
border-left: 1px solid #f1f1f1;
|
|
}
|
|
|
|
li {
|
|
color : #707e8c;
|
|
width : 100%;
|
|
vertical-align: middle;
|
|
cursor : pointer;
|
|
|
|
i {
|
|
padding : 10px 8px;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
&:hover {
|
|
color: rgb(14, 14, 14);
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
&.active {
|
|
color: #444 !important;
|
|
background-color: #d5d5d5 !important;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
&.impact-disabled {
|
|
cursor: default !important;
|
|
color: #aaaeb3;
|
|
|
|
&:hover {
|
|
color: #aaaeb3;
|
|
background-color: #fafafa;
|
|
}
|
|
}
|
|
|
|
&.impact-separator {
|
|
border-top: 2px solid #dfdfdf;
|
|
}
|
|
}
|
|
|
|
&.impact-side-expanded {
|
|
// width : 250px;
|
|
border-left: 3px solid #f1f1f1;
|
|
|
|
li {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
&.fullscreen {
|
|
position: fixed;
|
|
// top : 5px;
|
|
z-index : 81;
|
|
}
|
|
}
|
|
|
|
.impact-drop-preview {
|
|
display : none;
|
|
position: fixed;
|
|
z-index : 83;
|
|
opacity : 50%;
|
|
width : 48px;
|
|
height : 48px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.impact-side-panel {
|
|
color: #707e8c;
|
|
width: 0px;
|
|
overflow: hidden;
|
|
transition: width 0.5s ease;
|
|
|
|
&.impact-side-expanded {
|
|
padding: 3px 10px;
|
|
overflow: auto;
|
|
width: 210px;
|
|
}
|
|
|
|
h3 {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.impact-side-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
padding: 4px;
|
|
}
|
|
|
|
#impact-side-filter-itemtypes {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.impact-side-search {
|
|
display: none;
|
|
|
|
i {
|
|
cursor: pointer;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
img {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
h4 {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.impact-side-search-footer {
|
|
height: 37px;
|
|
}
|
|
|
|
.impact-side-search-more {
|
|
cursor: pointer;
|
|
|
|
i {
|
|
margin-right: 3px;
|
|
}
|
|
}
|
|
|
|
.impact-side-toggle {
|
|
display : none;
|
|
background-color: #f1f1f1;
|
|
position : absolute;
|
|
bottom : 0;
|
|
color : #707e8c;
|
|
width : 100%;
|
|
text-align : center;
|
|
cursor : pointer;
|
|
|
|
i {
|
|
padding : 10px 5px;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
&:hover {
|
|
color: rgb(14, 14, 14);
|
|
}
|
|
}
|
|
|
|
.impact-side-filter-itemtypes-items {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.impact-side-search-results {
|
|
p {
|
|
cursor: pointer;
|
|
-webkit-user-select: none; /* Safari */
|
|
-moz-user-select: none; /* Firefox */
|
|
-ms-user-select: none; /* IE10+/Edge */
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.impact-side-filter-itemtypes-item {
|
|
cursor: pointer;
|
|
|
|
span {
|
|
display: inline;
|
|
margin-left: 4px;
|
|
}
|
|
h4 {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.impact-side-search-spinner {
|
|
margin-top: 10px;
|
|
text-align: center;
|
|
display: none;
|
|
}
|
|
|
|
.impact-side-search-no-results {
|
|
display: none;
|
|
}
|
|
|
|
.impact-checkbox-label {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.impact-side-settings {
|
|
h4 {
|
|
white-space: nowrap;
|
|
margin-top: 25px;
|
|
}
|
|
}
|
|
|
|
.impact-side-settings-item {
|
|
margin-bottom: 10px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.impact-res-hidden {
|
|
float: right;
|
|
}
|
|
|
|
.impact-res-disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed !important;
|
|
|
|
i {
|
|
cursor: not-allowed !important;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Hide toolbar for readonly, will be shown in JS if needed
|
|
*/
|
|
#save_impact,
|
|
#add_node,
|
|
#add_edge,
|
|
#add_compound,
|
|
#delete_element,
|
|
#impact_settings {
|
|
display: none;
|
|
}
|