.bk_stories__elements {
display: flex;
list-style: none;
overflow-x: auto;
scrollbar-width: 0;
margin: 0 -10px 0 0;
border-radius: 0;
background-color: transparent;
padding: 0;
flex-direction: row;
align-items: first baseline;
width: 106%
}
.bk_stories__elements::-webkit-scrollbar {
display: none
}
.bk_stories__elements__item {
display: flex;
flex-direction: column;
align-items: center;
flex: none;
cursor: pointer;
user-select: none;
margin-left: .75rem;
float: right
}
.bk_stories__elements__item:last-child {
margin-left: 0
}
.bk_stories__elements__item__picture {
position: relative;
width: 100px;
height: 100px
}
.bk_stories__elements__item__picture--img {
position: absolute;
top: 50%;
left: 50%;
width: 72px;
height: 72px !important;
transform: translate(-50%, -50%);
border-radius: 50% !important
}
.bk_stories__elements__item__picture--circle {
fill: none;
stroke: var(--bk-border-color);
stroke-linecap: round;
stroke-width: 2;
stroke-dasharray: 1;
stroke-dashoffset: 0
}
.bk_stories__elements__item__title {
display: block;
font-size: 12px;
font-weight: 700;
line-height: 1rem;
overflow-wrap: break-word;
color: #333;
margin: .25rem 0
}
.bk_stories__elements__item.loading .bk_stories__elements__item__picture--circle {
animation: 6s ease-out infinite alternate stroke-draw
}
.bk_stories__elements__item.seen {
opacity: .75
}
.bk_stories__elements__item.seen .bk_stories__elements__item__picture--circle {
stroke: #ddd
}
.bk_stories__box {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: hsla(0, 0%, 3%, .5);
overflow: hidden;
z-index: 999999999;
-webkit-backdrop-filter: blur(1+px);
backdrop-filter: blur(1px);
}
.bk_stories__box.opened,
.bk_stories__box__actions__mute.visible,
.bk_stories__box__actions__playing.visible {
display: block
}
.bk_stories__box__elements {
display: block;
position: relative;
width: 100vh;
max-width: 100vw;
height: 100vh;
background-color: hsl(0deg 0% 53% / 11%);
overflow: hidden;
margin: 0 auto;
-webkit-backdrop-filter: blur(p);
backdrop-filter: blur(1px);
}
.bk_stories__box__elements__slides__wrapper {
display: flex;
flex-direction: row;
position: relative;
width: 56.25vh;
height: 100vh;
background-color: rgba(0, 0, 0, .7);
transition: transform .25s cubic-bezier(.8, 0, .2, 1);
will-change: auto;
touch-action: manipulation;
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-backdrop-filter: blur(2rem);
backdrop-filter: blur(2rem);
overflow: hidden
}
.bk_stories__box__elements__slides__item {
display: block;
position: relative;
width: 100vh;
max-width: 100vw;
height: 100vh;
min-height: 100vh;
max-height: 100vh;
overflow: hidden;
will-change: opacity;
opacity: 0;
filter: blur(0);
transition: opacity .5s, filter .25s
}
.bk_stories__box__elements__slides__item.active {
opacity: 1
}
.bk_stories__box__elements__slides__item--content {
display: block;
position: relative;
width: 100vh !important;
max-width: 100vw !important;
height: 100vh !important;
min-height: 100vh !important;
max-height: 100vh !important;
padding: 0;
margin: 0 !important;
-o-object-fit: contain;
object-fit: contain;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
pointer-events: none
}
.bk_stories__box__elements__slides__item--link {
z-index: 9999999999;
display: block;
position: absolute;
right: 50%;
bottom: 25%;
background-color: #fff;
transform: translateX(50%);
color: #333;
padding: 10px 25px;
border-radius: 25px;
font-size: 15px
}
.bk_stories__box__elements__bars {
display: flex;
flex-direction: row;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100px;
padding: 10px 5px 87px;
z-index: 2
}
.bk_stories__box__elements__bars::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, .5), transparent)
}
.bk_stories__box__elements__bars__item {
display: block;
position: relative;
border-radius: 3px;
width: calc(100% / 5 - 6px);
height: 3px;
margin: 0 3px;
cursor: pointer;
overflow: hidden;
background-color: rgba(255, 255, 255, .4)
}
.bk_stories__box__elements__bars__item span {
display: block;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
width: 100%;
height: 100%;
border-radius: 3px;
background-color: #fff;
will-color: auto;
transform: translateX(-101%) rotate(0)
}
.bk_stories__box__elements__bars__item.seen span {
transform: translateX(0) rotate(0)
}
.bk_stories__box__elements__bars__item.animate span {
-webkit-animation: linear both bks-bar;
animation: linear both bks-bar
}
.bk_stories__box__elements__bars__item.paused span {
animation-play-state: paused
}
.bk_stories__box__actions__close,
.bk_stories__box__actions__next,
.bk_stories__box__actions__prev {
display: block;
position: absolute;
cursor: pointer;
user-select: none;
z-index: 3;
width: 32px;
height: 32px
}
.bk_stories__box__actions__next,
.bk_stories__box__actions__prev {
top: calc(50% - 16px);
text-align: center;
border-radius: 50%;
background-color: #fff;
overflow: hidden;
opacity: .85;
transition: opacity .25s
}
.bk_stories__box__actions__next::before,
.bk_stories__box__actions__prev::before {
content: "";
display: block;
position: absolute;
top: 10px;
width: 12px;
height: 12px;
border-right: 4px solid #555;
border-bottom: 4px solid #555
}
.bk_stories__box__actions__prev {
right: calc(50% - 35vh - 80px)
}
.bk_stories__box__actions__prev::before {
left: 8px;
transform: rotate(-45deg)
}
.bk_stories__box__actions__next {
left: calc(50% - 35vh - 80px)
}
.bk_stories__box__actions__next::before {
right: 8px;
transform: rotate(-225deg)
}
.bk_stories__box__actions__close {
top: 50px;
left: calc(34% - 120px)
}
.bk_stories__box__actions__close::after,
.bk_stories__box__actions__close::before {
content: "";
position: absolute;
top: 0;
left: 15px;
width: 2px;
height: 25px;
background-color: #fff
}
.bk_stories__box__actions__close::before {
transform: rotate(45deg)
}
.bk_stories__box__actions__close::after {
transform: rotate(-45deg)
}
.bk_stories__box__actions__mute,
.bk_stories__box__actions__playing {
display: none;
position: absolute;
top: 39px;
width: 48px;
height: 48px;
cursor: pointer;
pointer-events: auto;
user-select: none;
z-index: 5
}
.bk_stories__box__actions__mute {
left: calc(38% - 120px); /* ایکون پیشفرض: صدا باز (unmute) */
background-image: url('data:image/svg+xml;charset=utf-8,');
}
.bk_stories__box__actions__mute.unmute {
/* وقتی کلاس unmute اضافه میشه: ایکون میوت (صدا خاموش) */
background-image: url('data:image/svg+xml;charset=utf-8,