%PDF-
%PDF-
Mini Shell
Mini Shell
.devm-box,
.devm-taxonomy-wrapper,
.wp-customizer{
.devm-option{
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid #e2e4e7;
padding: 23px 0px;
box-sizing: border-box;
&-column{
flex: 1;
&.left{
max-width: 225px;
}
&.right {
max-width: 428px;
}
&.full-width{
max-width: 100%;
}
}
&-label {
font-weight: 600;
float: left;
font-size: 14px;
line-height: 19px;
font-style: normal;
padding: 0;
margin-bottom: 5px;
display: inline-block;
padding-right: 10px;
}
&-input {
box-shadow: 0 0 0 transparent;
border-radius: 4px;
border: 1px solid #7e8993;
background-color: #fff;
color: #32373c;
padding: 0 8px;
line-height: 2;
vertical-align: middle;
// max-width: 428px;
width: 100% !important;
min-height: 30px;
}
&-textarea {
padding: 4px 6px 1px 6px;
line-height: 20px;
}
&-desc {
font-size: 13px;
padding-top: 7px;
padding-left: 1px;
font-style: italic;
color: #666;
display: block;
margin: 0;
}
&-label-list {
display: block;
color: rgb(68, 68, 68);
font-size: 13px;
line-height: 18px;
margin-top: 6px;
&:last-child {
margin-bottom: 0;
}
}
&:last-child{
border-bottom: 0;
padding-bottom: 5px;
}
&-typography{
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
li{
flex: 0 0 8%;
padding: 0 5px;
box-sizing: border-box;
> label {
font-size: 13px;
padding-top: 7px;
padding-left: 1px;
padding-bottom: 10px;
font-style: italic;
color: #666;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
&:first-child{
padding-left: 0;
}
}
.wp-picker-container{
display: block;
> button {
margin: 0;
}
}
}
&-dimensions{
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
li{
flex: 0 0 60px;
padding: 0 5px;
> label {
font-size: 13px;
padding-top: 7px;
padding-left: 1px;
padding-bottom: 10px;
font-style: italic;
color: #666;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
&:first-child{
padding-left: 0;
}
}
}
&-upload-wrapper{
display: inline-block;
position: relative;
.devm_remove_image_button{
position: absolute;
top: -8px;
right: -8px;
display: block;
opacity: 0;
visibility: hidden;
text-decoration: none;
transition: all .4s;
outline: 0;
i{
color: #AAAAAA;
&:hover{
color: #CC0000;
}
}
}
&:hover{
.devm_remove_image_button{
opacity: 1;
visibility: visible;
}
}
}
.true_pre_image {
max-width: 50px !important;
cursor: pointer;
}
.devm-dimension-attachment-input{
cursor: pointer;
width: 100%;
height: 100%;
border-radius: 4px;
}
.devm-dimension-btn{
cursor: pointer;
transition: all .4s;
span{
padding-top: 3px;
}
&.active{
background-color: #A4AFB7;
color: #fff
}
}
.delimiter {
display: inline-block;
margin: 0 10px;
font-style: normal;
font-size: 13px;
position: relative;
top: 5px;
}
.wp-picker-container{
> button {
margin: 0;
}
}
.select2-container{
// max-width: 428px;
width: 100% !important;
line-height: 15px;
.select2-selection--multiple {
min-height: 26px;
}
}
.asRange {
width: 100%;
height: 5px;
background-color: transparent;
border-radius: 8px;
border: 1px solid #ddd;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
.asRange-selected{
background-color: #d9ecf4;
height: 5px;
}
.asRange-pointer{
height: 5px;
width: 5px;
cursor: pointer;
.asRange-tip{
left: -1px;
}
}
}
.select2-container--default{
.select2-search--inline .select2-search__field{
min-height: 26px;
margin: 0;
}
.select2-selection--single {
min-height: 30px;
}
.select2-selection--multiple .select2-selection__rendered li.select2-search--inline {
margin: 0;
}
}
// image picker
.devm-option-image_picker_selector {
ul{
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
}
.devm-option-image-picker-input{
visibility: hidden;
opacity: 0;
position: absolute;
}
.devm-option-image-picker-input + .devm-img-list{
line-height: 0;
border: 3px solid transparent;
position: relative;
padding: 2px;
flex: 0 0 150px;
display: block;
margin: 0;
}
.devm-option-image-picker-input:checked + .devm-img-list {
border: 3px solid #64bd1f;
&:after {
content: "";
font-family: dashicons;
background-color: #64bd1f;
position: absolute;
right: 0px;
bottom: 0px;
border-top-left-radius: 2px;
color: #fff;
line-height: normal;
font-size: 20px;
padding: 2px 0 0 1px;
padding-right: 3px;
}
}
li{
line-height: 0;
position: relative;
padding: 2px;
flex: 0 0 105px;
display: block;
margin: 0;
&.selected{
border: 3px solid #64bd1f;
&:after {
content: "";
font-family: dashicons;
background-color: #64bd1f;
position: absolute;
right: 0px;
bottom: 0px;
border-top-left-radius: 2px;
color: #fff;
line-height: normal;
font-size: 20px;
padding: 2px 0 0 1px;
padding-right: 3px;
}
}
&:last-child {
margin-right: 0;
}
img {
max-width: 100%;
height: auto;
width: 100%;
display: block;
}
.devm-img-picker-preview {
position: absolute;
top: -118%;
border: 3px solid #333;
border-radius: 3px;
left: 50%;
transform: translateX(-50%);
opacity: 0;
visibility: hidden;
transition: opacity .4s;
width: 100%;
&:after {
content: "";
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #333;
position: absolute;
left: 50%;
bottom: -13px;
transform: translateX(-50%);
}
}
&:hover{
.devm-img-picker-preview{
opacity: 1;
visibility: visible;
}
}
}
}
// end image picker
}
}
/**
* Option: Upload
**/
.devm_upload_image_button {
display: block;
> img {
display: block;
cursor: pointer;
}
}
.devm-option-upload {
&--list {
display: flex;
flex-wrap: wrap;
margin-bottom: -10px;
}
&--item {
position: relative;
margin-right: 10px;
padding-bottom: 10px;
max-width: 80px;
z-index: 0;
> img {
display: block;
width: 100%;
height: 60px;
cursor: pointer;
object-fit: cover;
object-position: center;
}
&:first-child:last-child {
width: 100%;
max-width: 100%;
> img {
height: auto;
}
}
.attachment-media-view &:not(.has--btn) {
max-width: 80px;
> img {
height: 60px;
}
}
}
&--remove {
position: absolute;
top: -15px;
right: -15px;
padding: 5px;
width: auto;
height: auto;
color: #aaa;
background-color: transparent;
border-width: 0;
font-size: 20px;
line-height: 1em;
cursor: pointer;
opacity: 0;
transition: color .25s, opacity .25s;
&:hover {
color: #CC0000;
}
}
&--item:hover &--remove {
opacity: 1;
}
&--child.button {
.attachment-media-view & {
width: 100%;
padding: 9px 0;
color: #2c3338;
background-color: transparent;
border: 1px dashed #c3c4c7;
border-radius: 0;
line-height: 1.6;
&:hover {
background-color: #fff;
border-color: #c3c4c7;
}
}
}
}
.devm-taxonomy-wrapper,
.wp-customizer{
.devm-option{
display: block;
border: none;
padding: 0;
margin: 15px 0;
&-column{
&.left {
}
&.right{
max-width: 95%;
}
}
&-label{
float: none
}
&-input{
max-width: 100%;
}
.delimiter {
top: 6px;
}
&-typography li {
flex: 0 0 23%;
}
}
}
.devm-taxonomy-wrapper{
.devm-option.devm-condition-active{
display: none;
&.open{
display: block;
}
}
}
// customizer
.wp-customizer{
.devm-option{
&-column{
&.right{
max-width: 100%;
}
}
&-dimensions li {
flex: 0 0 16%;
}
&-typography li {
flex: 0 0 50%;
&:nth-child(2n+1) {
padding-left: 0;
}
}
.select2-container--default .select2-selection--single {
background-color: #fff;
border: 1px solid #aaa;
border-radius: 4px;
}
&.devm-condition-active{
display: none !important;
&.open{
display: block !important;
}
}
}
}
.wp-customizer .devm-option .devm-option-image_picker_selector li {
border: 0px solid transparent;
padding: 1px;
flex: 0 0 73px;
margin: 0;
.devm-img-picker-preview{
top: -126%;
}
.devm-img-list{
&:after{
font-size: 15px !important;
}
}
}
// repeater
.devm-repeater-inner-controls {
position: fixed;
width: 100%;
height: 100%;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 99;
opacity: 0;
visibility: hidden;
transition: all .4s;
overflow-y: auto;
&.open {
opacity: 1;
visibility: visible;
}
}
.devm-repeater-inner-controls-inner {
position: absolute;
background-color: #fff;
top: 0;
padding: 0;
left: 50%;
bottom: auto;
margin-top: 100px;
max-width: 750px;
max-height: 500px;
// overflow: hidden;
transform: translateX(-50%);
border-bottom: 1px solid transparent;
}
.devm-repeater-popup-close{
cursor: pointer;
}
.devm-repeater-popup-close {
cursor: pointer;
position: absolute;
right: 14px;
top: 14px;
font-size: 24px;
color: red;
}
.devm-repeater-sample{
display: none;
}
.devm-repeater-child .devm-repeater-inner-controls-inner {
max-width: 100%;
margin-left: auto;
margin-right: auto;
left: 5%;
top: 35px;
transform: inherit;
margin: 0;
height: 78%;
width: 90%;
box-shadow: 0 0 15px black;
margin-bottom: 51px;
}
.devm-repeater-child .devm-repeater-popup-data .devm-option-column.left {
max-width: 150px;
}
.devm-repeater-child .devm-repeater-popup-data{
max-height: 320px;
box-sizing: border-box;
}
.devm-repeater-child .devm-repeater-inner-controls.open{
overflow: inherit;
margin-bottom: -51px;
height: calc(100% + 51px);
}
.devm-repeater-popup-data {
overflow: auto;
max-height: 450px;
padding: 30px;
box-sizing: border-box;
border-bottom: 1px solid transparent;
}
.devm-repeater-popup-heading,
.devm-repeater-popup-footer {
min-height: 50px;
background-color: #FCFCFC;
border-bottom: 1px solid #ddd;
}
.devm-repeater-popup-footer{
border: none;
}
.devm-repeater-inner-controls-inner .devm-icon-modal-container{
top: 85px;
}
.devm-repeater-inner-controls-inner .devm-list-icon ul li {
flex: 0 0 66px;
}
.devm-repeater-popup-data .devm-option .devm-option-image_picker_selector li{
flex: 0 0 80px;
margin: 0;
padding: 0;
}
.devm-repeater-popup-data .devm-option-typography li {
flex: 0 0 25%;
}
.devm-repeater-popup-data .devm-option-column.left{
max-width: 180px;
}
.devm-repeater-popup-data .devm-option-column.right{
max-width: 100%;
}
// conditional
.devm-box{
.devm-condition-active{
display: none;
&.open {
display: flex
}
}
}
// taxonomy after save
.devm-taxonomy-wrapper.devm-taxonomy-edit-wrapper{
.devm-option i,
.devm-option{
display: flex;
width: 100%;
}
.devm-option-column{
&.left{
width: 100%;
min-width: 225px;
}
&.right{
margin-right: 40px;
}
}
.edit-tag-actions{
order: 2
}
#edittag{
display: flex;
flex-wrap: wrap;
flex-direction: column;
> i:last-child {
order: 2;
}
}
> .form-table{
order: 0;
}
.devm-option{
order: 1;
&.devm-condition-active{
display: none !important;
&.open{
display: flex !important;
}
}
}
}
// mixed
.devm-repeater-add-new {
font-style: normal;
}
.devm-repeater-control {
// position: relative;
// background-color: #fff;
// min-height: 40px;
// cursor: pointer;
// padding: 12px 30px;
// border: 1px solid #e2e4e7;
// color: inherit;
// margin: 0;
// box-sizing: border-box;
&-action {
color: #444;
text-decoration: none;
font-style: normal;
position: relative;
background-color: #fff;
min-height: 40px;
cursor: pointer;
padding: 12px 30px;
border: 1px solid #e2e4e7;
color: inherit;
margin: 0;
box-sizing: border-box;
display: block;
border-top: 1px dotted #e2e4e7;
border-bottom: 0;
&:hover{
color: #444;
}
&:before {
content: "";
background-color: #AAAAAA;
height: 7px;
width: 7px;
border-radius: 10px;
display: inline-block;
position: relative;
left: -12px;
}
&:focus{
box-shadow: none;
outline: 0;
}
}
&:last-of-type{
margin-bottom: 20px;
.devm-repeater-control-action{
border-bottom: 1px solid #e2e4e7;
}
}
&:first-of-type{
.devm-repeater-control-action{
border-top: 1px solid #e2e4e7;
}
}
}
.devm-editor-post-trash{
color: #444;
text-decoration: none;
font-style: normal;
span{
font-size: 16px;
line-height: 1.3;
color: #AAAAAA;
cursor: pointer;
position: absolute;
right: 7px;
top: 50%;
margin-top: -10px;
text-decoration: none;
}
&:hover{
color: #444;
span{
color: #CC0000;
}
}
}
.devm-oembed-preview {
padding-top: 10px;
iframe{
width: 100%;
}
}
// @media only screen and (max-width: 767px) {
// .devm-repeater-inner-controls-inner{
// margin-left: 100px;
// }
// }
Zerion Mini Shell 1.0