Files
Undecked/Frontend/pages/home/style.css
2023-08-29 19:55:48 +02:00

11 lines
21 KiB
CSS

.actionselector{width:calc(100% - 24px);margin:5px 0}.actionselector:active,.actionselector:focus{border-bottom-right-radius:0;border-bottom-left-radius:0}.actiondialog{position:absolute;border:solid var(--main-color);border-width:0 2px 2px 2px;border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);overflow:auto;display:none;flex-direction:column}.actiondialog .item{width:calc(100% - 20px);display:flex;justify-content:flex-start;align-items:center;padding:5px 10px;background:var(--main-secondary-color);border-bottom:1px solid var(--main-color);transition-duration:.2s;cursor:pointer;font-size:12px}.actiondialog .item:last-child{border-bottom:0}.actiondialog .item:hover{background:var(--main-hover-color)}.actiondialog .item .integration{margin-right:10px;font-weight:600}.actiondialog .item.hidden{display:none}
.actioncontainer{width:calc(100% - 20px);margin:10px 10px 0 10px;border-bottom:1px solid #424242;padding-bottom:10px}.actioncontainer:last-child{border-bottom:0}.actioncontainer .header{display:flex;font-size:12px}.actioncontainer .header .integration{font-weight:500;margin-right:5px}.actioncontainer .header .action{color:#d9d9d9;width:100%}.actioncontainer .header .buttons{display:flex;justify-content:center;align-items:center}.actioncontainer .header .buttons .btn{padding:2px 8px;border-radius:var(--border-radius);transition-duration:.2s;cursor:pointer}.actioncontainer .header .buttons .btn.logs{background:#707070}.actioncontainer .header .buttons .btn.logs:hover{background:#4b4b4b}.actioncontainer .header .buttons .btn.remove{background:var(--color-red);margin-left:5px}.actioncontainer .header .buttons .btn.remove:hover{background:var(--color-red-hover)}.actioncontainer .fields{width:100%}.actioncontainer .fields .field{width:calc(100% - 5px);display:flex;justify-content:flex-start;align-items:center;margin-left:5px;margin-top:5px}.actioncontainer .fields .field .fieldlabel{font-size:12px;white-space:nowrap;margin-right:10px;color:#bfbfbf}.actioncontainer .fields .field .multiselect{position:relative;width:calc(100% - 14px);margin:0;padding:2px 5px}.actioncontainer .fields .field .multiselect select{width:calc(100% + 4px);margin:0;padding:2px 5px}.actioncontainer .fields .field .multiselect select.open{border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:var(--main-color)}.actioncontainer .fields .field .multiselect .dropdown{position:absolute;top:25px;left:5px;right:1px;height:300px;display:none}.actioncontainer .fields .field .multiselect .dropdown .inner{width:100%;max-height:300px;overflow-y:auto;border:2px solid var(--main-color);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.actioncontainer .fields .field .multiselect .dropdown .inner .option{width:calc(100% - 20px);height:18px;padding:4px 10px;display:flex;justify-content:flex-start;align-items:center;border-bottom:1px solid var(--main-color);background:#323232;user-select:none;font-size:12px}.actioncontainer .fields .field .multiselect .dropdown .inner .option:last-child{border-bottom:0}.actioncontainer .fields .field .multiselect .dropdown .inner .option input{width:18px;height:18px;pointer-events:none}.actioncontainer .fields .field .multiselect .dropdown .inner .option .text{margin-left:10px}.actioncontainer .fields .field input,.actioncontainer .fields .field select{width:100%;margin:0;padding:2px 5px}
.connectiondialog{position:absolute;top:0;bottom:0;left:0;right:0;z-index:3;display:none;justify-content:center;align-items:center;background:rgba(0,0,0,.368627451)}.connectiondialog .dialog{width:300px;padding:20px;border-radius:var(--border-radius);border:2px solid var(--main-color);background:var(--panel-color)}.connectiondialog .dialog .title{width:100%;font-size:16px}.connectiondialog .dialog .message{width:100%;font-size:12px;margin:5px 0}.connectiondialog .dialog .link{font-size:14px;margin-bottom:10px}.connectiondialog .dialog .fields{width:100%;min-height:100px}.connectiondialog .dialog .fields .field{width:calc(100% - 5px);display:flex;justify-content:flex-start;align-items:center;margin-left:5px;margin-top:5px}.connectiondialog .dialog .fields .field .fieldlabel{font-size:12px;white-space:nowrap;margin-right:10px;color:#bfbfbf}.connectiondialog .dialog .fields .field input,.connectiondialog .dialog .fields .field select{width:100%;margin:0;padding:2px 5px}.connectiondialog .dialog .buttons{width:100%;display:flex;justify-content:flex-end;margin-top:10px;font-size:12px}.connectiondialog .dialog .buttons .secondary{margin-right:10px}
.connections{position:absolute;top:0;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center}.connections .connected{width:calc(80% - 20px);height:calc(100% - 20px);padding:10px;border-right:2px solid var(--main-color)}.connections .connected table{width:100%}.connections .connected table tr{height:40px}.connections .connected table td,.connections .connected table th{text-align:left;border-bottom:1px solid #323232}.connections .connected table td{font-size:12px}.connections .connected table .status{width:100px}.connections .connected table .status .statuscontainer{width:100%;height:100%;display:flex;justify-content:flex-start;align-items:center}.connections .connected table .status .statuscontainer .value{width:15px;height:15px;border:2px solid rgba(0,0,0,.2666666667);border-radius:100%}.connections .connected table .status .statuscontainer .value.online{background:green}.connections .connected table .status .statuscontainer .value.offline{background:var(--color-red)}.connections .connectionbrowser{width:calc(20% - 20px);height:calc(100% - 20px);min-width:200px;padding:10px;background:var(--subpanel-color)}.connections .connectionbrowser .available{width:100%;display:flex;justify-content:flex-start;align-items:center;transition-duration:.2s;cursor:pointer;font-size:12px;height:30px;border-bottom:1px solid #323232}.connections .connectionbrowser .available .integration{margin-right:10px;font-weight:600;white-space:nowrap}.connections .connectionbrowser .available .connectionName{width:100%}
.contextmenu{position:absolute;z-index:10;min-width:150px;display:none;border:3px solid var(--main-color);border-radius:var(--border-radius);background:var(--panel-color);box-shadow:0 0 5px #727272;overflow:hidden}.contextmenu:first-child{border-top:0}.contextmenu .item{width:100%;height:24px;border-top:1px solid var(--main-hover-color);cursor:pointer;transition-duration:.2s;position:relative}.contextmenu .item:hover{background:var(--main-hover-color)}.contextmenu .item:hover img{filter:grayscale(1)}.contextmenu .item.disabled{opacity:.7;pointer-events:none;cursor:not-allowed}.contextmenu .item.disabled img{filter:grayscale(0)}.contextmenu .item .content{position:absolute;inset:0;display:flex;justify-content:flex-start;align-items:center;padding:0 5px;box-sizing:border-box;pointer-events:none}.contextmenu .item .content img{width:14px;height:14px;transition-duration:.2s;filter:grayscale(0)}.contextmenu .item .content .title{margin-left:5px;font-size:9px;white-space:nowrap}.contextmenu .item .shortcut{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:flex-end;font-size:8px;font-weight:400;box-sizing:border-box;padding-right:5px;color:#adadad}.contextmenu .seperator{width:100%;height:1px;background:var(--main-color)}
.overview{position:absolute;top:0;bottom:0;left:202px;right:502px;display:flex;justify-content:center;align-items:center}.overview .deck{width:960px;height:480px;display:flex;flex-wrap:wrap}.overview .deck .group{display:flex}.overview .deck .group .key{width:100px;height:100px;border:2px solid rgba(255,255,255,.5490196078);margin:8px;border-radius:var(--border-radius);overflow:hidden;transition-duration:.1s;cursor:pointer}.overview .deck .group .key canvas{width:100%;height:100%;pointer-events:none}.overview .deck .group .key:hover{border-color:var(--main-hover-color)}.overview .deck .group .key.selected,.overview .deck .group .key.selected:hover{border-color:var(--main-color);border-width:4px;margin:6px}.overview .deck .group .key.context,.overview .deck .group .key.context:hover{border-color:var(--main-color);border-width:2px;margin:8px}.overview .deck .group.small{background:#2a2a2a}.overview .deck .group.fs{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.overview .deck .group.ls{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}
.editcontainer{position:absolute;top:0;bottom:0;right:0;width:500px;border-left:2px solid var(--main-color);background:var(--subpanel-color)}.editcontainer .edit .split{position:absolute;top:5px;bottom:5px;left:5px;right:5px;opacity:1;transition-duration:.2s}.editcontainer .edit .split .row{width:calc(100% - 10px);margin-top:5px;padding:5px;background:#363636}.editcontainer .edit .split .row .label{color:#fff;margin:0 0 5px 0;font-size:13px;border-bottom:1px solid #525252;padding-bottom:4px;padding-left:5px}.editcontainer .edit .split .row .inputs{display:flex;justify-content:flex-start;align-items:center}.editcontainer .edit .split .row75{width:100%;display:flex;align-items:flex-start}.editcontainer .edit .split .row75 .row{width:calc(25% - 15px);margin:0 0 0 5px}.editcontainer .edit .split .row75 .row:first-child{width:calc(75% - 10px);margin:0}.editcontainer .edit .split .buttontype{width:calc(100% + 10px);display:flex;justify-content:center;align-items:center;border-bottom:2px solid var(--main-color);padding-bottom:5px;margin-left:-5px}.editcontainer .edit .split .buttontype .types{display:flex;justify-content:center}.editcontainer .edit .split .buttontype .types .buttonitem{border:solid var(--main-hover-color);border-width:2px 2px 2px 0;transition-duration:.2s;padding:5px 10px;background:var(--background);color:#fff;font-size:12px;transition-duration:.2s;cursor:pointer}.editcontainer .edit .split .buttontype .types .buttonitem:hover{background:var(--main-hover-color)}.editcontainer .edit .split .buttontype .types .buttonitem:first-child{border-left-width:2px;border-top-left-radius:var(--border-radius);border-bottom-left-radius:var(--border-radius)}.editcontainer .edit .split .buttontype .types .buttonitem:last-child{border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.editcontainer .edit .split .buttontype .types .buttonitem.selected,.editcontainer .edit .split .buttontype .types .buttonitem.selected:hover{background:var(--main-color);border-color:var(--main-color)}.editcontainer .edit .split .editinner{width:100%;height:calc(100% - 36px);overflow-y:auto}.editcontainer .edit .split .container{width:100%}.editcontainer .edit .split .containertitle{width:calc(100% - 10px);padding-left:10px;margin:10px 0 5px 0}.editcontainer .edit .split .containertitle.checktitle{display:flex}.editcontainer .edit .split .containertitle.checktitle .text{width:100%}.editcontainer .edit .split .containertitle.checktitle .checks{display:flex;align-items:center}.editcontainer .edit .split .containertitle.checktitle .checks .check{display:flex;align-items:center;margin-left:10px;user-select:none}.editcontainer .edit .split .containertitle.checktitle .checks .check input{width:18px;height:18px;pointer-events:none;margin-right:5px}.editcontainer .edit .split .containertitle.checktitle .checks .check .checklabel{font-size:12px}.editcontainer .edit .split .container.appearence .advanced{width:calc(100% + 10px);display:flex;align-items:center;justify-content:space-between;margin-left:-5px;margin-top:5px}.editcontainer .edit .split .container.appearence .advanced .subrow{width:100%;display:flex;align-items:center;flex-wrap:wrap;margin:0 5px}.editcontainer .edit .split .container.appearence .advanced .subrow .label{width:100%;color:#a5a5a5;margin:0 0 -3px 5px;font-size:10px;border-bottom:0;padding:0}.editcontainer .edit .split .container.appearence .advanced .subrow input[type=range]{width:calc(100% - 42px);margin:0;padding:0}.editcontainer .edit .split .container.appearence .advanced .subrow input[type=number]{padding:2px 0;width:30px;font-size:10px;text-align:center}.editcontainer .edit .split .container.appearence .advanced .subrow input[type=number]::-webkit-inner-spin-button,.editcontainer .edit .split .container.appearence .advanced .subrow input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.editcontainer .edit .split .container.appearence .row.text .value{height:17px;width:calc(100% - 104px);border-top-right-radius:0;border-bottom-right-radius:0}.editcontainer .edit .split .container.appearence .row.text .size{width:80px;border-radius:0;border-width:2px 0}.editcontainer .edit .split .container.appearence .row.text .color{height:31px;width:60px;border-top-left-radius:0;border-bottom-left-radius:0}.editcontainer .edit .split .container.appearence .row.background .color{height:31px;width:100%}.editcontainer .edit .split .container.appearence .row.image .imagemenu{width:100%;display:flex;justify-content:flex-start;align-items:center}.editcontainer .edit .split .container.appearence .row.image .imagemenu .imagetype{display:flex;justify-content:center}.editcontainer .edit .split .container.appearence .row.image .imagemenu .imagetype .selectoritem{border:solid var(--main-hover-color);border-width:2px 2px 2px 0;transition-duration:.2s;padding:5px 10px;background:var(--background);color:#fff;font-size:12px;transition-duration:.2s;cursor:pointer}.editcontainer .edit .split .container.appearence .row.image .imagemenu .imagetype .selectoritem:hover{background:var(--main-hover-color)}.editcontainer .edit .split .container.appearence .row.image .imagemenu .imagetype .selectoritem:first-child{border-left-width:2px;border-top-left-radius:var(--border-radius);border-bottom-left-radius:var(--border-radius)}.editcontainer .edit .split .container.appearence .row.image .imagemenu .imagetype .selectoritem:last-child{border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.editcontainer .edit .split .container.appearence .row.image .imagemenu .imagetype .selectoritem.selected,.editcontainer .edit .split .container.appearence .row.image .imagemenu .imagetype .selectoritem.selected:hover{background:var(--main-color);border-color:var(--main-color)}.editcontainer .edit .split .container.appearence .row.image .imagemenu .info{width:100%;height:28px;margin-left:10px}.editcontainer .edit .split .container.appearence .row.image .imagemenu .info .infopanel{width:100%;height:100%;display:none}.editcontainer .edit .split .container.appearence .row.image .imagemenu .info .infopanel.selected{display:block}.editcontainer .edit .split .container.appearence .row.image .panels{width:100%}.editcontainer .edit .split .container.appearence .row.image .panels .panel{width:100%;height:calc(100% - 10px);padding:5px 0;display:none}.editcontainer .edit .split .container.appearence .row.image .panels .panel.selected{display:block}.editcontainer .edit .split .container.appearence .row.image .panels .panel.icons{max-height:150px;overflow-y:auto;overflow-x:hidden}.editcontainer .edit .split .container.appearence .row.image .panels .panel.icons .list{width:calc(100% + 4px);height:100%;display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;margin-left:-2px;cursor:pointer;overflow-y:auto}.editcontainer .edit .split .container.appearence .row.image .panels .panel.icons .list .icon{position:relative;width:55px;height:55px;overflow:hidden;background:#343434;margin:1px;transition-duration:.2s;border:1px solid transparent}.editcontainer .edit .split .container.appearence .row.image .panels .panel.icons .list .icon:hover{border-color:var(--main-hover-color)}.editcontainer .edit .split .container.appearence .row.image .panels .panel.icons .list .icon:hover .name{max-height:100%}.editcontainer .edit .split .container.appearence .row.image .panels .panel.icons .list .icon img{position:absolute;top:10px;bottom:10px;left:10px;right:10px;z-index:1;width:calc(100% - 20px);height:calc(100% - 20px);opacity:0;transition-duration:.2s}.editcontainer .edit .split .container.appearence .row.image .panels .panel.icons .list .icon .name{position:absolute;max-height:20%;bottom:0;left:0;right:0;z-index:2;text-align:center;font-size:9px;padding:2px;background:rgba(0,0,0,.5882352941);transition-duration:.3s}.editcontainer .edit .split .container.appearence .row.image .panels .panel.icons .list .icon.selected,.editcontainer .edit .split .container.appearence .row.image .panels .panel.icons .list .icon.selected:hover{border-color:var(--main-color);background:var(--main-secondary-color)}.editcontainer .edit.disabled{pointer-events:none}.editcontainer .edit.disabled .split{opacity:0}
.blockheader{font-size:18px;letter-spacing:0;font-weight:500;color:#dfdfdf}
.item[tab=pages] .pageselector{position:absolute;top:0;bottom:0;left:0;width:200px;border-right:2px solid var(--main-color);background:var(--subpanel-color)}.item[tab=pages] .pageselector .pageinfo{position:absolute;top:0;bottom:calc(100% - 90px);left:0;right:0;border-bottom:2px solid var(--main-color);padding:10px;display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap}.item[tab=pages] .pageselector .pageinfo .pagename{width:calc(100% - 24px)}.item[tab=pages] .pageselector .pageinfo .controls{width:100%;display:flex;justify-content:center;align-items:flex-start;margin-top:10px}.item[tab=pages] .pageselector .pageinfo .controls .box{width:30px;height:30px;display:flex;justify-content:center;align-items:center;cursor:pointer}.item[tab=pages] .pageselector .pageinfo .controls .box:hover img{filter:grayscale(1)}.item[tab=pages] .pageselector .pageinfo .controls .box.left img,.item[tab=pages] .pageselector .pageinfo .controls .box.right img{width:30px;height:30px}.item[tab=pages] .pageselector .pageinfo .controls .box img{filter:grayscale(0);transition-duration:.2s}.item[tab=pages] .pageselector .pageinfo .controls .centered{width:calc(100% - 60px);height:30px;display:flex;justify-content:center;align-items:center}.item[tab=pages] .pageselector .pageinfo .controls .centered .box img{width:20px;height:20px}.item[tab=pages] .pageselector .list{position:absolute;top:90px;bottom:0;left:0;right:0}.item[tab=pages] .pageselector .list .pageitem{width:100%;height:40px;display:flex;align-items:center;background:#363636;border-bottom:1px solid #2c2c2c;transition-duration:.2s;cursor:pointer}.item[tab=pages] .pageselector .list .pageitem:hover{background:#3e3d3d}.item[tab=pages] .pageselector .list .pageitem .name{width:calc(100% - 35px);margin-left:10px;font-size:12px}.item[tab=pages] .pageselector .list .pageitem .move{display:flex;flex-direction:column;margin-left:6px}.item[tab=pages] .pageselector .list .pageitem .move .moveitem{width:14px;height:14px;padding:2px;border-radius:2px}.item[tab=pages] .pageselector .list .pageitem .move .moveitem img{width:14px;height:14px;filter:grayscale(0);transition-duration:.2s}.item[tab=pages] .pageselector .list .pageitem .move .moveitem:hover{background:var(--subpanel-color)}.item[tab=pages] .pageselector .list .pageitem .move .moveitem:hover img{filter:grayscale(1)}.item[tab=pages] .pageselector .list .pageitem .move .moveitem .selected{display:none}.item[tab=pages] .pageselector .list .pageitem.selected{background:var(--main-color)}.item[tab=pages] .pageselector .list .pageitem.selected .moveitem .normal{display:none}.item[tab=pages] .pageselector .list .pageitem.selected .moveitem .selected{display:block}.item[tab=pages] .pageselector .list .pageitem.selected .moveitem:hover{background:var(--main-hover-color)}.item[tab=pages] .buttoneditor{position:absolute;top:0;bottom:0;left:202px;right:0}.item[tab=pages] .buttoneditor .edit{position:absolute;bottom:0;left:0;right:0;height:400px;border-top:2px solid var(--main-color);background:var(--subpanel-color)}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:rgba(255,255,255,.0588235294)}::-webkit-scrollbar-thumb{background:#b8b8b8}::-webkit-scrollbar-thumb:hover{background:#d6d6d6}
.tabcontainer{border:2px solid var(--main-color);position:absolute;top:0;bottom:0;left:0;right:0;background:#222;border-radius:var(--border-radius);overflow:hidden}.tabcontainer .tabmenu{position:absolute;top:0;left:0;right:0;height:30px;display:flex;justify-content:flex-start;align-items:center;background:var(--panel-color);border-bottom:2px solid var(--main-color)}.tabcontainer .tabmenu .item{height:100%;padding:0 15px;display:flex;align-items:center;background:var(--main-secondary-color);border-right:2px solid var(--main-color);user-select:none;transition-duration:.2s;cursor:pointer}.tabcontainer .tabmenu .item:hover{background:var(--main-hover-color)}.tabcontainer .tabmenu .item.active,.tabcontainer .tabmenu .item.active :hover{background:var(--main-color);cursor:inherit}.tabcontainer .tabpages{position:absolute;top:32px;bottom:0;left:0;right:0}.tabcontainer .tabpages .item{position:absolute;top:0;bottom:0;left:0;right:0;transition-duration:.2s;display:none}.tabcontainer .tabpages .item.padding{padding:10px}.tabcontainer .tabpages .item.active{display:inherit}