%PDF-
%PDF-
Mini Shell
Mini Shell
/*region Variables*/
:root {
--ui-icon-size-xs: 26px;
--ui-icon-size-sm: 31px;
--ui-icon-size-md: 39px;
--ui-icon-size-lg: 47px;
}
/*endregion*/
.ui-icon {
position: relative;
display: inline-block;
width: var(--ui-icon-size-md);
}
.ui-icon > i {
position: relative;
display: block;
padding-top: 100%;
width: 100%;
border-radius: 50%;
background-color: #ebeff2;
background-position: center;
background-size: 100% auto;
background-repeat: no-repeat;
}
.ui-icon-square > i,
.ui-icon[class*=ui-icon-file-] > i { border-radius: 1px !important; }
button.ui-icon,
.ui-icon-btn {
padding: 0;
outline: none;
border: none;
background: transparent;
text-decoration: none;
cursor: pointer;
}
button.ui-icon > i,
.ui-icon-btn > i { transition: 250ms linear opacity; }
button.ui-icon > i:hover,
.ui-icon-btn > i:hover { opacity: .85; }
button.ui-icon > i:active,
.ui-icon-btn > i:active { opacity: 1; }
/*region Size*/
.ui-icon-xs { width: var(--ui-icon-size-xs); }
.ui-icon-sm { width: var(--ui-icon-size-sm); }
.ui-icon-md { width: var(--ui-icon-size-md); }
.ui-icon-lg { width: var(--ui-icon-size-lg); }
/* region Fix for IE*/
.bx-ie .ui-icon,
.bx-ie .ui-icon-md { width: 39px; }
.bx-ie .ui-icon-xs { width: 26px; }
.bx-ie .ui-icon-sm { width: 32px; }
.bx-ie .ui-icon-lg { width: 47px; }
/*endregion*/
/*endregion*/
/*region File icons*/
.ui-icon[class*=ui-icon-file-] > i {
background: url(/bitrix/js/ui/icons/images/sprite-files.min.svg?v1.2) no-repeat center;
background-size: 100% auto;
--icon-file-col: 14;
}
/**/
.ui-icon.ui-icon-file-empty > i { background-position: 0 calc(100% / var(--icon-file-col) * 0) }
.ui-icon.ui-icon-file-txt > i { background-position: 0 calc(100% / var(--icon-file-col) * 1) }
.ui-icon.ui-icon-file-doc > i { background-position: 0 calc(100% / var(--icon-file-col) * 2) }
.ui-icon.ui-icon-file-xls > i { background-position: 0 calc(100% / var(--icon-file-col) * 3) }
.ui-icon.ui-icon-file-php > i { background-position: 0 calc(100% / var(--icon-file-col) * 4) }
.ui-icon.ui-icon-file-pdf > i { background-position: 0 calc(100% / var(--icon-file-col) * 5) }
.ui-icon.ui-icon-file-ppt > i { background-position: 0 calc(100% / var(--icon-file-col) * 6) }
.ui-icon.ui-icon-file-rar > i { background-position: 0 calc(100% / var(--icon-file-col) * 7) }
.ui-icon.ui-icon-file-zip > i { background-position: 0 calc(100% / var(--icon-file-col) * 8) }
.ui-icon.ui-icon-file-set > i { background-position: 0 calc(100% / var(--icon-file-col) * 9) }
.ui-icon.ui-icon-file-mov > i { background-position: 0 calc(100% / var(--icon-file-col) * 10) }
.ui-icon.ui-icon-file-img > i { background-position: 0 calc(100% / var(--icon-file-col) * 11) }
.ui-icon.ui-icon-file-folder > i { background-position: 0 calc(100% / var(--icon-file-col) * 12) }
.ui-icon.ui-icon-file-folder-shared > i { background-position: 0 calc(100% / var(--icon-file-col) * 13) }
.ui-icon.ui-icon-file-folder-shared-2 > i { background-position: 0 calc(100% / var(--icon-file-col) * 14) }
/*region Fix for IE*/
.bx-ie .ui-icon-file,
.bx-ie .ui-icon-file-empty > i { background-position: 0 0 }
.bx-ie .ui-icon-file-txt > i { background-position: 0 7.14% }
.bx-ie .ui-icon-file-doc > i { background-position: 0 14.28% }
.bx-ie .ui-icon-file-xls > i { background-position: 0 21.42% }
.bx-ie .ui-icon-file-php > i { background-position: 0 28.58% }
.bx-ie .ui-icon-file-pdf > i { background-position: 0 35.72% }
.bx-ie .ui-icon-file-ppt > i { background-position: 0 42.86% }
.bx-ie .ui-icon-file-rar > i { background-position: 0 50% }
.bx-ie .ui-icon-file-zip > i { background-position: 0 57.14% }
.bx-ie .ui-icon-file-set > i { background-position: 0 64.28% }
.bx-ie .ui-icon-file-mov > i { background-position: 0 71.42% }
.bx-ie .ui-icon-file-img > i { background-position: 0 78.58% }
.bx-ie .ui-icon-file-folder > i { background-position: 0 85.72% }
.bx-ie .ui-icon-file-folder-shared > i { background-position: 0 92.86% }
.bx-ie .ui-icon-file-folder-shared-2 > i { background-position: 0 100% }
/*endregion*/
/*endregion*/
/*region Common icons*/
.ui-icon[class*=ui-icon-common-] > i { background-color: #7b8691; }
.ui-icon-common-user > i { background-image: url(/bitrix/js/ui/icons/images/common/ui-user.svg); }
.ui-icon-common-phone > i { background-image: url(/bitrix/js/ui/icons/images/common/ui-call.svg); }
.ui-icon-common-notification > i { background-image: url(/bitrix/js/ui/icons/images/common/ui-notification.svg); }
.ui-icon-common-user-group > i { background-image: url(/bitrix/js/ui/icons/images/common/ui-user-group.svg); }
.ui-icon-common-company > i { background-image: url(/bitrix/js/ui/icons/images/common/ui-user-company.svg); }
.ui-icon-common-bitrix24 > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-bitrix24.svg); }
.ui-icon-common-cloud > i { background-image: url(/bitrix/js/ui/icons/images/common/ui-cloud.svg); }
.ui-icon-common-folder > i { background-image: url(/bitrix/js/ui/icons/images/common/ui-folder.svg); }
.ui-icon-common-info > i { background-image: url(/bitrix/js/ui/icons/images/common/ui-info.svg); }
/*endregion*/
/*region Service icons*/
.ui-icon-service-bitrix24 > i {
background-color: #3ac8f5;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-bitrix24.svg);
}
.ui-icon-service-instagram > i {
background-color: #d56c9a;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-instagram.svg);
}
.ui-icon-service-fb-instagram > i {
background-color: #C529A4;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-fb-instagram.svg);
}
.ui-icon-service-vk > i {
background-color: #3871ba;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-vk.svg);
}
.ui-icon-service-livechat > i {
background-color: #ffa900;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-livechat.svg);
}
.ui-icon-service-skype > i {
background-color: #02aff0;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-skype.svg);
}
.ui-icon-service-fb > i {
background-color: #38659f;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-fb.svg);
}
.ui-icon-service-fb-comments > i {
background-color: #38659f;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-fb-comments.svg);
}
.ui-icon-service-fb-messenger > i {
background-color: #0183ff;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-fb-messanger.svg);
}
.ui-icon-service-viber > i {
background-color: #995aca;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-viber.svg);
}
.ui-icon-service-twilio > i {
background-color: #e42e3a;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-twilio.svg);
}
.ui-icon-service-telegram > i {
background-color: #2fc6f6;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-telegram.svg);
}
.ui-icon-service-microsoft > i {
background-color: #06afe5;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-microsoft.svg);
}
.ui-icon-service-kik > i {
background-color: #212121;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-kik.svg);
}
.ui-icon-service-slack > i {
background-color: #776ebd;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-slack.svg);
}
.ui-icon-service-groupme > i {
background-color: #1db0ed;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-groupme.svg);
}
.ui-icon-service-outlook > i {
background-color: #0071c5;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-outlook.svg);
}
.ui-icon-service-webchat > i {
background-color: #4393d0;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-webchat.svg);
}
.ui-icon-service-directline > i {
background-color: #4393d0;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-directline.svg);
}
.ui-icon-service-callback > i {
background-color: #ff5752;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-call.svg);
}
.ui-icon-service-call > i {
background-color: #54d1e1;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-call.svg);
}
.ui-icon-service-envelope > i {
background-color: #4393d0;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-envelope.svg);
}
.ui-icon-service-email > i {
background-color: #90be00;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-email.svg);
}
.ui-icon-service-webform > i {
background-color: #00b4ac;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-webform.svg);
}
.ui-icon-service-ya-dialogs > i {
background-color: #3a78db;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-ya-dialogs.svg);
}
.ui-icon-service-apple > i {
background-color: #000;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-apple.svg);
}
.ui-icon-service-imessage > i {
background-color: #54d857;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-imessage.svg);
}
.ui-icon-service-vk-adds > i {
background-color: #3871ba;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-vk-adds.svg);
}
.ui-icon-service-fb-adds > i {
background-color: #38659f;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-fb-adds.svg);
}
.ui-icon-service-vk-order > i {
background-color: #4a73a5;
background-image: url(/bitrix/js/ui/icons/images/service/ui-service-vk-order.svg);
}
/*endregion*/
/* region Light Service icons */
.ui-icon[class*=ui-icon-service-light-] > i { background-color: #ebeff2; }
.ui-icon-service-light-bitrix24 > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-bitrix24.svg); }
.ui-icon-service-light-instagram > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-instagram.svg); }
.ui-icon-service-light-fb-instagram > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-fb-instagram.svg); }
.ui-icon-service-light-vk > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-vk.svg); }
.ui-icon-service-light-livechat > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-livechat.svg); }
.ui-icon-service-light-skype > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-skype.svg); }
.ui-icon-service-light-fb > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-fb.svg); }
.ui-icon-service-light-fb-comments > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-fb-comments.svg); }
.ui-icon-service-light-fb-messenger > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-messanger.svg); }
.ui-icon-service-light-viber > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-viber.svg); }
.ui-icon-service-light-twilio > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-twilio.svg); }
.ui-icon-service-light-telegram > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-telegram.svg); }
.ui-icon-service-light-microsoft > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-microsoft.svg); }
.ui-icon-service-light-kik > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-kik.svg); }
.ui-icon-service-light-slack > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-slack.svg); }
.ui-icon-service-light-groupme > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-groupme.svg); }
.ui-icon-service-light-outlook > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-outlook.svg); }
.ui-icon-service-light-webchat > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-webchat.svg); }
.ui-icon-service-light-directline > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-directline.svg); }
.ui-icon-service-light-callback > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-call.svg); }
.ui-icon-service-light-call > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-call.svg); }
.ui-icon-service-light-email > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-email.svg); }
.ui-icon-service-light-envelope > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-envelope.svg); }
.ui-icon-service-light-webform > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-webform.svg); }
.ui-icon-service-light-ya-dialogs > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-ya-dialogs.svg); }
.ui-icon-service-light-apple > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-apple.svg); }
.ui-icon-service-light-imessage > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-imessage.svg); }
.ui-icon-service-light-vk-order > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-vk-order.svg); }
/*endregion*/
Zerion Mini Shell 1.0