Google Hangouts tweaks

Hides background images at hangouts.google.com and reorganizes chat bubbles. Works in Gmail.

  1. /* ==UserStyle==
  2. @name Google Hangouts tweaks
  3. @namespace myfonj
  4. @version 1.1.0
  5. @description Hides background images at hangouts.google.com and reorganizes chat bubbles. Works in Gmail.
  6. ==/UserStyle== */
  7. @-moz-document domain("hangouts.google.com") {
  8. /*
  9. https://greasyfork.org/en/scripts/414407/versions/new
  10. https://userstyles.org/styles/121186/google-hangouts-no-decorative-images
  11. */
  12. /* disable background decorative images
  13. */
  14. div[style^="background-image:url(https://www.gstatic.com/chat/hangouts/bg/"][style$="background-size:cover;"],
  15. div[style^="background-image:url(https://www.gstatic.com/chat/hangouts/bg/"][style$="background-size:cover;"] ~ * {
  16. background-image: none !important;
  17. display: none !important;
  18. }
  19. /* fix default background color
  20. */
  21. body {
  22. background-color: #333;
  23. }
  24. /* move own messages in chat windows to the left
  25. */
  26. .pj > .Tn,
  27. .pj > .Tn > .KL {
  28. float: none;
  29. }
  30. .tk.pj {
  31. padding-left: 46px;
  32. }
  33. /* move own bubble tail down
  34. */
  35. .pj .KRQuhe {
  36. border-top-right-radius: 5px;
  37. border-bottom-right-radius: 0;
  38. }
  39. .pj .ci {
  40. top: auto;
  41. bottom: 0;
  42. transform: scaleY(-1);
  43. }
  44. /* move time info to the left as well
  45. */
  46. .pj > .Tn > .TlvAYc {
  47. padding-left: 14px;
  48. text-align: left;
  49. }
  50. /* move "green" status dot from avatar to name
  51. */
  52. .Bb .flaeQ {
  53. position: absolute;
  54. bottom: auto;
  55. top: 4px;
  56. right: -13px;
  57. }
  58. /* Emoji: use system font instead of image sprite; show sprite on hover, over
  59. in picker there is slightly differrent style formatting
  60. */
  61. [data-emo] {
  62. position: relative;
  63. }
  64. [data-emo] > [style*="opacity:0"] {
  65. opacity: 1 !important;
  66. position: static !important;
  67. width: auto !important;
  68. font-family: Segoe UI Emoji, Segoe UI Symbol;
  69. }
  70. [data-emo]:not(:hover) > [style="display:inline-block;"] {
  71. display: none !important;
  72. }
  73. [data-emo]:hover > [style="display:inline-block;"] {
  74. position: absolute;
  75. top: 50%;
  76. left: 50%;
  77. transform: translate(-50%, -50%);
  78. z-index: 1;
  79. pointer-events: none;
  80. }
  81. }