You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
203 lines
3.3 KiB
SCSS
203 lines
3.3 KiB
SCSS
6 years ago
|
@import "blender-controls";
|
||
|
|
||
|
// 4
|
||
|
|
||
|
$green: #aad400ff;
|
||
|
$black: black;
|
||
|
|
||
|
$topBarBackground: linear-gradient(to bottom, lighten($blenderSplashBackground, 5%) 0%, $blenderSplashBackground 100%);
|
||
|
|
||
|
/*
|
||
|
font-family: 'Open Sans', sans-serif;
|
||
|
font-family: 'Catamaran', sans-serif;
|
||
|
font-family: 'Noto Sans', sans-serif;
|
||
|
font-family: 'Source Sans Pro', sans-serif;
|
||
|
*/
|
||
|
|
||
|
body {
|
||
|
font-family: 'Noto Sans', sans-serif;
|
||
|
margin: 0px;
|
||
|
padding: 0px;
|
||
|
color: black;
|
||
|
}
|
||
|
|
||
|
h1 {
|
||
|
margin: 0px;
|
||
|
}
|
||
|
|
||
|
.editor-app {
|
||
|
display: grid;
|
||
|
grid-template-columns: 300px 1fr;
|
||
|
grid-template-rows: auto 1fr;
|
||
|
width: 100vw;
|
||
|
height: 100vh;
|
||
|
|
||
|
& > .header {
|
||
|
grid-column-start: 1;
|
||
|
grid-column-end: 3;
|
||
|
|
||
|
padding: 6px 8px;
|
||
|
|
||
|
// background: linear-gradient(to bottom, #222b21 0%,#010801 100%);
|
||
|
background: $topBarBackground;
|
||
|
color: $green;
|
||
|
|
||
|
.logo {
|
||
|
margin-right: 8px;
|
||
|
}
|
||
|
|
||
|
.name {
|
||
|
position: relative;
|
||
|
top: -2px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.menu {
|
||
|
display: grid;
|
||
|
grid-template-rows: auto 1fr;
|
||
|
box-sizing: border-box;
|
||
|
background-color: #010801;
|
||
|
border-right: 1px solid $blenderInputBorder;
|
||
|
// padding: 8px;
|
||
|
|
||
|
background: $blenderPanel;
|
||
|
|
||
|
.item-browser {
|
||
|
@include list;
|
||
|
|
||
|
.item {
|
||
|
&:nth-child(even) {
|
||
|
@include list-item-even;
|
||
|
}
|
||
|
|
||
|
&:nth-child(odd) {
|
||
|
@include list-item-odd;
|
||
|
}
|
||
|
|
||
|
.icon {
|
||
|
position: relative;
|
||
|
top: 1px;
|
||
|
margin-right: 6px;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.canvas {
|
||
|
box-sizing: border-box;
|
||
|
padding: 16px;
|
||
|
background-color: $blenderBackground;
|
||
|
|
||
|
box-shadow: inset 1px 1px rgba(0, 0, 0, 0.62);
|
||
|
|
||
|
.node {
|
||
|
font-size: 13px;
|
||
|
display: grid;
|
||
|
grid-template-columns: auto 8px auto 8px auto;
|
||
|
grid-template-rows: auto auto 8px;
|
||
|
// width: 400px;
|
||
|
position: absolute;
|
||
|
top: 80px;
|
||
|
left: 400px;
|
||
|
|
||
|
// temp
|
||
|
// width: 240px;
|
||
|
// height: 140px;
|
||
|
|
||
|
.editor-panel-header, .background {
|
||
|
grid-column-start: 2;
|
||
|
grid-column-end: 5;
|
||
|
}
|
||
|
|
||
|
.editor-panel-header {
|
||
|
cursor: move;
|
||
|
|
||
|
grid-row-start: 1;
|
||
|
grid-row-end: 2;
|
||
|
|
||
|
// FIXME: shadow is broken here
|
||
|
}
|
||
|
|
||
|
.background {
|
||
|
grid-row-start: 2;
|
||
|
grid-row-end: 4;
|
||
|
|
||
|
background-color: $blenderPanel;
|
||
|
|
||
|
box-shadow: inset -1px -1px rgba(94, 94, 94, 0.74),
|
||
|
inset 1px 1px rgba(189, 189, 189, 0.27),
|
||
|
2px 2px 2px 0px rgba(28, 28, 28, 0.79);
|
||
|
}
|
||
|
|
||
|
.inputs, .left-connectors, .right-connectors {
|
||
|
grid-row-start: 2;
|
||
|
grid-row-end: 3;
|
||
|
z-index: 2;
|
||
|
}
|
||
|
|
||
|
.inputs {
|
||
|
grid-column-start: 3;
|
||
|
grid-column-end: 4;
|
||
|
padding: 8px 16px;
|
||
|
|
||
|
.label, .box {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.label {
|
||
|
margin-right: 8px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.left-connectors, .right-connectors {
|
||
|
z-index: 2;
|
||
|
|
||
|
.connector {
|
||
|
margin: 6px 0px;
|
||
|
|
||
|
.bullet, .description {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.bullet {
|
||
|
width: 16px;
|
||
|
height: 16px;
|
||
|
background-color: #8d8d8d;
|
||
|
border: 1px solid $blenderInputBorder;
|
||
|
border-radius: 8px;
|
||
|
position: relative;
|
||
|
top: 5px;
|
||
|
}
|
||
|
|
||
|
.description {
|
||
|
// color: white;
|
||
|
font-size: 12px;
|
||
|
background-color: rgba(180, 180, 180, 0.6);
|
||
|
padding: 2px 4px;
|
||
|
border-radius: 4px;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.left-connectors {
|
||
|
grid-column-start: 1;
|
||
|
grid-column-end: 3;
|
||
|
text-align: right;
|
||
|
|
||
|
.bullet {
|
||
|
margin-left: 6px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.right-connectors {
|
||
|
grid-column-start: 4;
|
||
|
grid-column-end: 6;
|
||
|
|
||
|
.bullet {
|
||
|
margin-right: 6px;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|