Template:Notice/styles.css: Difference between revisions
From Inkipedia, the Splatoon wiki
SuperHamster (talk | contribs) (Styling text) |
SuperHamster (talk | contribs) (Vertically aligning image) |
||
(10 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
.notice { | .notice { | ||
padding: .5em; | padding: .5em; | ||
margin: .5em 0; | |||
border-width: 1px 5px 1px 5px; | border-width: 1px 5px 1px 5px; | ||
border-style: solid; | border-style: solid; | ||
border-radius: 5px 5px 5px 5px; | border-radius: 5px 5px 5px 5px; | ||
display: flex; | display: flex; | ||
Line 11: | Line 10: | ||
} | } | ||
.notice-green { | |||
border-color: rgb(170, 220, 0); | |||
} | |||
.notice-teal { | |||
border-color: rgb(47, 172, 172); | |||
} | |||
.notice-blue { | |||
border-color: rgb(0, 153, 255); | |||
} | |||
.notice-orange { | |||
border-color: rgb(255, 128, 0); | |||
} | |||
.notice-yellow { | |||
border-color: rgb(235, 238, 61); | |||
} | |||
.notice-red { | |||
border-color: rgb(217, 0, 0); | |||
} | |||
.notice-pink { | |||
border-color: rgb(240, 60, 120); | |||
} | |||
.notice-maroon { | |||
border-color: rgb(174, 21, 102); | |||
} | |||
.notice-gray { | |||
border-color: rgb(201, 201, 201); | |||
} | |||
.notice-image img { | |||
position: relative; | |||
top: 50%; | |||
transform: translateY(-50%); | |||
} | |||
.notice-content { | .notice-content { | ||
flex-grow: 1; | flex-grow: 1; | ||
Line 17: | Line 49: | ||
font-weight: 600; | font-weight: 600; | ||
} | } | ||
.notice- | .notice-header ~ .notice-description { | ||
font-size: 9pt; | font-size: 9pt; | ||
} | } |
Latest revision as of 22:20, 14 May 2023
.notice { padding: .5em; margin: .5em 0; border-width: 1px 5px 1px 5px; border-style: solid; border-radius: 5px 5px 5px 5px; display: flex; flex-direction: row; column-gap: 1em; } .notice-green { border-color: rgb(170, 220, 0); } .notice-teal { border-color: rgb(47, 172, 172); } .notice-blue { border-color: rgb(0, 153, 255); } .notice-orange { border-color: rgb(255, 128, 0); } .notice-yellow { border-color: rgb(235, 238, 61); } .notice-red { border-color: rgb(217, 0, 0); } .notice-pink { border-color: rgb(240, 60, 120); } .notice-maroon { border-color: rgb(174, 21, 102); } .notice-gray { border-color: rgb(201, 201, 201); } .notice-image img { position: relative; top: 50%; transform: translateY(-50%); } .notice-content { flex-grow: 1; } .notice-header { font-weight: 600; } .notice-header ~ .notice-description { font-size: 9pt; }