847bc3864c
The primary license of the project is changing to: AGPL-3.0-or-later WITH Web-Template-Output-Additional-Permission-3.0-or-later The Additional Permission is designed to permit publicly distributed CSS to be relicensed under LGPL-3.0-or-later, so we're also relicensing all CSS files in the repository as LGPL-3.0-or-later, too. This commit is one of the many steps to relicense the entire codebase. Documentation granting permission for this relicensing (from all past contributors who hold copyrights) is on file with Software Freedom Conservancy, Inc.
92 lines
1.6 KiB
CSS
92 lines
1.6 KiB
CSS
/* License: LGPL-3.0-or-later */
|
||
@import 'flimflam/ui/modal/index.css'; /* npm */
|
||
|
||
[data-ff-modal-backdrop] {
|
||
z-index: 2;
|
||
transform: translateZ(0);
|
||
transition: opacity 200ms ease-out, visibility 200ms ease-out;
|
||
background: var(--scrim);
|
||
}
|
||
|
||
[data-ff-modal-backdrop=hidden] {
|
||
display: block;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
}
|
||
|
||
[data-ff-modal-backdrop=shown] {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
[data-ff-modal] {
|
||
box-shadow: var(--sh-2);
|
||
}
|
||
|
||
[data-ff-modal-header] { padding: 1rem 3rem 1rem 1rem; }
|
||
|
||
[data-ff-modal-body],
|
||
[data-ff-modal-footer] {
|
||
padding: 1rem;
|
||
}
|
||
|
||
[data-ff-modal-header] ,
|
||
[data-ff-modal-footer] {
|
||
background: var(--grey-1);
|
||
}
|
||
|
||
[data-ff-modal-header] h4 { margin: 0; }
|
||
|
||
[data-ff-modal-close-button] {
|
||
top: 1rem;
|
||
right: 1rem;
|
||
}
|
||
|
||
[data-ff-modal-close-button]:after {
|
||
line-height: 1;
|
||
font-size: 1.75rem;
|
||
color: var(--grey-6);
|
||
content: '×';
|
||
}
|
||
|
||
.modal-medium [data-ff-modal] {
|
||
width: 40rem;
|
||
margin-left: -20rem;
|
||
}
|
||
[data-ff-confirmation] [data-ff-modal],
|
||
.modal-small [data-ff-modal] {
|
||
width: 30rem;
|
||
margin-left: -15rem;
|
||
}
|
||
|
||
.modal-large [data-ff-modal] {
|
||
width: 50rem;
|
||
margin-left: -25rem;
|
||
}
|
||
|
||
@media (max-width: 40rem) {
|
||
.modal-medium [data-ff-modal] {
|
||
width: calc(100% - 1rem);
|
||
margin-left: -0.5rem;
|
||
left: 1rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 50rem) {
|
||
.modal-large [data-ff-modal] {
|
||
width: calc(100% - 1rem);
|
||
margin-left: -0.5rem;
|
||
left: 1rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 30rem) {
|
||
[data-ff-confirmation] [data-ff-modal],
|
||
.modal-small [data-ff-modal] {
|
||
width: calc(100% - 1rem);
|
||
margin-left: -0.5rem;
|
||
left: 1rem;
|
||
}
|
||
}
|
||
|
||
|