Тёмное оформление правилами [wiki.qeng.org]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
====== Тёмное оформление правилами ======

Это **старый способ** сделать домен тёмным: перебить правила движка по одному, своим css. Он по-прежнему работает, но тем же самым занимается [[admin_main:design|тема домена]] — выбором из списка, без единой строчки css.

> **Сначала попробуйте тему.** «Домен» → «Дизайн» → «Настройки домена» → «Тема оформления»: **Dark Purple** или **Dark Radix** дают тёмный домен целиком — и сайт, и игру, и день, и ночь. Всё, что ниже, тема делает без вас.

Если своя тёмная гамма всё-таки нужна, начинать стоит не с этого списка селекторов, а с **токенов**: задать ''--qeng-body-bg'', ''--qeng-surface-bg'' и ещё несколько имён палитры — и цвет разойдётся по правилам движка сам. Список открывается в студии ссылкой «Токены темы» рядом с css-слотом.

===== Пример на правилах =====

Ниже — тот самый старый пример. Он написан под прежнее устройство страниц, и часть селекторов в нём может уже ничего не находить.

Копируется в блок **CSS** на экране «Сайт» в разделе «Дизайн», дальше «Сохранить».

**Сохраните свои старые настройки, чтобы можно было к ним вернуться** — или воспользуйтесь кнопкой «История» в студии: она помнит 30 последних сохранений.

<code>
/*Настройка фона по краям*/
body {
  background-color:#000;
  background-image: url("https://imagizer.imageshack.com/img924/7545/DlMobT.png"); /* фоновая затайленая картинка*/
  background-repeat: repeat-x repeat-y;
  color:#FFF;
}
/* Админские панельки */
.admin-control {
  background-color:#003;
}

/* Страницы на которых много текста, без сворачивающихся вкладок, например, Мониторинг */
.page-container {
  background-color:#111;
  color:#FFE;
}
.page-container a{
  color:#EEF;
}

.table {
  color:#FFF;
}

/* Сворачивающиеся вкладки */
.sp-head, .sp-wrap {
  background-color:#555;
  color:#CCC;
}
.sp-wrap {
  box-shadow: 5px 5px 5px #113;
}
.sp-body .sp-wrap {
    box-shadow: 3px 3px 3px #113;
}
.sp-body {
  background-color:#111;
  color:#FFF;
}
.out_game_controls {
  background-color:#222; /* Подложка под кнопками управления игрой */
  color:#FFF;
}
.sp-wrap a {
  color:#FFE; /* цвет шрифта ID игры */
}

/* Сворачивающиеся вкладки активных игр */
.game.active .sp-wrap {
  background-color:#665; /* цвет заголовка */
}
.game.active .sp-wrap .sp-head{
  color:#FFF;  /* цвет шрифта названия игры */
}
.game.active .sp-wrap .sp-head a{
  color:#FFF; /* цвет шрифта ID игры */
}

/* Иногда встречается, например список сезонов в рейтинге */
.list-group-item {
  border: 1px solid #CCC;
  border: 1px solid rgba(255,255,255,.125);
  background-color:#111;
  color:#FFE;
}

</code>