@elyx-code/editor-ui 0.0.2

package/src/main.css

@@ -0,0 +1,343 @@
+* {
+  font-family: Arial, Helvetica, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  box-sizing: border-box;
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+*::-webkit-scrollbar {
+  display: none;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr;
+}
+
+.grid-spacing-1 {
+  grid-gap: 20px;
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+}
+
+:root {
+  /* Greyscale */
+  --color-main-grey: #3f3f40;
+  --color-light-grey: #a1a1a1;
+  --color-dark-grey: #212121;
+  /* 20% transparency black */
+  --color-lighter-grey: #cccccc; 
+  --color-background-grey: #f5f5f5;
+
+  /* Primary */
+  --color-main-primary: #6F36FF;
+  --color-support-primary: #A543E1;
+  --color-text-primary: #6F36FF;
+  --color-contrast-primary: #FFFFFF;
+  --color-light-contrast-primary: #c3abff;
+  /* With 0.2 transparency */
+  --color-background-primary: #6F36FF33;
+
+  /* Error */
+  --color-main-error: #D06079;
+  --color-main-dark-error:rgb(146, 57, 76);
+  --color-support-error: #FFA8B4;
+  --color-text-error: #D06079;
+  --color-contrast-error: #FFFFFF;
+  /* With 0.2 transparency */
+  --color-background-error: #D0607933;
+  
+  /* Success */
+  --color-main-success: #5FD855;
+  --color-main-dark-success:rgb(65, 159, 65);
+  --color-support-success: #A1F1A1;
+  --color-text-success: #5FD855;
+  --color-contrast-success: #FFFFFF;
+  /* With 0.2 transparency */
+  --color-background-success: #5FD85533;
+
+  /* Warning */
+  --color-main-warning: #ddad00;
+  --color-support-warning: #ffdd00;
+  --color-text-warning: #ddad00;
+  --color-contrast-warning: #FFFFFF;
+  /* With 0.2 transparency */
+  --color-background-warning: #ddad0033;
+
+  /* ------ Visual language canvas entity colors ------ */
+
+  /* Definition entity */
+  --color-background--definition-entity: #FFFFFF;
+  --color-background-support--definition-entity: #FFFFFF;
+  --color-background-suggestion--definition-entity: #FFFFFF73;
+  --color-background-support-suggestion--definition-entity: #FFFFFF73;
+  --color-background-disabled--definition-entity: #FFFFFF80;
+  --color-icon--definition-entity: #F65858;
+  --color-text--definition-entity: #000000;
+
+  /* Property */
+  --color-background--property: #FFFFFF;
+  --color-background-support--property: #FFFFFF;
+  --color-icon--property: #7e55e6;
+  --color-text--property: #000000;
+
+  /* Function calls AND operations */
+  --color-background--function-call: #B5E4FF;
+  --color-background--operation: #B5E4FF;
+  --color-background-support--function-call: #D9F1FF;
+  --color-background-support--operation: #D9F1FF;
+  --color-background-suggestion--function-call: #B5E4FF73;
+  --color-background-suggestion--operation: #B5E4FF73;
+  --color-background-support-suggestion--function-call: #D9F1FF73;
+  --color-background-support-suggestion--operation: #D9F1FF73;
+  --color-background-disabled--function-call: #B5E4FF80;
+  --color-background-disabled--operation: #B5E4FF80;
+  --color-icon--function-call: #67b7e6;
+  --color-icon--operation: #67b7e6;
+  --color-text--function-call: var(--color-dark-grey);
+  --color-text--operation: var(--color-dark-grey);
+
+  /* Internal calls */
+  --color-background--internal-call: #c5e8fc;
+  --color-background-support--internal-call: #D9F1FF;
+  --color-background-suggestion--internal-call: #D9F1FF73;
+  --color-background-support-suggestion--internal-call: #D9F1FF73;
+  --color-background-disabled--internal-call: #D9F1FF80;
+  --color-icon--internal-call: #c5e8fc;
+  --color-text--internal-call: var(--color-dark-grey);
+
+  /* Events AND function declarations */
+  --color-background--global-event: #A7D489;
+  --color-background--function-declaration: #A7D489;
+  --color-background-support--global-event: #D5E7B8;
+  --color-background-support--function-declaration: #D5E7B8;
+  --color-background-suggestion--function-declaration: #A7D48973;
+  --color-background-suggestion--global-event: #A7D48973;
+  --color-background-support-suggestion--function-declaration: #D5E7B873;
+  --color-background-support-suggestion--global-event: #D5E7B873;
+  --color-background-disabled--global-event: #A7D48980;
+  --color-background-disabled--function-declaration: #A7D48980;
+  --color-icon--global-event: #A7D489;
+  --color-icon--function-declaration: #A7D489;
+  --color-text--global-event: var(--color-dark-grey);
+  --color-text--function-declaration: var(--color-dark-grey);
+
+  /* Project */
+  --color-background--project: #FFFFFF;
+  --color-background-support--project: #FFFFFF;
+  --color-background-suggestion--project: #FFFFFF73;
+  --color-background-support-suggestion--project: #FFFFFF73;
+  --color-background-disabled--project: #FFFFFF80;
+  --color-icon--project: #A543E1;
+  --color-text--project: #000000;
+
+  /* Condition */
+  --color-background--condition: #F5D056;
+  --color-background-support--condition: #FFE9A1;
+  --color-background-suggestion--condition: #F5D05673;
+  --color-background-support-suggestion--condition: #FFE9A173;
+  --color-background-disabled--condition: #F5D05680;
+  --color-icon--condition: #F5D056;
+  --color-text--condition: var(--color-dark-grey);
+
+  /* Return statements */
+  --color-background--return-statement: #F97C7C;
+  --color-background-light--return-statement: #F9A9A9;
+  --color-background--continue-statement: #F97C7C;
+  --color-background-light--continue-statement: #F9A9A9;
+  --color-background--break-statement: #F97C7C;
+  --color-background-light--break-statement: #F9A9A9;
+  --color-background-support--return-statement: #FFC4C4;
+  --color-background-support--continue-statement: #FFC4C4;
+  --color-background-support--break-statement: #FFC4C4;
+  --color-background-suggestion--return-statement: #F97C7C73;
+  --color-background-suggestion--continue-statement: #F97C7C73;
+  --color-background-suggestion--break-statement: #F97C7C73;
+  --color-background-support-suggestion--return-statement: #FFC4C473;
+  --color-background-support-suggestion--continue-statement: #FFC4C473;
+  --color-background-support-suggestion--break-statement: #FFC4C473;
+  --color-background-disabled--return-statement: #F97C7C80;
+  --color-background-disabled--continue-statement: #F97C7C80;
+  --color-background-disabled--break-statement: #F97C7C80;
+  --color-icon--return-statement: #F97C7C;
+  --color-icon--continue-statement: #F97C7C;
+  --color-icon--break-statement: #F97C7C;
+  --color-text--return-statement: var(--color-dark-grey);
+  --color-text--continue-statement: var(--color-dark-grey);
+  --color-text--break-statement: var(--color-dark-grey);
+
+  /* Variables */
+  --color-background--variable-declaration: #D4D3D4;
+  --color-background--variable-instance: #D4D3D4;
+  --color-background-support--variable-declaration: #ECECEC;
+  --color-background-support--variable-instance: #ECECEC;
+  --color-background-suggestion--variable-declaration: #D4D3D473;
+  --color-background-suggestion--variable-instance: #D4D3D473;
+  --color-background-support-suggestion--variable-declaration: #ECECEC73;
+  --color-background-support-suggestion--variable-instance: #ECECEC73;
+  --color-background-disabled--variable-declaration: #D4D3D480;
+  --color-background-disabled--variable-instance: #D4D3D480;
+  --color-icon--variable-declaration: #7a7a7a;
+  --color-icon--variable-instance: #7a7a7a;
+  --color-text--variable-declaration: var(--color-dark-grey);
+  --color-text--variable-instance: var(--color-dark-grey);
+
+  /* Loop */
+  --color-background--loop: #FFBA90;
+  --color-background-support--loop: #FCDBC7;
+  --color-background-suggestion--loop: #FFBA9073;
+  --color-background-support-suggestion--loop: #FCDBC773;
+  --color-background-disabled--loop: #FFBA9080;
+  --color-icon--loop: #f58845;
+  --color-text--loop: var(--color-dark-grey);
+
+  /* Search */
+  --color-background--search: #FFA8E7;
+  --color-background-support--search: #FFD3EE;
+  --color-background-suggestion--search: #FFA8E773;
+  --color-background-support-suggestion--search: #FFD3EE73;
+  --color-background-disabled--search: #FFA8E780;
+  --color-icon--search: #e87dca;
+  --color-text--search: var(--color-dark-grey);
+
+  /* Literal values colors */
+
+  --color-string--value: #3F9D00;
+  --color-number--value: #6312D3;
+  --color-boolean--value: #B40000;
+  --color-list--value: #DBAA00;
+  --color-object--value: #6e6f70;
+}
+
+.error-background {
+  background-color: var(--color-main-error) !important;
+  color: var(--color-contrast-error) !important;
+}
+
+.success-background {
+  background-color: var(--color-main-success) !important;
+  color: var(--color-contrast-success) !important;
+}
+
+button.icon-button {
+  align-items: center;
+  font-family: inherit;
+  font-weight: 500;
+  font-size: 16px;
+  color: var(--color-main-grey);
+  background: transparent;
+  border: none;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  width: 22px;
+  height: 22px;
+}
+
+button.icon-button:disabled {
+  color: rgba(0, 0, 0, 0.2);
+  cursor: unset;
+}
+
+button.icon-button.selected {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+@keyframes slide-top-down {
+  from {
+    top: -1000px;
+  }
+
+  to {
+    top: 16px;
+  }
+}
+
+@keyframes slide-back-up {
+  from {
+    top: 16px;
+  }
+
+  to {
+    top: -1000px;
+  }
+}
+
+@keyframes slide-bottom-up {
+  from {
+    bottom: -1000px;
+  }
+
+  to {
+    bottom: 20px;
+  }
+}
+
+/* bounce animation */
+.bounce {
+  animation: bounce 0.5s infinite;
+}
+@keyframes bounce {
+  from, to { transform: scale(1, 1); }
+  25% { transform: scale(0.9, 1.1); }
+  50% { transform: scale(1.1, 0.9); }
+  75% { transform: scale(0.95, 1.05); }
+}
+
+br.quarter-space {
+  content: "";
+  display: block;
+  margin: 0.25em;
+}
+
+br.eighth-space {
+  content: "";
+  display: block;
+  margin: 0.125em;
+}
+
+/* --- This is to allow tooltips over dropdown field options --- */
+.MuiAutocomplete-listbox li[aria-disabled="true"] {
+  pointer-events: inherit !important;
+}
+
+.MuiAutocomplete-listbox li[aria-disabled="true"]:hover,
+.MuiAutocomplete-listbox li[aria-disabled="true"]:focus {
+  background: white !important;
+}
+
+.MuiAutocomplete-listbox li[aria-disabled="true"]:active {
+  background: white !important;
+  pointer-events: none !important;
+}
+/* --- --- */
+
+iframe#connect-ui {
+  border: none;
+}