body { scrollbar-color: rgba(var(--bs-body-color-rgb), 0.1) #fff; scrollbar-width: thin; } body::-webkit-scrollbar { width: 0.5rem; background-color: rgba(var(--bs-body-bg-rgb), 0.1); -webkit-box-shadow: none; } body::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 1px rgba(var(--bs-body-color-rgb), 0.05); } body::-webkit-scrollbar-thumb { background-color: rgba(var(--bs-body-color-rgb), 0.15); outline: 1px solid slategrey; } [data-vvveb-disabled] { pointer-events: none; position: relative; } [data-vvveb-disabled]::after { content: "Non-editable area"; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; padding-top: 5px; font-weight: 600; font-size: 12px; text-align: center; background: rgba(252, 252, 252, 0.85); border: 1px dashed #999; overflow: hidden; display: flex; align-items: center; justify-content: center; } [data-vvveb-disabled-area] *:not([data-vvveb-edit-exception]) { pointer-events: none; position: relative; } [data-vvveb-disabled-area] *:not([data-vvveb-edit-exception])::after { content: "Non-editable area"; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; padding-top: 5px; font-weight: 600; font-size: 12px; text-align: center; background: rgba(252, 252, 252, 0.85); border: 1px dashed #999; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* Prevents iframe mouse events that prevents clicking on the component */ [data-component-lottie] > svg, [data-component-oembed] iframe, [data-component-oembed] > div, [data-component-video] > iframe, [data-component-maps] > iframe, [data-component-twitter] > iframe, [data-component-iframe] > iframe, [data-component-openstreetmap] > iframe { pointer-events: none; } [contenteditable="true"] { outline: none; } [contenteditable="true"]:focus-visible { outline: none; } .is-dragged { pointer-events: none; opacity: 0.15; position: relative; /* &:after { position: absolute; width: 100%; height: 100%; left: 0; background: rgba(255,255,0,0.1); content: " "; top: 0; }*/ } .vvveb-hidden { display: none !important; } section .container div > .row > [class*="col-"]:empty, section .container div > .row > .col:empty, section .container > .row > [class*="col-"]:empty, section .container > .row > .col:empty, section .container-fluid div > .row > [class*="col-"]:empty, section .container-fluid div > .row > .col:empty, section .container-fluid > .row > [class*="col-"]:empty, section .container-fluid > .row > .col:empty { background: var(--bs-tertiary-bg); min-height: 200px; outline: 1px solid var(--bs-border-color); outline-offset: -0.5rem; margin: 0.5rem; display: flex; } section .container div > .row > [class*="col-"]:empty:after, section .container div > .row > .col:empty:after, section .container > .row > [class*="col-"]:empty:after, section .container > .row > .col:empty:after, section .container-fluid div > .row > [class*="col-"]:empty:after, section .container-fluid div > .row > .col:empty:after, section .container-fluid > .row > [class*="col-"]:empty:after, section .container-fluid > .row > .col:empty:after { content: 'Drag elements here'; font-size: 85%; color: var(--bs-secondary); display: block; vertical-align: middle; display: flex; align-self: center; margin: auto; } section:hover .container div > .row > [class*="col-"], section:hover .container div > .row > .col, section:hover .container > .row > [class*="col-"], section:hover .container > .row > .col, section:hover .container-fluid div > .row > [class*="col-"], section:hover .container-fluid div > .row > .col, section:hover .container-fluid > .row > [class*="col-"], section:hover .container-fluid > .row > .col { outline: 1px dashed rgba(var(--bs-success-rgb), 0.35); outline-offset: -2px; } .row:hover > [class*="col-"], .row:hover > .col { outline: 1px dashed rgba(var(--bs-success-rgb), 0.35); outline-offset: -2px; }