fedi/mastodon
1
0
Fork 1
mirror of https://github.com/mastodon/mastodon.git synced 2024-12-16 15:16:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Refactor scss

Browse source 
Port f691afaae9 to glitch-soc
This commit is contained in:
Thibaut Girka 2018-04-09 00:56:59 +02:00
parent a4fa8c9064
commit 101e6564fd
3 changed files with 26 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
app/javascript/flavours/glitch/styles/components/index.scss
View file

@ -355,14 +355,19 @@
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
&.image-loader--loading {
display: flex; display: flex;
align-content: center; align-items: center;
justify-content: center;
.image-loader__preview-canvas { .image-loader__preview-canvas {
filter: blur(2px); 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--loading .image-loader__preview-canvas {
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 {

21
app/javascript/flavours/glitch/styles/components/media.scss
View file

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

5
app/javascript/flavours/glitch/styles/variables.scss
View file

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