mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-11-11 10:06:53 +08:00
654 lines
10 KiB
SCSS
654 lines
10 KiB
SCSS
// scss-lint:disable SelectorDepth
|
|
// scss-lint:disable NestingDepth
|
|
@import 'constants';
|
|
@import "mixins";
|
|
|
|
// Some color definitions
|
|
$color-group-hover: $color-alabaster;
|
|
$color-module-hover: $brand-primary;
|
|
|
|
#sortMenu {
|
|
border-color: $color-white;
|
|
|
|
&:not(:focus) {
|
|
color: $color-silver-chalice;
|
|
}
|
|
|
|
&:hover {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
/* Secondary navigation */
|
|
|
|
.navbar-nav {
|
|
.projects-view-mode-switch {
|
|
margin: 8px 10px 12px;
|
|
}
|
|
|
|
}
|
|
|
|
/* Canvas index page */
|
|
|
|
#canvas-container:not(.canvas-container-edit-mode) {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/**********************************
|
|
* jsPlumb CANVAS RELATED STYLING *
|
|
*********************************/
|
|
#diagram-buttons {
|
|
align-items: center;
|
|
display: flex;
|
|
|
|
#edit-canvas-button {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.actions-button {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.toolbarButtons {
|
|
align-items: center;
|
|
display: flex;
|
|
|
|
.zoom-text {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#update-canvas {
|
|
|
|
.canvas-header {
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
#canvas-new-module {
|
|
.hbtn-default {
|
|
opacity: 1;
|
|
width: 0;
|
|
float: none;
|
|
}
|
|
|
|
.hbtn-hover {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
float: left;
|
|
}
|
|
|
|
&:hover {
|
|
.hbtn-default {
|
|
opacity: 0;
|
|
height: 0;
|
|
float: left;
|
|
}
|
|
.hbtn-hover {
|
|
opacity: 1;
|
|
float: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
#diagram-container {
|
|
@include box-shadow(0 0 2px 1px $color-silver);
|
|
background: $color-silver;
|
|
cursor: move;
|
|
height: 650px;
|
|
overflow: hidden;
|
|
// for IE10+ touch devices
|
|
touch-action: none;
|
|
}
|
|
|
|
.diagram {
|
|
position: relative;
|
|
display: block;
|
|
|
|
.window:hover {
|
|
@include box-shadow(2px 2px 19px $color-emperor);
|
|
}
|
|
|
|
.hover {
|
|
border: 1px dotted red;
|
|
}
|
|
|
|
._jsPlumb_connector {
|
|
z-index: 4;
|
|
}
|
|
|
|
._jsPlumb_endpoint_anchor {
|
|
}
|
|
|
|
._jsPlumb_endpoint, ._jsPlumb_endpoint_full {
|
|
z-index: 21;
|
|
cursor: pointer;
|
|
}
|
|
|
|
._jsPlumb_overlay, .endpointTargetLabel, .endpointSourceLabel {
|
|
z-index: 21;
|
|
background-color: $color-white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.connLabel {
|
|
background-color: $color-white;
|
|
color: $color-dove-gray;
|
|
padding: 0px 7px 2px 7px;
|
|
font: 20px arial;
|
|
font-weight: bold;
|
|
border-radius: 50%;
|
|
z-index: 5;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: $brand-primary;
|
|
padding: 2px 9px 4px 9px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.window._jsPlumb_connected {
|
|
border: 2px solid green;
|
|
}
|
|
.jsplumb-drag .title {
|
|
background-color: $brand-primary !important;
|
|
color: $color-white !important;
|
|
}
|
|
path, ._jsPlumb_endpoint {
|
|
cursor: pointer;
|
|
}
|
|
.ep-normal svg * {
|
|
fill: $color-white;
|
|
}
|
|
.ep-hover svg * {
|
|
fill: $brand-primary;
|
|
}
|
|
|
|
/* EDIT MODE MODULE */
|
|
.module.new {
|
|
opacity: 0.7;
|
|
}
|
|
.module.dragged > .panel-heading {
|
|
background-color: $brand-primary;
|
|
color: $color-white;
|
|
}
|
|
.module.collided {
|
|
.overlay {
|
|
display: block;
|
|
z-index: 21;
|
|
background-color: $brand-danger;
|
|
border: 1px solid $brand-danger;
|
|
@include box-shadow(0 0 0 1pt $brand-danger);
|
|
border-radius: 4px;
|
|
position: absolute;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
.module {
|
|
cursor: pointer;
|
|
display: block;
|
|
position: absolute;
|
|
width: 290px;
|
|
|
|
.panel-heading {
|
|
height: 40px;
|
|
|
|
.dropdown {
|
|
bottom: 18px;
|
|
left: 0;
|
|
}
|
|
}
|
|
.panel-body {
|
|
height: 90px;
|
|
}
|
|
|
|
.ep {
|
|
font-style: italic;
|
|
}
|
|
|
|
.dropdown {
|
|
.dropdown-toggle {
|
|
color: $color-silver-chalice;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
z-index: 30;
|
|
}
|
|
}
|
|
|
|
.overlay {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* FULL-ZOOM MODULE */
|
|
.module-large {
|
|
cursor: pointer;
|
|
display: block;
|
|
position: absolute;
|
|
width: 300px;
|
|
z-index: 5;
|
|
|
|
.panel-body .due-date-link {
|
|
color: $color-emperor;
|
|
}
|
|
|
|
.panel-body .due-date-label {
|
|
margin-left: 30px;
|
|
}
|
|
|
|
&.expanded {
|
|
z-index: 30;
|
|
}
|
|
|
|
&.group-hover {
|
|
@include box-shadow(0 0 0 5px $color-group-hover);
|
|
}
|
|
&.module-hover {
|
|
@include box-shadow(0 0 0 5px $color-module-hover);
|
|
}
|
|
|
|
&.alert-green .panel-body {
|
|
color: $brand-success;
|
|
font-weight: bold;
|
|
|
|
.due-date-link {
|
|
color: $brand-success;
|
|
}
|
|
}
|
|
|
|
&.alert-yellow .panel-body {
|
|
color: $brand-warning;
|
|
font-weight: bold;
|
|
|
|
.due-date-link {
|
|
color: $brand-warning;
|
|
}
|
|
}
|
|
&.alert-red .panel-body {
|
|
color: $brand-danger;
|
|
font-weight: bold;
|
|
|
|
.due-date-link {
|
|
color: $brand-danger;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* MEDIUM-ZOOM MODULE */
|
|
.module-medium {
|
|
width: 200px;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
display: block;
|
|
z-index: 5;
|
|
|
|
&.group-hover {
|
|
@include box-shadow(0 0 0 5px $color-group-hover);
|
|
}
|
|
&.module-hover {
|
|
@include box-shadow(0 0 0 5px $color-module-hover);
|
|
}
|
|
|
|
&.alert-green {
|
|
border-color: $brand-success;
|
|
border-radius: 8px;
|
|
border-width: 4px;
|
|
}
|
|
|
|
&.alert-yellow {
|
|
border-color: $brand-warning;
|
|
border-width: 4px;
|
|
border-radius: 8px;
|
|
}
|
|
&.alert-red {
|
|
border-color: $brand-danger;
|
|
border-width: 4px;
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
|
|
.module-large .tags-container,
|
|
.module-medium .tags-container {
|
|
padding-top: 2px;
|
|
|
|
div {
|
|
font-size: 22pt;
|
|
width: 4px;
|
|
height: 0px;
|
|
display: inline-block;
|
|
|
|
& .fas {
|
|
position: inherit;
|
|
}
|
|
|
|
&.last {
|
|
margin-right: 15px;
|
|
color: $color-silver-chalice;
|
|
}
|
|
}
|
|
|
|
& span.badge {
|
|
margin-left: -8px;
|
|
margin-top: -10px;
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
|
|
/* SMALL-ZOOM MODULE */
|
|
.module-small {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
border: 6px solid $color-white;
|
|
@include box-shadow(inset 5px 5px 45px -6px $color-dove-gray);
|
|
background-color: $color-alto;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
display: block;
|
|
text-align: center;
|
|
z-index: 5;
|
|
color: black;
|
|
|
|
span {
|
|
font-weight: bold;
|
|
font-size: $font-size-large;
|
|
text-transform: uppercase;
|
|
display: block;
|
|
margin-top: 20%;
|
|
|
|
a {
|
|
color: $color-emperor;
|
|
}
|
|
}
|
|
|
|
&.group-hover {
|
|
@include box-shadow(0 0 0 5px $color-group-hover);
|
|
}
|
|
&.module-hover {
|
|
@include box-shadow(0 0 0 5px $color-module-hover);
|
|
}
|
|
|
|
&.alert-green {
|
|
border-color: $brand-success;
|
|
}
|
|
|
|
&.alert-yellow {
|
|
border-color: $brand-warning;
|
|
}
|
|
&.alert-red {
|
|
border-color: $brand-danger;
|
|
}
|
|
}
|
|
|
|
/* Sidebar hovered style */
|
|
li.group-hover {
|
|
background-color: $color-silver;
|
|
border-radius: 4px;
|
|
}
|
|
li.module-hover {
|
|
a {
|
|
color: $brand-primary;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
/* Edit module tags modal window */
|
|
#manage-module-tags-modal {
|
|
|
|
.add-tag-form {
|
|
display: inline-block;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
.modal-body ul.list-group > li {
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
|
|
& > div.tag-show {
|
|
color: $color-white;
|
|
|
|
form {
|
|
display: inline-block;
|
|
|
|
.btn-link {
|
|
margin-top: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > div.tag-edit {
|
|
.form-group {
|
|
margin-bottom: 2px;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.dropdown-colorselector {
|
|
display: inline-block;
|
|
|
|
.btn-colorselector {
|
|
height: 30px;
|
|
width: 30px;
|
|
margin-top: 5px;
|
|
font-family: 'Glyphicons Halflings';
|
|
color: $color-white;
|
|
font-size: $font-size-large;
|
|
|
|
&:before {
|
|
content: "\e221";
|
|
margin-left: 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.fas {
|
|
color: $color-white;
|
|
font-size: $font-size-h6;
|
|
}
|
|
|
|
a.btn-link {
|
|
padding-top: 10px;
|
|
}
|
|
}
|
|
|
|
.well {
|
|
margin-bottom: 0;
|
|
|
|
& .bootstrap-select {
|
|
width: 150px !important;
|
|
}
|
|
}
|
|
|
|
.create-new-tag-btn {
|
|
margin-right: 15px;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
|
|
#project-show {
|
|
@media (min-width: 1400px) {
|
|
.col-md-6 {
|
|
width: 33.33%; // fallback if needed
|
|
width: calc(100% / 3);
|
|
}
|
|
}
|
|
}
|
|
|
|
// EXPERIMENT PANEL
|
|
.experiment-panel {
|
|
@include box-shadow(0 4px 8px 0 $color-dove-gray);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 400px;
|
|
margin: 0 auto;
|
|
margin-bottom: 35px;
|
|
margin-top: 15px;
|
|
max-width: 700px;
|
|
|
|
.panel-title {
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.panel-heading .clone-experiment,
|
|
.panel-heading .dropdown {
|
|
display: none;
|
|
}
|
|
|
|
&:hover .clone-experiment,
|
|
&:hover .dropdown {
|
|
display: block;
|
|
}
|
|
|
|
.panel-date {
|
|
color: $color-silver-chalice;
|
|
}
|
|
|
|
.panel-heading > .clone-experiment {
|
|
color: $color-silver-chalice;
|
|
padding-left: 4px;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.dropdown {
|
|
color: $color-silver-chalice;
|
|
|
|
button {
|
|
padding-left: 6px;
|
|
}
|
|
}
|
|
|
|
.panel-body {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
|
|
a {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.experiment-description {
|
|
margin-top: 10px;
|
|
max-height: 86px;
|
|
overflow-x: hidden;
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.experiment-no-description {
|
|
@include font-h3;
|
|
color: $color-alto;
|
|
display: block;
|
|
font-weight: bold;
|
|
margin-top: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.no-workflowimg {
|
|
color: $color-alto;
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
margin: 15px 0;
|
|
max-height: 200px;
|
|
padding-bottom: 70px;
|
|
padding-top: 50px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.workflowimg-container {
|
|
align-items: center;
|
|
display: flex;
|
|
height: 100%;
|
|
justify-content: center;
|
|
|
|
img {
|
|
max-height: 190px;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
// SHOW
|
|
.center-btn {
|
|
display: block;
|
|
margin: 0 auto;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.big-plus {
|
|
color: $color-gainsboro;
|
|
display: block;
|
|
font-size: 180px;
|
|
margin: 20px 0;
|
|
text-align: center;
|
|
|
|
&:hover {
|
|
color: $color-alto;
|
|
}
|
|
|
|
&:focus {
|
|
color: $color-alto;
|
|
}
|
|
}
|
|
|
|
/// icon override
|
|
|
|
.panel-project {
|
|
|
|
.nav-tabs[data-hook="project-footer-icons"] {
|
|
|
|
.btn-link {
|
|
display: inline-block;
|
|
min-width: 30px;
|
|
}
|
|
|
|
.badge-indicator {
|
|
background: transparent;
|
|
color: $color-silver-chalice;
|
|
font-size: 12px;
|
|
margin-left: 0;
|
|
padding: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.tab-content[data-hook="project-dropdown-panel"] {
|
|
|
|
.over-due {
|
|
|
|
.title {
|
|
border-top: 1px solid $color-concrete;
|
|
font-size: 14px;
|
|
line-height: 15px;
|
|
padding: 10px 15px 0;
|
|
}
|
|
|
|
.notification {
|
|
padding-left: 35px;
|
|
|
|
.date-time {
|
|
position: relative;
|
|
|
|
.fas {
|
|
font-size: 14px;
|
|
left: -20px;
|
|
position: absolute;
|
|
top: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|