|
|
- #lib-df-buttons{margin:0;padding:0;background:none;box-shadow:none;border:none;position:absolute;display:grid;pointer-events:none;height:calc(100vh - 70px);grid-template-rows:auto auto;grid-template-columns:auto auto}#lib-df-buttons #magnet{padding:5px 10px 5px 0px;height:fit-content;width:fit-content;pointer-events:all}#lib-df-buttons #magnet i{visibility:hidden}#lib-df-buttons #magnet:hover>i{visibility:visible}#lib-df-buttons.left #magnet{grid-area:1/2/1/2}#lib-df-buttons.left #moduleControls{grid-area:1/1/1/1}#lib-df-buttons.top{height:fit-content}#lib-df-buttons.top #magnet{grid-area:1/1/1/1}#lib-df-buttons.top #moduleControls{grid-area:1/2/1/2}#lib-df-buttons.right #magnet{grid-area:1/1/1/1}#lib-df-buttons.right #moduleControls{grid-area:1/2/1/2}#lib-df-buttons.bottom{height:fit-content;margin-top:auto}#lib-df-buttons.bottom #magnet{grid-area:1/1/1/1}#lib-df-buttons.bottom #moduleControls{grid-area:2/1/2/1}#moduleControls{margin:0;padding:0;background:none;box-shadow:none;border:none;height:calc(100vh - 70px);display:flex;flex-direction:row-reverse;flex-wrap:nowrap}#moduleControls .group-tools{display:inline-flex}#moduleControls .controls{display:none;list-style:none;padding:0;margin:0;justify-content:flex-start}#moduleControls .controls.active{display:flex;flex-direction:column;flex-wrap:wrap-reverse}#moduleControls .control-tool{width:36px;height:36px;box-sizing:content-box;font-size:24px;line-height:36px;background:rgba(0,0,0,.5);box-shadow:0 0 10px #000;margin:0 10px 10px 0;color:#bbb;text-align:center;border:1px solid #000;border-radius:5px;cursor:pointer;pointer-events:all}#moduleControls .control-tool.active,#moduleControls .control-tool:hover{color:#fff;border:1px solid red;border-bottom:1px solid #ff6400;box-shadow:0 0 10px #ff6400}#moduleControls .control-tool.toggle{background:rgba(30,0,60,.5);border:1px solid #3b1893}#moduleControls .control-tool.toggle.active,#moduleControls .control-tool.toggle:hover{background:rgba(60,0,120,.5);box-shadow:0 0 10px #9b8dff}#lib-df-buttons.bottom #moduleControls{flex-direction:column-reverse;height:fit-content}#lib-df-buttons.bottom #moduleControls .controls.active{flex-direction:row;justify-content:unset}#lib-df-buttons.top #moduleControls{flex-direction:column;height:fit-content}#lib-df-buttons.top #moduleControls .controls.active{flex-direction:row;flex-wrap:wrap;justify-content:unset}#lib-df-buttons.left #moduleControls{width:fit-content;flex-direction:row}#lib-df-buttons.left #moduleControls .controls.active{flex-wrap:wrap}
- #df-buttons-magnet{display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto auto auto;width:fit-content;height:fit-content;margin:auto;padding:20px;background:url(/../ui/denim075.png) repeat;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:6px}#df-buttons-magnet button{width:fit-content;height:fit-content;vertical-align:middle}#df-buttons-magnet button img{width:24px;height:24px;border:none;margin:0;padding:0;margin-top:4px;margin-bottom:-4px}#df-buttons-magnet .close{color:var(--color-text-light-highlight);grid-area:1/3/1/3;width:fit-content;height:fit-content;padding:4px;transform:translate(40px, -20px)}#df-buttons-magnet .left{grid-column:1/1;grid-row:2/2;margin-right:10px}#df-buttons-magnet .left img{transform:rotate(0.25turn)}#df-buttons-magnet .top{grid-column:2/2;grid-row:1/1;margin-bottom:10px}#df-buttons-magnet .top img{transform:rotate(0.5turn)}#df-buttons-magnet .right{grid-column:3/3;grid-row:2/2;margin-left:10px}#df-buttons-magnet .right img{transform:rotate(-0.25turn)}#df-buttons-magnet .bottom{grid-column:2/2;grid-row:3/3;margin-top:10px}
|
