Перейти к публикации

Тёмная тема для VimeWorld.com


Рекомендованные сообщения

Опубликовано: (изменено)

BSOW0ve.png

Есть многие, кто регулярно посещает основной сайт для просмотра профиля т.к. туда ведёт соответствующая кнопка из самой игры при нажатии на ник игрока в чате. Я тут подумал, в тёмное время суток(а щас зимой это ещё актуальней) было бы не плохо иметь тёмный режим, чтобы глаза не улетали в космос.
Изначально я хотел изменить только страницу профиля, но в итоге сменил весь сайт целиком.
Поэтому встречайте... Тёмную тему для главного сайта VimeWorld

Как выглядит?

Скрытый текст

BgRmuPA.png

4jVrV0T.png

4O7NgYY.png

Что сделано:
• Сделан тёмный фон во всех местах, какие только есть
• Заменён шрифт в некоторых местах на похожий из игры
• Чтобы было по красивому, все блоки имеют прозрачный блюр
• Закругление и увеличенные ширины для того, чтобы уместилось больше информации

Установка
Два варианта, кому какой нравится...

gCtQ9zy.png     x5ruGGe.png

zBPPI8j.png     8JdBQZe.png

Расширение работает во всех браузерах на Chromium

fEsYfz5.png

Изменено пользователем Rancoy
Опубликовано: (изменено)

Привет!

У плагина Stylish был скандал со сбором данных, так что лучше использовать OpenSource аналог - Stylus

37 минут назад, Rancoy сказал:

На многих сайтах, основной стиль может перемешиваться со стилем этой темы в Stylish из-за чего у вас может не правильно отобразиться какой-нибудь сайт. Я лично видел такое только в еденичных случаях, ваши драгоценные сервисы поисковиков, соц.сети работают нормально там сбоев нет, но имейте ввиду, что если такое произойдёт отключите стиль на время посещения нужного сайта ;3

Можешь указать namespace, чтобы избежать этого:

Скрытый текст
@-moz-document domain("vimeworld.com") {
/* ==UserStyle==
@name           Redesign
@namespace      https://vimeworld.com/
@version        1.0
@author         Rancoy
==/UserStyle== */
#preloader
{
  background-color: #000000a1;
  backdrop-filter: blur(20px);
}

.page
{
  background: #000000ad;
  width: 1071px;
  backdrop-filter: blur(20px);
  border-radius: 10px;
}

.page.player .stats-block
{
  border: 1px #afafaf70 solid;
  border-radius: 5px;
}

.page.player .stats-block .title
{
  border-bottom: 0px black solid;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background: #4fc4f770;
}

.page.player .stats-block .title img
{
  border-top-left-radius: 5px;
}

.stats-row span.label
{
  background: #ff817f90;
  border-radius: 2px;
  font-weight: bold;
}

.stats-block .show-more span
{
  color: #adadad;
  font-size: 75%;
}

.search
{
  background: #00000000;
  color: white;
}

#searchbar
{
  background: #000000ad;
  border-radius: 200px;
}

.title
{
  color: white;
}

.stats-row
{
  color: white;
}

h4
{
  color: white;
}

.header_container
{
  background: #000000e0;
  border-bottom: 0px solid #e2e2e2;
  backdrop-filter: blur(48px);
}

h1
{
  color: white;
}

.menu li a
{
  line-height: 65px;
  padding: 35px 15px 20px;
  border-top: 20px white solid;
  color: white;
}

.monitoring-box
{
  color: white;
  background: #000000e0;
  backdrop-filter: blur(20px);
  font-weight: 100;
}

.monitoring-box .progress
{
  border: 0px;
  border-radius: 200px;
}

.progress
{
  background-color: #3c3c3ccc;
  border-radius: 200px;
}

.progress-azure .progress-bar
{
  background-color: #4fc4f4;
  border-radius: 200px;
}

.monitoring-box .progress .bar
{
  background-color: #FFFFFFe0;
  border-radius: 200px;
}

.monitoring-btn
{
  color: white;
  background: #000000e0;
  backdrop-filter: blur(20px);
  border-bottom: solid 0px #9e9e9e;
}

body
{
  color: white;
}

small
{
  color: white;
}

.main_div .main_content
{
  background: rgb(0 0 0 / 80%);
}

.players-online
{
  background: rgb(0 0 0 / 80%);
}

p
{
  color: #cdcdcd;
}

h2
{
  color: white;
}

.tippy-tooltip.game-stats-theme
{
  background: #00000020;
  border: 1px #afafaf70 solid;
  backdrop-filter: blur(20px);
}

.label.label-danger
{
  font-family: Minecraftia, "Open Sans", "sans serif";
  background: #ff817f9e;
}

.label.label-azure
{
  font-family: Minecraftia, "Open Sans", "sans serif";
  background: #5fc7bd9e;
}

.label
{
  font-family: Minecraftia, "Open Sans", "sans serif";
  background: #4fc3f79e;
}

.page.player .stats-block .title span
{
  font-family: Minecraftia, "Open Sans", "sans serif";
}
}

 

