mechanica 1.0.0

package/dist/style.css

@@ -0,0 +1,697 @@
+.blocks-list .title {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary-color);
+}
+.blocks-list__blocks {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  margin-top: 6px;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+.blocks-list__block.editor-component {
+  height: 60px;
+  background: none;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background-color: var(--blocks-color);
+  font-size: 13px;
+  cursor: pointer;
+  z-index: 10000;
+  color: var(--text-secondary-color);
+  font-weight: 500;
+  padding: 0 8px;
+}
+.blocks-list__block.editor-component:hover {
+  color: var(--text-color);
+}
+.blocks-list__block.editor-component.drag {
+  color: var(--text-color);
+}.v-popover {
+  position: fixed;
+  background-color: var(--popover-color);
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+  min-width: 40px;
+  min-height: 40px;
+  transform: none;
+  z-index: 1000;
+  box-sizing: border-box;
+}
+.v-popover.v-enter-active, .v-popover.v-leave-active {
+  transition: opacity 0.12s, transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-popover.v-enter-from, .v-popover.v-leave-to {
+  opacity: 0;
+}
+.v-popover.v-enter-from.vertical, .v-popover.v-leave-to.vertical {
+  transform: scale(0.9, 0.7);
+}
+.v-popover.v-enter-from.vertical.fit-anchor, .v-popover.v-leave-to.vertical.fit-anchor {
+  transform: scale(1, 0.7);
+}
+.v-popover.v-enter-from.horizontal, .v-popover.v-leave-to.horizontal {
+  transform: scale(0.7, 0.9);
+}
+.v-popover.v-enter-from.horizontal.fit-anchor, .v-popover.v-leave-to.horizontal.fit-anchor {
+  transform: scale(0.7, 1);
+}.v-button {
+  background-color: var(--button-color);
+  color: var(--button-text-color);
+  height: 36px;
+  font-weight: 700;
+  border-radius: 20px;
+  font-size: 13px;
+  padding: 0 28px;
+  text-decoration: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  gap: 6px;
+}
+.v-button:hover {
+  background-color: var(--button-color-hover);
+}
+.v-button:active {
+  background-color: var(--button-color-pressed);
+}
+.v-button.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.v-button.flat {
+  background: none;
+  color: var(--text-color);
+}
+.v-button.flat:hover {
+  background-color: var(--hover-color);
+}
+.v-button.outline {
+  background: none;
+  border: 1px solid var(--button-color);
+  color: var(--button-color);
+}
+.v-button.outline:hover {
+  border-color: var(--button-color-hover);
+  color: var(--button-color-hover);
+}
+.v-button.outline:active {
+  border-color: var(--button-color-pressed);
+  color: var(--button-color-pressed);
+}
+.v-button.large {
+  height: 50px;
+  font-size: 14px;
+  border-radius: 16px;
+  padding: 0 32px;
+  font-weight: 600;
+}
+.v-button:focus-visible {
+  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.2509803922);
+}
+.v-button.color-red.outline {
+  border-color: var(--error-color);
+  color: var(--error-color);
+}
+.v-button svg {
+  max-width: 20px;
+  max-height: 20px;
+}.v-context-menu {
+  padding: 6px 0;
+  display: flex;
+  flex-direction: column;
+}
+.v-context-menu__item {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  background: none;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 0 16px;
+  padding-right: 32px;
+  text-decoration: none;
+  min-width: 150px;
+  box-sizing: border-box;
+  color: var(--text-color);
+  border-radius: 0;
+  text-align: start;
+  font-weight: 500;
+  justify-content: flex-start;
+}
+.v-context-menu__item:hover, .v-context-menu__item.hover {
+  background-color: var(--hover-color);
+}.page-editor-hierarchy {
+  background-color: var(--paper-color);
+  flex-shrink: 0;
+  position: relative;
+  height: 100%;
+}
+.page-editor-hierarchy__item {
+  display: flex;
+  align-items: center;
+  height: 42px;
+  padding: 0 16px;
+  font-size: 13px;
+  cursor: pointer;
+  font-weight: 500;
+  box-sizing: border-box;
+}
+.page-editor-hierarchy__item:hover, .page-editor-hierarchy__item.hover, .page-editor-hierarchy__item[data-popover-target] {
+  background-color: var(--hover-color);
+}
+.page-editor-hierarchy__item.active, .page-editor-hierarchy__item[data-source-drag] {
+  background-color: var(--background-active-color);
+  color: var(--text-active-color);
+}
+.page-editor-hierarchy__item.hoverBlock {
+  box-shadow: inset 0 0 0 2px var(--primary-color);
+}
+.page-editor-hierarchy__item.drag {
+  display: none;
+}
+.page-editor-hierarhy__place {
+  position: absolute;
+  left: 0;
+  right: 0;
+  box-sizing: border-box;
+}
+.page-editor-hierarhy__place::after {
+  content: "";
+  width: 100%;
+  display: block;
+  height: 2px;
+}
+.page-editor-hierarhy__place:hover::after {
+  background-color: var(--primary-color);
+}.editor-hover-frame {
+  position: absolute;
+  border: 2px solid var(--primary-color);
+  pointer-events: none;
+  box-sizing: border-box;
+}.v-tabs {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+  white-space: nowrap;
+  position: relative;
+  gap: 8px;
+  display: flex;
+}
+.v-tabs__tab {
+  background: none;
+  height: 36px;
+  padding: 0 8px;
+  font-size: 14px;
+  border: none;
+  font-weight: 500;
+  cursor: pointer;
+  color: var(--text-secondary-color);
+  transition: color 0.2s;
+  outline: none;
+}
+.v-tabs__tab.v-enter-active, .v-tabs__tab.v-leave-active {
+  transition: transform 0.225s cubic-bezier(0, 0, 0.2, 1), opacity 0.225s;
+}
+.v-tabs__tab.v-enter-from, .v-tabs__tab.v-leave-to {
+  transform: translateY(-20px);
+  opacity: 0;
+}
+.v-tabs__tab.v-leave-active {
+  position: absolute;
+}
+.v-tabs__tab.active {
+  color: var(--text-color);
+}
+.v-tabs__marker {
+  position: absolute;
+  bottom: -1px;
+  height: 2px;
+  background-color: var(--button-color);
+  border-radius: 1px;
+  transition: left 0.225s cubic-bezier(0.4, 0, 0.2, 1), width 0.225s cubic-bezier(0.4, 0, 0.2, 1);
+}.v-tabs-pages {
+  position: relative;
+  overflow: hidden;
+  min-height: 100px;
+}
+.v-tabs-pages__page {
+  position: absolute;
+  inset: 0;
+}
+.v-tabs-pages__page.slide-left-enter-active, .v-tabs-pages__page.slide-left-leave-active, .v-tabs-pages__page.slide-right-enter-active, .v-tabs-pages__page.slide-right-leave-active {
+  transition: transform 0.225s cubic-bezier(0.8, 0, 0.2, 1);
+}
+.v-tabs-pages__page.slide-left-enter-from, .v-tabs-pages__page.slide-right-leave-to {
+  transform: translateX(100%);
+}
+.v-tabs-pages__page.slide-right-enter-from, .v-tabs-pages__page.slide-left-leave-to {
+  transform: translateX(-100%);
+}.v-form-control {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  position: relative;
+  transition: padding-bottom 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-form-control.error:not(.disablePadding) {
+  padding-bottom: 16px;
+}
+.v-form-control.error .v-form-control__label {
+  color: var(--error-color);
+}
+.v-form-control.error .v-form-control__outline {
+  border-color: var(--error-color);
+}
+.v-form-control.disabled {
+  pointer-events: none;
+  opacity: 0.6;
+}
+.v-form-control__outline {
+  display: flex;
+  border-radius: 8px;
+  transition: border-color 0.12s;
+  font-size: 13px;
+  position: relative;
+  box-sizing: border-box;
+  background-color: var(--blocks-color);
+}
+.v-form-control__outline:focus-within {
+  border-color: #AAAAAC;
+}
+.v-form-control__label {
+  font-size: 13px;
+  margin-bottom: 6px;
+  white-space: nowrap;
+  font-weight: 500;
+  user-select: none;
+  color: var(--text-secondary-color);
+}
+.v-form-control__required-marker {
+  color: var(--primary-color);
+  user-select: none;
+  margin-left: 0.15em;
+}
+.v-form-control__error {
+  position: absolute;
+  bottom: 0;
+  font-size: 12px;
+  color: var(--error-color);
+  transition: opacity 0.12s, transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-form-control__error.v-enter-from, .v-form-control__error.v-leave-to {
+  opacity: 0;
+}
+.v-form-control.disablePadding .v-form-control__error {
+  bottom: -16px;
+}
+.v-form-control.disablePadding .v-form-control__error.v-enter-from, .v-form-control.disablePadding .v-form-control__error.v-leave-to {
+  transform: translateY(-16px);
+}
+.v-form-control__actions {
+  position: absolute;
+  top: -4px;
+  right: 0;
+  display: flex;
+  align-items: center;
+}
+.v-form-control__actions .v-icon-button {
+  width: 24px;
+  height: 24px;
+  color: var(--text-secondary-color);
+}
+.v-form-control__actions svg {
+  max-width: 16px;
+  max-height: 16px;
+}.v-input {
+  min-width: 240px;
+}
+.v-input .v-form-control__outline {
+  height: 40px;
+}
+.v-input .v-form-control__outline > svg {
+  align-self: center;
+  color: #CED4DA;
+}
+.v-input input, .v-input textarea {
+  height: 100%;
+  flex-grow: 1;
+  background: none;
+  border: none;
+  padding: 0 14px;
+  outline: none;
+  position: relative;
+  z-index: 1;
+  width: 20px;
+  color: var(--text-color);
+  font-size: 13px;
+  border-radius: 7px;
+}
+.v-input input::placeholder, .v-input textarea::placeholder {
+  color: var(--placeholder-color);
+}
+.v-input input {
+  padding-right: 4px;
+}
+.v-input.multiline .v-form-control__outline {
+  height: auto;
+}
+.v-input.multiline textarea {
+  box-sizing: border-box;
+  line-height: 1.4em;
+  padding: 10px 14px;
+  resize: none;
+  min-height: 60px;
+}
+.v-input__start-adornment {
+  width: 46px;
+  border-right: 1px solid #CED4DA;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+@media (max-width: 800px) {
+.v-input__start-adornment {
+    width: 32px;
+}
+}
+.v-input__max-length {
+  position: absolute;
+  bottom: 2px;
+  right: 10px;
+  font-size: 12px;
+  color: #C8CCD0;
+}
+.v-input.disabled .v-input__input-wrapper {
+  background-color: #F2F2F4;
+  pointer-events: none;
+}.v-collapse {
+  -webkit-user-drag: none;
+}
+.v-collapse__activator {
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 30px;
+  font-size: 14px;
+}
+.v-collapse__activator svg {
+  margin-left: -4px;
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-collapse__activator.open svg {
+  transform: rotate(90deg);
+}
+.v-collapse__content {
+  overflow: hidden;
+}
+.v-collapse__content.v-transition {
+  transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-collapse__content.withPadding {
+  padding: 4px;
+  margin: -4px;
+}.v-select .v-form-control__outline {
+  height: 40px;
+}
+.v-select__placeholder {
+  color: var(--text-secondary-color);
+}
+.v-select__activator {
+  background: none;
+  border: none;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  width: 100%;
+  color: var(--text-color);
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+}
+.v-select__activator > div {
+  flex: 1 1 auto;
+}
+.v-select__activator svg {
+  margin-right: -2px;
+  color: var(--text-secondary-color);
+  width: 12px;
+}
+.v-select__activator.opened svg {
+  transform: rotate(180deg);
+}
+.v-select__menu {
+  display: flex;
+  flex-direction: column;
+  padding: 6px 0;
+}
+.v-select__menu > button {
+  background: none;
+  border: none;
+  color: var(--text-color);
+  height: 40px;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  cursor: pointer;
+}
+.v-select__menu > button:hover {
+  background-color: var(--hover-color);
+}
+.v-select__menu .group-title {
+  padding: 0 16px;
+  font-size: 13px;
+  color: var(--text-secondary-color);
+  padding-top: 4px;
+}
+.v-select__menu .nullable-item {
+  color: var(--text-secondary-color);
+}.json-editor__array {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}.v-image-uploader .v-form-control__outline {
+  height: 80px;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  font-size: 13px;
+  color: var(--text-secondary-color);
+  gap: 16px;
+}
+.v-image-uploader .v-form-control__outline a {
+  color: var(--accent-color);
+  font-weight: 500;
+  cursor: pointer;
+}
+.v-image-uploader .v-form-control__outline a:hover {
+  text-decoration: underline;
+}
+.v-image-uploader__drag-label {
+  text-align: center;
+  flex: 1 1 auto;
+  color: var(--text-secondary-color);
+  font-size: 13px;
+  pointer-events: none;
+}
+.v-image-uploader__image-preview {
+  width: fit-content;
+  position: relative;
+}
+.v-image-uploader__image-preview img {
+  max-width: 90px;
+  max-height: 60px;
+  display: block;
+  border-radius: 4px;
+}
+.v-image-uploader__image-preview button {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: white;
+  background-color: var(--placeholder-color);
+  border: none;
+  border-radius: 9999px;
+  border: 2px solid var(--blocks-color);
+  cursor: pointer;
+}
+.v-image-uploader__image-preview button svg {
+  width: 10px;
+  height: 10px;
+}
+.v-image-uploader__image-info {
+  color: var(--text-color);
+}
+.v-image-uploader.drag .v-form-control__outline {
+  pointer-events: none;
+  box-shadow: inset 0 0 0 2px var(--primary-color);
+}.json-editor__object {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.json-editor__object .v-collapse.open > .v-collapse__content {
+  border-bottom: 1px solid var(--border-color);
+}
+.json-editor__object > .v-collapse > .v-collapse__content > .v-collapse__content-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.json-editor__object .v-collapse__content-inner {
+  padding-bottom: 12px;
+  padding-left: 2px;
+  padding-right: 2px;
+}
+.json-editor__object .v-collapse__activator {
+  font-size: 13px;
+  font-weight: 500;
+}.editor-component {
+  --primary-color: #0073E9;
+  --primary-color-hover: #0077f1;
+  --primary-color-active: #006edf;
+  --accent-color: #0085dd;
+  --button-secondary: #F2F2F4;
+  --button-secondary-hover: #E1E1EA;
+  --primary-color-dark: #742B45;
+  --text-color: #14142B;
+  --text-secondary-color: #6d6d6d;
+  --text-inactive-color: #5c5c5c;
+  --icon-color: #6E7191;
+  --placeholder-color: #afafaf;
+  --border-color: #D9DBE9;
+  --input-border-color: #d0d4dd;
+  --background-color: #FAFAFA;
+  --paper-color: #FFFFFF;
+  --toast-background-color: rgba(0, 0, 0, 0.8);
+  --blocks-color: #F2F2F2;
+  --scrollbar-color: #F0F0F0;
+  --popover-color: #FFFFFF;
+  --button-color: #171717;
+  --button-color-hover: #363636;
+  --button-color-pressed: #000000;
+  --button-text-color: #FFFFFF;
+  --text-active-color: #000000;
+  --background-active-color: #f1f1f1;
+  --hover-color: rgba(0, 0, 200, 0.03);
+  --hover-color-alt: rgba(255, 255, 255, 0.5015);
+  --error-color: #DD2828;
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+}
+.editor-component button, .editor-component input, .editor-component textarea {
+  font-family: inherit;
+}
+.editor-blocks-sidebar {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 340px;
+  border-left: 1px solid var(--border-color);
+  background-color: white;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+}
+.editor-blocks-sidebar .v-tabs {
+  padding: 0 8px;
+  margin-top: 12px;
+}
+.editor-blocks-sidebar .v-tabs-pages {
+  flex: 1 1 auto;
+}
+.editor-blocks-sidebar .v-tabs-pages__page {
+  padding: 12px 16px;
+}
+.editor-hierarchy {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 250px;
+  border-right: 1px solid var(--border-color);
+  background-color: white;
+  z-index: 1000;
+}
+.editor-hierarchy .title {
+  color: var(--text-secondary-color);
+  padding: 0 16px;
+  font-size: 13px;
+  font-weight: 500;
+}
+.editor-hierarchy > .v-select {
+  margin: 12px 16px;
+}
+.editor-control-component {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 300px;
+  height: 200px;
+  border: 2px solid var(--primary-color);
+}
+.editor-sidebar__close-button {
+  position: absolute;
+  right: -12px;
+  top: calc(50% - 12px);
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background-color: var(--text-secondary-color);
+  color: white;
+  border: none;
+  border-radius: 9999px;
+  cursor: pointer;
+  z-index: 1;
+  opacity: 0.2;
+}
+.editor-sidebar__close-button:hover {
+  opacity: 1;
+}
+.editor-sidebar__close-button.right {
+  right: auto;
+  left: -12px;
+}
+.editor-sidebar__close-button.fixed {
+  right: auto;
+  left: 20px;
+  z-index: 100;
+  position: fixed;
+}
+.editor-sidebar__close-button.fixed.right {
+  left: auto;
+  right: 20px;
+}
+.editor-sidebar__close-button.v-enter-active {
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition-delay: 0.4s;
+}
+.editor-sidebar__close-button.v-enter-from {
+  transform: translateX(-60px);
+}
+.editor-sidebar__close-button.right.v-enter-from {
+  transform: translateX(60px);
+}
+.editor-sidebar-left.v-enter-active, .editor-sidebar-left.v-leave-active, .editor-sidebar-right.v-enter-active, .editor-sidebar-right.v-leave-active {
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.editor-sidebar-left.v-enter-from, .editor-sidebar-left.v-leave-to {
+  transform: translateX(-100%);
+}
+.editor-sidebar-right.v-enter-from, .editor-sidebar-right.v-leave-to {
+  transform: translateX(100%);
+}