.slide { /* swipebox slide background gradient of black to blue, so that back SVG images are visible */ background: rgb(2,0,36); background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 14%, rgba(0,212,255,1) 100%); } .attachment-upload { text-align: center; font-weight: bold; } .attachments-gallery { display: flex; flex-wrap: wrap; } .attachments-gallery .attachment-item { width: 31.33%; margin: 10px 1% 0; text-align: center; border-radius: 3px; overflow: auto; background: #ededed; min-height: 120px; } .attachments-gallery .attachment-item:hover { background: #e0e0e0; } .attachments-gallery .attachment-item.add-attachment { display: flex; align-items: center; } .attachments-gallery .attachment-item.add-attachment a { display: block; margin: auto; } .attachments-gallery .attachment-item .attachment-thumbnail { height: 80px; display: flex; align-items: center; justify-content: center; position: relative; } .attachments-gallery .attachment-item .attachment-thumbnail .attachment-thumbnail-img { max-height: 100%; max-width: 100%; } .attachments-gallery .attachment-item .attachment-thumbnail .attachment-thumbnail-ext { text-transform: uppercase; font-size: 1.6em; } .attachments-gallery .attachment-item .attachment-details { font-size: 0.75em; margin: 3px; } .attachments-gallery .attachment-item .attachment-details .attachment-details-actions a { display: block; } .attachments-gallery .attachment-item .attachment-details .attachment-details-actions a.attachment-details-menu { padding-top: 10px; } .attachment-image-preview { max-width: 100px; display: block; box-shadow: 0 1px 2px rgba(0,0,0,0.2); } .preview-clipboard-image { width: 280px; max-width: 100%; height: 200px; display: block; border: 1px solid #000; box-shadow: 0 1px 2px rgba(0,0,0,0.2); } #viewer-overlay{ width: 100%; height: 100vh; position: fixed; top: 48px; /* height of the navbar */ left: 0; z-index: 9999 !important; background: rgba(13,13,13,0.9); } #viewer-container { position: relative; width: 100%; height: 100%; } #viewer-close { color:white; cursor: pointer; font-size: 4em; top: 0; right: 16px; position: absolute; padding: 20 20; } #viewer-container{ text-align: center; } #pdf-viewer { width: 40vw; height: 100vh; } .pdf-preview-error{ margin-top: 20vh; display: block; font-size: 2em; color: white; } @media screen and (max-width: 1600px) { #pdf-viewer { width: 60vw; } } @media screen and (max-width: 800px) { #pdf-viewer { width: 100vh; } .attachments-gallery .attachment-item { width: 48%; } .attachments-gallery .attachment-item .attachment-thumbnail { height: 130px; } .attachments-gallery .attachment-item .attachment-details { font-size: 1.1em; } } @media screen and (max-width: 360px) { .attachments-gallery .attachment-item { width: 100%; } .attachments-gallery .attachment-item .attachment-thumbnail { height: 200px; } }