Skip to content

Gmail Nord Theme by gonlad-x

Details

Authorgonlad-x

LicenseMIT

CategoryGmail

Created

Updated

Size18 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Soothing pastel theme for Last.fm

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name Gmail Nord Theme 
@namespace https://github.com/nordtheme/nord
@homepageURL https://github.com/nordtheme/nord
@version 1.1.9
@supportURL https://github.com/nordtheme/nord
@description Soothing pastel theme for Last.fm
@author Mth
@license MIT

@preprocessor less
@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
==/UserStyle== */

@-moz-document domain("mail.google.com") {
  @media (prefers-color-scheme: light) {
    :root {
      #catppuccin(@lightFlavor, @accentColor);
    }
  }
  @media (prefers-color-scheme: dark) {
    :root {
      #catppuccin(@darkFlavor, @accentColor);
    }
  }

  #catppuccin(@lookup, @accent) {
    @rosewater: @catppuccin[@@lookup][@rosewater];
    @flamingo: @catppuccin[@@lookup][@flamingo];
    @pink: @catppuccin[@@lookup][@pink];
    @mauve: @catppuccin[@@lookup][@mauve];
    @red: @catppuccin[@@lookup][@red];
    @maroon: @catppuccin[@@lookup][@maroon];
    @peach: @catppuccin[@@lookup][@peach];
    @yellow: @catppuccin[@@lookup][@yellow];
    @green: @catppuccin[@@lookup][@green];
    @teal: @catppuccin[@@lookup][@teal];
    @sky: @catppuccin[@@lookup][@sky];
    @sapphire: @catppuccin[@@lookup][@sapphire];
    @blue: @catppuccin[@@lookup][@blue];
    @lavender: @catppuccin[@@lookup][@lavender];
    @text: @catppuccin[@@lookup][@text];
    @subtext1: @catppuccin[@@lookup][@subtext1];
    @subtext0: @catppuccin[@@lookup][@subtext0];
    @overlay2: @catppuccin[@@lookup][@overlay2];
    @overlay1: @catppuccin[@@lookup][@overlay1];
    @overlay0: @catppuccin[@@lookup][@overlay0];
    @surface2: @catppuccin[@@lookup][@surface2];
    @surface1: @catppuccin[@@lookup][@surface1];
    @surface0: @catppuccin[@@lookup][@surface0];
    @base: @catppuccin[@@lookup][@base];
    @mantle: @catppuccin[@@lookup][@mantle];
    @crust: @catppuccin[@@lookup][@crust];
    @accent-color: @catppuccin[@@lookup][@@accent];

    color-scheme: if(@lookup = latte, light, dark);

    ::selection {
      background-color: fade(@accent-color, 30%);
    }

    input,
    textarea {
      &::placeholder {
        color: @subtext0 !important;
      }
    }

    .ZG,
    .boo .aQl > .J-JN-M-I-Jm,
    .boo .aaa > .J-JN-M-I-Jm,
    .boo .ZE > .J-JN-M-I-Jm,
    .bs1 + .bs3,
    .btj + .aD,
    body {
      color: @text !important;
    }

    /* input box */
    .bs0 > .acM,
    .bti > .btg {
      color: @text !important;
    }

    /* quick settings */
    .IU {
      background: @base !important;
      box-shadow: inset 1px 0 0 @mantle !important;
    }
    .Q0,
    .VM .Q5,
    .VM .OG,
    .Q2,
    .bCh,
    .aIY,
    .a21,
    .ST,
    .OB {
      color: @text !important;
    }
    .Tj,
    .OD {
      color: @accent-color !important;
    }

    /* background */
    #loading {
      background: @base !important;
    }
    [style="background:#4285f4"] {
      background: @blue !important;
    }
    [style="background:#34a853"] {
      background: @green !important;
    }
    [style="background:#ea4335"] {
      background: @red !important;
    }
    .la-c.la-l {
      background: darken(@red, 10%);
    }
    .la-c.la-r {
      background: @yellow;
    }

    header,
    .nH.w-asV,
    .bkL,
    .bhZ.bym,
    .bhZ.bjB,
    .bhZ.bym.baA {
      background: @crust !important;
    }

    /* links */
    .aRq {
      color: @sapphire !important;
      &:hover {
        color: @teal !important;
      }
    }

    /* header */
    .aeH,
    .aqK {
      background: @mantle !important;
    }

    /* search */
    .gb_Lc .gb_Ee {
      background: @surface0 !important;
    }
    .gb_Lc .gb_3e,
    .gb_Ee.gb_Fe .gb_Ze,
    .gb_Pc .gb_we {
      color: @text !important;
    }
    .gb_Ee.gb_Fe button svg {
      color: @text !important;
      opacity: 1;
    }
    .aRp {
      background: @surface0 !important;
    }
    .gssb_i {
      background: @surface1 !important;
      color: @text !important;
    }
    .gssb_e,
    .gssb_m {
      background: @surface0 !important;
      color: @text !important;
    }
    /* selected unread email */
    .x7 {
      color: @mantle !important;
      background: @accent-color !important;
    }

    /* checkbox */
    .bzn .G-tF .T-Jo {
      filter: brightness(0) saturate(100%) invert(28%) sepia(17%) saturate(835%)
        hue-rotate(196deg) brightness(150%) contrast(75%);
    }

    /* keyboard dropdown */
    .d-Na-JG-M {
      background-color: @surface1 !important;
    }
    .d-Na-N {
      color: @text !important;
    }
    .d-Na-N-JW {
      background-color: fade(@accent-color, 20%) !important;
    }
    .d-Na-JX-I,
    .d-Na-J3,
    .d-Na-N.d-Na-KO .d-Na-Jo {
      filter: brightness(0) saturate(90%) invert(28%) sepia(17%) saturate(835%)
        hue-rotate(196deg) brightness(250%) contrast(75%);
    }
    .d-Na-axR,
    .RK-Jk.RK-Qq-axH {
      border-color: @overlay0;
    }

    /* virtual keyboard */
    .RK-H {
      background-color: @surface0 !important;
    }
    .RK-QJ {
      color: @text;
    }
    .RK-Jk {
      color: @text !important;
      background-image: linear-gradient(to bottom, @surface1, @surface2);
    }

    /* left bar */
    .CL.Q7:hover,
    .CL.Wj:hover,
    .CL.Q7.NQ,
    .CL.Wj.NQ,
    .TK .TO.nZ:active,
    .TK .TO.ol:active,
    .TK .TO.nZ,
    .TK .TO.ol,
    .byl .TK .nZ.aBP,
    .byl .TK .nZ.aS3,
    .byl .TK .nZ.aS4,
    .byl .TK .nZ.aS5,
    .byl .TK .nZ.aS6 {
      background: @surface0 !important;
    }
    .TO.NQ,
    .n6 .ah9:hover,
    .n6 .ah9.aiu:hover,
    .n6 .ah9:focus,
    .TK .TO:active,
    .n6 .ah9.aiu:active {
      background: @surface1 !important;
    }
    .aAv,
    .TO .nU > .n0,
    .TO.NQ .nU > .n0,
    .TO.nZ .nU > .n0,
    .ah9 > .CJ,
    .n3 > .CL > .CK {
      color: @text !important;
    }
    .h0,
    .Dj {
      color: @subtext0 !important;
    }

    /* right bar */
    .bAw .brC-aT5-aOt-Jw {
      background: @crust !important;
    }
    .brC-aMv-auO .bse-bvF-I.aT5-aOt-I-JW .aT5-aOt-I-JX-atM-J6,
    .brC-aMv-auO .bse-bvF-I.aT5-aOt-I-JO .aT5-aOt-I-JX-atM-J6 {
      background: lighten(@crust, 4%);
    }
    /* inbox area */
    .H2.HD {
      background: @surface0 !important;
      border-color: @surface1 !important;
    }
    .bkK > .nH {
      background: @mantle !important;
    }
    /* inbox item */
    .yO {
      background: @mantle !important;
      &:hover {
        box-shadow:
          inset 1px 0 0 @surface0,
          inset -1px 0 0 @surface0,
          0 0 4px 0 @base,
          0 0 6px 2px @base !important;
      }
    }
    /* quick text */
    .y2 {
      color: @subtext0 !important;
    }
    .aeJ,
    .aRs {
      .J-KU:hover {
        background: @surface0 !important;
      }
      background: @base !important;
      .aRu {
        .aRv {
          color: @subtext0 !important;
        }
        color: @subtext1 !important;
      }
    }
    .aAA.J-KU-Jg-K9 {
      background: @base !important;
    }
    .J-KU-KO.aAy {
      .aKz {
        color: @accent-color !important;
      }
      &::before {
        background: @accent-color !important;
      }
    }
    .aKx > .aKz {
      color: @subtext0 !important;
    }
    .y6,
    .bA4 {
      color: @text !important;
    }
    /* buttons hovers */
    .T-I-JW.amD::before,
    .T-I-JW.adg::before,
    .T-I-JW > .asa::before {
      background: @surface0 !important;
    }

    /* attachements in comfortable mode */
    .brg {
      color: @text !important;
    }

    /* date when the message was sent */
    .yO > .xW {
      color: fade(@text, 50%) !important;
    }
    .bq3 {
      color: @text !important;
    }

    /* unsub button */
    .aJ6 {
      color: @text;
    }
    .aOd.T-I {
      box-shadow: inset 0 0 0 1px fade(@text, 50%) !important;
    }

    /* svgs */
    .gb_Pc svg,
    .gb_Uc.gb_Zc svg,
    .gb_Pc .gb_gd .gb_od,
    .gb_Pc .gb_gd .gb_Oc,
    .gb_Pc .gb_gd .gb_id,
    .gb_Uc.gb_Zc .gb_od {
      color: @text !important;
    }
    /* send one now */
    .x0 {
      color: @text !important;
    }

    /* compose window */
    .afW {
      border-color: @surface1;
    }
    .afV {
      background: @surface2 !important;
      box-shadow: 0 0 0 1px @overlay0 inset;
      color: @text !important;
    }
    .akl,
    .aoT,
    .aYF,
    .agP,
    .az9,
    .gQ {
      color: @text;
    }
    .IZ,
    .agP,
    .agh,
    .gQ,
    .afx {
      background: @surface0 !important;
    }
    .oL,
    .gO {
      color: @subtext0;
    }
    /* message sent dialog */
    .vh {
      color: @text !important;
    }
    /* Gmail logo */
    [src="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x_r5.png"],
    [src="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_dark_1x_r5.png"]
    {
      height: unset !important;
      width: unset !important;
      @svg: escape(
        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="17.727 14.319 30 22.5" width="30" height="22.5"><path fill="@{blue}" d="M19.773 36.819h4.773V25.227l-6.819-5.114v14.659a2.044 2.044 0 0 0 2.045 2.045"/><path fill="@{green}" d="M40.909 36.819h4.773a2.044 2.044 0 0 0 2.045-2.045v-14.66l-6.819 5.114"/><path fill="@{yellow}" d="M40.909 16.364v8.864l6.819-5.114v-2.727c0-2.529-2.888-3.971-4.909-2.455"/><path fill="@{red}" d="M24.545 25.227v-8.863l8.181 6.136 8.181-6.136v8.864l-8.181 6.136m-15-13.977v2.727l6.819 5.114v-8.864l-1.909-1.431c-2.025-1.517-4.91-.075-4.91 2.455"/></svg>'
      );
      content: url("data:image/svg+xml,@{svg}");
    }
    /* x new */
    .aDG {
      background-color: @crust !important;
      color: @text !important;
    }
    .aKs {
      color: @subtext1 !import...

Reviews

No reviews yet.