matterbox / style.css
Ramesh-vani's picture
Update style.css
cd77764 verified
@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;
}