--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/default/assets/scss/components/_modals.scss	Sat May 31 09:21:51 2025 +0800
@@ -0,0 +1,82 @@
+// main: ../style.scss
+
+/* Modals
+========================*/
+.modal-content {
+  padding: 0 $modal-inner-padding;
+  border-radius: em(3);
+
+  .close {
+    font-size: em(18);
+    top: em(-18,21);
+    position: absolute;
+    right: em(-18,21);
+    height: em(36,18);
+    width: em(36,18);
+    background-color: #313a46;
+    opacity: 1;
+    border: 2px solid #ffffff;
+    text-shadow: none;
+    color: #ffffff;
+    border-radius: 50%;
+    text-align: center;
+    line-height: em(33,18);
+
+    &:hover { background-color: $primary; }
+  }
+
+  body.rtl & {
+    .close {
+      right: auto;
+      left: em(-18,21);
+    }
+  }
+}
+
+.modal-footer,
+.modal-body {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.modal-header {
+  border-top-left-radius: em(3);
+  border-top-right-radius: em(3);
+  margin: -1px calc(#{$modal-inner-padding * -1} - 1px) 0;
+}
+
+.modal-title {
+  margin-top: 0;
+}
+
+.modal-body {
+  h1,h2,h3,h4,h5,h6 {
+    color: #777;
+  }
+}
+
+.modal-img {
+  cursor: pointer;
+}
+
+@each $col, $val in $theme-colors {
+  .modal-#{$col} {
+    .modal-content .modal-header {
+      background: #{$val};
+      border: 0;
+    }
+  }
+}
+
+@each $col, $val in $colors {
+  .modal-#{$col} {
+    .modal-content .modal-header {
+      background: #{$val};
+      border: 0;
+    }
+  }
+}
+
+.modal-content .modal-header {
+  background: none;
+}