MediaWiki:Common.css/src/template/msgbox.scss
This page is one of the SCSS pages which are the basis for MediaWiki:Common.css. After you edit this page, you will need to recompile them for your changes to take effect. See Terraria Wiki:CSS to learn more.
Ancestors: / src / template / msgbox.scss
Siblings: achievement.scss animation.scss archive_header.scss archive-box.scss chance.scss coin.scss color_box.scss crafts.scss diagram.scss doc.scss dotlist.scss dpl3.scss editcopy_notice.scss error.scss etext.scss exclusive_icon_link.scss exclusive_icons.scss expert,master,journey.scss flavor_text.scss float_file_box.scss gameText.scss getDropInfo.scss hardmode.scss hatnote.scss history.scss hp.scss info_request.scss infobox.scss infocard.scss item.scss itemlist.scss key.scss l10n_subtemplate.scss licensebox.scss living_preferences.scss loot.scss mctoc.scss msgbox.scss multi-column_list.scss na.scss navbox.scss project.scss protected.scss quotation.scss recipes.scss reflist.scss shortcut.scss sound.scss spoiler.scss summoned.scss templatedata.scss toc_limit.scss toggleBox.scss transclude.scss translation_projects.scss use_time,knockback.scss yes,no.scss
Children: (none)
@use "../lib";
/********* [[Template:Msgbox]] *********/
.message-box {
margin: 1px auto var(--layout-gap);
width: fit-content;
background: var(--theme-box-background);
border-radius: var(--theme-box-border-radius);
overflow: hidden;
display: grid;
border: 1px solid var(--theme-box-border-color);
grid-template-columns: 0fr 0fr 1fr;
align-items: center;
&::before{
@include lib.pseudo-block;
width: 6px;
height: 100%;
/* darken a little */
background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), var(--message-box-highlight-color, var(--theme-box-border-color));
@theme Snow{
background: var(--message-box-highlight-color, var(--theme-box-border-color));
}
@theme Legacy{
background: var(--message-box-highlight-color, var(--theme-box-border-color));
}
}
>div{
grid-column: 3 / 4;
padding: 6px 12px;
}
>.icon{
padding: 6px 0 6px 12px;
grid-column: 2 / 3;
white-space: nowrap;
}
&.msgbox-color-blue {
--message-box-highlight-color: var(--theme-notice-blue-border-color);
}
&.msgbox-color-red {
--message-box-highlight-color: var(--theme-notice-red-border-color);
}
&.msgbox-color-purple {
--message-box-highlight-color: var(--theme-notice-purple-border-color);
}
&.msgbox-color-yellow {
--message-box-highlight-color: var(--theme-notice-yellow-border-color);
}
&.msgbox-color-green {
--message-box-highlight-color: var(--theme-notice-green-border-color);
}
&.msgbox-color-orange {
--message-box-highlight-color: var(--theme-notice-orange-border-color);
}
&.msgbox-color-pink {
--message-box-highlight-color: var(--theme-notice-pink-border-color);
}
}