hackpoint/plugin/hackpoint/css/main.css

/** HACKPOINT **/

.hackpoint-preloader {
    color: #7bafe2;
    font-size: 19px;
    text-align: center;
    border-radius: 100%;
    z-index: 10001;
    background-color: #272c31;
    padding: 6px 5px 5px 5px;
    position: absolute;
    top: 15px;
    left: 50%;
    width: 40px;
    height: 40px;
    box-shadow: 1px 0px 2px rgba(0,0,0,0.5);
    transform: translateY(-40px);
    transition: all 0.1s ease-in-out;
    opacity:0;
}

.hackpoint-preloader.show {
	opacity:1;
    transform: translateY(0px);
}

/* Conteneur principal du plugin hackpoint */
.hackpoint {
	height: 100%;
}


#sketchs {
	margin:0;
	padding:0;
	margin-left:-5px;
}

#sketchs .card .sketch-number {
    border-radius: 0 0 520px 0;
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px 20px 7px 7px;
    background-color: rgba(0,0,0,0.5);
    color: #ffffff;
    font-weight: bold;
}


#sketchs .card .progress{
	cursor: pointer;
}

#sketchs .card-img-top {
    max-height: 170px;
    width: 100%;
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
    margin: 0 auto;
}

#sketchs .btn-dark {
    color: #fff;
    background-color: #272b2f;
    border-color: #343a40;
}

/* liste des sketchs */
#sketchs li{
	display: inline-block;
	float:left;
	margin:0;
	vertical-align: top;
	padding:5px;
	list-style-type: none;
	border:0;
}

#sketchs li .card {
    height: 400px;
    background-color: #343a40;
    overflow: hidden;
}

#sketchs li .card p{
    overflow: hidden;
    height: 48px;
    text-overflow: ellipsis;
}

#sketchs li .card .card-title {
    overflow: hidden;
    height: 22px;
    font-size: 1.15rem;
    font-weight: bold;
    text-overflow: ellipsis;
}

#sketchs li .progress {
    display: -ms-flexbox;
    display: flex;
    height: 0.7rem;
    left:0;
    width: 100%;
    position: absolute;
    bottom: 0;
    overflow: hidden;
    font-size: .50rem;
    background-color: #272b2f;
    border-radius: 0 0 .25rem .25rem;
}


/* fiche sketch */
.page-sheet-sketch,.page-sheet-sketch body,.page-sheet-sketch .container-fluid{
	height: 100%;
	min-height: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

.page-sheet-sketch .cm-s-monokai.CodeMirror {
	background: #2e363e;
}
.page-sheet-sketch .CodeMirror {

  height: auto;
}


.page-sheet-sketch .container-fluid{
    padding: 50px 0px 0 0px;
}

#sketch-form{
	display: flex;
  	width: 100%;
  	height: 100%;
}
#resources-toolbar,#sketch-workspace{
	height: 100%;
}
#sketch-workspace{
	height: 90%;
}
#sketch-workspace .form-control-plaintext{
    color: #8e8e8e;
}


#resources-toolbar{
	width:120px;
	background-color: #2b2f35;
	color:#fefefe;
	height:100%;
	min-height: 100%;
	position:relative;
}
#resources-toolbar .resources-menu-container{
	width:120px;
	padding-bottom: 40px;
    height: 100%;
    overflow: auto;
}



/* width */
#resources-toolbar .resources-menu-container::-webkit-scrollbar,#sketch-editor::-webkit-scrollbar {
  width: 8px;
}

/* Track */
#resources-toolbar .resources-menu-container::-webkit-scrollbar-track,#sketch-editor::-webkit-scrollbar-track {
  background: #2b2f35; 
}
 
/* Handle */
#resources-toolbar .resources-menu-container::-webkit-scrollbar-thumb,#sketch-editor::-webkit-scrollbar-thumb {
  background: #101317; 
}

/* Handle on hover */
#resources-toolbar .resources-menu-container::-webkit-scrollbar-thumb:hover,#sketch-editor::-webkit-scrollbar-thumb:hover {
  background: #14181d; 
}

#sketch-workspace{
	flex: 1;
	padding:15px;
	box-sizing: border-box;
}

#resources-toolbar ul li{
	padding:10px;
	cursor: pointer;
	text-align: center;
	border-bottom: 1px solid #21252b;
	transition: background 0.15s ease-in-out,transform 0.15s ease-in-out;
	position: relative;
}

#resources-toolbar ul li .delete-resource{
	position: absolute;
	right: 10px;
	top:10px;
	cursor:pointer;
	font-size: 12px;
	opacity:0;
	transition: opacity 0.2s ease-in-out;
}

#resources-toolbar ul li.active{
	background:#212223;
}

#resources-toolbar ul li:hover{
	background: #222222;
}

#resources-toolbar ul li:hover i{
	transform: scale(1.1);
	color:#cecece;
}
#resources-toolbar ul li:hover h3{
	
	color:#ffffff;
}

