:root { --spacing-none: 0; --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 2rem; --spacing-lg: 3.5rem; --spacing-xl: 20rem; } * {font-family: sans-serif;} /* div */ .login-container {position: relative; background: #2A2A2A; width: 100%; height: 100vh; display: flex; justify-content: center; align-items:center} .logo { position: absolute; top: 50px; left: 50%; transform: translateX(-50%);} .editor-frame__frame-container { position: relative; flex: 1; height: calc(100vh - 36px); margin: 0; background-color: #1E1E1E; display: flex; flex-direction: column; align-items: center;} .top-frame { width: 100%; height: calc(100vh - 37px); border: none; margin: 0; padding: 0; overflow: visible; } .editor-frame { display: flex; width:100%; position: relative; } .editor-frame__dropdown { width: 40%;} .editor { margin: 0; padding: 0; } /* SPACING */ /* ------------------------------------------------------------------------------------------------ */ /* padding, spacing between child elements */ /* common variables for spacing and padding */ /* vertical + horizontal spacing for child elements */ .spacing-0 > div { margin-top: var(--spacing-none); margin-right: var(--spacing-none); margin-bottom: var(--spacing-none); margin-left: var(--spacing-none); } .spacing-1 > div { margin-top: var(--spacing-xs); margin-right: var(--spacing-xs); margin-bottom: var(--spacing-xs); margin-left: var(--spacing-xs); } .spacing-2 > div { margin-top: var(--spacing-sm); margin-right: var(--spacing-sm); margin-bottom: var(--spacing-sm); margin-left: var(--spacing-sm); } .spacing-3 > div { margin-top: var(--spacing-md); margin-right: var(--spacing-md); margin-bottom: var(--spacing-md); margin-left: var(--spacing-md); } .spacing-4 > div { margin-top: var(--spacing-lg); margin-right: var(--spacing-lg); margin-bottom: var(--spacing-lg); margin-left: var(--spacing-lg); } .spacing-5 > div { margin-top: var(--spacing-xl); margin-right: var(--spacing-xl); margin-bottom: var(--spacing-xl); margin-left: var(--spacing-xl); } /* horizontal spacing for child elements */ .spacing-x-0 > div { margin-left: var(--spacing-none); margin-right: var(--spacing-none); } .spacing-x-1 > div { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); } .spacing-x-2 > div { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); } .spacing-x-3 > div { margin-left: var(--spacing-md); margin-right: var(--spacing-md); } .spacing-x-4 > div { margin-left: var(--spacing-lg); margin-right: var(--spacing-lg); } .spacing-x-5 > div { margin-left: var(--spacing-xl); margin-right: var(--spacing-xl); } /* vertical spacing for child elements */ .spacing-y-0 > div { margin-top: var(--spacing-none); margin-bottom: var(--spacing-none); } .spacing-y-1 > div { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); } .spacing-y-2 > div { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); } .spacing-y-3 > div { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); } .spacing-y-4 > div { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); } .spacing-y-5 > div { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); } /* padding */ .padding-0 { padding: var(--spacing-none); } .padding-1 { padding: var(--spacing-xs); } .padding-2 { padding: var(--spacing-sm); } .padding-3 { padding: var(--spacing-md); } .padding-4 { padding: var(--spacing-lg); } .padding-5 { padding: var(--spacing-xl); } /* horizontal padding */ .padding-x-0 { padding-left: var(--spacing-none); padding-right: var(--spacing-none); } .padding-x-1 { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); } .padding-x-2 { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); } .padding-x-3 { padding-left: var(--spacing-md); padding-right: var(--spacing-md); } .padding-x-4 { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); } .padding-x-5 { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); } /* vertical padding */ .padding-y-0 { padding-top: var(--spacing-none); padding-bottom: var(--spacing-none); } .padding-y-1 { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); } .padding-y-2 { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); } .padding-y-3 { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); } .padding-y-4 { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); } .padding-y-5 { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); } .cursor-pointer {cursor: pointer;} /* Editor Table */ input[type='radio'], input[type='checkbox'] {outline: none;border: none;accent-color: #0C8CE9;} button {border-radius: 5px; transition: all 100ms ease-in-out;} table { border-collapse: collapse; margin: 0; width: 100%; color: #D1D1D1;} table caption { position: relative; display: flex; flex-direction: row; justify-content: center; background-color: #1E1E1E; color: white; padding: 10px; font-size: 14px; font-weight: bold; } table th,.variable-table td { font-size: 13px; border-style: solid; border-color: #212121; border-width: 0 1px 1px 0; word-break: break-all;} table td input[type="text"] { border: none; outline: none; padding: 4px; margin: 0; width:95%; min-width: 100px; font-size: 13px; background-color: transparent; color: #D1D1D1; } table th { background-color: #404040; text-transform: capitalize; text-align: left; vertical-align: top; width: 20%; min-width: 60px; padding-left: 4px; padding-top: 4px; font-weight: 500;} table td:first-child { width: 40%; min-width: 30px; padding-left: 4px; font-weight: 500;} table table tr:last-child td { border-bottom: 0;} td, th { word-break:keep-all; } tr td:last-child { border-right: none;} table tr:not(:last-child) { border-bottom: 1px solid #212121;} .handlebar-table { border-collapse: collapse; margin: 0; width: 100%; overflow: scroll; color: #D1D1D1;} .handlebar-table caption { background-color: #1E1E1E; color: white; padding: 10px; font-size: 14px; font-weight: bold; } .handlebar-table th,.handlebar-table td { border: 1px solid #cfc7c7; padding: 2px; font-size: 13px;border-style: solid; border-color: #212121; border-width: 0px 1px 1px 0px; word-break: break-all;} .handlebar-table th { background-color: #404040; text-transform: capitalize; text-align: left; vertical-align: top;} .handlebar-table td input[type="text"] { border: none; outline: none; padding: 4px !important; margin: 0; width:95%; min-width: 100px; font-size: 13px; background-color: transparent; color: #D1D1D1; } .handlebar-table td:first-child { width: 20%;} td.selected-section {cursor: pointer; padding: 5px; text-align: center; transition: background-color 100ms ease-in-out; max-width: 300px; text-overflow: ellipsis; word-break: keep-all; white-space: nowrap; overflow: hidden;} td.selected-section:hover {background-color: #404040;} td.table-options {padding: 0;} /* Editor Container */ .editor-table1 { max-height:50vh;} .variable-table__body { display: block; height:calc(35vh - 75px); overflow-y: scroll; overflow-x: auto; width: 100%; } .variable-table__body tr { display: table; overflow-y: auto; width: calc(100% - 1px); } .editor-table2 { max-height:calc(50vh - 1px); } .handlebar-table__body { display: block; height:calc(35vh - 83px); overflow-y: scroll; overflow-x: auto; width: 100%; } .handlebar-table__body tr { display: table; overflow-y: auto; width: calc(100% - 1px); } .editor-frame__table-container { position: relative; width: 420px; display: flex; flex-direction: column; row-gap: 1px; background-color: #2A2A2A; border-left: 2px solid #2A2A2A; height: calc(100vh - 36px); overflow-y: auto; } .editor-frame__table-container.hide { display: none;} .dropdown { position: relative; display: inline-block; width: 95%; } .dropdown_input { width: 100%; padding: 10px; box-sizing: border-box; cursor: pointer;} .dropdown__content { display: none; position: absolute; top: 100%; background-color: #2A2A2A; width: 100%; box-shadow: 1px 3px 15px 4px rgba(0, 0, 0, 0.4); z-index: 1; max-height: 200px; overflow-y: auto;} .dropdown__content div { display: flex; flex-direction: row; padding: 5px; background-color: #2A2A2A; align-items: center;} .dropdown__content input[type="checkbox"] { width: 10px; min-width: none;} .dropdown__content input[type="radio"] { width: 10px; min-width: none;} .dropdown input[type="text"] { min-width: 100px; width: 100%;} .show { display: block; } .dropdown__content.open-up { top: 0%; transform: translateY(-100%); } .editor-frame__options { padding: 5px; display: flex; flex-direction: row; column-gap: 10px;} .editor-frame__options label { font-size: 14px; color: #D1D1D1; vertical-align: middle;} .editor-frame__options input { font-size: 14px; color: #D1D1D1; vertical-align: middle;} .editor-frame__options select { flex-grow: 1; border: none; outline: none; background-color: #1E1E1E; color: #D1D1D1; padding: 1px;} .table-options > .editor-frame__options {padding: 5px 5px 5px 0px;} .table-options > .editor-frame__options label {font-size: 13px;} #resizer { width: 10px; position: absolute; top: 0; bottom: 0; right: 410px; background-color:transparent; cursor:col-resize; z-index: 999;} .actions { position: absolute; right: 10px; } .actions__container { position: relative; display: inline-block; } .actions__dropdown { display: none; position: absolute; right: 0; background-color: #2A2A2A; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .actions__dropdown button { cursor: pointer; color: #D1D1D1; padding: 6px 8px; text-decoration: none; display: block; width: 100%; border: none; background: none; text-align: left; } .actions__dropdown button i { margin-right: 10px;} .actions__dropdown button:hover { background-color: #404040; } .btn-action { background: none; border: none; cursor: pointer; font-size: 16px; color: #ffffff; opacity: 0.7;} .btn-action:hover { opacity: 1;} .btn-action:focus + .actions__dropdown, .actions__dropdown:focus { display: block; } .btn-action:focus { outline: none; } .selected-element {background-color: #2A2A2A; height: fit-content;} .selected-element__header { position: relative; display: flex; flex-direction: row; justify-content: center; background-color: #1E1E1E; color: white; padding: 10px; font-size: 14px; font-weight: bold; } .selected-element__body {display: flex; flex-direction: row; justify-content: space-between; height: calc(30vh - 190px);} #selectedElement {font-size: 14px; color: #ffffff; font-weight: 600;} #classList {list-style-type: none; font-size: 13px; color: #D1D1D1; margin: 0; padding: 0;} #classList li {margin-bottom: 3px;} #classList li:hover {color: #fff;} .selected-element__class-list {display: flex; flex-direction: column; row-gap: 10px; padding: 10px 15px; overflow-y: auto; overflow-x: hidden; height: calc(30vh - 190px); flex-grow: 1;} .selected-element__properties {position: relative; display: none; background-color: #404040; font-size: 13px; color: #D1D1D1; width: 50%; padding: 10px; overflow-y: auto; overflow-x: auto; height: calc(30vh - 190px); border: 1px solid #1E1E1E;} .selected-element__btn-close {cursor: pointer; position: absolute; top: 2px; left: 5px; font-size: 16px;} .selected-element__btn-close:hover {color: #fff;} .top-menu-bar { display: flex; flex-direction: row; background-color: #2A2A2A; border-bottom: 1px solid #404040; padding: 0.1rem; margin: 0; color: #D1D1D1; z-index: 999; font-size: 14px; height: 32px; align-items: center;} .top-menu-bar.fixed { position: fixed; top: 0; right: 0; left: 0;} .top-menu-bar details { z-index: 999; position: relative; margin-right: 10px; } .top-menu-bar details:hover { background-color: #40404052; } .top-menu-bar summary { cursor: pointer; padding: 0.5rem; list-style: none; } .top-menu-bar ul { position: absolute; top: 100%; left: 0; background-color: #2A2A2A; border: 1px solid #404040; padding: 0; margin: 0; list-style: none; display: none; } .top-menu-bar ul li { padding: 0.5rem 1rem; cursor: pointer; } .top-menu-bar ul li a { text-decoration: none; color: #D1D1D1; } .top-menu-bar ul li:hover { background-color: #404040; } details[open] ul { display: block; width: 10rem; } .top-menu-bar__logo-container {margin: 0 10px; } .top-menu-bar__logo-image {height: 20px; } button.modal__btn { padding: 10px 20px; font-size: 14px; cursor: pointer; background-color: #1E1E1E; color: #D1D1D1; border: none; outline: none; } button.modal__btn:hover { background-color: #404040; } /* Existing Styles */ .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); animation: fadeIn 0.5s; color: #D1D1D1;} .modal__content { background-color: #2A2A2A; margin: 15% auto; padding: 20px; border: 1px solid #404040; width: 80%; max-width: 500px; text-align: center; animation: slideDown 0.5s; border-radius: 5px;} .section-modal .modal__content { margin: 5vh auto 0 auto; max-width: 1200px;} .modal__btn-close { color: #D1D1D1; float: right; font-size: 28px; font-weight: bold; cursor: pointer; transition: color 0.3s; } .modal__btn-close:hover, .modal__btn-close:focus { color: #888; } .modal__list { list-style-type: none; padding: 0; max-height: 200px; overflow-y: auto; margin: 20px 0; border: 1px solid #404040; background-color: #1E1E1E; } .modal__list li { padding: 10px; border-bottom: 1px solid #404040; cursor: pointer; transition: background-color 0.3s; } .modal__list li:hover { background-color: #404040; } .modal__list li:first-child { border-top: 0; } li.selected { background-color: #555; } .spinner {display: none;width: 10px;height: 10px;border: 2px solid rgba(0, 0, 0, 0.1);border-radius: 50%;border-top-color: #fff;animation: spin 1s ease-in-out infinite;vertical-align: middle;margin-right: 5px;} .modal__btn.loading > .spinner {display: inline-block;} .modal__btn:disabled {color: #555;} .user-menu {margin-left: auto;} .user-menu ul {right: 0; left: unset;} .user-menu__photo {width: 20px; height: 20px; border-radius: 100%; vertical-align: middle; margin-left: 10px;} .main-title {padding: 0 25px;border-right: 1px solid hsla(0,0%,100%,.6);color: #fff;font-size: 40px;font-weight: 300;} .google-login__link {display: flex; flex-wrap: wrap; text-decoration: none; align-items: center;padding: 20px 20px 20px 80px;transition: background-color .15s,border-color .15s ease-in;border: 1px solid #fff;border-radius: 100px;background: url('/assets/google_icon.svg') no-repeat left 22px center/43px;color: #fff;font-size: 20px;} .google-login {justify-content: center;padding: 0 25px;} .google-login__link:after {display: inline-block;width: 45px;height: 18px;margin-left: 15px;transition: -webkit-transform .15s ease-in;transition: transform .15s ease-in;transition: transform .15s ease-in,-webkit-transform .15s ease-in;background: url('/assets/long-arrow-right.svg') no-repeat 0/contain;content: "";} .google-login__link:hover:after {-webkit-transform: translateX(5px);transform: translateX(5px);} .google-login__link:hover {background-color: #404040;} .modal input[type="text"] { width: 100%; padding: 10px; margin: 20px 0; border: 1px solid #404040; background-color: #1E1E1E; color: #D1D1D1; border-radius: 4px; } .container {height: 100vh; background-color: #2A2A2A; color: #D1D1D1; overflow: auto;} .content {width: 1200px; max-width: 90%; margin: auto;} .heading {display: flex; justify-content: space-between; margin: 30px 0; align-items: center; border-bottom: 1px solid #40404085;} .heading__title {font-size: 32px;} .heading-actions__button {cursor: pointer;font-size: 14px; font-weight: 300; border: none; outline: none; background-color: #1E1E1E; color: #D1D1D1; padding: 5px 10px; border-radius: 5px; transition: all 100ms ease-in-out;} .heading-actions__button:hover {background-color: #404040;} .project-grid {margin: 60px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } .project-card {cursor: pointer;} .project-card__thumbnail {height: 180px; width: 100%; overflow: hidden; border-radius: 5px;} .project-card__thumbnail img {object-fit: cover; height: 180px; width: 100%; transition: transform 500ms ease-in-out;} .project-card__title {cursor: pointer; font-size: 14px; font-weight: 300; padding: 15px 0; transition: color 500ms ease-in-out; display: flex; flex-direction: row; justify-content: space-between; align-items: center;} .project-card:hover {color: #fff;} .project-card:hover img {transform: scale(1.05);} select#insertion { flex-grow: 1; border: none; outline: none; background-color: #1E1E1E; color: #D1D1D1; padding: 1px; width: 100%; font-size: 16px; margin-bottom: 20px;} .project-card__options:hover { opacity: 1;} .project-card__options:focus + .actions__dropdown, .actions__dropdown:focus { display: block; } .actions__container:focus-within .actions__dropdown { display: block; } .project-card__options:focus { outline: none; } .project-card__options {cursor: pointer; border: none; outline: none; background-color: transparent; color: #D1D1D1;} .project-card__title label {cursor: pointer; flex-grow: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .toast-message {display: none; position: fixed; bottom: 20px; left: 20px; background-color: #2A2A2A; color: #D1D1D1; font-size: 14px; font-weight: 600; padding:10px 15px; border-radius: 2px; animation: fadeOut 5000ms ease-out forwards;} .design-overlay {display: none; position: absolute; top: 0; bottom: 0; left: 0; width: 100%;overflow: auto;} .design-overlay.show {display: block;} .design-overlay__image {opacity: 0.3;} .design-overlay__image.fit-width {width: 100%; object-fit: cover;} .design-overlay::-webkit-scrollbar { width: 5px; } .design-overlay::-webkit-scrollbar-track { background: #cccccc; } .design-overlay::-webkit-scrollbar-thumb { background: #404040; } .design-overlay::-webkit-scrollbar-thumb:hover { background: #404040; } .side-bar-toggle-wrapper {cursor: pointer; border-radius: 5px; margin-right: 10px; padding: 2px; transition: background-color 100ms ease-in-out;} .side-bar-toggle-wrapper.active {background-color: #404040;} .side-bar-toggle-wrapper:hover {background-color: #404040;} .side-bar-toggle {width: 20px; height: 20px;} hr {margin: 0; padding: 0; border: none; background-color: #404040; height: 1px; outline: none;} .variable-link {cursor: pointer; color: #0C8CE9} .variable-link:hover {color: #054472;} tr.highlighted {color: #0C8CE9; background-color: #404040; animation: fadeBg 5s linear forwards} td.tabs-container {padding: 0; padding-left: 0 !important;} .tabs {display: flex; width: 100%;} .tabs__tab-btn {cursor: pointer; width: 50%; text-align: center; padding: 4px 0px; transition: background-color 100ms ease-in-out;} .tabs__tab-btn:hover {background-color: #404040;} .tabs__tab-btn.active {background-color: #404040; border-bottom: 1px solid #fff;} .handlebar-table__body.hide {display: none;} .section-grid {margin: 50px 0; padding-right: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; max-height: 60vh; overflow-y: auto;} .section-card {position: relative; cursor: pointer; border-radius: 5px; padding: 5px 5px 0px 5px;} .section-card__thumbnail {height: 180px; width: 100%; overflow: hidden; border-radius: 5px; background-color: #f4f4f4;} .section-card__thumbnail img {object-fit: contain; height: 180px; width: 100%; transition: transform 500ms ease-in-out;} .section-card__title {cursor: pointer; font-size: 14px; font-weight: 300; padding: 15px 0; transition: color 500ms ease-in-out;} .section-card:hover {color: #fff;} .section-card:hover .icon-check {color: #4CAF50;} .section-card:hover img {transform: scale(1.05);} .icon-check {display: none; position: absolute; top: 10px; right: 10px; z-index: 2; color: #4CAF50; font-size: 18px;} .section-card.selected {background-color: #404040;} .section-card.selected .icon-check {display: block;} .icon-check::after {content: ''; height: 15px; width: 15px; background-color: #fff; position: absolute; top: 0px; right: 2px; border-radius: 100%; z-index: -1;} .required-text {color: #F44336; padding-top: 0; font-style: italic; text-align: left;} .btn-option:disabled {color: #404040; cursor: not-allowed;} .btn-option:disabled:hover {background-color: #2A2A2A;} .btn-option > div {display: flex; flex-direction: row; align-items: center;} .btn-option > div i, .btn-option > div span {width: 16; font-size: 14px; text-align: center;} .btn-separator {border-top: 1px solid #212121 !important; border-top-left-radius: 0; border-top-right-radius: 0;} @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideDown { from { transform: translateY(-50%); } to { transform: translateY(0); } } @keyframes spin {to {transform: rotate(360deg);}} @keyframes fadeOut {0% {opacity: 1;} 60% {opacity: 1;} 100%{opacity: 0;}} @keyframes fadeBg {0% {color: #0C8CE9; background-color: #404040;} 50% {color: #0C8CE9; background-color: #404040;} 100% {color: #D1D1D1; background-color: transparent;}} @media screen and (max-width: 992px) { .section-grid {grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media screen and (max-width: 768px) { .section-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 576px) { .section-grid {grid-template-columns: repeat(1, minmax(0, 1fr)); } }