// Messages
// Example message box // <p class=“message-yellow”><small>Warning! This is a sentence inside of a message box.</small></p>
// Example with close button // <p class=“message-yellow”><span class=“closebtn” onclick=“this.parentElement.style.display='none';”>×</span> // <small>Warning! This is a sentence inside of a message box.</small></p>
.message {
margin-bottom: 15px; padding: 12px; color: #fff; background-color: #454545; border-left: .3rem solid #bebebe;
@media (prefers-color-scheme: dark) {
color: #fff; background-color: #282828; border-left: .3rem solid #595959; }
}
.green {
margin-bottom: 15px; padding: 12px; color: #fff; background-color: $message-green; border-left: .3rem solid #93d080;
}
.yellow {
margin-bottom: 15px; padding: 12px; color: #fff; background-color: $message-yellow; border-left: .3rem solid #fdcb61;
}
.orange {
margin-bottom: 15px; padding: 12px; color: #fff; background-color: $message-orange; border-left: .3rem solid #f9ac6b;
}
.red {
margin-bottom: 15px; padding: 12px; color: #fff; background-color: $message-red; border-left: .3rem solid #e86c71;
}
.purple {
margin-bottom: 15px; padding: 12px; color: #fff; background-color: $message-purple; border-left: .3rem solid #bf61c0;
}
.blue {
margin-bottom: 15px; padding: 12px; color: #fff; background-color: $message-blue; border-left: .3rem solid #2bc2ff;
}
/* The close button */ .closebtn {
margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 22px; line-height: 27px; cursor: pointer; transition: 0.3s;
}
/* When moving the mouse over the close button */ .closebtn:hover {
color: black;
}