☰

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