Фрагмент: Руководство по вики синтаксису №1
Покраска модуля рейтинга для самых маленьких
Вместе с изменением модуля рейтинга с плюсов на звёзды, изменилась так же и его структура, в связи с чем, старые темы могут некорректно менять цвета модуля или не менять их вообще. Если вы хотите разобраться, как вам корректно подогнать внешний вид модуля Rate под тему вашей страницы, то это руководство для вас. В блоках кода (как правило) приведены стандартные для вики значения.
Примите во внимание так же структуру модулей, чтобы не запутаться:
Структура модуля на Русской Лиминальной.
Покраска модуля рейтинга для тем на базе Русской Лиминальной
.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%» меняет только число после слэша («/»)).
версия страницы: 10, Последняя правка: 24 Авг. 2025, 03:08 (14 дня назад)