| Current Path : /var/www/media/plg_social2s/css/ |
| Current File : /var/www/media/plg_social2s/css/s2sv4_backend.scss |
@media (max-width: 768px) {
}
@media (min-width: 768px) {
.s2s_version h4{
padding: 0;
margin: 0;
}
.form-horizontal .accordion-body .control-label{
//text-align: right;
//width: 150px;
label{
//display:inline-flex;
//align-items:center;
}
}
/*
.accordion-group{
transition: all 300ms;
&.s2s_acc_open{
border:solid 1px #b7cde2;
box-shadow: 1px 5px 16px 0px rgba(95, 132, 167, 0.66);
}
}
*/
}
.btn-jtotal{
background: rgb(241,102,156);
background: -moz-linear-gradient(45deg, rgb(241,102,156) 0%, rgb(229,170,97) 21%, rgb(206,197,89) 46%, rgb(125,185,232) 80%, rgb(94,145,241) 100%);
background: -webkit-linear-gradient(45deg, rgb(241,102,156) 0%,rgb(229,170,97) 21%,rgb(206,197,89) 46%,rgb(125,185,232) 80%,rgb(94,145,241) 100%);
background: linear-gradient(45deg, rgb(241,102,156) 0%,rgb(229,170,97) 21%,rgb(206,197,89) 46%,rgb(125,185,232) 80%,rgb(94,145,241) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1669c', endColorstr='#5e91f1',GradientType=1 );
border:none;
color:#333;
box-shadow: 0 3px 10px #333;
&:hover{
background: linear-gradient(45deg, rgb(251,202,256) 0%,rgb(259,220,97) 21%,rgb(206,197,89) 46%,rgb(225,185,232) 80%,rgb(144,145,241) 100%);
}
}
/*ACCORDIONS*/
.accordion-body >div {
padding-left: 10px;
}
.accordion-heading a.accordion-toggle{
//background: #ECECEC;
}
.accordion-heading a:hover{
text-decoration: none;
}
ul.s2s_order li.fo-plus_q, ul.s2s_order li.fo-plus_s, ul.s2s_order li.fo-rplus_q, ul.s2s_order li.fo-rplus_s{
background-image: linear-gradient(to bottom,#BDDEFF,#fff);
}
ul.s2s_order li.fo-plus_q:hover, ul.s2s_order li.fo-plus_s:hover, ul.s2s_order li.fo-rplus_q:hover, ul.s2s_order li.fo-rplus_s:hover{
background-image: linear-gradient(to bottom,#BDDEFF,#E6E6E6);
}
ul.s2s_order li.fo-plus_q ~ li, ul.s2s_order li.fo-plus_s ~ li, ul.s2s_order li.fo-rplus_q ~ li, ul.s2s_order li.fo-rplus_s ~ li{
background-image: linear-gradient(to bottom,#B1B1B1,#E6E6E6);
}
/*V4*/
.s2-btn-mini .btn{
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
padding-bottom: 2px;
}
label.hasPopover{
font-weight: bold;
}
.accordion-heading,.accordion-heading a,.accordion-heading h3,.accordion-group *{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
/*********************/
/*****ACCORDION*******/
/*********************/
div.accordion-group{
transition: all 300ms;
//HEADING
div.accordion-heading{
position: relative;
a.accordion-toggle{
background-color: #fff;
color: #4d4d4d;
text-decoration: none !important;
transition: all 300ms;
&:hover {
background-color: #f7ebe7;
}
&:after {
content: "\f055";
font-family: 'Font Awesome\ 5 Free';
position: absolute;
right: 20px;
top: 14px;
font-size: 1.6rem;
transition: transform 400ms, color 350ms;
transform-origin: center center;
transform: rotateZ(0deg) scale(0.6);
color: #8295a9;
-webkit-backface-visibility: hidden;
}
h3 {
margin: 4px 0px;
transform: translateX(0px);
transition: margin 300ms, transform 300ms;
}
}
} //OPEN
&.s2s_acc_open {
//border:solid 1px #fbc9b9;
box-shadow: 1px 5px 16px 0px rgba(95, 132, 167, 0.66);
border-radius: 10px 10px 2px 2px;
div.accordion-heading {
a.accordion-toggle {
background-color: #efe0db;
background-color: #bc2d00;
color: #bc2d00;
color: #fff;
border-radius: 10px 10px 2px 2px;
&:after {
transform: rotateZ(135deg);
color: #7b2525;
color: #fff;
}
}
}
}
//BODY
.accordion-body {
//z-index: 99999;
opacity: 0;
transform-origin: top; //transform:translateY(-100px);
transform: scaleY(0);
transition: transform 400ms, height 400ms, opacity 400ms !important;
background:#ececec;
box-shadow: 0 0 4px rgba(0,0,0,0.2) inset;
&.in {
opacity: 1;
transform: scaleY(1);
z-index: 1;
}
.s2sfo{
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
>.control-group{
display: flex;
align-items: stretch;
//justify-items:stretch;
border-top: solid 1px #dedede;
border-bottom:solid 1px #f9f9f9;
margin:0px;
padding-top: 0px;
padding-bottom: 0px;
&:nth-child(2n-1) {
//background: #fafafa;
//padding-left: 10px;
}
>div{
display: flex;
align-items: stretch;
align-items: center;
}
.control-label{
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
label {
.s2sfo, .fa{
color:#666;
padding-right:4px;
}
&#jform_params_s2s_order-lbl{
display: inline-block;
}
}
}
.controls{
padding-left: 10px;
margin-left:0px;
padding-top: 15px;
padding-bottom: 15px;
background:yellow;
width:100%;
background: #fafafa;
height:100%;
align-self:center;
}
&.field-spacer{
padding:4px 0px;
.controls{
padding:0px;
}
.control-label{
hr{
display:none;
}
}
}
}
}
}
#attrib-SOCIAL2S_SOCIAL > div.control-group > div.control-group > div.control-label{
display: none !important;
}
#attrib-SOCIAL2S_SOCIAL > div.control-group div.accordion-heading a{
display: flex;
align-items: center;
}
#attrib-SOCIAL2S_SOCIAL > div.control-group div.accordion-heading a >span{
padding-right: 6px;
}
body.s2s_j3 div.span12 > #style-form > div.form-horizontal > ul.nav.nav-tabs{
position: sticky;
top:82px;
background: white;
z-index: 1000;
}
/**********************/
/* Joomla V3.x */
/**********************/
body.s2s_j3{
//general
div#general{
div.row-fluid{
div.span9{
>hr{
display:none;
}
>h3{
display:none;
}
div.info-labels{
display:none;
}
}
}
}
.modal-backdrop{
z-index:-1;
}
}
/**********************/
/**********************/
/* Joomla V4.x */
/**********************/
/**********************/
body.s2s_j4{
img.s2s_logo_portada{
max-width: 100%;
}
div.card{
> a.card-header{
+ div > div.card-body{
opacity:1;
transform-origin:top;
transform:scaleY(1);
transition: transform 400ms, height 400ms, opacity 400ms !important;
}
&.collapsed{
+ div > div.card-body{
opacity:0;
//transform:translateY(-100px);
transform:scaleY(0);
}
}
}
.custom-select{
width:inherit;
}
}
.control-group > .control-label{
margin-left: 0px;
width: 0px;
}
.control-label > div.alert.alert-info{
display:none;
}
//ELEMENTS OUT OF CARDS
section > div.control-group{
display: flex;
flex-direction: column;
>div.control-label{
width: 100%;
}
>div.controls{
margin-left: 0px;
}
}
//HEADING
div.card{
position: relative;
max-width: 1000px;
a.card-header{
box-shadow: 1px 5px 16px 0px rgba(95, 132, 167, 0.66);
border-radius: 10px 10px 2px 2px;
background-color: #efe0db;
background-color: #bc2d00;
color: #bc2d00;
color: #fff;
border-radius: 10px 10px 2px 2px;
transition: all 300ms;
display: flex;
align-items: center;
justify-content: space-between;
padding: 2px 10px;
> span{
padding-right:10px;
}
>b, strong{
flex-grow: 1;
}
&:after {
font-family: 'Font Awesome\ 5 Free';
content: "\f057";
//position: absolute;
right: 20px;
top: 14px;
font-size: 1.6rem;
transition: transform 400ms, color 350ms;
transform-origin: center center;
transform: rotateZ(0deg);
color: #8295a9;
-webkit-backface-visibility: hidden;
color: #fff;
}
h3 {
margin: 4px 0px;
transform: translateX(0px);
transition: margin 300ms, transform 300ms;
display: flex;
align-items: center;
> span{
width: auto;
padding-right:10px;
}
}
&.collapsed {
//border:solid 1px #fbc9b9;
background-color: #fff;
color: #4d4d4d;
text-decoration: none !important;
border-radius: 10px;
box-shadow: 0px 0px 1px 0px rgba(95, 132, 167, 0.66);
&:hover {
background-color: #f7ebe7;
}
&:after {
//transform: rotateZ(135deg);
color: #7b2525;
color: #8295a9;
transform: rotateZ(135deg) scale(0.6);
}
}
}
//BODY
.card-body {
//z-index: 99999;
opacity: 0;
transform-origin: top; //transform:translateY(-100px);
transform: scaleY(0);
transition: transform 400ms, height 400ms, opacity 400ms !important;
background:#ececec;
background:#f9f9f9;
box-shadow: 0 0 4px rgba(0,0,0,0.2) inset;
/*
&.in {
opacity: 1;
transform: scaleY(1);
z-index: 1;
}*/
.s2sfo{
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
>.control-group{
flex-direction: column;
display: flex;
align-items: stretch;
//justify-items:stretch;
border-top: solid 1px #dedede;
border-bottom:solid 1px #f9f9f9;
margin:0px;
padding-top: 0px;
padding-bottom: 0px;
align-items: center;
>div{
display: flex;
align-items: stretch;
align-items: center;
}
.control-label{
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
width: 100%;
//max-width: inherit;
text-align:right;
padding-right:20px;
label {
.s2sfo, .fa{
color:#666;
padding-right:4px;
}
&#jform_params_s2s_order-lbl{
display: inline-block;
}
}
}
.controls{
padding-left: 10px;
margin-left:0px;
padding-top: 15px;
padding-bottom: 15px;
width:100%;
//background: #fafafa;
height:100%;
align-self:center;
}
//DESCRIPTION
[id*="-desc"]{
right: 15px;
background:#fafafa;
padding: 5px;
text-align: right;
//z-index: 9;
transition:all 300ms;
z-index: 0;
flex: 0 0 40%;
display: block;
img{
max-height: 60px;
transition: all 300ms;
position:relative;
&:hover{
z-index: 999;
max-height: 400px;
}
}
&.hover{
z-index: 99999;
color:red !important;
opacity:1;
visibility: visible;
}
}
&.field-spacer{
padding:4px 0px;
.controls{
padding:0px;
}
.control-label{
hr{
display:none;
}
}
}
}
}
}
div.card-light{
div.card-body{
opacity: 1;
transform: inherit;
background:inherit;
box-shadow:inherit;
}
}
}
.jtotal_license_ok{
width: inherit;
}
//LITE DASHBOARD
div.s2s_lite_dashboard{
.btn{
display:none;
}
}
div.jtotal_license_ok{
}
//TABLET AND UP
@media (min-width: 768px) {
//J4
body.s2s_j4{
//ELEMENTS OUT OF CARDS
section > div.control-group{
display: inherit;
>div.control-label{
width: 0%;
display: inline-table;
>label{
min-width:200px;
}
}
>div.controls{
margin-left: 0px;
}
}
div.card-body {
>.control-group{
flex-direction: row !important;
//LABEL
.control-label{
width: 100%;
max-width:200px;
flex:0 0 20%;
justify-content: flex-end;
}
//DESCRIPTION
[id*="-desc"]{
right: 15px;
background:#fafafa;
padding: 5px;
text-align: right;
//z-index: 9;
transition:all 300ms;
z-index: 0;
flex: 0 0 40%;
display: block;
img{
max-height: 60px;
transition: all 300ms;
position:relative;
&:hover{
z-index: 999;
max-height: 400px;
}
}
&.hover{
z-index: 99999;
color:red !important;
opacity:1;
visibility: visible;
}
}
}
}
}
}