theme.less

/* ==UserStyle==
@name           Catppuccin Intranet
@namespace      github.com/openstyles/stylus
@version        1.3.6
@description    Stylesheet to make the Epitech intranet bearable.
@author         Sigmanificient

@homepageURL    https://userstyles.world/style/20076/catppuccin-intranet
@supportURL     https://github.com/Sigmapitech/catppuccin-intranet/issues

@preprocessor less

@var select flavor "Flavor" [
  "default:None",
  "frappe:Frappé",
  "macchiato:Macchiato*",
  "mocha:Mocha"
];

@var checkbox my-epitech "Enable theme for myEpitech" 1
@var checkbox tweaks "Enables all below UI-tweaks" 1

@var checkbox remove-toggle "Remove Sidebar toggle" 1
@var checkbox remove-trombi "Remove Trombi in sidebar" 0
@var checkbox remove-call-teams "Remove Teams call button" 1
@var checkbox remove-shadows "Remove shadows" 1

@var checkbox event-registered "Registered event pattern" 1
@var checkbox new-header "Restructure the navbar" 1
@var select header-position  "Navbar position" [
  "top:top",
  "bottom:bottom"
]

@var checkbox fix-group-mgnt "Fix Group Popup" 1
@var checkbox only-token "Only show Token field" 0

/* ==/UserStyle== */
@-moz-document url-prefix("https://intra.epitech.eu") {
  @import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0);

  & when (@tweaks = 1) {
    & when (@remove-shadows = 1) {
      * {
        box-shadow: none !important;
      }
    }
  }

  /* E-learning video is a double nested iframe */
  body:has(div)::after {
    .material-symbols-outlined();

    & when not (@flavor = default) {
      // color: @lavender;
      content: '\e997';
    }

    & when (@tweaks = 1) {
      content: '\e732';
    }

    position: fixed;
    bottom: .5ch;
    left: .5ch;
  }

  & when not (@flavor = default) {
    @rosewater: @catppuccin[@@flavor][@rosewater];
    @flamingo: @catppuccin[@@flavor][@flamingo];
    @pink: @catppuccin[@@flavor][@pink];
    @mauve: @catppuccin[@@flavor][@mauve];
    @red: @catppuccin[@@flavor][@red];
    @maroon: @catppuccin[@@flavor][@maroon];
    @peach: @catppuccin[@@flavor][@peach];
    @yellow: @catppuccin[@@flavor][@yellow];
    @green: @catppuccin[@@flavor][@green];
    @teal: @catppuccin[@@flavor][@teal];
    @sky: @catppuccin[@@flavor][@sky];
    @sapphire: @catppuccin[@@flavor][@sapphire];
    @blue: @catppuccin[@@flavor][@blue];
    @lavender: @catppuccin[@@flavor][@lavender];
    @text: @catppuccin[@@flavor][@text];
    @subtext1: @catppuccin[@@flavor][@subtext1];
    @subtext0: @catppuccin[@@flavor][@subtext0];
    @overlay2: @catppuccin[@@flavor][@overlay2];
    @overlay1: @catppuccin[@@flavor][@overlay1];
    @overlay0: @catppuccin[@@flavor][@overlay0];
    @surface2: @catppuccin[@@flavor][@surface2];
    @surface1: @catppuccin[@@flavor][@surface1];
    @surface0: @catppuccin[@@flavor][@surface0];
    @base: @catppuccin[@@flavor][@base];
    @mantle: @catppuccin[@@flavor][@mantle];
    @crust: @catppuccin[@@flavor][@crust];

    a {
      color: @blue !important;
    }

    body {
      background-color: @mantle;
      color: @text;
    }

    h1,
    h2 {
      color: @text;
    }

    h3 {
      color: @blue;
    }

    fieldset {
      border: 1px solid @surface0;
    }

    input,
    textarea,
    select {
      border: 1px solid @surface0;
      background: @crust;
      color: @text;
    }

    #auth-login {
      background-color: @crust;

      .message {
        background-color: @maroon;
        border-color: @surface0;
        color: @crust;
      }

      .login-student .btn {
        background-color: @blue;
        color: @crust !important;
      }
    }

    #header {
      border-color: @surface0;

      .intra {
        background-color: @crust;
        border-bottom: 1px solid @surface0;

        .navigation {
          border-left-color: @surface0;

          tr td {
            .button {
              &:hover .label {
                background-color: @surface1;
                color: @lavender;
              }

              .label {
                background-color: @base;
                border-right-color: @surface1;
              }
            }

            &.ui-active .label {
              background-color: @surface0;
              color: @lavender;
            }
          }
        }
      }

      #notification {
        background-color: @base;

        .dropdown.ui-expanded a {
          background: @surface0;
          color: @lavender;
        }

        .dropdown .layer {
          background: @crust;
          border-color: @surface0;

          .empty {
            color: @subtext0;
          }

          .item {
            border-color: @surface0;

            &:hover {
              background: @surface0;
            }
          }
        }

        .dropdown:hover a {
          background: @surface1;
          color: @lavender;
        }
      }

      #identification {
        .title {
          color: @lavender;
        }

        &.expanded > a.infos {
          background: @surface0;
          color: @lavender;
        }

        &.expanded .menu {
          background: @surface0;
          color: @text;
        }

        a.infos {
          background-color: @base;

          &:hover {
            background: @surface1;
            color: @lavender;
          }
        }
      }
    }

    #sidebar {
      background: @crust;
      border-right: 1px solid @surface0;

      & > .wrapper > .button.toggle:hover,
      & > .wrapper > .button.toggle.open {
        background-color: @surface0;
      }

      .filters.perso .buttons.calendar .button {
        background: @surface0;

        & > span .label {
          color: #b5bfe2;
        }
      }

      form.filter.course {
        .button.expand-filters:hover {
          background-color: @blue;

          a.icon {
            filter: invert(1);
          }

          & > span .label {
            color: @crust;
          }
        }

        .datatree {
          & > dl > dt {
            background-color: @base;
          }

          dt.module.expanded {
            background-color: @surface0;

            .modif.label {
              display: none !important;
            }
          }
        }
      }

      .planning.miniview {
        background: @base;
        color: #b5bfe2;

        .navigation > a {
          color: #c6d0f5 !important;
        }

        table td,
        .navigation > a {
          color: #949cbb;
        }

        table td.weekend {
          background-color: @surface0;
        }

        table td.today {
          border-color: @blue;
        }
      }
    }

    #planning #content #planning_list .events .row {
      &:hover {
        background-color: @surface0;
      }

      &.even {
        background-color: @base;
      }
    }

    #planning .calendar .events a {
      color: @crust !important;
    }

    #planning .calendar .appoint {
      background-color: @blue;

      h4 {
        background-color: inherit !important;
        filter: brightness(80%);
      }

      span {
        color: @surface0;
      }

      .actions {
        background-color: @surface0;
      }

      &.rdv,
      &.rdv.event_registered {
        background-color: #ef9f76;
        border-color: #a56f53;
      }

      &.tp,
      &.tp.event_registered {
        background-color: #a67fbf;
        border-color: #6a4e7b;
      }

      &.class,
      &.class.event_registered {
        background-color: #85c1dc;
        border-color: #5b8ba1;
      }

      &.exam,
      &.exam.event_registered {
        background-color: #f38ba8;
        border-color: #c36b84;
      }
    }

    #breadcrumb ul li,
    #breadcrumb ul li:first-child {
      color: #c6d0f5;
      background: unset;
      background-color: @crust;
    }

    #timeline {
      .timeline {
        border-color: @surface1 !important;
      }

      .bulle {
        background-color: @surface0 !important;
        color: #a5adce !important;
      }

      .wrapper-timeleft {
        background-color: #a6d189 !important;

        .time_dead {
          background-color: #f38ba8 !important;
        }
      }
    }

    #homeboard {
      border-color: @surface1;
    }

    #homeboard section {
      background-color: @crust;
      border-color: @surface1;

      article {
        background-color: @surface0;
        border-color: @surface1;

        p.warning {
          color: #a5adce;
        }

        &:hover {
          border-color: @lavender;
        }
      }

      p.is_empty {
        color: #737994;
      }

      div.view_more {
        background: @surface1;
        color: #c6d0f5;

        &:hover {
          background: @surface0;
        }
      }
    }

    #wall #sidebar a:hover {
      background: @base;
    }

    #wall .help .sidebar_alerts .list_alerts {
      background-color: @crust;
    }

    #wall #content {
      .bloc .item:hover {
        background: @base;

        .data .content.html {
          background: @base;
        }
      }

      .item .first .links span {
        color: @subtext0;
      }
    }

    #footer {
      background: @crust;
    }

    #admin #main #content {
      .bloc.main > .group {

        background-color: @crust;
      }
    }

    #info-area .box .details {
      background: @crust;
      border: 1px solid @surface0;

      .header,
      .group.info {
        background: @base;
        width: auto; // this is required for border
      }
    }

    .button > span {
      background-color: @crust;
    }

    .button:hover > span {
      background-color: @surface1;
    }

    .navigation .switch .button.ui-active span {
      background: #8caaee;
      color: @crust;
    }

    .navigation .switch .button.next,
    .navigation .switch .button.prev {
      background-color: #ef9f76;
    }

    .arrow.picture {
      display: none;
    }

    .planner {
      .top {
        background-color: @crust;
      }

      .scroll {
        border-color: @crust;
      }

      .v-header {
        color: var(@text);
        border-color: @surface1;
        div {
          border-color: @surface1;
        }
      }

      &.daysview > .days .scroll .events {

        td {
          border-color: #a6adc8;
        }

        .hour {
          border-color: #9399b2;
        }

        .half {
          border-color: #7f849c;
        }

        .quarter {
          border-color: #6c7086;
        }
      }
    }

    .tabulation ul.tabs {
      border-bottom: 2px solid @surface1;

      li {
        background-color: @base;

        &:hover {
          background-color: @surface0 !important;
        }
      }

      .ui-active {
        background-color: @crust !important;
      }
    }

    #planify {
      .bloc.tabulation #list h3 {
        background-color: @crust;
        border-color: @surface0;
      }

      .bloc.registered,
      .bloc.notregistered {
        background-color: @mauve;
        border-color: color-mix(in srgb, @mauve, @crust);
        color: @crust;

        a {
          color: color-mix(in srgb, @blue, @crust 50%) !important;
        }
      }
    }

    #module {
      .button.hide,
      .button.show {
        background-color: @crust;
        color: @text;

        &:hover {
          background-color: @surface0;
        }

        & > span {
          color: @text;
        }
      }

      .tab > ul li.activite.is-proj .slide .access > .item.project h3,
      .tab > ul li.activite.is-rdv .slide .access > .item.rdv h3,
      .tab > ul li.activite.is-note .slide .access > .item.note h3 {
        background-color: color-mix(in srgb, @crust 75%, @blue 25%);
      }

      .tab > ul li.activite {
        .eventzone .event:hover {
          background-color: @base;
        }

        .slide .access > .item {
          .links {
            background-color: @base;
            color: @text;
          }

          h3 {
            background-color: @crust;
            color: @text;
          }
        }
      }

      .bloc.main .data .item.desc label,
      .bloc.main .data .item.competences label,
      .bloc.tabulation .data .item.files > label,
      .bloc.tabulation .data .item.description label,
      .bloc.tabulation .data .item.prof label {
        color: @blue;
      }

      .bloc {
        &.main .data .item.desc.credits label,
        &.main .data .item.desc.semestre label {
          color: @subtext1;
        }

        &.top .item.title .code-module span,
        &.top .item.title .code-instance span,
        &.top .item.title .nbcredits span {
          color: @subtext1;
        }

        &.top a span.icon:hover {
          color: color-mix(in srgb, @blue, @crust 25%);
        }

        .tab > ul li.activite {
          &.future > .title .dates .bargraph {
            background-color: none;
            border-color: @green;
          }

          & > .title {
            background: @crust;
            border: 1px solid @surface0;

            .dates .bargraph > .bar {
              background-color: @peach;
            }

            .categ {
              color: @subtext0;
            }

            &:hover {
              background-color: @surface0;
            }
          }
        }
      }
    }

    div.datagrid tbody tr.item.ui-selected,
    div.datagrid tbody tr.item.ui-selecting {
      background-color: @blue;
      color: @crust;

      a {
        color: color-mix(in srgb, @blue, @crust 80%) !important;
      }
    }

    div.datagrid tbody tr.item.ui-selected:hover {
      background-color: color-mix(in srgb, @blue 80%, @crust);
      color: @crust;
    }

    #profil {
      #notes .details {
        background: @crust;
      }

      .bloc.main .data > .infos {
        background: @crust;
        color: @text;
        border-color: @surface0;
      }

      #flags .item {
        background: @crust;
        color: @text;

        .header,
        .success {
          border-color: @lavender;
        }
      }

      #log_container {
        .highcharts-series-group ~ rect {
          fill: @overlay0;
        }

        .highcharts-tooltip {
          rect {
            fill: @crust;
          }
        }

        .highcharts-axis-labels ~ g > rect {
          fill: @crust;
          stroke: @surface0;

          &:hover {
            fill: @surface0;
          }
        }

        .highcharts-series-group ~ g > rect {
          fill: @crust;
        }

        defs + rect {
          fill: @crust;

          & + g > rect {
            fill: @base;
            stroke: @crust;

            & + rect,
            ~ g > rect {
              fill: @surface0;
              stroke: @crust;
            }
          }
        }

        text,
        tspan {
          fill: @text;
        }
      }

      #graph_container {
        defs + rect {
          fill: none;
        }

        text {
          fill: @text !important;
        }

        .highcharts-tooltip rect {
          fill: @crust;
        }

        .highcharts-point > path {
          fill: @crust;
        }
      }

      #binome .link {
        stroke: @surface0 !important;
      }
    }

    #elearning #content {
      .stepview .mainview .buttons .button.fullscreen {
        filter: invert(.95);
      }

      .rzone .annex .ui-active {
        background: @crust;
      }

      .bloc .data .mainview ul li .wrapper.expand ul {
        border-color: @base;
      }

      .homeview ul li .color-wrapper {
        background: @crust;
      }

      .bloc .data .mainview ul li .wrapper.expand ul,
      .homeview ul li .maxi-wrapper .wrapper.expand .separator,
      .bloc .data .mainview ul li .title {
        background: @base;
      }

      .homeview ul li .wrapper ul {
        background: @base;
      }

      .homeview ul li .maxi-wrapper .separator {
        background: @base;
      }

      .homeview ul li.has-tp .onglet .filter li.cours.active {
        background: @crust;
      }


      .homeview ul li.has-class .onglet .filter li.cours {
        background: @base;
      }

      .homeview ul li.has-class .onglet .filter li.tp.active {
        background: @crust;
      }

      .homeview ul li.is-class .onglet .filter li.cours,
      .homeview ul li.has-class .onglet .filter li.tp {
        background: @crust;
      }
    }

    #nmodalOverlay {
      background-color: @surface1;
    }

    .popup.custom {
      background-color: @base;

      h1 {
        background-color: @crust;
      }
    }

    div.datagrid {
      border: 1px solid @surface0;
      color: @subtext0;

      table thead th > div,
      table th > div,
      table thead th div div {
        background: @crust;
        border-left: 1px solid @surface0;
      }

      tbody tr:nth-child(2n) {
        background-color: @mantle;
      }

      tbody tr.item:hover {
        background: @base;
        color: @text;
      }


      div:last-child table tfoot tr {
        background-color: @crust;
      }

      .overflow {
        background-color: @crust;
      }
    }

    .bloc.notallowed {
      background: @peach;
      border: 2px solid @crust;
      color: @crust;
    }

    .ncompletion.complete.user {
      position: fixed;
      top: 0;
      background: @crust;
      border: 2px solid @surface0;
      transform: translateY(.5em);

      tr {
        padding-inline: 1em;
        display: flex;

        td:nth-child(1) {
          height: auto;
        }
      }

      tr:hover,
      tr.ui-selected {
        background-color: @base !important;
      }
    }

    .popup.custom.manage.group {
      .item.master,
      .list {
        background: @mantle;
        border: 0;
      }

      .list ul li:hover .wrapper {
        background: @surface0;
      }
    }

    .popup .help {
      background: @surface0;
      border-bottom: none;
    }

    .button.register,
    .button.unregister,
    .button.apply,
    .button.ok,
    .button.no,
    .button.evaluate,
    .button.new-ticket,
    .button.destroy,
    .button.save,
    .button.create,
    .button.confirm,
    .button.stage,
    .button.inherit-duplicate,
    .button.convert,
    .button.note,
    .button.diffuse,
    .button.self-assign {
      background: color-mix(in srgb, @blue, @crust) !important;
      color: @crust !important;

      &:hover,
      &:hover > span {
        background: @blue !important;
      }

      & > span {
        background: color-mix(in srgb, @blue 80%, @crust) !important;
        color: @crust;
      }
    }

    #board #content .datagrid td > span.bargraph {
      border: 1px solid @peach;

      span {
        background-color: @peach;
      }
    }

    .popup.infos .details_stage .date_created,
    .popup.infos .details_stage .date_modified {
      background-color: @crust;
    }

    .popup.infos .details_stage .validated_adm,
    .popup.infos .details_stage div.canceled,
    .popup.infos .details_stage .refused,
    .popup.infos .details_stage .signature,
    .popup.infos .details_stage .validated_pedago {
      background-color: @crust;
    }

    .ui-widget-content {
      background: @mantle;
      color: @text;
    }

    .ui-state-default,
    .ui-widget-content .ui-state-default,
    .ui-widget-header .ui-state-default {
      background: @base;
      border: 1px solid @surface0;
    }

    .user.info.box {
      background-color: @crust;
      border: 1px solid @surface0;
    }

    & when not (@flavor = latte) {
      #breadcrumb .icon,
      #breadcrumb ~ .message > .note span.icon,
      #header #notification .dropdown .logo,
      #homeboard span.icon,
      #board #content .datagrid span.icon,
      #module .icon.state,
      #project_title + span.icon,
      .resume > .icon {
        // make the icon white until replacement
        color: white;
        filter: grayscale(1) brightness(10) contrast(1) saturate(0) brightness(10);
      }

      #homeboard span.icon,
      .main .message .rdv span span.icon {
        filter: invert(1);
      }
    }

    #project #tab-group.tab li.group .members li.member .statuscode {
      color: @overlay1;
    }

    .cxm ul {
      background-color: @crust;
      border-color: @surface0;

      li.item {
        border: 0;

        &.over {
          border: 0;
          background-color: @base;
        }
      }

      li.spacer div {
        border-bottom: none;
      }
    }

    input[type = "checkbox"]:not(:checked) {
      filter: invert(1) hue-rotate(180deg);
    }
  }

  /* ------------------------- UI Tweaks ------------------------- */
  body when (@tweaks = 1) {
    .cxm ul {

      li.item {
        padding: 1ch 1em;

        .icon {
          margin: 0 !important;
        }

        a {
          display: flex;
          align-items: center;
          gap: 1ch;
        }

        label {
          margin: 0;
        }
      }

      li.spacer div {
        border-bottom: none;
      }
    }

    .popup.custom div.modal.close {
      filter: invert(1) hue-rotate(180deg);
    }

    .rzone > span,
    .rzone div {
      text-align: left;
      padding-inline: 1em;
    }

    #header #identification.expanded a span.small {
      text-transform: none;
    }

    .popup.custom.generic .data,
    .popup.custom .data {
      margin-bottom: 1em;
    }

    .popup.custom.manage.group when (@fix-group-mgnt = 1) {
      .item.master .title,
      .list ul li .title {
        margin-left: 2px;
        text-overflow: ellipsis;
        white-space: pre;
        overflow: hidden;
      }

      .item.buttons {
        position: relative;
        margin: 0 20px;
        width: auto;
        box-sizing: border-box;
        display: flex;
        gap: 1em;

        & > a {
          height: 20px;
          margin: 0;

          &:nth-child(2) {
            order: 3;
          }

          &:nth-child(3) {
            margin-left: auto;
          }

          span {
            height: inherit;
            display: flex;
            align-items: center;
            justify-content: center;

            .icon {
              // mess-up the layout
              display: none;
            }

            span {
              height: auto;
              margin: 0;
            }
          }
        }
      }

      .data.manage.group,
      .help {
        overflow: visible;
      }

      .item.master,
      .list {
        border: none;
        padding: 4px;
      }

      .list {
        height: auto;
      }

      .value input,
      .value textarea {
        height: 2rem;
        padding: 1em 0.5em;
        width: 100%;
        display: block;
        box-sizing: border-box;
        z-index: 1;
      }
    }

    li.trombi when (@remove-trombi = 1) {
      display: none !important;
    }

    #toggle-sidebar when (@remove-toggle = 1) {
      display: none !important;
    }

    .event_registered::before when (@event-registered = 1) {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0.1;
      background: linear-gradient(135deg, #00000055 25%, transparent 25%) -29px 0/ 58px 58px,
      linear-gradient(225deg, #000000 25%, transparent 25%) -29px 0/ 58px 58px,
      linear-gradient(315deg, #00000055 25%, transparent 25%) 0px 0/ 58px 58px,
      linear-gradient(45deg, #000000 25%, #e5e5f7 25%) 0px 0/ 58px 58px;
    }

    #header when (@header-position = bottom) {
      position: fixed;
      bottom: 0;
      z-index: calc(infinity);

      border-top-width: 1px;
      border-top-style: solid;

      #notification .dropdown .layer {
        bottom: calc(100% + 8px);
      }

      #identification .menu {
        top: auto;
        bottom: calc(100%);
      }
    }

    #content when (@header-position = bottom) {
      padding-top: 4px;
    }

    #header when (@new-header = 1) {
      .intra {
        .navigation {
          margin-left: 0;
          max-width: unset;

          table {
            table-layout: auto;
          }

          table td .button {
            margin: 0;
            width: inherit;
            max-width: unset;
          }
        }

        .reserved {
          background: url(https://1l.is/epitech-intranet/epitech_logo.png) no-repeat left center;
          width: 60px !important;
          margin-left: 10px;
        }
      }

      #notification .dropdown {
        position: relative;

        .logo {
          margin: 0;
        }

        a {
          display: flex;
          align-items: center;
          padding-inline: 1ch;
        }

        .layer {
          right: 0;
        }
      }

      #identification .infos {
        display: flex;
        align-items: center;
        gap: 1;

        .title {
          padding: 0;
          margin-left: 0;
        }

        .picture {
          min-width: 30px
        }
      }

      #tab-group ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-evenly;
        gap: 2ch;
        padding: 1em;

        li {
          width: auto !important;
        }

        li .wrapper {
          padding: 1em;
          border-right: none !important;
        }

        .members {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
          gap: 1ch;

          .member {
            margin-left: 0 !important;
            width: auto !important;
          }

          &:after {
            content: unset !important;
          }
        }
      }
    }

    .modal > .dataform {
      + .item.buttons {
        position: relative !important;
        height: auto;

        & > .button {
          margin-top: 0;
          margin-bottom: 1.5em;
        }
      }

      .item.token when (@only-token = 1) {
        display: flex;
        gap: 1em;
        align-items: center;
        justify-content: center;

        input {
          width: 75%;
          margin-block: 2em;
        }

        & ~ .text,
        & ~ .comment {
          display: none;
        }
      }
    }

    .button.teams when(@remove-call-teams = 1) {
      display: none !important;
    }

    .actions when(@remove-call-teams = 1) {
      .callwithteams {
        display: none !important;
      }

      &:not(:has(> :nth-child(2))) {
        display: none !important;
      }
    }
  }
}


