%PDF-
%PDF-
Mini Shell
Mini Shell
.preview {
width: 337px;
z-index: 99;
height: 373px;
margin-right: 15px;
float: right;
h2{
text-align: center;
}
&.mobiel-view{
.page{
width: 152px;
.chaty-widget{
.icon{
i{
width: 24px;
height: 24px;
font-size: 12px;
line-height: 24px;
}
}
}
}
}
.is-sticky &{
left: calc(50vw - 480px + 960px / 12 * 7 + 140px);
}
h2 {
font-weight: bold;
line-height: normal;
font-size: 17px;
color: @color_6;
margin-bottom: 5px;
}
.page {
overflow: hidden;
background-color: @background_color_6;
box-shadow: 0px 4px 35px rgba(0, 0, 0, 0.05);
border-radius: 5px;
position: relative;
height: 194px;
margin: 0 auto;
.page-header {
display: flex;
align-items: center;
background: #FFFFFF;
border-radius: 5px 5px 0px 0px;
height: 16px;
.circle {
margin-left: 9px;
width: 6px;
height: 6px;
background: linear-gradient(153.19deg, #6371DB 7.06%, #FF89C4 90.47%), #FFE663;
box-shadow: 0px 4px 35px rgba(0, 0, 0, 0.05);
border-radius: 50%;
}
svg {
&:last-child {
margin-left: auto;
margin-top: 7px;
margin-right: -7px;
}
}
}
.chaty-widget {
position: absolute;
left: auto;
.icon {
&:after {
z-index: 10;
content: '';
font-size: 13px;
top: 13px;
white-space: nowrap;
padding: 0;
line-height: 0px;
width: auto;
color: @color_13;
background-color: @background_color_3;
box-shadow: 0 1.93465px 7.73859px rgba(0, 0, 0, 0.15);
border-radius: 0px;
right: 0;
left: auto;
transform: translate(calc(100% + 6px), -50%);
}
&:before {
content: '';
right: -13px;
left: auto;
top: 15px;
transform: translateY(-50%);
height: 10px;
width: 10px;
z-index: 11;
border-style: solid;
border-width: 5px 10px 5px 0;
border-color: @border_color_2;
}
i{
width: 30px;
height: 30px;
font-size: 18px;
display: block;
border-radius: 100%;
line-height: 30px;
text-align: center;
overflow: hidden;
&.icon-chat-image{
background: none;
img{
display: block;
background: @color_1;
}
}
svg{
fill:#fff;
width: 100%;
height: 100%;
}
img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.mobiel-view &{
width: 23px;
height: 23px;
font-size: 13px;
line-height: 23px;
}
}
}
}
.chaty-widget[style*="left: auto;"] {
.icon {
&:before {
right: auto;
left: -11px;
border-width: 5px 0 5px 10px;
border-style: solid;
border-color: @border_color_3;
}
&:after {
left: 0;
right: auto;
transform: translate(calc(-100% - 6px), -50%);
}
}
}
}
}
.switch-preview{
display: flex;
width: 160px;
border-radius: 5px;
margin: 15px auto 0;
overflow: hidden;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.07);
background: #fff;
&__label{
flex: 1;
text-align: center;
line-height: 30px;
input{
display: none;
}
}
&__input[type=radio]{
display: none;
&:checked + label{
background: @color_1;
color: #fff;
}
}
}
html[dir="rtl"] {
.preview {
right: auto;
}
.is-sticky {
.preview {
left: calc(50vw - 480px + 960px / 12 * 7 + 84px - 175px);
}
}
}
@media (max-width: 1200px) {
.preview {
display: none ;
//position: static;
//width: 100%;
//float: none;
}
}
Zerion Mini Shell 1.0