|
|
@@ -0,0 +1,892 @@
|
|
|
+
|
|
|
+#node-editor-graph-root {
|
|
|
+ $line-padding-left: 2px;
|
|
|
+
|
|
|
+ #inspector-host {
|
|
|
+ position: absolute;
|
|
|
+ right: 0px;
|
|
|
+ top:0px;
|
|
|
+ bottom: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #__resizable_base__ {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ #actionTabs {
|
|
|
+ background: #333333;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ display: grid;
|
|
|
+ grid-template-rows: auto 1fr;
|
|
|
+ font: 14px "Arial";
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .hoverIcon:hover {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+
|
|
|
+ #header {
|
|
|
+ height: 30px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: white;
|
|
|
+ background: #222222;
|
|
|
+ grid-row: 1;
|
|
|
+ text-align: center;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 30px 1fr 50px;
|
|
|
+ -webkit-user-select: none;
|
|
|
+ -moz-user-select: none;
|
|
|
+ -ms-user-select: none;
|
|
|
+ user-select: none;
|
|
|
+
|
|
|
+ #logo {
|
|
|
+ grid-column: 1;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ display: flex;
|
|
|
+ align-self: center;
|
|
|
+ justify-self: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ #back {
|
|
|
+ grid-column: 1;
|
|
|
+ display: grid;
|
|
|
+ align-self: center;
|
|
|
+ justify-self: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ #title {
|
|
|
+ grid-column: 2;
|
|
|
+ display: grid;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ #commands {
|
|
|
+ grid-column: 3;
|
|
|
+ display: grid;
|
|
|
+ align-items: center;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+
|
|
|
+ .expand {
|
|
|
+ grid-column: 1;
|
|
|
+ display: grid;
|
|
|
+ align-items: center;
|
|
|
+ justify-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .close {
|
|
|
+ grid-column: 2;
|
|
|
+ display: grid;
|
|
|
+ align-items: center;
|
|
|
+ justify-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabs {
|
|
|
+ display: grid;
|
|
|
+ grid-row: 2;
|
|
|
+ grid-template-rows: 40px 1fr;
|
|
|
+ font: 14px "Arial";
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .labels {
|
|
|
+ grid-row: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-items: center;
|
|
|
+ border-bottom: 1px solid #ffffff;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 24px;
|
|
|
+ color: white;
|
|
|
+ width: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ justify-content: center;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ border-bottom: none;
|
|
|
+ background: #333333;
|
|
|
+ padding: 5px;
|
|
|
+ height: 28px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ border-color: #ffffff;
|
|
|
+ border-bottom: 2px solid transparent;
|
|
|
+ margin-bottom: -2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .panes {
|
|
|
+ grid-row: 2;
|
|
|
+
|
|
|
+ display: grid;
|
|
|
+ grid-template-rows: 100%;
|
|
|
+
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .infoMessage {
|
|
|
+ opacity: 0.5;
|
|
|
+ color: white;
|
|
|
+ margin: 15px 5px 0px 5px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .pane {
|
|
|
+ color: white;
|
|
|
+
|
|
|
+ overflow-x: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ -webkit-user-select: none;
|
|
|
+ -moz-user-select: none;
|
|
|
+ -ms-user-select: none;
|
|
|
+ user-select: none;
|
|
|
+
|
|
|
+ .underline {
|
|
|
+ border-bottom: 0.5px solid rgba(255, 255, 255, 0.5);
|
|
|
+ }
|
|
|
+
|
|
|
+ .textureLinkLine {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: auto 1fr;
|
|
|
+
|
|
|
+ .debug {
|
|
|
+ grid-column: 1;
|
|
|
+ margin-left: 5px;
|
|
|
+ margin-right: 5px;
|
|
|
+ display: grid;
|
|
|
+ align-items: center;
|
|
|
+ justify-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ opacity: 0.5;
|
|
|
+
|
|
|
+ &.selected {
|
|
|
+ opacity: 1.0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .textLine {
|
|
|
+ grid-column: 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .messageLine {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ font-style: italic;
|
|
|
+ opacity: 0.6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconMessageLine {
|
|
|
+ padding-left: $line-padding-left;
|
|
|
+ height: 30px;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 30px 1fr;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ grid-column: 1;
|
|
|
+ display: grid;
|
|
|
+ align-items: center;
|
|
|
+ justify-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ grid-column: 2;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .textLine {
|
|
|
+ padding-left: $line-padding-left;
|
|
|
+ height: 30px;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr auto;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ grid-column: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .link-value {
|
|
|
+ grid-column: 2;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ text-align: end;
|
|
|
+ opacity: 0.8;
|
|
|
+ margin:5px;
|
|
|
+ margin-top: 6px;
|
|
|
+ max-width: 140px;
|
|
|
+ text-decoration: underline;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ grid-column: 2;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ text-align: end;
|
|
|
+ opacity: 0.8;
|
|
|
+ margin:5px;
|
|
|
+ margin-top: 6px;
|
|
|
+ max-width: 200px;
|
|
|
+ -webkit-user-select: text;
|
|
|
+ -moz-user-select: text;
|
|
|
+ -ms-user-select: text;
|
|
|
+ user-select: text;
|
|
|
+
|
|
|
+ &.check {
|
|
|
+ color: green;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.uncheck {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .textInputLine {
|
|
|
+ padding-left: $line-padding-left;
|
|
|
+ height: 30px;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 120px;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ grid-column: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ grid-column: 2;
|
|
|
+
|
|
|
+ input {
|
|
|
+ width: 110px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .buttonLine {
|
|
|
+ height: 30px;
|
|
|
+ display: grid;
|
|
|
+ align-items: center;
|
|
|
+ justify-items: stretch;
|
|
|
+
|
|
|
+ input[type="file"] {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .file-upload {
|
|
|
+ background: transparent;
|
|
|
+ border: 1px solid rgb(51, 122, 183);
|
|
|
+ margin: 0px 10px;
|
|
|
+ color:white;
|
|
|
+ padding: 4px 5px;
|
|
|
+ opacity: 0.9;
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .file-upload:hover {
|
|
|
+ opacity: 1.0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .file-upload:active {
|
|
|
+ transform: scale(0.98);
|
|
|
+ transform-origin: 0.5 0.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ button {
|
|
|
+ background: #222222;
|
|
|
+ border: 1px solid rgb(51, 122, 183);
|
|
|
+ margin: 5px 10px 5px 10px;
|
|
|
+ color:white;
|
|
|
+ padding: 4px 5px;
|
|
|
+ opacity: 0.9;
|
|
|
+ }
|
|
|
+
|
|
|
+ button:hover {
|
|
|
+ opacity: 1.0;
|
|
|
+ }
|
|
|
+
|
|
|
+ button:active {
|
|
|
+ background: #282828;
|
|
|
+ }
|
|
|
+
|
|
|
+ button:focus {
|
|
|
+ border: 1px solid rgb(51, 122, 183);
|
|
|
+ outline: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .radioLine {
|
|
|
+ padding-left: $line-padding-left;
|
|
|
+ height: 30px;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 24px;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ grid-column: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .radioContainer {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .radio {
|
|
|
+ grid-column: 2;
|
|
|
+ display: none;
|
|
|
+
|
|
|
+ &:checked + label:before {
|
|
|
+ border-color: rgb(51, 122, 183);
|
|
|
+ }
|
|
|
+ &:checked + label:after {
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .labelForRadio {
|
|
|
+ display: inline-block;
|
|
|
+ height: 14px;
|
|
|
+ position: relative;
|
|
|
+ padding: 0 24px;
|
|
|
+ margin-bottom: 0;
|
|
|
+ cursor: pointer;
|
|
|
+ vertical-align: bottom;
|
|
|
+ &:before, &:after {
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ border-radius: 50%;
|
|
|
+ transition: all .3s ease;
|
|
|
+ transition-property: transform, border-color;
|
|
|
+ }
|
|
|
+ &:before {
|
|
|
+ left: 0px;
|
|
|
+ top: 0;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ border: 2px solid white;
|
|
|
+ }
|
|
|
+ &:after {
|
|
|
+ top: 6px;
|
|
|
+ left: 6px;
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ transform: scale(0);
|
|
|
+ background:rgb(51, 122, 183);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .vector3Line {
|
|
|
+ padding-left:$line-padding-left;
|
|
|
+ display: grid;
|
|
|
+
|
|
|
+ .firstLine {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr auto 20px;
|
|
|
+ height: 30px;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ grid-column: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .vector {
|
|
|
+ grid-column: 2;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ text-align: right;
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .expand {
|
|
|
+ grid-column: 3;
|
|
|
+ display: grid;
|
|
|
+ align-items: center;
|
|
|
+ justify-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .secondLine {
|
|
|
+ display: grid;
|
|
|
+ padding-right: 5px;
|
|
|
+ border-left: 1px solid rgb(51, 122, 183);
|
|
|
+
|
|
|
+ .numeric {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .numeric-label {
|
|
|
+ text-align: right;
|
|
|
+ grid-column: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-self: right;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .numeric-value {
|
|
|
+ width: 120px;
|
|
|
+ grid-column: 2;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border: 1px solid rgb(51, 122, 183);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .checkBoxLine {
|
|
|
+ padding-left: $line-padding-left;
|
|
|
+ height: 30px;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr auto;
|
|
|
+
|
|
|
+
|
|
|
+ .label {
|
|
|
+ grid-column: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .checkBox {
|
|
|
+ grid-column: 2;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .lbl {
|
|
|
+ position: relative;
|
|
|
+ display: block;
|
|
|
+ height: 14px;
|
|
|
+ width: 34px;
|
|
|
+ margin-right: 5px;
|
|
|
+ background: #898989;
|
|
|
+ border-radius: 100px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .lbl:after {
|
|
|
+ position: absolute;
|
|
|
+ left: 3px;
|
|
|
+ top: 2px;
|
|
|
+ display: block;
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ border-radius: 100px;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
|
|
|
+ content: '';
|
|
|
+ transition: all 0.15s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .lbl:active:after {
|
|
|
+ transform: scale(1.15, 0.85);
|
|
|
+ }
|
|
|
+
|
|
|
+ .cbx:checked ~ label {
|
|
|
+ background: rgb(51, 122, 183);
|
|
|
+ }
|
|
|
+
|
|
|
+ .cbx:checked ~ label:after {
|
|
|
+ left: 20px;
|
|
|
+ background: rgb(22, 73, 117);
|
|
|
+ }
|
|
|
+
|
|
|
+ .hidden {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .textureLine {
|
|
|
+ display: grid;
|
|
|
+ grid-template-rows: 30px auto;
|
|
|
+
|
|
|
+ .control {
|
|
|
+ margin-top: 2px;
|
|
|
+ grid-row: 1;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 40px 40px 40px 40px 40px 1fr;
|
|
|
+
|
|
|
+ .red {
|
|
|
+ grid-column: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .green {
|
|
|
+ grid-column: 3;
|
|
|
+ }
|
|
|
+
|
|
|
+ .blue {
|
|
|
+ grid-column: 4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .alpha {
|
|
|
+ grid-column: 5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .all {
|
|
|
+ grid-column: 6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .control3D {
|
|
|
+ margin-top: 2px;
|
|
|
+ grid-row: 1;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 40px 40px 40px 40px 40px 40px 1fr;
|
|
|
+
|
|
|
+ .px {
|
|
|
+ grid-column: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nx {
|
|
|
+ grid-column: 3;
|
|
|
+ }
|
|
|
+
|
|
|
+ .py {
|
|
|
+ grid-column: 4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ny {
|
|
|
+ grid-column: 5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pz {
|
|
|
+ grid-column: 6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nz {
|
|
|
+ grid-column: 7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .command {
|
|
|
+ border: 1px solid transparent;
|
|
|
+ background:transparent;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .selected {
|
|
|
+ border: 1px solid rgb(51, 122, 183);
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview {
|
|
|
+ grid-row: 2;
|
|
|
+ display: grid;
|
|
|
+ align-self: center;
|
|
|
+ justify-self: center;
|
|
|
+ height: 256px;
|
|
|
+ width: 256px;
|
|
|
+ margin-top: 5px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ border: 2px solid rgba(255, 255, 255, 0.4);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .gltf-extension-property {
|
|
|
+ margin-left: 30px;
|
|
|
+ border-left: 1px solid rgb(51, 122, 183);
|
|
|
+ }
|
|
|
+
|
|
|
+ .floatLine {
|
|
|
+ padding-left: $line-padding-left;
|
|
|
+ height: 30px;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 120px;
|
|
|
+
|
|
|
+
|
|
|
+ .label {
|
|
|
+ grid-column: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ grid-column: 2;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ input {
|
|
|
+ width: 110px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sliderLine {
|
|
|
+ padding-left: 2px;
|
|
|
+ height: 30px;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr auto;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ grid-column: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slider {
|
|
|
+ grid-column: 2;
|
|
|
+ margin-right: 5px;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .range {
|
|
|
+ -webkit-appearance: none;
|
|
|
+ width: 120px;
|
|
|
+ height: 6px;
|
|
|
+ background: #d3d3d3;
|
|
|
+ border-radius: 5px;
|
|
|
+ outline: none;
|
|
|
+ opacity: 0.7;
|
|
|
+ -webkit-transition: .2s;
|
|
|
+ transition: opacity .2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .range:hover {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .range::-webkit-slider-thumb {
|
|
|
+ -webkit-appearance: none;
|
|
|
+ appearance: none;
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: rgb(51, 122, 183);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .range::-moz-range-thumb {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: rgb(51, 122, 183);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .color3Line {
|
|
|
+ padding-left: $line-padding-left;
|
|
|
+ display: grid;
|
|
|
+
|
|
|
+ .firstLine {
|
|
|
+ height: 30px;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr auto 20px 20px;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ grid-column: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .color3 {
|
|
|
+ grid-column: 2;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ input[type="color"] {
|
|
|
+ -webkit-appearance: none;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.5);
|
|
|
+ padding: 0;
|
|
|
+ width: 30px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ input[type="color"]::-webkit-color-swatch-wrapper {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ input[type="color"]::-webkit-color-swatch {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ input {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .copy {
|
|
|
+ grid-column: 3;
|
|
|
+ display: grid;
|
|
|
+ align-items: center;
|
|
|
+ justify-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .expand {
|
|
|
+ grid-column: 4;
|
|
|
+ display: grid;
|
|
|
+ align-items: center;
|
|
|
+ justify-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .secondLine {
|
|
|
+ display: grid;
|
|
|
+ padding-right: 5px;
|
|
|
+ border-left: 1px solid rgb(51, 122, 183);
|
|
|
+
|
|
|
+ .numeric {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .numeric-label {
|
|
|
+ text-align: right;
|
|
|
+ grid-column: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-self: right;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .numeric-value {
|
|
|
+ width: 120px;
|
|
|
+ grid-column: 2;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border: 1px solid rgb(51, 122, 183);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .listLine {
|
|
|
+ padding-left: $line-padding-left;
|
|
|
+ height: 30px;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr auto;
|
|
|
+
|
|
|
+
|
|
|
+ .label {
|
|
|
+ grid-column: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .options {
|
|
|
+ grid-column: 2;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 5px;
|
|
|
+
|
|
|
+ select {
|
|
|
+ width: 115px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .paneContainer {
|
|
|
+ margin-top: 3px;
|
|
|
+ display:grid;
|
|
|
+ grid-template-rows: 100%;
|
|
|
+ grid-template-columns: 100%;
|
|
|
+
|
|
|
+ .paneList {
|
|
|
+ border-left: 3px solid transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ .paneList {
|
|
|
+ border-left: 3px solid rgba(51, 122, 183, 0.8);
|
|
|
+ }
|
|
|
+
|
|
|
+ .paneContainer-content {
|
|
|
+ .header {
|
|
|
+ .title {
|
|
|
+ border-left: 3px solid rgb(51, 122, 183);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .paneContainer-highlight-border {
|
|
|
+ grid-row: 1;
|
|
|
+ grid-column: 1;
|
|
|
+ opacity: 1;
|
|
|
+ border: 3px solid red;
|
|
|
+ transition: opacity 250ms;
|
|
|
+ pointer-events: none;
|
|
|
+
|
|
|
+ &.transparent {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .paneContainer-content {
|
|
|
+ grid-row: 1;
|
|
|
+ grid-column: 1;
|
|
|
+
|
|
|
+ .header {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr auto;
|
|
|
+ background: #555555;
|
|
|
+ height: 30px;
|
|
|
+ padding-right: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ border-left: 3px solid transparent;
|
|
|
+ padding-left: 5px;
|
|
|
+ grid-column: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .collapse {
|
|
|
+ grid-column: 2;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-items: center;
|
|
|
+ transform-origin: center;
|
|
|
+
|
|
|
+ &.closed {
|
|
|
+ transform: rotate(180deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .paneList > div:not(:last-child) {
|
|
|
+ border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .fragment > div:not(:last-child) {
|
|
|
+ border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
Trevor Baron