mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 12:56:41 +07:00
fixed background size cover
This commit is contained in:
parent
a76ee66f51
commit
da47da9d6a
9 changed files with 19 additions and 14 deletions
|
@ -3,7 +3,8 @@
|
||||||
height: $comment_height;
|
height: $comment_height;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background: 50% 50% no-repeat/cover;
|
background: 50% 50% no-repeat;
|
||||||
|
background-size: cover;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
@ -4,7 +4,8 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
background: 50% 50% no-repeat/cover;
|
background: 50% 50% no-repeat;
|
||||||
|
background-size: cover;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 1s;
|
transition: opacity 1s;
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,8 @@
|
||||||
padding-top: 56.25%;
|
padding-top: 56.25%;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
background: 50% 50% no-repeat/cover;
|
background: 50% 50% no-repeat;
|
||||||
|
background-size: cover;
|
||||||
// background: darken($color: $content_bg, $amount: 2%);
|
// background: darken($color: $content_bg, $amount: 2%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -8,7 +8,8 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: white;
|
color: white;
|
||||||
background: 50% 50% no-repeat/cover $content_bg;
|
background: 50% 50% no-repeat $content_bg;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
.is_hero {
|
.is_hero {
|
||||||
.title {
|
.title {
|
||||||
|
|
|
@ -26,7 +26,8 @@
|
||||||
.thumb {
|
.thumb {
|
||||||
height: 48px;
|
height: 48px;
|
||||||
margin-right: $gap;
|
margin-right: $gap;
|
||||||
background: 50% 50% no-repeat/cover;
|
background: 50% 50% no-repeat;
|
||||||
|
background-size: cover;
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
flex: 0 0 48px;
|
flex: 0 0 48px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
@ -55,7 +55,8 @@ $outgoing_color: $comment_bg;
|
||||||
flex: 0 0 40px;
|
flex: 0 0 40px;
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
|
|
||||||
background: 50% 50% no-repeat/cover;
|
background: 50% 50% no-repeat;
|
||||||
|
background-size: cover;
|
||||||
// display: none;
|
// display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -18,7 +18,8 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background: url('~/sprites/lost.svg') 50% 50% no-repeat/cover;
|
background: url('~/sprites/lost.svg') 50% 50% no-repeat;
|
||||||
|
background-size: cover;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,8 @@
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
background: $content_bg 50% 50% no-repeat/cover;
|
background: $content_bg 50% 50% no-repeat;
|
||||||
|
background-size: cover;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: $gap;
|
left: $gap;
|
||||||
|
@ -40,11 +41,7 @@
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
padding: $gap / 2;
|
padding: $gap / 2;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background: linear-gradient(
|
background: linear-gradient(330deg, $content_bg, transparentize($content_bg, 1));
|
||||||
330deg,
|
|
||||||
$content_bg,
|
|
||||||
transparentize($content_bg, 1)
|
|
||||||
);
|
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
|
|
|
@ -13,7 +13,8 @@
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
background: $content_bg 50% 50% no-repeat/cover;
|
background: $content_bg 50% 50% no-repeat;
|
||||||
|
background-size: cover;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: $gap;
|
left: $gap;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue