Все селекторы можно найти с помощью инструментов разработчика (горячая клавиша –
F12
), встроенных в браузер. Чтобы сразу начать поиск селектора можно использовать горячие клавиши – Ctrl
+Shift
+C
.Подробнее о поиске селектора и его использовании на странице «Основы CSS».
Этот список содержит только сами селекторы. Чтобы как-то изменить вид элемента нужно добавить к нему фигурные скобки, а также правила внутри скобок:
Пример для селектора .l-page
.l-page {
background: rgba(252,252,252,.9) !important;
}
Чтобы изменить вид элемента при взаимодейтсвии с ним (при наведении или зажатии), нужно использовать
:hover
и :active
после селектора:Пример для селектора .l-page
.l-page:hover {
background: rgba(252,252,252,1) !important;
}
Общие
/* Тело сайта, фон */
body
/* Центральная область, страница */
.l-page
/* Подзаголовки блоков на страницах сайта */
.headline,
.midheadline,
.subheadline
/* Ссылки в подзаголовках */
.headline > a,
.midheadline > a,
.subheadline > a
/* Сообщить об ошибке */
.b-feedback
/* Текст со всплывающей подсказкой (чёрной) */
.b-tooltipped:not(a)
Верхнее меню
Основное/* Цвета фона и текста верхнего меню */
.l-top_menu-v2 {
background: #343434;
color: #fff;
}
/* Цвета фона и границ подменю */
.l-top_menu-v2 .submenu {
background: #4e5257;
border-color: #4e5257;
}
Цвета кнопок верхнего меню
/* Фоновый цвет кнопок верхнего меню */
.l-top_menu-v2 .menu-dropdown>span {
background: #3e3e3e;
}
/* Фоновый цвет активных кнопок верхнего меню */
.l-top_menu-v2 .menu-dropdown.active>span,
.l-top_menu-v2 .menu-dropdown>span:focus {
background-color: #4e5257;
}
/* Фоновый цвет кнопок верхнего меню при наведении */
.l-top_menu-v2 .menu-dropdown>span a:hover {
background-color: #61666d;
}
/* Фоновый цвет кнопок верхнего меню при нажатии */
.l-top_menu-v2 .menu-dropdown>span a:active {
background-color: #6b7077;
}
Цвета иконок верхнего меню
/* Фоновый цвет активных иконок верхнего меню */
.l-top_menu-v2 .menu-icon.active,
.l-top_menu-v2 .menu-icon:focus {
background-color: #4e5257;
}
/* Фоновый цвет иконок верхнего меню при наведении */
.l-top_menu-v2 .menu-icon:hover {
background-color: #4e5257;
}
/* Фоновый цвет иконок верхнего меню при нажатии */
.l-top_menu-v2 .menu-icon:active {
background-color: #5c6167;
}
Цвета ссылок подменю
/* Цвет текста ссылок подменю */
.l-top_menu-v2 .submenu>a {
color: #fff;
}
/* Цвета фона и текста ссылок подменю при наведении */
.l-top_menu-v2 .submenu>a:hover {
background: #fff;
color: #123;
}
/* Цвета фона и текста ссылок подменю при нажатии (js) */
.l-top_menu-v2 .submenu>a.active {
background: #fff;
color: #123;
}
/* Цвета фона и текста ссылок подменю при нажатии */
.l-top_menu-v2 .submenu>a:active {
background: #ddd;
color: #123;
}
Непрочитанные сообщения в подменю профиля
/* Цвет текста */
.l-top_menu-v2 .submenu>a.icon-mail span.unread span {
color: #fff;
}
/* Цвет текста при наведении на ссылку */
.l-top_menu-v2 .submenu>a.icon-mail:hover span.unread span {
color: #123;
}
/* Цвет разделителя */
.l-top_menu-v2 .submenu>a.icon-mail span.unread span:not(:last-child)::after {
background: #acb1b4;
}
Счётчик уведомлений на иконках
/* Цвета счётчика уведомлений на иконках */
.l-top_menu-v2 .menu-icon[data-count]::after {
background: #fff;
border-color: #343434;
color: #343434;
}
Цвета строки и результатов поиска
/* Цвет фона и текста строки поиска в верхнем меню */
.l-top_menu-v2 .global-search input {
background: #fff;
color: #123;
}
/* Цвет крестика для очистки строки поиска */
.l-top_menu-v2 .global-search .clear {
color: #333;
}
/* Цвет иконки лупы в строке поиска */
.l-top_menu-v2 .global-search .search-marker {
color: #123;
}
/* Цвет иконки лупы в активной строке поиска */
.l-top_menu-v2.is-search-focus .global-search .search-marker {
color: #1d78b7;
}
/* Цвет иконки горячей клавиши «/» в строке поиска */
.l-top_menu-v2 .global-search .hotkey-marker {
border-color: #acb1b4;
color: #acb1b4;
}
/* Цвет фона контейнера результатов поиска */
.l-top_menu-v2 .global-search .search-results {
background-color: #fff;
}
/* Цвет фона и текста контейнера результатов поиска */
.l-top_menu-v2 .global-search .search-results .search-mode {
border-top-color: rgba(43,138,204,0.2);
color: #123;
}
Профиль
/* История */
.p-profiles .profile-head .c-history
/* Аватарка в профиле */
.profile-head .avatar img
/* Имя пользователя в профиле */
.p-profiles .profile-head .c-brief header h1
/* Пометка "сейчас на сайте" */
.profile-head header.head .misc span
/* Полосы аниме и манги */
.b-stats_bar .bar .first,
.b-stats_bar .bar .second,
.b-stats_bar .bar .third
/* Полосы аниме отдельно */
.b-stats_bar.anime .bar .first,
.b-stats_bar.anime .bar .second,
.b-stats_bar.anime .bar .third
/* Полосы манги отдельно */
.b-stats_bar.manga .bar .first,
.b-stats_bar.manga .bar .second,
.b-stats_bar.manga .bar .third
/* Активность: комментарии, правки, обзоры и пр. */
.p-profiles .profile-head .c-info .c-additionals
/* Контейнер для блоков «Время за аниме и мангой» и «Активность на сайте» */
.p-profiles-show .profile-content .cc-2 > .c-column:first-child
/* Блок «Время за аниме и мангой» */
.p-profiles-show .profile-content .lifetime
/* Блок «Активность на сайте» */
.p-profiles-show .profile-content .activity
/* Контейнер для блоков «Клубы», «Друзья» и «Избранное» */
.p-profiles-show .profile-content .cc-2 > .c-column:last-child
/* Блок «Друзья» */
.p-profiles-show .profile-content .cc-2a > .c-column:first-child
/* Блок «Клубы» */
.p-profiles-show .profile-content .cc-2a > .c-column:last-child
/* Блок «Избранное» */
.p-profiles-show .profile-content .cc-2 > .c-column:last-child > .block
/* Блок «Достижения» */
.p-profiles-show .achievements
Цвета текстов в профиле
/* Информация о пользователе */
/* Цвет ника пользователя в профиле */
.p-profiles .profile-head .c-brief header h1 {
color: #fff;
}
/* Цвет информации о пользователе */
.p-profiles .profile-head .c-brief header .notice {
color: #ddd;
}
/* Цвет ссылок в информации о пользователе */
.p-profiles .profile-head .c-brief header .notice a {
color: red;
}
/* Цвет иконок под аватаркой */
.c-brief .profile-actions > a {
color: #ddd;
}
/* Списки Аниме и Манги в профиле */
/* Названия разделов: Список аниме и Список манги */
.b-stats_bar .title {
color: #ddd; /* Для приватных списков */
}
.b-stats_bar a.title {
color: red; /* Для открытых списков */
}
/* Цвет цифр в полосках */
.b-stats_bar .bar .first,
.b-stats_bar .bar .second,
.b-stats_bar .bar .third {
color: black;
}
/* Названия списков: Запланировано, Отложено и т.д. */
.b-stats_bar .stat_names .stat_name a {
color: #ddd;
}
/* Разделители списков: по умолчанию – слеши */
.b-stats_bar .stat_names .stat_name::after {
color: #ddd;
}
/* Ссылка на похожих пользователей */
.p-profiles .profile-head .c-info .c-lists-info .b-stats_bar .compatibility a {
color: red;
}
/* Активность пользователя в профиле */
/* Активность пользователя: заголовок */
.p-profiles .profile-head .c-info .c-additionals b {
color: #ddd;
}
/* Активность пользователя: ссылки */
.p-profiles .profile-head .c-info .c-additionals div a {
color: red;
}
/* Активность пользователя: запятые */
.p-profiles .profile-head .c-info .c-additionals div::after {
color: #ddd;
}
/* Блок История в профиле */
/* История: название пунктов */
.p-profiles .profile-head .c-history .entry .title {
color: red; /* Эта настройка излишняя, т.к. цвет наследуется от обычной ссылки */
}
/* История: действие пунктов */
.p-profiles .profile-head .c-history .entry .misc {
color: #fff !important;
}
/* История: дата пунктов */
.p-profiles .profile-head .c-history .entry .misc.date {
color: #ddd !important;
}
/* Дниметр */
/* Даты дниметра (не пройденные) */
.p-profiles-show .lifetime .times .time {
color: #fff;
}
/* Даты дниметра (пройденные) */
.p-profiles-show .lifetime .times .time.checked {
color: #ddd;
}
/* Цвет галочек */
.p-profiles-show .lifetime .times .time.checked::before {
color: red;
}
/* График активности */
/* Заголовок графика активности */
.p-profiles-show .profile-content .activity .title {
color: #ddd;
}
/* Даты графика активности */
.bar.vertical .line .x_label {
color: #ddd; /* Повлияет на другие графики на сайте */
}
/* Цифры в полосках графика */
.bar.vertical .line .bar-container .value {
color: black; /* Повлияет на другие графики на сайте */
}
/* Чтобы избежать влияния на другие графики, добавьте в начало
селектора класс .p-profiles-show а затем поставьте пробел */
/* Достижения */
/* Подзаголовки */
.p-profiles-show .achievements .header .title {
color: #456; /* Надписи «Общие», «Жанровые» и «Франшизы» */
}
/* Лента c названием достижения */
.b-achievement.is-badge::before {
background: rgba(17, 34, 51, 0.5);
color: #fff;
}
/* Прогресс достижения */
.b-achievement.is-badge::after {
background: rgba(17, 34, 51, 0.7);
color: #fff;
}
/* Класс .b-achievement также используется на самой странице достижений.
Чтобы избежать влияния на другие страницы, добавьте в начало
селектора класс .p-profiles-show а затем поставьте пробел */
Для оформления состояний при наведении и нажатии, добавьте
:hover
и :active
после селекторов. /* Активность пользователя: ссылки */
.p-profiles .profile-head .c-info .c-additionals div a {
color: red;
}
/* Активность пользователя: ссылки при наведении */
.p-profiles .profile-head .c-info .c-additionals div a:hover {
color: green;
}
/* Активность пользователя: ссылки при нажатии */
.p-profiles .profile-head .c-info .c-additionals div a:active {
color: blue;
}
Цвета списков аниме и манги
/* Строка при наведении */
.p-user_rates-index .list-lines .selectable:hover {
background-color: #f5f5f5;
}
/* Цвет заголовков таблицы */
.p-user_rates-index .l-content .order-control {
color: #333333;
}
/* Номер */
.p-user_rates-index .list-lines tr .index {
color: #9da2a8;
}
/* Название */
.p-user_rates-index .list-lines tr .name a {
color: #176093;
}
/* Комментарий */
.p-user_rates-index .list-lines tr td .rate-text {
color: #4e5257;
}
/* Онгоинг */
.p-user_rates-index .list-lines tr td .ongoing {
color: #2ECC40;
}
/* Анонс */
.p-user_rates-index .list-lines tr td .anons {
color: #FF851B
}
/* n повторных просмотров */
.p-user_rates-index .list-lines tr td .rewatches {
color: #0074D9
}
/* Сводка таблицы */
.p-user_rates-index .list-groups .summary.lines {
color: #123;
}
Кнопки управления списком: [+ Добавить в список] под постерами
/* Стрелка вниз */
.b-add_to_list .trigger-arrow {
color: #9da2a8;
}
/* Надпись «Удалить из списка» */
.b-add_to_list .expanded-options .remove-trigger .text {
color: #ff4136;
}
/* Запланировано */
.b-add_to_list.planned .trigger,
.b-add_to_list.planned .option {
background: #daf1ff;
border-color: #bce6ff;
color: var(--link-color)
}
/* Отложено */
.b-add_to_list.on_hold .trigger,
.b-add_to_list.on_hold .option {
background: #EBEEF1;
border-color: #DBE0E6;
color: #7b8084
}
/* Смотрю */
.b-add_to_list.watching .trigger,
.b-add_to_list.watching .option {
background: #daf1ff;
border-color: #bce6ff;
color: var(--link-color)
}
/* Пересматриваю */
.b-add_to_list.rewatching .trigger,
.b-add_to_list.rewatching .option {
background: #daf1ff;
border-color: #bce6ff;
color: var(--link-color)
}
/* Просмотрено */
.b-add_to_list.completed .trigger,
.b-add_to_list.completed .option {
background: #EEF6DC;
border-color: #E0EFC0;
color: #419541
}
/* Брошено */
.b-add_to_list.dropped .trigger,
.b-add_to_list.dropped .option {
background: #FEDDDF;
border-color: #FEC2C5;
color: #FC575E
}
Рейтинг
/* Звёзды рейтинга (фоновые) */
.b-rate .stars.background {
color: #cccccc;
}
/* Звёзды рейтинга (активные) */
.b-rate .stars.score {
color: #4c86c8;
}
/* Звёзды рейтинга (при наведении) */
.b-rate .stars.hover {
color: #ff9231;
}
/* Текст рейтинга (цифра) */
.b-rate .text-score {
color: #444;
}
/* Текст рейтинга (слово) */
.b-rate .score-notice {
color: #123;
}
Спойлер
/* Кнопка спойлера */
.b-spoiler_block > span {
background-color: #678;
color: #fff;
}
/* Контент спойлера */
.b-spoiler_block > div {
background-color: #f3f5f7;
border-left-color: #678;
color: inherit;
}
@Securyutei, есть в списке:@Securyutei@grin3671, большое спасибо, добрый человек)@RomchikDiscoteka, цвет текста или фона?@RomchikDiscoteka@nikola2222, цвет текста@RomchikDiscoteka,@RomchikDiscoteka@nikola2222, Благодарю@grin3671, Здравствуйте, подскажите пожалуйста, как поменять цвет карандашика в избранном и комментария к тайтлу на его странице?И ещё у меня есть возможно глупый вопрос. Можно ли как-то сделать чёрный цвет с белым ободком?
@grin3671@yosikawa,@yosikawa@grin3671, благодарю362x212
@grin3671В этом варианте
/assets/achievements/anime/tsundere_2.jpg
— это часть ссылки на заменяемое изображение, которую можно найти в адресной строке, если кликнуть правой кнопкой мыши по картинке достижения и нажать «Открыть картинку в новой вкладке» или просто «Копировать URL картинки».Вариант 2:
В этом варианте
/achievements/common/tsundere
или/franchise/one_punch_man
— это часть ссылки на страницу достижения, которую можно найти в адресной строке, если кликнуть правой кнопкой мыши по достижению и нажать «Открыть ссылку в новой вкладке» или просто «Копировать адрес ссылки».@Lien Kan,@Lien Kan@grin3671, большое спасибо@grin3671, Border-color, а как это перекрасить? Скажите, пожалуйста.@grin3671@Lien Kan,Подскажите пожалуйста как изменить количество картинок в каждом блоке достижений, к примеру я хочу чтоб везде из было по четыре, или одно достижение но которое я выберу.
Спасибо.
@grin3671Пытаюсь через:
border-radius: 10px;
}
border-radius: 10px;
.avatar img {
border-radius: 10px;
}
}
916x216
Также проблема со шрифтом. На компе поменялось, а в мобильной версии нет (при том, что на телефоне даже шрифт такой загружен и установлен в качестве темы).
font-family: "Comfortaa", sans-serif;
font-optical-sizing: auto;
font-weight: <400>;
font-style: normal;
}
:root {
--font-main: 'Comfortaa', sans-serif;
--font-alt: var(--font-main);
}
@grin3671.c-right > div:nth-child(2) > div:nth-child(1)
, но не найти простейший.subheadline
?Если нужно прям совсем всё закруглить, то можно еще так:
Первое правило для шрифта не нужно, можно полностью удалить. Шрифт лучше импортировать в стиле, чтобы и посетители профиля видели изменения:
@Ui Nami-Kami@grin3671, спасибо! Помогло