| @@ -134,23 +134,9 @@ | ||
| 134 | 134 | ) { |
| 135 | 135 | background: var(--darkify_dark_mode_btn_bg) !important; |
| 136 | 136 | background-color: var(--darkify_dark_mode_btn_bg) !important; |
| 137 | 137 | color: var(--darkify_dark_mode_btn_text_color) !important; |
| 138 | - border-color: var(--darkify_dark_mode_border_color) !important; | |
| 139 | 138 | } |
| 140 | -/* the hover state */ | |
| 141 | -.darkify_dark_mode_enabled | |
| 142 | - .darkify_style_button:not( | |
| 143 | - .darkify_switch, | |
| 144 | - .darkify_switch *, | |
| 145 | - .darkify_ignore, | |
| 146 | - .darkify_ignore * | |
| 147 | - ):hover { | |
| 148 | - background: var(--darkify_dark_mode_btn_hover_bg) !important; | |
| 149 | - background-color: var(--darkify_dark_mode_btn_hover_bg) !important; | |
| 150 | - color: var(--darkify_dark_mode_btn_text_hover_color) !important; | |
| 151 | - border-color: var(--darkify_dark_mode_border_color) !important; | |
| 152 | -} | |
| 153 | 139 | |
| 154 | 140 | /* ======================== |
| 155 | 141 | Admin Bar Menu Design |
| 156 | 142 | ===========================*/ |
| @@ -171,9 +157,8 @@ | ||
| 171 | 157 | } |
| 172 | 158 | .darkify_dark_mode_enabled .darkify_admin_bar_switch_container .ab-item { |
| 173 | 159 | -webkit-mask: url(../img/switch_icons/switch_apple_dark.svg) no-repeat center; |
| 174 | 160 | mask: url(../img/switch_icons/switch_apple_dark.svg) no-repeat center; |
| 175 | - background-color: #ffffff !important; | |
| 176 | 161 | } |
| 177 | 162 | |
| 178 | 163 | /* ======================== |
| 179 | 164 | Block Editor Menu Design |
| @@ -187,9 +172,8 @@ | ||
| 187 | 172 | border: 0; |
| 188 | 173 | background: #121116; |
| 189 | 174 | border-radius: 3px; |
| 190 | 175 | padding: 0 12px; |
| 191 | - margin-right: 8px; | |
| 192 | 176 | } |
| 193 | 177 | .darkify_dark_mode_enabled .darkify_block_editor_switch { |
| 194 | 178 | background: #ffffff; |
| 195 | 179 | } |
| @@ -196,22 +180,34 @@ | ||
| 196 | 180 | .darkify_block_editor_switch .icon { |
| 197 | 181 | width: 20px; |
| 198 | 182 | height: 20px; |
| 199 | 183 | background-color: #ffffff !important; |
| 200 | - -webkit-mask: url(../img/switch_icons/switch_apple_light.svg) no-repeat center; | |
| 201 | - mask: url(../img/switch_icons/switch_apple_light.svg) no-repeat center; | |
| 202 | 184 | } |
| 203 | 185 | |
| 204 | -.darkify_dark_mode_enabled .darkify_block_editor_switch .icon { | |
| 205 | - background-color: #171717 !important; | |
| 206 | - -webkit-mask: url(../img/switch_icons/switch_apple_dark.svg) no-repeat center; | |
| 207 | - mask: url(../img/switch_icons/switch_apple_dark.svg) no-repeat center; | |
| 208 | -} | |
| 209 | - | |
| 210 | 186 | /* ======================== |
| 211 | 187 | Switch Design |
| 212 | 188 | ===========================*/ |
| 213 | 189 | |
| 190 | +.darkify_switch { | |
| 191 | + --darkify_switch_position_from_top_right_top: 40px; | |
| 192 | + --darkify_switch_position_from_top_right_right: 40px; | |
| 193 | + --darkify_switch_position_from_bottom_right_bottom: 40px; | |
| 194 | + --darkify_switch_position_from_bottom_right_right: 40px; | |
| 195 | + --darkify_switch_position_from_top_left_top: 40px; | |
| 196 | + --darkify_switch_position_from_top_left_left: 40px; | |
| 197 | + --darkify_switch_position_from_bottom_left_bottom: 40px; | |
| 198 | + --darkify_switch_position_from_bottom_left_left: 40px; | |
| 199 | + --darkify_switch_position_from_top_right_top_in_mobile: 40px; | |
| 200 | + --darkify_switch_position_from_top_right_right_in_mobile: 40px; | |
| 201 | + --darkify_switch_position_from_bottom_right_bottom_in_mobile: 40px; | |
| 202 | + --darkify_switch_position_from_bottom_right_right_in_mobile: 40px; | |
| 203 | + --darkify_switch_position_from_top_left_top_in_mobile: 40px; | |
| 204 | + --darkify_switch_position_from_top_left_left_in_mobile: 40px; | |
| 205 | + --darkify_switch_position_from_bottom_left_bottom_in_mobile: 40px; | |
| 206 | + --darkify_switch_position_from_bottom_left_left_in_mobile: 40px; | |
| 207 | + --darkify_switch_tooltip_bg_color: #142434; | |
| 208 | + --darkify_switch_tooltip_text_color: #b0cbe7; | |
| 209 | +} | |
| 214 | 210 | .darkify_switch, |
| 215 | 211 | .darkify_switch * { |
| 216 | 212 | box-sizing: border-box; |
| 217 | 213 | } |
| @@ -222,14 +218,14 @@ | ||
| 222 | 218 | position: fixed; |
| 223 | 219 | z-index: 99999; |
| 224 | 220 | } |
| 225 | 221 | .darkify_switch.darkify_top_left { |
| 226 | - top: var(--darkify_switch_position_from_top_left_top); | |
| 227 | - left: var(--darkify_switch_position_from_top_left_left); | |
| 222 | + top: var(--darkify_switch_position_from_top_left_left_in_mobile); | |
| 223 | + left: var(--darkify_switch_position_from_top_left_left_in_mobile); | |
| 228 | 224 | } |
| 229 | 225 | .darkify_switch.darkify_top_right { |
| 230 | - top: var(--darkify_switch_position_from_top_right_top); | |
| 231 | - right: var(--darkify_switch_position_from_top_right_right); | |
| 226 | + top: var(--darkify_switch_position_from_top_right_top_in_mobile); | |
| 227 | + right: var(--darkify_switch_position_from_top_right_right_in_mobile); | |
| 232 | 228 | } |
| 233 | 229 | .darkify_switch.darkify_bottom_left { |
| 234 | 230 | bottom: var(--darkify_switch_position_from_bottom_left_bottom); |
| 235 | 231 | left: var(--darkify_switch_position_from_bottom_left_left); |
| @@ -239,8 +235,9 @@ | ||
| 239 | 235 | right: var(--darkify_switch_position_from_bottom_right_right); |
| 240 | 236 | } |
| 241 | 237 | .darkify_switch.darkify_absolute_position { |
| 242 | 238 | position: absolute; |
| 239 | + z-index: unset; | |
| 243 | 240 | } |
| 244 | 241 | |
| 245 | 242 | @media only screen and (max-width: 600px) { |
| 246 | 243 | .darkify_switch.darkify_hide_on_mobile { |
| @@ -352,164 +349,43 @@ | ||
| 352 | 349 | /* ============== |
| 353 | 350 | Switch Style |
| 354 | 351 | ============== */ |
| 355 | 352 | .darkify_switch_style { |
| 356 | - cursor: pointer; | |
| 357 | - z-index: 9999; | |
| 358 | - width: calc(60px * var(--darkify-switch-scale, 1)); | |
| 359 | - height: calc(60px * var(--darkify-switch-scale, 1)); | |
| 360 | - border-radius: var(--darkify_switch_border_radius); | |
| 361 | - background: var(--darkify_switch_light_mode_bg); | |
| 362 | - display: flex; | |
| 363 | - align-items: center; | |
| 364 | - justify-content: center; | |
| 365 | - border-width: var(--darkify_switch_border); | |
| 366 | - border-style: solid; | |
| 367 | - border-color: var(--darkify_switch_border_light_color); | |
| 353 | + --darkify_switch_width_height: 60px; | |
| 354 | + --darkify_switch_icon_size: 50px; | |
| 355 | + --darkify_switch_border_radius: 7px; | |
| 356 | + --darkify_switch_light_mode_bg: #121116; | |
| 357 | + --darkify_switch_dark_mode_bg: #ffffff; | |
| 358 | + --darkify_switch_light_mode_color: #ffffff; | |
| 359 | + --darkify_switch_dark_mode_color: #121116; | |
| 368 | 360 | } |
| 369 | -.darkify_dark_mode_enabled .darkify_switch_style { | |
| 370 | - border-color: var(--darkify_switch_border_dark_color); | |
| 361 | +.darkify_switch_style{ | |
| 362 | + cursor: pointer; | |
| 363 | + z-index: 9999; | |
| 364 | + width: var(--darkify_switch_width_height); | |
| 365 | + height: var(--darkify_switch_width_height); | |
| 366 | + border-radius: var(--darkify_switch_border_radius); | |
| 367 | + background: var(--darkify_switch_light_mode_bg); | |
| 368 | + display: flex; | |
| 369 | + align-items: center; | |
| 370 | + justify-content: center; | |
| 371 | + fill: var(--darkify_switch_light_mode_icon_color); | |
| 372 | + stroke: var(--darkify_switch_light_mode_icon_color); | |
| 371 | 373 | } |
| 372 | -.darkify_switch_style .theme-toggle { | |
| 373 | - display: flex; | |
| 374 | - align-items: center; | |
| 375 | - justify-content: center; | |
| 374 | +.darkify_switch_style .theme-toggle{ | |
| 375 | + display: flex; | |
| 376 | + align-items: center; | |
| 377 | + justify-content: center; | |
| 376 | 378 | } |
| 377 | 379 | .darkify_switch_style svg { |
| 378 | - width: calc(40px * var(--darkify-switch-scale, 1)); | |
| 379 | - height: calc(40px * var(--darkify-switch-scale, 1)); | |
| 380 | - color: var(--darkify_switch_light_mode_color); | |
| 381 | - stroke: var(--darkify_switch_light_mode_color); | |
| 380 | + width: var(--darkify_switch_icon_size); | |
| 381 | + height: var(--darkify_switch_icon_size); | |
| 382 | + color: var(--darkify_switch_light_mode_color); | |
| 383 | + stroke: var(--darkify_switch_light_mode_color); | |
| 382 | 384 | } |
| 383 | -.darkify_dark_mode_enabled .darkify_switch_style { | |
| 384 | - background: var(--darkify_switch_dark_mode_bg); | |
| 385 | +.darkify_dark_mode_enabled .darkify_switch_style{ | |
| 386 | + background: var(--darkify_switch_dark_mode_bg); | |
| 385 | 387 | } |
| 386 | 388 | .darkify_dark_mode_enabled .darkify_switch_style svg { |
| 387 | - color: var(--darkify_switch_dark_mode_color); | |
| 388 | - stroke: var(--darkify_switch_dark_mode_color); | |
| 389 | -} | |
| 390 | -.switch-orbit { | |
| 391 | - box-sizing: content-box; | |
| 392 | -} | |
| 393 | - | |
| 394 | -/* | |
| 395 | -Kadence Theme Fixes | |
| 396 | -=========================== | |
| 397 | -*/ | |
| 398 | -.darkify_dark_mode_enabled | |
| 399 | - .block-editor-page.post-content-style-boxed | |
| 400 | - .editor-styles-wrapper:before, | |
| 401 | -.darkify_dark_mode_enabled .admin-color-pcs-boxed.editor-styles-wrapper:before { | |
| 402 | - background-color: transparent !important; | |
| 403 | -} | |
| 404 | -.darkify_dark_mode_enabled h3#color-palette-1-0, | |
| 405 | -.darkify_dark_mode_enabled .components-color-palette__custom-color-name { | |
| 406 | - color: var(--darkify_dark_mode_text_color) !important; | |
| 407 | -} | |
| 408 | - | |
| 409 | -.darkify-dropdown { | |
| 410 | - position: relative; | |
| 411 | - width: 180px; | |
| 412 | - margin-left: 8px; | |
| 413 | -} | |
| 414 | - | |
| 415 | -.darkify-dropdown .darkify-selected { | |
| 416 | - padding: 5px; | |
| 417 | - background: #fff; | |
| 418 | - color: #000; | |
| 419 | - cursor: pointer; | |
| 420 | - border-radius: 3px; | |
| 421 | - border: 1px solid #c0c0c0; | |
| 422 | -} | |
| 423 | - | |
| 424 | -.darkify-dropdown .darkify-options { | |
| 425 | - display: none; | |
| 426 | - position: absolute; | |
| 427 | - width: 100%; | |
| 428 | - background: #fff; | |
| 429 | - border-radius: 6px; | |
| 430 | - margin-top: 5px; | |
| 431 | - overflow: hidden; | |
| 432 | - z-index: 1000; | |
| 433 | - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | |
| 434 | - color: #000; | |
| 435 | - top: 30px; | |
| 436 | -} | |
| 437 | - | |
| 438 | -.darkify-dropdown .darkify-options.show { | |
| 439 | - display: block; | |
| 440 | -} | |
| 441 | - | |
| 442 | -.darkify-dropdown .darkify-option { | |
| 443 | - padding: 8px; | |
| 444 | - cursor: pointer; | |
| 445 | - display: flex; | |
| 446 | - align-items: center; | |
| 447 | -} | |
| 448 | -.darkify-dropdown .darkify-selected { | |
| 449 | - display: flex; | |
| 450 | - align-items: center; | |
| 451 | - width: 100%; | |
| 452 | -} | |
| 453 | -.darkify-dropdown .theme_color { | |
| 454 | - display: inline-block; | |
| 455 | - width: 20px; | |
| 456 | - height: 20px; | |
| 457 | - border-radius: 50%; | |
| 458 | - margin-right: 8px; | |
| 459 | - border: 1px solid gray; | |
| 460 | -} | |
| 461 | - | |
| 462 | -.darkify-dropdown .carbon_mist { | |
| 463 | - background-color: #171717; | |
| 464 | -} | |
| 465 | -.darkify-dropdown .midnight_reverie { | |
| 466 | - background-color: #4e478d; | |
| 467 | -} | |
| 468 | -.darkify-dropdown .verdant_depths { | |
| 469 | - background-color: #073d2f; | |
| 470 | -} | |
| 471 | -.darkify-dropdown .celestial_tide { | |
| 472 | - background-color: #144e78; | |
| 473 | -} | |
| 474 | -.darkify-dropdown .emberwood { | |
| 475 | - background-color: #372911; | |
| 476 | -} | |
| 477 | -.darkify-dropdown .glacier_drift { | |
| 478 | - background-color: #123d52; | |
| 479 | -} | |
| 480 | -.darkify-dropdown .indigo_veil { | |
| 481 | - background-color: #46598c; | |
| 482 | -} | |
| 483 | -.darkify-dropdown .duskmire { | |
| 484 | - background-color: #403953; | |
| 485 | -} | |
| 486 | -.darkify-dropdown .tidal_frost { | |
| 487 | - background-color: #286f8d; | |
| 488 | -} | |
| 489 | -.darkify-dropdown .blue_bastion { | |
| 490 | - background-color: #244892; | |
| 491 | -} | |
| 492 | -.darkify-dropdown .crimson_veil { | |
| 493 | - background-color: #440649; | |
| 494 | -} | |
| 495 | - | |
| 496 | -.darkify_dark_mode_enabled .darkify-dropdown, | |
| 497 | -.darkify_dark_mode_enabled .darkify-options.show { | |
| 498 | - background-color: var(--darkify_dark_mode_bg) !important; | |
| 499 | -} | |
| 500 | -.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) { | |
| 501 | - pointer-events: none; | |
| 502 | - opacity: 0.7; | |
| 503 | -} | |
| 504 | - | |
| 505 | -/* Switch Attention Effects */ | |
| 506 | -@keyframes darkify_attention_pulse { | |
| 507 | - 0%, 100% { transform: scale(1); } | |
| 508 | - 50% { transform: scale(1.1); } | |
| 509 | -} | |
| 510 | -.darkify_switch.darkify_attention_pulse { | |
| 511 | - animation: darkify_attention_pulse 2s ease-in-out 2s infinite; | |
| 512 | -} | |
| 513 | -.darkify_switch.darkify_attention_pulse:hover { | |
| 514 | - animation-play-state: paused; | |
| 389 | + color: var(--darkify_switch_dark_mode_color); | |
| 390 | + stroke: var(--darkify_switch_dark_mode_color); | |
| 515 | 391 | } |
