User:Aesulus/Vector 2022 banner.css: Difference between revisions
Content added Content deleted
(Aesulus changed the content model of the page User:Aesulus/Vector 2022 banner.css from "CSS" to "Sanitized CSS": needed for templatestyles) Tag: content model change |
No edit summary Tags: Mobile edit Mobile web edit |
||
(7 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
.hfw_notice { |
.hfw_notice { |
||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
} |
} |
||
.hfw_notice_content { |
.hfw_notice_content { |
||
display: flex; |
display: flex; |
||
justify-content: space-between; |
|||
margin: auto; |
|||
gap: 1rem; |
|||
} |
|||
.hfw_notice_image { |
|||
⚫ | |||
align-items: center; |
|||
} |
|||
.hfw_notice_text { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
text-align: center; |
|||
} |
} |
||
.hfw_notice_text_title { |
.hfw_notice_text_title { |
||
font-weight: bold; |
font-weight: bold; |
||
} |
|||
.hfw_notice_buttons { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
gap: 0.5rem; |
|||
white-space: nowrap; |
|||
} |
|||
@media all and (width <= 700px) { |
|||
.hfw_notice_image { display: none; } |
|||
.hfw_notice_content { |
|||
flex-wrap: wrap; |
|||
justify-content: center; |
|||
} |
|||
.hfw_notice_buttons { |
|||
flex-direction: row; |
|||
white-space: inherit; |
|||
} |
|||
} |
} |
Latest revision as of 14:32, 25 July 2022
.hfw_notice {
border: 2px solid cornflowerblue;
padding: 10px;
}
.hfw_notice_content {
display: flex;
justify-content: space-between;
gap: 1rem;
}
.hfw_notice_image {
display: flex;
align-items: center;
}
.hfw_notice_text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.hfw_notice_text_title {
font-weight: bold;
}
.hfw_notice_buttons {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
}
@media all and (width <= 700px) {
.hfw_notice_image { display: none; }
.hfw_notice_content {
flex-wrap: wrap;
justify-content: center;
}
.hfw_notice_buttons {
flex-direction: row;
white-space: inherit;
}
}