%PDF- %PDF-
| Direktori : /home/bitrix/www/bitrix/components/bitrix/main.interface.buttons/templates/.default/ |
| Current File : //home/bitrix/www/bitrix/components/bitrix/main.interface.buttons/templates/.default/style.css |
/**
* Container styles
*/
.main-buttons {
position: relative;
overflow: hidden;
height: 68px;
box-sizing: border-box;
}
.main-buttons {
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.main-buttons-inner-container {
padding: 0 25px;
height: 60px;
}
.main-buttons-inner-container {
background: rgba(240, 240, 240, 0.44);
}
.template-bitrix24 .main-buttons-inner-container {
background: #fff;
}
/* Added on drag start event*/
.main-buttons-drag.main-buttons {}
/**
* List item styles
*/
.main-buttons-item {
position: relative;
display: inline-block;
margin: 0 50px 8px 0;
height: 60px;
line-height: 30px;
text-decoration: none;
}
.main-buttons-item:last-child {
margin: 0;
}
.main-buttons-item:after {
content: '';
display: block;
margin: -5px auto 0;
width: 0;
height: 2px;
background: 0 0;
transition: width .5s ease, background .5s ease;
}
/*.main-buttons-item:hover:after {*/
/*width: 100%;*/
/*background: rgba(84,92,106,.5);*/
/*}*/
.main-buttons-item.over {}
.main-buttons-item[data-disabled="true"] {
display: none;
}
.main-buttons-item[data-locked="true"] {}
.main-buttons-item-link {
position: relative;
display: inline-block;
height: 65px;
font: 15px/65px "OpenSans-Semibold", "Helvetica Neue", Arial, Helvetica, sans-serif;
color: #545c6a;
outline: none;
text-decoration: none;
-webkit-transition: color .3s ease;
transition: color .3s ease;
vertical-align: middle;
box-sizing: border-box;
cursor: pointer;
-khtml-user-drag: none;
-webkit-user-drag: none;
text-transform: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.main-buttons-item:focus,
.main-buttons-item:focus .main-buttons-item-link,
.main-buttons-item-link:focus {
outline: none;
}
.main-buttons-item-link:hover {
color: #545c6a;
}
.main-buttons-item.over .main-buttons-item-link {
color: #1058d0;
}
.main-buttons-item-active {
border-bottom: 2px solid #1058d0;
height: 58px!important;
}
.main-buttons-item-active .main-buttons-item-link {
color: #1058d0;
}
.main-buttons-item .main-buttons-item-icon {
display: none;
}
.main-buttons-item-more {
margin: 0;
height: 60px;
float: right;
color: #545c6a;
-webkit-transition: background .3s ease, color .3s ease;
transition: background .3s ease, color .3s ease;
}
.main-buttons-item-more:hover,
.main-buttons-item-more.active {
background: #ebf1f4;
}
.main-buttons-item-more .main-buttons-item-link {
padding: 0 15px 0 11px;
}
.main-buttons-item-more.main-buttons-item:after {
position: absolute;
top: 37px;
right: 5px;
content: "";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 3px;
border-color: #717a84 transparent transparent transparent;
-webkit-transition: border-color .3s ease;
transition: border-color .3s ease;
}
.main-buttons-item-more.main-buttons-item-more:hover:after {
border-color: #1058d0 transparent transparent transparent;
}
.main-buttons-item-more.main-buttons-item:hover:after {
width: 0;
background: none;
}
.main-buttons-item .main-buttons-item-text {
position: relative;
}
.main-buttons-item .main-buttons-item-text .main-buttons-item-text-marker {}
.main-buttons-item .main-buttons-item-counter {
position: absolute;
top: 8px;
right: -20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0 7px;
min-width: 12px;
border-radius: 30px;
background: #f54819;
font: bold 11px/16px "OpenSans-Regular", "Helvetica Neue", Arial, Helvetica, sans-serif;
color: #fff;
}
.main-buttons-item-more .main-buttons-item-counter {
right: -4px;
}
.main-buttons-item .main-buttons-item-counter:empty,
.menu-popup-item-text .main-buttons-item-counter:empty {
display: none;
}
.menu-popup-item-text .main-buttons-item-text {
margin: 0 2px 0 0;
}
.menu-popup-item-text .main-buttons-item-counter {
padding: 0 7px;
min-width: 12px;
border-radius: 30px;
background: #f54819;
font: bold 11px/15px "OpenSans-Regular", "Helvetica Neue", Arial, Helvetica, sans-serif;
color: #fff;
}
.main-buttons-item-sublink {
position: absolute;
left: 50%;
bottom: -8px;
display: none;
height: 15px;
width: 40px;
margin-left: -20px;
cursor: pointer;
z-index: 2;
}
.main-buttons-item-sublink:before {
content: '';
position: absolute;
top: 1px;
left: 50%;
height: 14px;
width: 14px;
margin-left: -8px;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%227%22%20fill%3D%22%231058D0%22/%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M8%206V3H6v3H3v2h3v3h2V8h3V6H8z%22/%3E%3C/g%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position: center;
-webkit-transition: background-image .3s;
transition: background-image .3s;
}
.main-buttons-item-sublink:hover:before {
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%227%22%20fill%3D%22%232FC7F7%22/%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M8%206V3H6v3H3v2h3v3h2V8h3V6H8z%22/%3E%3C/g%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position: center;
}
.main-buttons-item:hover .main-buttons-item-sublink {display:block;}
/*.main-buttons-item-sublink:hover {background-position: center -376px;}*/
/*.main-buttons-item-sublink:active,*/
/*.main-buttons-item-sublink {background-position: center -428px;}*/
/**
* Submenu styles
*/
.main-buttons-submenu-item {
min-width: 195px;
padding-left: 10px;
padding-right: 10px;
position: relative;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
-khtml-user-drag: element;
-webkit-user-drag: element;
text-transform: none;
}
.menu-popup-items .menu-popup-item.main-buttons-submenu-item.secret {
display: none!important;
}
.main-buttons-submenu-item.main-buttons-disabled {
opacity: .8;
}
.main-buttons-submenu-item .menu-popup-item-icon {
display: inline;
}
.main-buttons-submenu-item.noicon .menu-popup-item-icon {
display: none;
}
/**
* Dropzone styles
*/
.popup-window .menu-popup-items .menu-popup-item.main-buttons-submenu-dropzone {
display: none;
}
.popup-window .menu-popup-items .menu-popup-item.main-buttons-submenu-dropzone::before {
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.popup-window .menu-popup-items .menu-popup-item.main-buttons-submenu-dropzone::after {
position: absolute;
content: '';
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
border: 1px rgba(0,0,0,.2) dashed;
border-radius: 2px;
}
.popup-window .menu-popup-items .menu-popup-item.main-buttons-submenu-dropzone.over::after {
border: 2px rgba(0,0,0,.2) dashed;
}
.popup-window .menu-popup-items .menu-popup-item.main-buttons-submenu-dropzone .menu-popup-item-icon {
display: none;
}
.popup-window .menu-popup-items .menu-popup-item.main-buttons-submenu-dropzone .menu-popup-item-text {
height: auto;
line-height: 45px;
}
.main-buttons-drag .menu-popup-items .menu-popup-item.main-buttons-submenu-dropzone {
background: #f0f5f5;
position: relative;
display: block!important;
padding-top: 8px;
padding-bottom: 8px;
text-align: center;
margin-top: 10px;
/*margin-bottom: 10px;*/
box-shadow: none;
border: none;
height: 48px;
min-width: 140px;
}
/**
* Submenu separator styles
*/
.menu-popup .menu-popup-items .main-buttons-submenu-item.main-buttons-submenu-separator {
margin-top: 4px;
margin-bottom: 4px;
height: 0;
border-top: none;
border-bottom: 1px rgba(0,0,0,.1) solid;
}
.menu-popup .menu-popup-items .main-buttons-submenu-item.main-buttons-submenu-separator.main-buttons-hidden-label {
margin-top: 8px;
margin-bottom: 8px;
height: 0;
border-top: none;
border-bottom: 1px rgba(0,0,0,.1) solid;
z-index: 2;
}
.menu-popup .menu-popup-items .main-buttons-submenu-item.main-buttons-submenu-separator.main-buttons-hidden-label .menu-popup-item-icon {
display: none;
}
.menu-popup .menu-popup-items .main-buttons-submenu-item.main-buttons-submenu-separator:hover {
background: none;
box-shadow: none;
border-bottom: 1px rgba(0,0,0,.1) solid;
cursor: default;
}
.menu-popup .menu-popup-items .main-buttons-submenu-item.main-buttons-submenu-separator {
padding: 0;
}
.menu-popup .menu-popup-items .main-buttons-submenu-item.main-buttons-submenu-separator .menu-popup-item-text {
width: 100%;
padding-left: 0;
box-sizing: border-box;
text-align: center;
padding-right: 0;
height: 1px;
position: relative;
top: -8px;
}
.menu-popup .menu-popup-items .main-buttons-submenu-item.main-buttons-submenu-separator .menu-popup-item-text span {
position: relative;
display: inline-block;
padding: 0 12px;
border-radius: 30px;
/*background: #eef2f4;*/
background: #ffffff;
color: #b1b6bc;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
vertical-align: middle;
height: 16px;
line-height: 16px;
}
.template-bitrix24 .menu-popup .menu-popup-items .main-buttons-submenu-item.main-buttons-submenu-separator .menu-popup-item-text span {
top: -19px;
}
.menu-popup .menu-popup-items .main-buttons-submenu-item.main-buttons-submenu-separator.main-buttons-manage {
margin-top: 12px;
margin-bottom: 12px;
}
.main-buttons-item-edit-button,
.main-buttons-item-drag-button {
position: absolute;
display: inline-block;
width: 16px;
height: 18px;
right: -15px;
top: 2px;
pointer-events: none;
opacity: 0;
cursor: pointer;
-webkit-transition: opacity 200ms;
-moz-transition: opacity 200ms;
-ms-transition: opacity 200ms;
-o-transition: opacity 200ms;
transition: opacity 200ms;
}
.main-buttons-item-drag-button {
left: -15px;
top: 3px;
right: auto;
cursor: move;
}
.main-buttons-edit .main-buttons-item-edit-button,
.main-buttons-edit .main-buttons-item-drag-button {
opacity: .4;
pointer-events: all;
}
.main-buttons-edit .main-buttons-item-edit-button:hover,
.main-buttons-edit .main-buttons-item-drag-button:hover {
opacity: 1;
}
.main-buttons-item-edit-button::after,
.main-buttons-item-drag-button::after {
display: inline-block;
position: absolute;
content: '';
width: 16px;
height: 18px;
}
.main-buttons-item-edit-button::after {
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%20%7B%20fill%3A%20%23525c68%3B%20fill-rule%3A%20evenodd%3B%20%7D%3C/style%3E%3C/defs%3E%3Cpath%20id%3D%22Shape_2_copy_8%22%20data-name%3D%22Shape%202%20copy%208%22%20class%3D%22cls-1%22%20d%3D%22M.8%208.157L0%2011l2.933-.842a3.848%203.848%200%200%200-.792-1.233A3.4%203.4%200%200%200%20.8%208.157zm6.49-6.56L1.552%207.332a5.68%205.68%200%200%201%201.312.87%205.38%205.38%200%200%201%20.806%201.25c.354-.356%203.984-3.985%205.732-5.733a4.845%204.845%200%200%200-.895-1.334%203.93%203.93%200%200%200-1.22-.786zM10.567.434A1.51%201.51%200%200%200%208.406.48l-.344.343a4.164%204.164%200%200%201%201.24.813%204.693%204.693%200%200%201%20.876%201.307l.346-.346a1.51%201.51%200%200%200%20.04-2.163z%22/%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position: center;
}
.main-buttons-item-drag-button::after {
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%226%22%20height%3D%2214%22%20viewBox%3D%220%200%206%2014%22%3E%3Cpath%20fill%3D%22%23717A84%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200h2v2H0V0zm0%204h2v2H0V4zm4-4h2v2H4V0zm0%204h2v2H4V4zM0%208h2v2H0V8zm4%200h2v2H4V8zm-4%204h2v2H0v-2zm4%200h2v2H4v-2z%22/%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position: center;
}
.main-buttons-submenu-item .main-buttons-item-edit-button,
.main-buttons-submenu-item .main-buttons-item-drag-button {
top: 0;
bottom: 0;
height: auto;
width: 30px;
}
.main-buttons-submenu-item .main-buttons-item-edit-button {
right: 0;
width: 35px;
}
.main-buttons-submenu-item .main-buttons-item-drag-button {
right: auto;
left: 0;
}
.main-buttons-submenu-item .main-buttons-item-edit-button::after,
.main-buttons-submenu-item .main-buttons-item-drag-button::after {
top: 9px;
}
.main-buttons-submenu-item .main-buttons-item-edit-button::after {
left: 6px;
}
.main-buttons-submenu-item .main-buttons-item-drag-button::after {
right: 6px;
top: 10px;
}
.main-buttons-submenu-setting {
position: relative;
}
.main-buttons-submenu-setting::after {
content: '';
position: relative;
top: 6px;
right: 9px;
display: inline-block;
height: 18px;
width: 24px;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22%23545C6A%22%20fill-rule%3D%22evenodd%22%20d%3D%22M11.654%206.56V5.093h-1.42c-.11-.69-.374-1.326-.763-1.872l.996-.995L9.43%201.188l-.996.995c-.542-.394-1.174-.662-1.863-.78V0H5.106v1.4c-.696.113-1.334.378-1.882.77l-.99-.99-1.038%201.038.99.988c-.397.55-.663%201.19-.777%201.887H0V6.56h1.41c.117.69.385%201.325.778%201.87l-1%20.998%201.037%201.037%201-1c.55.39%201.188.652%201.88.765v1.425H6.57v-1.43c.688-.114%201.318-.382%201.86-.772l1.005%201.006%201.04-1.038-1.01-1.008c.388-.54.653-1.17.768-1.854h1.42zM5.82%208.6C4.285%208.6%203.04%207.353%203.04%205.816c0-1.54%201.246-2.785%202.783-2.785%201.54%200%202.785%201.247%202.785%202.786C8.605%207.353%207.36%208.6%205.82%208.6z%22/%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position: center;
-webkit-transition: opacity .3s;
transition: opacity .3s;
}
.menu-popup .menu-popup-item.main-buttons-submenu-item.main-buttons-submenu-settings-apply {
display: none;
}
.menu-popup .menu-popup-item.main-buttons-submenu-item.main-buttons-submenu-settings-apply::after {
content: '';
position: relative;
top: 6px;
right: 9px;
display: inline-block;
height: 18px;
width: 24px;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%229%22%20height%3D%227%22%20viewBox%3D%220%200%209%207%22%3E%3Cpath%20fill%3D%22%23535C68%22%20fill-rule%3D%22evenodd%22%20d%3D%22M3.456%204.253L1.42%202.177c-.03-.03-.07-.046-.11-.046-.042%200-.08.017-.11.047L.046%203.354c-.06.063-.06.163%200%20.225l2.12%202.16c.006.01.014.02.023.03L3.342%206.95c.03.03.068.047.11.047.04%200%20.08-.017.11-.047l5.386-5.5c.06-.062.06-.162%200-.225L7.794.046C7.765.016%207.725%200%207.685%200c-.042%200-.08.017-.11.047l-4.12%204.206z%22/%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position: center;
-webkit-transition: opacity .3s;
transition: opacity .3s;
}
.main-buttons-settings-apply-alias {
position: absolute;
display: none;
top: 5px;
right: 10px;
width: 24px;
height: 24px;
background: #afc776;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
cursor: pointer;
-webkit-transition: width 200ms;
-moz-transition: width 200ms;
-ms-transition: width 200ms;
-o-transition: width 200ms;
transition: width 200ms;
border: 2px #ffffff solid;
}
.main-buttons-settings-apply-alias:hover {
width: 157px;
}
.main-buttons-settings-apply-alias::before {
content: '';
position: absolute;
top: 4px;
right: 3px;
display: inline-block;
height: 14px;
width: 20px;
background: url(/bitrix/components/bitrix/main.interface.buttons/templates/.default/images/menu-sprite.svg) no-repeat 6px -81px;
-webkit-transition: opacity .3s;
transition: opacity .3s;
}
.main-buttons-settings-apply-alias-text {
display: inline-block;
max-width: 100%;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: #545c6a;
font-weight: normal;
font-size: 12px;
line-height: 24px;
text-align: left;
z-index: 7;
margin-left: 11px;
opacity: 0;
-webkit-transition: opacity 100ms;
-moz-transition: opacity 100ms;
-ms-transition: opacity 100ms;
-o-transition: opacity 100ms;
transition: opacity 100ms;
}
.main-buttons-settings-apply-alias:hover .main-buttons-settings-apply-alias-text {
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
opacity: 1;
}
.main-buttons-submenu-item-no-hidden {
text-align: center;
padding-top: 12px;
padding-bottom: 12px;
opacity: .6;
cursor: default!important;
}
.main-buttons-submenu-item-no-hidden:hover {
background: #ffffff;
}
.main-buttons-submenu-item-no-hidden.over {
opacity: 1;
}
.menu-popup-item.main-buttons-submenu-item.main-buttons-item-active {
background: #f6f8f9;
border-bottom: none!important;
height: auto!important;
}
.menu-popup-item.main-buttons-submenu-item.main-buttons-item-active .main-buttons-item-text-title {
color: #2067b0;
}