cybrespace
/
mastodon
4
3
Fork 3
Code Issues 7 Pull Requests Releases Activity

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 typo
This commit is contained in:
Yuto Tokunaga 2018-03-26 20:59:21 +09:00 committed by Eugen Rochko
parent 605a92b460
commit f691afaae9
2 changed files with 26 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
app/javascript/styles/mastodon/components.scss
View File

@ -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 {

5
app/javascript/styles/mastodon/variables.scss
View File

@ -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%;