first commit
This commit is contained in:
577
css/impact.scss
Normal file
577
css/impact.scss
Normal file
@ -0,0 +1,577 @@
|
||||
|
||||
#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;
|
||||
}
|
||||
Reference in New Issue
Block a user