Template:Callout/styles.css: Difference between revisions
From Space Station 14 Wiki
(added a gap between images and content) |
(moved colors here) |
||
(6 intermediate revisions by the same user not shown) | |||
Line 15: | Line 15: | ||
gap: .5rem; | gap: .5rem; | ||
min-width: 20rem; | |||
width: fit-content; | width: fit-content; | ||
/* set by template */ | /* set by template */ | ||
Line 24: | Line 25: | ||
border: 1px solid; | border: 1px solid; | ||
border-left: 10px solid; | border-left: 10px solid; | ||
} | |||
.callout.callout-type-info { border-color: var(--action-color); } | |||
.callout.callout-type-warning { border-color: yellow; } | |||
.callout.callout-type-danger { border-color: var(--danger-color); } | |||
.callout.callout-type-tip { border-color: var(--green-color); } | |||
.callout.callout-type-example { border-color: #f92672; } | |||
/* added to callout when it's should be a centered, page-wide banner */ | |||
.callout-banner { | |||
width: 80%; | |||
} | } | ||
/* wrapper for images */ | /* wrapper for images */ | ||
.callout-images { } | .callout-images { | ||
display: flex; | |||
flex-direction: row; | |||
align-items: center; | |||
} | |||
/* wrapper for images → image container */ | |||
.callout-images > * { | |||
display: inline-block; | |||
min-width: 64px; | |||
} | |||
/* contains header and content elements */ | /* contains header and content elements */ | ||
Line 49: | Line 69: | ||
height: 100%; | height: 100%; | ||
} | |||
/* callout wrapper → a special class for creating same-width notices for stacking */ | |||
.callout-wrapper.stacked-notice { | |||
/* make the wrapper fit the callout element */ | |||
width: fit-content; | |||
/* stacked notices go right */ | |||
float: right; | |||
/* allow for stacking */ | |||
clear: right; | |||
} | |||
/* callout wrapper → a special class for creating same-width notices for stacking → callout element */ | |||
.callout-wrapper.stacked-notice > .callout { | |||
/* set to fixed width */ | |||
width: 30rem; | |||
/* fit to the page on small resoltuions, preventing overflow */ | |||
max-width: 100%; | |||
} | |||
/* when on tablet or smaller device, take up the whole width of the page. */ | |||
@media (max-width:801px) { | |||
/* actual callout */ | |||
.callout { | |||
width: 100%; | |||
} | |||
/* callout wrapper → a special class for creating same-width notices for stacking */ | |||
.callout-wrapper.stacked-notice { | |||
/* fill the page width */ | |||
width: 100%; | |||
/* no more float */ | |||
float: none; | |||
/* no more clear, since float is disabled */ | |||
clear: none; | |||
} | |||
/* callout wrapper → a special class for creating same-width notices for stacking → callout element */ | |||
.callout-wrapper.stacked-notice > .callout { | |||
/* fill the page width */ | |||
width: 100%; | |||
} | |||
} | } |
Latest revision as of 11:25, 1 September 2024
/* wrapper around the callout that manages its alignment. */
.callout-wrapper {
display: flex;
/* set by template */
/*justify-content: XXX;*/
margin-top: .5em;
}
/* actual callout */
.callout {
box-sizing: border-box;
display: flex;
flex-direction: row;
gap: .5rem;
min-width: 20rem;
width: fit-content;
/* set by template */
/*min-width: XXX;*/
padding: .5rem;
background-color: var(--bg-color-light-x2);
border: 1px solid;
border-left: 10px solid;
}
.callout.callout-type-info { border-color: var(--action-color); }
.callout.callout-type-warning { border-color: yellow; }
.callout.callout-type-danger { border-color: var(--danger-color); }
.callout.callout-type-tip { border-color: var(--green-color); }
.callout.callout-type-example { border-color: #f92672; }
/* added to callout when it's should be a centered, page-wide banner */
.callout-banner {
width: 80%;
}
/* wrapper for images */
.callout-images {
display: flex;
flex-direction: row;
align-items: center;
}
/* wrapper for images → image container */
.callout-images > * {
display: inline-block;
min-width: 64px;
}
/* contains header and content elements */
.callout-header-content-container {
display: flex;
flex-direction: column;
}
/* header element */
.callout-header {
font-weight: bold;
font-size: large;
}
/* wrapper around content element */
.callout-content-container {
display: flex;
align-items: center;
height: 100%;
}
/* callout wrapper → a special class for creating same-width notices for stacking */
.callout-wrapper.stacked-notice {
/* make the wrapper fit the callout element */
width: fit-content;
/* stacked notices go right */
float: right;
/* allow for stacking */
clear: right;
}
/* callout wrapper → a special class for creating same-width notices for stacking → callout element */
.callout-wrapper.stacked-notice > .callout {
/* set to fixed width */
width: 30rem;
/* fit to the page on small resoltuions, preventing overflow */
max-width: 100%;
}
/* when on tablet or smaller device, take up the whole width of the page. */
@media (max-width:801px) {
/* actual callout */
.callout {
width: 100%;
}
/* callout wrapper → a special class for creating same-width notices for stacking */
.callout-wrapper.stacked-notice {
/* fill the page width */
width: 100%;
/* no more float */
float: none;
/* no more clear, since float is disabled */
clear: none;
}
/* callout wrapper → a special class for creating same-width notices for stacking → callout element */
.callout-wrapper.stacked-notice > .callout {
/* fill the page width */
width: 100%;
}
}