Advertisement
Sweetening

CSS dark mode for Malwarebytes

Feb 12th, 2024
52
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.57 KB | None | 0 0
  1. /* General Image Block Adjustments for Dark Mode */
  2. .wp-block-image img {
  3. box-sizing: border-box;
  4. height: auto;
  5. max-width: 100%;
  6. vertical-align: bottom;
  7. }
  8.  
  9. .wp-block-image[style*=border-radius] img, .wp-block-image[style*=border-radius]>a {
  10. border-radius: inherit;
  11. }
  12.  
  13. .wp-block-image.has-custom-border img {
  14. box-sizing: border-box;
  15. }
  16.  
  17. .wp-block-image.aligncenter {
  18. text-align: center;
  19. }
  20.  
  21. .wp-block-image.alignfull img, .wp-block-image.alignwide img {
  22. height: auto;
  23. width: 100%;
  24. }
  25.  
  26. /* Alignment & Caption Styles */
  27. .wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.aligncenter, .wp-block-image.alignleft, .wp-block-image.alignright {
  28. display: table;
  29. }
  30.  
  31. .wp-block-image .aligncenter>figcaption, .wp-block-image .alignleft>figcaption, .wp-block-image .alignright>figcaption, .wp-block-image.aligncenter>figcaption, .wp-block-image.alignleft>figcaption, .wp-block-image.alignright>figcaption {
  32. caption-side: bottom;
  33. display: table-caption;
  34. color: #ccc; /* Lighter text color for dark mode */
  35. }
  36.  
  37. .wp-block-image .alignleft {
  38. float: left;
  39. margin: .5em 1em .5em 0;
  40. }
  41.  
  42. .wp-block-image .alignright {
  43. float: right;
  44. margin: .5em 0 .5em 1em;
  45. }
  46.  
  47. .wp-block-image .aligncenter {
  48. margin-left: auto;
  49. margin-right: auto;
  50. }
  51.  
  52. .wp-block-image figcaption {
  53. color: #ccc; /* Lighter text color for readability in dark mode */
  54. margin-bottom: 1em;
  55. margin-top: .5em;
  56. }
  57.  
  58. /* Specific Styles for Rounded Images and Circle Masks */
  59. .wp-block-image .is-style-rounded img, .wp-block-image.is-style-circle-mask img, .wp-block-image.is-style-rounded img {
  60. border-radius: 9999px;
  61. }
  62.  
  63. @supports ((-webkit-mask-image: none) or (mask-image: none)) or (-webkit-mask-image: none) {
  64. .wp-block-image.is-style-circle-mask img {
  65. border-radius: 0;
  66. -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
  67. mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
  68. mask-mode: alpha;
  69. -webkit-mask-position: center;
  70. mask-position: center;
  71. -webkit-mask-repeat: no-repeat;
  72. mask-repeat: no-repeat;
  73. -webkit-mask-size: contain;
  74. mask-size: contain;
  75. }
  76. }
  77.  
  78. /* Lightbox & Overlay Styles for Dark Mode */
  79. .wp-lightbox-overlay .scrim {
  80. background-color: #000; /* Darker background for overlays */
  81. opacity: .8; /* Adjusted for better visibility in dark mode */
  82. }
  83.  
  84. .wp-lightbox-container button, .wp-lightbox-overlay .close-button {
  85. -webkit-backdrop-filter: blur(16px) saturate(180%);
  86. backdrop-filter: blur(16px) saturate(180%);
  87. background-color: rgba(255, 255, 255, .25); /* Lighter elements for contrast */
  88. color: #fff; /* Ensure text/icons within buttons are light */
  89. }
  90.  
  91. /* Ensure visibility and readability of all elements in dark mode */
  92. .wp-lightbox-container button:hover, .wp-lightbox-overlay .close-button:hover {
  93. background-color: rgba(255, 255, 255, .35); /* Slightly lighter on hover for feedback */
  94. }
  95.  
  96. /* Update border and style properties for dark mode as needed */
  97. .wp-block-image :where(.has-border-color), .wp-block-image :where([style*=border-color]), .wp-block-image :where([style*=border-width]) {
  98. border-color: #444; /* Lighter border color suitable for dark backgrounds */
  99. }
  100.  
  101. /* Additional adjustments may be required based on specific needs */
  102.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement