Soothing pastel theme for DeepL
DeepL Catppuccin by watatomo
Details
Authorwatatomo
LicenseMIT
Categorydeepl
Created
Updated
Size20 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Currently only supports the /translator page. Please report any bugs here.
Has options to remove the header, footer, quotes, and tabs.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name DeepL Catppuccin
@namespace github.com/catppuccin/deepl
@homepageURL https://github.com/catppuccin/deepl
@version 0.1.10
@description Soothing pastel theme for DeepL
@author Catppuccin
@preprocessor stylus
@var select theme "Theme" ["Latte", "Frappe", "Macchiato", "Mocha*"]
@var select accent "Accent" ["Rosewater", "Flamingo", "Pink", "Mauve", "Red", "Maroon", "Peach", "Yellow", "Green", "Teal", "Blue*", "Sapphire", "Sky", "Lavender"]
@var checkbox quotes "Remove Quotes" 0
@var checkbox header "Remove Header" 0
@var checkbox footer "Remove Footer" 0
@var checkbox tabs "Remove Tabs" 0
@var checkbox dictheader "Remove Dictionary Header" 0
@var checkbox removeAds "Remove DeepL Ads" 0
==/UserStyle== */
@-moz-document url-prefix("https://www.deepl.com/translator") {
if (theme == "Latte") {
$rosewater = #dc8a78;
$flamingo = #dd7878;
$pink = #ea76cb;
$mauve = #8839ef;
$red = #d20f39;
$maroon = #e64553;
$peach = #fe640b;
$yellow = #df8e1d;
$green = #40a02b;
$teal = #179299;
$sky = #04a5e5;
$sapphire = #209fb5;
$blue = #1e66f5;
$lavender = #7287fd;
$text = #4c4f69;
$subtext1 = #5c5f77;
$subtext0 = #6c6f85;
$overlay2 = #7c7f93;
$overlay1 = #8c8fa1;
$overlay0 = #9ca0b0;
$surface2 = #acb0be;
$surface1 = #bcc0cc;
$surface0 = #ccd0da;
$base = #eff1f5;
$mantle = #e6e9ef;
$crust = #dce0e8;
} else if (theme=="Frappe") {
$rosewater = #f2d5cf;
$flamingo = #eebebe;
$pink = #f4b8e4;
$mauve = #ca9ee6;
$red = #e78284;
$maroon = #ea999c;
$peach = #ef9f76;
$yellow = #e5c890;
$green = #a6d189;
$teal = #81c8be;
$sky = #99d1db;
$sapphire = #85c1dc;
$blue = #8caaee;
$lavender = #babbf1;
$text = #c6d0f5;
$subtext1 = #b5bfe2;
$subtext0 = #a5adce;
$overlay2 = #949cbb;
$overlay1 = #838ba7;
$overlay0 = #737994;
$surface2 = #626880;
$surface1 = #51576d;
$surface0 = #414559;
$base = #303446;
$mantle = #292c3c;
$crust = #232634;
} else if (theme=="Macchiato") {
$rosewater = #f4dbd6;
$flamingo = #f0c6c6;
$pink = #f5bde6;
$mauve = #c6a0f6;
$red = #ed8796;
$maroon = #ee99a0;
$peach = #f5a97f;
$yellow = #eed49f;
$green = #a6da95;
$teal = #8bd5ca;
$sky = #91d7e3;
$sapphire = #7dc4e4;
$blue = #8aadf4;
$lavender = #b7bdf8;
$text = #cad3f5;
$subtext1 = #b8c0e0;
$subtext0 = #a5adcb;
$overlay2 = #939ab7;
$overlay1 = #8087a2;
$overlay0 = #6e738d;
$surface2 = #5b6078;
$surface1 = #494d64;
$surface0 = #363a4f;
$base = #24273a;
$mantle = #1e2030;
$crust = #181926;
} else if (theme=="Mocha") {
$rosewater = #f5e0dc;
$flamingo = #f2cdcd;
$pink = #f5c2e7;
$mauve = #cba6f7;
$red = #f38ba8;
$maroon = #eba0ac;
$peach = #fab387;
$yellow = #f9e2af;
$green = #a6e3a1;
$teal = #94e2d5;
$sky = #89dceb;
$sapphire = #74c7ec;
$lavender = #b4befe;
$blue = #89b4fa;
$text = #cdd6f4;
$subtext1 = #bac2de;
$subtext0 = #a6adc8;
$overlay2 = #9399b2;
$overlay1 = #7f849c;
$overlay0 = #6c7086;
$surface2 = #585b70;
$surface1 = #45475a;
$surface0 = #313244;
$base = #1e1e2e;
$mantle = #181825;
$crust = #11111b;
}
if (accent == "Rosewater") {
$accent = $rosewater
} else if (accent == "Flamingo") {
$accent = $flamingo
} else if (accent == "Pink") {
$accent = $pink
} else if (accent == "Mauve") {
$accent = $mauve
} else if (accent == "Red") {
$accent = $red
} else if (accent == "Maroon") {
$accent = $maroon
} else if (accent == "Peach") {
$accent = $peach
} else if (accent == "Yellow") {
$accent = $yellow
} else if (accent == "Green") {
$accent = $green
} else if (accent == "Teal") {
$accent = $teal
} else if (accent == "Blue") {
$accent = $blue
} else if (accent == "Sapphire") {
$accent = $sapphire
} else if (accent == "Sky") {
$accent = $sky
} else if (accent == "Lavender") {
$accent = $lavender
}
$accent2 = mix($accent, $text, 60%);
.dl_body {
color: $subtext1;
}
button {
color: $text;
}
.text-deepl-blue {
color: $accent2;
}
.text-deprecated-grey-darker {
color: $subtext1;
}
.bg-white {
background-color: $base;
}
.border-dark-7 {
border-color: $surface1;
}
.dl_body--redesign {
background-color: $mantle !important;
}
[class*="button--"][class*="color_primary--"] {
border-color: $accent2;
background-color: $accent2;
color: $accent2;
}
[class*="button--"][class*="variant_contained--"],
.dark [class*="button--"][class*="variant_contained--"] {
color: theme is "Latte" ? $base: $crust;
}
[class*="button--"].variant_text--gozza,
.dark [class*="button--"].variant_text--gozza {
background-color: transparent;
}
/////
.eSEOtericText {
color: $overlay1;
}
.dl_header {
&,
&::before {
background-color: $crust !important;
}
}
.dl_header_menu_v2__links__item {
&,
&:visited,
&:active,
&:focus {
color: $accent2;
}
}
.dl_headerMenu__proButton {
background-color: $accent;
color: theme is "Latte" ? $base: $crust;
&:hover {
background-color: darken($accent, 30%);
color: theme is "Latte" ? $base: $crust;
}
}
.dl_header_menu_v2__login_button_simple > button {
color: $accent2;
&:hover {
color: $accent;
}
}
.dl_header_menu_v2__buttons__menu > button {
&::before,
&::after {
color: $accent2;
}
&:hover {
&::before,
&::after {
color: $accent;
}
}
}
.dl_headerMenu__freeBadge,
.dl_headerMenu__alphaBadge {
background-color: spin($accent, -40deg);
color: theme is "Latte" ? $base: $crust;
}
.dl_header_menu_v2__links__item.dl_translator_link:not(.nohover):hover {
color: $accent;
}
.dl_header_menu_v2__links__item:not(.nohover):hover,
.dl_header_menu_v2__links__item.is-active {
border-bottom-color: $accent;
color: $accent;
}
#new-menu-container {
[class^="menuContainer--"] {
background-color: $base;
}
[class^="container--"] a {
color: $text;
&:hover {
color: $accent;
}
}
[class^="mainContent--"] + [class^="mainContent--"] {
border-top-color: $surface1;
}
[class^="closeButton"] {
&::before,
&::after {
background-color: $subtext0;
}
&:hover {
&::before,
&::after {
background-color: $accent;
}
}
}
}
/////
.lmt__docTrans-tab-container {
[class^="cardButton--"] {
background-color: $base;
border-color: $surface1;
&:not([class*="active--"]):hover {
background-color: $surface0;
}
}
[class^="textLower--"] {
color: $overlay2;
}
[class*="logo"],
[class^="textUpper--"] {
color: $accent;
}
[class*="active--"] {
[class*="logo"],
[class^="textUpper--"] {
color: $text;
}
[class^="innerLower--"] {
background-color: $accent;
}
}
}
.lmt--web .lmt__sides_container,
#doc-trans-source-panel,
#doc-trans-target-panel {
border-color: $surface1;
}
.integratedLanguageSelectors .lmt--web .lmt__sides_container .lmt__language_container,
.dl_body--redesign .lmt--web .lmt__textarea_container,
.lmt__doc .lmt__language_container #doc-trans-source-panel,
[class^="docTrans__help_popup--"],
#doc-trans-target-panel {
background: $base;
}
#doc-trans-source-panel,
#doc-trans-target-panel {
[class^="header--"] {
border-bottom-color: $surface2;
}
}
.dl_help-popup_assist-text {
color: $overlay1;
}
.dl_body--redesign .lmt--web .lmt__language_select .lmt__language_select__active {
color: $subtext0;
}
.lmt--web .lmt__language_select > .lmt__language_select__active {
strong {
color: $accent2;
}
&:hover {
strong,
.lmt__language_select__opener {
color: $accent;
}
}
}
.lmt--web .lmt__textarea {
&,
textarea {
color: $text;
}
}
.integratedLanguageSelectors .lmt--web .lmt...