.layout-builder { padding: 1.5em 1.5em 0.5em; border: 3px solid #2f91da; background-color: #fff; } .layout-builder__add-section { width: 100%; margin-bottom: 1.5em; padding: 1.5em 0; text-align: center; outline: 2px dashed #979797; background-color: #f7f7f7; } .layout-builder__link--add { padding-left: 1.3em; /* LTR */ color: #686868; border-bottom: none; background: url(../../../misc/icons/787878/plus.svg) transparent center left / 1em no-repeat; /* LTR */ } [dir="rtl"] .layout-builder__link--add { padding-right: 1.3em; padding-left: 0; background-position-x: right; } .layout-builder__link--add:hover, .layout-builder__link--add:active, .layout-builder__link--add:focus { color: #000; border-bottom-style: none; } .layout-builder__section { margin-bottom: 1.5em; } .layout-builder__section .ui-sortable-helper { outline: 2px solid #f7f7f7; background-color: #fff; } .layout-builder__section .ui-state-drop { margin: 20px; padding: 30px; outline: 2px dashed #fedb60; background-color: #ffd; } .layout-builder__region { outline: 2px dashed #2f91da; } .layout-builder__add-block { padding: 1.5em 0; text-align: center; background-color: #eff6fc; } .layout-builder__link--remove { position: relative; z-index: 2; display: inline-block; box-sizing: border-box; width: 26px; height: 26px; margin-right: 6px; /* LTR */ margin-left: -10px; /* LTR */ padding: 0; white-space: nowrap; text-indent: -9999px; border: 1px solid #ccc; border-radius: 26px; background: url(../../../misc/icons/bebebe/ex.svg) #fff center center / 16px 16px no-repeat; font-size: 1rem; } [dir="rtl"] .layout-builder__link--remove { margin-right: -10px; margin-left: 6px; } .layout-builder__link--remove:hover { background-image: url(../../../misc/icons/787878/ex.svg); } .layout-builder-block { padding: 1.5em; cursor: move; background-color: #fff; } .layout-builder-block [tabindex="-1"] { pointer-events: none; } .layout-builder__message .messages { background-repeat: no-repeat; } .layout-builder__message--defaults .messages { background-image: url("../../../misc/icons/73b355/globe.svg"); } .layout-builder__message--overrides .messages { background-image: url("../../../misc/icons/73b355/location.svg"); } .layout-builder-block__content-preview-placeholder-label { margin: 0; text-align: center; font-size: 1.429em; line-height: 1.4; } .layout-builder--content-preview-disabled .layout-builder-block { margin: 0; border-bottom: 2px dashed #979797; } #drupal-off-canvas .layout-selection li { display: block; padding-bottom: 1em; } #drupal-off-canvas .layout-selection li a { display: block; padding-top: 0.55em; } #drupal-off-canvas .inline-block-create-button { display: block; padding: 24px; padding-left: 44px; color: #eee; border-bottom: 1px solid #333; background: url(../../../misc/icons/bebebe/plus.svg) transparent 16px no-repeat; font-size: 16px; } #drupal-off-canvas .inline-block-create-button, #drupal-off-canvas .inline-block-list__item { margin: 0 -20px; background-color: #444; } #drupal-off-canvas .inline-block-create-button:hover, #drupal-off-canvas .inline-block-list__item:hover { background-color: #333; } #drupal-off-canvas .inline-block-list { margin-bottom: 15px; } #drupal-off-canvas .inline-block-list__item { display: block; padding: 15px 0 15px 25px; } .layout-builder__add-section.is-layout-builder-highlighted { margin-bottom: calc(1.5em - 8px); outline: none; } .layout-builder__layout.is-layout-builder-highlighted, .layout-builder-block.is-layout-builder-highlighted, .layout-builder__add-block.is-layout-builder-highlighted { position: relative; z-index: 1; margin: -4px -2px; } .layout-builder__add-block.is-layout-builder-highlighted, .layout-builder__add-section.is-layout-builder-highlighted, .layout-builder__layout.is-layout-builder-highlighted:before, .layout-builder__layout.is-layout-builder-highlighted, .layout-builder-block.is-layout-builder-highlighted { border: 4px solid #000; } /* Highlight the active block in the Move Block dialog. */ #drupal-off-canvas .layout-builder-components-table__block-label--current { padding-left: 17px; border-left: solid 5px; } /** * @todo remove in https://www.drupal.org/project/drupal/issues/3042127 * This rule ensures the row weight dropdowns in the Move Block dialog * maintain the background color of their container when they are hovered * over or are inside the active row. */ #drupal-off-canvas .layout-builder-components-table__row .form-item { background-color: transparent; } .layout-builder__region-label, .layout-builder__section-label { display: none; } .layout-builder--move-blocks-active .layout-builder__region-label { display: block; } .layout-builder--move-blocks-active .layout-builder__section-label { display: inline; } .layout__region-info { padding: 0.5em; text-align: center; border-bottom: 2px dashed #979797; } /** * Remove "You have unsaved changes" warning because Layout Builder always has * unsaved changes until "Save layout" is submitted. * @todo create issue for todo. */ .layout-builder-components-table .tabledrag-changed-warning { display: none !important; }