forked from treehouse/mastodon
Refactor scss (#6913)
* Refactoring scss introduce scss variables for the media modal fix css block structure corresponding to react components fix flex layouts remove background image of the loaded image on the media modal * Fix typorebase/4.0.0rc2
parent
605a92b460
commit
f691afaae9
|
@ -1435,14 +1435,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 {
|
||||
|
@ -1455,7 +1460,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;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-bar {
|
||||
|
@ -3422,27 +3436,6 @@ a.status-card {
|
|||
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 {
|
||||
|
|
|
@ -30,3 +30,8 @@ $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%;
|
||||
|
|
Loading…
Reference in New Issue