☰

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 提交的版本，檢視 最新版本。

/* ==UserStyle==
 * @name         Rounded Square Label Badges for New Gmail
 * @namespace    github.com/exterrestris
 * @version      0.3.0
 * @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
 * @match        https://mail.google.com/*
 ==/UserStyle== */

@namespace url(http://www.w3.org/1999/xhtml);

/****************
 * Message List *
 ****************/
.ar.as {
  position: relative;
  box-sizing: border-box;
  background-color: transparent;
  margin-top: 0;
  padding-right: 0;
  margin-right: 5px;    
}

.ar.as:nth-of-type(6) ~ .ar.as {
  display: none;
}

.ar.as .at {
  width: 2.9ex;
  overflow: hidden;
  height: 2.9ex;
}
    
.ar.as .at .av {
  width: 0;
  padding: 0;
}

.ar.as .at[title="Inbox"], .ar.as .at[title="Bin"] {
  width: auto;
  overflow: visible;
}
    
.ar.as .at[title="Inbox"] .av, .ar.as .at[title="Bin"] .av {
  width: auto;
  padding: 0 8px;
}
    
.ar.as .at[title="Inbox"] .av {
  font-weight: bold;
}
    
.ar.as .at[title="Bin"] .av {
  font-style: italic;
}

.ar.as .au {
  border-width: 0;
}

.as {
  position: relative;
}

.ar.as .at .au .av {
  overflow: hidden;
}

.Zs .yi {
  max-width: none;
}

.y6 {
  line-height: 1.5;
}

.xT {
  justify-content: right;
}

/*********************
 * Add Custom Colour *
 *********************/
.Kj-JD-Jz .ar.as .at {
  width: auto;
  overflow: visible;
  position: relative;
  margin-left: 4.3ex;
}

.Kj-JD-Jz .ar.as .at:before {
  content: '';
  width: 2.9ex;
  height: 2.9ex;
  position: absolute;
  left: -4.3ex;
  top: 0;
  background-color: inherit;
  border-radius: 3em;
  border: 1px solid rgba(51,51,51,0.4) !important;
}

.Kj-JD-Jz .ar.as .at .av {
  width: auto;
  padding: 0 8px;
}

/****************
 * Preview Pane *
 ****************/
.hX {
  border-collapse: separate;
  border-spacing: 0;
  border: 0;
}

.hX .hM {
  border: 1px solid transparent;
}

.hX .hU.hM {
  border-right: 0;
  padding-left: 0.5em;
  padding-right: 0.4em;

}

.hX .hV.hM {
  border-left: 0;
  padding-right: 0.8em;
  padding-left: 0.3em;
}

.hX .hV.hM .hO {
  padding: 0;
  vertical-align: top;
  top: -1px;
  position: relative;
}

.hX .hS.hM {
  border-width: 0;
}

.hU.hM {
  position: relative;
  box-sizing: border-box;
}

.hU.hM .hN {
  overflow: hidden;
  height: 3ex;
}