@charset "UTF-8"; .linkhay-editor-right-sidebar { display: none; position: absolute; padding-left: 20px; z-index: 6; font-size: 13px; font-family: arial; } .linkhay-editor-right-sidebar, .linkhay-editor-right-sidebar * { box-sizing: border-box; } .linkhay-editor-right-sidebar > .command-list { list-style-type: none; margin: 0; padding: 5px 0; position: absolute; top: 50%; right: calc(100% - 10px); background: #555; color: #fff; transform-origin: 100% 50%; transform: translateY(-50%) scale(0); border-radius: 5px; transition: all .15s ease-out; opacity: 0; } .linkhay-editor-right-sidebar > .command-list:before { content: ''; display: block; width: 10px; height: 10px; background: #555; position: absolute; top: 50%; left: calc(100% - 5px); transform-origin: 50% 50%; transform: translateY(-50%) rotateZ(45deg); } .linkhay-editor-right-sidebar > .command-list > * { display: block; padding: 0 10px 0 35px; min-width: 150px; height: 30px; line-height: 30px; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .linkhay-editor-right-sidebar > .command-list > :not(.tile):hover { cursor: pointer; background: #333; } .linkhay-editor-right-sidebar > .command-list > .tile { padding-left: 10px; height: 40px; line-height: 40px; text-transform: uppercase; font-size: 12px; color: #aaa; } .linkhay-editor-right-sidebar > .command-list > * .icon { display: block; position: absolute; top: 0; left: 0; width: 35px; height: 30px; line-height: 30px; text-align: center; font-size: 14px; } .linkhay-editor-right-sidebar > .trigger { display: block; width: 26px; height: 26px; border: 1px solid #4ca2ff; border-radius: 50%; position: relative; transition: all .15s ease-out; cursor: pointer; } .linkhay-editor-right-sidebar > .trigger:before, .linkhay-editor-right-sidebar > .trigger:after { content: ''; position: absolute; width: 16px; height: 2px; background: #4ca2ff; top: 11px; left: 4px; border-radius: 1px; } .linkhay-editor-right-sidebar > .trigger:after { transform-origin: 50% 50%; transform: rotateZ(90deg); } .linkhay-editor-right-sidebar.active > .trigger { transform-origin: 50% 50%; transform: rotateZ(45deg); } .linkhay-editor-right-sidebar.active > .command-list { transform: translateY(-50%) scale(1); opacity: 1; } .linkhay-editor-left-sidebar { display: none; position: absolute; z-index: 6; font-size: 13px; font-family: arial; height: 26px; width: 46px; } .linkhay-editor-left-sidebar, .linkhay-editor-left-sidebar * { box-sizing: border-box; } .linkhay-editor-left-sidebar > .trigger { display: block; width: 26px; height: 26px; background: #4ca2ff; color: #fff; border-radius: 3px; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); transition: all .15s ease-out; cursor: pointer; overflow: hidden; } .linkhay-editor-left-sidebar > .trigger * { line-height: 26px; text-align: center; font-size: 14px; } .linkhay-editor-left-sidebar > .command-container { list-style-type: none; margin: 0; padding: 5px; position: absolute; top: 50%; left: calc(100% - 5px); background: #555; color: #fff; transform-origin: 100% 50%; transform: translateY(-50%) scale(0); border-radius: 5px; transition: all .15s ease-out; opacity: 0; } .linkhay-editor-left-sidebar > .command-container:before { content: ''; display: block; width: 10px; height: 10px; background: #555; position: absolute; top: 50%; left: -5px; transform-origin: 50% 50%; transform: translateY(-50%) rotateZ(45deg); } .linkhay-editor-left-sidebar > .command-container > ul { list-style-type: none; padding: 0; margin: 0; width: 96px; } .linkhay-editor-left-sidebar > .command-container > ul > li { display: inline-block; margin: 3px; } .linkhay-editor-left-sidebar > .command-container > ul > li:hover { background: #fff; border-radius: 3px; color: #4ca2ff; cursor: pointer; } .linkhay-editor-left-sidebar > .command-container > ul > li > .icon { display: block; width: 26px; height: 26px; line-height: 26px; text-align: center; font-size: 14px; } .linkhay-editor-left-sidebar.active > .trigger { transform-origin: 50% 50%; transform: rotateZ(45deg) translateY(-50%); border-radius: 50%; text-indent: 50px; width: 10px; height: 10px; } .linkhay-editor-left-sidebar.active > .command-container { transform: translateY(-50%) scale(1); opacity: 1; } .linkhay-editor-popupbar { padding: 6px 0; } .linkhay-editor-popupbar > ul { box-shadow: none; border: 0; background: #555; border-radius: 3px; padding: 3px 5px; } .linkhay-editor-popupbar > ul > li { padding: 2px; } .linkhay-editor-popupbar > ul > li .osc-editor-cmd { font-size: 14px; width: 26px; line-height: 26px; color: #fff; border-radius: 3px; text-align: center; height: 26px; box-sizing: border-box; min-width: 26px; } .linkhay-editor-popupbar > ul > li .osc-editor-cmd > div { padding: 0; } .linkhay-editor-popupbar > ul > li .osc-editor-cmd i { line-height: 26px; } .linkhay-editor-popupbar > ul > li .osc-editor-cmd:hover, .linkhay-editor-popupbar > ul > li .osc-editor-cmd.active { background: #fff; color: #4ca2ff; } .linkhay-editor-popupbar > .arrow { position: absolute; bottom: -6px; left: 50%; width: 0; height: 0; border: 6px solid transparent; border-top: 6px solid #555; } .linkhay-editor-popupbar > .arrow:before { content: none; } .linkhay-editor-popupbar.bottom > .arrow { top: -6px; bottom: initial; border-top: 6px solid transparent; border-bottom: 6px solid #555; }