| Current Path : /var/www/element/data/www/revenuestory.ru/bitrix/js/main/popup/src/css/ |
| Current File : /var/www/element/data/www/revenuestory.ru/bitrix/js/main/popup/src/css/popup.css |
.popup-window {
background-color: #fff;
box-shadow: 0 7px 21px rgba(83, 92, 105, .12), 0 -1px 6px 0 rgba(83, 92, 105, .06);
padding: 10px;
font: 13px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: stretch;
border-radius: var(--popup-window-border-radius);
will-change: opacity;
}
.popup-window-disable-scroll {
overflow: hidden;
}
.popup-window.--fixed {
position: fixed !important;
}
/* A super hack for legacy code which directly reads and writes popupContainer.style.display */
.popup-window[style*="block"] {
display: flex !important;
}
.popup-window.popup-window-with-titlebar {
padding: 0 10px 10px;
}
.popup-window-delimiter {
background-color: #f0f1f2;
display: block;
height: 1px;
line-height: 1px;
}
.popup-window-delimiter-section {
display: flex;
margin: 5px 0 8px 0;
text-align: center;
}
.popup-window-delimiter-section:before,
.popup-window-delimiter-section:after {
display: block;
content: "";
flex: 1;
min-width: 15px;
position: relative;
top: 8px;
height: 1px;
background-color: #f0f1f2;
}
.popup-window-delimiter-text {
position: relative;
top: 2px;
padding: 0 12px;
background: #fff;
color: #b1b6bc;
font-size: 10px;
font-weight: var(--ui-font-weight-bold);
text-transform: uppercase;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
text-align: center;
box-sizing: border-box;
}
.popup-window-buttons {
text-align: center;
padding: 20px 0 10px;
position: relative;
}
.popup-window-button {
display: inline-block;
height: 39px;
line-height: 39px;
margin: 0 12px 0 0;
background: #ecedef;
border-radius: var(--popup-window-button-border-radius, 2px);
cursor: pointer;
color: #7a818a;
font-family: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-bold, 700);
font-size: 12px;
outline: none;
padding: 0 18px;
vertical-align: middle;
text-decoration: none;
text-transform: uppercase;
text-shadow: none;
white-space: nowrap;
-webkit-box-shadow: 0 0 0 1px #c6cdd3 inset;
box-shadow: 0 0 0 1px #c6cdd3 inset;
-webkit-font-smoothing: antialiased;
-webkit-transition: background-color 0.2s linear, color 0.2s linear;
transition: background-color 0.2s linear, color 0.2s linear;
}
.popup-window-button:before,
.popup-window-button:after {
display: none;
}
.popup-window-button:hover {
background: #cfd4d8;
color: #535c69;
}
.popup-window-button:last-child {
margin-right: 0;
}
.popup-window-button-accept,
.popup-window-button-create {
background: #bbed21;
-webkit-box-shadow: none;
box-shadow: none;
color: #535c69;
}
.popup-window-button-accept:hover,
.popup-window-button-create:hover {
background: #d2f95f;
color: #535c69;
}
.popup-window-button-wait {
color: transparent !important;
position: relative;
}
.popup-window-button-wait .popup-window-button-text {
opacity: 0;
}
.popup-window-button-wait:before {
background: none !important;
box-shadow: inset 0 0 0 1px #fff;
border-radius: 50%;
color: #fff;
display: block !important;
content: '_' !important;
font-size: 10px;
font-family: var(--ui-font-family-primary, var(--ui-font-family-helvetica));
line-height: 10px;
height: 21px;
top: 10px;
left: 50%;
margin: 0 0 0 -11px;
padding-right: 6px;
position: absolute;
text-align: right;
width: 15px;
}
.popup-window-button-wait:after {
background: #fff !important;
content: ' ' !important;
display: block !important;
height: 7px;
position: absolute;
top: 13px;
left: 50%;
padding: 0;
width: 1px;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
animation: popup-window-button-animation 1s infinite linear;
}
.popup-window-button-create.popup-window-button-wait:before,
.popup-window-button-accept.popup-window-button-wait:before {
color: #535c69;
-webkit-box-shadow: inset 0 0 0 1px #535c69;
box-shadow: inset 0 0 0 1px #535c69;
}
.popup-window-button-create.popup-window-button-wait:after,
.popup-window-button-accept.popup-window-button-wait:after {
background: #535c69 !important;
}
@keyframes popup-window-button-animation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.popup-window-button-decline {
background: #f1361b;
color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
}
.popup-window-button-decline:hover {
background: #cc1a00;
color: #fff;
}
.popup-window-button-cancel {
font-weight: normal;
}
.popup-window-button-blue {
background-color: #3bc8f5;
box-shadow: none;
color: #fff;
}
.popup-window-button-blue:hover {
background-color: #3fddff;
color: #fff;
}
.popup-window-button-blue:active {
background-color: #13b1e3;
color: #fff;
}
.popup-window-button-link,
.popup-window-button-link-cancel,
.popup-window-button-link:hover,
.popup-window-button-link:active {
background: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.popup-window-button-link {
border-bottom: 1px solid #c0c2c5;
border-radius: 0;
color: #535c69;
cursor: pointer;
height: 17px;
line-height: 17px;
-webkit-transition: border-bottom-color 0.15s linear;
transition: border-bottom-color 0.15s linear;
padding: 0;
}
.popup-window-button-link:hover,
.popup-window-button-link:active {
border-bottom-color: #535c69;
color: #535c69;
line-height: 17px;
height: 17px;
}
.popup-window-button-link-cancel {
color: #f1361b;
border-bottom-color: #ffb4a9;
}
.popup-window-button.popup-window-button-link-cancel:hover,
.popup-window-button.popup-window-button-link-cancel:active {
border-bottom-color: #f1361b;
color: #f1361b;
}
.popup-window-button-disable {
cursor: default;
opacity: 0.3;
}
.popup-window-titlebar {
height: 49px;
}
.popup-window-titlebar-text,
.popup-window-titlebar-text-version {
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #80868e;
display: inline-block;
font-size: 14px;
font-weight: var(--ui-font-weight-bold);
max-width: 100%;
line-height: 49px;
overflow: hidden;
padding: 0 30px 0 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
.popup-window-titlebar-text-version {
font-weight: normal;
font-size: 13px;
padding-left: 0;
}
.popup-window-content {
box-sizing: border-box;
flex: 1;
border-radius: var(--popup-window-content-border-radius);
scrollbar-width: thin;
scrollbar-color: var(--popup-window-scrollbar-thumb-background, rgba(82, 92, 105, 0.2));
}
.popup-window-content::-webkit-scrollbar {
width: 12px;
}
.popup-window-content::-webkit-scrollbar-track {
background-color: var(--popup-window-scrollbar-track-background, rgba(82, 92, 105, 0.05));
margin: 8px 0;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
background-clip: content-box;
}
.popup-window-content::-webkit-scrollbar-thumb {
background-color: var(--popup-window-scrollbar-thumb-background, rgba(82, 92, 105, 0.2));
margin: 8px 0;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
background-clip: content-box;
}
.popup-window-content::-webkit-scrollbar-thumb:hover {
background-color: var(--popup-window-scrollbar-thumb-hover-background, rgba(82, 92, 105, 0.5));
}
.popup-window-with-titlebar .popup-window-content,
.popup-window-content-gray .popup-window-content {
background-color: #eef2f4;
}
.popup-window-content-white .popup-window-content {
background-color: #fff;
}
.popup-window-with-titlebar .popup-window-content {
padding: 20px;
}
.popup-window-close-icon {
cursor: pointer;
height: 27px;
outline: none;
opacity: 0.5;
position: absolute;
right: 0;
top: 0;
width: 27px;
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.popup-window-close-icon:after {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 10px;
height: 10px;
background-image: url(images/close-icon.svg);
background-repeat: no-repeat;
background-size: cover;
content: "";
}
.popup-window-titlebar-close-icon {
top: 12px;
right: 10px;
}
.popup-window-close-icon:hover {
opacity: 1;
}
.popup-window-angly {
display: none;
height: 22px;
position: absolute;
overflow: hidden;
width: 33px;
pointer-events: none;
}
.popup-window-angly--arrow {
background-color: #fff;
-webkit-box-shadow: 0 0 21px rgba(83, 92, 105, .13);
box-shadow: 0 0 21px rgba(83, 92, 105, .13);
content: '';
height: 15px;
position: absolute;
left: 9px;
top: 16px;
transform: rotate(45deg);
transform-origin: 50% 50%;
width: 15px;
}
.popup-window-angly-top {
display: block;
left: 10px;
margin: 0;
top: -22px;
}
.popup-window-angly-top .popup-window-angly--arrow { }
.popup-window-angly-right {
display: block;
right: -17px;
top: 10px;
height: 30px;
width: 17px;
}
.popup-window-angly-right .popup-window-angly--arrow {
left: -9px;
top: 8px;
}
.popup-window-angly-bottom {
bottom: -20px;
display: block;
height: 20px;
margin-left: 10px;
}
.popup-window-angly-bottom .popup-window-angly--arrow {
top: -9px;
}
.popup-window-angly-left {
display: block;
left: -14px;
top: 10px;
height: 30px;
width: 14px;
}
.popup-window-angly-left .popup-window-angly--arrow {
left: 8px;
top: 8px;
}
.popup-window-overlay {
position: absolute;
top: 0;
left: 0;
display: none;
background: #333;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
.popup-window-resize {
opacity: 0;
transition: opacity .3s;
position: absolute;
right: 2px;
bottom: 2px;
width: 12px;
height: 12px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAADBJREFUGBljYMADLl269B+PNESKNopwmoosgcxGcSeyBDKbKEUoGpA5uNgoplKNAwBv1DPc646T+wAAAABJRU5ErkJggg==");
background-repeat: no-repeat;
background-position: center;
cursor: nwse-resize;
}
.popup-window:hover .popup-window-resize {
opacity: 1;
}
/* Menu Popup */
.menu-popup {
padding: 8px 0;
}
.menu-popup-title {
margin: 0 0 7px 0;
padding: 0 0 0 4px;
color: #4c4c4c;
white-space: nowrap;
font: normal normal normal 12px/normal var(--ui-font-family-primary, var(--ui-font-family-helvetica));
}
.menu-popup .menu-popup-item {
background-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
height: 36px;
position: relative;
text-decoration: none;
outline: none;
white-space: nowrap;
}
/* A super hack for legacy code which directly reads and writes menu-popup-item.style.display */
.menu-popup .menu-popup-item[style*="block"] {
display: flex !important;
}
.menu-popup .menu-popup-item-disabled {
pointer-events: none;
opacity: 0.4;
cursor: default;
}
.menu-popup .menu-popup-item-disabled .main-ui-loader-svg-circle {
stroke: #4a4e53;
stroke-width: 3;
}
.menu-popup-item-icon {
display: inline-block;
height: 16px;
margin-left: 15px;
vertical-align: middle;
width: 19px;
}
.menu-popup-item-text {
display: inline-block;
flex: 1;
font-family: var(--ui-font-family-primary, var(--ui-font-family-helvetica));
color: #525c68;
line-height: 36px;
padding: 0 15px 0 9px;
text-decoration: none;
vertical-align: middle;
-webkit-transition: color 0.2s linear;
transition: color 0.2s linear;
}
/* A temporary hack for the custom menu separators */
.menu-popup .menu-popup-items .main-buttons-submenu-item.main-buttons-submenu-separator.main-buttons-hidden-label .menu-popup-item-text span {
top: -10px !important;
}
.menu-popup-item-text .tariff-lock {
margin: 0 5px 2px 5px;
vertical-align: middle;
}
.popup-window-fixed-width .menu-popup-item-text {
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
box-sizing: border-box;
}
.menu-popup-no-icon .menu-popup-item-text {
padding: 0 15px;
}
.menu-popup-item-submenu .menu-popup-item-text {
padding-right: 28px;
}
.menu-popup-item:hover,
.menu-popup-item.menu-popup-item-open {
background-color: #f5f5f6;
}
.menu-popup-item:hover .menu-popup-item-text {
color: #3b434f;
}
.menu-popup-item.menu-popup-item-disabled:hover {
background: initial;
}
.menu-popup-item-submenu:after {
position: absolute;
right: 11px;
top: 50%;
margin-top: -4px;
width: 6px;
height: 9px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0tLjAxIDEuMTg3bDIuOTIyIDIuOTItMi45MiAyLjkyMyAxLjE3MyAxLjE3MyAyLjkyLTIuOTJMNS4yNiA0LjEwNyAxLjE2NC4wMTMiIGZpbGw9IiNBOEFCQjIiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==);
background-size: cover;
content: "";
}
.bx-admin-submenu-opened { background: #f0f0f0 !important; -webkit-border-radius: 3px; border-radius: 3px; }
.menu-popup-no-icon .menu-popup-item-icon { display: none; }
.menu-popup-item-view .menu-popup-item-icon {
background: transparent url(images/view.svg) no-repeat;
}
.menu-popup-item-edit .menu-popup-item-icon {
background: transparent url(images/edit.svg) no-repeat;
}
.menu-popup-item-create .menu-popup-item-icon {
background: transparent url(images/create.svg) no-repeat;
}
.menu-popup-item-create-quick .menu-popup-item-icon {
background: transparent url(images/create-quick.svg) no-repeat;
}
.menu-popup-item-take .menu-popup-item-icon {
background: transparent url(images/accept.svg) no-repeat;
}
.menu-popup-item-begin .menu-popup-item-icon {
background: transparent url(images/begin.svg) no-repeat;
}
.menu-popup-item-decline .menu-popup-item-icon {
background: transparent url(images/decline.svg) no-repeat;
}
.menu-popup-item-reopen .menu-popup-item-icon {
background: transparent url(images/reopen.svg) no-repeat;
}
.menu-popup-item-complete .menu-popup-item-icon {
background: transparent url(images/complete.svg) no-repeat;
}
.menu-popup-item-hold .menu-popup-item-icon {
background: transparent url(images/hold.svg) no-repeat;
}
.menu-popup-item-accept .menu-popup-item-icon {
background: transparent url(images/accept.svg) no-repeat;
}
.menu-popup-item-remake .menu-popup-item-icon {
background: transparent url(images/remake.svg) no-repeat;
}
.menu-popup-item-delete .menu-popup-item-icon {
background: transparent url(images/delete.svg) no-repeat;
}
.menu-popup-item-copy .menu-popup-item-icon {
background: transparent url(images/copy.svg) no-repeat;
}
.menu-popup-item-delegate .menu-popup-item-icon {
background: transparent url(images/delegate.svg) no-repeat;
}
.menu-popup-item-add-to-tm .menu-popup-item-icon {
background: transparent url(images/add-to-tm.svg) no-repeat;
}
.menu-popup-item-accept-sm .menu-popup-item-icon {
background: transparent url(images/accept-sm.svg) no-repeat;
}
.popup-window-button-left,
.popup-window-button-right {
display: none;
}
/* ========Popup Window Darken==========*/
.popup-window-dark {
background-color: rgba(0, 0, 0, 0.8);
border-radius: var(--popup-window-border-radius, 4px);
box-shadow: 0 19px 24px rgba(88, 112, 118, 0.17);
}
.popup-window-dark .popup-window-content {
background-color: transparent;
color: #fff;
margin: 0;
}
.popup-window-dark .popup-window-angly--arrow {
background-color: rgba(0, 0, 0, 0.8);
}
.popup-window-dark .popup-window-titlebar-text {
color: #fff;
}
.popup-window-dark .popup-window-close-icon:after {
background-image: url(images/close-icon-dark.svg);
}
/*===========TABS==========*/
.popup-window-tabs-box {
padding: 10px 0 4px;
}
.popup-window-tabs {
position: relative;
padding: 0 20px 0 0;
margin: 0;
height: 42px;
font-size: 0;
z-index: 1;
}
.popup-window-tab {
display: inline-block;
height: 42px;
margin: 0 7px 0 0;
padding: 0 12px;
border: none;
vertical-align: top;
font-size: 14px;
font-weight: var(--ui-font-weight-bold);
font-family: var(--ui-font-family-primary, var(--ui-font-family-helvetica));
line-height: 41px;
color: #535c69;
background-color: #ecf2f3;
text-shadow: none;
cursor: pointer;
-webkit-transition: background-color 0.15s linear;
transition: background-color 0.15s linear;
}
.popup-window-tab:hover {
background-color: #f7f9f9;
}
.popup-window-tab-selected {
position: relative;
z-index: 2;
padding: 0 11px;
background-color: #fff !important;
line-height: 40px;
border-radius: 2px 2px 0 0;
border: 1px solid #c6cdd3;
border-bottom: none;
cursor: default;
}
.popup-window-tabs-content {
margin: 0;
padding: 10px;
border: 1px solid #c6cdd3;
border-radius: 0 3px 3px;
}
.popup-window-tab-content {
display: none;
padding: 20px;
background: #eef2f4;
}
.popup-window-tabs-content-white .popup-window-tab-content {
padding: 10px;
background: #fff;
}
.popup-window-tab-content-selected {
display: block;
}
.popup-window-show-animation-opacity {
animation: popupWindowShowAnimationOpacity 100ms;
animation-fill-mode: both;
}
@keyframes popupWindowShowAnimationOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.popup-window-show-animation-opacity-transform {
animation: popupWindowShowAnimationOpacityTransform 100ms;
animation-fill-mode: both;
}
@keyframes popupWindowShowAnimationOpacityTransform {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 5px, 0);
-moz-transform: translate3d(0, 5px, 0);
-ms-transform: translate3d(0, 5px, 0);
-o-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0px, 0);
-moz-transform: translate3d(0, 0px, 0);
-ms-transform: translate3d(0, 0px, 0);
-o-transform: translate3d(0, 0px, 0);
transform: translate3d(0, 0px, 0);
}
}
.popup-window-close-animation-opacity {
animation: popupWindowCloseAnimationOpacity 150ms;
animation-fill-mode: both;
}
@keyframes popupWindowCloseAnimationOpacity {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.popup-window-close-animation-opacity-transform {
animation: popupWindowCloseAnimationOpacity 150ms;
animation-fill-mode: both;
}
@keyframes popupWindowCloseAnimationOpacityTransform {
0% {
opacity: 1;
-webkit-transform: translate3d(0, 0px, 0);
-moz-transform: translate3d(0, 0px, 0);
-ms-transform: translate3d(0, 0px, 0);
-o-transform: translate3d(0, 0px, 0);
transform: translate3d(0, 0px, 0);
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, 25px, 0);
-moz-transform: translate3d(0, 25px, 0);
-ms-transform: translate3d(0, 25px, 0);
-o-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
}
.popup-window-show-animation-scale {
animation: popup-window-show-animation-scale 400ms;
animation-fill-mode: both;
}
@keyframes popup-window-show-animation-scale {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}