Изменено пользователем Charkos0ff
Я забыл
Опубликовано:
15 минут назад, Charkos0ff сказал:

У плагина Stylish был скандал со сбором данных

Я увы о данных скандалах пока не проинформирован.

15 минут назад, Charkos0ff сказал:

Можешь указать namespace, чтобы избежать этого:

Указал, огромное спасибо. Вот только ещё у форума убрать баги при светлой теме можно? Незнаю можно ли убрать работу этой штуки у поддомена, но оставить в основном...

Опубликовано:
Только что, Rancoy сказал:

Указал, огромное спасибо. Вот только ещё у форума убрать баги при светлой теме можно? Незнаю можно ли убрать работу этой штуки у поддомена, но оставить в основном...

Попробуй это:

Скрытый текст
/* ==UserStyle==
@name           bl
@namespace      vimeworld.com
@version        1.0.0
==/UserStyle== */

@-moz-document url-prefix("https://vimeworld.com/") {
#preloader
{
  background-color: #000000a1;
  backdrop-filter: blur(20px);
}

.page
{
  background: #000000ad;
  width: 1071px;
  backdrop-filter: blur(20px);
  border-radius: 10px;
}

.page.player .stats-block
{
  border: 1px #afafaf70 solid;
  border-radius: 5px;
}

.page.player .stats-block .title
{
  border-bottom: 0px black solid;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background: #4fc4f770;
}

.page.player .stats-block .title img
{
  border-top-left-radius: 5px;
}

.stats-row span.label
{
  background: #ff817f90;
  border-radius: 2px;
  font-weight: bold;
}

.stats-block .show-more span
{
  color: #adadad;
  font-size: 75%;
}

.search
{
  background: #00000000;
  color: white;
}

#searchbar
{
  background: #000000ad;
  border-radius: 200px;
}

.title
{
  color: white;
}

.stats-row
{
  color: white;
}

h4
{
  color: white;
}

.header_container
{
  background: #000000e0;
  border-bottom: 0px solid #e2e2e2;
  backdrop-filter: blur(48px);
}

h1
{
  color: white;
}

.menu li a
{
  line-height: 65px;
  padding: 35px 15px 20px;
  border-top: 20px white solid;
  color: white;
}

.monitoring-box
{
  color: white;
  background: #000000e0;
  backdrop-filter: blur(20px);
  font-weight: 100;
}

.monitoring-box .progress
{
  border: 0px;
  border-radius: 200px;
}

.progress
{
  background-color: #3c3c3ccc;
  border-radius: 200px;
}

.progress-azure .progress-bar
{
  background-color: #4fc4f4;
  border-radius: 200px;
}

.monitoring-box .progress .bar
{
  background-color: #FFFFFFe0;
  border-radius: 200px;
}

.monitoring-btn
{
  color: white;
  background: #000000e0;
  backdrop-filter: blur(20px);
  border-bottom: solid 0px #9e9e9e;
}

body
{
  color: white;
}

small
{
  color: white;
}

.main_div .main_content
{
  background: rgb(0 0 0 / 80%);
}

.players-online
{
  background: rgb(0 0 0 / 80%);
}

p
{
  color: #cdcdcd;
}

h2
{
  color: white;
}

.tippy-tooltip.game-stats-theme
{
  background: #00000020;
  border: 1px #afafaf70 solid;
  backdrop-filter: blur(20px);
}

.label.label-danger
{
  font-family: Minecraftia, "Open Sans", "sans serif";
  background: #ff817f9e;
}

.label.label-azure
{
  font-family: Minecraftia, "Open Sans", "sans serif";
  background: #5fc7bd9e;
}

.label
{
  font-family: Minecraftia, "Open Sans", "sans serif";
  background: #4fc3f79e;
}

.page.player .stats-block .title span
{
  font-family: Minecraftia, "Open Sans", "sans serif";
}
}

 

 

Опубликовано:
8 минут назад, _JonnyGaming_ сказал:

мегахарош, жду, когда ты в себе настолько преисполнишься, что перенесёшь мой любимый fluent на сайты

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

  • 3 недели спустя...
Опубликовано:
05.01.2023 в 17:38, Rancoy сказал:

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

Там самый обычный бс 5. Основная часть в переменных, будет проще)

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...