parent
a4fa8c9064
commit
101e6564fd
|
@ -355,14 +355,19 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.image-loader--loading {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
.image-loader__preview-canvas {
|
||||
max-width: $media-modal-media-max-width;
|
||||
max-height: $media-modal-media-max-height;
|
||||
background: url('~images/void.png') repeat;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.image-loader__preview-canvas {
|
||||
filter: blur(2px);
|
||||
}
|
||||
&.image-loader--loading .image-loader__preview-canvas {
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
&.image-loader--amorphous .image-loader__preview-canvas {
|
||||
|
@ -375,7 +380,16 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
max-width: $media-modal-media-max-width;
|
||||
max-height: $media-modal-media-max-height;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
|
|
|
@ -167,27 +167,6 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
img,
|
||||
canvas,
|
||||
video {
|
||||
max-width: 100%;
|
||||
/*
|
||||
put margins on top and bottom of image to avoid the screen coverd by
|
||||
image.
|
||||
*/
|
||||
max-height: 80%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
img,
|
||||
canvas {
|
||||
display: block;
|
||||
background: url('~images/void.png') repeat;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.media-modal__closer {
|
||||
|
|
|
@ -31,6 +31,11 @@ $ui-highlight-color: $classic-highlight-color !default; // Vibrant
|
|||
// Language codes that uses CJK fonts
|
||||
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
|
||||
|
||||
// Variables for components
|
||||
$media-modal-media-max-width: 100%;
|
||||
// put margins on top and bottom of image to avoid the screen covered by image.
|
||||
$media-modal-media-max-height: 80%;
|
||||
|
||||
// Avatar border size (8% default, 100% for rounded avatars)
|
||||
$ui-avatar-border-size: 8%;
|
||||
|
||||
|
|
Loading…
Reference in New Issue