:root {
--background: #f0f0f0;
--itemHover: #d0d0d0;
}
.lds-ring {
display: inline-block;
position: relative;
width: 2rem;
height: 2rem;
margin-left: .5rem;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 1.5rem;
height: 1.5rem;
margin: 2px;
border: 2px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#attachmentDropzone {
width: 100%;
height: 10rem;
border: solid 1px grey;
border-radius: .5rem;
overflow-y: auto;
}
#attachmentDialog {
position: fixed;
width: 50%;
height: 60vh;
top: 20%;
left: 25%;
z-index: 1001;
background-color: var(--background);
box-shadow: 5px 5px 12px #444;
border-radius: 1rem;
overflow: auto;
display: none;
padding: 0 1rem;
}
.attach-dialog-show {
display: block !important;
}
#attachmentDialog #closeAttachmentDialog {
position: absolute;
top: 1rem;
right: 1rem;
background: transparent;
border: none;
font-size: 150%;
cursor: pointer;
}
#attachmentDialog .row {
display: flex;
}
#attachmentDialog .row .column {
padding: 1rem;
width: 50%;
}
#attachmentDialog .row .column h3 {
font-size: 200%;
}
#attachmentDialog .row .column:nth-child(1) h3 {
margin-bottom: .5rem;
}
#attachmentDialog .row .column img {
width: 90%;
height: auto;
border-radius: .2rem;
}
#attachmentDialog .row .column #fapp_attachmentCoverImage {
display: none;
}
#attachmentDialog .row .column #fapp_attachmentCoverImageLabel i {
margin-right: .5rem;
font-size: 120%;
}
#attachmentDialog .row .column input {
width: 90%;
margin-bottom: 2rem;
}
#attachmentDialog .row .column textarea {
width: 90%;
margin-bottom: 2rem;
}
#attachmentDialog .row .column #fapp_attachmentSend {
width: 5rem;
margin-top: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
#attachmentsContainer {
width: 100%;
height: 15rem;
background-color: var(--background);
overflow-y: auto;
margin-bottom: 1rem;
display: flex;
flex-direction: column;
}
#attachmentsContainer .att-item {
display: flex;
align-items: center;
width: 100%;
padding: 1rem;
}
#attachmentsContainer .att-item:hover {
background-color: var(--itemHover);
}
#attachmentsContainer .att-item .action-btns {
display: none;
}
#attachmentsContainer .att-item:hover .action-btns {
display: flex;
}
#attachmentsContainer .att-item a {
margin-right: .5rem;
}
#attachmentsContainer .att-item i {
font-size: 120%;
cursor: pointer;
margin-right: .5rem;
}
#attachmentsContainer .att-item span {
margin-left: .5rem;
margin-right: 1rem;
width: 7.5rem;
overflow: hidden;
}
|