survey-creator-core 1.12.3 → 1.12.4

package/survey-creator-core.css

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v1.12.3
+ * SurveyJS Creator v1.12.4
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -228,7 +228,7 @@
 }
 
 /*# sourceMappingURL=fonts.fontless.css.map*//*!
- * SurveyJS Creator v1.12.3
+ * SurveyJS Creator v1.12.4
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -495,6 +495,18 @@ svc-tab-test {
   background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
 }
 
+.svc-test-tab--empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  gap: 0px;
+}
+
 .svc-test-tab__content .svc-plugin-tab__content {
   overflow-y: overlay;
 }
@@ -1027,6 +1039,17 @@ svc-tab-test {
   --sjs-transition-duration: 0ms;
 }
 
+.svc-translation-tab--empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+  flex-shrink: 0;
+  width: 100%;
+  gap: 0px;
+}
+
 .st-properties {
   background-color: var(--ctr-property-grid-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
   flex-grow: 1;
@@ -1507,15 +1530,19 @@ td.st-table__cell:first-of-type span {
   --sjs-transition-duration: 0ms;
 }
 
-.svc-logic-tab__content.svc-logic-tab__empty {
+.svc-logic-tab__content.svc-logic-tab--empty {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  flex-grow: 1;
+  flex-shrink: 0;
+  width: 100%;
+  gap: 0px;
 }
-.svc-logic-tab__content.svc-logic-tab__empty .svc-logic-tab__content-action {
+.svc-logic-tab__content.svc-logic-tab--empty .svc-logic-tab__content-action {
   width: calc(33 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .svc-logic-tab__content .svc-logic-tab__content-action {
   margin-left: 25%;
@@ -1676,6 +1703,11 @@ svc-tab-designer {
   min-width: calc(84 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
+.svc-content-wrapper {
+  width: 100%;
+  display: flex;
+}
+
 .svc-tab-designer .svc-designer-header .sd-container-modern__title {
   background-color: transparent;
 }
@@ -1720,24 +1752,25 @@ svc-tab-designer {
 .svc-designer__placeholder-container {
   display: flex;
   flex-grow: 1;
+  flex-shrink: 0;
   width: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 0px;
   padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
   text-align: center;
+  position: relative;
 }
-
-.svc-designer-placeholder-page {
-  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+.svc-designer__placeholder-container .sd-page {
+  display: none;
 }
 
 .svc-designer-placeholder-page .svc-page__footer {
   width: calc(33 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin: auto;
 }
-
 .svc-designer-placeholder-page .svc-row--ghost {
   display: none;
 }
@@ -1802,19 +1835,13 @@ svc-tab-designer {
 .svc-creator--mobile .svc-page__content.svc-page__content--selected .sd-page__title {
   margin: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 0 0;
 }
-.svc-creator--mobile .svc-page__content .sd-page {
-  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-.svc-creator--mobile .svc-page__content .svc-page__footer {
+.svc-creator--mobile .svc-page__footer {
   margin-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.svc-creator--mobile .svc-question__content {
-  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-.svc-creator--mobile .svc-question__content.svc-question__content--selected {
-  padding-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-bottom: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+.svc-creator--mobile .svc-designer-placeholder-page .svc-page__footer {
+  margin-top: 0;
 }
 .svc-creator--mobile .svc-tab-designer {
   justify-content: initial;
@@ -1847,8 +1874,7 @@ svc-tab-designer {
   width: 100%;
 }
 .svc-creator--mobile .svc-question__content-actions {
-  width: calc(100% - 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  width: calc(100% + 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .svc-creator--mobile .svc-question__content-actions .sv-action-bar-item {
   border: 0;
@@ -2234,6 +2260,118 @@ svc-tab-test {
   color: var(--ctr-popup-message-color, #404040);
 }
 
+.svc-surface-placeholder {
+  display: flex;
+  width: 100%;
+  max-width: var(--ctr-surface-placeholder-max-width, 720px);
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0px;
+  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  box-sizing: border-box;
+}
+
+.svc-creator--mobile .svc-surface-placeholder {
+  padding: var(--ctr-surface-placeholder-padding-top, 0px) var(--ctr-surface-placeholder-padding-right, 48px) var(--ctr-surface-placeholder-padding-bottom, 0px) var(--ctr-surface-placeholder-padding-left, 48px);
+}
+.svc-creator--mobile .svc-surface-placeholder__text {
+  padding: var(--ctr-surface-placeholder-text-margin-top, 32px) var(--ctr-surface-placeholder-text-margin-right, 32px) var(--ctr-surface-placeholder-text-margin-bottom, 24px) var(--ctr-surface-placeholder-text-margin-left, 32px);
+}
+
+.svc-surface-placeholder__image {
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+  padding: 135px 170px;
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: center;
+  justify-content: center;
+}
+
+.svc-surface-placeholder__image--designer {
+  background: url(a7b373b83d0c1e0262bd.png) 50%/contain no-repeat;
+}
+
+.svc-surface-placeholder__image--preview {
+  background: url(e8dfbe2bdd7c9dca5efa.png) 50%/contain no-repeat;
+}
+
+.svc-surface-placeholder__image--theme {
+  background: url(5e87e454a7071a571216.png) 50%/contain no-repeat;
+}
+
+.svc-surface-placeholder__image--logic {
+  background: url(5dcaaadc5b1c048d6daa.png) 50%/contain no-repeat;
+}
+
+.svc-surface-placeholder__image--translation {
+  background: url(cc27e2890751d1ea0380.png) 50%/contain no-repeat;
+}
+
+.svc-surface-placeholder__text {
+  padding: var(--ctr-surface-placeholder-text-margin-top, 32px) 0px var(--ctr-surface-placeholder-text-margin-bottom, 24px) 0px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ctr-surface-placeholder-text-gap, 8px);
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  flex-shrink: 0;
+  width: 100%;
+}
+
+.svc-surface-placeholder__title {
+  color: var(--ctr-surface-placeholder-text-title-color, rgba(0, 0, 0, 0.91));
+  text-align: center;
+  font-family: var(--ctr-medium-bold-font-family, "Open Sans");
+  font-size: var(--ctr-medium-bold-font-size, 24px);
+  line-height: var(--ctr-medium-bold-line-height, 32px);
+  font-weight: var(--ctr-medium-bold-font-weight, 700);
+  align-self: stretch;
+}
+
+.svc-surface-placeholder__description {
+  color: var(--ctr-surface-placeholder-text-description-color, rgba(0, 0, 0, 0.45));
+  text-align: center;
+  font-family: var(--ctr-default-font-family, "Open Sans");
+  font-size: var(--ctr-default-font-size, 16px);
+  line-height: var(--ctr-default-line-height, 24px);
+  font-weight: var(--ctr-default-font-weight, 400);
+  align-self: stretch;
+}
+
+.svc-designer__placeholder-container {
+  padding-bottom: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.svc-logic-tab--empty > :last-child {
+  margin-bottom: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.svc-test-tab--empty .svc-surface-placeholder,
+.svc-translation-tab--empty .svc-surface-placeholder {
+  padding-bottom: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.svc-creator--mobile .svc-designer__placeholder-container {
+  padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.svc-creator--mobile .svc-logic-tab--empty > :last-child {
+  margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.svc-creator--mobile .svc-test-tab--empty .svc-surface-placeholder,
+.svc-creator--mobile .svc-translation-tab--empty .svc-surface-placeholder {
+  padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
 survey-creator,
 .svc-creator {
   display: flex;
@@ -2917,7 +3055,7 @@ svc-page {
 }
 .svc-page__content .sd-page {
   margin: 0;
-  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
 }
 
 .svc-page__content-actions {
@@ -2970,68 +3108,62 @@ svc-page {
   opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 50%);
 }
 
-.svc-page__content:not(.svc-page__content--new):focus,
-.svc-hovered.svc-page__content:not(.svc-page__content--new) {
+.svc-page__content:focus,
+.svc-hovered.svc-page__content {
   box-shadow: 0 0 0 2px var(--sjs-secondary-backcolor-light, var(--secondary-light, rgba(255, 152, 20, 0.25)));
   background: var(--ctr-survey-page-background-color-hovered, var(--sjs-secondary-backcolor-semi-light, rgba(255, 152, 20, 0.1)));
 }
 
-.svc-page .svc-page__content--collapsed::after {
-  content: "";
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  border: 2px var(--sjs-border-default, var(--border, #d6d6d6)) dashed;
-  margin: -2px;
-  border-radius: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  box-sizing: content-box;
-  pointer-events: none;
+.svc-page__content--new.svc-page__content--new {
+  box-shadow: none;
+  background-color: transparent;
 }
 
-.svc-creator .svc-page .svc-page__content--selected::after,
-.svc-creator .svc-page .svc-page__content--selected:focus::after,
-.svc-hovered.svc-page__content::after {
-  display: none;
+.svc-page__content--selected .svc-page__content-actions,
+.svc-hovered.svc-page__content .svc-page__content-actions {
+  opacity: 1;
 }
-.svc-creator .svc-page .svc-page__content--selected.svc-page__content--selected,
-.svc-creator .svc-page .svc-page__content--selected:focus.svc-page__content--selected,
-.svc-hovered.svc-page__content.svc-page__content--selected {
+
+.svc-page__content--selected.svc-page__content--selected {
   box-shadow: 0 0 0 2px var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
   background: var(--sjs-secondary-backcolor-semi-light, rgba(255, 152, 20, 0.1));
 }
-.svc-creator .svc-page .svc-page__content--selected .svc-page__content-actions,
-.svc-creator .svc-page .svc-page__content--selected:focus .svc-page__content-actions,
-.svc-hovered.svc-page__content .svc-page__content-actions {
-  opacity: 1;
+
+.svc-page__content--animation-running .svc-row .svc-question--enter {
+  animation: none;
+}
+.svc-page__content--animation-running .svc-row .svc-question--leave {
+  animation-name: moveInWithOverflow;
+  animation-direction: reverse;
+  animation-fill-mode: forwards;
+  animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
+  animation-duration: var(--sjs-svc-collapse-move-out-duration, 250ms);
+  animation-delay: var(--sjs-svc-collapse-move-out-delay, 100ms);
 }
 
-.svc-creator .svc-page .svc-page__content--collapsed::after {
-  content: "";
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  border: 2px var(--sjs-border-default, var(--border, #d6d6d6)) dashed;
-  margin: -2px;
-  border-radius: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  box-sizing: content-box;
-  pointer-events: none;
+.svc-creator--disable-animations .svc-row .svc-question--leave {
+  animation: none;
+}
+
+.svc-page__content--collapse-onhover, .svc-page__content--collapse-always {
+  outline: 2px transparent dashed;
+  transition: outline-color var(--sjs-creator-transition-duration, 150ms);
+}
+.svc-page__content--collapse-onhover.svc-page__content--selected, .svc-page__content--collapse-onhover.svc-page__content.svc-hovered, .svc-page__content--collapse-always.svc-page__content--selected, .svc-page__content--collapse-always.svc-page__content.svc-hovered {
+  outline-color: transparent;
 }
-.svc-creator .svc-page .svc-page__content--collapsed.svc-page__content--collapsed-drag-over-inside {
+.svc-page__content--collapse-onhover.svc-page__content--collapsed-drag-over-inside, .svc-page__content--collapse-always.svc-page__content--collapsed-drag-over-inside {
   box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
   background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
   animation: collapsed-drag-over-inside-blinking 1s infinite;
+  outline-color: transparent;
 }
-.svc-creator .svc-page .svc-page__content--collapsed.svc-page__content--collapsed-drag-over-inside::after {
-  border: 2px var(--sjs-primary-backcolor, var(--primary, #19b394)) solid;
-  background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
-  animation: collapsed-drag-over-inside-blinking 1s infinite;
+
+.svc-page__content--collapsed {
+  outline-color: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
-.svc-creator--mobile .svc-page .svc-page__content--collapsed::after {
+.svc-creator--mobile .svc-page__content::after {
   margin: 0;
   border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
 }
@@ -3054,6 +3186,7 @@ svc-page {
   overflow: visible;
   margin-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-page__footer .sv-action {
@@ -3113,7 +3246,8 @@ svc-page {
 .svc-page__placeholder_frame {
   min-width: auto;
   max-width: 100%;
-  padding: 0 calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: 0 calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-page__placeholder_frame .svc-panel__placeholder_frame {
   padding: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3394,9 +3528,12 @@ svc-question {
   position: relative;
   height: auto;
   width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: stretch;
+  display: grid;
+  grid-template-columns: 100%;
+}
+.svc-question__adorner > * {
+  grid-row: 1;
+  grid-column: 1;
 }
 .svc-question__adorner.svc-question__adorner--collapsed {
   height: fit-content;
@@ -3450,7 +3587,10 @@ svc-question {
 }
 
 .svc-question__content {
-  scroll-margin-top: 8px;
+  scroll-margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+.svc-question__content .sd-element {
+  scroll-margin-top: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-question__content {
@@ -3463,13 +3603,31 @@ svc-question {
   flex-grow: 1;
   border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
-  padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background: var(--sjs-general-backcolor, var(--background, #fff));
   box-shadow: 0px 1px 2px 0px var(--ctr-shadow-small-color, rgba(0, 0, 0, 0.15));
   outline: none;
   transition: background var(--sjs-creator-transition-duration, 150ms), box-shadow var(--sjs-creator-transition-duration, 150ms);
 }
 
+.svc-question__content--title-bottom {
+  padding-top: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-bottom: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.svc-question__content--title-bottom .sd-question__content {
+  margin-top: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.svc-question__content--title-bottom .svc-question__content-actions {
+  height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.svc-question__content--title-bottom .svc-question__content-actions > .sv-action-bar {
+  margin-bottom: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.svc-question__content--title-hidden {
+  padding-top: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
 .svc-question__content .sd-selectbase:not(.sd-imagepicker) {
   padding-left: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin-left: calc(-5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3505,6 +3663,61 @@ svc-question {
   overflow: visible;
 }
 
+.svc-question--enter, .svc-question--leave {
+  animation-name: fadeIn, moveInWithOverflow;
+  animation-fill-mode: forwards;
+  animation-direction: var(--animation-direction);
+  animation-timing-function: var(--animation-timing-function);
+  animation-duration: var(--fade-animation-duration), var(--move-animation-duration);
+  animation-delay: var(--fade-animation-delay), var(--move-animation-delay);
+}
+
+.svc-question--enter {
+  opacity: 0;
+  --fade-animation-duration: var(--sjs-svc-expand-fade-in-duration, 150ms);
+  --move-animation-duration: var(--sjs-svc-expand-move-in-duration, 250ms);
+  --fade-animation-delay: var(--sjs-svc-expand-fade-in-delay, 250ms);
+  --move-animation-delay: 0s;
+  --animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+  --animation-direction: normal;
+}
+
+.svc-question--leave {
+  --fade-animation-duration: var(--sjs-svc-collapse-fade-out-duration, 150ms);
+  --move-animation-duration: var(--sjs-svc-collapse-move-out-duration, 250ms);
+  --fade-animation-delay: 0s;
+  --move-animation-delay: var(--sjs-svc-collapse-move-out-delay, 100ms);
+  --animation-direction: reverse;
+  --animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
+}
+
+@keyframes changeAlignSelf {
+  from {
+    align-self: flex-start;
+  }
+  to {
+    align-self: stretch;
+  }
+}
+.svc-question--enter.svc-question__adorner, .svc-question--leave.svc-question__adorner {
+  opacity: 1;
+  animation-name: changeAlignSelf;
+  animation-duration: 0s;
+}
+
+.svc-question--enter.svc-question__adorner {
+  align-self: flex-start;
+  animation-delay: var(--move-animation-duration);
+}
+
+.svc-question--leave.svc-question__adorner {
+  animation-delay: var(--move-animation-delay);
+}
+
+.svc-creator--disable-animations .svc-question--enter, .svc-creator--disable-animations .svc-question--leave {
+  animation: none;
+}
+
 .svc-question__content .sd-question:not(.sd-question--paneldynamic) .sd-panel__content {
   overflow: auto;
 }
@@ -3523,16 +3736,24 @@ svc-question {
 }
 
 .svc-question__content-actions {
-  position: absolute;
+  position: relative;
   opacity: 0;
-  bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  inset-inline-start: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  inset-inline-end: calc(3.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-left: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-top: auto;
+  width: calc(100% + 2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   transition: opacity var(--sjs-creator-transition-duration, 150ms);
 }
 .svc-question__content-actions:focus-within {
   opacity: 1;
 }
+.svc-question__content-actions > .sv-action-bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
 .svc-question__content-actions .sv-action--convertTo {
   max-width: max-content;
 }
@@ -3632,10 +3853,14 @@ svc-question {
     background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
   }
 }
-.svc-question__content--selected:not(.svc-question__content--dragged) > .svc-question__content-actions,
-.svc-creator:not(.svc-creator--mobile) .svc-page .svc-hovered > .svc-question__content:not(.svc-question__content--dragged) > .svc-question__content-actions {
+.svc-question__content--selected > .svc-question__content-actions,
+.svc-hovered > .svc-question__content > .svc-question__content-actions {
   opacity: 1;
 }
+.svc-question__content--selected > .svc-question__content-actions.svc-question--enter,
+.svc-hovered > .svc-question__content > .svc-question__content-actions.svc-question--enter {
+  opacity: 0;
+}
 
 .svc-question__content--dragged {
   background: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
@@ -3643,8 +3868,48 @@ svc-question {
 .svc-question__content--dragged .sd-question__title {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
-.svc-question__content--dragged.svc-question__content--selected .svc-question__content-actions {
-  display: none;
+.svc-question__content--dragged > .svc-question__content-actions {
+  opacity: 0;
+}
+
+.svc-creator--mobile .svc-question__content-actions {
+  overflow: hidden;
+  height: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+.svc-creator--mobile .svc-question__content-actions > .sv-action-bar {
+  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+.svc-creator--mobile .svc-question__content-actions.svc-question--enter {
+  animation-name: empty, moveInWithOverflow;
+}
+.svc-creator--mobile .svc-question__content {
+  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.svc-creator--mobile .svc-element__header--hidden {
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: 0 calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.svc-creator--mobile .svc-question__adorner--selected > .svc-element__header--hidden {
+  margin-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-bottom: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.svc-creator--mobile .svc-question__content--selected {
+  padding-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.svc-creator--mobile .svc-question__content--selected > .svc-question__content-actions {
+  height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  overflow: visible;
+}
+.svc-creator--mobile .svc-question__content--selected > .svc-question__content-actions > .sv-action-bar {
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.svc-creator--mobile .svc-question__content--selected > .svc-question__content-actions.svc-question--enter {
+  animation-name: fadeIn, moveInWithOverflow;
+}
+.svc-creator--mobile.svc-creator--disable-animations .svc-question--enter {
+  animation: none;
 }
 
 .svc-question__content .sd-question.sd-question--table {
@@ -3799,7 +4064,7 @@ svc-question {
   bottom: -6px;
 }
 
-.svc-question__content-actions .sv-action-bar {
+.svc-question__content-actions > .sv-action-bar {
   box-sizing: border-box;
   padding: 0;
   justify-content: center;
@@ -3863,8 +4128,11 @@ svc-question .sv-action-bar,
 
 .svc-element__header--hidden {
   display: block;
-  padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
   box-sizing: border-box;
+  padding: 0 calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
+  z-index: -1;
+  width: 100%;
 }
 .svc-element__header--hidden .svc-string-editor,
 .svc-element__header--hidden .svc-fake-title,
@@ -3882,34 +4150,52 @@ svc-question .sv-action-bar,
   content: ")";
 }
 .svc-element__header--hidden .svc-element__title--hidden {
-  display: none;
+  opacity: 0;
+  transition: opacity 150ms;
 }
 
-.svc-question__adorner .svc-question__content--collapsed > * {
+.svc-element__header--hidden.sd-question__header--location--left .svc-string-editor,
+.svc-element__header--hidden.sd-question__header--location--left sv-ng-string > .svc-string-editor {
+  display: inline-block;
+}
+.svc-element__header--hidden.sd-question__header--location--left .svc-string-editor::before, .svc-element__header--hidden.sd-question__header--location--left .svc-string-editor::after,
+.svc-element__header--hidden.sd-question__header--location--left sv-ng-string > .svc-string-editor::before,
+.svc-element__header--hidden.sd-question__header--location--left sv-ng-string > .svc-string-editor::after {
+  content: none;
+}
+
+.svc-question__adorner.svc-question__adorner--collapsed > .svc-element__header--hidden {
+  z-index: 1;
+}
+.svc-question__adorner.svc-question__adorner--collapsed > .svc-element__header--hidden > .svc-element__title--hidden {
+  opacity: 1;
+}
+.svc-question__adorner.svc-question__adorner--collapsed .svc-question__content--collapsed > * {
   display: none;
 }
-.svc-question__adorner .svc-question__content--collapsed .svc-question__drag-area {
+.svc-question__adorner.svc-question__adorner--collapsed .svc-question__content--collapsed .svc-question__drag-area {
+  display: flex;
+}
+.svc-question__adorner.svc-question__adorner--collapsed .svc-question__content--collapsed .svc-content-wrapper {
   display: flex;
 }
-.svc-question__adorner .svc-question__content--collapsed .sd-element {
+.svc-question__adorner.svc-question__adorner--collapsed .svc-question__content--collapsed .sd-element {
   display: block;
 }
-.svc-question__adorner .svc-question__content--collapsed .sd-element > *:not(.sd-element__header) {
+.svc-question__adorner.svc-question__adorner--collapsed .svc-question__content--collapsed .sd-element > *:not(.sd-element__header) {
   display: none;
 }
-.svc-question__adorner .svc-question__content--collapsed .sd-element__header > *:not(.sd-element__title) {
+.svc-question__adorner.svc-question__adorner--collapsed .svc-question__content--collapsed .sd-element__header > *:not(.sd-element__title) {
   display: none;
 }
-.svc-question__adorner .svc-question__content--collapsed .sd-element__header.svc-element__header--hidden {
-  display: block;
-}
-.svc-question__adorner .svc-question__content--collapsed .sd-element__header .svc-element__title--hidden {
-  display: block;
+.svc-question__adorner.svc-question__adorner--collapsed .svc-question__content--collapsed .sd-question__header--location--left {
+  display: none;
 }
 
 .svc-question__adorner .svc-question__content--collapsed {
   flex-grow: 0;
   padding-bottom: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-question__adorner .svc-question__content--collapsed .sd-element__header,
 .svc-question__adorner .svc-question__content--collapsed .sd-element--complex > .sd-element__header {
@@ -3922,8 +4208,10 @@ svc-question .sv-action-bar,
 }
 .svc-creator--mobile .svc-question__adorner .svc-question__content--collapsed {
   padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-creator--mobile .svc-question__adorner .svc-question__content--collapsed.svc-question__content--selected {
+  padding-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-bottom: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
@@ -4218,9 +4506,6 @@ svc-question .sv-action-bar,
   padding: 0;
 }
 
-.svc-question__content .sd-element__header--location-top {
-  margin-top: 0;
-}
 .svc-question__content .sd-element--complex > .sd-element__header--location-top {
   padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
   padding-top: 0;
@@ -4330,7 +4615,7 @@ svc-question .sv-action-bar,
   box-shadow: 0px 1px 2px 0px var(--ctr-shadow-small-color, rgba(0, 0, 0, 0.15));
 }
 .sd-row--enter.sd-row--enter.sd-row--enter.sd-row--enter .svc-question__content--selected .svc-question__content-actions {
-  display: none;
+  opacity: 0;
 }
 
 .sd-panel .sd-row--enter.sd-row--enter.sd-row--enter.sd-row--enter .svc-question__content--selected {
@@ -4388,11 +4673,21 @@ svc-question .sv-action-bar,
 }
 
 .svc-question__content--image:not(.svc-question__content--loading):not(.svc-question__content--empty) {
-  padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 .svc-question__content--image:not(.svc-question__content--loading):not(.svc-question__content--empty) .sd-image__image {
   border-radius: 0;
 }
+.svc-question__content--image:not(.svc-question__content--loading):not(.svc-question__content--empty) .svc-question__content-actions {
+  padding-left: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  width: calc(100% - 2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  box-sizing: border-box;
+}
+.svc-question__content--image:not(.svc-question__content--loading):not(.svc-question__content--empty) .svc-question__content-actions > .sv-action-bar {
+  width: calc(100% - calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  left: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
 
 .svc-question__content--image.svc-question__content--empty .sd-file,
 .svc-question__content--image.svc-question__content--empty sv-ng-file-question {