Пользовательский CSS для Discord

Разве моддинг Discord не противоречит его TOS?

Да.

Был ли кто-нибудь забанен за это?

Нет.

Значит, моддинг Discord безопасен?

Да. Некоторые разработчики Discord активно участвуют в разработке модов для Discord с открытым исходным кодом. Если бы они хотели запретить моддеров, они бы уже это сделали.

Введение

Итак, дискорд выглядит неплохо, но он не самый лучший, давайте это исправим.

Введение в модифицированный Дискорд

Для начала вам понадобится модифицированный клиент Discord.

Я рекомендую goosemod, его очень легко установить, даже если вы используете Discord в браузере.

https://goosemod.com/

Как только вы установите его, у вас появится несколько новых вещей в вашем клиенте Discord

В меню друзей у вас появятся кнопки тем и плагинов:

Я рекомендую установить 2 темы прямо сейчас, Revert Rebrand и Forgotten Keep, просто найдите их и нажмите установить.

После этого дискорд уже выглядит в 10 раз лучше.

Где писать пользовательский CSS

Goosemod добавляет раздел Custom CSS в ваше меню настроек

Перейдите в настройки

Прокрутите вниз до раздела goosemod и нажмите Custom CSS.

Скрытие вещей с помощью пользовательского CSS

Итак, давайте приступим к улучшению Discord.

Discord любит впихивать Nitro, свой премиум-сервис, вам в глотку, куда бы вы ни пошли, давайте рассмотрим процесс удаления всего этого.

Кнопка подарка (подробное руководство)

В окне чата есть кнопка подарка, избавиться от которой очень просто.

Во-первых, сделайте ctrl+shift+i, чтобы открыть меню inspect element, перейдите на вкладку elements и выберите элемент picker.

Затем щелкните элемент, от которого вы хотите избавиться, в данном случае кнопку подарка в окне чата.

После этого найдите крайний контейнер элемента, который обладает какой-либо уникальной особенностью, для которой можно использовать css-селектор.

В данном случае нам очень повезло, крайний элемент имеет красивую, супер уникальную aria-label, которую мы можем выбрать с помощью css.

Запишите, как вы будете выбирать этот элемент с помощью css, вернитесь к блоку goosemod custom CSS и напишите CSS, чтобы скрыть его.

Кроме того, вы можете написать целую кучу пользовательских CSS, в зависимости от того, насколько вы увлечетесь этим, так что это хорошая идея — разделить ваш код на части, чтобы он имел смысл в дальнейшем.

/* Hide Gift Button in chat box */
button[aria-label="Send a gift"] {
    display: none;
}

Этот CSS применяется в горячем режиме, поэтому, как только вы его напишете, он сразу же сработает без необходимости обновления! Нажмите esc, чтобы полюбоваться своей работой!

Вкладка Nitro на экране друзей

Здесь используется следующий HTML

<li class="channel-1Shao0 container-32HW5s" role="listitem" aria-posinset="2" aria-setsize="204"><div class="interactive-1vLZ_I interactive-iyXY_x linkButton-2NshQj"><a class="link-39sEB3" data-list-item-id="private-channels-uid_7902___nitro" tabindex="-1" href="/store"><div class="avatarWithText-1tTt2S layout-1LjVue">...<div class="content-66wMin"><div class="nameAndDecorators-2A8Bbk"><div class="name-2m3Cms">Nitro</div></div></div></div></a></div></li>

Не похоже, что здесь есть лучшая «уникальная» вещь для использования селектора, но discord не собирается добавлять новые вкладки в этот раздел в ближайшее время, поэтому мы можем просто подключить aria-posinset="2" с некоторыми особенностями его классов.

/* Hide Nitro Tab in Friends Menu */
.channel-1Shao0.container-32HW5s[aria-posinset="2"] {
    display: none;
}

Красивый

Баннер Nitro Boost

Если вы попадаете на большие сервера, они начинают просить вас «поднять» сервер с помощью этого маленького баннера.

Раньше он был намного больше и назойливее, но все равно занимает лишнее место на экране.

<div class="container-2giAcK" aria-label="This server has unlocked all Boosting perks!" role="button" tabindex="0">...</div>

/* hide nitro boost banner */
div.container-2giAcK[tabindex="0"] {
    display: none;
}

Хорошо, но теперь у нас есть элемент, занимающий лишнее пространство, из-за чего он выглядит странно.

Мы можем просто добавить дополнительный селектор для div с пробелом, который будет выглядеть следующим образом

/* hide nitro boost banner */
div.container-2giAcK[tabindex="0"], div.container-2giAcK[tabindex="0"] + div {
    display: none;
}

отлично!

Делаем причудливые вещи с помощью CSS

Динамическое сворачивание панели участников

Когда дискорд занимает только половину экрана, а панель участников не скрыта, чат становится очень тесным.

Если мы сделаем некоторые волшебные штуки с onhover и прочими элементами, мы сможем сделать так, чтобы панель участников была свернута по умолчанию, показывая только иконки людей, которые находятся онлайн. Затем, при наведении курсора, он разворачивается, показывая имена пользователей, статусы и роли.

/* Slidy Members */
[class*="membersWrap-"] [class*="membersGroup-"] {
    margin-right: auto;
    width: 57px;
    text-overflow: clip;
    direction: rtl;
    word-spacing: 1000px;
}
[class*="membersWrap-"]:hover [class*="membersGroup-"],
[class*="membersWrap-"]:focus-within [class*="membersGroup-"] {
    width: 100%;
    margin: 0;
    direction: ltr;
    word-spacing: unset;
    text-overflow: ellipsis;
}
.membersWrap-3NUR2t{
  min-width: 0 !important; 
}
.members-3WRCEx {
  transition: 250ms ease all;
  width: 64px !important; 
}
.members-3WRCEx:hover {
  width: 64px !important;
}
.membersWrap-3NUR2t:hover .members-3WRCEx{
  width: 245px !important;
}

Заключение

До сих пор не знаю, как закончить этот блог.

Это примерно все, чем я хотел поделиться, наслаждайтесь настройкой вашего Дискорда.