Trochę ciężko się w nim połapać, gdyżpisałem tak, aby było jak najmniej kodu.
:root {
--main-bg-color: #37474F;
--secondary-bg-color: #263238;
--third-bg-color: #455A64;
--fourth-bg-color: #212a2f;
--main-text-color: #ECEFF1;
--link-color: #039BE5;
--link-hover-color: #B0BEC5;
}
body,
.cPastLeaders_cell,
.cPastLeaders_cell div{
background: var(--main-bg-color) !important;
color: var(--main-text-color) !important;
}
a {
color: var(--link-color);
}
#ipsLayout_header header,
#elMobileNav,
.ipsBox,
.ipsAreaBackground_reset,
.ipsPad_half,
.ipsApp ul.ipsPad_half,
.ipsApp ol.ipsPad_half,
.ipsBox:not( .ipsBox_transparent):not( .ipsModerated),
.ipsMenu_title,
.ipsPagination_active,
.ipsHovercard,
.ipsAreaBackground,
.ipsPad,
.ipsPagination .ipsPagination_page.ipsPagination_active a,
.ipsApp .ipsButton_primary,
.ipsDialog_title,
.ipsDialog_title ~ .ipsHr,
.ipsDialog > div,
.ipsTabs_panel,
.ipsTabs,
.ipsMenu,
.ipsMenu_innerContent,
.cAuthorPane_mobile {
background: var(--secondary-bg-color) !important;
border: none;
}
#ipsLayout_header nav,
.ipsNavBar_secondary,
.ipsNavBar_primary:not( .ipsNavBar_noSubBars) > ul:before,
.ipsNavBar_secondary > li > a,
.ipsNavBar_primary > ul > li.ipsNavBar_active > a,
.ipsNavBar_secondary > li.ipsNavBar_active a,
ul:not( .ipsMenu_keyNav) .ipsMenu_item:not( .ipsMenu_itemClicked):not( .ipsMenu_itemDisabled) a:not( .ipsMenu_itemInline):hover,
.ipsMenu_item[data-selected] a,
.ipsMenu_item[data-selected] span,
.ipsMenu_item.ipsMenu_hover,
.ipsPagination .ipsPagination_page a,
.ipsPagination .ipsPagination_next a,
.ipsPagination .ipsPagination_prev a,
.ipsPagination .ipsPagination_first a,
.ipsPagination .ipsPagination_last a,
.ipsApp .ipsButton_important,
.ipsFollow,
.ipsButtonBar .ipsButtonRow li > a,
.ipsButtonBar .ipsButtonRow li > button,
.ipsButtonBar .ipsButtonRow li > span,
.ipsQuote_citation,
.ipsSpoiler_header,
.ipsMenu_headerBar,
.ipsMenu_footerBar,
.ipsReact_reactCount,
.ipsReact_reactCount span,
.ipsApp .ipsField_autocomplete, .ipsApp textarea, .ipsApp input[type="text"], .ipsApp input[type="password"], .ipsApp input[type="datetime"], .ipsApp input[type="datetime-local"], .ipsApp input[type="date"], .ipsApp input[type="month"], .ipsApp input[type="time"], .ipsApp input[type="week"], .ipsApp input[type="number"], .ipsApp input[type="email"], .ipsApp input[type="url"], .ipsApp input[type="search"]:not(#elSearchField), .ipsApp input[type="tel"], .ipsApp .ipsField_dummy,
.ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item:not( .ipsSelectTree_itemDisabled ):hover,
.ipsSelectTree{
background: var(--third-bg-color) !important;
color: var(--main-text-color) !important;
}
.ipsDataList_readStatus .ipsDataItem:not( .ipsDataItem_unread):not( .ipsDataItem_selected):not( .ipsModerated),
.ipsDialog_loading,
#elSearchExpanded .ipsSideMenu_list,
.ipsQuote,
.ipsSpoiler,
#elInput_messenger_title,
.ipsField_autocomplete,
#elInput_messenger_to_dummyInput,
#elInput_topic_title {
background: var(--main-bg-color) !important;
border: none;
}
.ipsMenu,
.ipsHovercard {
box-shadow: 0px 0px 30px -10px rgba(0, 0, 0, 1);
border-radius: 10px;
}
#elFlashMessage{
background: var(--main-bg-color) !important;
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
}
.ipsNavBar_secondary > li > a:hover {
color: var(--link-hover-color);
}
.ipsBreadcrumb,
.ipsBreadcrumb a,
.ipsType_pageTitle,
.ipsWidget_title,
.ipsType_sectionHead,
.ipsType_light,
.ipsBreadcrumb > ul > li,
.ipsType_richText,
.ipsDataItem_main a,
.ipsDataItem_lastPoster li a,
.ipsDataItem_withPhoto li a,
.ipsWidget .ipsTabs_small .ipsTabs_item:not( .ipsTabs_activeItem),
.ipsMenu a,
.ipsLoading:before,
.ipsPagination_pageJump a,
.ipsPager_type,
html[dir="ltr"] .ipsPager .ipsPager_prev a:after,
html[dir="rtl"] .ipsPager .ipsPager_next a:after,
.ipsDialog_title,
#ipsLayout_footer a,
#ipsLayout_footer p,
.fa.fa-search,
::placeholder,
.ipsButton_light,
.ipsComposeArea_dummy.ipsJS_show,
.ipsType_veryLarge,
.ipsType_minorHeading,
input[type="text"],
.ipsPager .ipsPager_next a:after,
.ipsPager .ipsPager_prev a:after,
.ipsRichEmbed_itemTitle {
color: var(--main-text-color) !important;
}
.ipsDataList.ipsDataList_zebra .ipsDataItem:not( .ipsDataItem_selected):not( .ipsModerated):not( .ipsDataItem_new):not( .ipsDataItem_success):not( .ipsDataItem_warning):not( .ipsDataItem_error):not( .ipsDataItem_info):not( .ipsDataItem_status):nth-child(even) {
background: var(--fourth-bg-color);
}
.ipsDataItem_subList .ipsDataItem_unread a,
.ipsDataItem_unread .ipsDataItem_title a {
color: var(--link-color) !important;
}
.ipsComment_highlighted {
background: var(--secondary-bg-color)!important;
box-shadow: 0px 0px 20px 0px rgb(183, 28, 28) !important;
border: none !important;
}
.ipsMenu.ipsMenu_bottomCenter:after {
border-color: transparent transparent var(--secondary-bg-color) transparent;
}
li #elTopicActions,
li #elTopicActionsBottom,
.ipsApp .ipsDataItem_new {
background: #B71C1C !important;
color: #fff;
}
.ipsApp .ipsDataItem_warning {
background: #FF6F00;
}
.ipsDialog_close {
color: #C62828;
}
.cForumRow[data-categoryid="839"] .ipsType_sectionTitle{
background: #FF6F00 !important;
}
.ipsBox .ipsModerated,
.cPost.ipsModerated .cAuthorPane,
.ipsModerated .ipsPad,
.ipsModerated .ipsColumn,
.ipsModerated .ipsType_sectionHead {
background: #070707 !important;
}
.cke_wysiwyg_frame,
.cke_wysiwyg_div,
.ipsSideMenu_item:not( .ipsSideMenu_itemActive) a:hover,
a.ipsSideMenu_item:not( .ipsSideMenu_itemActive):hover,
span.ipsSideMenu_item:not( .ipsSideMenu_itemActive):hover,
.ipsStreamItem_contentType,
.ipsComment_header,
.ipsPhotoPanel_mini,
.ipsComment:not( .ipsModerated) .ipsComment_header,
input[type="text"],
.ipsAttachment_dropZone.ipsDragging,
.ipsComposeArea_dropZone.ipsDragging,
.ipsAutocompleteMenu_item,
.ipsAlert {
background: var(--secondary-bg-color) !important;
}
.ipsReact_button {
filter: none !important;
}
.cke_top,
.ipsAreaBackground_light,
#elSearchExpanded,
#elSearch,
.ipsApp .ipsDataItem_selected,
.ipsButton_light,
.ipsComposeArea_dummy.ipsJS_show,
.ipsTabs_activeItem,
.ipsWidget.ipsWidget_vertical .ipsWidget_title,
.ipsWidget.ipsWidget_horizontal .ipsWidget_title,
.ipsAutocompleteMenu_item[data-selected],
#elInput_comment_edit_reason,
.ipsType_sectionTitle{
background: var(--third-bg-color) !important;
}
#elSearch input[type="search"],
#elSearchExpanded,
#elSearchExpanded .ipsMenu_title,
.ipsTabs_activeItem {
border: none !important;
color: var(--main-text-color);
}
a.cke_button{
filter: invert(1);
}
button[type="submit"].ipsButton_primary,
button[data-action="ok"].ipsButton.ipsButton_fullWidth.ipsButton_primary{
background: #4CAF50 !important;
}
/*przyciski moderacyjne w cke*/
.cke_button[title*="warn"],
.cke_button[title*="WARN"],
.cke_button[title*="Notka"]
{
filter: none !important;
}
/*Wybór czcionki i jej rozmiaru*/
.cke_panel_grouptitle {
background: #263238;
color: #fff;
text-shadow: none;
box-shadow: none;
}
.cke_panel_listItem a {
background: #37474F;
border: 1px solid #263238;
}
.cke_panel_listItem a:hover,
.cke_panel_listItem a:focus,
.cke_panel_listItem a:active {
background: #546E7A;
}
a.cke_combo_button,
.cke_combo_on a.cke_combo_button {
background: #455A64;
box-shadow: none;
border: none;
}
.cke_combo_off a.cke_combo_button:hover {
background: #546E7A;
}
.cke_combo_text {
color: #fff;
text-shadow: none;
}
.cke_combo_on a.cke_combo_button {
background: #263238;
}
#elFullReports_menu .ipsDataItem.ipsDataItem_unread a,
.fa-flag {
color: red !important;
}
.fa-exclamation-triangle{
color: #FFA726;
}
.fa-check-circle{
color: #4CAF50;
}
.ipsMessage_error{
background: #cc5353 !important;
}
.ipsMessage_warning{
background: #d87c4f !important;
}
.ipsDataItem{
border-color: var(--third-bg-color);
}
.nbPinned{
background: var(--third-bg-color) !important;
}
.cIPInfo_map,
.cPastLeaders_title span,
.ipsStreamItem.ipsStreamItem_actionBlock {
background: transparent !important
}
.ipsColumn_medium img {
max-width: 100%;
}
/*animacja ładowania embed*/
#ipsEmbedLoading{
background: var(--main-bg-color) !important;
}
@keyframes dummy_anim {
0% {
background-color: var(--main-bg-color);
}
80% {
background-color: var(--secondary-bg-color);
}
100% {
background-color: var(--third-bg-color);
}
}
.ipsCode{
background: var(--fourth-bg-color) !important;
border-left-color: var(--third-bg-color) !important;
}
.ipsCode span{
filter: invert(100%);
}
/*member*/
[style*="color: #111111;"] {
color: #9E9E9E !important;
}
/*Super Member*/
[style*="color: #333425"] {
color: #90a4ae !important;
}
/*Weteran*/
[style*="color: #3f3f3f;"] {
color: #78909c !important;
}
/*często używane kolory tekstu na forum zlewające się z tłem*/
[style*="color:#000"],
[style*="color:#252525"],
[style*="background-color:#ffffff"],
[style*="color: rgb(51, 51, 51)"],
[style*="color:#272a34"],
[style*="color:#333333"],
[style*="color:#2b2b2c"],
[color*="#2b2b2c"],
[style*="background-color:#fffefa"],
[style*="color:#000000"],
[style*="color: #000000"],
font[color*="000"],
[style*="background-color:rgb(230,230,230)"],
[style*="color:#222222;"],
[style*="color: rgb(82, 82, 82)"],
[style*="rgb(10,10,10)"],
[style*="background-color:#fcfcfc"],
[style*="rgb(51,51,51)"],
[style*="rgb(39, 42, 52)"],
[style*="background-color:#f9f9f9"],
[style*="color:rgb(82,82,82)"],
[style*="color:#263238"],
[style*="rgb(237, 237, 237)"],
span[style*="rgb(255, 255, 255)"] {
color: var(--main-text-color) !important;
background: transparent !important;
}
::-webkit-scrollbar-track {
background-color: var(--secondary-bg-color);
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: var(--third-bg-color);
}
::selection {
background: #90A4AE;
color: #fff;
}