Your IP : 18.117.7.254
.ui-counter-panel__scope {
--color-background: rgba(82,92,105,.08);
--color-hover: rgba(82,92,105,.1);
--color-active: rgba(var(--ui-color-primary-rgb), .57);
--color-active-hover: var(--ui-color-base-02);
--color-text: var(--ui-color-base-90);
--color-text-active: var(--ui-color-base-90);
--color-separator: rgba(var(--ui-color-palette-beige-base-rgb), .15);
--border-radius-xl: 24px;
--border-radius-sm: 2px;
}
.bitrix24-light-theme .ui-counter-panel__scope {
--color-background: rgba(var(--ui-color-on-primary-rgb), .15);
--color-hover: rgba(var(--ui-color-on-primary-rgb), .15);
--color-text: rgba(var(--ui-color-on-primary-rgb), .8);
--color-text-active: rgba(var(--ui-color-on-primary-rgb), 1);
--color-separator: rgba(var(--ui-color-palette-beige-base-rgb), .15);
}
.ui-counter-panel {
display: inline-flex;
align-items: center;
overflow: hidden;
background: var(--color-background);
border-radius: var(--border-radius-xl);
font: 14px/normal var(--ui-font-family-secondary);
font-weight: var(--ui-font-weight-regular, 400);
}
.ui-counter-panel__item-separator {
display: block;
width: 1px;
height: 15px;
margin: 0 2px;
background: var(--color-separator);
}
.ui-counter-panel__item-separator.--invisible {
margin: 0;
background: transparent;
}
.ui-counter-panel__item-separator:last-child {
display: none;
}
.ui-counter-panel__item {
display: inline-flex;
align-items: center;
overflow: hidden;
padding: 0 20px 0 5px;
position: relative;
min-height: 33px;
border-radius: var(--border-radius-sm);
cursor: pointer;
color: var(--color-text);
transition: .2s;
}
.ui-counter-panel__item.--string {
padding-left: 15px;
}
.ui-counter-panel__item.--title {
padding-right: 8px;
pointer-events: none;
}
.ui-counter-panel__item.--active {
color: var(--color-text-active);
}
.ui-counter-panel__item:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
border-radius: var(--border-radius-sm);
background: transparent;
pointer-events: none;
transform: translateX(-7px);
transition: .2s;
}
.ui-counter-panel__item:first-child {
padding-left: 11px;
border-top-left-radius: var(--border-radius-xl);
border-bottom-left-radius: var(--border-radius-xl);
}
.ui-counter-panel__item.--string:first-child {
padding-left: 16px;
}
.ui-counter-panel__item:last-child {
padding-right: 20px;
border-top-right-radius: var(--border-radius-xl);
border-bottom-right-radius: var(--border-radius-xl);
}
.ui-counter-panel__item:last-child:after {
transform: translateX(0);
}
.ui-counter-panel__item.--hover:after {
background: var(--color-hover);
transition: .1s;
}
.ui-counter-panel__item.--dropdown.--hover:not(.--active):after {
background: transparent;
}
.ui-counter-panel__item.--active:after {
background: var(--color-active);
transform: translateX(0);
}
.ui-counter-panel__item.--dropdown:after {
/*content: none;*/
width: calc(100% - 30px);
}
.ui-counter-panel__item.--locked,
.ui-counter-panel__item.--restricted {
pointer-events: none;
opacity: .5;
}
.ui-counter-panel__item.--pointer-events-none {
pointer-events: none;
}
.ui-counter-panel__item-value {
display: inline-flex;
align-items: center;
margin: auto 6px auto 7px;
z-index: 1;
}
.ui-counter-panel__item-lock {
display: block;
width: 12px;
height: 16px;
content: '';
background: url(../images/ui-counter-panel__icon-lock.svg) center no-repeat;
margin-right: 5px;
}
.ui-counter-panel__item-title + .ui-counter-panel__item-value {
margin-right: 0;
}
.ui-counter-panel__item-title {
display: inline-flex;
align-items: center;
margin-bottom: 1px;
overflow: hidden;
white-space: nowrap;
z-index: 1;
}
.ui-counter-panel__item-title:first-child {
padding-left: 5px;
}
.ui-counter-panel__item.--string .ui-counter-panel__item-title {
padding-left: 0;
}
.ui-counter-panel__item-cross {
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: inline-flex;
justify-content: center;
align-items: center;
width: 20px;
z-index: 1;
cursor: pointer;
opacity: 0;
transform: translateX(-5px);
transition: .1s;
}
/*for item "more"*/
.ui-counter-panel__item.--dropdown .ui-counter-panel__item-cross {
position: relative;
width: 0;
transition: .4s;
}
.ui-counter-panel__item.--dropdown.--active .ui-counter-panel__item-cross {
width: 20px;
transition: .2s;
}
.ui-counter-panel__item.--dropdown {
padding-right: 15px;
}
/*for item "more" end*/
.ui-counter-panel__item:last-child .ui-counter-panel__item-cross {
width: 22px;
justify-content: flex-start;
}
.ui-counter-panel__item-cross i {
display: block;
width: 8px;
height: 7px;
background: url(../images/ui-counter-panel__icon-cross-dark.svg) center no-repeat;
pointer-events: none;
}
.bitrix24-light-theme .ui-counter-panel__item-cross i {
background-image: url(../images/ui-counter-panel__icon-cross.svg);
}
.ui-counter-panel__item:last-child .ui-counter-panel__item-cross i {
margin-left: 5px;
}
.ui-counter-panel__item.--active .ui-counter-panel__item-cross {
opacity: .5;
transform: translateX(0);
transition: .2s;
pointer-events: auto;
}
.ui-counter-panel__item.--active .ui-counter-panel__item-cross:hover {
opacity: .8;
transition: .05s;
}
.ui-counter-panel__item-head {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
overflow: hidden;
white-space: normal;
padding-left: 20px;
opacity: 1;
transition: .2s;
}
.ui-counter-panel__item-dropdown {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 6px;
width: 10px;
opacity: .7;
z-index: 2;
}
.ui-counter-panel__item-dropdown i {
display: inline-block;
width: 10px;
height: 6px;
background: url(../images/ui-counter-panel__icon-dropdown-dark.svg) center no-repeat;
}
.bitrix24-light-theme .ui-counter-panel__item-dropdown i {
background-image: url(../images/ui-counter-panel__icon-dropdown.svg);
}
.ui-counter-panel__item.--hover .ui-counter-panel__item-dropdown,
.ui-counter-panel__item.--active .ui-counter-panel__item-dropdown,
.ui-counter-panel__item:hover .ui-counter-panel__item-dropdown {
opacity: .9;
}
.ui-counter-panel__popup-item {
user-select: none;
}
/*update*/
.ui-counter-panel__popup .menu-popup {
padding: 10px;
}
.ui-counter-panel__popup-item {
margin: 0 0 2px 0;
padding: 0;
}
.ui-counter-panel__popup-item:last-child {
margin-bottom: unset;
}
.ui-counter-panel__popup-item .menu-popup-item-text {
padding: 0;
}
.ui-counter-panel__popup-item .menu-popup-item-text > span {
display: flex;
padding-left: 15px;
}
.ui-counter-panel__popup-item:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: var(--border-radius-sm);
background: transparent;
z-index: -1;
}
.ui-counter-panel__popup-item:hover:before {
background: var(--color-active-hover);
}
.ui-counter-panel__popup-item.--active:hover:before,
.ui-counter-panel__popup-item.--active:before {
background: var(--color-active);
}
.ui-counter-panel__popup-item:hover {
background-color: unset;
}
.ui-counter-panel__popup-item.--active .menu-popup-item-text {
color: #3b434f;
}
.ui-counter-panel__popup-item .ui-counter-panel__item-cross {
position: relative;
margin-left: auto;
opacity: 1;
pointer-events: auto;
}
.ui-counter-panel__popup-item .ui-counter-panel__item-value {
margin-right: unset;
}
.ui-counter-panel__popup-item .ui-counter-panel__item-cross {
width: 24px;
margin-right: 6px;
transform: none;
opacity: 0;
transition: .25s;
pointer-events: none;
}
.ui-counter-panel__popup-item.--active .ui-counter-panel__item-cross {
opacity: .6;
pointer-events: auto;
}
.ui-counter-panel__popup-item:(.--active):hover .ui-counter-panel__item-cross {
transition: unset;
opacity: .75;
}
.ui-counter-panel__popup-item .ui-counter-panel__item-cross:hover {
transition: unset;
opacity: .9;
}
.ui-counter-panel__popup-item .ui-counter-panel__item-cross i {
background-image: url(../images/ui-counter-panel__icon-cross-blue.svg);
}