Google Translate: dark theme

Dark theme for google translate.
当前为 2021-05-15 提交的版本，查看最新版本。
换行
/* ==UserStyle==
@name Google Translate: dark theme
@version 1.0.0
@description Dark theme for google translate.
@author Omar Hussein <[email protected]>
@license WTFPL
@preprocessor scss
@namespace https://greasyfork.org/users/772322
==/UserStyle== */
 
@-moz-document url-prefix("https://translate.google.com/*") {
:root {
  --clr-primary: #1a73e8;
  --clr-black: #000000;
  --clr-black-900: #171717;
  --clr-black-800: #202124;
  --clr-black-700: #303237;
  --clr-border: #5f6368;
  --clr-text: #ffffff;
  --clr-text-fade: #cccccc;
  --clr-text-hover-bg: #3f49f2;
  --clr-success: #2e4434;
  --clr-error: #3e2f2d;
  
  
  --clr-primary-rgb: 26, 115, 232;
  --clr-black-900-rgb: 23, 23, 23;
  --clr-black-rgb: 0, 0, 0;
  --clr-border-rgb: 95, 99, 104;
  --clr-success-rgb: 46, 68, 52;
  --clr-error-rgb: 62, 47, 45;
}

// =============== Base =============== //
header, .RvYhPd.Q5Onnd {
  color: var(--clr-text);
  background: var(--clr-black-800);
}

c-wiz.zQTmif.SSPGKf.RvYhPd.BIdYQ.aL9XFd, // body
header, // header
.gb_Dc // Side navbar
{
  background: var(--clr-black-800) !important;
  color: var(--clr-text-fade);
}

// =============== Upper part =============== //
// Navbar
.gb_Td {
  border-bottom: 1px solid rgba(var(--clr-border-rgb), 0.2);
}

// Nav buttons
nav.U0xwnf {
  .Rj2Mlf:not(:disabled) {
    border-color: var(--clr-border);
  }
}

// Upper dark section
.RvYhPd::before {
  background: var(--clr-black-900);
  border-bottom-color: rgba(var(--clr-border-rgb), 0.3);
}


// =============== Translating section =============== //
.OlSOob {
  * { color: var(--clr-text-fade) }
  // Background of translation box
  .ccvoYb {
    background: var(--clr-black-800);
  }
  
  // Fadding thing
  .X4DQ0::after {
    background: linear-gradient(to right,
      rgba(var(--clr-black-900-rgb), 0),
      rgba(var(--clr-black-900-rgb),1))
  }
  
  // Translate-to section
  .OlSOob .P6w8m:not(.Jj6Lae) { background: var(--clr-primary) !important; }
  .J0lOec * { color: var(--clr-text); }

  // On text hover "translate-to"
  .JLqJ4b.C1N51c,
  .JLqJ4b:hover,
  .Xcmxjb.FwR7Pc // On text hover "translate-from"
  {
    background: var(--clr-text-hover-bg);
    border-radius: 3px;
    margin: 0 -3px;
    padding: 0 3px;
  }

  // bottom border for the header
  .aCQag { border-bottom-color: var(--clr-border); }
  
  // Language buttons
  // Not selected
  .VfPpkd-AznF2e-OWXEXe-jJNx8e-QBLLGd {
    &:hover {
      background: var(--clr-black-700);
      .VfPpkd-jY41G-V67aGc {
        color: var(--clr-text-fade);  
      }
      
    }
  }

  // Selected
  .yUUmWd.VfPpkd-AznF2e-OWXEXe-auswjd .VfPpkd-jY41G-V67aGc {
    color: var(--clr-primary);
  }
  
  // Suggesting alternatives
  .DNFg3e {
    background: var(--clr-black-700);
    
    // Options
    .oJweqc {
      border-color: var(--clr-border);
      // Current and hover
      &.KKjvXb { background: var(--clr-black-900); }
      &:not(.KKjvXb):hover { background: var(--clr-black-800); }
    }
  }
  
  // Textarea
  textarea {
    color: var(--clr-text);
  }
  
  // Selecting a language
  c-wiz.bvzp8c {
    background: var(--clr-black-800);
    // Searchbox
    .RstnCb.sG5QRb,
    .KskmCc,
    .RstnCb.nsAj8c
    { background: var(--clr-black-800); }
    // Selected and hover
    .ordo2 {
      &.KKjvXb, &:hover {
        background: var(--clr-black-700);
      }
    }  
  }
  
  // Editing a translation
  .dePhmb {
    // Textarea
    textarea.KHxj8b.tL9Q4c { color: var(--clr-text); }
    // Bottom section
    .jCVEDd { background: rgba(var(--clr-black-rgb), 0.3);}
    
    // Buttons
    .LjDxcd {
      .vvvv, .VfPpkd-vQzf8d { color: var(--clr-primary); }
      &:disabled {
        .VfPpkd-vQzf8d { color: rgba(var(--clr-black-700-rgb), 0.38); }
      } 
    } 
  }
  
  // Gender specific translatinos
  .HVGOKe .G2nOM { color: var(--clr-text); } // Learn more button
  .eyKpYb:not(:last-of-type)::after { border-color: var(--clr-border); } // Translation splitter
}

// Translate section on small screen
@media screen and (min-width: 720px) {
  .OlSOob .P6w8m:not(.Jj6Lae) {
    background: var(--clr-black-900) !important;
  }
}

@media screen and (max-width: 719px) {
  // Edit Buttons
  .OlSOob .dePhmb .LjDxcd {
    .vvvv, .VfPpkd-vQzf8d {
      color: var(--clr-text);
    }
  } 
}

// Share popup
.MmZJl {
  background: var(--clr-black-800);
  .Xc9mqd { border-color: var(--clr-border); }
  * { color: var(--clr-text-fade); }
}

// Verified popup
.BAZ5oe {
  background: var(--clr-black-800) !important;
  .fcuAz {
    color: var(--clr-text);
  }
  .brilXb {
    color: var(--clr-text-fade);
  }
}

// =============== Ttranslating Sugesstions =============== //
// Definitions
.I87fLc.XzOhkf {
  border-color: var(--clr-border);
  background: var(--clr-black-800);

  // Word type
  .eIKIse {
    color: var(--clr-primary);
  }

  // Other meanings on hober
  .kgnlhe.FwR7Pc,
  .MtFg0.FwR7Pc {
    color: var(--clr-text);
    background: var(--clr-black-700);
  }

  // Labels
  .PG9puc {
    padding: 2px 6px;
    background: var(--clr-black-700);
  }
}

// Definitions from selecting word
.jTj8gd.XzOhkf {
  border-color: var(--clr-border);
  // Tables's head and body
  .SMqeCb, .a2Icud { background: var(--clr-black-800) !important; }
  // Borders
  * { border-color: var(--clr-border) !important; }
}

// Suggestions
.KjuTac {
  background: var(--clr-black-800);
  .Bcbxbe {
    border-color: var(--clr-border);
    &.FwR7Pc {
      background: var(--clr-black-700);
    }
  }
}


// =============== Bottom Bottons =============== //
// Bottom buttons
nav.VlPnLc {
  .ySES5 {
    background: var(--clr-800);
    border-color: var(--clr-border);
    .TYVfy {
      color: var(--clr-text-fade);
    }
  }
  .TcXXXb { color: var(--clr-text-fade); }
  // Active buttons
  .myVd4c .ySES5 { background: rgba(var(--clr-primary-rgb), 0.5); border-color: rgba(var(--clr-primary-rgb), 0.5); }
  .myVd4c .TcXXXb { color: var(--clr-primary); }
}

// History, saved and contribute
.GKdr2 {
  background: var(--clr-black-800);

  h1,
  .v9p7kc,
  .EYBmYc,
  .VfPpkd-xl07Ob-XxIAqe ul li,
  .kgJkHd,
  .vxsGZ,
  .HswdMd,
  .mTQVx,
  .EXtLjf,
  .UHM95,
  .T6JUYe,
  .VfPpkd-StrnGf-rymPhb-fpDzbe-fmcmS,
  .VfPpkd-StrnGf-rymPhb-f7MjDc,
  .aWlm2e,
  .JVGQzb,
  .MYwhef,
  .F3tjNb,
  .gsSTTd,
  .umu7kd,
  .cfWmIb:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) .VfPpkd-fmcmS-wGMbrd {
    color: var(--clr-text);
  }
  .VfPpkd-Bz112c-LgbsSe,
  .uqiNJb,
  .j27i7,
  .HYAIUe,
  .nIvUSc,
  .eHilac,
  .pt8wXd,
  .oWkzh,
  .zRANPd,
  .zRANPd:focus,
  .zRANPd:hover,
  .LjDxcd.VfPpkd-ksKsZd-mWPk3d-OWXEXe-AHe6Kc-XpnDCe:not(:disabled),
  .kwsPce:not(:disabled):not(:disabled),
  .CJYaL,
  .qO3kpb,
  .VfPpkd-StrnGf-rymPhb-L8ivfd-fmcmS
  .irVajb,
  .V20pS,
  .Xxlgbc,
  .uZVCx,
  .Z0FhJc:not(:disabled):not(:disabled), .Z0FhJc:focus:not(:disabled):not(:disabled),
  .hPhjlc,
  .ZQPPDf,
  .OM0oI,
  .EUSJcc {
    color: var(--clr-text-fade);
  }
  .kiSRoe {
    background: var(--clr-black-900);
  }
  .AzKM4,
  .DLAnyc,
  .NBY4Kb,
  .j27i7,
  .VfPpkd-xl07Ob-XxIAqe,
  .IQu6Fd,
  .LpQB8e,
  .NdeSHd {
    background: var(--clr-black-800);
  }

  .VfPpkd-xl07Ob-XxIAqe li:hover,
  .kwsPce:not(:disabled):not(:disabled):hover,
  .VfPpkd-WsjYwc,
  .Q2P1Eb:hover,
  .kwsPce:focus:not(:disabled),
  .Z0FhJc:hover:not(:disabled), .Z0FhJc:focus:not(:disabled),
  .dwsGO {
    background: var(--clr-black-700);
  }
  .DLAnyc,
  .AzKM4,
  .NBY4Kb,
  .j27i7,
  .B3AePc,
  .v2OCrb,
  .v2OCrb.Fc1vAd,
  .IQu6Fd,
  .tvua2,
  .VfPpkd-Jh9lGc,
  .B7iGUd,
  .VfPpkd-WsjYwc,
  .LpQB8e,
  .VfPpkd-StrnGf-rymPhb-clz4Ic,
  .LMocwf,
  .W8JDZc,
  .A1HM7c {
    border-color: var(--clr-border);
  }
  .v2OCrb.Fc1vAd,
  .v2OCrb.Fc1vAd:hover,
  .L7ucBe:hover:not(:disabled), .L7ucBe:focus:not(:disabled) {
    
    background: rgba(var(--clr-primary-rgb), 0.2);
  }
  .L7ucBe:hover:not(:disabled) .VfPpkd-Jh9lGc,
  .L7ucBe:focus:not(:disabled) .VfPpkd-Jh9lGc {
    border-color: var(--clr-primary);
  }
  .v9p7kc {
    color: var(--clr-primary);  
  }
  .NdeSHd {
    box-shadow: 0 -1px 3px rgba(var(--clr-black-900-rgb), 0.8);
  }
  
  // Validating buttons
  .OONSBe:hover:not(:disabled),
  .OONSBe:focus:not(:disabled),
  .A7BoT:hover:not(:disabled),
  .A7BoT:focus:not(:disabled) {
    background-color: rgba(var(--clr-error-rgb), 0.5);
  }
  .V1QTub:hover:not(:disabled),
  .V1QTub:focus:not(:disabled),
  .C4h6id:hover:not(:disabled),
  .C4h6id:focus:not(:disabled) {
    background-color: rgba(var(--clr-success-rgb), 0.1);
  }

  // Searchbox on languages you know
  .cfWmIb {
    input.VfPpkd-fmcmS-wGMbrd { color: var(--clr-text); }
    // Border
    &.VfPpkd-fmcmS-yrriRe-OWXEXe-XpnDCe:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) .VfPpkd-NSFCdd-Brv4Fb,
    &.VfPpkd-fmcmS-yrriRe-OWXEXe-XpnDCe:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) .VfPpkd-NSFCdd-Ra9xwd,
    &.VfPpkd-fmcmS-yrriRe-OWXEXe-XpnDCe:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) .VfPpkd-NSFCdd-MpmGFe {
      border-color: var(--clr-primary);
    }
    // Label
    &:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) .VfPpkd-NLUYnc-V67aGc {
      color: var(--clr-text-fade);
    }
    // On hober
    // label
    &:hover:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) .VfPpkd-NLUYnc-V67aGc {
      color: var(--clr-text);
    }
    &:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me):not(.VfPpkd-fmcmS-yrriRe-OWXEXe-XpnDCe):hover .VfPpkd-NSFCdd-i5vt6e .VfPpkd-NSFCdd-Brv4Fb,
    &:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me):not(.VfPpkd-fmcmS-yrriRe-OWXEXe-XpnDCe):hover .VfPpkd-NSFCdd-i5vt6e .VfPpkd-NSFCdd-Ra9xwd,
    &:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me):not(.VfPpkd-fmcmS-yrriRe-OWXEXe-XpnDCe):hover .VfPpkd-NSFCdd-i5vt6e .VfPpkd-NSFCdd-MpmGFe {
      border-color: var(--clr-text);
    }

    // On focus
    &.VfPpkd-fmcmS-yrriRe-OWXEXe-XpnDCe:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) .VfPpkd-NLUYnc-V67aGc {
      color: var(--clr-primary);
    }
  }
}

