Spaces:
Running
Running
@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 ; | |
} | |
.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; | |
} | |