MediaWiki:MinimalBanners.css

/** * * @Title       MinimalBanners * @Description Reduces the size & quantity of Banner Notifications * @Author     Ursuul  * @Version    0.9.2 * */ /* Make Banner Notifications thinner */ .wds-banner-notification__container .wds-banner-notification { min-height: 30px; }

.wds-banner-notification__container .wds-banner-notification .wds-banner-notification__icon .wds-icon { height: 95%; height: calc(100% - 5px); }

.wds-banner-notification__container .wds-banner-notification .wds-banner-notification__text { font-size: small; padding: 7px 3px; }

.wds-banner-notification__container .wds-banner-notification .wds-banner-notification__close { align-self: center; padding: 0 18px; }/**/

/* Limit quantity to three at a time */ .wds-banner-notification__container .wds-banner-notification:nth-of-type(3) ~ .wds-banner-notification { display: none; }

.wds-banner-notification__container .wds-banner-notification + .wds-banner-notification { border-top: 1px solid #CCCCCC; box-sizing: content-box; }

.wds-banner-notification__container .wds-banner-notification + .wds-banner-notification .wds-banner-notification__close, .wds-banner-notification__container .wds-banner-notification + .wds-banner-notification .wds-banner-notification__text { border: 0; }/**/

/* Make Banner Noticiations easier to X out on phones */ @media only screen and (max-width: 768px) { .wds-banner-notification__container .wds-banner-notification .wds-banner-notification__text { font-size: 100%; }

.wds-banner-notification__container .wds-banner-notification .wds-banner-notification__icon .wds-icon, .wds-banner-notification__container .wds-banner-notification .wds-banner-notification__close { -webkit-transform: scale(1.4); -moz-transform: scale(1.4); -ms-transform: scale(1.4); -o-transform: scale(1.4); transform: scale(1.4); } }/**/