Fullstack Portal Created by the HCMR for the Marine Strategy Framework Directive Program in order to cover demands and aspects considering extendability and maintainability

240 lines
3.9 KiB

2 years ago
/** switch styles **/
@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css';
.ptree .switch {
position: relative;
display: inline-block;
width: 30px;
height: 18px;
margin: 0;
padding-inline: 15px;
margin-right: 5px;
2 years ago
}
.ptree .switch input {
opacity: 0;
width: 0;
height: 0;
}
.ptree .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.ptree .slider:before {
position: absolute;
content: "";
height: 12px;
width: 12px;
left: 4px;
bottom: 3px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.ptree input:checked + .slider {
background-color: #66bb6a;
}
.ptree input:focus + .slider {
box-shadow: 0 0 1px #2196f3;
}
.ptree input:checked + .slider:before {
-webkit-transform: translateX(12px);
-ms-transform: translateX(12px);
transform: translateX(12px);
}
.ptree a:hover > i,
.ptree i:hover {
color: tomato !important;
cursor: pointer;
}
/* Rounded sliders */
.ptree .slider.round {
border-radius: 34px;
}
.ptree .slider.round:before {
border-radius: 50%;
}
/* Switch styles end */
/** border styles **/
.ptree li {
list-style-type: none;
border: 2px solid #fff;
border-right: 0px !important;
}
.ptree li div {
display: flex;
list-style-type: none;
margin: 1px;
border-radius: 5px;
border: 2px solid #dcdcdc;
padding: 2px;
align-items: center;
min-height: 30px;
}
.ptree li a {
margin-right: 10px;
margin-left: 10px;
color: black;
font-size: 14px;
font-family: monospace, "Open Sans";
text-decoration: none;
}
.ptree ul {
padding-left: 15px;
}
.ptree_order_div {
height: 20px !important;
border: 0 !important;
}
.ptree_order_div i {
margin: 5px !important;
}
/* Border styles end */
/* menu icon */
.ptree .menuIcon {
margin-left: auto;
color: black;
}
/* menu container */
.ptreemenuCont {
display: flex;
flex-direction: column;
background-color: #ffff;
border: 2px solid #ccc;
border-radius: 5px;
color: #444;
position: fixed;
font-size: 12px;
font-family: monospace, "Open Sans";
}
.ptreemenuCont span {
padding: 10px 10px 10px 10px;
border-bottom: 2px solid #9e9e9e;
display: flex;
align-items: baseline;
cursor: pointer;
white-space: pre;
2 years ago
}
.ptreemenuCont span i {
color: #ef5350;
padding-right: 3px;
}
.ptreemenuCont span:last-child {
border-bottom: 0px solid;
}
.ptreemenuCont span:first-child:hover {
border-radius: 5px;
}
.ptreemenuCont span:only-child {
border-radius: 5px;
}
.ptreemenuCont span:hover {
background: #dcdcdc;
}
.ptree .menuIcon i {
pointer-events: none;
}
/** drag styles **/
.ptree .drag-handler {
color: #ef5350;
}
.ptree .drag-handler i {
pointer-events: none;
}
.ptree .drag_triggered {
border: 2px solid red;
}
.ptree #div_ddetail {
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 10px;
z-index: 1;
}
.ptree #div_ddetail span {
font-size: larger;
margin: 3px 5px 3px 5px;
}
.ptree {
border: 2px solid darkgrey;
border-radius: 5px;
height: 100%;
overflow-y: auto;
padding-right: 15px;
}
.ptree .valid {
border: 2px solid green;
border-radius: 5px;
}
.ptree .invalid {
border: 2px solid #ef5350;
border-radius: 5px;
}
.disabled > * {
pointer-events: none;
}
.ptreemenuCont i {
pointer-events: none;
}
.ptree ul.not-active {
max-height: 0;
transition: max-height 0.25s ease-out;
overflow: hidden;
}
.ptree ul.active {
/* max-height: 500px; */
2 years ago
transition: max-height 0.15s ease-in;
}
.dragging-element li{ border: 0px !important;}
.ptree::-webkit-scrollbar { width: 2px !important;}
.ptree::-webkit-scrollbar-track { background: whitesmoke !important;}
.ptree::-webkit-scrollbar-thumb { background: grey !important; }
/* fixes menu click event problem */
.menuIcon > svg {
pointer-events: none;
}