MediaWiki:SocialActivity.css

/* * Color coding SocialActivity because I'm a weird person * @author DiegoFire Network

.mw-special-SocialActivity { --user-color: #9943ffaa; --new-color: #00BFFFaa; --delete-color: #b30000aa; --protect-color: #b2d401aa; --default-color: #b9b9b9; --default-color-bg: #b9b9b955;

--main-color: #52c12aaa; --main-color-bg: rgb(82 193 42 / 6%); --user-color-bg: rgb(140 0 255 / 10%); --new-color-bg: rgb(0 191 255 / 10%); --delete-color-bg: rgb(179 0 0 / 10%); --protect-color-bg: rgb(178 212 1 / 10%); }

.activity-icon .wds-icon.wds-icon-tiny { width: 15px; height: 15px; margin-top: 5px; } .activity-data > a:nth-of-type(1) { font-family: Rubik; font-weight: bold; font-size: 14px; } .social-activity-list {margin: 0 !important;} .social-activity-list li { gap: 10px; display: block; padding-left: 10px; border-left: 5px solid var(--default-color); margin-bottom: 10px; margin-right: 2px; border-radius: 5px; box-shadow: 2px 2px var(--default-color-bg); transition: .3s; } .social-activity-list li>div {margin: 0;} .social-activity-list .activity-icon {float: left;} .social-activity-list .activity-time {float: right; margin-left: 10px;} .social-activity-list li:hover {background: #00000011;} .social-activity-feed h4 {margin-left: -0px;}

li[data-activity-type="update"][data-content-type="comment-reply"], li[data-activity-type="update"][data-content-type="post-reply"] { background-color: var(--protect-color-bg); border-color: var(--protect-color); }

li[data-activity-type="update"] [data-content-type="comment-reply"] .activity-icon svg, li[data-activity-type="update"][data-content-type="post-reply"] .activity-icon svg { fill: var(--protect-color); }

li[data-content-type="post"] { background-color: var(--new-color-bg); border-color: var(--new-color); } [data-content-type="post"] .activity-icon svg { fill: var(--new-color); }

[data-activity-type="create"][data-content-type="comment-reply"], [data-activity-type="create"][data-content-type="post-reply"] { background-color: var(--main-color-bg); border-color: var(--main-color); }

li[data-content-type="comment-reply"] .activity-icon svg, [data-content-type="post-reply"] .activity-icon svg {fill: var(--main-color);}

[data-content-type="message"], [data-content-type="message-reply"] { background-color: var(--user-color-bg); border-color: var(--user-color) !important; } [data-content-type="message"] .activity-icon svg, [data-content-type="message-reply"] .activity-icon svg { fill: var(--user-color); }

[data-activity-type="delete"] { background-color: var(--delete-color-bg) !important; border-color: var(--delete-color) !important; } [data-activity-type="delete"] .activity-icon svg, [data-activity-type="undelete"] .activity-icon svg { fill: var(--delete-color); }

li[data-content-type="comment"] { background-color: var(--new-color-bg); border-color: var(--new-color); }

[data-content-type="comment"] .activity-icon svg { fill: var(--new-color); }