userstyles/src/sites/moodle.user.css

/* ==UserStyle==
@name           Gruvbox for Moodle
@namespace      git.m3.fyi/Marsn3
@version        1.0.5
@description    Gruvbox Theme for Moodle
@author         Marsn3
@homepageURL https://git.m3.fyi/Marsn3/userstyles
@updateURL https://git.m3.fyi/Marsn3/userstyles/raw/branch/main/src/sites/moodle.user.css
@license MIT
==/UserStyle== */
@-moz-document domain("moodle.rbs-ulm.de") {

  /*~~~~~ Base Colors ~~~~~*/
  html {
    --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,
  .drawer,
  .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,
  .path-mod .activity-header:not(:empty) {
    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;
  }

  .courseindex .courseindex-item.pageitem:hover,
  .courseindex .courseindex-item.pageitem:focus {
    background-color: var(--green-dim);
    color: var(--fg) !important;
  }

  .courseindex .courseindex-item.pageitem {
    background-color: var(--green);
    color: var(--fg);
  }

  .text-dark,
  .courseindex .courseindex-item:hover .courseindex-link,
  .courseindex .courseindex-item:hover .courseindex-chevron,
  .courseindex .courseindex-item:focus .courseindex-link,
  .courseindex .courseindex-item:focus .courseindex-chevron {
    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,
  .courseindex .courseindex-item .courseindex-link,
  .courseindex .courseindex-item .courseindex-chevron,
  .generaltable {
    color: var(--fg) !important;
  }

  .bg-white {
    background-color: var(--bg) !important;
  }

  .primary-navigation .navigation .nav-link,
  .path-mod-assign td.submissionnotgraded,
  .path-mod-assign div.submissionnotgraded {
    color: var(--fg);
  }

  .navbar.fixed-top #usernavigation .nav-link,
  .text-dark,
  .courseindex .courseindex-item:hover .courseindex-link,
  .courseindex .courseindex-item:hover .courseindex-chevron,
  .courseindex .courseindex-item:focus .courseindex-link,
  .courseindex .courseindex-item:focus .courseindex-chevron {
    color: var(--fg) !important;
  }

  .border-left,
  .navbar.fixed-top {
    border-color: var(--bg2) !important;
  }

  .logo,
  .atto_image_button_text-bottom {
    filter: var(--filter-reset) var(--filter-fg3) !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,
  .aabtn.focus,
  .aabtn:focus,
  .btn-link.focus,
  .btn-link:focus,
  .nav-link.focus,
  .nav-link:focus,
  .editor_atto_toolbar button.focus,
  .editor_atto_toolbar button:focus,
  .editor_atto_toolbar .atto_toolbar_row.focus,
  .editor_atto_toolbar .atto_toolbar_row:focus,
  [role="button"].focus,
  [role="button"]:focus,
  .list-group-item-action.focus,
  .list-group-item-action:focus,
  input[type="checkbox"].focus,
  input[type="checkbox"]:focus,
  input[type="radio"].focus,
  input[type="radio"]:focus,
  input[type="file"].focus,
  input[type="file"]:focus,
  input[type="image"].focus,
  input[type="image"]:focus,
  .sr-only-focusable.focus,
  .sr-only-focusable:focus,
  a.dropdown-toggle.focus,
  a.dropdown-toggle:focus,
  .modal-dialog[tabindex="0"].focus,
  .modal-dialog[tabindex="0"]:focus,
  .moodle-dialogue-base .closebutton.focus,
  .moodle-dialogue-base .closebutton:focus,
  button.close.focus,
  button.close:focus,
  .form-autocomplete-selection.focus,
  .form-autocomplete-selection:focus,
  [role="treeitem"]:not([aria-expanded="true"]).focus,
  [role="treeitem"]:not([aria-expanded="true"]):focus,
  .nav-link:focus {
    box-shadow: 0 0 0 0.2rem var(--green-dim);
  }

  .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);
  }

  span[style="color: #000099"] {
    color: var(--blue) !important;
  }
}