Brick Hall Dark Lavender Theme 2.0 by ivaylo

/* ==UserStyle==
@name         Brick Hall Dark Lavender Theme 2.0
@namespace    USO Archive
@author       noahcoolboy
@description  A modern and good looking purple theme for brick hall
@version      20220530.21.15
@license      CC-BY-4.0
@preprocessor uso
==/UserStyle== */
@-moz-document domain('brick-hall.xyz') {
:root {
    --main: #7d54bc;
    --main-gradient: linear-gradient(0deg,#503775 0%,#7d54bc 100%);
    --title: #eee;
    --bold: #ddd;
    --dark: #bbb;
    --normal: #ccc;
    --white: #fff;
}
/* Homepage */
body {
    background-color: #121212;
    color: var(--normal);
}

.card {
    box-shadow: 0 0px;
}

.card .content {
    background-color: #ffffff0C;
}

.card .top:not(.absolute).red {
    background-color: var(--main);
    color: var(--title);
    border-color: #fff0;
}

.card .top:not(.absolute).orange {
    background-color: var(--main);
    color: var(--title);
    border-color: #fff0;
}

.card .top:not(.absolute).blue {
    background-color: var(--main);
    color: var(--title);
    border-color: #fff0;
}

.card .top:not(.absolute).green {
    background-color: var(--main);
    color: var(--title);
    border-color: #fff0;
}

.dark-gray-text {
    color: var(--bold);
}

.gray-text {
    color: var(--dark);
}

.red-text {
    color: var(--main);
}

.green-text {
    color: var(--main);
}

.blue-text {
    color: var(--main);
}

hr,
.line {
    border-color: #ffffff0c;
    background-color: #ffffff0c;
}

button:not(.plain):not([disabled]).blue,
.button:not(.plain):not([disabled]).blue {
    color: var(--bold);
    background-color: var(--main);
    border-color: var(--main);
}

button:not(.plain):not([disabled]).red,
.button:not(.plain):not([disabled]).red {
    color: var(--bold);
    background-color: var(--main);
    border-color: var(--main);
}

button:not(.plain):not([disabled]).green,
.button:not(.plain):not([disabled]).green {
    color: var(--bold);
    background-color: var(--main);
    border-color: var(--main);
}

button:not(.plain):not([disabled]).orange,
.button:not(.plain):not([disabled]).orange {
    color: var(--bold);
    background-color: var(--main);
    border-color: var(--main);
}

input,
textarea {
    color: var(--white);
    border: 0px;
    background-color: #ffffff08;
}

textarea::-webkit-scrollbar {
    display: none;
}

.input-group {
    border: 0px;
}

.input-group .input-button {
    color: var(--bold);
    background: var(--main);
    border: 0px;
}

nav div.primary {
    color: var(--bold);
    background-color: #ffffff0c;
}

nav div.secondary {
    color: var(--bold);
    background-color: var(--main);
}

nav .info {
    background-color: #ffffff0c;
    color: var(--bold);
}

nav .info .img-white {
    filter: invert(39%) sepia(97%) saturate(419%) hue-rotate(222deg) brightness(80%) contrast(90%);
}
/* Forum */
.card .top:not(.absolute) {
    border: 0px;
    background-color: var(--main);
    color: var(--title);
}

.label.dark {
    color: var(--bold);
}

.label {
    color: var(--dark);
}

.label a {
    color: var(--dark);
}

.stat .title {
    color: var(--bold);
}

.thread-label.blue {
    background-color: var(--main);
}

.thread-label.red {
    background-color: var(--main);
}

.thread-label.green {
    background-color: var(--main);
}

.thread-label.orange {
    background-color: var(--main);
}

.forum-tag {
    background-color: var(--main);
}

.forum-tag::after {
    border-right-color: var(--main);
}

.forum-links a {
    color: var(--title);
}

.forum-links .content {
    overflow: hidden;
}

.thread-card.viewed {
    background-color: #ffffff07;
}

.thread-card:hover {
    background-color: #ffffff0c;
}

.light-gray-text {
    color: var(--normal);
}

.p {
    color: var(--normal);
}

a {
    color: var(--bold);
}

.forum-bar a {
    color: var(--bold);
}

blockquote.red {
    border-color: var(--main);
    color: var(--normal);
}

blockquote.orange {
    border-color: var(--main);
    color: var(--normal);
}

blockquote.green {
    border-color: var(--main);
    color: var(--normal);
}

blockquote.blue {
    border-color: var(--main);
    color: var(--normal);
}

blockquote a {
    color: var(--bold) !important;
}
/* Games */
.set .footer {
    background-color: #ffffff10;
    border: 0px;
}

.card .footer .playing {
    color: var(--main);
}

.large-text {
    color: var(--title);
}
/* Shop */
.select,
select {
    border-color: #ffffff00;
    background-color: #ffffff0c;
    color: var(--bold);
}

.select option,
select option {
    color: var(--normal);
    background-color: #121212;
}

.card .item-content {
    background-color: #ffffff12;
    border-top: 1px solid var(--main);
}

.card .name {
    color: var(--main) !important;
}

.offsale-text {
    color: var(--dark);
}

.card .thumbnail.dark {
    background-color: #ffffff12;
    border-color: var(--main) !important;
}

.icon,
.special-e-icon,
.special-icon,
.arrow-down,
.messages-icon,
.friends-icon,
.bits-icon,
.bucks-icon,
.royal-icon,
.ace-icon,
.mint-icon {
    background-image: url(https://noah.ovh/files/brick_hill_themes/purple.svg);
}

input.rigid {
    background-color: #ffffff12;
    border-color: #ffffff00;
    border-radius: 4px;
}
/* Item */
.box.shaded {
    background-color: #ffffff12;
}

.box {
    border-color: #ffffff00;
}

.ablack-text {
    color: var(--title);
}

.agray-text {
    color: var(--normal);
}

.darkest-gray-text {
    color: var(--dark);
}

.card .item-creator {
    color: var(--dark);
}

.tabs .tab.active {
    background-color: #ffffff12;
}

.tabs .tab {
    background-color: #ffffff08;
    border-color: #ffffff00;
}

.tabs .tab-body {
    background-color: #ffffff12;
    border: 0px;
}

button:not(.plain):not([disabled]).bucks,
.button:not(.plain):not([disabled]).bucks {
    background-color: var(--main);
    border-color: var(--main);
}

button:not(.plain):not([disabled]).bits,
.button:not(.plain):not([disabled]).bits {
    background-color: var(--main);
    border-color: var(--main);
}

.owned-check-tri.special {
    border-top: 50px solid var(--main);
}

.owned-check-tri.owns {
    border-top: 50px solid var(--main);
}

.box.item-img.owns {
    border-color: var(--main);
}

.box.item-img.special {
    border-color: var(--main);
}
/* Clans */
.hover-card:hover {
    background-color: #ffffff0c;
}

.profile-card:hover {
    background-color: #ffffff0c;
}
/* Clan */
.black-text {
    color: var(--white);
}

.dropdown-arrow {
    color: #ffffff;
}

.dropdown-content li * {
    background-color: #141414;
}

.dropdown-content li *:hover {
    background-color: #202020;
}
/* Profile */
.toggle-user-desc:not(.open)::after {
    background-color: #1d1d1d;
}

.read-more-desc {
    background-color: #1d1d1d;
}

.crate-types li {
    background-color: #ffffff12;
}

.crate-types .active,
.crate-types :hover {
    background-color: #ffffff18;
    border-left: 4px solid var(--main);
}

.crate-types {
    border-right: 2px solid var(--main);
}

.profile-card.crate img {
    background-color: #ffffff12;
    border: 0px;
}

.trade-serial {
    background-color: #ffffff20;
    color: var(--white);
}

.profile-card.award img {
    border: 0px;
}
/* Trades */
.trade-picker .trade.selected {
    background-color: #ffffff18;
    border-color: var(--main);
}

.trade-picker .trade:hover {
    background-color: #ffffff12;
    border-color: var(--main);
}

.trade-picker {
    background-color: #ffffff12;
}

.trade-picker::-webkit-scrollbar-thumb {
    background-color: #ffffff12;
}

.trade-picker::-webkit-scrollbar {
    background-color: #ffffff12;
}

.item-card-container {
    background-color: #ffffff12;
}

.item-card-container:hover {
    background-color: #ffffff18;
}

.modal .modal-content {
    background-color: #202020;
}

.modal .cancel-button {
    background-color: #ffffff12;
    color: var(--bold);
    border-color: #ffffff00;
}

/* Friends */
.friend-card:hover {
    background-color: #ffffff18;
}

/* Avatar */
.avatar-card.crate .img-holder {
    background-color: #ffffff04;
    border-color: #ffffff00;
}

button:not(.plain):not([disabled]) {
    border-color: #ffffff00;
}

/* Membership */
.membership-buttons {
    border-color: #ffffff00;
}

/* Banner */
.alert.success {
    background-color: var(--main);
}
.alert.error {
    background-color: var(--main);
}
.alert.warning {
    background-color: var(--main);
}

/* New Stuff */
.new-theme input, .new-theme textarea {
    background-color: #ffffff08
}
.new-theme button:not([disabled]), .new-theme .button:not([disabled]) {
    background: var(--main-gradient) !important
}
.theme-dark .new-theme input:not(.no-input-display)[type=checkbox]+label:after {
    border-color: var(--main);
    /* 
        OK, look, I noticed that the checkmark on the checkboxes are just so slightly uncentered
        And once that happened, I just wasn't able to stop seeing it
        So this thing below is required for me to be able to live happy
    */
    transform: translateX(-0.7px) translateY(-0.7px) rotate(45deg);
}
.between-range:not(.white) {
    background: var(--main) !important
}
input[type=range]::-webkit-slider-thumb {
    background-color: #242426;
    border-color: var(--main) !important;
}
.new-theme .new-tabs .tab.active {
    border-color: var(--main)
}
.new-theme .item-border {
    border-color: var(--main) !important
}
.triangle:after {
    border-right-color: var(--main) !important;
    border-top-color: var(--main) !important
}
.triangle.speciale:before {
    border-right-color: #99d3f8 !important;
    border-top-color: #99d3f8 !important
}
.speciale svg {
    filter: brightness(0) invert(71%) sepia(72%) saturate(338%) hue-rotate(177deg) brightness(102%) contrast(94%);
}
.theme-dark .new-theme .free-text, .theme-dark .new-theme .blue-text {
    color: var(--main)
}
.header-3 {
    color: var(--main)
}
#itempage-v .svg-white {
    filter: invert(39%) sepia(97%) saturate(419%) hue-rotate(222deg) brightness(80%) contrast(90%);
}
.new-theme button.clear, .new-theme .button.clear {
    border-width: 0px !important;
}...