Hololive Fan Wiki

User:Aesulus/Vector 2022 banner.css: Difference between revisions

< User:Aesulus
No edit summary
Tags: Mobile edit Mobile web edit
No edit summary
Tags: Mobile edit Mobile web edit
 
(4 intermediate revisions by the same user not shown)
Line 1:
.hfw_notice {
border: 2px solid cornflowerblue;
padding: 15px10px;
}
 
.hfw_notice_content {
display: flex;
Line 8 ⟶ 9:
gap: 1rem;
}
 
.hfw_notice_image {
display: flex;
align-items: center;
}
 
.hfw_notice_text {
display: flex;
Line 15 ⟶ 22:
text-align: center;
}
 
.hfw_notice_text_title {
font-weight: bold;
Line 25 ⟶ 33:
align-items: center;
gap: 0.5rem;
white-space: nowrap;
}
 
@media all and (width <= 450px700px) {
.hfw_notice_image { display: none; }
.hfw_notice_content {
Line 33 ⟶ 42:
justify-content: center;
}
.hfw_notice_buttons { flex-direction: row; }
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;
  }
}
Retrieved from "https://hololive.wiki/wiki/User:Aesulus/Vector_2022_banner.css?oldid=37942"