humhub/static/less/modal.less
s-tyshchenko 84f53987fa
Modal: Close Icon Optimization (#5566)
* Modal: Close Icon optimization

* Update theme.css

* Revert "Update theme.css"

This reverts commit 63718fd7e14714d8e4e6598ce285fe6bb4925033.

* Revert "Modal: Close Icon optimization"

This reverts commit e143f86c5e8f82a845c8c2c0e45bdac07127cbca.

* Modal: Close Icon optimization

* Update modal.less

Co-authored-by: Lucas Bartholemy <luke-@users.noreply.github.com>
2022-02-23 15:25:01 +01:00

147 lines
2.4 KiB
Plaintext

//
// Modals
// --------------------------------------------------
.modal-backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
//
// Animate.css modifications
// --------------------------------------------------
.modal-dialog.fadeIn,
.modal-dialog.pulse {
-webkit-animation-duration: 200ms;
-moz-animation-duration: 200ms;
animation-duration: 200ms;
}
body.modal-open {
height: 100vh;
overflow-y: hidden;
}
@media screen and (max-width: 768px) {
.modal-dialog {
width: calc(100vw - 4px) !important;
}
}
.modal-top {
z-index: 999999 !important;
}
.modal {
overflow-y: visible;
}
.modal.in {
padding-right: 0 !important;
}
.modal-dialog-extra-small {
width: 400px;
}
.modal-dialog-small {
width: 500px;
}
.modal-dialog-normal {
width: 600px;
}
.modal-dialog-medium {
width: 768px;
}
.modal-dialog-large {
width: 900px;
}
@media screen and (max-width: 991px) {
.modal-dialog-large {
width: auto !important;
padding-top: 30px;
padding-bottom: 30px;
}
}
.modal {
border: none;
h1,
h2,
h3,
h4,
h5 {
margin-top: 20px;
color: @text-color-highlight;
font-weight: 300;
}
h4.media-heading {
margin-top: 0;
}
}
.modal-title {
font-size: 20px;
font-weight: 200;
color: @text-color-highlight;
}
.modal-dialog, .modal-content {
min-width: 150px;
}
.modal-content {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 0 2px 26px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 2px 26px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 26px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.1);
border: none;
.modal-header {
padding: 20px 20px 0;
border-bottom: none;
text-align: center;
.close {
margin-top: 2px;
margin-right: 5px;
opacity: 1;
color: @primary;
font-size: 28px;
&:hover {
opacity: 0.9;
}
}
}
.modal-body {
padding: 20px;
font-size: 13px;
ul.medialist {
li > a {
}
}
}
.modal-footer {
margin-top: 0;
text-align: left;
padding: 10px 20px 30px;
border-top: none;
text-align: center;
hr {
margin-top: 0;
}
}
}