Template:Warning/style.css: Difference between revisions
Jump to navigation
Jump to search
Content added Content deleted
No edit summary |
(Fix responsive image resize) |
||
(5 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
.warning { |
.warning { |
||
box-sizing: border-box; |
box-sizing: border-box; |
||
width: 100%; |
|||
max-width: 1024px; |
|||
position: relative; |
position: relative; |
||
border-radius: 6px; |
border-radius: 6px; |
||
min-height: 110px; |
min-height: 110px; |
||
margin: 60px auto 20px; |
margin: 60px auto 20px; |
||
padding: 6px 12px 6px |
padding: 6px 12px 6px 232px; |
||
background: repeating-linear-gradient( 52.5deg, |
background: repeating-linear-gradient( 52.5deg, rgba(240, 248, 255, 0.5), |
||
rgba(240, 248, 255, 0.5) 14px, |
|||
rgba(240, 248, 255, 0.2) 14px, |
|||
rgba(240, 248, 255, 0.2) 28px |
|||
); |
|||
} |
} |
||
.warning |
.warning img { |
||
position: absolute; |
position: absolute; |
||
bottom: -18px; |
bottom: -18px; |
||
left: |
left: 12px; |
||
} |
} |
||
Line 19: | Line 26: | ||
.warning > span { |
.warning > span { |
||
display: inline-block; |
display: inline-block; |
||
/* float: left; */ |
|||
clear: both; |
|||
} |
} |
||
Line 25: | Line 34: | ||
font-weight: bold; |
font-weight: bold; |
||
font-size: xx-large; |
font-size: xx-large; |
||
} |
|||
@media screen and (max-width:720px) { |
|||
.warning { |
|||
padding: 6px 12px 6px 124px; |
|||
} |
|||
.warning img { |
|||
height: 105px!important; |
|||
width: auto!important; |
|||
bottom: calc(50% - 52px); |
|||
} |
|||
} |
|||
@media screen and (max-width:480px) { |
|||
.warning { |
|||
padding: 6px 6px 6px 92px; |
|||
} |
|||
.warning img { |
|||
height: 70px!important; |
|||
width: auto!important; |
|||
bottom: calc(50% - 35px); |
|||
left: 9px; |
|||
} |
|||
.warning > span.title { |
|||
font-size: x-large; |
|||
} |
|||
} |
} |
Latest revision as of 09:50, 18 May 2024
.warning {
box-sizing: border-box;
width: 100%;
max-width: 1024px;
position: relative;
border-radius: 6px;
min-height: 110px;
margin: 60px auto 20px;
padding: 6px 12px 6px 232px;
background: repeating-linear-gradient( 52.5deg, rgba(240, 248, 255, 0.5),
rgba(240, 248, 255, 0.5) 14px,
rgba(240, 248, 255, 0.2) 14px,
rgba(240, 248, 255, 0.2) 28px
);
}
.warning img {
position: absolute;
bottom: -18px;
left: 12px;
}
.warning > span {
display: inline-block;
/* float: left; */
clear: both;
}
.warning > span.title {
color:#306d96;
font-weight: bold;
font-size: xx-large;
}
@media screen and (max-width:720px) {
.warning {
padding: 6px 12px 6px 124px;
}
.warning img {
height: 105px!important;
width: auto!important;
bottom: calc(50% - 52px);
}
}
@media screen and (max-width:480px) {
.warning {
padding: 6px 6px 6px 92px;
}
.warning img {
height: 70px!important;
width: auto!important;
bottom: calc(50% - 35px);
left: 9px;
}
.warning > span.title {
font-size: x-large;
}
}