@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Mono&display=swap'); * { margin: 0; padding: 0; color: white; font-family: 'Roboto', sans-serif; font-size: 12px; } *.monospaced, .monospaced * { font-family: 'Roboto Mono', sans-serif; } body, html { height: 100%; overflow: hidden; background: #14151f; } canvas { background-color: transparent !important; } .container { margin: 4px; padding: 4px; background: rgba(80, 80, 80, 0.4); border-radius: 4px; z-index: 1000; } .overlay { position: fixed; } .overlay.right { right: 0; } .overlay.bottom { bottom: 0; } .sidebar { padding: 4px; background: rgba(80, 80, 80, 0.4); z-index: 1000; } .overlay.sidebar.top { left: 0; right: 0; border-bottom: solid 1px rgba(160, 160, 160, 0.4); } .overlay.sidebar.right { top: 0; bottom: 0; max-width: 400px; border-left: solid 1px rgba(160, 160, 160, 0.4); } .overlay.sidebar.bottom { left: 0; right: 0; border-top: solid 1px rgba(160, 160, 160, 0.4); } .overlay.sidebar.left { top: 0; bottom: 0; max-width: 400px; border-right: solid 1px rgba(160, 160, 160, 0.4); } .overlay.sidebar.right.scroll, .overlay.sidebar.left.scroll { overflow-y: auto; } .tool { position: relative; padding: 8px; width: 24px; height: 24px; line-height: 24px; text-align: center; background: rgba(160, 160, 160, 0.4); border-radius: 4px; } .tool:not(:last-child) { margin-bottom: 4px; } .tool:hover { background: rgba(180, 180, 180, 0.4); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); } .tool:active { background: rgba(200, 200, 200, 0.4); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5); } .tool.active { background: rgba(100, 140, 180, 0.6); } .tool.active:hover { background: rgba(120, 160, 200, 0.6); } .tool.active:active { background: rgba(140, 180, 220, 0.6); } .tool .fa-plus { position: absolute; right: -0.125em; bottom: -0.125em; color: rgba(140, 255, 180, 0.8); } .tool .fa-link { position: absolute; right: -0.125em; bottom: -0.125em; color: rgba(255, 120, 140, 0.8); } .sidebar table { margin: -4px -4px -4px 4px; } table, tbody, thead, tr, th, td { border: solid 1px rgba(160, 160, 160, 0.4); border-collapse: collapse; } td { padding: 2px 4px; } table .key { text-align: right; color: #888888; } /* Context Menu */ .context { display: inline-block; position: fixed; top: 0px; left: 0px; min-width: 270px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #fff; background: #262933; font-size: 9pt; border: 1px solid #333333; border-radius: 6px; box-shadow: 2px 2px 2px -1px rgba(0, 0, 0, 0.5); padding: 3px 0px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .context .item { padding: 4px 19px; cursor: default; color: inherit; } .context .item:hover { background: #2777FF; } .context .item:hover .hotkey { color: #fff; } .context .disabled { color: #878B90; } .context .disabled:hover { background: inherit; } .context .disabled:hover .hotkey { color: #878B90; } .context .separator { margin: 4px 0px; height: 0; padding: 0; border-top: 1px solid #454545; } .hotkey { color: #878B90; float: right; }