survey-react 1.9.138 → 1.9.139

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.138
+ * surveyjs - Survey JavaScript library v1.9.139
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1369,10 +1369,16 @@ sv-brand-info, .sv-brand-info {
   height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
-.sv-ranking-item--disabled.sv-ranking-item--disabled {
+.sv-ranking-item--disabled.sv-ranking-item--disabled,
+.sv-ranking-item--readonly.sv-ranking-item--readonly,
+.sv-ranking-item--preview.sv-ranking-item--preview {
   cursor: initial;
+  user-select: initial;
+  -webkit-user-select: initial;
 }
-.sv-ranking-item--disabled.sv-ranking-item--disabled .sv-ranking-item__icon-container.sv-ranking-item__icon-container .sv-ranking-item__icon.sv-ranking-item__icon {
+.sv-ranking-item--disabled.sv-ranking-item--disabled .sv-ranking-item__icon-container.sv-ranking-item__icon-container .sv-ranking-item__icon.sv-ranking-item__icon,
+.sv-ranking-item--readonly.sv-ranking-item--readonly .sv-ranking-item__icon-container.sv-ranking-item__icon-container .sv-ranking-item__icon.sv-ranking-item__icon,
+.sv-ranking-item--preview.sv-ranking-item--preview .sv-ranking-item__icon-container.sv-ranking-item__icon-container .sv-ranking-item__icon.sv-ranking-item__icon {
   visibility: hidden;
 }
 
@@ -1433,6 +1439,16 @@ sv-brand-info, .sv-brand-info {
   opacity: 0.25;
 }
 
+.sv-ranking-item--readonly .sv-ranking-item__index {
+  background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
+}
+
+.sv-ranking-item--preview .sv-ranking-item__index {
+  background-color: transparent;
+  border: 1px solid var(--sjs-general-forecolor, var(--foreground, #161616));
+  box-sizing: border-box;
+}
+
 .sv-ranking-item__ghost.sv-ranking-item__ghost {
   display: none;
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
@@ -2593,6 +2609,20 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   user-select: none;
 }
 
+.sd-input--readonly {
+  background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
+}
+
+.sd-input.sd-input--preview {
+  background: none;
+  box-shadow: none;
+  transition: none;
+  border-bottom: 1px solid var(--sjs-general-forecolor, var(--foreground, #161616));
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .sd-input::placeholder {
   color: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
   -webkit-user-select: none;
@@ -2607,6 +2637,16 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   opacity: 0.25;
 }
 
+.sd-input.sd-input--readonly {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  box-shadow: none;
+  transition: none;
+}
+
+.sd-input.sd-input--readonly::placeholder {
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+}
+
 .sd-root--readonly .sd-input--disabled,
 .sd-root--readonly .sd-input--disabled::placeholder {
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
@@ -2820,6 +2860,15 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   border: 1px dashed var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
+.sd-question--readonly .sjs_sp_container,
+.sd-question--preview .sjs_sp_container {
+  border: none;
+}
+.sd-question--readonly .sjs_sp_placeholder,
+.sd-question--preview .sjs_sp_placeholder {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
 .sjs_sp_controls.sd-signaturepad__controls {
   right: var(--sjs-base-unit, var(--base-unit, 8px));
   top: var(--sjs-base-unit, var(--base-unit, 8px));
@@ -2877,6 +2926,14 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
+.sd-checkbox--checked.sd-checkbox--readonly .sd-checkbox__svg use {
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
+.sd-checkbox--checked.sd-checkbox--preview .sd-checkbox__svg use {
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
 .sd-matrixdynamic__btn.sd-matrixdynamic__add-btn {
   position: sticky;
   left: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3033,9 +3090,9 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell:not(.sd-table__cell--actions),
 .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type {
-  border-top-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
-  border-bottom-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
-  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
+  border-top-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
+  border-bottom-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
+  background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
 }
 .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell:not(.sd-table__cell--actions).sd-matrix__text--checked,
 .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type.sd-matrix__text--checked {
@@ -3053,6 +3110,14 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-item--checked .sd-item__decorator {
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell:not(.sd-table__cell--actions) .sd-item:not(.sd-item--error).sd-item--readonly.sd-item--checked .sd-item__decorator,
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-item--readonly.sd-item--checked .sd-item__decorator {
+  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+}
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell:not(.sd-table__cell--actions) .sd-item:not(.sd-item--error).sd-item--preview.sd-item--preview .sd-item__decorator,
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-item--preview.sd-item--preview .sd-item__decorator {
+  background-color: transparent;
+}
 .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell:not(.sd-table__cell--actions) .sd-item:not(.sd-item--error).sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after,
 .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after {
   background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
@@ -3293,6 +3358,24 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   flex-basis: 100%;
 }
 
+.sd-element--with-frame.sd-element--compact .sd-table {
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+}
+.sd-element--with-frame.sd-element--compact .sd-table-wrapper:before, .sd-element--with-frame.sd-element--compact .sd-table-wrapper:after {
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+}
+.sd-element--with-frame.sd-element--compact .sd-table__cell--actions:not(.sd-table__cell--vertical):last-child .sd-action-bar {
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+}
+.sd-element--with-frame.sd-element--compact .sd-table__cell--actions:not(.sd-table__cell--vertical),
+.sd-element--with-frame.sd-element--compact .sd-table__cell--empty,
+.sd-element--with-frame.sd-element--compact .sd-table__cell--row-text,
+.sd-element--with-frame.sd-element--compact .sd-table__cell--footer-total,
+.sd-element--with-frame.sd-element--compact .sd-matrix__cell:first-of-type,
+.sd-element--with-frame.sd-element--compact .sd-matrix tr > td:first-of-type {
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+}
+
 .sd-question--table > .sd-question__header,
 .sd-question--table .sd-question__description--under-input .sv-string-viewer {
   position: sticky;
@@ -3668,6 +3751,18 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   transition: box-shadow var(--sjs-transition-duration, 150ms), background var(--sjs-transition-duration, 150ms);
 }
 
+.sd-item--readonly.sd-item--readonly .sd-item__decorator {
+  background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
+  box-shadow: none;
+  transition: none;
+}
+
+.sd-item--preview.sd-item--preview .sd-item__decorator {
+  background-color: transparent;
+  box-shadow: none;
+  transition: none;
+}
+
 .sd-item--checked .sd-item__decorator {
   box-shadow: none;
 }
@@ -3795,6 +3890,14 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
+.sd-checkbox--checked.sd-checkbox--readonly .sd-checkbox__svg use {
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
+.sd-checkbox--checked.sd-checkbox--preview .sd-checkbox__svg use {
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
 .sd-radio__decorator {
   border-radius: 50%;
 }
@@ -3821,6 +3924,20 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   background-color: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
+.sd-radio--checked.sd-radio--readonly .sd-radio__decorator:after {
+  background-color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
+.sd-radio--checked.sd-radio--preview .sd-radio__decorator:after {
+  display: none;
+}
+.sd-radio--checked.sd-radio--preview .sd-radio__decorator .sd-radio__svg {
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
+  display: block;
+  width: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
 .sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after {
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
@@ -4005,6 +4122,43 @@ legend + sv-ng-rating-item + .sd-rating__item {
   border: none;
 }
 
+.sd-rating__item.sd-rating__item--readonly {
+  fill: transparent;
+  background-color: transparent;
+  border: 2px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
+  box-shadow: none;
+  transform: none;
+}
+.sd-rating__item.sd-rating__item--readonly .sd-rating__item-text.sd-rating__item-text {
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+}
+
+.sd-rating__item.sd-rating__item--selected.sd-rating__item--readonly {
+  border-color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+.sd-rating__item.sd-rating__item--selected.sd-rating__item--readonly .sd-rating__item-text.sd-rating__item-text {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
+.sd-rating__item.sd-rating__item--preview {
+  fill: transparent;
+  background-color: transparent;
+  border: 1px solid transparent;
+  box-shadow: none;
+  transform: none;
+}
+.sd-rating__item.sd-rating__item--preview .sd-rating__item-text.sd-rating__item-text {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
+.sd-rating__item.sd-rating__item--selected.sd-rating__item--preview {
+  border-color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  border-width: 1px;
+}
+.sd-rating__item.sd-rating__item--selected.sd-rating__item--preview .sd-rating__item-text.sd-rating__item-text {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
 .sd-question--disabled .sd-rating__item-text {
   opacity: 0.25;
 }
@@ -4090,6 +4244,26 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   fill: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
+.sd-rating__item-smiley.sd-rating__item-smiley--selected.sd-rating__item-smiley--readonly {
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
+  border-color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  background-color: unset;
+}
+
+.sd-rating__item-smiley.sd-rating__item-smiley--preview {
+  border-color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  border-width: 1px;
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+.sd-rating__item-smiley.sd-rating__item-smiley--preview svg {
+  margin: 1px;
+}
+
+.sd-rating__item-smiley.sd-rating__item-smiley--selected.sd-rating__item-smiley--preview {
+  fill: var(--sjs-general-backcolor, var(--background, #fff));
+  background-color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
 .sd-rating__item-smiley--allowhover:hover {
   background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
   border-color: var(--sjs-border-default, var(--border, #d6d6d6));
@@ -4125,6 +4299,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   opacity: 1;
 }
 
+.sd-rating__item-smiley--scale-colored.sd-rating__item-smiley--selected, .sd-rating__item-smiley--scale-colored.sd-rating__item-smiley--readonly, .sd-rating__item-smiley--scale-colored.sd-rating__item-smiley--preview {
+  opacity: 1;
+}
+
 .sd-rating__item-star {
   position: relative;
   width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -4140,6 +4318,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 .sd-rating__item-star svg {
   stroke: var(--sjs-border-default, var(--border, #d6d6d6));
+  stroke-width: 2px;
   fill: transparent;
   width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -4162,6 +4341,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
+.sd-rating__item-star--small.sd-rating__item-star--selected svg {
+  stroke-width: 1px;
+}
 
 .sd-rating__item-star--selected svg {
   stroke: transparent;
@@ -4186,6 +4368,27 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   fill: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
+.sd-rating__item-star--readonly svg {
+  stroke: var(--sjs-border-default, var(--border, #d6d6d6));
+  fill: none;
+}
+
+.sd-rating__item-star--selected.sd-rating__item-star--readonly svg {
+  stroke: none;
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
+.sd-rating__item-star--preview svg {
+  stroke: var(--sjs-general-forecolor, var(--foreground, #161616));
+  stroke-width: 1px;
+  fill: none;
+}
+
+.sd-rating__item-star--selected.sd-rating__item-star--preview svg {
+  stroke: none;
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
 .sd-rating__item-star:focus-within svg {
   stroke: var(--sjs-primary-backcolor, var(--primary, #19b394));
   fill: transparent;
@@ -4300,6 +4503,28 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   left: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
+.sv-ranking.sd-ranking--readonly {
+  user-select: initial;
+  -webkit-user-select: initial;
+}
+.sv-ranking.sd-ranking--readonly.sv-ranking--select-to-rank-empty-value .sv-ranking__containers-divider {
+  visibility: hidden;
+}
+.sv-ranking.sd-ranking--readonly .sv-ranking__container--empty {
+  visibility: hidden;
+}
+
+.sv-ranking.sd-ranking--preview {
+  user-select: initial;
+  -webkit-user-select: initial;
+}
+.sv-ranking.sd-ranking--preview.sv-ranking--select-to-rank-empty-value .sv-ranking__containers-divider {
+  visibility: hidden;
+}
+.sv-ranking.sd-ranking--preview .sv-ranking__container--empty {
+  visibility: hidden;
+}
+
 @container (max-width: 496px) {
   .sv-ranking--select-to-rank-horizontal {
     flex-direction: column-reverse;
@@ -4526,12 +4751,22 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   white-space: pre;
 }
 
-.sd-input--disabled .sv-string-viewer {
+.sd-input--disabled .sv-string-viewer,
+.sd-input--readonly .sv-string-viewer,
+.sd-input--preview .sv-string-viewer {
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+.sd-question--readonly .sd-dropdown_chevron-button use {
+  opacity: 0.24;
+}
+
+.sd-question--preview .sd-dropdown_chevron-button {
+  display: none;
+}
+
 .sv-dropdown-popup .sd-list__item-body {
   --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
@@ -4575,14 +4810,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   background-position: left calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) top 50%, 0 0;
 }
 
-.sd-input.sd-tagbox:not(.sd-tagbox--empty):not(.sd-input--disabled) {
+.sd-input.sd-tagbox:not(.sd-tagbox--empty).sd-input--editable {
   height: auto;
   padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-inline-end: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-inline-start: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
-.sd-tagbox.sd-input--disabled {
+.sd-tagbox.sd-input--disabled, .sd-tagbox.sd-input--readonly, .sd-tagbox.sd-input--preview {
   white-space: normal;
 }
 
@@ -4849,11 +5084,41 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   align-items: flex-start;
   padding-right: 0;
 }
+.sd-imagepicker__column .sd-imagepicker__item {
+  width: 100%;
+}
+.sd-imagepicker__column .sd-imagepicker__text {
+  width: 100%;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+}
 
 .sd-selectbase__column.sd-imagepicker__column:not(:last-child) {
   padding-right: 0;
 }
 
+.sd-imagepicker__item--readonly .sd-imagepicker__check-icon {
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
+.sd-imagepicker__item--preview .sd-imagepicker__check-decorator {
+  display: none;
+}
+.sd-imagepicker__item--preview .sd-imagepicker__image {
+  /* Safari 6.0 - 9.0 */
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+  opacity: 0.25;
+}
+.sd-imagepicker__item--preview.sd-imagepicker__item--checked .sd-imagepicker__image {
+  /* Safari 6.0 - 9.0 */
+  -webkit-filter: grayscale(0%);
+  filter: grayscale(0%);
+  opacity: 1;
+}
+
 .sd-image__image {
   display: block;
   max-width: 100%;
@@ -5158,6 +5423,37 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   opacity: 0.25;
 }
 
+.sd-boolean--readonly {
+  pointer-events: none;
+  box-shadow: none;
+  transition: none;
+  background: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
+}
+.sd-boolean--readonly .sd-boolean__thumb {
+  box-shadow: inset 0px 0px 0px 2px var(--sjs-general-forecolor, var(--foreground, #161616));
+  transition: none;
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
+.sd-boolean--preview {
+  pointer-events: none;
+  box-shadow: none;
+  transition: none;
+  background: transparent;
+}
+.sd-boolean--preview .sd-boolean__thumb {
+  border: 1px solid var(--sjs-general-forecolor, var(--foreground, #161616));
+  box-shadow: none;
+  transition: none;
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+.sd-boolean--preview.sd-boolean--checked .sd-boolean__thumb, .sd-boolean--preview.sd-boolean--indeterminate .sd-boolean__thumb {
+  margin-left: auto;
+}
+.sd-boolean--preview .sd-checkbox__label--preview {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
 .sd-boolean__thumb-ghost {
   z-index: 1;
   border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -5196,6 +5492,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
+.sd-question--readonly .sd-paneldynamic .sd-question__placeholder,
+.sd-question--preview .sd-paneldynamic .sd-question__placeholder {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
 .sd-paneldynamic__separator {
   display: block;
   position: absolute;
@@ -5594,7 +5895,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   width: 100%;
 }
 
-.sd-file__preview {
+.sd-file__preview-item {
   position: relative;
   display: flex;
   align-items: stretch;
@@ -5603,13 +5904,13 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   width: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin: 0;
 }
-.sd-file__preview .sd-file__default-image {
+.sd-file__preview-item .sd-file__default-image {
   width: calc(7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: 90px;
 }
-.sd-file__preview img:hover + .sd-file__remove-file-button,
-.sd-file__preview svg:hover + .sd-file__remove-file-button,
-.sd-file__preview .sd-file__remove-file-button:hover {
+.sd-file__preview-item img:hover + .sd-file__remove-file-button,
+.sd-file__preview-item svg:hover + .sd-file__remove-file-button,
+.sd-file__preview-item .sd-file__remove-file-button:hover {
   opacity: 1;
 }
 
@@ -5682,7 +5983,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-file--single-image {
   height: calc(36 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
-.sd-file--single-image .sd-file__preview {
+.sd-file--single-image .sd-file__preview-item {
   width: 100%;
   margin: 0;
 }
@@ -5798,6 +6099,38 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   cursor: default;
 }
 
+.sd-file--readonly .sd-context-btn {
+  display: none;
+}
+.sd-file--readonly .sd-file__decorator {
+  border-color: transparent;
+}
+.sd-file--readonly .sd-file__actions-container {
+  display: none;
+}
+.sd-file--readonly .sd-file__image-wrapper {
+  background: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
+}
+.sd-file--readonly .sd-file__drag-area-placeholder {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
+.sd-file--preview .sd-context-btn {
+  display: none;
+}
+.sd-file--preview .sd-file__decorator {
+  border-color: transparent;
+}
+.sd-file--preview .sd-file__image-wrapper {
+  background: transparent;
+}
+.sd-file--preview .sd-file__actions-container {
+  display: none;
+}
+.sd-file--preview .sd-file__drag-area-placeholder {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
 .sd-hidden {
   display: none !important;
 }
@@ -6192,6 +6525,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   color: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 
+.sd-question--preview .sd-multipletext__item-title {
+  border: none;
+}
+
 .sd-multipletext__item {
   flex-grow: 1;
 }