mysticsymbolic.github.io/browser-main.css

html,body{margin:0;padding:0;font-family:"Calibri","Arial","Helvetica Neue",sans-serif;overflow:hidden}.page{display:grid;column-gap:8px;padding:8px;box-sizing:border-box;height:100vh;width:100vw;grid-template-columns:auto 20em;grid-template-rows:3em auto 3em;grid-template-areas:"header header" "canvas sidebar" "footer footer"}header{grid-area:header;display:flex}header h1{margin:0;flex-grow:1}.MSlogo{height:50px;vertical-align:middle;margin-bottom:3px}.sidebar{grid-area:sidebar;overflow-y:auto}footer{grid-area:footer}select,input[type=text]{padding:8px}summary{cursor:pointer}.thingy{margin-top:10px;margin-bottom:10px}.thingy:first-child{margin-top:0}ul.navbar{display:flex;list-style-type:none;margin:0;padding:0;justify-content:flex-end}ul.navbar li{border-right:1px solid gray;margin-right:8px;padding-right:8px}ul.navbar li:last-child{border-right:none;padding-right:0;margin-right:0}.flex-widget{display:flex;flex-direction:column}.flex-widget label{margin-bottom:8px}.canvas{grid-area:canvas;display:flex;align-items:center;justify-content:center;overflow:hidden}.canvas.scrollable{display:block;overflow:auto}.sidebar .disabled{color:gray}.sidebar label.checkbox{display:block;margin-top:10px;margin-bottom:10px}.error{color:red}.page-error{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#000000bf}.page-error div{background:crimson;color:#fff;padding:2em;max-width:50em}.page-error div p:first-child{margin-top:0}.page-error div p:last-child{margin-bottom:0}.page-error div button{display:block;width:66%;margin:3em auto 0;text-align:center}.sidebar .color-widget{display:flex}.sidebar .color-widget label{flex-grow:1}.hover-debug-helper{font-family:"Consolas","Monaco",monospace;color:#fff;background:rgba(0,0,0,.75);padding:4px;margin-top:-1.75em}.checkerboard-bg{background:#eee url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".1" ><rect x="200" width="200" height="200" /><rect y="200" width="200" height="200" /></svg>');background-size:20px 20px}.overlay-wrapper{position:fixed;display:flex;background-color:#000000e6;flex-direction:column;align-items:center;justify-content:center;color:#fff;top:0;left:0;bottom:0;right:0}.loading-indicator{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.loading-indicator svg{width:64px;height:64px;fill:#d3d3d3}.gallery-thumbnail{width:320px;height:240px}.gallery-item>a{text-decoration:none}.gallery-thumbnail.is-empty{background-color:#d3d3d3}.gallery-thumbnail.is-empty>span{color:#a9a9a9;font-size:48px}.gallery-item{display:inline-block;border:1px solid black;margin-right:1em;margin-bottom:1em}.gallery-item p{margin:1em}