parent
a4fa8c9064
commit
101e6564fd
|
@ -355,14 +355,19 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
&.image-loader--loading {
|
.image-loader__preview-canvas {
|
||||||
display: flex;
|
max-width: $media-modal-media-max-width;
|
||||||
align-content: center;
|
max-height: $media-modal-media-max-height;
|
||||||
|
background: url('~images/void.png') repeat;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
.image-loader__preview-canvas {
|
&.image-loader--loading .image-loader__preview-canvas {
|
||||||
filter: blur(2px);
|
filter: blur(2px);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.image-loader--amorphous .image-loader__preview-canvas {
|
&.image-loader--amorphous .image-loader__preview-canvas {
|
||||||
|
@ -375,7 +380,16 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
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 {
|
.dropdown {
|
||||||
|
|
|
@ -167,27 +167,6 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
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 {
|
.media-modal__closer {
|
||||||
|
|
|
@ -31,6 +31,11 @@ $ui-highlight-color: $classic-highlight-color !default; // Vibrant
|
||||||
// Language codes that uses CJK fonts
|
// Language codes that uses CJK fonts
|
||||||
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
|
$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)
|
// Avatar border size (8% default, 100% for rounded avatars)
|
||||||
$ui-avatar-border-size: 8%;
|
$ui-avatar-border-size: 8%;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue