%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; }