Google Translate Dark by WgetCloud

/* ==UserStyle==
@name           Google Translate Dark
@namespace      github.com/openstyles/stylus
@version        1.1.8.0
==/UserStyle== */
@-moz-document domain("translate.google.com") {
  :root {
    --rgb255: 255, 255, 255;
    --rgb210: 210, 227, 252;
    --bg-b: #202124;
    --bg: var(--bg-b);
    --bg-g: rgba(var(--rgb210), 0.246);
    --bg-gd: rgb(77, 82, 90);
    --bg-g1: rgba(var(--rgb210), 0.1);
    --bg-g3: rgba(var(--rgb210), 0.36);
    --cl: #bdc1c6;
    --cl-bd: rgba(var(--rgb255), .12);
    --cl-bd-mid: rgba(var(--rgb255), .2);
    --cl-bd-deep: rgba(var(--rgb255), .3);
    --hd: #ddd;
    --hl: #eee;
    --hl-bg: 218, 220, 224;
    --hl-bg-1: rgba(var(--hl-bg), 0.15);
    --hl-bg-3: rgba(var(--hl-bg), 0.3);
    --hl-bg-6: rgba(var(--hl-bg), 0.6);
    --bd-1px: 1px solid;
    --bd: var(--bd-1px) var(--cl-bd);
    --bd-mid: var(--bd-1px) var(--cl-bd-mid);
    --bd-1ch: 1ch solid;
    --bd-ch: var(--bd-1ch) var(--cl-bd);
    --bd-side-cl: #fff4;
    --bd-cl: var(--bd-side-cl);
    --bd-r: 4pt;
  }

  body *:not(nav button *):not(nav button):not(button div:empty):not(div:empty):not(span:hover:not([data-sl]:not([data-tl]))):not(span:last-child:not([data-sl])):not(button:hover span):not([data-language-code]:hover, [data-language-code]:hover>*):not([data-alternative-index]:hover):not([data-alternative-index]:hover *):not(#google-hats-survey, sc-survey-survey-manager *):not(.KKjvXb, .KKjvXb *, .FwR7Pc, .FwR7Pc[aria-selected=true] > *, .l7O9Dc *, .j7bWb, .U8K5nb, .Ufn6O *, .RiZzuc *, label.CQQi5b, .PsfnLc:hover):not(.ita-kd-img, .ita-hwt-candidate:hover, .ita-kd-menuitem, .ita-kd-menuitem *, #kbd, #kbd *):not(header [role=navigation] c-wiz a[tabindex]:hover) {
    background-color: var(--bg-b) !important;
    color: var(--cl) !important;
  }

  c-wiz c-wiz c-wiz > div > div > c-wiz > div > c-wiz > div > div > div {
    background: unset !important;
  }

  nav::after,
  c-wiz c-wiz c-wiz > div > div > c-wiz > div > c-wiz > div > div::after,
  .X4DQ0::after {
    background: linear-gradient(to right, transparent, var(--bg-b)) !important;
  }

  c-wiz > div > div > c-wiz > div > c-wiz > div > div > div > c-wiz > span > span[soy-skip] > div > div:nth-of-type(3) {
    z-index: 2;
  }

  c-wiz > div > div > c-wiz > div > c-wiz > div > div > div > c-wiz > span > span[soy-skip] > div > div:nth-of-type(3):empty {
    z-index: unset;
  }

  c-wiz > div > div > c-wiz > div > c-wiz > div > div > div > c-wiz > span > span[soy-skip] > div > div > span:last-child,
  c-wiz c-wiz c-wiz c-wiz > div > div > div > div > span > span > span:hover,
  button:hover > span:last-of-type:not(.vk-cap),
  [data-language-code]:not([role=contentinfo]):hover,
  [data-language-code][role=contentinfo] > div > a:hover,
  .FwR7Pc {
    background-color: var(--bg-g) !important;
    color: var(--cl) !important;
  }
  .FwR7Pc[aria-selected=true] > * {
    background-color: var(--bg-gd);
    color: var(--cl);
  }

  c-wiz > div > div > c-wiz > div > c-wiz > div > div > c-wiz > div > c-wiz > div > div > div > div > div > span > button > span > span,
  nav button span,
  button:hover span:not(.vk-cap),
  c-wiz c-wiz c-wiz c-wiz h3 > span,
  .WtlSJf :not(svg),
  .l7O9Dc :not(i:first-child),
  .j7bWb,
  .Ufn6O input[type=url],
  .VfPpkd-jY41G-V67aGc,
  .yP8PRe {
    color: var(--cl) !important;
  }

  [data-alternative-index]:hover {
    background-color: rgba(241, 243, 244, .15);
  }

  [data-alternative-index]:hover * {
    background-color: unset !important;
    color: var(--cl) !important;
  }




  /* (no other better selector:) */
  .L780X::after {
    background-color: var(--bg);
  }

  .WtlSJf.KKjvXb {
    background-color: rgba(232, 240, 254, 0.2);
  }

  .Pt010b,
  .Pt010b :is(.a2Icud, .Sp3AF),
  .ZShpvc {
    border: var(--bd);
  }

  .PsfnLc,
  .I87fLc.XzOhkf {
    border: var(--bd-mid);
  }

  .PsfnLc:hover {
    color: var(--hd);
    background-color: var(--hl-bg-1);
  }

  .aGJE1b,
  .Mh0NNb,
  .M6tHv {
    border-radius: 12px;
  }
  .aGJE1b {
    filter: drop-shadow(0 4px 8px var(--cl-bd-mid)) drop-shadow(0 1px 3px var(--cl-bd-deep));
  }
  .Mh0NNb {
    box-shadow: 0px 6px 10px 0px var(--cl-bd), 0px 1px 18px 0px var(--cl-bd-deep), 0px 3px 5px -1px var(--cl-bd);
  }

  .B2mKhd {
    box-shadow: 0px 2px 2px 0px var(--cl-bd), 0px 3px 1px -2px var(--cl-bd), 0px 1px 5px 0px var(--cl-bd-mid);
  }

  .NWlwsb {
    box-shadow: 0 2px 2px var(--cl-bd-mid);
  }

  .KxqJZ:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) .VfPpkd-fmcmS-wGMbrd {
    color: currentColor;
    caret-color: currentcolor;
  }

  .g88Dnc > .xGNEbb > .VfPpkd-I9GLp-yrriRe > .VfPpkd-GCYh9b:hover > input[type=radio]:not(:enabled:checked) + .VfPpkd-RsCWK > .VfPpkd-wVo5xe-LkdAo {
    border-color: var(--hl-bg-6);
  }

  @media screen and (min-width: 1280px) {
    body:not(.bTweAe) .ccvoYb.EjH7wc,
    body:not(.bTweAe) .ccvoYb:not(.EjH7wc) {
      box-shadow: 0 1px 4px 0 rgba(var(--rgb255), .37);
    }
  }

  @media screen and (min-width: 720px) {
    body:not(.bTweAe) .ccvoYb.EjH7wc,
    body:not(.bTweAe) .ccvoYb:not(.EjH7wc) {
      box-shadow: 0 2px 2px rgba(var(--rgb255), .22);
    }

    body:not(.bTweAe) .QcsUad {
      border-left: var(--bd);
    }

    .jCAhz:hover {
      background-color: transparent !important;
    }

    .OPPzxe > c-wiz {
      border-color: rgba(var(--rgb255), .3) !important;
    }
  }

  @media screen and (max-width: 736px) {
    .QcsUad.BDJ8fb:not(.Jj6Lae),
    .rm1UF.UnxENd.dHeVVb {
      border-top: var(--bd-ch);
    }
  }


  /* Override some styles that appeared in 2023/10 */
  .yP8PRe {
    z-index: 0;
  }
  .VfPpkd-xl07Ob .VfPpkd-StrnGf-rymPhb::before,
  .VfPpkd-xl07Ob .VfPpkd-rymPhb::before {
    border-color: var(--bd-cl);
    z-index: 1;
    border-radius: var(--bd-r);
  }
  .jCAhz:hover {
    background-color: unset;
  }
  .qSb8Pe {
    color: unset;
  }




  /* more corner detail */
  canvas.ita-hwt-canvas {
    cursor: cell;
  }

  .ita-hwt-jfk-standard,
  .ita-hwt-jfk-standard:hover {
    background-image: linear-gradient(to bottom, var(--bg-g), var(--bg));
  }

  .ita-hwt-candidate:hover {
    background-color: var(--bg-g1);
    color: var(--cl);
  }
  .ita-kd-menuitem,
  .ita-kd-menuitem * {
    color: var(--cl);
  }
  .ita-kd-menuitem-hover {
    background-color: var(--bg-gd) !important;
  }

  .ita-kd-img,
  .ita-kd-checkbox {
    filter: invert(0.92);
  }
  .ita-kd-img:not(.ita-kd-menuitem-hover .ita-kd-img),
  .ita-kd-checkbox:not(.ita-kd-menuitem-hover .ita-kd-checkbox) {
    background-color: var(--cl-bd-deep);
  }

  .ita-kd-dropdown-menu {
    border-color: var(--bd-cl);
  }


  #kbd {
    background-color: #3d3d3d;
  }

  #kbd button {
    background-image: linear-gradient(#252525, #252525);
    color: var(--hd);
    border-radius: var(--bd-r);
    border-color: transparent;
    box-shadow: 0 0 1pt rgba(var(--rgb255), 0.6);
  }

  #kbd button:hover {
    color: var(--hl);
    box-shadow: 0 0 5pt rgba(var(--rgb255), 0.6);
  }


  #kbd button > span.ita-kd-img {
    background-color: var(--cl-bd-deep);
    filter: invert(0.92);
  }




  /* 2023-07-30 translate.google.com/details */
  .GAyS9e {
    background: linear-gradient(to right, transparent, #0a0a0a2b);
  }

  .S6GkK {
    color: var(--cl);
  }

  .U8K5nb {
    color: var(--cl);
    background: var(--hl-bg-1);
  }

  .U8K5nb:hover {
    color: var(--hl);
    background: var(--hl-bg-3);
  }

  .jq25U:hover {
    color: var(--cl);
  }

  .hX7wnb,
  ol > [role=listitem] {
    border-top-color: var(--bd-side-cl);
  }
  .HHrMdc {
    border-right-color: var(--bd-side-cl);
  }

  @supports (container-name:foo) {
    @container view-body (min-width: 0) and (max-width: 719px) {
      .HwtZe::selection, .ryNqvb::selection {
        background-color: var(--bg-g3);
      }
    }
  }
}