//////////////////////////////
// THEME / COMPONENTS / NOTICE
//////////////////////////////
// Add a little vertical space between notice heading and message
.unl .dcf-notice-message {
margin-top: #{ms(-12)}em;
}
// Ensure heading and close link (all states) display as cream
// .unl .dcf-notice h1, // An
shouldn't be used at this level.
.unl .dcf-notice h2,
.unl .dcf-notice h3,
.unl .dcf-notice h4,
.unl .dcf-notice h5,
.unl .dcf-notice h6,
.unl .dcf-notice-message a:link,
.unl .dcf-notice-message a:visited,
.unl .dcf-notice-message a:hover,
.unl .dcf-notice-message a:active,
.unl .dcf-notice-message a {
color: $cream;
}
// Info
.unl .dcf-notice-info {
// https://meyerweb.com/eric/tools/color-blend/#007197:242423:1:hex
filter:
drop-shadow(1px 2px 2px rgba(18,75,93,.25))
drop-shadow(2px 4px 4px rgba(18,75,93,.25))
drop-shadow(3px 6px 6px rgba(18,75,93,.25));
}
// Success
.unl .dcf-notice-success {
// https://meyerweb.com/eric/tools/color-blend/#00784E:242423:1:hex
filter:
drop-shadow(1px 2px 2px rgba(18,78,57,.25))
drop-shadow(2px 4px 4px rgba(18,78,57,.25))
drop-shadow(3px 6px 6px rgba(18,78,57,.25));
}
// Warning
.unl .dcf-notice-warning {
// https://meyerweb.com/eric/tools/color-blend/#E72C0C:242423:1:hex
filter:
drop-shadow(1px 2px 2px rgba(125,50,36,.25))
drop-shadow(2px 4px 4px rgba(125,50,36,.25))
drop-shadow(3px 6px 6px rgba(125,50,36,.25));
}
// Danger
.unl .dcf-notice-danger {
// https://meyerweb.com/eric/tools/color-blend/#9D0000:242423:1:hex
filter:
drop-shadow(1px 2px 2px rgba(97,18,18,.25))
drop-shadow(2px 4px 4px rgba(97,18,18,.25))
drop-shadow(3px 6px 6px rgba(97,18,18,.25));
}
// Change notice drop shadow color for dark mode
@media (prefers-color-scheme: dark) {
.unl .dcf-notice {
filter:
drop-shadow(1px 2px 2px rgba(0,0,0,.25))
drop-shadow(2px 4px 4px rgba(0,0,0,.25))
drop-shadow(3px 6px 6px rgba(0,0,0,.25));
}
}