Files
wyczarujprezent.pl/modules/jxmegalayout/views/css/jxmegalayout_admin.css
2024-10-28 22:14:22 +01:00

849 lines
19 KiB
CSS

/************************* Module top navigation *************************************/
.jxmegalayout-nav.nav, .jxmegalayout-nav-vue.nav {
margin-bottom:10px;
text-align:right;
}
.jxmegalayout-nav.nav > li,
.jxmegalayout-nav-vue.nav > li {
margin-bottom:0;
float:none;
display:inline-block;
border:none;
}
@media only screen and (max-width:600px) {
.jxmegalayout-nav.nav, .jxmegalayout-nav-vue.nav {
text-align:left;
}
.jxmegalayout-nav.nav > li, .jxmegalayout-nav-vue.nav > li {
display:block;
width:100%;
}
}
.jxmegalayout-nav.nav > li:last-child,
.jxmegalayout-nav.nav > li.jxml-tools_tab,
.jxmegalayout-nav.nav > li.jxml_tools_tab,
.jxmegalayout-nav-vue.nav > li:last-child,
.jxmegalayout-nav-vue.nav > li.jxml-tools_tab,
.jxmegalayout-nav-vue.nav > li.jxml_tools_tab{
float:left;
}
.jxmegalayout-nav.nav > li a,
.jxmegalayout-nav-vue.nav > li a {
padding:7px 20px;
border:none;
outline:none;
}
.jxmegalayout-nav.nav > li.active a,
.jxmegalayout-nav.nav > li:active a,
.jxmegalayout-nav.nav > li:focus a,
.jxmegalayout-nav.nav > li:hover a,
.jxmegalayout-nav.nav > li.active:hover a,
.jxmegalayout-nav.nav > li.active:focus a,
.jxmegalayout-nav.nav > li.active a:focus,
.jxmegalayout-nav-vue.nav > li.active a,
.jxmegalayout-nav-vue.nav > li:active a,
.jxmegalayout-nav-vue.nav > li:focus a,
.jxmegalayout-nav-vue.nav > li:hover a,
.jxmegalayout-nav-vue.nav > li.active:hover a,
.jxmegalayout-nav-vue.nav > li.active:focus a,
.jxmegalayout-nav-vue.nav > li.active a:focus {
border:none;
background:#00aff0;
color:#fff;
border-radius:3px;
margin:0 2px 0 0;
}
/*********************** end module top navigation************************************/
/******************************** Layout navigation ***********************************/
.jxmegalayout-lsettins {
margin-bottom:10px;
}
.jxmegalayout-lsettins .button-container {
float:left;
margin-right:20px;
}
.jxmegalayout-lsettins .button-container .add_layout {
padding:7px 20px;
}
.jxmegalayout-lsettins .form-group{
overflow: hidden;
}
.jxmegalayout-lsettins .form-group+.form-group {
border-top: solid 1px #d3d8db;
padding-top: 15px;
}
.jxmegalayout-lsettins .control-label.pull-left {
margin-top: 6px;
margin-right: 10px;
}
.jxlist-group-container {
float:left;
width:243px;
margin-right:20px;
}
@media only screen and (max-width:600px) {
.jxlist-group-container {
margin-top:5px;
clear:left;
}
}
.jxlist-group-container button#dropdownMenu,
.jxlist-group-container button#sectionsDropdown {
display:block;
text-align:left;
width:100%;
padding: 7px 14px;
border-color:#c7d6db;
background:url(../img/growers.png) right center no-repeat #f5f8f9;
padding-right:20px;
}
.jxlist-group-container button#dropdownMenu:hover,
.jxlist-group-container button#sectionsDropdown:hover {
color:#555555;
}
.jxlist-group,
.jxlist-group.jxml-layouts-list {
margin:0;
width:243px;
}
p.jxlist-layout-btns {
margin-bottom:0;
}
.jxmegalayout-lsettins .layout-btn {
text-decoration:none;
outline:none;
color:#212121;
height:33px;
line-height:33px;
display:inline-block;
font-size:12px;
}
.jxmegalayout-lsettins .layout-btn:hover,
.jxmegalayout-lsettins .layout-btn:active,
.jxmegalayout-lsettins .layout-btn:focus {
text-decoration:none;
outline:none;
}
.jxmegalayout-lsettins .layout-btn i[class^="process-icon-"] {
display:inline-block;
color:#2eacce;
height:20px;
width:33px;
font-size:27px;
vertical-align:-4px;
margin-right:15px;
}
.jxmegalayout-lsettins.options .layout-btn i[class^="process-icon-"] {
margin-right: 4px;
}
.jxmegalayout-lsettins .desc{
overflow: hidden;
clear: both;
}
/******************************** end layout navigation *******************************/
/*********************** layouts part styles ********************************/
.jxlayout-row {
border-bottom:1px solid #d3d8db;
padding:0 0 7px 0;
margin:0 3px 19px;
overflow:hidden;
}
.jxlayout-row a {
float:right;
display:block;
height:15px;
width:16px;
background-position:center top;
background-repeat:no-repeat;
}
.jxlayout-row a:hover,
.jxlayout-row a.active {
background-position:center bottom;
}
.jxlayout-row a.edit-layout {
background-image:url(../img/stylize.png);
margin-left:15px;
}
.jxlayout-row a.remove-layout {
background-image:url(../img/delete.png);
}
.bootstrap .jxmegalayout-admin {
width:100%;
margin:0;
padding-left:0;
padding-right:0;
}
.wrapper.container {
max-width:100%;
}
.jxmegalayout-admin .add-but a.btn {
font-size:14px;
display:block;
border:1px dashed #bdbdbd;
border-radius:10px;
padding-top:16px;
padding-bottom:16px;
outline:none;
margin:0 0px 10px -5px;
}
.jxmegalayout-admin > article > .row {
margin:0 0 10px;
}
.jxmegalayout-admin > article > .row > article.row-inner {
margin-top:0;
}
.layout-preview-box .layout_name.layout_name_check {
color: red;
}
.layout-preview-box #new_name_layout {
width: 33.333%;
margin-bottom: 12px;
}
@media only screen and (max-width:768px) {
.layout-preview-box #new_name_layout {
width: 100%;
}
}
.jxmegalayout-admin .wrapper {
background:#fff;
border-radius:10px;
border:1px solid #d3d8db;
margin-bottom:10px;
padding:0 12px 9px;
}
.jxmegalayout-admin .wrapper > article > .button-container {
padding:9px 20px 9px 42px;
border-bottom:1px solid #d3d8db;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
position:relative;
margin:0 -12px 0;
}
.jxmegalayout-admin .wrapper > article > .button-container:before {
content:'';
width:10px;
height:10px;
position:absolute;
left:16px;
top:50%;
margin-top:-5px;
background:#41c3f4;
border-radius:100px;
}
.jxmegalayout-admin .wrapper > article > .button-container .element-name {
font-size:12px;
line-height:33px;
color:#212121;
text-transform:uppercase;
}
.element-name .identificator {color:#BDBDBD}
.jxmegalayout-admin .wrapper > article > .button-container span {
text-transform:none;
}
.jxmegalayout-admin .row .row-inner {
border:1px solid #c7d6db;
background:#f5f8f9;
border-radius:10px;
background:#f5f8f9;
margin-top:9px;
padding:0 5px 9px;
}
.jxmegalayout-admin .row > article > .button-container {
padding:10px 10px 10px 42px;
border-bottom:1px solid #c7d6db;
border-radius:10px;
background:#fbfcfd;
margin:0 -5px;
position:relative;
}
.jxmegalayout-admin .row > article > .button-container:before {
content:'';
width:10px;
height:10px;
position:absolute;
left:16px;
top:50%;
margin-top:-5px;
background:#FFD351;
border-radius:100px;
}
.jxmegalayout-admin .row > article > .button-container .element-name {
line-height:25px;
}
.jxmegalayout-admin .row .row > article {
padding-left:5px;
padding-right:5px;
}
.jxmegalayout-admin .col .col-inner {
border:1px solid #a0d0eb;
background:#fbfcfd;
border-radius:10px;
padding:0 15px 9px;
margin-top:9px;
}
.jxmegalayout-admin .col .col .col-inner {
background:#fff;
}
.jxmegalayout-admin .col .col .col-inner > .button-container > a,
.jxmegalayout-admin .col .col > .col-inner > .button-container .dropdown-menu > li:first-child {
display:none;
}
.jxmegalayout-admin .col > article > .button-container {
border-bottom:1px solid #a0d0eb;
border-radius:10px;
padding:10px 10px 10px 42px;
margin:0 -15px;
position:relative;
}
.jxmegalayout-admin .col > article > .button-container:before {
content:'';
width:10px;
height:10px;
position:absolute;
left:16px;
top:50%;
margin-top:-5px;
background:#0C3;
border-radius:100px;
}
.jxmegalayout-admin .col > article > .button-container .element-name {
line-height:25px;
}
.jxmegalayout-admin .module > .module-inner,
.jxmegalayout-admin .content > .content-inner {
padding:0;
border:none;
background:none;
}
.jxmegalayout-admin .module > article > .button-container,
.jxmegalayout-admin .content > article > .button-container{
padding:14px 10px;
margin-top:9px;
background:#fbfcfd;
border-radius:10px;
border:1px solid #c7d6db;
margin:9px -5px 0 -5px;
}
span.module-name,
span.content-name{
display:inline-block;
color:#0cb3f1;
border:1px solid #dbedf7;
border-radius:100px;
line-height:23px;
background:#f5f8f9;
overflow:hidden;
max-width: 80%;
padding-right: 15px;
text-overflow: ellipsis;
white-space: nowrap;
}
span.module-name .module-sign {
width:23px;
height:23px;
border-right:1px solid #dbedf7;
border-radius:100px;
display:inline-block;
text-align:center;
line-height:23px;
}
span.module-name .module-sign img {
display:inline-block;
background:#f5f8f9;
border-radius:100px;
padding:1px;
}
span.module-name .module-text,
span.content-name .content-text{
padding:0 18px 0 7px;
}
.jxmegalayout-admin .module > article .tooltip.right .tooltip-arrow,
.jxmegalayout-admin .content > article .tooltip.right .tooltip-arrow {
border-right-color:#fff;
}
.jxmegalayout-admin .module > article .tooltip-inner,
.jxmegalayout-admin .content > article .tooltip-inner{
background:#fff;
color:#00aff0;
box-shadow:0 6px 12px rgba(0, 0, 0, 0.176);
padding:10px 17px;
}
.jxmegalayout-admin .module .module-inner .alert,
.jxmegalayout-admin .content .content-inner .alert{
word-break:break-all;
}
.jxmegalayout-admin .wrapper-menu {
float:right;
margin-bottom:0;
}
.jxmegalayout-admin .wrapper-menu li {
float:left;
list-style:none;
padding-left:20px;
}
.jxmegalayout-admin .wrapper-menu li a,
.jxmegalayout-admin .wrapper-menu li > span {
display:block;
min-height:34px;
min-width:23px;
background-position:center 10px;
background-repeat:no-repeat;
}
.jxmegalayout-admin .wrapper-menu li a.remove-item {
background-image:url(../img/delete.png);
}
.jxmegalayout-admin .wrapper-menu li a.edit-wrapper {
background-image:url(../img/edit.png);
}
.jxmegalayout-admin .wrapper-menu li a.edit-styles {
background-image:url(../img/stylize.png);
}
.jxmegalayout-admin .wrapper-menu li > span {
background-image:url(../img/move.png);
}
.jxmegalayout-admin .wrapper-menu li a:hover,
.jxmegalayout-admin .wrapper-menu li a.active {
background-position:center -20px;
}
.jxmegalayout-admin article .alert {
margin:10px 0 0 0;
}
/********** layout's dropdowns ************/
.button-container .dropdown-toggle {
display:block;
padding:0;
margin:0;
background:none;
border:none;
outline:none;
font-size:22px;
font-weight:bold;
color:#00aff0;
text-decoration:none;
position:relative;
height:25px;
width:20px;
overflow:hidden;
}
.button-container .dropdown-toggle:before {
content:'...';
position:absolute;
width:20px;
height:20px;
left:0;
top:-8px;
}
.button-container .dropdown-toggle:hover,
.button-container .dropdown-toggle:focus,
.button-container .dropdown-toggle:active {
text-decoration:none;
outline:none;
}
.bootstrap ul.dropdown-menu {
border-radius:0;
border:none;
padding:0;
}
.bootstrap ul.dropdown-menu > li.divider {
margin:0;
}
.bootstrap ul.dropdown-menu > li > a {
padding:10px 20px;
}
/*********************** end layouts part styles ********************************/
.jxmegalayout-admin.container .bootstrap .alert {
margin-bottom: 5px;
}
.jxmegalayout-admin .module.not-active .button-container
.jxmegalayout-admin .content.not-active .button-container{
border-color:#FCC94F;
background-color:#FFF3D7
}
.jxmegalayout-admin .module.not-active .module-name,
.jxmegalayout-admin .content.not-active .content-name{
color:#D2A63C;
}
.jxmegalayout-admin .module.not-active span.module-name,
.jxmegalayout-admin .content.not-active span.content-name{
border-color:#FCC94F;
background-color:#FFF3D7;
}
.jxpanel .hook-title {
background: #383F50;
color: #FFF;
font-weight: normal;
font-size: 1.3em;
padding: 5px 10px;
margin: 0px 0 0px 0;
text-transform: capitalize;
clear: both;
}
.hook-title .btn-sm {
margin-top: 2px;
margin-right: 10px;
}
.jxpanel .block {
padding-bottom:10px;
}
.jxpanel .block .alert-info {
margin:10px 0 0 0;
}
.jxpanel ul.tree {
margin:10px 0 0 0;
}
.hook-title .btn-sm:hover{
color:#fff;
}
.disabled{
cursor: not-allowed;
pointer-events: none;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
}
.ajax_running {
margin-left: 5px;
}
.jxml-layouts-list.loading:before {
position:absolute;
left:0;
top:0;
background:#f8f8f8;
z-index:1;
width:100%;
height:100%;
content:'';
opacity:0.3
}
.jxml-layouts-list .jxlist-group-item {
padding:0;
}
.jxml-layouts-list.dropdown-menu .jxlist-group-item > a {
padding:10px 15px 10px 40px;
display:block;
text-decoration:none;
position:relative;
}
.jxml-layouts-list.dropdown-menu .jxlist-group-item > a i {
position:absolute;
left:15px;
height:12px;
margin-top:-6px;
top:50%;
}
.jxml-layouts-list .jxlist-group-item.active a {
color:#fff;
}
.layout-preview-box > .jxmegalayout-admin > .row {
margin:0 0 10px 0;
}
.layout-preview-box .alert {
margin:10px 0 0 0;
}
.jxpanel .nav-pills {
margin-bottom:10px;
}
#jxml-sections ul:hover li a,
#jxml-sections:hover li a{
border-radius: 0px;
width: 100%;
}
#jxml-sections>ul:hover li:not(.active)>a,
#jxml-sections:hover li:not(.active)>a{
background: #fff;
color: #333;
}
#jxml-sections>ul>li.active a,
#jxml-sections>ul>li.active a:hover,
#jxml-sections>ul>li.jxlist-group-item>a:hover{
background: #00aff0;
color: #FFF;
}
#jxml-sections {
width: 120px;
margin: 0px;
margin-left: 20px;
}
#jxml-sections>ul {
width: 120px;
min-width:auto;
}
button#sectionsDropdown {
background: url(../img/grower.png) right center no-repeat #f5f8f9;
}
#jxml-sections>ul>li>a{
text-transform: none;
text-align: center;
}
/****************** Styles popup ********************/
.fancybox-skin {
background:#fff;
}
.jxmegalayout-styles h2 {
font-size:24px;
font-weight:normal;
text-align:center;
border-bottom:1px solid #eee;
padding:23px 0 23px 0;
margin:0 0 0 0;
}
.jxmegalayout-styles .nav.nav-tabs {
padding:24px 15px;
border-bottom:1px solid #eee;
}
.jxmegalayout-styles .nav.nav-tabs li {
margin:0 1px 0 0;
border:none;
}
.jxmegalayout-styles .nav.nav-tabs a {
margin:0 0 0 0;
border:none;
outline:none;
font-size:12px;
border-radius:3px;
padding:6px 20px;
}
.jxmegalayout-styles .nav.nav-tabs li.active a,
.jxmegalayout-styles .nav.nav-tabs li:hover a,
.jxmegalayout-styles .nav.nav-tabs a:active,
.jxmegalayout-styles .nav.nav-tabs a:hover,
.jxmegalayout-styles .nav.nav-tabs a:focus {
border:none;
background:#00aff0;
color:#fff;
}
.jxmegalayout-style-btns {
border-top:1px solid #eee;
padding:30px 50px 10px;
overflow:hidden;
}
.jxmegalayout-style-btns .btn {
margin-bottom:10px;
display:inline-block;
float:right;
}
.jxmegalayout-styles label {
color:#757575;
font-size:12px;
font-weight:500;
}
.jxmegalayout-styles label.uppercase {
text-transform:uppercase;
font-weight:bold;
}
.jxmegalayout-styles .radio {
margin-top:0;
}
.jxmegalayout-styles .radio label {
text-transform:none;
color:#555555;
}
.jxmegalayout-styles .background-color-col {
padding:20px 34px 30px 55px;
background:url(../img/color-icon.png) 24px 21px no-repeat;
}
.jxmegalayout-styles .background-color-col .input-group {
display:block;
z-index:1;
}
.jxmegalayout-styles .background-color-col .input-group input.color {
height:135px;
padding-top:105px;
border-radius:3px;
}
.jxmegalayout-styles .background-color-col .input-group .mColorPickerTrigger {
display:block;
position:absolute;
right:0;
top:0;
z-index:2;
width:27px;
height:27px;
padding:4px 4px 4px 3px;
border-width:1px;
border-radius:0 2px 0 3px;
border-color:#e2e8ea;
background:#fff;
}
.jxmegalayout-styles .background-settings-col {
background:url(../img/image-icon.png) 20px 21px no-repeat;
border-left:1px solid #eee;
padding:20px 5px 0 55px;
}
.jxmegalayout-styles .background-image-container {
padding:0 25px 20px 0;
}
.jxmegalayout-styles .background-settings-container {
padding:0 25px 20px 25px;
}
@media only screen and (max-width:991px) {
.jxmegalayout-styles .background-settings-container {
padding-left:0;
}
}
.jxmegalayout-styles .border-settings {
padding:15px 0 5px 0;
}
.jxmegalayout-styles .border-settings > div {
padding:0 30px;
}
.jxmegalayout-styles .other-settings {
padding:15px 35px 25px;
background:#f5f5f5;
}
.jxmegalayout-styles label.lh-fix {
line-height:32px;
}
.jxmegalayout-styles input.error {
border-color:#F00;
background-color:#E65E4F;
}
.form-group.popup-content {
padding:30px;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
margin:0;
}
.popup-btns {
padding:30px;
text-align:right;
}
h2.popup-heading {
padding:25px;
text-align:center;
font-size:24px;
font-weight:400;
margin:0;
}
@media screen and (min-width:600px) {
.form-group.popup-content, .preview-popup-content {
width:600px;
}
}
.preview-popup-content > .row {
margin:0 0 10px 0;
}
.preview-popup-content {
padding:10px;
}
.preview-popup-content .module-text {
display:inline-block;
overflow:hidden;
padding-right: 15px;
text-overflow: ellipsis;
white-space: nowrap;
width:100%;
}
.form-group.no-border {
border:none;
}
/****** multiselect styles *********************/
.jxmegalayout-availible-pages {
display:none;
}
.bootstrap ul.multiselect-container {
width:400px;
padding:10px 3px;
}
.bootstrap ul.multiselect-container li a {
padding:0 5px 0 23px;
}
.bootstrap ul.multiselect-container li a label {
margin: 0;
font-weight:normal;
font-size:11px;
}
.bootstrap ul.multiselect-container li.filter {
margin-bottom: 8px;
padding-left: 7px;
padding-right: 7px;
}
.bootstrap .btn.multiselect:hover .caret {
border-top-color:#333 !important;
}
.alertMessage.alert.alert-warning {
overflow: hidden;
line-height: 28px;
}
.alertMessage.alert.alert-warning:before {
top: 11px;
}
#hideMessages {
margin-left: 10px;
}
/************************************** Extra Content Tabs**********************************************************/
#extra_content_layout .extra-content-action-buttons {
display: inline-block;
margin-bottom: 15px;
}
#extra_content_container {
border: 1px solid #ddd;
border-radius: 0px 3px 3px;
}
#extra_content_container .tab-pane {
padding: 15px 15px 10px;
}
#extra_content_container .tab-pane > ul {
margin: 0;
list-style: none;
padding: 0;
border-left: 0;
}
#extra_content_container .tab-pane > ul > li {
padding: 10px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
p.extra-content-return-btn {
margin-top: 10px;
}
#extra-content-slider-slides {
margin-top: 15px;
}
#extra-content-slider-slides > div {
margin-bottom: 5px;
}
#theme_child_layout span.ajax_running-1 i, #extra_content_layout span.ajax_running-1 i {
left: 50%;
top: 50%;
margin-left: -5px;
margin-top: -5px;
position: absolute;
font-size: 50px;
z-index: 2;
}
#extra-content-slider-new-slide .extra-content-types-list.error {
border-color: #f00;
}
/*********************************** end of Extra Content Tabs *****************************************************/
/*app*/
#jxmegalayout-vue-app {
position: relative;
}
.app-loader {
position: absolute;
width: 100%;
height: 100%;
z-index: 99;
}
.app-loader i {
left: 50%;
top: 50%;
margin-left: -5px;
margin-top: -5px;
position: absolute;
font-size: 50px;
z-index: 2;
}