.darkify_dark_mode_enabled .darkify_style_all:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * ) { background: var(--darkify_dark_mode_bg) !important; background-color: var(--darkify_dark_mode_bg) !important; color: var(--darkify_dark_mode_text_color) !important; border-color: var(--darkify_dark_mode_border_color) !important; } .darkify_dark_mode_enabled .darkify_style_bg_txt:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * ) { background: var(--darkify_dark_mode_bg) !important; background-color: var(--darkify_dark_mode_bg) !important; color: var(--darkify_dark_mode_text_color) !important; } .darkify_dark_mode_enabled .darkify_style_bg_border:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * ) { background: var(--darkify_dark_mode_bg) !important; background-color: var(--darkify_dark_mode_bg) !important; border-color: var(--darkify_dark_mode_border_color) !important; } .darkify_dark_mode_enabled .darkify_style_txt_border:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * ) { color: var(--darkify_dark_mode_text_color) !important; border-color: var(--darkify_dark_mode_border_color) !important; } .darkify_dark_mode_enabled .darkify_style_bg:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * ) { background: var(--darkify_dark_mode_bg) !important; background-color: var(--darkify_dark_mode_bg) !important; } .darkify_dark_mode_enabled .darkify_style_txt:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * ) { color: var(--darkify_dark_mode_text_color) !important; } .darkify_dark_mode_enabled .darkify_style_border:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * ) { border-color: var(--darkify_dark_mode_border_color) !important; } .darkify_dark_mode_enabled .darkify_style_secondary_bg:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * ) { background: var(--darkify_dark_mode_secondary_bg) !important; background-color: var(--darkify_dark_mode_secondary_bg) !important; } /*Handle Link Style*/ .darkify_dark_mode_enabled .darkify_style_link:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore *, .darkify-nav ul li a ) { color: var(--darkify_dark_mode_link_color) !important; } .darkify_dark_mode_enabled .darkify_style_link:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * ):hover { color: var(--darkify_dark_mode_link_hover_color) !important; } /*Handle Form Element Style*/ .darkify_dark_mode_enabled .darkify_style_form_element:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * ) { background: var(--darkify_dark_mode_input_bg) !important; background-color: var(--darkify_dark_mode_input_bg) !important; color: var(--darkify_dark_mode_input_text_color) !important; } .darkify_dark_mode_enabled .darkify_style_form_element:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * )::placeholder { color: var(--darkify_dark_mode_input_placeholder_color) !important; } /*Handle Button Style*/ .darkify_dark_mode_enabled .darkify_style_button:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * ) { background: var(--darkify_dark_mode_btn_bg) !important; background-color: var(--darkify_dark_mode_btn_bg) !important; color: var(--darkify_dark_mode_btn_text_color) !important; border-color: var(--darkify_dark_mode_border_color) !important; } /* the hover state */ .darkify_dark_mode_enabled .darkify_style_button:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * ):hover { background: var(--darkify_dark_mode_btn_hover_bg) !important; background-color: var(--darkify_dark_mode_btn_hover_bg) !important; color: var(--darkify_dark_mode_btn_text_hover_color) !important; border-color: var(--darkify_dark_mode_border_color) !important; } /* ======================== Admin Bar Menu Design ===========================*/ .darkify_admin_bar_switch_container { cursor: pointer !important; display: flex; align-items: center; justify-content: center; width: 40px !important; height: 32px !important; } .darkify_admin_bar_switch_container .ab-item { height: 18px !important; cursor: pointer !important; background-color: #ffffff !important; -webkit-mask: url(../img/switch_icons/switch_apple_light.svg) no-repeat center; mask: url(../img/switch_icons/switch_apple_light.svg) no-repeat center; } .darkify_dark_mode_enabled .darkify_admin_bar_switch_container .ab-item { -webkit-mask: url(../img/switch_icons/switch_apple_dark.svg) no-repeat center; mask: url(../img/switch_icons/switch_apple_dark.svg) no-repeat center; background-color: #ffffff !important; } /* ======================== Block Editor Menu Design ===========================*/ .darkify_block_editor_switch { height: 33px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; outline: 0; border: 0; background: #121116; border-radius: 3px; padding: 0 12px; margin-right: 8px; } .darkify_dark_mode_enabled .darkify_block_editor_switch { background: #ffffff; } .darkify_block_editor_switch .icon { width: 20px; height: 20px; background-color: #ffffff !important; -webkit-mask: url(../img/switch_icons/switch_apple_light.svg) no-repeat center; mask: url(../img/switch_icons/switch_apple_light.svg) no-repeat center; } .darkify_dark_mode_enabled .darkify_block_editor_switch .icon { background-color: #171717 !important; -webkit-mask: url(../img/switch_icons/switch_apple_dark.svg) no-repeat center; mask: url(../img/switch_icons/switch_apple_dark.svg) no-repeat center; } /* ======================== Switch Design ===========================*/ .darkify_switch, .darkify_switch * { box-sizing: border-box; } .darkify_switch.darkify_top_left, .darkify_switch.darkify_top_right, .darkify_switch.darkify_bottom_left, .darkify_switch.darkify_bottom_right { position: fixed; z-index: 99999; } .darkify_switch.darkify_top_left { top: var(--darkify_switch_position_from_top_left_top); left: var(--darkify_switch_position_from_top_left_left); } .darkify_switch.darkify_top_right { top: var(--darkify_switch_position_from_top_right_top); right: var(--darkify_switch_position_from_top_right_right); } .darkify_switch.darkify_bottom_left { bottom: var(--darkify_switch_position_from_bottom_left_bottom); left: var(--darkify_switch_position_from_bottom_left_left); } .darkify_switch.darkify_bottom_right { bottom: var(--darkify_switch_position_from_bottom_right_bottom); right: var(--darkify_switch_position_from_bottom_right_right); } .darkify_switch.darkify_absolute_position { position: absolute; } @media only screen and (max-width: 600px) { .darkify_switch.darkify_hide_on_mobile { display: none; } } @media only screen and (max-width: 600px) { .darkify_switch.darkify_top_left_in_mobile, .darkify_switch.darkify_top_right_in_mobile, .darkify_switch.darkify_bottom_left_in_mobile, .darkify_switch.darkify_bottom_right_in_mobile { position: fixed; } .darkify_switch.darkify_top_left_in_mobile { top: var(--darkify_switch_position_from_top_left_top_in_mobile); left: var(--darkify_switch_position_from_top_left_left_in_mobile); bottom: unset; right: unset; } .darkify_switch.darkify_top_right_in_mobile { top: var(--darkify_switch_position_from_top_right_top_in_mobile); right: var(--darkify_switch_position_from_top_right_right_in_mobile); bottom: unset; left: unset; } .darkify_switch.darkify_bottom_left_in_mobile { bottom: var(--darkify_switch_position_from_bottom_left_bottom_in_mobile); left: var(--darkify_switch_position_from_bottom_left_left_in_mobile); top: unset; right: unset; } .darkify_switch.darkify_bottom_right_in_mobile { bottom: var(--darkify_switch_position_from_bottom_right_bottom_in_mobile); right: var(--darkify_switch_position_from_bottom_right_right_in_mobile); top: unset; left: unset; } } .darkify_tooltip .darkify_tooltiptext { visibility: hidden; width: 120px; background-color: var(--darkify_switch_tooltip_bg_color); color: var(--darkify_switch_tooltip_text_color); font-size: 12px; text-align: center; border-radius: 0; padding: 5px 0; position: absolute; z-index: 1; } .darkify_tooltip .darkify_tooltiptext::after { content: ""; position: absolute; border-width: 5px; border-style: solid; } .darkify_tooltip:hover .darkify_tooltiptext { visibility: visible; } .darkify_tooltip.darkify_tooltip_top .darkify_tooltiptext { bottom: calc(100% + 10px); left: 50%; margin-left: -60px; } .darkify_tooltip.darkify_tooltip_top .darkify_tooltiptext::after { left: 50%; margin-left: -5px; top: 100%; border-color: var(--darkify_switch_tooltip_bg_color) transparent transparent transparent; } .darkify_tooltip.darkify_tooltip_bottom .darkify_tooltiptext { top: calc(100% + 10px); left: 50%; margin-left: -60px; } .darkify_tooltip.darkify_tooltip_bottom .darkify_tooltiptext::after { left: 50%; margin-left: -5px; bottom: 100%; border-color: transparent transparent var(--darkify_switch_tooltip_bg_color) transparent; } .darkify_tooltip.darkify_tooltip_left .darkify_tooltiptext { right: calc(100% + 10px); top: calc(50% - 15px); } .darkify_tooltip.darkify_tooltip_left .darkify_tooltiptext::after { top: 50%; left: 100%; margin-top: -5px; border-color: transparent transparent transparent var(--darkify_switch_tooltip_bg_color); } .darkify_tooltip.darkify_tooltip_right .darkify_tooltiptext { left: calc(100% + 10px); top: calc(50% - 15px); } .darkify_tooltip.darkify_tooltip_right .darkify_tooltiptext::after { top: 50%; right: 100%; margin-top: -5px; border-color: transparent var(--darkify_switch_tooltip_bg_color) transparent transparent; } /* ============== Switch Style ============== */ .darkify_switch_style { cursor: pointer; z-index: 9999; width: calc(60px * var(--darkify-switch-scale, 1)); height: calc(60px * var(--darkify-switch-scale, 1)); border-radius: var(--darkify_switch_border_radius); background: var(--darkify_switch_light_mode_bg); display: flex; align-items: center; justify-content: center; border-width: var(--darkify_switch_border); border-style: solid; border-color: var(--darkify_switch_border_light_color); } .darkify_dark_mode_enabled .darkify_switch_style { border-color: var(--darkify_switch_border_dark_color); } .darkify_switch_style .theme-toggle { display: flex; align-items: center; justify-content: center; } .darkify_switch_style svg { width: calc(40px * var(--darkify-switch-scale, 1)); height: calc(40px * var(--darkify-switch-scale, 1)); color: var(--darkify_switch_light_mode_color); stroke: var(--darkify_switch_light_mode_color); } .darkify_dark_mode_enabled .darkify_switch_style { background: var(--darkify_switch_dark_mode_bg); } .darkify_dark_mode_enabled .darkify_switch_style svg { color: var(--darkify_switch_dark_mode_color); stroke: var(--darkify_switch_dark_mode_color); } .switch-orbit { box-sizing: content-box; } /* Kadence Theme Fixes =========================== */ .darkify_dark_mode_enabled .block-editor-page.post-content-style-boxed .editor-styles-wrapper:before, .darkify_dark_mode_enabled .admin-color-pcs-boxed.editor-styles-wrapper:before { background-color: transparent !important; } .darkify_dark_mode_enabled h3#color-palette-1-0, .darkify_dark_mode_enabled .components-color-palette__custom-color-name { color: var(--darkify_dark_mode_text_color) !important; } .darkify-dropdown { position: relative; width: 180px; margin-left: 8px; } .darkify-dropdown .darkify-selected { padding: 5px; background: #fff; color: #000; cursor: pointer; border-radius: 3px; border: 1px solid #c0c0c0; } .darkify-dropdown .darkify-options { display: none; position: absolute; width: 100%; background: #fff; border-radius: 6px; margin-top: 5px; overflow: hidden; z-index: 1000; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); color: #000; top: 30px; } .darkify-dropdown .darkify-options.show { display: block; } .darkify-dropdown .darkify-option { padding: 8px; cursor: pointer; display: flex; align-items: center; } .darkify-dropdown .darkify-selected { display: flex; align-items: center; width: 100%; } .darkify-dropdown .theme_color { display: inline-block; width: 20px; height: 20px; border-radius: 50%; margin-right: 8px; border: 1px solid gray; } .darkify-dropdown .carbon_mist { background-color: #171717; } .darkify-dropdown .midnight_reverie { background-color: #4e478d; } .darkify-dropdown .verdant_depths { background-color: #073d2f; } .darkify-dropdown .celestial_tide { background-color: #144e78; } .darkify-dropdown .emberwood { background-color: #372911; } .darkify-dropdown .glacier_drift { background-color: #123d52; } .darkify-dropdown .indigo_veil { background-color: #46598c; } .darkify-dropdown .duskmire { background-color: #403953; } .darkify-dropdown .tidal_frost { background-color: #286f8d; } .darkify-dropdown .blue_bastion { background-color: #244892; } .darkify-dropdown .crimson_veil { background-color: #440649; } .darkify_dark_mode_enabled .darkify-dropdown, .darkify_dark_mode_enabled .darkify-options.show { background-color: var(--darkify_dark_mode_bg) !important; } .darkify-option:nth-child(6),.darkify-option:nth-child(7),.darkify-option:nth-child(8),.darkify-option:nth-child(9),.darkify-option:nth-child(10),.darkify-option:nth-child(11) { pointer-events: none; opacity: 0.7; }