Your IP : 3.15.182.100
:root {
/*size*/
--ui-counter-current-size: 16px;
--ui-counter-size-sm: 13px;
--ui-counter-size-md: 16px;
--ui-counter-size-lg: 19px;
--ui-counter-font-size: 11px;
--ui-counter-font-weight: var(--ui-font-weight-bold);
/*color*/
--ui-counter-current-bg-color: #f54819;
--ui-counter-bg-color-gray: #a8adb4;
--ui-counter-bg-color-success: #9dcf00;
--ui-counter-bg-color-primary: #2fc6f6;
--ui-counter-bg-color-danger: #f54819;
--ui-counter-bg-color-warning: #FBAF16;
--ui-counter-bg-color-light: #fff;
--ui-counter-bg-color-white: #fff;
--ui-counter-bg-color-theme: rgba(82, 92, 105, .15);
--ui-counter-bg-color-dark: rgba(255, 255, 255, .19);
/*border color*/
--ui-counter-current-border-color: transparent;
--ui-counter-border-color-light: #fff;
}
:root .bitrix24-light-theme {
--ui-counter-bg-color-theme: rgba(255, 255, 255, .3);
}
/*region Base style*/
.ui-counter {
display: inline-flex;
align-items: center;
font: var(--ui-counter-font-weight) var(--ui-counter-font-size)/var(--ui-counter-current-size) var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-regular, 400);
position: relative;
}
.ui-counter-inner {
text-align: center;
position: relative;
color: #fff;
vertical-align: middle;
min-width: calc(var(--ui-counter-current-size) + 2px);
box-sizing: border-box;
padding: 0 4px;
border-radius: calc(var(--ui-counter-current-size) / 2);
background-color: var(--ui-counter-current-bg-color);
border: 1px solid var(--ui-counter-current-border-color);
overflow: hidden;
line-height: inherit;
height: var(--ui-counter-current-size);
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.ui-counter-secondary {
position: absolute;
left: 3px;
background-color: var(--ui-counter-current-bg-color);
width: 100%;
height: 100%;
border-radius: calc(var(--ui-counter-current-size) / 2);
}
.ui-counter-secondary:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: -2px;
background: var(--ui-color-background-primary);
border-radius: calc(var(--ui-counter-current-size) / 2);
}
/*endregion*/
/*region Counter colors*/
.ui-counter-gray {
--ui-counter-current-bg-color: var(--ui-counter-bg-color-gray);
}
.ui-counter-primary {
--ui-counter-current-bg-color: var(--ui-counter-bg-color-primary);
}
.ui-counter-danger {
--ui-counter-current-bg-color: var(--ui-counter-bg-color-danger);
}
.ui-counter-success {
--ui-counter-current-bg-color: var(--ui-counter-bg-color-success);
}
.ui-counter-warning {
--ui-counter-current-bg-color: var(--ui-counter-bg-color-warning);
}
.ui-counter-light .ui-counter-inner {
box-shadow: inset 0 0 0 1px rgba(168, 173, 180, .5);
--ui-counter-current-bg-color: var(--ui-counter-bg-color-light);
}
.ui-counter-light .ui-counter-inner {
color: #535c69 !important;
}
.ui-counter-white {
--ui-counter-current-bg-color: var(--ui-counter-bg-color-white);
}
.ui-counter-white .ui-counter-inner {
color: #CBD0D3 !important;
}
.ui-counter-theme {
--ui-counter-current-bg-color: var(--ui-counter-bg-color-theme);
}
.ui-counter-theme .ui-counter-inner {
color: rgba(82, 92, 105, 1);
}
.bitrix24-light-theme .ui-counter-theme .ui-counter-inner {
color: #fff;
}
.ui-counter-dark .ui-counter-inner {
--ui-counter-current-bg-color: var(--ui-counter-bg-color-dark);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .21);
}
/*endregion*/
/*region Counter size*/
.ui-counter-sm {
--ui-counter-current-size: var(--ui-counter-size-sm);
--ui-counter-font-weight: 400;
--ui-counter-font-size: 10px;
}
.ui-counter-md {
--ui-counter-font-weight: 600;
--ui-counter-current-size: var(--ui-counter-size-md);
}
.ui-counter-lg {
--ui-counter-font-weight: 600;
--ui-counter-current-size: var(--ui-counter-size-lg);
}
/*endregion*/
/*region change value*/
.ui-counter-plus,
.ui-counter-minus {
animation-duration: 250ms;
animation-iteration-count: 1;
animation-timing-function: linear;
}
.ui-counter-plus {
animation-name: uiCounterPlus;
}
.ui-counter-minus {
animation-name: uiCounterMinus;
}
@keyframes uiCounterPlus {
0%, 100% {
top: 0;
opacity: 1;
}
33%, 77% {
opacity: 1;
}
49% {
top: var(--ui-counter-current-size);
}
50% {
opacity: 0;
}
51% {
top: calc(var(--ui-counter-current-size) * -1);
}
}
@keyframes uiCounterMinus {
0%, 100% {
top: 0;
opacity: 1;
}
45% {
top: calc(var(--ui-counter-current-size) * -1);
opacity: 1;
}
50% {
opacity: 0;
}
55% {
top: var(--ui-counter-current-size);
opacity: 1;
}
}
.ui-counter-hide,
.ui-counter-show {
animation-duration: 250ms;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: both;
}
.ui-counter-hide {
animation-name: uiCounterHide;
}
.ui-counter-show {
animation-name: uiCounterShow;
}
@keyframes uiCounterShow {
from {
opacity: 0;
top: calc(var(--ui-counter-current-size) * -1);
}
to {
top: 0;
opacity: 1;
}
}
@keyframes uiCounterHide {
from {
top: 0;
opacity: 1;
}
to {
opacity: 0;
top: calc(var(--ui-counter-current-size) * -1);
}
}
/*endregion*/
.ui-counter-border {
--ui-counter-current-border-color: var(--ui-counter-border-color-light);
}