Ночная тема
И еще:
.hwm_leader_bookmark_top {
background-color: var(--dark-mode-front-background-color) !important;
}
.hwm_leader_bookmark_top span {
color: var(--dark-mode-color-light) !important;
}
.hwm_selected_bookmark_no_action {
background-color: var(--dark-mode-intermediate-background-color) !important;
}
.hwm_selected_bookmark_no_action span {
color: #ccc !important;
}
.hwm_recruit_bookmark_top {
background-color: var(--dark-mode-front-background-color) !important;
}
.hwm_recruit_bookmark_top span {
color: var(--dark-mode-color-light) !important;
}
:root .hwm_selected_bookmark {
background-color: var(--dark-mode-intermediate-background-color) !important;
}
:root .hwm_selected_bookmark span {
color: #ccc !important;
}
.hwm_leader_bookmark {
background-color: var(--dark-mode-front-background-color) !important;
}
:root .hwm_leader_selected_bookmark {
background-color: var(--dark-mode-intermediate-background-color) !important;
}
Или даже так:
.hwm_leader_bookmark_top {
background-color: var(--dark-mode-front-background-color) !important;
}
.hwm_leader_bookmark_top span {
color: var(--dark-mode-color-light) !important;
}
.hwm_leader_nabory div:hover {
background-color: #3d3d3d !important;
}
.hwm_selected_bookmark_no_action {
background-color: var(--dark-mode-intermediate-background-color) !important;
}
.hwm_selected_bookmark_no_action span {
color: #ccc !important;
}
.hwm_recruit_bookmark_top {
background-color: var(--dark-mode-front-background-color) !important;
}
.hwm_recruit_bookmark_top span {
color: var(--dark-mode-color-light) !important;
}
.hwm_recruit_nabory div:hover {
background-color: #3d3d3d !important;
}
:root .hwm_selected_bookmark {
background-color: var(--dark-mode-intermediate-background-color) !important;
}
:root .hwm_selected_bookmark span {
color: #ccc !important;
}
.hwm_leader_bookmarks div:hover {
background-color: #3d3d3d !important;
}
.hwm_leader_bookmark {
background-color: var(--dark-mode-front-background-color) !important;
}
:root .hwm_leader_selected_bookmark {
background-color: var(--dark-mode-intermediate-background-color) !important;
}
.home_inside_margins2 div:hover {
background-color: var(--dark-mode-intermediate-background-color) !important;
}
Да это не я делал, это - Мифист. Я подправил кой чего.
В чём разобрался - добавил.
Еще есть некоторые моменты, которые хочу сделать...
Чуть позже еще выложу.
Вот всё, что я на сейчас добавил:
.home_container_block {
background-color: var(--dark-mode-front-background-color);
border-color: var(--dark-mode-color-light) !important;
}
.home_scroll_content_expand_sign {
-webkit-filter: invert(0.9);
filter: invert(0.9);
}
.home_expand_in_text_sign {
-webkit-filter: invert(0.9);
filter: invert(0.9);
}
[data-page="auction"] div[style*="background-color: rgb(252, 254, 254)"] {
background-color: #272727 !important;
}
[data-page="auction"] div[style*="background-color: rgb(234, 246, 246)"] {
background-color: #222 !important;
}
[data-page="auction"] div[style*="background-color: rgb(102, 191, 191)"] {
background-color: #404040 !important;
font-weight: bold !important;
}
.inv_note {
background-color: var(--dark-mode-front-background-color) !important;
}
.map_hunt_soon {
background-color: var(--dark-mode-front-background-color);
}
[data-page="house_info"] table.smithTable tr:nth-child(odd) {
background: #222 !important;
}
[data-page="house_info"] table.smithTable tr:nth-child(even) {
background: #272727 !important;
}
[data-page="house_info"] .button-62 {
background: #404040 !important;
color: var(--dark-mode-color-light) !important;
border-color: var(--dark-mode-color-light) !important;
border: 1px solid rgba(0, 0, 0, 0.6);
}
[data-page="clan_info"] [style*="background-color: white"] {
background-color: var(--dark-mode-front-background-color) !important;
}
.recruit_event_enemy_block {
background-color: var(--dark-mode-front-background-color) !important;
}
.recruit_event_error_block {
background-color: var(--dark-mode-front-background-color) !important;
}
.job_fl_btn {
background: var(--dark-mode-front-background-color) !important;
}
.job_fl_btn_selected {
background: var(--dark-mode-intermediate-background-color) !important;
}
.hwm_pagination a.active {
background: var(--dark-mode-intermediate-background-color) !important;
border-color: #888 !important;
border: 2px solid rgba(0, 0, 0, 0.6);
margin-top: -1;
margin-left: -1;
margin-right: 0;
margin-bottom: 1;
}
.hwm_pagination a {
background: var(--dark-mode-front-background-color) !important;
}
[data-page="home"] [style*="font-weight: bold"] span {
color: #86734f !important;
}
.hwm_leader_bookmark_top {
background-color: var(--dark-mode-front-background-color) !important;
}
.hwm_leader_bookmark_top span {
color: var(--dark-mode-color-light) !important;
}
.hwm_leader_nabory div:hover {
background-color: #3d3d3d !important;
}
.hwm_selected_bookmark_no_action {
background-color: var(--dark-mode-intermediate-background-color) !important;
}
.hwm_selected_bookmark_no_action span {
color: #ccc !important;
}
.hwm_recruit_bookmark_top {
background-color: var(--dark-mode-front-background-color) !important;
}
.hwm_recruit_bookmark_top span {
color: var(--dark-mode-color-light) !important;
}
.hwm_recruit_nabory div:hover {
background-color: #3d3d3d !important;
}
:root .hwm_selected_bookmark {
background-color: var(--dark-mode-intermediate-background-color) !important;
}
:root .hwm_selected_bookmark span {
color: #ccc !important;
}
.hwm_leader_bookmarks div:hover {
background-color: #3d3d3d !important;
}
.hwm_leader_bookmark {
background-color: var(--dark-mode-front-background-color) !important;
}
:root .hwm_leader_selected_bookmark {
background-color: var(--dark-mode-intermediate-background-color) !important;
}
.recruit_event_set_join_block {
background-color: var(--dark-mode-intermediate-background-color) !important;
}
.recruit_event_set_stack_block {
background-color: var(--dark-mode-front-background-color) !important;
}
.records-container-body {
color: #ccc !important;
}
.s_art_inside img[src*="https://dcdn.heroeswm.ru/i/warning-triangle-icon.png"] {
-webkit-filter: invert(0.9);
filter: invert(0.9);
}
:root, :root > body [data-page="castle"] {
background-color: transparent !important;
}
.castle_note {
background-color: var(--dark-mode-intermediate-background-color) !important;
color: var(--dark-mode-color-light) !important;
}
.event_desc_block_outside {
background-color: var(--dark-mode-intermediate-background-color) !important;
}
.frac_enemy_block {
background-color: var(--dark-mode-front-background-color) !important;
}
.event_desc_block_inside {
color: #ccc !important;
}
.inv_text_btn {
color: var(--dark-mode-front-background-color) !important;
}
[data-page="mod_workbench"] [id*="MarketPriceDiv"] {
color: var(--dark-mode-color-light) !important;
}
[data-page="mod_workbench"] .button-62 {
background: #404040 !important;
color: var(--dark-mode-color-light) !important;
border-color: var(--dark-mode-color-light) !important;
border: 1px solid rgba(0, 0, 0, 0.6);
}
.global_ramka_inside {
background-color: var(--dark-mode-front-background-color) !important;
}
.lr_buy_monster_frame {
background-color: var(--dark-mode-front-background-color) !important;
}
.home_inside_margins2 div:hover {
background-color: var(--dark-mode-intermediate-background-color) !important;
outline: 1px solid var(--dark-mode-color-light) !important;
}
.home_scroll_content_hidden div:hover {
background-color: var(--dark-mode-intermediate-background-color) !important;
outline: 1px solid var(--dark-mode-color-light) !important;
}
ЗАМЕНА:
.home_button2, :root .btn_standard:not(.btn_disabled), .inv_text_kukla_btn, .job_fl_btn, .s_art_btn, .s_art_btn_small {
color: var(--dark-mode-color-light) !important;
background: dimgray !important;
}
НА:
.home_button2, :root .btn_standard:not(.btn_disabled), .inv_text_kukla_btn, .job_fl_btn, .s_art_btn, .s_art_btn_small {
color: var(--dark-mode-color-light) !important;
background: var(--dark-mode-intermediate-background-color) !important;
}
Лучше посмотри, что у меня сделано. И не выкладывай одну и туже простыню.
Д, не вопрос. Я просто скидываю мелочи, которые нахожу и "перекрашиваю"- это просто список, который наращивается вниз. Там нет ни оптимизации, ни структуры, ни комментариев. Просто накидываются изменения. Я видел изменения в выложенном скрипте- отлично. Но и своих мелочей еще понакидал.
Просто давно хотел сделать или найти для героев нормальную темную тему! А тут у вас уже 95% готового (только довести всякую мелочевку)- вот и загорелся.
Надеюсь мои правки помогут собрать 100% темную тему (без светлых пятен)!
Могу маленькие кусочки скидывать с пояснениями...
Например, вот кусочек для картинок и раскраски форума:
[data-page="forum"] td [style*="PADDING-TOP: 0px; PADDING-BOTTOM: 0px;"]{
PADDING-TOP: 2px !important;
}
[data-page="forum"] img[height*="50"] {
width: 46px !important;
height: 46px !important;
}
.hwm_main_forum_tr1 {
background-color: #272727 !important;
}
Вот так верхние закладки и сообщение магазина буду логичнее смотреться:
.s_tab, .s_note {
background-color: var(--dark-mode-front-background-color) !important;
}
.s_tab:hover, .s_tab_active, .s_tab_active:hover {
background-color: var(--dark-mode-intermediate-background-color) !important;
}
Цвета я добавил. Разметку я менять не буду - не вижу, почему в ночной теме должна сдвигаться разметка
Там на 2 пикселя сдвинуты картинки, чтобы они не перекрывали светлые границы строк, т.к. в дефолтной теме границы же не используются.
Еще момент, который был в простыне. Отображение замка:
:root, :root > body [data-page="castle"] {
background-color: transparent !important;
}
Классно сделано!
Но можно кое-что исправить/добавить в описании стиля:
.home_scroll_content_expand_sign {
-webkit-filter: invert(0.9);
filter: invert(0.9);
}
.home_expand_in_text_sign {
-webkit-filter: invert(0.9);
filter: invert(0.9);
.map_hunt_soon {
background-color: var(--dark-mode-front-background-color);
}
[data-page="house_info"] table.smithTable tr:nth-child(odd) {
background: #222 !important;
}
[data-page="house_info"] table.smithTable tr:nth-child(even) {
background: #272727 !important;
}
[data-page="house_info"] .button-62 {
background: #404040 !important;
}
[data-page="clan_info"] [style*="background-color: white"] {
background-color: var(--dark-mode-front-background-color) !important;
}
.recruit_event_enemy_block {
background-color: var(--dark-mode-front-background-color) !important;
}
.recruit_event_error_block {
background-color: var(--dark-mode-front-background-color) !important;
}
.job_fl_btn_selected {
background: var(--dark-mode-front-background-color) !important;
}
.hwm_pagination a.active {
background: var(--dark-mode-intermediate-background-color) !important;
border-color: #888 !important;
border: 2px solid rgba(0, 0, 0, 0.6);
margin-top: -1;
margin-left: -1;
margin-right: 0;
margin-bottom: 1px;
}
.hwm_pagination a {
background: var(--dark-mode-front-background-color) !important;
}
ЗАМЕНА:
.home_button2, :root .btn_standard:not(.btn_disabled), .inv_text_kukla_btn, .job_fl_btn, .s_art_btn, .s_art_btn_small {
color: var(--dark-mode-color-light) !important;
background: dimgray !important;
}
НА:
.home_button2, :root .btn_standard:not(.btn_disabled), .inv_text_kukla_btn, .job_fl_btn, .s_art_btn, .s_art_btn_small {
color: var(--dark-mode-color-light) !important;
background: var(--dark-mode-intermediate-background-color) !important;
}
ДЛЯ ОФОРМЛЕНИЯ СКРИПТА hwmOptimalRepairAtMarket:
[data-page="auction"] div[style*="background-color: rgb(252, 254, 254)"] {
background-color: #272727 !important;
}
[data-page="auction"] div[style*="background-color: rgb(234, 246, 246)"] {
background-color: #222 !important;
}
[data-page="auction"] div[style*="background-color: rgb(102, 191, 191)"] {
background-color: #404040 !important;
font-weight: bold !important;
}