Since I posted the last version, I found that every few weeks that Google would change the class names of some of the CSS elements, particularly with the top header area. This would break my custom styles. I have since figured out another way of referencing the elements I need - by hierarchy level rather than the specific class name.
So the attached update has been stable for me for the past month. -- You received this message because you are subscribed to the Google Groups "mailplaneapp" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/mailplaneapp. For more options, visit https://groups.google.com/d/optout.
/* About: Custom Gmail CSS for Mailplane.app Author: Cole Frapp ([email protected]) Version: 0.84 Date: 10 Feb 2019 */ /* Remove elements that are not required. */ .gb_0a, /* Gmail logo */ .gb_Qc.gb_ad.gb_bd, /* Main menu and gmail icon */ .gb_Pc.gb_9c.gb_ad, .gb_zc, /* Menu icon (to expand side panel) */ /*.bAw,*/ /* Right panel: calendar, keep, tasks */ /*.gb_Rc, .gb_se,/* /* Google Apps and account icons (top right) */ .gb_Sa, /* Google Apps business icon (top right) */ .CL /* 'Manage labels' and 'New label' items in the side panel */ {display: none !important} /* Top of window formatting, removing extra whitespace, including handling of Out-of-Office label. */ .nH.w-asV.aiw div > header > div {position: absolute; top: -65px} /* Shift everything up */ .w-MH {position: absolute; top: 0px} /* Out of Office handling */ /* Left side panel. */ .aj9, .pp {background-color: #ececec } /* Background */ .akc.aZ6, .aeO {background-color: #ececec} /* Background for chat, contacts */ .nM {padding-top: 8px} /* Top spacing */ .nM:before {font-family: roboto !important; font-size: 0.85em; font-weight: 700; line-height: 2; color: gray; content: "Gmail"; margin-left: 10px; } /* Gmail label */ .ajj:before {box-shadow:none !important} /* Appears when left panel scrolling is active */ .AO, .aeH {border-left: 1px solid #dfdfdf !important} /* Side panel right border */ .nZ, .aiq {background-color: #c4c4c4 !important; border-radius: 0px !important} /* Selected item highlight */ .n3 {width: 260px} /* Extend width of items */ .ol {background-color: #ececec !important; border-radius:0px !important} span.nU a{font-weight: 400 !important; font-size:0.95em !important; font-family: helvetica !important; opacity: 0.9; color: #000 !important } /* Item text */ .aim.ain>.TO .nU>.n0 {opacity: 1 !important} /* Selected item text */ .TN, .bzz, .aHS-bnt a {color: #000 !important} /* Inbox font */ .qj {margin-right: 10px !important; opacity: 0.3} /* Icons */ .qj.qr {filter: grayscale(100%); opacity: 0.4 !important} /* Remove icon colours (Inbox and Categories) */ .ain .aHS-bnr .qj {opacity: 0.9 !important } /* Selected icons */ .ain .aHS-bnr:not(.aik) .qj {opacity: 1 !important } /* Selected labels icons */ .nZ>.aHS-bnt>.qj {opacity: 0.4 !important; background-image: url(https://www.gstatic.com/images/icons/material/system/2x/inbox_black_20dp.png) !important} /* Force the black inbox icon */ .afM, .afN, .TN.bzz.aHS-bnt {filter: grayscale(100%)} /* Inbox menu arrow */ .afM, .afN {margin-right: 2px !important} /* Inbox menu arrow position */ .bsU {background-color: #9f9f9f; border-radius:10px; color: #fff !important; height: 19px !important; padding-right:9px; padding-left:9px !important; font-weight:600 !important} /* Unread message number/pill */ .J-KU-, .Jg, .J-KU-, .Jg-Zc, .aj5 {background-color:#F6F6F6 !important} /* Bottom tabs (chat/contacts) */ .aJZ .qj.qr:before {display:none !important} /* Remove 'Categories' icon */ .aJZ .qj.qr:after {display:none !important} /* Remove 'Categories' icon */ .aJZ .aih {display:none !important} /* Remove 'Categories' down arrow */ .aJZ .aii {display:none !important} /* Remove 'Categories' down arrow */ .byl.aJZ.a0L .TN.aY7xie.NEehkc.aHS-bnr {margin-left:-34px !important} /* Categories title position */ .aJZ .TN>.aio .nU a {font-family: roboto !important; line-height: 1 ;letter-spacing: -0.3px; font-weight: 700 !important; font-size: 0.85em !important; color: #010101; opacity: 0.45} /* Categories formatting */ .byl.aJZ.a0L {margin-top: 10px; margin-left: -12px} /* Categories text formatting */ .aJZ .TN>.aio .nU>.n0 {margin-left: 0px !important;} /* Categories position */ .byl.aJZ.a0L .TN.aY7xie.aik.aHS-bnr a {font-family: helvetica !important; color: #000; font-size: 0.95em !important; font-style: normal; opacity: 0.9; font-weight:400 !important; letter-spacing: 0.3px} /* Categories items' text formatting */ .aio .aip {font:inherit !important } /* Categories formatting */ .zw {margin-top: 10px} /* Labels position */ .zw:before {content: "Labels"; font-family: roboto !important; line-height: 2 ;letter-spacing:-0.25px; font-size: 0.85em; font-weight: 700; color: #010101; opacity: 0.45; margin-left:10px} /* Labels section title */ .n6 {margin-top:10px !important; margin-left: -10px !important} /* 'More' section position */ .ait {display: none} /* 'More' section down arrow */ .CJ {visibility: hidden !important} /* Hide the More/Less title */ .n6:before {position:absolute; left: 20px; content: "More"; font-family: roboto !important; line-height: 2 ;letter-spacing:-0.25px !important; font-size: 0.85em; font-weight: 700; color: #010101 !important; opacity: 0.45; z-index: -1} /* More section title */ .J-Ke.n4.ah9.aiu:not(.air):hover:after {position:absolute; right: 0px; content: "Show" !important; font-family: roboto !important; line-height: 2 ;letter-spacing:-0.25px !important; font-size: 0.85em; font-weight: 700; color: #010101 !important; opacity: 0.45; z-index: -1} /* 'Show' label on mouse hover */ .air:hover:after {position:absolute; right: 0px; content: "Hide" !important; font-family: roboto !important; line-height: 2 ;letter-spacing:-0.25px !important; font-size: 0.85em; font-weight: 700; color: #010101 !important; opacity: 0.45; z-index: -1} /* 'Hide' label on mouse hover */ .NQ:hover {background: inherit !important} /* Hover style: remove background on mouse over */ div.ain:hover {background-color: #c4c4c4 !important} /* Hover over for already selected item */ .ah9:hover {background: inherit !important} /* Hover over 'More/Less' */ /* Compose button changes. */ .z0>.L3::before {display:none !important;} /* Compose button image */ .z0>.L3 {text-indent: -9999px !important;} /* Hide the 'Compose' text */ .z0>.L3 {background: none !important; box-shadow: none !important} /* Remove the button border */ .z0>.L3 {position: absolute !important; top: -5px; right: -1px; min-width: 5px !important; min-height: 5px !important; height: 20px !important; border: 1px solid transparent !important;} /* Button sizing */ .z0 {position: absolute; left: 230px; top: -8px; height: 20px !important; width: 20px !important;} /* Re-position the button */ .z0::before {font-size: 1.2em !important; font-weight: 400 !important; color: #808080; content:"+"; margin-left: -5px !important; position: absolute !important} /* New '+' button for new message */ .z0>.L3 {width:99999px; height: 9999px !important; border-radius: 0px !important; top:-99px; right: -9999px} /* Workaround to hide the compose button border in Mojave dark mode */ .z0:hover {height: 15px !important; width: 9px !important; background-color: #9f9f9f; border-radius: 50%; color: #fff !important; top:-5px} /* Compose email highlight on hover */ .z0:hover:before { color: #fff !important} /* Main Gmail message toolbar. */ .G-tF>.G-Ni>.T-I, .nH.aqK {margin-left:6px !important; margin-right:6px !important} /* Reduce spacing of icons (when message is selected) to prevent overlap with search box */ /* Search Box positioning and formatting. */ .nH.w-asV.aiw div > header > div > div * {margin-top: 5px !important} /* Ensures the Mailplane 'Search Everywhere is centred */ .nH.w-asV.aiw * form {height: 30px; border-radius: 10px !important; box-shadow: none !important; top: 75px; left: 400px; width: 500px; } /* Search box size, position, shape and border shadow when selected */ .nH.w-asV.aiw div > header > div > div > div > form > button {margin-top: -8px !important} /* Search box icons */ .nH.w-asV.aiw div > header > div > div > div > form > div {margin-top: -5px !important} /* Search text position */ .nH.w-asV.aiw div > header > div > div > div > form > div > input { font-size: 14px !important; opacity: 0.5 !important; padding: 0px !important; height: 30px} /* Search text formatting */ /* Inbox category tabs. */ .aKh, .aPb {height: 40px !important; filter: grayscale(100%)} /* Remove colours */ .J-KU-Jg-K9 .J-KU .aAy {height: 40px !important} /* Inbox tab height */ .J-KU-KO.aAy:before {height: 1px !important} /* Selected inbox underline */ .aKx>.aKz {font-weight: 500 !important} /* Default font */ .J-KU-KO .aKz {font-weight: 500 !important; color: #000 !important; opacity: 1 !important} /* Selected inbox font */ /* Message list */ .AO {background-color: #fff !important} /* Default background */ .UI, .zA, .yO {background-color: #f4f5f5 !important} /* Default background */ .zA {box-shadow: none !important} /* Border shadow for message under the mouse */ .zA:nth-child(2n) {background-color: #fff !important} /* Alternate row shading */ .zA>.yf {max-width: 25px !important; margin-right: 5px} /* Attachment paperclip icon */ .yO>.xW {opacity: 0.8 !important} /* Date font */ .yO>.xW .zF .bqe, .bq3 {opacity: 0.8 !important} /* Date font for unread message */ .zA>.xW {max-width: 65px !important} /* Date width */ .aeI, .G-atb {box-shadow:none !important} /* Shadow at top of message list */ .y2 {color: #808080 !important} /* Message text preview (after the subject) */ .aeG {display:none} /* Bottom status bar (space used, last activity etc.) */ /* Right side panel (calendar, tasks, extensions etc) */ .nH.bAw.nn {background-color: #fff !important} /* Top right gmail icons: shift left to make room for the Google Apps icon */ .Cr.aqJ {padding-right: 25px !important;} /* Google Apps icon */ .gb_Zc {position: relative !important; top: 60px; right: -25px !important} /* Google Apps pop-up list */ .gb_ba.gb_ca {top:120px;} /* Account icon*/ .gb_cb, .gb_hb.gb_R {display:none} /* Notifications icon */ .gb_7c .gb_b, .gb_7c .gb_ad {display:none} /* Extensions tab icons: move down */ .brC-bsf-aT5-aOt {padding-top: 50px}
