Фрагмент: Руководство по вики синтаксису №1
Покраска модуля рейтинга для самых маленьких
Вместе с изменением модуля рейтинга с плюсов на звёзды, изменилась так же и его структура, в связи с чем, старые темы могут некорректно менять цвета модуля или не менять их вообще. Если вы хотите разобраться, как вам корректно подогнать внешний вид модуля Rate под тему вашей страницы, то это руководство для вас. В блоках кода (как правило) приведены стандартные для вики значения.
Внимание: механизм покраски отличается для тем, созданных на базе Русской Лиминальной и Лиминальной V2 (она же NuLiminal). Примите во внимание так же структуру модулей в разных темах, чтобы не запутаться:
Структура модуля на Русской Лиминальной.
Структура модуля на Лиминальной V2 (NuLiminal).
Покраска модуля рейтинга для тем на базе Русской Лиминальной
.w-stars-rate-module { --box-shadow: rgba(var(--swatch-menubg-black-color),0.15); color: rgb(var(--rating-module-text-color)) !important; }
—box-shadow:
- Меняет цвет всех теней блоков.
color:
- Меняет цвет надписи: «Рейтинг: —».
.w-stars-rate-module .w-stars-rate-rating { border: 0.0625rem solid rgba(var(--swatch-menubg-black-color),.25); background: linear-gradient(to top,rgba(var(--swatch-tertiary-color),.25) 0,rgba(var(--swatch-tertiary-color),.15) 100%) !important; background-color: rgb(var(--swatch-background)) !important; }
border:
- Меняет цвет ободки вокруг верхней части блока (той, где располагается надпись: «Рейтинг: —»).
background:
- Накладывает градиент (снизу-вверх) поверх фона верхней части блока (той, где располагается надпись: «Рейтинг: —»).
background-color:
- Меняет цвет фона верхней части блока (той, где располагается надпись: «Рейтинг: —»). Градиент из прошлого параметра накладывается поверх.
.w-stars-rate-module .w-stars-rate-number { color: currentcolor !important; }
color:
- Меняет цвет числового значения рейтинга. Применяется как к тексту верхней части блока (из текста «Рейтинг: —» меняет только «—» (т.е. значение рейтинга)), так и к значению рейтинга во всплывающей подсказке (из текста «0/0%» меняет только число до слэша («/»)). Меняйте этот параметр, только если вы знаете, что делаете.
.w-stars-rate-module .w-stars-rate-control { color: rgb(var(--rating-module-text-color))!important; border: 0.0625rem solid rgba(var(--swatch-menubg-black-color),.25) !important; background: linear-gradient(to top,rgba(var(--swatch-tertiary-color),.25) 0,rgba(var(--swatch-tertiary-color),.15) 100%) !important; background-color: rgb(var(--swatch-background)) !important; }
color:
- Меняет цвет крестика для отмены голоса (только до наведения курсором). Менять данный параметр не рекомендуется.
border:
- Меняет цвет обводки вокруг нижней части блока (той, где отображаются звёзды и кнопка отмены; не влияет на всплывающую подсказку).
background:
- Накладывает градиент (снизу-вверх) поверх фона нижней части блока (той, где отображаются звёзды и кнопка отмены; не влияет на всплывающую подсказку).
background-color:
- Меняет цвет фона верхней части блока (той, где отображаются звёзды и кнопка отмены; не влияет на всплывающую подсказку). Градиент из прошлого параметра накладывается поверх.
.w-stars-rate-module .w-stars-rate-control .w-stars-rate-stars-wrapper:before { color: rgba(var(--rating-module-text-color),0.2) !important; }
color:
- Меняет заполнения звёзд. Это не цвет наведения или уже поставленной оценки, а скорее цвет «пустых», не поставленных звёзд. Проще увидеть это, чем объяснить, попробуйте поменять сами.
.w-stars-rate-module .w-stars-rate-control .w-stars-rate-stars-wrapper .w-stars-rate-stars-view { --rated-var: rgb(var(--rating-module-text-color))!important; }
—rated-var:
- Меняет цвет уже поставленных звёзд. Это не цвет наведения на звёзды, а цвет, которым горят заполненные звёзды.
.w-stars-rate-module .w-stars-rate-control .w-stars-rate-cancel { background-color: transparent !important; }
color:
- Меняет цвет крестика кнопки отмены оценки до наведения.
background-color:
- Меняет цвет фона кнопки отмены оценки до наведения.
.w-stars-rate-module .w-stars-rate-control .w-stars-rate-cancel:hover { background-color: rgba(var(--rating-module-button-negative-color),.8) !important; color: rgb(var(--rating-module-text-hover-color)) !important; }
background-color:
- Меняет цвет фона кнопки отмены оценки после наведения.
color:
- Меняет цвет крестика кнопки отмены оценки после наведения.
.w-stars-rate-module .w-stars-rate-votes { color: rgb(var(--rating-module-text-color))!important; border: 0.0625rem solid rgba(var(--swatch-menubg-black-color),.25); background: linear-gradient(to top,rgba(var(--swatch-tertiary-color),.25) 0,rgba(var(--swatch-tertiary-color),.15) 100%) !important; background-color: rgb(var(--swatch-background)) !important; }
color:
- Меняет цвет всего текста всплывающей подсказки.
border:
- Меняет цвет обводки всплывающей подсказки.
background:
- Накладывает градиент (снизу-вверх) поверх фона всплывающей подсказки.
background-color:
- Меняет цвет фона всплывающей подсказки. Градиент из прошлого параметра накладывается поверх.
.w-stars-rate-module:hover>.w-stars-rate-votes { color: rgb(var(--placeholder-value)) !important; }
color:
- Меняет цвет процентного значения рейтинга после наведения. Применяется к процентному значению в нижней части блока во всплывающей подсказке (из текста «0/0%» меняет только число после слэша («/»)).
Покраска модуля рейтинга для тем на базе Лиминальной V2 (NuLiminal)
.w-stars-rate-module { --box-shadow: rgba(var(--swatch-menubg-black-color),0.15); color: rgb(var(--rating-module-text-color)) !important; }
—box-shadow:
- Ни на что не влияет в NuLiminal.
color:
- Меняет цвет надписи «рейтинг:» (не влияет на само значение рейтинга) и цвет крестика кнопки отмены оценки (только до наведения). Менять данный параметр не рекомендуется.
.w-stars-rate-module .w-stars-rate-rating { color: rgb(var(--rating-module-text-color)) !important; border: 0.0625rem solid rgba(var(--swatch-menubg-black-color),.25); background: linear-gradient(to top,rgba(var(--swatch-tertiary-color),.25) 0,rgba(var(--swatch-tertiary-color),.15) 100%) !important; background-color: rgb(var(--swatch-background)) !important; }
color:
- Меняет цвет надписи «рейтинг:» (не влияет на числовое значение рейтинга).
border:
- Меняет цвет обводки вокруг верхней части блока (той, где располагается надпись: «рейтинг: —»).
background:
- Накладывает градиент (снизу-вверх) поверх фона верхней части блока (той, где располагается надпись: «рейтинг: —»).
background-color:
- Меняет цвет фона верхней части блока (той, где располагается надпись: «рейтинг: —»). Градиент из прошлого параметра накладывается поверх.
.w-stars-rate-module .w-stars-rate-number { color: currentcolor !important; }
color:
- Меняет цвет числового значения рейтинга. Применяется как к тексту верхней части блока (из текста «рейтинг: —» меняет только «—» (т.е. значение рейтинга)), так и к значению рейтинга в нижней части блока (из текста «0/0%» меняет только число до слэша («/»)).
.w-stars-rate-module .w-stars-rate-control { color: rgb(var(--rating-module-text-color))!important; border: 0.0625rem solid rgba(var(--swatch-menubg-black-color),.25) !important; background: linear-gradient(to top,rgba(var(--swatch-tertiary-color),.25) 0,rgba(var(--swatch-tertiary-color),.15) 100%) !important; background-color: rgb(var(--swatch-background)) !important; }
color:
- Меняет цвет крестика кнопки отмены оценки до наведения. Менять данный параметр не рекомендуется.
border:
- Меняет цвет обводки вокруг средней части блока (той, где располагаются звёзды и кнопка отмены).
background:
- Накладывает градиент (снизу-вверх) поверх фона средней части блока (той, где отображаются звёзды и кнопка отмены).
background-color:
- Меняет цвет фона средней части блока (той, где отображаются звёзды и кнопка отмены). Градиент из прошлого параметра накладывается поверх.
.w-stars-rate-module .w-stars-rate-control .w-stars-rate-stars-wrapper:before { color: rgba(var(--rating-module-text-color),0.2) !important; }
color:
- Меняет заполнения звёзд. Это не цвет наведения или уже поставленной оценки, а скорее цвет «пустых», не поставленных звёзд. Проще увидеть это, чем объяснить, попробуйте поменять сами.
.w-stars-rate-module .w-stars-rate-control .w-stars-rate-stars-wrapper .w-stars-rate-stars-view { --rated-var: rgb(var(--rating-module-text-color))!important; }
—rated-var:
- Меняет цвет уже поставленных звёзд. Это не цвет наведения на звёзды, а цвет, которым горят заполненные звёзды.
.w-stars-rate-module .w-stars-rate-control .w-stars-rate-cancel { color: rgb(var(--placeholder-value)) !important; background-color: transparent !important; }
color:
- Меняет цвет крестика кнопки отмены оценки до наведения.
background-color:
- Меняет цвет фона кнопки отмены оценки до наведения.
.w-stars-rate-module .w-stars-rate-control .w-stars-rate-cancel:hover { color: rgb(var(--rating-module-text-hover-color)) !important; background-color: rgba(var(--rating-module-button-negative-color),.8) !important; }
color:
- Меняет цвет крестика кнопки отмены оценки после наведения.
background-color:
- Меняет цвет фона кнопки отмены после наведения.
.w-stars-rate-module .w-stars-rate-votes { color: rgb(var(--rating-module-text-color))!important; border: 0.0625rem solid rgba(var(--swatch-menubg-black-color),.25); background: linear-gradient(to top,rgba(var(--swatch-tertiary-color),.25) 0,rgba(var(--swatch-tertiary-color),.15) 100%) !important; background-color: rgb(var(--swatch-background)) !important; }
color:
- Меняет цвет процентного значения рейтинга. Применяется к процентному значению в нижней части блока во всплывающей подсказке (из текста «0/0%» меняет только число после слэша («/»)).
border:
- Меняет цвет обводки вокруг нижней части блока (той, где располагается надпись: «0/0%»).
background:
- Накладывает градиент (снизу-вверх) поверх фона нижней части блока (той, где располагается надпись: «0/0%»).
background-color:
- Меняет цвет фона нижней части блока (той, где располагается надпись: «0/0%»). Градиент из прошлого параметра накладывается поверх.
.w-stars-rate-module:hover>.w-stars-rate-votes { color: rgb(var(--placeholder-value)) !important; }
color:
- Меняет цвет процентного значения рейтинга после наведения. Применяется к процентному значению в нижней части блока во всплывающей подсказке (из текста «0/0%» меняет только число после слэша («/»)).
версия страницы: 9, Последняя правка: 07 Март 2025, 17:11 (40 дней назад)