#resources-toolbar ul li:hover .delete-resource{
	opacity:0.7;
}

#resources-toolbar ul li h3{
	text-transform: uppercase;
	font-size: 11px;
	word-break: break-word;
	font-weight: bold;
	margin:5px 0;
	padding:0;
	color:#dedede;
}

#resources-toolbar ul li h3 input{
	text-align: center;
    width: 100%;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: 0;
    color: #dedede;
}

#resources-toolbar ul li i{
	font-size: 30px;
	color: #7b7b7b;
	transition: transform 0.1s ease-in-out;
}

#resources-toolbar ul li > small{
	color:#ffffff;
	border-radius: 3px;
	padding: 0 3px;
	font-size: 10px;
}

#resources-toolbar .btn-add-resource{
	margin: auto;
	display: block;
}

.fast-spin {
  -webkit-animation: fa-spin 0.5s infinite linear;
  animation: fa-spin 0.5s infinite linear;
}

.sketch-preloader{
	display: none;
}

.resource-dropdown{
	position: absolute;
	bottom: 0;
}
.resource-dropdown.dropright .dropdown-menu{
	border-radius: 0;
    background: #333;
    top: 0;
    max-width: 550px;
    min-width: 350px;
    right: auto;
    left: 100%;
    margin-top: 0;
    margin-left: 0;
    color: #fefefe;
}
.resource-dropdown.dropright .dropdown-menu .dropdown-item:focus,.resource-dropdown.dropright .dropdown-menu  .dropdown-item:hover{
	background-color: #131313;
}
.resource-dropdown.dropright .dropdown-menu,.resource-dropdown.dropright .dropdown-menu a{
	white-space: normal;
}

#sketch-workspace [data-type="dropzone"]{
	background:transparent;
	color:#cecece;
	border:0;
}

div.hackpoint-type-image[data-type="dropzone"] > div{
	padding: 15px;
    text-align: center;
    margin: auto auto 10px auto;
    width: 50%;
    background: #444e58;
 
}

#sketch-editor{
	overflow: auto;
	padding-bottom: 80px;
	height: 100%;
	box-sizing: border-box;
}

.hackpoint-type-image img{
	max-width: 100%!important;
    max-height: 100%!important;
    margin:5px 0!important;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
}
.hackpoint-type-image li > a{
	display: none;
}

div.hackpoint-type-image[data-type="dropzone"] > ul > li {
    vertical-align: top;
    display: inline-block;
    position: relative;
    padding: 5px;
    border-bottom: 0;
    background: transparent;
}

div.hackpoint-type-image[data-type="dropzone"] > ul > li > i.pointer{
	top:15px;
	right:5px;
	background-color: #333333;
	display: inline-block;
	padding:5px;
	width: 20px;
	height: 20px;
	font-size: 10px;
	text-align: center;
	box-sizing: border-box;
	border-radius: 100%;
	transform: translateY(0px);
}


/* readonly mode */
	.hackpoint.readonly #resources-toolbar .btn-add-resource,
	.hackpoint.readonly .btn-delete-sketch,
	.hackpoint.readonly #resources .delete-resource,
	.hackpoint.readonly .resource-image .fas.fa-times,
	.hackpoint.readonly .hackpoint-type-image > div,
	.hackpoint.readonly .resource-part .btn-add-part,
	.hackpoint.readonly .resource-part .btn-save-part,
	.hackpoint.readonly .resource-part .btn-delete{
		display:none;
	}

	.hackpoint.readonly  .editable-input{
		outline: none;
	}

	
/**/

#parts{
	margin:0;
	padding:0;
}

#parts li{
	width:15%;
	min-width: 250px;
	display: inline-block;
	padding:0px;
	margin:5px 5px 5px 0;
	transition: transform 0.2s ease-in-out;
}
#parts li .part{
	background-color: #2b2f35;
	border-radius: 3px;
	padding: 15px;
	color:#cecece;
	min-height: 250px;
	position: relative;
}



#sketch-workspace .part .part-image{
	border:2px dashed #3e4750;
	height:200px;
	background: url(../img/default-part.png) center center no-repeat;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	color:#5e6671;
	margin-top:10px;
}

#parts li .part .btn-delete{
	color:#cecece;
	position: absolute;
	bottom: 0;
	right: 0;
	opacity:0.4;
	transition:all 0.2s ease-in-out;
}

#parts li .part .btn-delete:hover{
	opacity:0.9;
}

#parts li .part .price{
	font-weight: bold;
}

#parts li .part .link{
	color:#cecece;
	position: absolute;
	bottom: 0;
	left: 0;
	padding:5px 10px;
	opacity:0.4;
	transition:all 0.2s ease-in-out;
}

#parts li .part .brand{
	font-size: 10px;
	float:right;
	margin-top: 5px;
	color:#4c7cad;
}
#parts li .part .link:hover{
	opacity:0.9;
	transform:  rotate(180deg);
}


.part-list .picture{
	width: 150px;
	height: 150px;
	border-radius: 3px;
}