Blue's News userstyle

userstyle.css

:root {
    --style-color: #282c34;
    --style-color-alt: #1d1f24;
    --sale-color: #97c37c;
    --headline-color: #4aa4ed;
    --visited-color: #c678dd;
    --link-color: var(--headline-color);
    --max-width: 1200px;
}

.updated-notice {
    padding: 10px;
}

.col-12.header img.img-fluid {
    height: 100px;
    width: auto;
}

.content a,
.content .postdate a:link {
    color: var(--link-color);
}

.content a:visited {
    color: var(--visited-color);
}

.content.col-12 .row {
    max-width: var(--max-width);
}

.content .col-12:nth-child(odd of div:has(.posting)) {
    background: var(--style-color-alt);
}

.content .col-12:has(.posting) {
    padding: 0 1rem !important;
    border-radius: 15px;
    line-height: 1.25rem;
    margin: 10px 0;
}

@media screen and (max-width: 600px) {
    .content.col-lg { padding: 0; }
    .content .col-12:has(.posting) {
        line-height: 1.5rem;
        margin: 0;
        border-radius: 0;
    }
}

.content .postquote {
    color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-in-out;
}

.content .col-12:has(.posting):hover .postquote {
    max-height: 10000vh;
}

.content .col-12:has(.postquote):after {
    position: absolute;
    content: '+';
    right: 1rem;
    bottom: .5rem;
    font-size: 150%;
}

/* .posting:before {
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 50%;
    background: white;
    padding: 1rem;
} */
.posting:has(a[href*="for-free"]):before { content: '💸'; }
.content .col-12:has(.posting a[href*="for-free"]) {
 border: 2px solid var(--sale-color);   
}
.posting:has(a[href*="on-sale"]):before,
.posting:has(a[href*="humble-choice"]):before
{ content: '🛒'; }
.posting:has(a[href*="multiplex"]):before,
.posting:has(a[href*="footage"]):before,
.posting:has(a[href*="trailer"]):before
{ content: '📺'; }
.posting:has(a[href*="sports"]):before { content: '🏆'; }
/* 'demo-available', 'demo-released' */
.posting:has(a[href*="demo"]):before { content: '🕹️'; }
.posting:has(a[href*="safety-dance"]):before { content: '⚠️'; }
.posting:has(a[href*="patch"]):before { content: '👾'; }
.posting:has(a[href*="virtual"]):before { content: '👓'; }
.posting:has(a[href*="legal"]):before { content: '💼'; }
.posting:has(a[href*="biz-buzz"]):before { content: '💼'; }
.posting:has(a[href*="reviews"]):before { content: '📃'; }
.posting:has(a[href*="interview"]):before { content: '🎤'; }
.posting:has(a[href*="event"]):before { content: '📅'; }
.posting:has(a[href*="rumor"]):before { content: '💭'; }
.posting:has(a[href*="quoteworthy"]):before { content: '💬'; }
.posting:has(a[href*="mobilization"]):before { content: '📱'; }
.posting:has(a[href*="crossover"]):before { content: '🔀'; }
.posting:has(a[href*="consolidation"]):before { content: '🎮'; }
.posting:has(a[href*="out-of-the-blue"]):before { content: '🔵'; }