%PDF-
%PDF-
Mini Shell
Mini Shell
@import './variables';
/* default css style */
.wslu-social-login-main-wrapper {
padding: 80px 100px;
.clear-both::after {
display: block;
clear: both;
content: "";
}
.xs-btn {
cursor: pointer;
border: 0px;
display: inline-block;
font-weight: 400;
text-align: center;
vertical-align: middle;
user-select: none;
padding: .375rem .75rem;
font-size: 1rem;
border-radius: .25rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
color: #fff;
background-color: #0073aa;
text-decoration: none;
&.danger {
background-color: #dc3545;
}
&.primary {
background-color: #17a2b8;
color: #fff;
&:hover {
background-color: darken($color: #17a2b8, $amount: 10);
}
}
}
.right {
float: right;
}
#xs_provider_form {
.form-table {
th {
padding: 0px 10px 5px 0 !important;
vertical-align: middle;
}
td {
padding: unset;
}
}
.setting-label {
display: inline-block;
}
}
#xs_global_form {
.form-table {
th {
vertical-align: middle;
padding: 12px 10px 20px 0;
width: 214px;
font-weight: 600;
box-sizing: border-box;
}
td {
padding: unset;
padding-left: 71px;
}
}
}
.wslu-social-style-data {
display: flex;
margin-bottom: 0px;
flex-wrap: wrap;
.share-input-name{
margin-left: 22px;
}
}
.wslu-buy-now-btn {
position: absolute;
bottom: 18%;
left: 50%;
display: block!important;
color: #4285F4;
border: none;
font-size: 16px;
padding: 0;
border-radius: 5px;
transform: translateX(-50%);
opacity: 0;
visibility: hidden;
transition: all 0.4s;
text-decoration: none;
font-weight: bold;
text-decoration: underline;
&:hover{
color: #0d46a5;
}
}
.social_radio_button_label{
&--link{
text-decoration: none;
color: #444;
&:focus {
outline: none;
border: none;
box-shadow: none;
}
}
&:hover {
.wslu-style-img{
&:after{
opacity: 1;
visibility: visible;
top: 50%;
}
&:before {
opacity: 1;
visibility: visible;
}
}
.wslu-buy-now-btn{
opacity: 1;
visibility: visible;
bottom: 28%;
}
}
}
.wslu-go-pro-text{
color: red;
margin-left: 10px;
font-weight: bold;
}
.wslu-single-social-style-item {
flex: 0 0 33.33%;
padding-right: 30px;
padding-bottom: 80px;
box-sizing: border-box;
&:nth-child(3n+3){
padding-right: 0;
}
.xs_label_wp_login {
font-weight: 600;
}
}
.wslu-style-img {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
border-radius: 5px;
margin-top: 15px;
text-align: center;
padding:50px 25px;
display: flex;
justify-content: center;
align-items: center;
height: 250px;
margin-bottom: -40px;
img {
max-width: 100%;
max-height: 250px;
transform: translateY(-13px);
}
}
.wslu-style-pro{
.wslu-style-img{
position: relative;
&:before {
content: "";
background-color: rgba(204, 204, 204, 0.5);
height: 100%;
width: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all .4s;
visibility: hidden;
border-radius: 5px;
}
&:after {
content: '\ea87';
font-family: 'met-social';
color: red;
position: absolute;
z-index: 1;
font-size: 30px;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
background-color: #fff;
display: inline-block;
line-height: 40px;
padding: 8px 14px;
border-radius: 10px;
box-shadow: 0 7px 15px #ccc;
opacity: 0;
visibility: hidden;
transition: all .4s;
}
}
}
.xs_label_wp_login {
font-size: 15px;
line-height: 18px;
font-weight: normal;
margin-bottom: 15px;
color: #444;
display: block;
&:last-child {
margin-bottom: 0;
}
}
.social_switch_button_label {
cursor: pointer;
width: 55px;
height: 24px;
background: #DDDDDD;
display: block;
border-radius: 100px;
position: relative;
}
.social_switch_button_label:after {
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 15px;
height: 15px;
background: #fff;
border-radius: 90px;
transition: 0.3s;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.21);
}
.social_switch_button_label:before {
content: 'OFF';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 10px;
display: inline-block;
text-transform: uppercase;
font-weight: 600;
}
// #xs_provider_form
/**
* Css switch start for provider
*/
input {
&.social_switch_button {
height: 0;
width: 0;
visibility: hidden;
display: none;
}
&.social_switch_button {
&:checked {
+label {
&.social_switch_button_label {
background: $primary_bg;
&:after {
left: calc(100% - 5px);
transform: translateX(-100%);
}
&:before {
content: "ON";
right: inherit;
left: 10px;
}
}
}
}
}
}
/**
* Css switch end for providers
*/
/* social block */
.xs-social-block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-left: 0;
list-style: none;
>li {
width: 33.33333%;
margin: 0;
padding: 15px;
box-sizing: border-box;
&:nth-child(3n+3) {
padding-right: 0;
}
&:nth-child(3n+4),
&:first-child {
padding-left: 0;
}
}
}
// .xs-social-block
.xs-single-social-block {
border: 1px solid #eaeaea;
border-radius: 4px;
position: relative;
overflow: hidden;
}
.xs-counter-popup-access-box{
.xs-counter-lavel{
padding: 0px 5px 5px 5px;
.regular-text{
width: 98%;
display: block;
padding-left: 10px;
height: 37px;
}
.setting-label{
line-height: 2em !important;
display: block;
font-weight: bold;
}
}
}
.xs-social-block-wraper-counter{
.xs-social-block{
display: block;
width: 100%;
height: auto;
li{
list-style: none;
width: 48%;
display: inline-grid;
margin-right: 5px;
.xs-single-social-block {
margin: 0px;
padding: 0px;
border-radius: 1px;
position: relative;
overflow: hidden;
border: 1px solid #e5e5e5;
border-bottom: unset;
box-shadow: 0 1px 1px rgba(0,0,0,.04);
background-color: #fff;
.xs-counter-close{
display: none;
}
.xs-counter-open{
display: block;
}
.xs-counter-lavel{
padding: 0px 5px 5px 5px;
.regular-text{
width: 98%;
display: block;
padding-left: 10px;
height: 37px;
}
.setting-label{
line-height: 2em !important;
display: block;
font-weight: bold;
}
}
.form-table{
margin-top: 5px !important;
&.xs-access-button-inline{
.regular-text{
width: 70%;
display: inline-block;
}
}
}
}
&.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{
border: unset;
background: unset;
}
}
}
.xs-block-header {
cursor: pointer;
display: block;
width: 100%;
display: flex;
/*justify-content: space-between;*/
align-items: center;
height: 35px;
border-bottom: 1px solid #e5e5e5;
.xs-social-icon {
padding: 10px;
width: 18px;
text-align: center;
>img {
width: 18px;
height: 18px;
margin-left: auto;
margin-right: auto;
}
> span.met-social {
color: #fff;
font-size: 15px;
}
}
}
@each $name,
$color in $social {
.#{$name} {
.xs-social-icon {
background-color: $color;
}
}
}
.xs-counter-body .setting-label {
line-height: 3em;
display: block !important;
font-weight: bold;
}
}
.xs-social-block-wraper {
.xs-block-header {
cursor: pointer;
}
@each $name,
$color in $social {
.#{$name} {
.xs-block-header {
background-color: $color;
}
}
}
.xs-social-icon-title {
font-size: $default_font_size;
line-height: 21px;
color: #fff;
font-weight: 600;
margin: 0;
}
.xs-social-icon {
>img {
width: 50px;
height: 50px;
margin-left: auto;
margin-right: auto;
}
> span.met-social {
color: #fff;
font-size: 29px;
line-height: 2em;
}
}
.xs-block-header {
min-height: 150px;
padding: 30px;
display: flex;
justify-content: center;
text-align: center;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
.wslu-social-icon {
font-size: 30px;
color: #fff;
line-height: 36px;
margin-bottom: 5px;
}
.xs-block-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
background-color: #FFFFFF;
}
.wslu-social-cond-text {
font-size: 12px;
font-weight: 600;
line-height: 14px;
color: #00D660;
text-transform: uppercase;
&.disable {
color: #FF433C;
opacity: .3;
}
.wslu-icon {
font-size: 11px;
margin-right: 7px;
}
}
.wslu-social-provider-btn.btn-special {
background-color: #4285F4;
border-radius: 5px;
font-size: 12px;
line-height: 14px;
font-weight: 600;
text-transform: uppercase;
padding: 8px 20px;
}
}
.wslu-popup-data {
.wslu-single-popup-item {
margin-bottom: 35px;
&.wslu-inline {
display: flex;
align-items: center;
.setting-label-wraper {
margin-right:80px;
}
.wslu-sec-title {
margin: 0;
}
}
&:last-child{
margin-bottom: 0;
}
// h3 {
// margin:0;
// font-size: 18px;
// line-height: 21px;
// color: #101010;
// font-weight: bold;
// margin-bottom: 20px;
// }
p {
font-size: $default_font_size;
line-height: 26px;
color: #707070;
font-weight: normal;
margin-top: 0;
&:last-child {
margin-bottom: 0;
}
}
ol,
ul {
li{
font-size: $default_font_size;
line-height: 26px;
}
}
}
}
.xs-modal-dialog {
.tab__list {
margin: 0;
padding: 0;
list-style: none;
border-radius: 10px;
display: inline-block;
>.tab__list__item {
float: none;
border: none;
display: inline-block;
margin: 0;
background-color: #fff;
color: #707070;
font-size: 16px;
line-height: 18px;
font-weight: 600;
border: none !important;
border: 1px solid #EDEDED !important;
padding: 13px 25px;
margin: 0;
float: left;
cursor: pointer;
&:first-child{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
&:last-child{
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
&:hover {
color: #000;
}
&.active {
color: #fff;
background-color: $primary_bg !important;
border-color: $primary_bg !important;
}
&.right {
float: right;
}
}
}
}
.xs-modal-dialog {
.ekit--tab__post__details {
position: relative;
.tabItem {
display: none;
animation: hide-fadeout 600ms ease-out;
position: relative;
&.active {
display: block;
animation: show-fadein 600ms ease-in;
}
}
.ekit_section-title {
text-align: right;
font-size: 50px;
color: rgba(0, 0, 0, 0.3);
margin: 0;
position: absolute;
top: 0;
right: 0;
user-select: none;
pointer-events: none;
font-weight: 700;
}
}
}
/*code write for sortcode section*/
.short-code-section {
background: #f3f1f1;
padding: 5px;
margin-bottom: 20px;
}
.short-code-section>ol>li {
font-weight: normal;
line-height: 2em;
}
.copyTextButton::before {
content: "\f0c5";
color: #a0a5aa;
color: rgba(240, 245, 250, .6);
padding: 7px 0;
transition: all .1s ease-in-out;
}
/*end code write for sortcode section*/
@-webkit-keyframes show-fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes show-fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes hide-fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes hide-fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* show animation */
@-webkit-keyframes show-animation {
0% {
transform: translateY(20px);
opacity: 0;
}
100% {
transform: translateY(0px);
}
}
@keyframes show-animation {
0% {
transform: translateY(20px);
opacity: 0;
}
100% {
transform: translateY(0px);
}
}
/* hide animation */
@-webkit-keyframes hide-animation {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(20px);
opacity: 0;
}
}
@keyframes hide-animation {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(20px);
opacity: 0;
}
}
.xs-modal-dialog {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: all .4s;
.xs-modal-content{
position: absolute;
overflow: hidden;
width: 100%;
height: auto;
transition: all 300ms ease-in;
top: 50%;
left: 50%;
opacity: 0;
visibility: hidden;
transform: translate(-50%, -50%);
z-index: 9999;
max-width: 730px;
background-color: #FFFFFF;
border-radius: 5px;
box-shadow: 17.678px 17.678px 90px 0px rgba(0, 0, 0, 0.07);
box-sizing: border-box;
max-height: 100vh;
overflow-y: auto;
}
}
.xs-modal-dialog.is-open {
opacity: 1;
visibility: visible;
.xs-modal-content{
transition: all 300ms ease-out;
opacity: 1;
visibility: visible;
overflow-x: hidden !important;
overflow-y: auto !important;
}
}
.xs-backdrop {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
transition: all 300ms ease-in;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
}
.xs-backdrop.is-open {
transition: all 300ms ease-out;
opacity: 1;
visibility: visible;
}
.xs-modal-content {
overflow: hidden;
padding: 50px;
}
.xs-modal-body {
padding: 0px;
}
.xs-modal-footer {
margin-top: 40px;
}
/**
* admin button style css section
*/
.xs-login-global {
background: #fff;
margin-top: 20px;
padding: 5px 7px;
border-radius: 4px;
display: -webkit-box;
}
.admin-page-framework-container #poststuff .admin-page-framework-content h3 {
margin: 10px 0 40px !important;
}
.wslu-popup-provider-title {
margin: 0;
padding: 0;
font-size: 50px;
line-height: 58px;
text-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
color: #fff;
position: absolute;
top: -25px;
right: 0;
z-index: 0;
}
.xs-modal-header {
>.tabHeader {
margin-bottom: 30px;
}
.xs-btn {
background: transparent;
position: absolute;
right: 30px;
top: 30px;
margin: 0;
padding: 0;
z-index: 2;
&:focus{
outline: none;
}
}
.wslu-icon {
color: #FF433C;
height: 36px;
width: 36px;
border: 2px solid #FF433C;
display: inline-block;
line-height: 33px;
text-align: center;
border-radius: 100px;
font-weight: 700;
font-size: 20px;
box-sizing: border-box;
}
}
.form-table {
.regular-text {
border-radius: 5px;
height: 48px;
background-color: #FFFFFF;
border: 1px solid rgb(231, 231, 231);
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.03);
padding-left: 30px;
&::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: rgba($color: #000000, $alpha: .3);
}
&::-moz-placeholder {
/* Firefox 19+ */
color: rgba($color: #000000, $alpha: .3);
}
&:-ms-input-placeholder {
/* IE 10+ */
color: rgba($color: #000000, $alpha: .3);
}
&:-moz-placeholder {
/* Firefox 18- */
color: rgba($color: #000000, $alpha: .3);
}
}
}
.xs-counter-popup-access-box{
.xs-modal-dialog{
z-index: 99999;
height: 100%;
}
}
.xs-social-block-wraper-counter{
.xs-modal-dialog .ekit_section-title {
text-align: right;
font-size: 50px;
color: rgba(0, 0, 0, 0.3);
margin: 0;
position: absolute;
top: 89px;
right: 41px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
font-weight: 700;
}
}
// Start
.wslu-main-header {
margin-bottom: 42px;
h1{
font-size: 36px;
line-height: 42px;
color: #101010;
margin: 0;
padding: 0;
}
.wslu-icon{
font-size: 28px;
margin-right: 13px;
}
}
.wslu-nav-tab-wrapper{
overflow: hidden;
margin-bottom: 45px;
ul {
margin:0;
padding: 0;
list-style: none;
border-radius: 10px;
display: inline-block;
li {
float: left;
margin: 0;
&:first-child {
a {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
}
&:last-child {
a {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
}
a {
float: none;
border: none;
display: block;
margin: 0;
background-color: #fff;
color: #707070;
font-size: $default_font_size;
line-height: 18px;
font-weight: 600;
border: none !important;
border: 1px solid #EDEDED !important;
padding: 13px 25px;
&.nav-tab-active {
color: #fff;
background-color: $primary_bg !important;
border-color: $primary_bg !important
}
&:focus {
outline: none;
box-shadow: none;
}
}
}
}
}
.wslu-global-input{
min-width: 350px;
height: 48px;
border: 1px solid #EDEDED;
border-radius: 5px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.05);
color: #999999;
font-size: 14px;
font-weight: normal;
line-height: $default_font_size;
padding: 0 25px;
&:focus {
outline: none;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.05);
}
}
.wslu-global-radio-input {
border: 2px solid #747474;
height: 20px;
width: 20px;
margin-left: 0;
&:checked{
border-color: $primary_bg;
&:before
{
background-color: $primary_bg;
width: 10px;
height: 10px;
margin: 3px;
}
}
&:before
{
background-color: $primary_bg;
}
}
.wlsu-hover-effect-select-wrapper{
position: relative;
&:after {
content: '';
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000;
color: #000000;
right: 25px;
top: 50%;
position: absolute;
pointer-events: none;
}
}
.wslu-sec-title{
font-size: 18px;
line-height: 21px;
font-weight: 600;
margin: 0;
margin-bottom: 12px;
color: #101010;
display: inline-block;
}
.xs-btn.btn-special {
background-color: $primary_bg;
font-size: $default_font_size;
line-height: 18px;
color: #fff;
border-radius: 5px;
padding: 15px 30px;
box-shadow: 0 1px 5px rgba(66, 133, 244, .5);
margin-bottom: 5px;
&:focus {
outline: none;
box-shadow: none;
}
}
.wslu-right-content {
float: left;
display: flex;
// justify-content: center;
flex-direction: column;
flex-wrap: wrap;
padding: 2px 0;
&.wslu-inline{
flex-direction: row;
}
.social_radio_button_label{
margin-right: 15px;
}
&--share{
float: none;
flex-direction: inherit;
}
}
//horizontial style
.wslu-right-content.horizontial{
flex-direction: row;
}
.wslu-single-item {
overflow: hidden;
margin-bottom: 52px;
padding-top: 1px;
&.wslu-align-center {
display: flex;
align-items: center;
}
&:last-of-type{
margin-bottom: 0;
}
.wslu-left-label {
width: 214px;
margin-right: 70px;
float: left;
}
.wslu-input-list {
margin-top: 20px;
}
.deactive_tr {
display: none;
}
.active_tr {
display: block;
}
.wslu-social-shortcodes {
margin: 0;
margin-left: 15px;
li{
font-size: $default_font_size;
line-height: 26px;
font-weight: normal;
color: #666666;
}
}
}
.wslu-help-text {
flex: 0 0 100%;
p{
margin: 0;
}
}
}
body.toplevel_page_wslu_global_setting,
body.wp-social_page_wslu_share_setting,
body.wp-social_page_wslu_counter_setting{
background-color: #fff;
}
.wslu-display-type-container {
display: flex;
margin-bottom: 40px;
// .social_radio_button_label{
// display: flex;
// -webkit-box-align: center;
// -ms-flex-align: center;
// align-items: center;
// border-radius: 5px;
// margin-top: 15px;
// padding: 25px;
// margin-right: 15px;
// box-sizing: border-box;
// flex: 1;
// border: 1px solid #ccc;
// margin: 0;
// margin-right: 15px;
// &:last-child{
// padding-right: 0;
// margin-right: 0;
// }
// }
// .wslu-global-radio-input{
// margin-right: 15px;
// display: none;
// }
// &--data{
// p {
// margin: 0;
// font-size: 18px
// }
// span {
// font-size: 14px;
// }
// }
li {
flex: 1;
box-shadow: none;
border: none;
a{
cursor: pointer;
margin: 0;
font-size: 18px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-radius: 5px;
margin-top: 15px;
padding: 25px;
margin-right: 15px;
box-sizing: border-box;
flex: 1;
border: 1px solid #ccc;
margin: 0;
margin-right: 15px;
transition: background-color .4s;
text-decoration: none;
display: block;
color: #444;
span {
font-size: 14px;
display: block;
margin-top: 10px;
}
&.active{
background-color: #4285F4;
color: #fff;
border-color: #4285F4;
}
&:focus {
outline: none;
box-shadow: none;
}
}
}
}
.wslu-display-content{
margin-bottom: 50px;
.wslu-single-item{
display: none;
&:first-child {
display: block;
}
}
}
.wslu-social-style-hidden-inputs{
display: none;
}
#xs_style_form{
.wslu-single-item{
display: flex;
align-items: center;
flex-wrap: wrap;
.wslu-sec-title{
margin-bottom: 0;
}
// Primary Content
.primary-content-setting{
&__content.mb-5{
margin-bottom: 50px;
}
&__content{
display: flex;
flex-wrap: wrap;
justify-content: start;
&__item{
width: 180px;
border: 2px solid rgba($primary_bg, .4);
display: inline-block;
box-sizing: border-box;
position: relative;
border-radius: 4px;
overflow: hidden;
img{
width: 100%;
margin-bottom: -4px;
}
&--name{
position: absolute;
z-index: 9;
top: 23px;
left: 25px;
}
}
}
&__item{
margin: 8px;
input{
visibility: hidden;
display: none;
}
input:checked + .primary-content-setting__content__item{
border-color: $primary_bg;
background: $primary_bg;
img{
filter: grayscale(1);
opacity: 0.8;
}
}
}
}
// social share hover animation style
.wlsu-hover-effect{
&__content{
display: flex;
flex-wrap: wrap;
}
&__item{
input{
visibility: hidden;
display: none;
}
label{
width: 200px;
height: 100px;
border: 2px solid rgba($primary_bg, .4);
margin: 5px;
display: inline-block;
box-sizing: border-box;
position: relative;
border-radius: 4px;
overflow: hidden;
img{
width: 100%;
}
span{
position: absolute;
left: 0;
top: 0;
width: 100%;
text-align: center;
line-height: 100px;
height: 100%;
background:transparent;
transition: all .3s;
visibility: hidden;
transform: scale(.9);
color: #fff;
}
}
input:checked + label{
border-color: $primary_bg;
span{
background: rgba($primary_bg, .2);
visibility: visible;
transform: scale(1);
font-size: 0;
}
}
input:not(:checked):hover + label{
span{
background: rgba($primary_bg, .9);
visibility: visible;
transform: scale(1);
}
}
}
}
}
// .wslu-right-content{
// .social_radio_button_label{
// margin-bottom: 0;
// }
// }
.wslu-display-content{
.wslu-single-item{
display: block;
}
}
}
Zerion Mini Shell 1.0