catppuccin.user.css

/* ==UserStyle==
@name Picrew Catppuccin
@namespace github.com/catppuccin/userstyles/styles/picrew
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/picrew
@version 2024.12.28
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/picrew/catppuccin.user.css
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apicrew
@description Soothing pastel theme for Picrew
@author Catppuccin
@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('picrew.me') {
  #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;
      }
    }

    body {
      background-color: @base !important;
      color: @text !important;
    }
    /* language prompt */
    .header-langbox {
      background: @mantle !important;
      color: @text !important;
    }
    .header-langbox-buttons button {
      background: @subtext0 !important;
      color: @base !important;
    }
    /* header */
    .sitetop-Header {
      background: @base !important;

      .splide__arrow {
        background: @subtext0 !important;
      }
    }
    .st-Header_Wrapper {
      background: @yellow !important;

      .st-Header {
        .sp-nav .nav-link li ul,
        .sp-nav .nav-link li h2 {
          border-top-color: @surface1 !important;
        }

        .st-Header_Logo {
          @svg: escape(
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 62"><g fill="@{base}"><path d="M199.4 42.69a11.65 11.65 0 0 1-10.56 8.2 13.57 13.57 0 0 1-10.78-4.53c-5.24 6-15.42 6.21-19.82-.56-4.33 3.08-11 5.09-17.52 5.09-8.79-.29-13.1-3.22-19.06-7.93-6.34-5.9-15.36-1.2-19.53 6.12v10a2.4 2.4 0 0 1-4.79 0v-12.7a17.3 17.3 0 0 1-11.73 4.51 17 17 0 0 1-14.94-8.58 11.34 11.34 0 0 1-12.86.08c-4.86 9.09-15.06 14.3-28 14.3-10.19 0-18.66-3.2-24.18-9v11.38a2.4 2.4 0 0 1-4.8 0V40a2.44 2.44 0 0 1 1-2 2.4 2.4 0 0 1 3.45.8c3.8 8.5 12.67 13.08 24.49 13.13s22.42-5.22 24.85-14.77a2.37 2.37 0 0 1 1.23-1.37 2.41 2.41 0 0 1 3.12 1c2.06 3.73 8.37 3.72 10.43 0a2.41 2.41 0 0 1 4.08-.17 2.3 2.3 0 0 1 .33.75 12.33 12.33 0 0 0 23.61 0 2.4 2.4 0 0 1 4.66.05c.11.29.05 3.57.06 3.94 3.64-3.49 8.31-5.8 12.44-5.8 7.63-.26 10.24 4.68 15.57 7.65a21.2 21.2 0 0 0 10.58 2.93c7.11 0 13.7-2.58 17.07-6.21a2.42 2.42 0 0 1 3.49 1.34c2 6.51 11.46 6.55 14.55-.14a2.39 2.39 0 0 1 4.34-.26 8.62 8.62 0 0 0 8.38 5.27 6.9 6.9 0 0 0 6.29-4.87 2.39 2.39 0 0 1 4.56 1.46ZM64.17 46.1a2.39 2.39 0 0 0-2.39 2.4v10.57a2.4 2.4 0 1 0 4.79 0V48.5a2.39 2.39 0 0 0-2.4-2.4"/><path d="M18.91 21.4a.31.31 0 0 1 .32-.33 5 5 0 0 1 3.65 1.79A8.6 8.6 0 0 1 24.62 28a.29.29 0 0 1-.34.31c-3.92-.52-4.91-1.83-5.37-6.91m-1.22 0a.31.31 0 0 0-.32-.33 5 5 0 0 0-3.65 1.79A8.6 8.6 0 0 0 12 28a.29.29 0 0 0 .34.31c3.9-.52 4.89-1.83 5.35-6.91m-5.37 8.31A.3.3 0 0 0 12 30a8.62 8.62 0 0 0 1.74 5.18A5 5 0 0 0 17.37 37a.31.31 0 0 0 .32-.33c-.46-5.08-1.45-6.4-5.37-6.96m6.59 7a.31.31 0 0 0 .32.33 5 5 0 0 0 3.65-1.79A8.62 8.62 0 0 0 24.62 30a.3.3 0 0 0-.34-.32c-3.92.59-4.91 1.91-5.37 6.99Zm21.7-15.31a.31.31 0 0 0-.32-.33 5 5 0 0 0-3.65 1.79A8.6 8.6 0 0 0 34.9 28a.29.29 0 0 0 .34.31c3.92-.52 4.91-1.83 5.37-6.91m6.59 7a.29.29 0 0 0 .34-.31 8.6 8.6 0 0 0-1.74-5.18 5 5 0 0 0-3.65-1.79.31.31 0 0 0-.32.33c.46 5.03 1.45 6.34 5.37 6.9Zm-5.37 8.32a.31.31 0 0 0 .32.33 5 5 0 0 0 3.65-1.79A8.62 8.62 0 0 0 47.54 30a.3.3 0 0 0-.34-.32c-3.92.59-4.91 1.91-5.37 6.99Zm-6.59-7a.3.3 0 0 0-.34.32 8.62 8.62 0 0 0 1.74 5.18A5 5 0 0 0 40.29 37a.31.31 0 0 0 .32-.33c-.46-5.08-1.45-6.4-5.37-6.96Zm142.82-8a2.4 2.4 0 0 0-2.4 2.4v7.3a2.4 2.4 0 1 0 4.79 0v-7.3a2.39 2.39 0 0 0-2.39-2.44Zm-17.84-3.27a2.39 2.39 0 0 0-2.39 2.39v10.54a2.4 2.4 0 1 0 4.79 0V20.8a2.39 2.39 0 0 0-2.4-2.39Zm35.67 0a2.39 2.39 0 0 0-2.39 2.39v10.54a2.4 2.4 0 1 0 4.79 0V20.8a2.39 2.39 0 0 0-2.4-2.39Zm-42.72 13a2.41 2.41 0 0 1-2.4 2.4H128v.88a2.4 2.4 0 0 1-4.79 0 20 20 0 0 1 .41-3.77c2.18-12 16.69-16.37 25.39-8.54a12.4 12.4 0 0 1 4.16 8.96ZM129.25 29h18.66a8.2 8.2 0 0 0-2.16-3.12 10.87 10.87 0 0 0-7.39-2.67 10.11 10.11 0 0 0-9.11 5.79M85.61 18.41A17 17 0 0 0 70.67 27a11.17 11.17 0 0 0-6.49-2 11.3 11.3 0 0 0-5.51 1.41 35.6 35.6 0 0 0-6.58-15.85 5.7 5.7 0 0 1-.81-1.25c.11-7.95-9.56-11.65-15.19-6-.17.17-.32.34-.43.47a6 6 0 0 1-1.1-.06 42 42 0 0 0-4.8-.24 57 57 0 0 0-5.88.33C18.52-2.52 8.13 1 8.24 9.26a5.7 5.7 0 0 1-.81 1.25A36.36 36.36 0 0 0 .49 29.15a2.4 2.4 0 0 0 4.78.42 31.4 31.4 0 0 1 6-16.15A6.72 6.72 0 0 0 13 9.26a3.59 3.59 0 0 1 2.23-3.58 4.22 4.22 0 0 1 4.97 1.13c1.26 1.54 2.57 2 5.23 1.6a39 39 0 0 1 4.33-.21 39 39 0 0 1 4.33.21c2.8.41 4.08-.15 5.33-1.72a4.22 4.22 0 0 1 4.84-1 3.59 3.59 0 0 1 2.23 3.58 6.72 6.72 0 0 0 1.79 4.16 31.4 31.4 0 0 1 6 16.15c.17 1.64 0 3.07 1.45 3.9a2.4 2.4 0 0 0 3.31-1 6.25 6.25 0 0 1 10.38.09A2.4 2.4 0 0 0 73.8 32a12 12 0 0 1 11.81-8.8A12.26 12.26 0 0 1 96 28.65a2.4 2.4 0 1 0 4-2.65 17 17 0 0 0-14.39-7.59"/></g></svg>'
          );
          background-image: url("data:image/svg+xml;charset=utf8,@{svg}");
          filter: none;
        }

        .st-Header_Linkicon {
          color: @base !important;
        }

        .menu__line {
          background-color: @base !important;
        }

        /* side menu close button */
        .open .menu__line--1,
        .open .menu__line--3 {
          background-color: @text !important;
        }
      }
    }
    .sitetop-Nav {
      background: @mantle !important;
      color: @text !important;
    }
    .splide__pagination__page {
      background: @overlay1 !important;

      &.is-active {
        background: @accent-color !important;
      }
    }
    #home {
      background: @base !important;
      color: @text !important;
    }
    /* "Information" page (main page) */
    .page-info {
      background-color: @mantle !important;
    }
    .sp_title a,
    .page-info a {
      color: @accent-color !important;
    }
    .rankA::before {
      color: @text !important;
    }
    /* "welcome creator" page (main page) */
    .header_bg[data-v-2537399f] {
      background: linear-gradient(90deg, @surface0, @base);
    }
    /* MOBILE ONLY: ad for downloading the app */
    .sitetop-appDL {
      background: @mantle !important;

      .sitetop-appDL_Header .sitetop-appDL_Title .fa {
        color: @accent-color !important;
      }
    }
    /* "Featured Tags" section - directly above Discovery */
    .sitetop-tags {
      background: @mantle !important;

      .sitetop-tags_Header .sitetop-tags_Title .fa {
        color: @accent-color !important;
      }
      .recommended-tag-list .recommended-tag-list-item a {
        border-color: @accent-color !important;

        /* tag icon before tag name */
        &::before {
          color: @accent-color !important;
        }
      }
    }
    /* "Discovery" section (image is lightbulb) */
    .sitetop-Discovery {
      background: @mantle !important;

      .sitetop-Discovery_Header {
        .sitetop-Discovery_Title .fa {
          color: @accent-color !important;
        }

        .sitetop-DiscoveryList_More a {
          background-color: @accent-color !important;
          color: @base !important;
        }

        .sitetop-Discovery_More {
          color: @accent-color !important;
        }
      }
    }
    .sitetop-ImagemakerList_List li .squareSize .imagemaker_size {
      background: @surface0 !important;
    }
    /* "Hot Now" section (image is a graph) */
    .sitetop-Hot_Title .fa {
      color: @accent-color !important;
    }
    .sitetop-Hot_CountrySwitch {
      background-color: @base !important;

      input:first-of-type + label::before {
        background: @base !important;
      }

      .sitetop-Hot_CountrySwitch_all span::after {
        color: @accent-color !important;
      }

      input:last-of-type + label span {
        filter: brightness(-20%) !important;
        color: @accent-color !important;
      }
    }
    /* "Updated Image Makers (image (.fa) is bullhorn) */
    .sitetop-ImagemakerList {
      background: @mantle !important;
    }
    .sitetop-ImagemakerList_Title .fa {
      color: @accent-color !important;
    }
    .c_btn {
      background: @surface1 !important;
      color: @text !important;
      border-color: @surface1 !important;

      &:hover {
        background: @surface2 !important;
        color: @text !important;
        border-color: @surface2 !important;
      }
      &:focus {
        box-shadow: 0 0 0 1px @accent-color !important;
      }
    }
    .sitetop-info {
      background-color: @mantle !important;
      color: @text !important;

      h1::after {
        background: @mantle !important;
      }
      i {
        background: @mantle !important;
        border-radius: 6px !important;
      }
    }
    .title {
      color: @text !important;
    }
    .category {
      background: @base !important;
      color: @text !important;
    }
    .date {
      color: @subtext1 !important;
    }
    .simplebar-content-wrapper {
      background-color: @mantle !important;
      color: @text !important;
    }
    .st-Terms {
      border-color: @accent-color !important;
      border-radius: 2px !important;
    }
    .st-Terms_Wrapper .st-Terms a,
    .st-Terms_Wrapper .st-Terms .st-Terms_Body strong {
      color: @accent-color !important;
    }
    .c_select select {
      background: @mantle !important;
      border-color: @overlay0 !important;
    }
    .st-Terms_Cookie,
    .st-Terms_CookieTitle {
      color: @text !important;
    }
    .st-Terms_Footer {
      background-color: @mantle !important;
      color: @subtext1 !important;
    }
    .st-Terms_AgreeBtn {
      background: @surface1 !important;
      border-color: @surface1 !important;
      box-shadow: 0 4px 0 @surface2 !important;
      color: @text !important;

      &:hover {
        background: @surface2 !important;
        border-color: @surface2 !important;
        box-shadow: 0 4px 0 @surface2 !important;
        color: @text !important;
      }
    }
    .popup {
      background-color: @base !important;
      border-color: @accent-color !important;
    }
    .popup-header {
      background-color: @mantle !important;
    }
    .popup-body .content a {
      color: @accent-color !important;
    }
    .bellicon {
      color: @accent-color !important;
      border-color: @accent-color !important;
    }
    .close-btn {
      border-color: @overlay0 !important;
      color: @subtext1 !important;
    }
    .st-Footer_Wrapper {
      background-color: @mantle !important;
      color: @text !important;
    }
    .st-Footer_Links_bottom {
      background: @base !important;
      color: @subtext1 !important;
    }
    .st-Footer .st-Footer_Links div span.st-Header_Logo {
      filter: none !important;
    }
    .sitetop-Twitter,
    .sitetop-Twitter_Title {
      background-color: @mantle !important;
      border-bottom-color: @overlay1 !important;
    }
    .item {
      border-bottom-color: @surface2 !important;
    }
    /* login screen */
    .page-container {
      .panel {
        background: @mantle !important;
        border-radius: 6px !important;
      }
      .page-header {
        color: @text !important;
      }
    }
    .login-container_sns .c_text_right {
      color: @subtext0 !important;
    }
    /* login screen */
    .login-container {
      .login-form-container {
        .c_text_right a {
          color: @accent-color !important;
        }
        .login-form input:focus {
          box-shadow: 0 0 0 1px @accent-color !important;
        }
      }
      hr.sw_hr01 {
        border-color: @surface1 !important;
      }
      input:not([type="checkbox"], [type="radio"]) {
        background: @base !important;
        border-color: @surface2 !important;
        border-radius: 1px !important;
        color: @text !important;
      }
    }
    .h100 {
      background: @base !important;
      color: @text !important;
    }
    .pwBox .btn-default {
      color: @subtext0 !important;
    }
    /* search page */
    .search-Form > fieldset {
      background: @base !important;

      .search-Form_Keyword .search-Form_KeywordInput:focus {
        box-shadow: 0 0 0 1px @accent-color !important;
      }
    }
    .search-Form_Keyword {
      .search-iconBox {
        color: @subtext1 !important;
      }
      .search-Form_KeywordInput {
        background: @mantle !important;
        border-color: @overlay1 !important;
        color: @text !important;
      }
    }
    .search-filterBox {
      background: @base !important;

      .btn-filter {
        background-color: @surface1 !important;
        border-radius: 6px !important;
        border-color: @surface0 !important;
        color: @text !important;
      }
      ul .labelBox {
        background: @surface1 !important;
        border-color: @surface0 !important;
        color: @text !important;
      }
    }
    .search-ImagemakerList .search-ImagemakerList_Result {
      background: @mantle !important;

      .squareSize .imagemaker_size {
        background: @surface0 !important;
      }
    }
    .search-ImagemakerList_UseRange li > div {
      background: @surface0 !important;
      border-color: @surface0 !important;
      color: @text !important;
    }
    /* filter menu (search page) */
    .search_Modal {
      ul .labelBoxlist .labelBox {
        background: @surface1 !important;
        border-color: @surface0 !important;
      }
      .squareSize,
      .rectangleSize {
        background: @surface0 !important;
      }
      .c_select::after {
        color: @subtext0 !important;
      }
    }
    .vm--container .radioBox {
      background-color: @base !important;

      .radioBox_label::before {
        background: @accent-color !important;
      }
      .radioBox_label::after {
        border-color: @overlay1 !important;
      }
    }
    .c_select select option {
      background-color: @surface0 !important;
      color: @text !important;
    }
    /* page selector (search page) */
    .c_pagination,
    .c_pagination_num_wrapper {
      background: @mantle !important;
    }
    .c_pagination_first_wrapper,
    .c_pagination_last_wrapper {
      background: @base !important;
    }
    .c_pagination_num.is_current span {
      background: @accent-color !important;
      color: @base !important;
    }
    /* creator registration page */
    .creator-content
      .email-register-container
      .email-register-form
      input:not([type="checkbox"], [type="radio"]):focus {
      box-shadow: 0 0 0 1px @accent-color !important;
    }
    .creator-content
      .email-register-container
      .email-register-form
      input:not([type="checkbox"], [type="radio"]) {
      background: @mantle !important;
      border-color: @surface0 !important;
      color: @text !important;
    }
    /* "Password" field */
    .creator-content
      .email-register-container
      .email-register-form
      fieldset
      label
      .att {
      color: @subtext1 !important;
    }
    /* name validation popup */
    .is_error {
      .tc_validation_input {
        .tc_validation_input_message {
          background: @mantle !important;
          border-color: @red !important;
          color: @text !important;

          &::before {
            border-top-color: @red !important;
          }
        }
        .tc_validation_input_status::after {
          color: @red !important;
        }
      }
    }
    .tc_validation_input {
      .tc_validation_input_message {
        background: @mantle !important;
        border-color: @overlay1 !important;
        color: @text !important;

        &::before {
          border-top-color: @overlay1 !important;
        }
      }
    }
    .is_can_use.tc_validation_input .tc_validation_input_status::after {
      color: @green !important;
    }
    /* "Authentication Completed!" icon (registration) */
    .creator-content {
      .success {
        background: @surface0 !important;
        border-color: @accent-color !important;

        &::after {
          border-left-color: @accent-color !important;
          border-bottom-color: @accent-color !important;
        }
      }
      /* "Terms of Use" and "Privacy Policy" links */
      .email-register-container .email-register-form fieldset a {
        color: @accent-color !important;
      }
    }
    /* creator page */
    /* sidebar (creator/info page) */
    .tc_sidebar_im_tmb {
      background-color: @subtext0 !important;
      border-color: @subtext0 !important;
    }
    .tc_sidebar {
      background-color: @mantle !important;
      color: @text !important;
      border-right-color: @surface2;

      .nav > li a:hover,
      .nav > li a:focus {
        background-color: @surface0 !important;
      }
    }
    .tc_sidebar_lang {
      background-color: @surface0 !important;
    }
    .tc_sidebar_basic_wrapper .tc_sidebar_basic_title {
      background-color: @base !important;
    }
    .nav > li > a {
      color: @text !important;
    }
    /* header (creator/info page) */
    .tc_page_header {
      background: @mantle !important;
      border-color: @surface2 !important;
    }
    .border-bottom {
      border-bottom-color: @surface2 !important;
    }
    .text-white {
      color: @text !important;
    }
    .navbar-light .navbar-nav .nav-link {
      color: @subtext0 !important;

      &:hover {
        color: @subtext1 !important;
      }
    }
    /* main body (creator/info page) */
    .gray-bg {
      background-color: @base !important;
    }
    .card-body {
      background-color: @mantle !important;
      border-color: @surface2 !important;
    }
    .badge-info {
      background-color: @surface2 !important;
      border-color: @surface2 !important;
    }
    .footer {
      background: none repeat scroll 0 @mantle !important;
      border-top-color: @surface2 !important;
    }
    .small > a {
      color: @accent-color !important;
    }
    /* "Creator Informations" pages (creator/info page) */
    .card-header {
      background: @mantle !important;
      border-color: @surface2 !important;

      &:first-child {
        background-color: @mantle !important;
      }
    }
    /* creator/image_maker page */
    .btn-primary.btn-lg {
      background-color: @surface1 !important;
      border-color: @surface1 !important;
      color: @text !important;
    }
    .alert-info {
      background-color: @surface0 !important;
      border-color: @surface2 !important;
      color: @text !important;
    }
    /* profile page (creator) */
    .account-content section {
      border-bottom-color: @subtext0 !important;

      .att,
      .indent .mi-renkei {
        color: @subtext0 !important;
      }
    }
    /* image maker registration (creator) */
    .modal-body {
      background: @base !important;
    }
    .modal-header {
      background-color: @mantle !important;
      border-bottom-color: @surface1 !important;

      .close,
      .close:hover {
        color: @text !important;
      }
    }
    /* "image maker name" (creator) */
    .form-control {
      background-color: @mantle !important;
      border-color: @surface1 !important;
      color: @text !important;

      &:focus {
        border-color: @accent-color !important;
      }
    }
    .tc_canvas-square,
    .tc_canvas-rectangle {
      background: @surface2 !important;
    }
    /* image maker "type" (creator) */
    .tc_imagemaker_register_type li :checked + label {
      border-color: @accent-color !important;
      box-shadow: 0 0 0 2px @accent-color !important;
      color: @surface1 !important;
    }
    .tc_imagemaker_register_type
      li
      :checked
      + label
      .tc_imagemaker_register_type_name {
      background-color: @accent-color !important;
      border-bottom-color: @accent-color !important;
      color: @surface1 !important;
    }
    .tc_imagemaker_register_type li label {
      background: @overlay0 !important;
      border-color: @surface2 !important;

      .tc_imagemaker_register_type_name {
        border-bottom-color: @surface2 !important;
      }
      .tc_imagemaker_register_type_desc {
        background-color: @mantle !important;
        color: @text !important;
      }
    }
    .modal-footer {
      background-color: @mantle !important;
      border-top-color: @surface1 !important;
    }
    .btn-outline-secondary,
    .btn-outline-secondary:hover {
      background: @surface1 !important;
      border-color: @surface2 !important;
      color: @text !important;
    }
    .btn-primary,
    .btn-primary:hover {
      background-color: @accent-color !important;
      border-color: @accent-color !important;
      color: @surface1 !important;
    }
    /* image maker list (creator) */
    .tc_imlist_add_imagemaker {
      border-color: @surface1 !important;

      &:hover {
        border-color: @subtext1 !important;
      }
      &::before {
        color: @overlay1 !important;
      }
    }
    .card {
      background-color: @base !important;
    }
    .card-footer {
      background: @crust !important;
      border-top-color: @surface0 !important;
    }
    .btn-info,
    .btn-outline-info {
      background-color: @surface0 !important;
      border-color: @surface2 !important;
      color: @text !important;

      &:hover {
        background-color: @overlay0 !important;
        border-color: @overlay0 !important;
        color: @text !important;
      }
    }
    .btn-info:focus {
      box-shadow: 0 0 0 0.1rem @accent-color !important;
    }
    .badge-default,
    .tc_badge_default {
      background-color: @surface0 !important;
      border-color: @surface2 !important;
      color: @subtext0 !important;
    }
    /* image maker "Edit" (creator) */
    .btn-info {
      background-color: @surface2 !important;
      border-color: @surface2 !important;
      color: @text !important;
    }
    .btn-warning {
      background-color: @accent-color !important;
      border-color: @accent-color !important;
      color: @base !important;

      &:focus {
        box-shadow: 0 0 0 0.1rem @accent-color !important;
      }
    }
    .tc_im_parts_eye .tc_im_parts_eye_icon {
      background: @surface0 !important;
    }
    .tc_im_parts_ctrl .disabled [class^="tc_ctrl_"] {
      background-color: @surface0 !important;

      &::before {
        color: @text !important;
      }
    }
    .tc_im_layer_list li {
      border-color: @overlay0 !important;
    }
    /* image maker part editor (creator) */
    .tc_sidebar_im_title {
      color: @subtext0 !important;

      &::after {
        background-color: @subtext0 !important;
      }
    }
    .tc_sidebar_im li a:not(.btn) {
      color: @text !important;
    }
    .tc_sidebar_parts_list li .tc_sidebar_parts_list_parts:hover {
      background-color: @surface0 !important;
    }
    .tc_parts_ctrl_setting .widget.white-bg.disabled {
      background-color: @surface0 !important;
      border-color: @surface2 !important  ;
      color: @subtext0 !important;
    }
    .tc_c_textmenu li a {
      color: @accent-color !important;
    }
    .btn:disabled,
    .btn:disabled:hover {
      background-color: @surface2 !important;
      border-color: @overlay1;
      color: @subtext1 !important;
    }
    .btn-danger,
    .btn-danger:hover {
      background-color: @red !important;
      border-color: @red !important;
      color: @base !important;
    }
    .hr-line-dashed {
      background-color: @subtext0 !important;
      border-color: @subtext0 !important;
      color: @subtext0 !important;
    }
    /* "bulk upload" (creator) */
    .tc_bulkupload_type_select .tc_bulkupload_type_tab label {
      background-color: @surface0 !important;
      border-color: @accent-color !important;
    }
    .tc_bulkupload_color_select li input[type="radio"]:checked + label {
      box-shadow: inset 0 0 0 2px @accent-color;
    }
    .tc_color_chip,
    .tc_bulkupload_option h4 {
      background-color: @surface0 !important;
      border-color: @surface0 !important;
    }
    /* image maker part settings (creator) */
    .tc_upload_imgs .tc_upload_img_old {
      background-color: @surface1 !important;

      &::after {
        background-color: @surface0 !important;
      }
    }
    .input-group-text {
      background-color: @surface2 !important;
      border-color: @surface2 !important;
      color: @subtext1 !important;
    }
    .tc_radio_switch label:first-child input[type="radio"] + span {
      background-color: @accent-color !important;
      color: @base !important;

      &::before {
        box-shadow:
          inset 0 0 0 1px @accent-color,
          -2px 0 1px @crust !important;
      }
    }
    /* image maker "rules" (creator) */
    .text-info {
      color: @accent-color !important;
    }
    /* image maker "color palette" (creator) */
    .tc_colorgp_detail_parts_deselect li {
      background: @surface0;
      border-color: @surface2;
      color: @text !important;

      &:hover {
        background: @surface2 !important;
        border-color: @overlay0 !important;
        color: @text !important;
      }
      &::before {
        color: @subtext1 !important;
      }
    }
    /* "Sort layer order" (creator) */
    .tc_im_layer_sort li > div {
      background: @surface0 !important;
      border-color: @surface0 !important;

      i {
        color: @subtext1 !important;
      }
    }
    /* item list (creator) */
    .tc_items_itemlist_header .tc_items_itemlist_sortno,
    .tc_items_itemlist.is_style_detail > li.tc_item_opened {
      background-color: @base !important;
    }
    .tc_items_itemlist.is_style_detail
      > li
      .tc_items_itemlist_header
      .tc_items_itemlist_no {
      background-color: @surface1 !important;
      color: @text !important;
    }
    .tc_items_itemlist.is_style_detail > li {
      border-color: @base !important;
    }
    .page-item.disabled .page-link {
      background-color: @surface0 !important;
      border-color: @base !important;
      color: @text !important;
    }
    .page-item.active .page-link {
      background: @accent-color !important;
      border-color: @accent-color !important;
      color: @surface0 !important;
    }
    .tc_items_itemlist.is_style_detail
      > li
      .tc_items_itemlist_content
      .tc_items_itemlist_layers
      > li {
      border-bottom-color: @subtext0 !important;
    }
    .tc_c_textmenu li {
      border-left-color: @subtext0 !important;
      border-right-color: @subtext0 !important;
    }
    /* thank u isabel for fixing this part */
    .tc_items_itemlist.is_style_detail
      > li
      .tc_items_itemlist_content
      .tc_items_itemlist_layers
      > li
      .tc_items_itemlist_imgs
      > li {
      &,
      &::before {
        background-color: @surface0 !important;
        border-color: @surface0 !important;
      }
    }
    .custom-select {
      background: @base !important;
      border-color: @surface1 !important;
      color: @text !important;
    }
    .tc_items_style > label {
      .tc_radio_label {
        border-color: @subtext0 !important;
      }
      input[type="radio"]:checked + .tc_radio_label {
        border-color: @accent-color !important;
        color: @accent-color !important;
      }
    }
    /* image maker publication (creator) */
    .tc_release_description {
      background: @surface0 !important;
    }
    .border-danger {
      border-color: @red !important;
    }
    .text-danger {
      color: @red !important;
    }
    .text-navy {
      color: @accent-color !important;
    }
    /* discovery page */
    .discovery_header .discovery_description {
      color: @overlay2 !important;
    }
    .discovery_totop {
      background-color: @surface1 !important;
      color: @text !important;
    }
    .loading-spiral[data-v-46b20d22] {
      border-color: @subtext0 !important;
    }
    /* image maker (inner + outer) */
    .play-Imagemaker.is_info_show .imagemaker_info_bg {
      background: @mantle !important;
    }
    .imagemaker_info_wrapper {
      .imagemaker_info_header {
        background-color: @mantle !important;
      }
      .imagemaker_info_footer {
        background-color: @mantle !important;
      }
      /* help button (outer image maker) */
      .imagemaker_info_btn_help {
        background-color: @surface1 !important;
        border-color: @surface2 !important;
        box-shadow: 0 4px 0 @surface1 !important;
        color: @text !important;
      }
      /* "play" button (outer image maker) */
      .imagemaker_info_btn_start {
        background: @accent-color !important;
        border-color: @accent-color !important;
        box-shadow: 0 4px 0 @accent-color !important;
        color: @base !important;
      }
      .imagemaker_info_creator a {
        color: @accent-color !important;
      }
      .imagemaker_info_description a {
        color: @accent-color !important;
      }
      /* tags (outer image maker) */
      .imagemaker_info_use_range li.is_can > div {
        background: @surface0 !important;
        border-color: @surface1 !important;
        color: @text !important;
      }
      .imagemaker_info_tag a {
        border-color: @surface2 !important;
        color: @subtext0 !important;
      }
      .imagemaker_info_use_range li > div {
        background: @surface0 !important;
        border-color: @surface1 !important;
        color: @text !important;
      }
      /* tag icon (outer image maker) */
      .imagemaker_info_use_range li.is_can > div::before {
        color: @accent-color !important;
      }
    }
    .is_info_show .imagemaker_info_show_btn {
      background: @accent-color !important;
      color: @overlay0 !important;
    }
    /* outer bookmark button (outer image maker) */
    .play-Imagemaker.is_info_show .imagemaker_info_icon .bookmark {
      background-color: @surface0 !important;
      border-color: @surface2 !important;
    }
    /* dice/random button (inner image maker) */
    .imagemaker_menu_btn {
      background-color: @surface1 !important;
    }
    /* non-selected color (inner image maker) */
    .imagemaker_colorBox ul li {
      border-color: @overlay2 !important;

      /* empty color (inner image maker) */
      &.emptycolor {
        border-color: @overlay2 !important;
      }
      /* selected color (inner image maker) */
      &.selected {
        border-color: @overlay2 !important;
        box-shadow: inset 0 0 0 3px @overlay2 !important;
      }
    }
    .imagemaker_parts_menu ul li.selected {
      background-color: @surface0 !important;

      &::before {
        box-shadow: inset 0 -5px 0 -1px @accent-color !important;
      }
    }
    li.selected::after {
      box-shadow: inset 0 0 0 3px @accent-color !important;
    }
    /* switch to outer image maker (inner image maker) */
    .imagemaker_info_show_btn {
      background-color: @accent-color !important;
      border-color: @accent-color !important;
      color: @overlay0 !important;
    }
    /* bookmark button (inner image maker) */
    .play-Imagemaker .bookmark {
      background-color: @accent-color !important;
      border-color: @accent-color !important;
    }
    .imagemaker_ctrl_btns .btn_show_itemlist.selected {
      background-color: @accent-color !important;
      color: @overlay0 !important;
    }
    /* move image element (background) (inner image maker) */
    .imagemaker_controller {
      background-color: @mantle !important;
    }
    /* rotate image element (inner image maker) */
    .ctrlbtn-rotate_left,
    .ctrlbtn-rotate_right {
      background: @surface0 !important;
      color: @accent-color !important;
    }
    /* move image element (buttons) (inner image maker) */
    .control_position_wrapper .ctrlbtn_position_inner::before,
    .control_position_wrapper .ctrlbtn_position_inner::after {
      background: @surface0 !important;
    }
    .ctrlbtn-move_up,
    .ctrlbtn-move_down,
    .ctrlbtn-move_right,
    .ctrlbtn-move_left {
      color: @accent-color !important;
    }
    .imagemaker_controller_reset,
    .imagemaker_controller_reset:hover {
      background: @surface0 !important;
      color: @text !important;
    }
    /* "Done" button (inner image maker) */
    .imagemaker_complete_btn,
    .imagemaker_complete_btn:hover {
      background: @accent-color !important;
      color: @surface0 !important;
    }
    /* load screen after clicking "Done" (image complete) */
    .save_anime {
      background-color: @base !important;
    }
    /* "Your picture is done!" (image complete) */
    .complete-Main {
      background: @mantle !important;
    }
    /* download button (image complete) */
    .complete-Download_Btn,
    .complete-Download_Btn:hover {
      background: @accent-color !important;
      border-color: @accent-color !important;
      box-shadow: 0 4px 0 @accent-color !important;
      color: @surface1 !important;
    }
    /* "add to bookmarks" area (image complete) */
    .complete-Container .recommend-bookmark {
      background: @mantle !important;
      border-color: @surface0 !important;

      /* fix for "Add to bookmarks" button" */
      .c_btn {
        box-shadow: 0 4px 0 @surface0 !important;
      }
    }
    /* share image (image complete) */
    .complete-Share_Wrapper {
      background: @mantle !important;
      border-color: @surface0 !important;
    }
    .complete-ShareSns .complete-ShareSns_Copy {
      background-color: @surface0 !important;
      border-color: @surface2 !important;
      color: @subtext0 !important;
    }
    .complete-ShareText {
      .complete-ShareText_Title {
        color: @subtext0 !important;
      }
      textarea {
        background-color: @surface0 !important;
        border-color: @overlay0 !important;
        color: @subtext0 !important;
      }
    }
    /* "Create a new one!" button (image complete) */
    .complete-Btn_Back,
    .complete-Btn_Back:hover {
      background: @surface1 !important;
      border-color: @surface1 !important;
      box-shadow: 0 4px 0 @surface0 !important;
      color: @text;
    }
    .st-Related_Tags {
      background-color: @mantle !important;
    }
    .st-Related_ImagemakerList {
      background-color: @mantle !important;
    }
    .sitetop-ImagemakerList_List a .sw_imagemaker_creator {
      color: @subtext0 !important;
    }
    /* "Search by tag" (image complete) */
    .st-Related_Tags .st-Related_Tag a {
      background: @surface0 !important;
      border-color: @accent-color !important;
      color: @text !important;
    }
    /* "Copied to clipboard" popup (image complete) */
    .toasted.sw-Toast.bubble {
      background-color: @accent-color !important;
      color: @surface0 !important;
    }
    /* fix for bookmark icon (bookmarks page) */
    .bookmark-inner h2 .fa {
      color: @accent-color !important;
    }
    /* support.picrew.me page */
    .site-branding {
      background-color: @base !important;
      color: @text !important;
    }
    .menu-toggle {
      background-color: @surface0 !important;
      color: @text !important;

      &:hover {
        background-color: @surface2 !important;
        color: @text !important;
      }
    }
    .site-title a,
    .site-description {
      color: @text !important;
    }
    .bogo-language-name a {
      color: @accent-color !important;
    }
    .main-navigation {
      background-color: @mantle !important;
      color: @text !important;

      a {
        color: @text !important;
      }
      a:hover,
      ul > :hover > a {
        color: @accent-color !important;
      }
      /* "what is picrew?" page (support) */
      li.current_page_item > a::before,
      li.current-menu-item > a::before {
        border-bottom-color: @accent-color !important;
      }
      .nav-menu > li > a::after,
      .menu > li > a::after {
        color: @accent-color !important;
      }
    }
    .picrew_front-page-content-area.content-area
      .picrew_front-content
      .with-featured-image {
      background-color: @mantle !important;
    }
    .widget_linkblock {
      border-color: @accent-color !important;
      box-shadow: 0 0 0 0 @accent-color inset !important;
      color: @text !important;

      .widget_linkblock_title {
        color: @accent-color !important;
      }
      .widget_linkblock_text {
        color: @subtext1 !important;
      }
      &:hover {
        border-color: @accent-color !important;
        box-shadow: 0 0 0 4px @accent-color inset !important;
        color: @text !important;
      }
    }
    .front-widget-area {
      border-bottom-color: @surface2 !important;
    }
    .footer-widget-area {
      background-color: @mantle !important;
      border-top-color: @mantle !important;

      .widget ul > li {
        border-top-color: @surface2 !important;

        &:last-child {
          border-bottom-color: @surface2 !important;
        }
      }
      a {
        color: @text !important;
      }
      .widget-title,
      a:hover {
        color: @accent-color !important;
      }
    }
    /* aaaaaaaaaaaaaa */
    #search-3 > #searchform > div > input[type="text"] {
      background-color: @surface0 !important;
      border-color: @surface2 !important;
      color: @text !important;

      &:focus {
        border-color: @accent-color !important;
      }
    }
    #searchsubmit > button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"],
    #infinite-handle span {
      background-color: @surface1 !important;
      color: @text !important;
    }
    .site-footer {
      background-color: @crust !important;
      border-top-color: @surface0 !important;
      color: @subtext1 !important;
    }
    .page .site-content {
      background-color: @mantle !important;
    }
    .content-wrapper.full-width.without-featured-image {
      background-color: @mantle !important;
      color: @text !important;
    }
    body.page:not(.home) .entry-title {
      color: @text !important;

      &::after {
        background: @accent-color !important;
      }
    }
    .entry-content h2 {
      background: @surface0 !important;
      border-bottom-color: @accent-color !important;
      color: @text !important;
    }
    .content-wrapper.full-width .hentry::after {
      background-color: @surface1 !important;
    }
    /* "learn how to play with picrew" page (support) */
    #toc_container {
      background: @surface0 !important;
      border-color: @surface2 !important;

      a {
        color: @accent-color !important;
      }
      p.toc_title {
        color: @text !important;
      }
    }
    .entry-content {
      td,
      table {
        border-color: @surface2 !important;
      }
      h3 {
        border-bottom-color: @surface2 !important;
        border-left-color: @accent-color !important;
        color: @text !important;
      }
      h4 {
        color: @subtext1 !important;
      }
      h4::before,
      a {
        color: @accent-color !important;
      }
    }
    /* "Create your image maker" page (support) */
    .content-wrapper {
      background: @mantle !important;
    }
    .sidebar-widget-area .widget ul > li {
      border-top-color: @overlay2 !important;

      > a {
        color: @accent-color !important;
      }
    }
    /* "list of creator functions" page (support) */
    .site-content {
      background-color: @mantle !important;
    }
    .sidebar-widget-area .widget-title {
      color: @text !important;
    }
    .blog {
      .entry-title a {
        color: @accent-color !important;
      }
      .entry-body {
        color: @subtext1 !important;
      }
    }
    .wp-pagenavi {
      span.current {
        background: @accent-color !important;
        border-color: @accent-color !important;
        color: @surface1 !important;
      }
      a {
        background-color: @base !important;
        border-color: @accent-color !important;
        color: @text !important;

        &:hover {
          background-color: @accent-color !important;
          color: @surface1 !important;
        }
      }
    }
    /* "list of creator functions" archive page...? honestly idfk why this is a thing (support) */
    .archive {
      .page-title {
        color: @text !important;
      }
      .entry-title a {
        color: @accent-color !important;
      }
      .entry-body {
        color: @text !important;
      }
    }
  }
  @media (prefers-color-scheme: light) {
    :root {
      #catppuccin(@lightFlavor, @accentColor);
    }
  }
  @media (prefers-color-scheme: dark) {
    :root {
      #catppuccin(@darkFlavor, @accentColor);
    }
  }
}

/* prettier-ignore */
@catppuccin: {
  @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; };
  @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; };
  @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; };
  @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; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; };
}

// vim:ft=less