/* Define Variables */ :root { /* Sets color for primary button and text links. */ --accent-color: #2271b1; /* Sets background color for the main navigation and top header elements. */ --background-color-1: #1d2327; /* Sets background color for vertical menu, modal, accordion, sub-header, actions bar and segment elements. */ --background-color-2: #f0f0f1; /* Sets background color for table headers, widgets, cards, modal headers and navigatoin wrapper elements. */ --background-color-3: rgba(255, 255, 255, .65); /* Sets background color for form field elements. */ --background-color-4: #ffffff; /* Sets background color for table elements. */ --table-background-color: #ffffff; /* Sets color for green elements. */ --green-color: #00a32a; /* Sets color for yellow elements. */ --yellow-color: #dba617; /* Sets color for red elements. */ --red-color: #d63638; /* Sets color for blue elements. */ --blue-color: #2271b1; /* Sets main text color. */ --font-color: #3c434a; /* Sets text color, lighter version. */ --font-button-color: #ffffff; /* Sets button text color. */ --font-light-color: #646970; /* Sets section element and table borders. */ --border-color: #c3c4c7; } /* Fix Colors */ .mainwp-ui.mainwp-custom-theme i.green.icon:not(.inverted) { color: var(--green-color) !important; } .mainwp-ui.mainwp-custom-theme .ui.green.label:not(.basic) { color: var(--font-button-color) !important; background-color: var(--green-color) !important; } .mainwp-ui.mainwp-custom-theme .ui.green.label.basic { color: var(--green-color) !important; border-color: var(--green-color) !important; } .mainwp-ui.mainwp-custom-theme i.red.icon:not(.inverted) { color: var(--red-color) !important; } .mainwp-ui.mainwp-custom-theme .ui.red.label:not(.basic) { color: var(--font-button-color) !important; background-color: var(--red-color) !important; } .mainwp-ui.mainwp-custom-theme i.yellow.icon:not(.inverted) { color: var(--yellow-color) !important; } .mainwp-ui.mainwp-custom-theme .ui.yellow.label:not(.basic) { color: var(--font-button-color) !important; background-color: var(--yellow-color) !important; } .mainwp-ui.mainwp-custom-theme i.blue.icon:not(.inverted) { color: var(--blue-color) !important; } .mainwp-ui.mainwp-custom-theme .ui.blue.label:not(.basic) { color: var(--font-button-color) !important; background-color: var(--blue-color) !important; } .mainwp-ui.mainwp-custom-theme i.green.icon.inverted { color: var(--font-button-color) !important; background-color: var(--green-color) !important; } .mainwp-ui.mainwp-custom-theme i.red.icon.inverted { color: var(--font-button-color) !important; background-color: var(--red-color) !important; } .mainwp-ui.mainwp-custom-theme i.yellow.icon.inverted { color: var(--font-button-color) !important; background-color: var(--yellow-color) !important; } .mainwp-ui.mainwp-custom-theme i.blue.icon.inverted { color: var(--font-button-color) !important; background-color: var(--blue-color) !important; } .mainwp-ui.mainwp-custom-theme .ui.indeterminate.green.progress .bar::before, .mainwp-ui.mainwp-custom-theme .ui.green.progress .bar, .ui.progress .green.bar { background-color: var(--green-color) !important; } /* Invert Segments */ body.mainwp-ui.mainwp-custom-theme, .mainwp-ui.mainwp-custom-theme #wpbody-content, .mainwp-ui.mainwp-custom-theme .mainwp-content-wrap, .mainwp-ui.mainwp-custom-theme .ui.segment { background-color: var(--background-color-2) !important; color: var(--font-color); } .mainwp-ui.mainwp-custom-theme #mainwp-top-header { background: #1c1d1b !important; color: #ffffff !important; } .mainwp-ui.mainwp-custom-theme #mainwp-top-header .ui.icon.button:not(.red, .green) { background: #1c1d1b !important; -webkit-box-shadow: inset 2px 0px 0px 1px #ffffff !important; -moz-box-shadow: inset 0px 0px 0px 1px #ffffff !important; box-shadow: inset 0px 0px 0px 1px #ffffff !important; } .mainwp-ui.mainwp-custom-theme #mainwp-top-header .ui.icon.button .icon { color: #ffffff !important; } .mainwp-ui.mainwp-custom-theme #mainwp-page-navigation-wrapper { background-color: var(--background-color-3); color: var(--font-color); } .mainwp-ui.mainwp-custom-theme #mainwp-page-navigation-wrapper .ui.secondary.pointing.menu { border-color: var(--border-color) !important; color: var(--font-color); } .mainwp-ui.mainwp-custom-theme #mainwp-page-navigation-wrapper .ui.secondary.pointing.menu a.item { color: var(--font-color); } .mainwp-ui.mainwp-custom-theme #mainwp-page-navigation-wrapper .ui.secondary.pointing.menu a.item.active { color: var(--accent-color); } .mainwp-ui.mainwp-custom-theme .mainwp-actions-bar, .mainwp-ui.mainwp-custom-theme .mainwp-sub-header { border-bottom: 1px solid var(--border-color); background: var(--background-color-2); } .mainwp-ui.mainwp-custom-theme .mainwp-side-content, .mainwp-ui.mainwp-custom-theme .mainwp-main-content { border-color: var(--border-color) !important; } /* Headers */ .mainwp-ui.mainwp-custom-theme h2.header { color: var(--font-color); } .mainwp-ui.mainwp-custom-theme h3.header { color: var(--font-color); } .mainwp-ui.mainwp-custom-theme h4.header { color: var(--font-color); } /* Invert Side Bar */ .mainwp-ui.mainwp-custom-theme #mainwp-select-sites-header .ui.menu { border-color: var(--border-color); } .mainwp-ui.mainwp-custom-theme #mainwp-select-sites-header .ui.menu a.item { color: var(--font-color); } .mainwp-ui.mainwp-custom-theme #mainwp-select-sites-header .ui.menu a.item.active { color: var(--accent-color); } .mainwp-ui.mainwp-custom-theme #mainwp-select-sites .ui.divided.list .item { border-color: var(--border-color) !important; } .mainwp-ui.mainwp-custom-theme #mainwp-select-sites .ui.divided.list .item label { color: var(--font-color) !important; } .mainwp-ui.mainwp-custom-theme #mainwp-select-sites-select-all-actions { background-color: var(--border-color); border-color: var(--border-color); } .mainwp-ui.mainwp-custom-theme .mainwp-side-content .title { color: var(--font-color) !important; } /* Invert Widgets */ .mainwp-ui.mainwp-custom-theme .ui.segment.mainwp-widget { background-color: var(--background-color-4) !important; border-color: var(--border-color) !important; color: var(--font-color); } .mainwp-ui.mainwp-custom-theme .ui.segment.mainwp-widget .ui.header, .mainwp-ui.mainwp-custom-theme .ui.segment.mainwp-widget .ui.header .sub.header, .mainwp-ui.mainwp-custom-theme .ui.segment.mainwp-widget .statistic .label, .mainwp-ui.mainwp-custom-theme .ui.segment.mainwp-widget .statistic .value { color: var(--font-color); } .mainwp-ui.mainwp-custom-theme .ui.segment.mainwp-widget .ui.horizontal.divider { border-color: var(--border-color); color: var(--font-color); } .mainwp-ui.mainwp-custom-theme .ui.segment.mainwp-widget .ui.list .item { border-color: var(--border-color); color: var(--font-color); } /* Invert Tables */ .mainwp-ui.mainwp-custom-theme .ui.table, .mainwp-ui.mainwp-custom-theme .ui.inverted.table { background: var(--table-background-color); color: var(--font-color); } .mainwp-ui.mainwp-custom-theme .ui.table tr th, .mainwp-ui.mainwp-custom-theme .ui.inverted.table tr th { background-color: var(--background-color-3); border-color: var(--border-color); color: var(--font-color); } .mainwp-ui.mainwp-custom-theme .ui.table tr td { border-color: var(--border-color); } .mainwp-ui.mainwp-custom-theme .ui.pagination.menu { background-color: var(--background-color-3); border-color: var(--border-color); } .mainwp-ui.mainwp-custom-theme .ui.pagination.menu .item:hover, .mainwp-ui.mainwp-custom-theme .ui.pagination.menu .item.active { background: var(--accent-color); } .mainwp-ui.mainwp-custom-theme .ui.pagination.menu .item:hover .page-link, .mainwp-ui.mainwp-custom-theme .ui.pagination.menu .item.active .page-link { color: #ffffff !important; } .mainwp-ui.mainwp-custom-theme .ui.selection.table tr.hoverli, .mainwp-ui.mainwp-custom-theme .ui.selectable.table tr.hoverli { background-color: var(--background-color-4) !important; } .mainwp-ui.mainwp-custom-theme .ui.selection.table tr.active, .mainwp-ui.mainwp-custom-theme .ui.selectable.table tr.active { background-color: var(--background-color-4) !important; } .mainwp-ui.mainwp-custom-theme .ui.selection.table tr:hover td, .mainwp-ui.mainwp-custom-theme .ui.selectable.table tr:hover td { color: var(--font-light-color); } .mainwp-ui.mainwp-custom-theme .alternate, .mainwp-ui.mainwp-custom-theme .striped>tbody> :nth-child(2n+1) { background-color: var(--background-color-3); } .mainwp-ui.mainwp-custom-theme #mainwp-manage-themes-table tbody tr td:first-child, .mainwp-ui.mainwp-custom-theme #mainwp-manage-plugins-table tbody tr td:first-child { background-color: var(--background-color-3); } .mainwp-ui.mainwp-custom-theme #mainwp-manage-themes-table tbody tr td.positive, .mainwp-ui.mainwp-custom-theme #mainwp-manage-plugins-table tbody tr td.positive { background-color: var(--border-color); } .mainwp-ui.mainwp-custom-theme #mainwp-manage-themes-table tbody tr td.negative, .mainwp-ui.mainwp-custom-theme #mainwp-manage-plugins-table tbody tr td.negative { background-color: var(--border-color); } .mainwp-ui.mainwp-custom-theme #mainwp-manage-themes-table tbody tr td.warning, .mainwp-ui.mainwp-custom-theme #mainwp-manage-plugins-table tbody tr td.warning { background-color: rgba(181, 129, 5, .1); } /* Invert Form Fields */ .mainwp-ui.mainwp-custom-theme .ui.form textarea { background-color: var(--background-color-4); border-color: var(--border-color); } .mainwp-ui.mainwp-custom-theme .ui.input>input { background-color: var(--background-color-4); border-color: var(--border-color); } .mainwp-ui.mainwp-custom-theme .ui.form input, .mainwp-ui.mainwp-custom-theme .ui.form select, .mainwp-ui.mainwp-custom-theme .ui.dropdown.selection { background: var(--background-color-4); color: var(--font-color); border-color: var(--border-color); } .mainwp-ui.mainwp-custom-theme .ui.form input:focus, .mainwp-ui.mainwp-custom-theme .ui.form select:focus, .mainwp-ui.mainwp-custom-theme .ui.dropdown.selection:focus { background-color: var(--background-color-4); color: var(--font-color); } .mainwp-ui.mainwp-custom-theme .ui.form .field label { color: var(--font-color); } .mainwp-ui.mainwp-custom-theme .ui.input .ui.basic.label { color: var(--font-light-color); background-color: var(--background-color-4); border-color: var(--border-color); } .mainwp-ui.mainwp-custom-theme .ui.header, .mainwp-ui.mainwp-custom-theme .ui.header .sub.header { color: var(--font-color); } .mainwp-ui.mainwp-custom-theme .ui.dividing.header { border-color: var(--border-color); } .mainwp-ui.mainwp-custom-theme .ui.toggle.checkbox label::before, .mainwp-ui.mainwp-custom-theme .ui.slide.checkbox label::before { color: var(--font-color); background: var(--background-color-4); } .mainwp-ui.mainwp-custom-theme .ui.checkbox input~label, .mainwp-ui.mainwp-custom-theme .ui.radio.checkbox input~label { color: var(--font-color) !important; } .mainwp-ui.mainwp-custom-theme .ui.checkbox.checked input~label, .mainwp-ui.mainwp-custom-theme .ui.radio.checkbox.checked input~label { color: var(--font-color) !important; } .mainwp-ui.mainwp-custom-theme .ui.checkbox input~label::before, .mainwp-ui.mainwp-custom-theme .ui.radio.checkbox input~label::before { background: var(--background-color-4) !important; color: var(--font-color) !important; border-color: var(--border-color); } .mainwp-ui.mainwp-custom-theme .ui.checkbox.checked input~label::before, .mainwp-ui.mainwp-custom-theme .ui.radio.checkbox.checked input~label::before, .mainwp-ui.mainwp-custom-theme .ui.form .ui.checkbox.checked input~label::before, .mainwp-ui.mainwp-custom-theme .ui.form .ui.radio.checkbox.checked input~label::before { background-color: var(--green-color) !important; } .mainwp-ui.mainwp-custom-theme .ui.checkbox input~label::after, .mainwp-ui.mainwp-custom-theme .ui.radio.checkbox input~label::after { color: var(--font-color) !important; } .mainwp-ui.mainwp-custom-theme .ui.checkbox.checked input~label::after, .mainwp-ui.mainwp-custom-theme .ui.radio.checkbox.checked input~label::after { color: var(--background-color-2) !important; } .mainwp-ui.mainwp-custom-theme .ui.radio.checkbox input~label::after { background-color: var(--font-color) !important; } .mainwp-ui.mainwp-custom-theme .ui.radio.checkbox.checked input~label::after { background-color: var(--background-color-2) !important; } /* Invert Messages */ .mainwp-ui.mainwp-custom-theme .ui.message .header { color: var(--font-color); } .mainwp-ui.mainwp-custom-theme .ui.info.message { color: var(--font-color) !important; border-left: 5px solid var(--blue-color) !important; background-color: var(--background-color-4); box-shadow: none; -webkit-box-shadow: none; } .mainwp-ui.mainwp-custom-theme .ui.yellow.message { color: var(--font-color) !important; border-left: 5px solid var(--yellow-color) !important; background-color: var(--background-color-4); box-shadow: none; -webkit-box-shadow: none; } .mainwp-ui.mainwp-custom-theme .ui.green.message { color: var(--font-color) !important; background-color: var(--background-color-4); border-left: 5px solid var(--green-color) !important; box-shadow: none; -webkit-box-shadow: none; } .mainwp-ui.mainwp-custom-theme .ui.message a { color: var(--font-color) !important; font-weight: bolder; } /* Invert Cards */ .mainwp-ui.mainwp-custom-theme .ui.cards .card { background-color: var(--background-color-3); border: 1px solid var(--border-color) !important; color: var(--font-color); box-shadow: none; -webkit-box-shadow: none; } .mainwp-ui.mainwp-custom-theme .ui.cards .card .description, .mainwp-ui.mainwp-custom-theme .ui.cards .card .meta { color: var(--font-color); } .mainwp-ui.mainwp-custom-theme .ui.cards .card .meta a { color: var(--accent-color); } .mainwp-ui.mainwp-custom-theme .ui.cards .card .header { color: var(--font-color); } .mainwp-ui.mainwp-custom-theme .ui.cards .card .content { border-top: 1px solid var(--border-color) !important; color: var(--font-color); } /* Invert Modal */ .mainwp-ui.mainwp-custom-theme .ui.modal i.icon.close { top: 0.8em; right: 0.8em; color: var(--font-color); opacity: 1 !important; text-shadow: none !important; } .mainwp-ui.mainwp-custom-theme .ui.modal>.header, .mainwp-ui.mainwp-custom-theme .ui.modal>.actions { background: var(--background-color-3); border-color: var(--border-color); color: var(--font-color); } .mainwp-ui.mainwp-custom-theme .ui.modal, .mainwp-ui.mainwp-custom-theme .ui.modal>.content { background: var(--background-color-2); border-color: var(--border-color); color: var(--font-color); } .mainwp-ui.mainwp-custom-theme .ui.progress .label { color: var(--font-color); } .mainwp-ui.mainwp-custom-theme .ui.modal .ui.list .item { border-color: var(--border-color); color: var(--font-color); } .mainwp-ui.mainwp-custom-theme .ui.modal .ui.list .item .content, .mainwp-ui.mainwp-custom-theme .ui.list .item .content { color: var(--font-color); } /* Invert Buttons, Labels and Icons */ .mainwp-ui.mainwp-custom-theme a:not(.button, .uf-fmuci-button-main) { color: var(--accent-color); } .mainwp-ui.mainwp-custom-theme .icon { color: var(--font-color); } .mainwp-ui.mainwp-custom-theme a:not(.button) .icon:not(.green, .red), .mainwp-ui.mainwp-custom-theme .mainwp-api-icon { color: var(--accent-color); } .mainwp-ui.mainwp-custom-theme .ui.button:not(.green), .mainwp-ui.mainwp-custom-theme .ui.button:not(.basic), .mainwp-ui.mainwp-custom-theme .ui.button:not(.disabled), .mainwp-ui.mainwp-custom-theme .ui.button:not(.red) { background-color: #f6f7f7; color: var(--font-color); -webkit-box-shadow: inset 0px 0px 0px 1px var(--border-color); -moz-box-shadow: inset 0px 0px 0px 1px var(--border-color); box-shadow: inset 0px 0px 0px 1px var(--border-color); } .mainwp-ui.mainwp-custom-theme .ui.button.disabled { background-color: var(--table-background-color) !important; border: none !important; color: rgba(255, 255, 255, .3); box-shadow: none !important; -webkit-box-shadow: none !important; } .mainwp-ui.mainwp-custom-theme .ui.button.green:not(.basic), .mainwp-ui.mainwp-custom-theme .ui.button.green:not(.disabled), .mainwp-ui.mainwp-custom-theme .ui.button.green:not(.red) { background-color: var(--accent-color); color: var(--font-button-color) !important; border: none; box-shadow: none; -webkit-box-shadow: none; } .mainwp-ui.mainwp-custom-theme .ui.button.green.basic { background-color: rgba(255, 255, 255, 0) !important; color: var(--accent-color) !important; -webkit-box-shadow: inset 0px 0px 0px 1px var(--accent-color); -moz-box-shadow: inset 0px 0px 0px 1px var(--accent-color); box-shadow: inset 0px 0px 0px 1px var(--accent-color); } .mainwp-ui.mainwp-custom-theme .ui.button.red { background-color: var(--red-color); } .mainwp-ui.mainwp-custom-theme .ui.mini.compact.button { background-color: rgba(255, 255, 255, 0) !important; color: var(--font-color) !important; border-color: var(--font-color) !important; } .mainwp-ui.mainwp-custom-theme .ui.mini.compact.button.green { background-color: rgba(255, 255, 255, 0) !important; color: var(--green-color) !important; border-color: var(--green-color) !important; } .mainwp-ui.mainwp-custom-theme .ui.mini.compact.button.red { background-color: rgba(255, 255, 255, 0) !important; color: var(--red-color) !important; border-color: var(--red-color) !important; } .mainwp-ui.mainwp-custom-theme .ui.mini.compact.button.yellow { background-color: rgba(255, 255, 255, 0) !important; color: var(--yellow-color) !important; border-color: var(--yellow-color) !important; } .mainwp-ui.mainwp-custom-theme .ui.button.green.basic .icon { color: var(--accent-color); } .mainwp-ui.mainwp-custom-theme .mainwp-nav-wrap .icon { color: var(--font-color) !important; } /* Invert Dimmer */ .mainwp-ui.mainwp-custom-theme .ui.inverted.dimmer { background: var(--background-color-2); } .mainwp-ui.mainwp-custom-theme .ui.inverted.dimmer .text { color: var(--font-light-color); } /* Invert Menus */ .mainwp-ui.mainwp-custom-theme .mainwp-nav-wrap, .mainwp-ui.mainwp-custom-theme .mainwp-nav-menu, .mainwp-ui.mainwp-custom-theme .mainwp-nav-menu .ui.inverted.menu, .mainwp-ui.mainwp-custom-theme .mainwp-nav-wrap.hoverli, .mainwp-ui.mainwp-custom-theme .ui.inverted.menu.mainwp-sub-submenu { background-color: var(--background-color-1) !important; } .mainwp-ui.mainwp-custom-theme .ui.pointing.vertical.menu { background-color: var(--background-color-3); border-color: var(--border-color) !important; } .mainwp-ui.mainwp-custom-theme .ui.pointing.vertical.menu .item { border-color: var(--border-color); color: var(--font-color); } .mainwp-ui.mainwp-custom-theme .ui.pointing.vertical.menu .item:hover { background-color: var(--background-color-4); } .mainwp-ui.mainwp-custom-theme .ui.pointing.vertical.menu .item.active { border-color: var(--border-color); background-color: var(--background-color-4); color: var(--font-color); } .mainwp-ui.mainwp-custom-theme .ui.pointing.vertical.menu .item:after { display: none !important; } /* Invert Placeholder */ .mainwp-ui.mainwp-custom-theme .ui.placeholder { opacity: 0.02; } /* Invert Editor */ .mainwp-ui.mainwp-custom-theme #wp-content-editor-tools { background-color: var(--background-color-2) !important; } .mainwp-ui.mainwp-custom-theme #post-status-info { background: var(--background-color-2); border: 0px solid var(--background-color-2) !important; }