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.
215 lines
7.7 KiB
CSS
215 lines
7.7 KiB
CSS
/* Source: https://github.com/mobify/spline/blob/master/dist/functions/reverse-gradient/_reverse-gradient.scss */
|
|
.editor-input-horizontal .editor-input {
|
|
margin-right: 6px;
|
|
display: inline-block; }
|
|
|
|
.editor-input-horizontal .editor-input:last-child {
|
|
margin-right: 0px; }
|
|
|
|
.editor-input-vertical .editor-input {
|
|
margin-bottom: 4px; }
|
|
|
|
.editor-input-vertical .editor-input:last-child {
|
|
margin-bottom: 0px; }
|
|
|
|
.editor-input-label {
|
|
font-size: 12px; }
|
|
|
|
.editor-input-label-inline {
|
|
display: inline-block;
|
|
margin-right: 6px; }
|
|
|
|
.editor-input-text {
|
|
padding: 2px 6px;
|
|
border-radius: 7px;
|
|
color: black;
|
|
font-size: 12px;
|
|
border: 1px solid #454545;
|
|
box-shadow: inset 1px 1px rgba(94, 94, 94, 0.74), inset -1px -1px rgba(189, 189, 189, 0.27);
|
|
font-family: "Noto Sans", sans-serif;
|
|
background: linear-gradient(to bottom, #A5A5A5 0%, #B5B5B5 100%); }
|
|
|
|
.editor-input-button {
|
|
padding: 2px 6px;
|
|
border-radius: 7px;
|
|
color: black;
|
|
font-size: 12px;
|
|
border: 1px solid #454545;
|
|
box-shadow: inset -1px -1px rgba(94, 94, 94, 0.74), inset 1px 1px rgba(189, 189, 189, 0.27);
|
|
user-select: none;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
background: linear-gradient(to bottom, #A6A6A6 0%, #8E8E8E 100%);
|
|
cursor: default; }
|
|
.editor-input-button:active {
|
|
box-shadow: inset 1px 1px rgba(94, 94, 94, 0.74), inset -1px -1px rgba(189, 189, 189, 0.27);
|
|
background: linear-gradient(to bottom, #A6A6A6 100%, #8E8E8E 0%); }
|
|
|
|
.editor-input-buttonset-horizontal .editor-input-button {
|
|
display: inline-block;
|
|
margin-right: 0px; }
|
|
.editor-input-buttonset-horizontal .editor-input-button:first-child {
|
|
border-top-right-radius: 0px;
|
|
border-bottom-right-radius: 0px; }
|
|
.editor-input-buttonset-horizontal .editor-input-button:last-child {
|
|
border-top-left-radius: 0px;
|
|
border-bottom-left-radius: 0px;
|
|
border-left-width: 0px; }
|
|
.editor-input-buttonset-horizontal .editor-input-button:not(:first-child):not(:last-child) {
|
|
border-radius: 0px;
|
|
border-left-width: 0px; }
|
|
|
|
.editor-input-buttonset-vertical .editor-input-button {
|
|
width: 180px; }
|
|
.editor-input-buttonset-vertical .editor-input-button:first-child {
|
|
border-bottom-left-radius: 0px;
|
|
border-bottom-right-radius: 0px; }
|
|
.editor-input-buttonset-vertical .editor-input-button:last-child {
|
|
border-top-left-radius: 0px;
|
|
border-top-right-radius: 0px;
|
|
border-top-width: 0px; }
|
|
.editor-input-buttonset-vertical .editor-input-button:not(:first-child):not(:last-child) {
|
|
border-radius: 0px;
|
|
border-top-width: 0px; }
|
|
|
|
.editor-panel-header, .editor-control-bar {
|
|
box-shadow: inset -1px -1px rgba(94, 94, 94, 0.74), inset 1px 1px rgba(189, 189, 189, 0.27);
|
|
user-select: none;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
background: #686868;
|
|
cursor: default; }
|
|
|
|
.editor-panel-header {
|
|
font-weight: bold;
|
|
padding: 3px 5px; }
|
|
|
|
.editor-control-bar {
|
|
box-shadow: inset -1px -1px rgba(94, 94, 94, 0.74), inset 1px 1px rgba(189, 189, 189, 0.27), 0px 1px 1px 0px rgba(54, 54, 54, 0.79);
|
|
z-index: 999;
|
|
padding: 4px 6px; }
|
|
|
|
/*
|
|
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; }
|
|
.editor-app > .header {
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
padding: 6px 8px;
|
|
background: linear-gradient(to bottom, #232323 0%, #161616 100%);
|
|
color: #aad400ff; }
|
|
.editor-app > .header .logo {
|
|
margin-right: 8px; }
|
|
.editor-app > .header .name {
|
|
position: relative;
|
|
top: -2px; }
|
|
.editor-app .menu {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
box-sizing: border-box;
|
|
background-color: #010801;
|
|
border-right: 1px solid #454545;
|
|
background: #737373; }
|
|
.editor-app .menu .item-browser {
|
|
box-shadow: inset 1px 1px rgba(94, 94, 94, 0.74), inset -1px -1px rgba(189, 189, 189, 0.27);
|
|
overflow-y: auto; }
|
|
.editor-app .menu .item-browser .item:nth-child(even) {
|
|
font-size: 14px;
|
|
padding: 4px 6px;
|
|
background-color: #797979; }
|
|
.editor-app .menu .item-browser .item:nth-child(odd) {
|
|
font-size: 14px;
|
|
padding: 4px 6px;
|
|
background-color: #737373; }
|
|
.editor-app .menu .item-browser .item .icon {
|
|
position: relative;
|
|
top: 1px;
|
|
margin-right: 6px; }
|
|
.editor-app .canvas {
|
|
box-sizing: border-box;
|
|
padding: 16px;
|
|
background-color: #373737;
|
|
box-shadow: inset 1px 1px rgba(0, 0, 0, 0.62); }
|
|
.editor-app .canvas .node {
|
|
font-size: 13px;
|
|
display: grid;
|
|
grid-template-columns: auto 8px auto 8px auto;
|
|
grid-template-rows: auto auto 8px;
|
|
position: absolute;
|
|
top: 80px;
|
|
left: 400px; }
|
|
.editor-app .canvas .node .editor-panel-header, .editor-app .canvas .node .background {
|
|
grid-column-start: 2;
|
|
grid-column-end: 5; }
|
|
.editor-app .canvas .node .editor-panel-header {
|
|
cursor: move;
|
|
grid-row-start: 1;
|
|
grid-row-end: 2; }
|
|
.editor-app .canvas .node .background {
|
|
grid-row-start: 2;
|
|
grid-row-end: 4;
|
|
background-color: #737373;
|
|
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); }
|
|
.editor-app .canvas .node .inputs, .editor-app .canvas .node .left-connectors, .editor-app .canvas .node .right-connectors {
|
|
grid-row-start: 2;
|
|
grid-row-end: 3;
|
|
z-index: 2; }
|
|
.editor-app .canvas .node .inputs {
|
|
grid-column-start: 3;
|
|
grid-column-end: 4;
|
|
padding: 8px 16px; }
|
|
.editor-app .canvas .node .inputs .label, .editor-app .canvas .node .inputs .box {
|
|
display: inline-block; }
|
|
.editor-app .canvas .node .inputs .label {
|
|
margin-right: 8px; }
|
|
.editor-app .canvas .node .left-connectors, .editor-app .canvas .node .right-connectors {
|
|
z-index: 2; }
|
|
.editor-app .canvas .node .left-connectors .connector, .editor-app .canvas .node .right-connectors .connector {
|
|
margin: 6px 0px; }
|
|
.editor-app .canvas .node .left-connectors .connector .bullet, .editor-app .canvas .node .left-connectors .connector .description, .editor-app .canvas .node .right-connectors .connector .bullet, .editor-app .canvas .node .right-connectors .connector .description {
|
|
display: inline-block; }
|
|
.editor-app .canvas .node .left-connectors .connector .bullet, .editor-app .canvas .node .right-connectors .connector .bullet {
|
|
width: 16px;
|
|
height: 16px;
|
|
background-color: #8d8d8d;
|
|
border: 1px solid #454545;
|
|
border-radius: 8px;
|
|
position: relative;
|
|
top: 5px; }
|
|
.editor-app .canvas .node .left-connectors .connector .description, .editor-app .canvas .node .right-connectors .connector .description {
|
|
font-size: 12px;
|
|
background-color: rgba(180, 180, 180, 0.6);
|
|
padding: 2px 4px;
|
|
border-radius: 4px; }
|
|
.editor-app .canvas .node .left-connectors {
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
text-align: right; }
|
|
.editor-app .canvas .node .left-connectors .bullet {
|
|
margin-left: 6px; }
|
|
.editor-app .canvas .node .right-connectors {
|
|
grid-column-start: 4;
|
|
grid-column-end: 6; }
|
|
.editor-app .canvas .node .right-connectors .bullet {
|
|
margin-right: 6px; }
|