// Confirming deleting all saved
.cC1eCc .VfPpkd-P5QLlc {
  background: var(--clr-black-800);
  .fp93dc { color: var(--clr-text); }
  .PWcpvc { color: var(--clr-text-fade); }
}

// =============== Menus =============== //
// Account menue
.gb_1a.gb_l {
  background: var(--clr-black-800);
  // Scroll bar
  &::-webkit-scrollbar-thumb {
    background: var(--clr-black-700);
    background-clip: padding-box;
    border: 4px solid transparent;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  
  // Camera icon
  .gb_jb {
    background: var(--clr-black-900);
    .gb_kb {
      &:hover,
      &:focus,
      &:hover:focus {
        background: var(--clr-black-800);  
      }
    }
  }
  
  // Manage accounts button
  .gb_sb.gb_sb {
    background: var(--clr-black-800);
    border-color: var(--clr-border);
    color: var(--clr-text-fade);
  }
  
  // border after manage accounts button
  .gb_Jb {
    border-color: rgba(var(--clr-border-rgb), 0.5);
  }

  // Account buttons
  .gb_Mb {
    // Username
    .gb_1b { color: var(--clr-text); }
    // Email
    .gb_3b { color: var(--clr-text-fade); }
    // Sign in and remove buttons
    .gb_Tb.gb_Vb {
      color: var(--clr-text-fade);
      background: var(--clr-black-700);
      border-color: var(--clr-border);
    }
    .gb_Tb.gb_Ub {
      background: var(--clr-primary);
    }
    
    &:hover,
    &:focus,
    &:hover:focus {
      background: var(--clr-black-700);
    }
  }
  // Add other account
  .gb_wb.gb_Pf {
    color: var(--clr-text-fade);
    background: var(--clr-black-900);
  }
  .gb_Qf.gb_Cb {
    color: var(--clr-text-fade);
    border-color: rgba(var(--clr-border-rgb), 0.5);
    // Sign out button
    .gb_Db {
      color: var(--clr-text-fade);
      background: var(--clr-black-800);
      border-color: var(--clr-border);
      &:hover {
        background: var(--clr-black-700);
      }
    }
  }
  // Policy buttons
  .gb_ub:hover {
    background: var(--clr-black-900);
  }
}


// Remove other apps menu
.gb_Oc { display: none; }
 
}