userstyles/src/moodle.user.css

/* ==UserStyle==
@name           Gruvbox for Moodle
@namespace      git.m3.fyi/Marsn3
@version        1.0.0
@description    Gruvbox Theme for Photopea
@author         Marsn3
@homepageURL https://git.m3.fyi/Marsn3/custom-css
@updateURL https://git.m3.fyi/Marsn3/custom-css/~raw/main/src/moodle.user.css
@license MIT
==/UserStyle== */
@-moz-document domain("moodle.rbs-ulm.de") {
  /*~~~~~ Base Colors ~~~~~*/
  html {
    --bg_h: #1d2021;
    --bg: #282828;
    --bg_s: #32302f;
    --bg1: #3c3836;
    --bg2: #504945;
    --bg3: #665c54;
    --bg4: #7c6f64;

    --fg: #fbf1c7;
    --fg1: #ebdbb2;
    --fg2: #d5c4a1;
    --fg3: #bdae93;
    --fg4: #a89984;

    --red: #fb4934 !important;
    --green: #b8bb26 !important;
    --yellow: #fabd2f !important;
    --blue: #83a598 !important;
    --purple: #d3869b !important;
    --aqua: #8ec07c !important;
    --gray: #928374 !important;
    --orange: #fe8019 !important;

    --red-dim: #cc2412;
    --green-dim: #98971a;
    --yellow-dim: #d79921;
    --blue-dim: #458588;
    --purple-dim: #b16286;
    --aqua-dim: #689d6a;
    --gray-dim: #a89984;
    --orange-dim: #d65d0e;
    --monospaceFontFamily: "ComicCodeLigatures Nerd Font", "Ubuntu Mono",
      monospace, emoji;

    --base: var(--bg) !important;
    --bg-panel: var(--bg1) !important;
    --bg-canvas: var(--bg2) !important;
    --bg-input: var(--bg1) !important;
    --bg-bbtn: var(--bg2) !important;
    --bg-bbtnOver: var(--bg1) !important;
    --brdr: var(--bg) !important;
    --text-color: var(--fg) !important;
    --alphaDark: 0.25 !important;
    --gs-invert: 1 !important;
    --accent: var(--accentColor) !important;

    --indigo: var(--purple) !important;
    --pink: var(--purple) !important;
    --teal: var(--aqua) !important;
    --cyan: var(--blue-dim) !important;
    --white: var(--fg) !important;
    --gray-dark: var(--gray-dim) !important;
    --primary: var(--green) !important;
    --secondary: var(--fg1) !important;
    --success: var(--green) !important;
    --info: var(--blue) !important;
    --warning: var(--yellow) !important;
    --danger: var(--red) !important;
    --light: var(--fg) !important;
    --dark: var(--bg4) !important;

    --activityadministration: var(--purple) !important;
    --activityassessment: var(--purple-dim) !important;
    --activitycollaboration: var(--orange) !important;
    --activitycommunication: var(--aqua-dim) !important;
    --activitycontent: var(--blue) !important;
    --activityinterface: var(--purple) !important;
  }
  body,
  .pagelayout-login #page,
  body.pagelayout-login #page,
  .card,
  .message-app,
  .bg-light {
    background: var(--bg) !important;
    color: var(--fg) !important;
  }
  #page.drawers .main-inner,
  .moremenu .nav-tabs,
  #region-main,
  .login-container {
    background-color: var(--bg1);
  }

  .secondary-navigation .navigation {
    border-color: var(--fg4);
    background-color: var(--bg1);
  }
  .userpicture {
    display: none;
  }
  .moremenu .nav-link.active {
    border-bottom-color: var(--primary);
  }

  .nav-tabs .nav-link.active,
  .nav-tabs .nav-item.show .nav-link,
  a:hover,
  .dropdown-item,
  .navbar-light .navbar-nav .nav-link.active {
    color: var(--fg4);
  }

  a {
    color: var(--fg3);
  }

  .description .course-description-item {
    background-color: var(--bg4);
  }
  .activity-item:not(.activityinline) {
    border-color: var(--fg4);
  }
  .badge-light {
    background-color: var(--fg3);
    color: var(--bg);
  }
  .alert-success {
    background-color: var(--green-dim);
    color: var(--bg);
    border-color: var(--green);
  }
  .btn-primary {
    color: var(--bg) !important;
    background-color: var(--green);
    border-color: var(--green-dim);
  }
  .btn-primary:hover,
  .btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--green-dim);
    border-color: var(--green-dim);
  }
  .btn-primary:focus,
  .btn-primary:active {
    background-color: var(--aqua-dim);
    color: var(--bg);
  }
  .btn.btn-icon:hover,
  .btn.btn-icon:focus {
    background-color: var(--fg4);
  }
  .btn {
    color: var(--bg4);
  }
  .btn:hover {
    color: var(--bg);
  }
  .bg-secondary,
  .drawer-toggles .drawer-toggler .btn {
    background-color: var(--bg4) !important;
    color: var(--fg);
  }
  #user-menu-toggle:hover {
    color: var(--fg4);
  }
  button.bg-secondary:hover,
  button.bg-secondary:focus,
  .btn-secondary:hover,
  .dropdown-item,
  .moremenu .nav-link.active:hover,
  .moremenu .nav-link:hover,
  .navbar-light .navbar-nav .nav-link:hover,
  .message-app .btn.btn-link.btn-icon:hover {
    background-color: var(--bg3) !important;
    color: var(--fg2) !important;
  }
  caption {
    color: var(--fg4);
  }
  .moremenu .nav-link.active:focus {
    border-bottom-color: var(--green);
    background-color: var(--bg2);
  }
  .text-primary {
    color: var(--green) !important;
  }
  .text-dark {
    color: var(--fg4) !important;
  }
  .text-dark:hover {
    color: var(--bg3) !important;
  }
  .moremenu .nav-link.active:hover {
    border-bottom-color: var(--green);
  }
  .btn-secondary {
    background-color: var(--bg3) !important;
    color: var(--fg2) !important;
    border-color: var(--bg4) !important;
  }
  .course-section,
  .dropdown-divider {
    border-color: var(--bg3);
  }
  .text-body,
  .dropdown-menu {
    color: var(--fg) !important;
  }
  .bg-white {
    background-color: var(--bg) !important;
  }
  .primary-navigation .navigation .nav-link {
    color: var(--fg);
  }
  .navbar.fixed-top #usernavigation .nav-link {
    color: var(--fg);
  }
  .border-left,
  .navbar.fixed-top {
    border-color: var(--bg2) !important;
  }
  .logo {
    filter: invert(86%) sepia(100%) !important;
  }

  .btn:focus,
  .drawer-toggles .drawer-toggler .btn:focus,
  .btn-primary:not(:disabled):not(.disabled):active:focus,
  .btn-secondary:not(:disabled):not(.disabled):active:focus,
  a.dropdown-toggle:focus,
  [role="button"]:focus,
  .form-control:focus,
  .nav-link:focus {
    box-shadow: 0 0 0 0.2rem var(--green);
  }

  .dropdown-menu {
    background-color: var(--bg2);
  }
  .dropdown-item {
    color: var(--fg);
    background: none !important;
  }
  .btn-outline-secondary {
    border-color: var(--fg4);
  }
  .activityiconcontainer {
    background-color: var(--green);
  }
  .activityiconcontainer.assessment {
    background-color: var(--purple-dim);
  }
  .activityiconcontainer.communication {
    background-color: var(--aqua-dim);
  }
  .btn-outline-secondary:not(:disabled):not(.disabled):active,
  .btn-outline-secondary:hover {
    color: var(--fg);
    background-color: var(--gray);
    border-color: var(--gray-dim);
  }
  .block .block-cards span.categoryname,
  .block .block-cards .btn-link {
    color: var(--bg3);
  }
  .login-container .login-divider {
    border-color: var(--bg2);
  }
  .form-control,
  .activity-add,
  .block-add {
    background-color: var(--bg3);
    color: var(--fg3);
    border: 1px solid var(--bg1);
  }
  .form-control:focus {
    background-color: var(--bg4);
    color: var(--bg);
    border-color: var(--bg1);
  }
  .form-control::placeholder {
    color: var(--bg4);
  }
  a:not([class]):focus {
    color: var(--fg);
    background-color: var(--bg3);
    box-shadow: none;
  }
  .mform fieldset,
  .border-bottom {
    border-bottom: 1px solid var(--bg3) !important;
  }
  .border-top {
    border-top: 1px solid var(--bg3) !important;
  }
  .btn-primary:focus {
    outline: none;
    border-color: var(--fg4);
  }
  .invalid-feedback {
    color: var(--red);
  }
  .form-control.is-invalid {
    border-color: var(--red);
  }
  .alert-danger {
    background-color: var(--red-dim);
    color: var(--fg);
    border-color: var(--fg);
  }
  .activityiconcontainer.content {
    background-color: var(--blue-dim);
  }
  .activityiconcontainer.collaboration {
    background-color: var(--red-dim);
  }
  .alert-info {
    color: var(--fg1);
    background-color: var(--blue);
  }
}