snapshot of https://github.com/espocrm/espocrm.git (master, 2026-09-18; blobs > 131072B omitted)

frontend/less/espo/elements/modal.less

@@ -0,0 +1,365 @@
+.modal-container.overlaid .modal-content {
+    .box-shadow(none);
+}
+
+.modal-header {
+    background-color: @modal-header-bg;
+    padding: var(--modal-title-padding) var(--panel-padding);
+    border-bottom: 0 solid var(--modal-header-border-color);
+    min-height: calc(var(--modal-title-line-height) + var(--modal-title-padding));
+
+    &.fixed-height {
+        height: var(--43px);
+        max-height: var(--43px);
+        overflow: hidden;
+
+        .modal-title {
+            width: calc(100% - var(--21px));
+            > .modal-title-text {
+                max-width: 100%;
+                overflow: hidden;
+                white-space: nowrap;
+                display: inline-block;
+            }
+
+            &.overlapped {
+                > .modal-title-text {
+                    &:before {
+                        content: " ";
+                        position: absolute;
+                        right: var(--34px);
+                        background: linear-gradient(to right, transparent, @modal-header-bg);
+                        height: var(--30px);
+                        width: calc(var(--30px) * 2);
+                    }
+                }
+            }
+        }
+    }
+
+    .modal-title {
+        > .modal-title-text {
+            user-select: none;
+        }
+    }
+
+    a {
+        color: @text-color;
+    }
+
+    .close {
+        font-size: var(--31px);
+        font-weight: normal;
+        margin-top: calc(var(--6px) * -1);
+        max-height: var(--24px);
+        > span {
+            position: relative;
+            max-height: var(--24px);
+            height: var(--24px);
+            display: inline-block;
+        }
+        opacity: 1;
+        text-shadow: none;
+
+        &,
+        > .fas,
+        > .far {
+            color: var(--text-muted-color);
+        }
+
+        &:hover {
+            opacity: 1;
+            &,
+            > .fas,
+            > .far {
+                color: var(--btn-text-color);
+            }
+        }
+    }
+
+    .collapse-button,
+    .maximize-button,
+    .minimize-button {
+        position: relative;
+
+        padding-right: var(--17px);
+        padding-left: var(--17px);
+        float: right;
+
+        &,
+        > .fas,
+        > .far {
+            color: var(--text-muted-color);
+        }
+
+        &:hover {
+            &,
+            > .fas,
+            > .far {
+                color: var(--btn-text-color);
+            }
+        }
+    }
+
+    .maximize-button,
+    .minimize-button {
+        top: var(--2px);
+        left: var(--minus-3px);
+    }
+
+    .collapse-button {
+        top: var(--3px);
+        left: var(--minus-3px);
+    }
+}
+
+.modal-footer {
+    margin-top: var(--modal-title-padding);
+    padding: var(--panel-padding) var(--panel-padding) var(--panel-padding);
+    background-color: @modal-footer-bg;
+
+    &.shadowed:not(.has-sticked-bar) {
+        box-shadow: var(--top-bar-box-shadow);
+    }
+
+    > .main-btn-group {
+        float: left;
+    }
+
+    > .additional-btn-group {
+        float: right;
+    }
+}
+
+.modal-backdrop.in {
+    background-color: var(--modal-backdrop-bg);
+    backdrop-filter: var(--modal-backdrop-filter);
+    opacity: 1;
+
+    &.backdrop-confirm {
+        z-index: 1051;
+    }
+}
+
+.modal-dialog > .modal-content {
+    background-clip: border-box;
+    border-color: transparent;
+    border-width: 0;
+
+    @media (min-width: @screen-sm-min) {
+        box-shadow: var(--modal-box-shadow);
+    }
+}
+
+.modal-footer {
+    margin-top: 0;
+    padding-top: var(--modal-title-padding);
+    padding-bottom: var(--modal-title-padding);
+}
+
+.modal-header {
+    padding-top: var(--8px);
+    padding-bottom: var(--8px);
+}
+
+.modal-header + .modal-footer {
+    position: relative;
+    z-index: 4;
+}
+
+
+.dialog-confirm {
+    .modal-footer > .main-btn-group {
+        float: right;
+    }
+
+    .modal-footer > .additional-btn-group {
+        float: left;
+    }
+
+    &.modal {
+        z-index: 1052;
+    }
+}
+
+.modal-container {
+    > .modal {
+        > .modal-dialog {
+            > .modal-content {
+                @media (min-width: @screen-sm-min) {
+                    border-left: var(--modal-border-width) solid var(--modal-border-color);
+                }
+            }
+        }
+    }
+}
+
+@media (min-width: @screen-sm-min) {
+    .modal-dialog {
+        margin: 0 0 0 auto;
+    }
+    .modal-content .note-editor > .modal > .modal-dialog {
+        margin: 0 0 0 calc(var(--container-padding) * -1);
+    }
+
+    .dialog-confirm > .modal-dialog,
+    .dialog-centered > .modal-dialog {
+        margin: 0 auto;
+    }
+}
+
+@media (max-width: @screen-sm-min) {
+    .modal-dialog {
+        margin: 0 0 0 0;
+    }
+}
+
+.modal-dialog {
+
+    .modal-body {
+        .list-sticky-bar {
+            top: var(--94px) !important;
+            width: 100% !important;
+            right: 0 !important;
+            left: unset !important;
+            padding-left: calc(var(--container-padding) - var(--1px));
+            padding-right: calc(var(--container-padding) - var(--1px) + var(--scroll-width));
+        }
+    }
+
+    &:not(:has(footer.modal-footer)) {
+        .modal-body {
+            .list-sticky-bar {
+                top: var(--43px) !important;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: @screen-xs-max) {
+    .modal-dialog {
+        margin: 0 0;
+    }
+
+    .modal-dialog {
+        .image-container {
+            margin-left: calc(0rem - var(--modal-padding));
+            margin-right: calc(0rem - var(--panel-padding));
+        }
+    }
+}
+
+.modal-dialog {
+    &.maximized {
+        .image-container {
+            > img {
+                max-height: calc(100vh - (var(--43px) + var(--modal-inner-padding) * 2));
+            }
+        }
+    }
+}
+
+.dialog-confirm > .modal-dialog > .modal-content {
+    text-align: center;
+
+    .confirm-message {
+        > ul {
+            text-align: start;
+        }
+    }
+}
+
+@media screen and (min-width: @screen-sm-min) {
+    .modal-dialog {
+        width: ~"min(var(--740px), 94vw)";
+    }
+}
+
+@media screen and (min-width: @screen-md-min) {
+    .modal-dialog {
+        width: ~"min(calc(var(--900px) + var(--30px)), 90vw)";
+    }
+
+    .dialog-confirm > .modal-dialog,
+    .dialog-centered > .modal-dialog {
+        width: ~"min(var(--550px), 90vw)";
+    }
+}
+
+@media screen and (min-width: @screen-sm-min) {
+    .modal-dialog.maximized {
+        width: 100vw;
+    }
+}
+
+.dialog-confirm,
+.dialog-centered {
+    > .modal-dialog > .modal-content {
+        border-radius: var(--panel-border-radius);
+
+        @media screen and (max-width: @screen-xs-max) {
+            // Already applied for wider screens.
+            box-shadow: var(--modal-box-shadow);
+        }
+
+        > .modal-header {
+            //border-top-left-radius: var(--panel-border-radius);
+            //border-top-right-radius: var(--panel-border-radius);
+        }
+
+        > .modal-footer {
+            border-bottom-left-radius: var(--panel-border-radius);
+            border-bottom-right-radius: var(--panel-border-radius);
+        }
+
+        > .modal-body {
+            .panel.no-side-margin {
+                box-shadow: none;
+            }
+        }
+
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+
+        border: var(--modal-border-width) solid var(--modal-border-color);
+        border-top-width: 0;
+    }
+}
+
+.modal-body > .no-side-margin {
+    margin-left: calc(0rem - var(--panel-padding));
+    margin-right: calc(0rem - var(--panel-padding));
+
+    > .negate-no-side-margin {
+        margin-left: var(--panel-padding);
+        margin-right: var(--panel-padding);
+    }
+}
+
+.modal.in .modal.in {
+    overflow: visible !important;
+    //noinspection CssOverwrittenProperties
+    overflow-y: visible !important;
+}
+
+.modal.in {
+    .modal-dialog {
+        // Important. Prevents overflow of sticky bars.
+        transform: translate(0, 0);
+    }
+}
+
+.modal-body > .list-group {
+    background-color: var(--panel-bg);
+}
+
+
+.modal {
+    &.dialog-record,
+    &:has(> .modal-dialog > .modal-content > .modal-body > .record.no-side-margin),
+    &:has(> .modal-dialog > .modal-content > .modal-body > .record-container.no-side-margin) {
+        .modal-body {
+            scrollbar-gutter: stable;
+        }
+    }
+}