☰

Rounded Square Label Badges for New Gmail

Loosely based on https://userstyles.org/styles/109101/gmail-badges-rounded-in-message-indexes with some modifications: labels do not expand on hover, and are now displayed as square "badges" to better fit within the new Gmail styling

当前为 2020-10-31 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2.  * @name         Rounded Square Label Badges for New Gmail
  3.  * @namespace    github.com/exterrestris
  4.  * @version      0.3.0
  5.  * @description  Loosely based on https://userstyles.org/styles/109101/gmail-badges-rounded-in-message-indexes with some modifications: labels do not expand on hover, and are now displayed as square "badges" to better fit within the new Gmail styling
  6.  * @match        https://mail.google.com/*
  7.  ==/UserStyle== */
  8.  
  9. @namespace url(http://www.w3.org/1999/xhtml);
  10.  
  11. /****************
  12.  * Message List *
  13.  ****************/
  14. .ar.as {
  15.   position: relative;
  16.   box-sizing: border-box;
  17.   background-color: transparent;
  18.   margin-top: 0;
  19.   padding-right: 0;
  20.   margin-right: 5px;    
  21. }
  22.  
  23. .ar.as:nth-of-type(6) ~ .ar.as {
  24.   display: none;
  25. }
  26.  
  27. .ar.as .at {
  28.   width: 2.9ex;
  29.   overflow: hidden;
  30.   height: 2.9ex;
  31. }
  32.     
  33. .ar.as .at .av {
  34.   width: 0;
  35.   padding: 0;
  36. }
  37.  
  38. .ar.as .at[title="Inbox"], .ar.as .at[title="Bin"] {
  39.   width: auto;
  40.   overflow: visible;
  41. }
  42.     
  43. .ar.as .at[title="Inbox"] .av, .ar.as .at[title="Bin"] .av {
  44.   width: auto;
  45.   padding: 0 8px;
  46. }
  47.     
  48. .ar.as .at[title="Inbox"] .av {
  49.   font-weight: bold;
  50. }
  51.     
  52. .ar.as .at[title="Bin"] .av {
  53.   font-style: italic;
  54. }
  55.  
  56. .ar.as .au {
  57.   border-width: 0;
  58. }
  59.  
  60. .as {
  61.   position: relative;
  62. }
  63.  
  64. .ar.as .at .au .av {
  65.   overflow: hidden;
  66. }
  67.  
  68. .Zs .yi {
  69.   max-width: none;
  70. }
  71.  
  72. .y6 {
  73.   line-height: 1.5;
  74. }
  75.  
  76. .xT {
  77.   justify-content: right;
  78. }
  79.  
  80. /*********************
  81.  * Add Custom Colour *
  82.  *********************/
  83. .Kj-JD-Jz .ar.as .at {
  84.   width: auto;
  85.   overflow: visible;
  86.   position: relative;
  87.   margin-left: 4.3ex;
  88. }
  89.  
  90. .Kj-JD-Jz .ar.as .at:before {
  91.   content: '';
  92.   width: 2.9ex;
  93.   height: 2.9ex;
  94.   position: absolute;
  95.   left: -4.3ex;
  96.   top: 0;
  97.   background-color: inherit;
  98.   border-radius: 3em;
  99.   border: 1px solid rgba(51,51,51,0.4) !important;
  100. }
  101.  
  102. .Kj-JD-Jz .ar.as .at .av {
  103.   width: auto;
  104.   padding: 0 8px;
  105. }
  106.  
  107. /****************
  108.  * Preview Pane *
  109.  ****************/
  110. .hX {
  111.   border-collapse: separate;
  112.   border-spacing: 0;
  113.   border: 0;
  114. }
  115.  
  116. .hX .hM {
  117.   border: 1px solid transparent;
  118. }
  119.  
  120. .hX .hU.hM {
  121.   border-right: 0;
  122.   padding-left: 0.5em;
  123.   padding-right: 0.4em;
  124.  
  125. }
  126.  
  127. .hX .hV.hM {
  128.   border-left: 0;
  129.   padding-right: 0.8em;
  130.   padding-left: 0.3em;
  131. }
  132.  
  133. .hX .hV.hM .hO {
  134.   padding: 0;
  135.   vertical-align: top;
  136.   top: -1px;
  137.   position: relative;
  138. }
  139.  
  140. .hX .hS.hM {
  141.   border-width: 0;
  142. }
  143.  
  144. .hU.hM {
  145.   position: relative;
  146.   box-sizing: border-box;
  147. }
  148.  
  149. .hU.hM .hN {
  150.   overflow: hidden;
  151.   height: 3ex;
  152. }