├── .editorconfig ├── .gitattributes ├── LICENSE ├── README.md ├── assets ├── .gitkeep └── sample.png └── catppuccin.user.css /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # EditorConfig is awesome: https://EditorConfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | charset = utf-8 9 | indent_size = 2 10 | indent_style = space 11 | end_of_line = lf 12 | insert_final_newline = true 13 | trim_trailing_whitespace = true 14 | 15 | # go 16 | [*.go] 17 | indent_style = tab 18 | indent_size = 4 19 | 20 | # python 21 | [*.{ini,py,py.tpl,rst}] 22 | indent_size = 4 23 | 24 | # rust 25 | [*.rs] 26 | indent_size = 4 27 | 28 | # documentation, utils 29 | [*.{md,mdx,diff}] 30 | trim_trailing_whitespace = false 31 | 32 | # windows shell scripts 33 | [*.{cmd,bat,ps1}] 34 | end_of_line = crlf 35 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Catppuccin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 🚧 This repository has moved to [catppuccin/userstyles](https://github.com/catppuccin/userstyles/tree/main/styles/deepl) 🚧 2 | 3 |

4 |

Copyright © 2021-present Catppuccin Org 5 | -------------------------------------------------------------------------------- /assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/deepl/ffaaaf224a07e69b96616121343b8c0018269ccb/assets/.gitkeep -------------------------------------------------------------------------------- /assets/sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/deepl/ffaaaf224a07e69b96616121343b8c0018269ccb/assets/sample.png -------------------------------------------------------------------------------- /catppuccin.user.css: -------------------------------------------------------------------------------- 1 | /* ==UserStyle== 2 | @name DeepL Catppuccin 3 | @namespace github.com/catppuccin/deepl 4 | @homepageURL https://github.com/catppuccin/deepl 5 | @version 0.2.0 6 | @description Soothing pastel theme for DeepL 7 | @author Catppuccin 8 | @updateURL https://github.com/catppuccin/deepl/raw/main/catppuccin.user.css 9 | @preprocessor stylus 10 | 11 | @var select theme "Theme" ["Latte", "Frappe", "Macchiato", "Mocha*"] 12 | @var select accent "Accent" ["Rosewater", "Flamingo", "Pink", "Mauve", "Red", "Maroon", "Peach", "Yellow", "Green", "Teal", "Blue*", "Sapphire", "Sky", "Lavender"] 13 | 14 | @var checkbox quotes "Remove Quotes" 0 15 | @var checkbox header "Remove Header" 0 16 | @var checkbox footer "Remove Footer" 0 17 | @var checkbox tabs "Remove Tabs" 0 18 | @var checkbox dictionary "Remove Dictionary" 0 19 | @var checkbox removeAds "Remove DeepL Ads" 0 20 | @var checkbox removeGlossaryButton "Remove Glossary Button" 0 21 | ==/UserStyle== */ 22 | @-moz-document url-prefix("https://www.deepl.com/translator") { 23 | if (theme == "Latte") { 24 | $rosewater = #dc8a78; 25 | $flamingo = #dd7878; 26 | $pink = #ea76cb; 27 | $mauve = #8839ef; 28 | $red = #d20f39; 29 | $maroon = #e64553; 30 | $peach = #fe640b; 31 | $yellow = #df8e1d; 32 | $green = #40a02b; 33 | $teal = #179299; 34 | $sky = #04a5e5; 35 | $sapphire = #209fb5; 36 | $blue = #1e66f5; 37 | $lavender = #7287fd; 38 | $text = #4c4f69; 39 | $subtext1 = #5c5f77; 40 | $subtext0 = #6c6f85; 41 | $overlay2 = #7c7f93; 42 | $overlay1 = #8c8fa1; 43 | $overlay0 = #9ca0b0; 44 | $surface2 = #acb0be; 45 | $surface1 = #bcc0cc; 46 | $surface0 = #ccd0da; 47 | $base = #eff1f5; 48 | $mantle = #e6e9ef; 49 | $crust = #dce0e8; 50 | } else if (theme=="Frappe") { 51 | $rosewater = #f2d5cf; 52 | $flamingo = #eebebe; 53 | $pink = #f4b8e4; 54 | $mauve = #ca9ee6; 55 | $red = #e78284; 56 | $maroon = #ea999c; 57 | $peach = #ef9f76; 58 | $yellow = #e5c890; 59 | $green = #a6d189; 60 | $teal = #81c8be; 61 | $sky = #99d1db; 62 | $sapphire = #85c1dc; 63 | $blue = #8caaee; 64 | $lavender = #babbf1; 65 | $text = #c6d0f5; 66 | $subtext1 = #b5bfe2; 67 | $subtext0 = #a5adce; 68 | $overlay2 = #949cbb; 69 | $overlay1 = #838ba7; 70 | $overlay0 = #737994; 71 | $surface2 = #626880; 72 | $surface1 = #51576d; 73 | $surface0 = #414559; 74 | $base = #303446; 75 | $mantle = #292c3c; 76 | $crust = #232634; 77 | } else if (theme=="Macchiato") { 78 | $rosewater = #f4dbd6; 79 | $flamingo = #f0c6c6; 80 | $pink = #f5bde6; 81 | $mauve = #c6a0f6; 82 | $red = #ed8796; 83 | $maroon = #ee99a0; 84 | $peach = #f5a97f; 85 | $yellow = #eed49f; 86 | $green = #a6da95; 87 | $teal = #8bd5ca; 88 | $sky = #91d7e3; 89 | $sapphire = #7dc4e4; 90 | $blue = #8aadf4; 91 | $lavender = #b7bdf8; 92 | $text = #cad3f5; 93 | $subtext1 = #b8c0e0; 94 | $subtext0 = #a5adcb; 95 | $overlay2 = #939ab7; 96 | $overlay1 = #8087a2; 97 | $overlay0 = #6e738d; 98 | $surface2 = #5b6078; 99 | $surface1 = #494d64; 100 | $surface0 = #363a4f; 101 | $base = #24273a; 102 | $mantle = #1e2030; 103 | $crust = #181926; 104 | } else if (theme=="Mocha") { 105 | $rosewater = #f5e0dc; 106 | $flamingo = #f2cdcd; 107 | $pink = #f5c2e7; 108 | $mauve = #cba6f7; 109 | $red = #f38ba8; 110 | $maroon = #eba0ac; 111 | $peach = #fab387; 112 | $yellow = #f9e2af; 113 | $green = #a6e3a1; 114 | $teal = #94e2d5; 115 | $sky = #89dceb; 116 | $sapphire = #74c7ec; 117 | $lavender = #b4befe; 118 | $blue = #89b4fa; 119 | $text = #cdd6f4; 120 | $subtext1 = #bac2de; 121 | $subtext0 = #a6adc8; 122 | $overlay2 = #9399b2; 123 | $overlay1 = #7f849c; 124 | $overlay0 = #6c7086; 125 | $surface2 = #585b70; 126 | $surface1 = #45475a; 127 | $surface0 = #313244; 128 | $base = #1e1e2e; 129 | $mantle = #181825; 130 | $crust = #11111b; 131 | } 132 | 133 | if (accent == "Rosewater") { 134 | $accent = $rosewater 135 | } else if (accent == "Flamingo") { 136 | $accent = $flamingo 137 | } else if (accent == "Pink") { 138 | $accent = $pink 139 | } else if (accent == "Mauve") { 140 | $accent = $mauve 141 | } else if (accent == "Red") { 142 | $accent = $red 143 | } else if (accent == "Maroon") { 144 | $accent = $maroon 145 | } else if (accent == "Peach") { 146 | $accent = $peach 147 | } else if (accent == "Yellow") { 148 | $accent = $yellow 149 | } else if (accent == "Green") { 150 | $accent = $green 151 | } else if (accent == "Teal") { 152 | $accent = $teal 153 | } else if (accent == "Blue") { 154 | $accent = $blue 155 | } else if (accent == "Sapphire") { 156 | $accent = $sapphire 157 | } else if (accent == "Sky") { 158 | $accent = $sky 159 | } else if (accent == "Lavender") { 160 | $accent = $lavender 161 | } 162 | 163 | $accent2 = mix($accent, $text, 60%); 164 | 165 | .dl_body { 166 | color: $subtext1; 167 | } 168 | 169 | button { 170 | color: $text; 171 | } 172 | 173 | [class*="label--"] { 174 | --inlineLabelColor: theme is "Latte" ? #fff : $crust; 175 | --outline-color: $accent; 176 | --background: $overlay1; 177 | --backgroundHover: mix($overlay1, $base, 90%); 178 | 179 | &[class*="selected--"] { 180 | --background: $green; 181 | --backgroundHover: mix($green, $base, 90%); 182 | } 183 | 184 | [class^="toggle--"] { 185 | [class^="knob--"] { 186 | background: theme is "Latte" ? #fff : $crust; 187 | } 188 | } 189 | } 190 | 191 | [class^="wrapper--"] { 192 | --input-background: $base; 193 | --input-border-color: $surface1; 194 | --input-color: $subtext1; 195 | --button-background: $base; 196 | --button-border-color: $surface1; 197 | --button-color: $subtext1; 198 | 199 | [class^="flyout--"] { 200 | --option-color: $subtext1; 201 | --option-icon-color: $accent; 202 | background: $surface0; 203 | 204 | [class^="option--"][class*="unavilable--"] { 205 | --option-color: $overlay1; 206 | --option-icon-color: $subtext0; 207 | } 208 | 209 | &[class*="withBorderOnFlyout--"] { 210 | --border: 1px solid $surface2; 211 | } 212 | } 213 | } 214 | 215 | [class^="form--"] { 216 | [class^="submit--"] { 217 | color: theme is "Latte" ? $base: $crust; 218 | background: $accent2; 219 | 220 | &:disabled { 221 | background: alpha($accent2, 0.5); 222 | } 223 | } 224 | } 225 | 226 | .text-deepl-blue { 227 | color: $accent2; 228 | } 229 | 230 | .text-deprecated-grey-darker { 231 | color: $subtext1; 232 | } 233 | 234 | .bg-white { 235 | background-color: $base; 236 | } 237 | 238 | .border-dark-7 { 239 | border-color: $surface1; 240 | } 241 | 242 | .dl_body--redesign { 243 | background-color: $mantle !important; 244 | } 245 | 246 | [class*="button--"][class*="color_primary--"] { 247 | border-color: $accent2; 248 | background-color: $accent2; 249 | color: $accent2; 250 | } 251 | 252 | [class*="button--"][class*="variant_contained--"], 253 | .dark [class*="button--"][class*="variant_contained--"] { 254 | color: theme is "Latte" ? #fff : $crust; 255 | } 256 | 257 | [class*="button--"].variant_text--gozza, 258 | .dark [class*="button--"].variant_text--gozza { 259 | background-color: transparent; 260 | } 261 | 262 | ///// 263 | 264 | .eSEOtericText { 265 | color: $overlay1; 266 | } 267 | 268 | .dl_header { 269 | &, 270 | &::before { 271 | background-color: $crust !important; 272 | } 273 | } 274 | 275 | .dl_header_menu_v2__links__item { 276 | &, 277 | &:visited, 278 | &:active, 279 | &:focus { 280 | color: $accent2; 281 | } 282 | } 283 | 284 | .dl_headerMenu__proButton { 285 | background-color: $accent; 286 | color: theme is "Latte" ? #fff : $crust; 287 | 288 | &:hover { 289 | background-color: darken($accent, 30%); 290 | color: theme is "Latte" ? #fff : $crust; 291 | } 292 | } 293 | 294 | .dl_header_menu_v2__login_button_simple > button { 295 | color: $accent2; 296 | 297 | &:hover { 298 | color: $accent; 299 | } 300 | } 301 | 302 | .dl_header_menu_v2__buttons__menu > button { 303 | &::before, 304 | &::after { 305 | color: $accent2; 306 | } 307 | 308 | &:hover { 309 | &::before, 310 | &::after { 311 | color: $accent; 312 | } 313 | } 314 | } 315 | 316 | .dl_headerMenu__freeBadge, 317 | .dl_headerMenu__alphaBadge { 318 | background-color: spin($accent, -40deg); 319 | color: theme is "Latte" ? #fff : $crust; 320 | } 321 | 322 | .dl_header_menu_v2__links__item.dl_translator_link:not(.nohover):hover { 323 | color: $accent; 324 | } 325 | 326 | .dl_header_menu_v2__links__item:not(.nohover):hover, 327 | .dl_header_menu_v2__links__item.is-active { 328 | border-bottom-color: $accent; 329 | color: $accent; 330 | } 331 | 332 | #new-menu-container { 333 | [class^="menuContainer--"] { 334 | background-color: $base; 335 | } 336 | 337 | [class^="container--"] a { 338 | color: $text; 339 | 340 | &:hover { 341 | color: $accent; 342 | } 343 | } 344 | 345 | [class^="mainContent--"] + [class^="mainContent--"] { 346 | border-top-color: $surface1; 347 | } 348 | 349 | [class^="closeButton"] { 350 | &::before, 351 | &::after { 352 | background-color: $subtext0; 353 | } 354 | 355 | &:hover { 356 | &::before, 357 | &::after { 358 | background-color: $accent; 359 | } 360 | } 361 | } 362 | } 363 | 364 | ///// 365 | 366 | .lmt--web .lmt__language_container .lmt__language_container_switch:hover, 367 | .lmt--web .lmt__language_container .lmt__language_container_switch:focus { 368 | color: $accent; 369 | } 370 | 371 | .lmt__docTrans-tab-container { 372 | [class^="cardButton--"] { 373 | background-color: $base; 374 | border-color: $surface1; 375 | 376 | &:not([class*="active--"]):hover { 377 | background-color: $surface0; 378 | } 379 | } 380 | 381 | [class^="textLower--"] { 382 | color: $overlay2; 383 | } 384 | 385 | [class*="logo"], 386 | [class^="textUpper--"] { 387 | color: $accent; 388 | } 389 | 390 | [class*="active--"] { 391 | [class*="logo"], 392 | [class^="textUpper--"] { 393 | color: $text; 394 | } 395 | 396 | [class^="innerLower--"] { 397 | background-color: $accent; 398 | } 399 | } 400 | } 401 | 402 | .lmt--web .lmt__sides_container, 403 | #doc-trans-source-panel, 404 | #doc-trans-target-panel { 405 | border-color: $surface1; 406 | } 407 | 408 | .integratedLanguageSelectors .lmt--web .lmt__sides_container .lmt__language_container, 409 | .dl_body--redesign .lmt--web .lmt__textarea_container, 410 | .lmt__doc .lmt__language_container #doc-trans-source-panel, 411 | [class^="docTrans__help_popup--"], 412 | #doc-trans-target-panel { 413 | background: $base; 414 | } 415 | 416 | #doc-trans-source-panel, 417 | #doc-trans-target-panel { 418 | [class^="header--"] { 419 | border-bottom-color: $surface2; 420 | } 421 | } 422 | 423 | .dl_help-popup_assist-text { 424 | color: $overlay1; 425 | } 426 | 427 | .dl_body--redesign .lmt--web .lmt__language_select .lmt__language_select__active { 428 | color: $subtext0; 429 | } 430 | 431 | .lmt--web .lmt__language_select > .lmt__language_select__active { 432 | strong { 433 | color: $accent2; 434 | } 435 | 436 | &:hover { 437 | strong, 438 | .lmt__language_select__opener { 439 | color: $accent; 440 | } 441 | } 442 | } 443 | 444 | .lmt--web .lmt__textarea { 445 | &, 446 | textarea { 447 | color: $text; 448 | } 449 | } 450 | 451 | .lmt--web .lmt__textarea_placeholder_text { 452 | color: $subtext0; 453 | } 454 | 455 | .dl_body--redesign .lmt--web .lmt__source_textarea__length_marker { 456 | color: $subtext0; 457 | } 458 | 459 | .lmt--web .lmt__textarea.lmt__textarea--inactive { 460 | color: $overlay2 !important; 461 | } 462 | 463 | .lmt__source_textarea_overlay .lmt__source_textarea_overlay__sentence--active { 464 | color: $accent2; 465 | background-color: $base; 466 | } 467 | 468 | .integratedLanguageSelectors .lmt--web .lmt__sides_container .lmt__side_container.lmt__side_container--source .lmt__textarea_container { 469 | border-right-color: $surface1; 470 | border-top-color: $surface1; 471 | } 472 | 473 | .integratedLanguageSelectors .lmt--web .lmt__sides_container .lmt__side_container.lmt__side_container--target .lmt__textarea_container { 474 | border-top-color: $surface1 !important; 475 | } 476 | 477 | .lmt--showing_alternatives .lmt__translations_as_text::before, 478 | .lmt--web .lmt__translations_as_text h4::before { 479 | border-top-color: $surface1; 480 | } 481 | 482 | .lmt--web .lmt__translations_as_text h4 { 483 | color: $overlay1; 484 | } 485 | 486 | .dl_body--redesign .lmt--web .lmt__textarea_container.lmt__textarea_container--focus, 487 | .integratedLanguageSelectors .lmt--web .lmt__sides_container.lmt__sides_container--focus_source .lmt__side_container.lmt__side_container--source .lmt__textarea_container, 488 | .integratedLanguageSelectors .lmt--web .lmt__sides_container.lmt__sides_container--focus_target .lmt__side_container.lmt__side_container--target .lmt__textarea_container { 489 | border: 1px solid $accent !important; 490 | } 491 | 492 | .lmt--web .lmt__language_container .lmt__language_container_switch { 493 | color: $accent2; 494 | } 495 | 496 | @keyframes lmt_textarea__busy_animation_ctp { 497 | 0% { box-shadow: inset 0 0 0px 0 $base, inset 0 0 0px 0px rgba(14, 43, 70, 0.0); 498 | } 499 | 500 | 10% { box-shadow: inset 0 0 0px 1px $base, inset 0 0 0px 2px rgba(14, 43, 70, 0.5); 501 | } 502 | 503 | 20% { box-shadow: inset 0 0 1px 3px $base, inset 0 0 1px 4px rgba(14, 43, 70, 0.5), 504 | } 505 | 506 | 40% { box-shadow: inset 0 0 1px 8px $base, inset 0 0 1px 8px rgba(14, 43, 70, 0.3), 507 | } 508 | } 509 | 510 | .lmt--active_translation_request.lmt--active_translation_request--with_target_has_content .lmt__side_container--target .lmt__inner_textarea_container { 511 | animation: lmt_textarea__busy_animation_ctp 1.5s 2.5s linear infinite; 512 | box-shadow: inset 0 0 1px 14px $base, inset 0 0 0px rgba(0, 0, 0, 0); 513 | } 514 | 515 | .lmt__toolbar_container, 516 | [data-testid="deepl-ui-tooltip-container"] { 517 | span > button:hover { 518 | background-color: alpha($text, .15) !important; 519 | } 520 | } 521 | 522 | .lmt__clear_text_button_wrapper { 523 | [class*="button--"] { 524 | &:active:enabled, 525 | &:hover:enabled { 526 | color: $accent; 527 | } 528 | } 529 | } 530 | 531 | // language selector 532 | .lmt__language_select__menu.lmt__language_select__menu_three_columns { 533 | &, 534 | input { 535 | background-color: $base; 536 | } 537 | 538 | border-color: $surface1; 539 | } 540 | 541 | .lmt__language_select__menu .lmt__dropdown_item_inside_container, 542 | .lmt__language_select__menu .lmt__formalitySwitch__menu_items > div > button, 543 | .lmt__language_select__menu .lmt__formalitySwitch__menu_items > div > div > button, 544 | .lmt__language_select__menu > div > button, 545 | .lmt__language_select__menu > div > div > button { 546 | color: $subtext1; 547 | } 548 | 549 | .lmt__language_select__menu.lmt__language_select__menu_three_columns .lmt__language_wrapper .lmt__language_select_column button:hover, 550 | .lmt__language_select__menu.lmt__language_select__menu_three_columns .lmt__language_wrapper .lmt__language_select_column button.highlighted { 551 | background-color: alpha($yellow, 0.3); 552 | } 553 | 554 | .lmt__language_select__menu.lmt__language_select__menu_three_columns .lmt__language_wrapper .lmt__language_select_column { 555 | border-right-color: $surface1; 556 | } 557 | 558 | .lmt--web .lmt__language_select__menu_three_columns_close_button { 559 | color: $accent; 560 | } 561 | 562 | .lmt__language_select__menu.lmt__language_select__menu_three_columns .lmt__language_wrapper .lmt__language_select_column button .tick { 563 | border-bottom-color: $accent; 564 | border-right-color: $accent; 565 | } 566 | 567 | // glossary 568 | .lmt__glossary_highlight { 569 | color: $accent; 570 | } 571 | 572 | .lmt__glossaryButton__desktop { 573 | border-color: alpha($text, .12) 574 | } 575 | 576 | .lmt__glossary_button .lmt__glossary_button_label:hover { 577 | color: $accent; 578 | } 579 | 580 | .lmt__glossary_editor_mainBar { 581 | background-color: $accent; 582 | color: theme is "Latte" ? #fff : $crust; 583 | 584 | .lmt__glossary_editorClose { 585 | color: theme is "Latte" ? #fff : $crust; 586 | } 587 | } 588 | 589 | [dl-test = "glossary-modal"] { 590 | input { 591 | background-color: $surface1; 592 | } 593 | 594 | &[class*="modal--"] { 595 | background-color: $surface0; 596 | } 597 | 598 | [class*="content--"] { 599 | color: $text; 600 | } 601 | } 602 | 603 | .lmt__glossary_newEntry_langButton { 604 | color: $subtext1; 605 | 606 | &:hover { 607 | color: $accent; 608 | } 609 | } 610 | 611 | .lmt_firstEntry-content .lmt__glossary_newEntry_langButton .lmt__glossary_arrowDown { 612 | border-bottom-color: $overlay2; 613 | border-right-color: $overlay2; 614 | } 615 | 616 | .lmt_firstEntry-content .lmt__glossary_newEntry_inputSource, 617 | .lmt_firstEntry-content .lmt__glossary_newEntry_inputTarget { 618 | border-color: $overlay0; 619 | color: $text; 620 | } 621 | 622 | .lmt_firstEntry-content .lmt__glossary_newEntry_langButton { 623 | border-color: $overlay0; 624 | background-color: $surface1; 625 | } 626 | 627 | .lmt_firstEntry-content .lmt__glossary_newEntry_inputSource:focus, 628 | .lmt_firstEntry-content .lmt__glossary_newEntry_inputTarget:focus { 629 | border-color: $accent; 630 | } 631 | 632 | .lmt_firstEntry-content .lmt__glossary_acceptButton { 633 | color: theme is "Latte" ? #fff : $crust; 634 | } 635 | 636 | .lmt__glossary_acceptButton.lmt__glossary_acceptButton--disabled { 637 | &, 638 | &:hover { 639 | background-color: alpha($accent, 0.5); 640 | } 641 | } 642 | 643 | .lmt__language_select__menu { 644 | background-color: $surface1; 645 | } 646 | 647 | .lmt__glossary_newEntry_langDropdown.lmt__language_select__menu button { 648 | color: $text; 649 | 650 | &:hover { 651 | background-color: alpha($yellow, 0.2) !important; 652 | } 653 | } 654 | 655 | .lmt__glossary_newEntry_langDropdown.lmt__language_select__menu button .langName { 656 | color: $text !important; 657 | } 658 | 659 | .lmt__glossary_newEntry_langDropdown.lmt__language_select__menu button .langCodePair, 660 | .lmt__glossary_newEntry_langDropdown.lmt__language_select__menu button .langCodePair .langCode { 661 | color: $subtext0; 662 | } 663 | 664 | .lmt__glossary_acceptButton { 665 | background-color: $accent2; 666 | 667 | &:hover { 668 | background-color: $accent; 669 | } 670 | } 671 | 672 | .lmt__glossary_editor .lmt__glossary_editor_subBar_top .lmt__glossary_editor_glossarySelect .lmt__glossary_editor_glossaryNameWrapper .lmt__glossary_editor_glossaryName { 673 | color: $text; 674 | } 675 | 676 | .lmt__glossary_editor .lmt__glossary_editor_subBar_top .lmt__glossary_editor_glossarySelect .lmt__glossary_editor_glossaryNameWrapper .lmt__glossary_editor_glossarySelectChevron.lmt__glossary_arrowDown { 677 | border-bottom-color: $accent2; 678 | border-right-color: $accent2; 679 | } 680 | 681 | .lmt__glossary_editor .lmt__glossary_editor_subBar_top, 682 | .lmt__glossary_editor_subBar_bottom 683 | .lmt__glossary_editor [class^="form--"] { 684 | background-color: $mantle; 685 | } 686 | 687 | .lmt__glossary_editor_subBar_bottom .lmt__glossary_editor_glossaryAddNewWrapper .lmt__glossary_editor_glossaryAddNew { 688 | color: $accent; 689 | } 690 | 691 | .lmt__glossary_editor { 692 | background-color: $base; 693 | color: $text; 694 | border-color: $accent; 695 | } 696 | 697 | .lmt__glossaryButton__desktop.switchedOn { 698 | border-color: $accent; 699 | } 700 | 701 | .lmt__glossary_editorRow_editMode .editInput { 702 | border-color: $surface1; 703 | color: $text; 704 | background-color: $base; 705 | } 706 | 707 | .lmt__glossary_editor_checkmark { 708 | border-bottom-color: theme is "Latte" ? $base: $crust; 709 | border-right-color: theme is "Latte" ? $base: $crust; 710 | } 711 | 712 | .lmt__glossary_editor_langPairHeadline { 713 | color: $text; 714 | border-bottom-color: $surface1; 715 | } 716 | 717 | .lmt__glossary_editorRow { 718 | color: $text; 719 | } 720 | 721 | .lmt__glossary_arrowRightWrapper .lmt__glossary_arrowRight { 722 | border-bottom-color: $overlay1; 723 | border-right-color: $overlay1; 724 | } 725 | 726 | .LanguagePair_arrow { 727 | color: $overlay2; 728 | stroke: $overlay2; 729 | } 730 | 731 | .lmt__glossary_dialog { 732 | background-color: $surface0; 733 | color: $text; 734 | border-color: $surface2; 735 | } 736 | 737 | .lmt__glossary_editorRow .iconButton { 738 | color: $text; 739 | } 740 | 741 | ///// 742 | 743 | .combined_app_ad_mobile_and_desktop .dl_ad_pro_container, 744 | .dl_pro__banner--2021--wrapper, 745 | [class^="footerOuterContainer"], 746 | .lmt_quote__inner { 747 | background-color: $crust; 748 | } 749 | 750 | .lmt_quote__inner, 751 | .lmt_quote__text, 752 | .lmt_quote__source { 753 | color: $subtext0; 754 | } 755 | 756 | .lmt_quote__source a { 757 | color: $accent; 758 | } 759 | 760 | // popup 761 | .lmt__edit_text_popup { 762 | background-color: $surface1; 763 | } 764 | 765 | .lmt__edit_text_popup li, 766 | .lmt__edit_text_popup .lmt__edit_text_list_item { 767 | color: $subtext1; 768 | border-color: $surface2; 769 | } 770 | 771 | .lmt__edit_text_popup .lmt__edit_text_popup__entry--active { 772 | background-color: alpha($yellow, 0.3); 773 | } 774 | 775 | // dictionary 776 | #lmt__dict_container { 777 | [class^="content--"] { 778 | .tag_lemma a, 779 | .isForeignTerm .tag_trans, 780 | .isForeignTerm .tag_trans a 781 | .isForeignTerm .tag_t, 782 | .tag_t a { 783 | color: $accent; 784 | } 785 | 786 | .sep { 787 | color: $text; 788 | } 789 | 790 | .tag_trans { 791 | color: $subtext1; 792 | } 793 | 794 | .notascommon { 795 | color: $overlay1; 796 | } 797 | } 798 | 799 | span > span > button:hover { 800 | color: $accent; 801 | } 802 | } 803 | 804 | // quotes 805 | .lmt_quotes_nav_entry { 806 | color: $overlay1; 807 | background-color: $overlay0; 808 | } 809 | 810 | .lmt_quotes_nav_entry--active { 811 | color: $accent; 812 | background-color: $accent; 813 | } 814 | 815 | // footer 816 | .dl_footerV2_container { 817 | [class*="linkList--"] li { 818 | &:not(:first-of-type) a { 819 | color: $accent2 !important; // idk why this isn't coloring 820 | } 821 | 822 | [class*="badge--"] { 823 | background-color: spin($accent, -40deg) !important; 824 | color: theme is "Latte" ? #fff : $crust !important; 825 | } 826 | } 827 | } 828 | 829 | ///// 830 | 831 | if (theme != Latte) { 832 | #dl_menu_logo img, 833 | #dl_menu_translator_simplified img, 834 | .lmt_quote .lmt_quote__logo, 835 | .lmt_quote__inner::before, 836 | [class^="docTrans__help_popup__container--"] [class^="supportedIcons--"] > div, 837 | .dl_footerV2_container [class^="brandingContainer--"] a > img, 838 | [class^="socialMediaContainer--"] a > img { 839 | filter: invert(100%) hue-rotate(180deg); 840 | } 841 | } 842 | 843 | ///// 844 | 845 | // options 846 | if (quotes) { 847 | #dl_quotes_container { 848 | display: none; 849 | } 850 | } 851 | 852 | if (header) { 853 | .dl_header { 854 | display: none; 855 | } 856 | } 857 | 858 | if (footer) { 859 | .dl_footerV2_container, 860 | .showSeoText .eSEOtericText { 861 | display: none; 862 | } 863 | } 864 | 865 | if (tabs) { 866 | .lmt__doc { 867 | margin-bottom: 0; 868 | 869 | &Trans-tab-container { 870 | display: none !important; 871 | min-height: 100vh; 872 | } 873 | } 874 | 875 | #lmt_quotes_article { 876 | margin-top: 0; 877 | } 878 | 879 | .dl_translator_page_container { 880 | align-items: center; 881 | align-content: center; 882 | justify-content: center; 883 | } 884 | } 885 | 886 | if (dictionary) { 887 | #lmt__dict_container { 888 | display: none !important; 889 | } 890 | } 891 | 892 | if (quotes != footer) { 893 | .showSeoText .eSEOtericText { 894 | margin-bottom: 70px; 895 | } 896 | } 897 | 898 | if (quotes && header && footer) { 899 | body { 900 | display: flex; 901 | flex-direction: column; 902 | min-height: calc(100vh - 2em); 903 | align-items: center; 904 | align-content: center; 905 | justify-content: center; 906 | } 907 | 908 | .dl_translator_page_container { 909 | margin: 2em 0; 910 | 911 | > * { 912 | width: 100vw; 913 | } 914 | } 915 | } 916 | 917 | if (quotes && header && footer && tabs) { 918 | body { 919 | min-height: 100vh; 920 | } 921 | } 922 | 923 | if (removeAds) { 924 | #lmt_pro_ad_container { 925 | display: none; 926 | } 927 | } 928 | 929 | if (removeGlossaryButton) { 930 | .lmt__glossaryButton__desktop { 931 | display: none; 932 | } 933 | } 934 | } 935 | --------------------------------------------------------------------------------