☰

Google Card-Style UI

Greatly Beautify Google UI!

  1. // ==UserScript==
  2. // @name        Google Card-Style UI
  3. // @description Greatly Beautify Google UI!
  4. // @author      Fei Sun
  5. // @version     2.0.3
  6. // @include       *://*.google.*/search*
  7. // @namespace https://greasyfork.org/users/35010
  8. // ==/UserScript==
  9. /*jshint multistr: true */
  10. let CSSBlock = document.createElement("style");
  11. let commonCSSText = `
  12. .vt6azd,.g,.tF2Cxc.asEBEc {
  13.   margin-bottom:5px;
  14. }
  15. .cu-container {
  16.   display: none;
  17. }
  18. .srp {
  19. --center-width: 692px;
  20. }
  21. .hlcw0c .MjjYud {
  22. padding:0;
  23. box-shadow:none;
  24. }
  25. .HnP70e,.Ww4FFb {
  26.   background:transparent;
  27. }
  28. .hpfc8d,.hlcw0c {
  29.   padding:0;
  30. }
  31. `;
  32. let darkCSSText = `
  33. .dG2XIf,.sG4Xue,g-inner-card, .euDXsc .rmxqbe {
  34.   background:transparent;
  35. }
  36. .MjjYud,.hlcw0c{
  37.   padding:20px;
  38.   background-color:#2d3137;
  39.   margin-bottom:20px;
  40.   border-radius:24px;
  41. }
  42. .k8XOCe {
  43. background:#26272a;
  44. }
  45. .FalWJb {
  46. background:transparent;
  47. }
  48. `;
  49. let lightCSSText = `
  50. .MjjYud,.hlcw0c{
  51.   padding:20px;
  52.   background-color:#fff;
  53.   margin-bottom:20px;
  54.   border-radius:24px;
  55.   box-shadow:2px 2px 15px rgba(0,0,0,.08);
  56. }`;
  57. (function () {
  58.   CSSBlock.innerHTML = commonCSSText;
  59.   if (getComputedStyle(document.body)["background-color"] != "rgb(255, 255, 255)") {
  60.     CSSBlock.innerHTML += darkCSSText;
  61.   }
  62.   else {
  63.     CSSBlock.innerHTML += lightCSSText;
  64.   }
  65.   document.body.appendChild(CSSBlock);
  66. })();