Changeset View
Changeset View
Standalone View
Standalone View
web/media/media.css
Show First 20 Lines • Show All 89 Lines • ▼ Show 20 Lines | div.multimediaModalOverlay { | ||||
height: 100%; | height: 100%; | ||||
background-color: rgba(0, 0, 0, 0.9); | background-color: rgba(0, 0, 0, 0.9); | ||||
overflow: auto; | overflow: auto; | ||||
padding: 10px; | padding: 10px; | ||||
box-sizing: border-box; | box-sizing: border-box; | ||||
display: flex; | display: flex; | ||||
justify-content: center; | justify-content: center; | ||||
} | } | ||||
div.multimediaModalOverlay > img, | div.multimediaModalOverlay > .mediaContainer { | ||||
div.multimediaModalOverlay > video { | display: flex; | ||||
object-fit: scale-down; | justify-content: center; | ||||
align-items: center; | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
div.mediaContainer > img, | |||||
div.mediaContainer > video { | |||||
width: auto; | width: auto; | ||||
height: auto; | height: auto; | ||||
max-width: 100%; | max-width: 100%; | ||||
max-height: 100%; | max-height: 100%; | ||||
display: block; | |||||
margin: auto; | |||||
background-position: center; | |||||
background-size: cover; | |||||
background-repeat: no-repeat; | |||||
} | } | ||||
svg.closeMultimediaModal { | svg.closeMultimediaModal { | ||||
position: absolute; | position: absolute; | ||||
cursor: pointer; | cursor: pointer; | ||||
top: 15px; | top: 15px; | ||||
right: 15px; | right: 15px; | ||||
color: white; | color: white; | ||||
border-radius: 50%; | border-radius: 50%; | ||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); | box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); | ||||
background-color: rgba(34, 34, 34, 0.67); | background-color: rgba(34, 34, 34, 0.67); | ||||
height: 36px; | height: 36px; | ||||
width: 36px; | width: 36px; | ||||
} | } |