@-moz-document domain("my.epitech.eu") {
  & when (@my-epitech = 1) and not (@flavor = default) {

    @rosewater: @catppuccin[@@flavor][@rosewater];
    @flamingo: @catppuccin[@@flavor][@flamingo];
    @pink: @catppuccin[@@flavor][@pink];
    @mauve: @catppuccin[@@flavor][@mauve];
    @red: @catppuccin[@@flavor][@red];
    @maroon: @catppuccin[@@flavor][@maroon];
    @peach: @catppuccin[@@flavor][@peach];
    @yellow: @catppuccin[@@flavor][@yellow];
    @green: @catppuccin[@@flavor][@green];
    @teal: @catppuccin[@@flavor][@teal];
    @sky: @catppuccin[@@flavor][@sky];
    @sapphire: @catppuccin[@@flavor][@sapphire];
    @blue: @catppuccin[@@flavor][@blue];
    @lavender: @catppuccin[@@flavor][@lavender];
    @text: @catppuccin[@@flavor][@text];
    @subtext1: @catppuccin[@@flavor][@subtext1];
    @subtext0: @catppuccin[@@flavor][@subtext0];
    @overlay2: @catppuccin[@@flavor][@overlay2];
    @overlay1: @catppuccin[@@flavor][@overlay1];
    @overlay0: @catppuccin[@@flavor][@overlay0];
    @surface2: @catppuccin[@@flavor][@surface2];
    @surface1: @catppuccin[@@flavor][@surface1];
    @surface0: @catppuccin[@@flavor][@surface0];
    @base: @catppuccin[@@flavor][@base];
    @mantle: @catppuccin[@@flavor][@mantle];
    @crust: @catppuccin[@@flavor][@crust];

    @keyframes loader {
      from {
        transform: scaleX(0);
      }

      50% {
        transform: scaleX(1);
      }
    }

    body {
      background: @base;
    }

    #elm-mdl-layout-main {
      color: @subtext1;
    }

    .mdl {
      &-layout__header {
        background: @crust;
      }

      &-shadow--2dp,
      &-shadow--4dp {
        box-shadow: none;
      }

      &-color-text--primary-dark {
        color: color-mix(in srgb, @text 20%, @blue) !important;
      }

      &-color-text--black {
        color: @text !important;
      }

      &-color-text--red-500 {
        color: color-mix(in srgb, @red, red) !important;
      }

      &-color--primary-dark {
        background: @mantle !important;
      }

      &-list__item {
        color: @subtext0;
      }

      &-tabs.is-upgraded &-tabs__tab.is-active {
        color: @blue;

        &:after {
          background: @blue;
        }
      }

      &-tabs__tab {
        color: @text;

        &-bar {
          border-bottom: none;
        }
      }

      &-spinner {
        width: 100%;
        height: 2px;
        top: 0;
        position: absolute;

        &__layer {
          display: none;
        }

        &.is-upgraded.is-active {
          animation: none;

          &:after {
            animation: loader 2s cubic-bezier(.09, .78, .21, .97) infinite !important;
            background: @blue;
          }
        }

        &:after {
          content: "";
          position: absolute;
          inset: 0;
          transform: scaleX(0);
        }
      }

      &-menu {
        &__outline {
          background: @crust;
        }

        &__item {
          color: @text;

          &:hover {
            background: @base;
          }
        }
      }

      &-layout.is-upgraded &-layout__tab.is-active::after,
      &-textfield__label::after {
        background: @blue !important;
      }

      &-card {
        background: @mantle;
        border: 2px solid @surface0;

        &__title {
          color: @text;
        }
      }
    }

    #elm-mdl-layout-main div[style = "margin: 4px;"] {
      margin: 0 !important;
    }
  }
}


@catppuccin: {
  @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;
  }
}