From d4a49df6b0b09f2a8be11d5549e90e3e882fa0c7 Mon Sep 17 00:00:00 2001
From: Mars Niermann <mars@mniermann.de>
Date: Mon, 27 Feb 2023 20:40:24 +0100
Subject: [PATCH] Add theme for keybr.com

---
 src/keybr.user.css  | 213 +++++++++++++++++++++++++++++
 src/moodle.user.css | 324 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 537 insertions(+)
 create mode 100644 src/keybr.user.css
 create mode 100644 src/moodle.user.css

diff --git a/src/keybr.user.css b/src/keybr.user.css
new file mode 100644
index 0000000..a1a3b63
--- /dev/null
+++ b/src/keybr.user.css
@@ -0,0 +1,213 @@
+/* ==UserStyle==
+@name           Gruvbox for Keybr
+@namespace      git.m3.fyi/Marsn3
+@version        1.0.0
+@description    Gruvbox Theme for Keybr
+@author         Marsn3
+@homepageURL https://git.m3.fyi/Marsn3/custom-css
+@updateURL https://git.m3.fyi/Marsn3/custom-css/~raw/main/src/keybr.user.css
+@license MIT
+==/UserStyle== */
+@-moz-document domain("keybr.com") {
+  /*~~~~~ Base Colors ~~~~~*/
+  html[data-theme="dark"] {
+    --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;
+    --green: #b8bb26;
+    --yellow: #fabd2f;
+    --blue: #83a598;
+    --purple: #d3869b;
+    --aqua: #8ec07c;
+    --gray: #928374;
+    --orange: #fe8019;
+
+    --red-dim: #cc2412;
+    --green-dim: #98971a;
+    --yellow-dim: #d79921;
+    --blue-dim: #458588;
+    --purple-dim: #b16286;
+    --aqua-dim: #689d6a;
+    --gray-dim: #a89984;
+    --orange-dim: #d65d0e;
+
+    --text-color: var(--fg4);
+    --link-color: var(--blue);
+    --header-color: var(--fg3);
+    --background-color: var(--bg2);
+    --Keyboard-frame__color: transparent;
+    --KeyboardKey-button__color: var(--bg3);
+    --KeyboardKey-button--special__color: var(--bg);
+    --KeyboardKey-button--depressed__color: var(--fg4);
+    --KeyboardKey-symbol__color: var(--fg);
+    --KeyboardKey-symbol--special__color: var(--fg);
+    --KeyboardKey-symbol--depressed__color: var(--bg1);
+    --KeyboardKey-symbol--dead__color: var(--red);
+    --KeyboardZone--a__color: var(--fg2);
+    --KeyboardZone--a__colorAlt: var(--fg2);
+    --KeyboardZone--b__color: var(--fg2);
+    --KeyboardZone--b__colorAlt: var(--fg2);
+    --TextInput-item__color: var(--fg2);
+    --TextInput-item--miss__background-color: var(--red-dim);
+    --TextInput-item--garbage__color: var(--fg);
+    --TextInput-item--garbage__background-color: var(--red-dim);
+    --TextInput-cursor__color: var(--bg);
+    --TextInput-cursor__background-color: var(--fg);
+    --LessonKey__color: var(--bg);
+    --LessonKey--included__color: var(--bg);
+    --LessonKey--excluded__color: var(--fg3);
+    --LessonKey--excluded__background-color: var(--bg1);
+    --LessonKey--uncalibrated__color: var(--bg);
+    --LessonKey--uncalibrated__background-color: var(--fg2);
+    --LessonKey--boosted__color: var(--bg);
+    --LessonKey--boosted__outline-color: var(--fg);
+    --LessonKey--forced__color: var(--bg);
+    --LessonKey--current__outline-color: var(--fg);
+    --LessonKey--slow__color: var(--red);
+    --LessonKey--fast__color: var(--green);
+    --DailyGoal-bar__color: var(--bg4);
+    --DailyGoal-frame__color: var(--fg4);
+    --Chart-frame__color: var(--fg4);
+    --Chart-speed__color: var(--aqua);
+    --Chart-accuracy__color: var(--red);
+    --Chart-keyCount__color: var(--purple-dim);
+    --Chart-threshold__color: var(--purple);
+    --Chart-keySpeed__color: var(--blue-dim);
+    --Chart-keyFrequency-h__color: var(--aqua);
+    --Chart-keyFrequency-m__color: var(--red-dim);
+    --Chart-keyFrequency-r__color: var(--purple-dim);
+    --Calendar-caption__background-color: var(--bg);
+    --Calendar-headerCell__background-color: var(--bg);
+    --Calendar-cell__color: var(--bg);
+    --Calendar-cell__background-color: var(--blue-dim);
+    --Calendar-cell--s3__background-color: var(--blue-dim);
+    --Calendar-cell--z__background-color: var(--bg);
+    --Name-color: var(--fg2);
+    --Value-color: var(--gray);
+    --ValueDelta--more__color: var(--green-dim);
+    --ValueDelta--less__color: var(--red-dim);
+    --Popup__color: var(--fg4);
+    --Popup__background-color: var(--bg);
+    --PlayerDetails__color: var(--bg4);
+    --Icon__color: var(--fg2);
+    --TabList-item--active__color: var(--bg4);
+    --Button__color: var(--fg);
+    --Button__background-color: var(--bg4);
+    --Button--focused__color: var(--fg);
+    --Button--focused__background-color: var(--fg4);
+    --TextField__color: var(--fg4);
+    --TextField__background-color: var(--bg1);
+    --TextField--focused__color: vap(--bg4);
+    --TextField--focused__background-color: var(--bg4);
+    --MenuItem__color: vap(--fg);
+    --MenuItem__background-color: var(--bg2);
+    --MenuItem--selected__color: var(--fg);
+    --MenuItem--selected__background-color: vap(--bg2);
+    --NavLink__color: var(--fg3);
+    --NavLink--current__color: var(--bg3);
+    --Body__background-image: url("https://m3.fyi/assets/road.jpg");
+  }
+
+  /*~~~~~~~ Homerow ~~~~~~~*/
+  /*----- Left -----*/
+  [data-key="KeyA"] {
+    --KeyboardKey-button__color: var(--yellow);
+  }
+  [data-key="KeyS"] {
+    --KeyboardKey-button__color: var(--blue);
+  }
+  [data-key="KeyD"] {
+    --KeyboardKey-button__color: var(--green);
+  }
+  [data-key="KeyF"] {
+    --KeyboardKey-button__color: var(--red);
+  }
+
+  /*----- Right -----*/
+  [data-key="KeyJ"] {
+    --KeyboardKey-button__color: var(--purple);
+  }
+  [data-key="KeyK"] {
+    --KeyboardKey-button__color: var(--green);
+  }
+  [data-key="KeyL"] {
+    --KeyboardKey-button__color: var(--blue);
+  }
+  [data-key="Semicolon"] {
+    --KeyboardKey-button__color: var(--yellow);
+  }
+
+  /*~~~~~~~ Homerow ~~~~~~~*/
+  /*----- Left -----*/
+  [data-key="Backquote"],
+  [data-key="Digit1"],
+  [data-key="KeyQ"],
+  [data-key="KeyZ"] {
+    --KeyboardKey-button__color: var(--yellow-dim);
+  }
+
+  [data-key="Digit2"],
+  [data-key="KeyW"],
+  [data-key="KeyX"] {
+    --KeyboardKey-button__color: var(--blue-dim);
+  }
+  [data-key="Digit3"],
+  [data-key="KeyE"],
+  [data-key="KeyC"] {
+    --KeyboardKey-button__color: var(--green-dim);
+  }
+  [data-key="Digit4"],
+  [data-key="Digit5"],
+  [data-key="KeyR"],
+  [data-key="KeyV"],
+  [data-key="KeyT"],
+  [data-key="KeyG"],
+  [data-key="KeyB"] {
+    --KeyboardKey-button__color: var(--red-dim);
+  }
+
+  /*----- Right -----*/
+  [data-key="Digit6"],
+  [data-key="Digit7"],
+  [data-key="KeyY"],
+  [data-key="KeyH"],
+  [data-key="KeyN"],
+  [data-key="KeyU"],
+  [data-key="KeyM"] {
+    --KeyboardKey-button__color: var(--purple-dim);
+  }
+
+  [data-key="Digit8"],
+  [data-key="KeyI"],
+  [data-key="Comma"] {
+    --KeyboardKey-button__color: var(--green-dim);
+  }
+  [data-key="Digit9"],
+  [data-key="KeyO"],
+  [data-key="Period"] {
+    --KeyboardKey-button__color: var(--blue-dim);
+  }
+  [data-key="Digit0"],
+  [data-key="Minus"],
+  [data-key="Equal"],
+  [data-key="BracketLeft"],
+  [data-key="BracketRight"],
+  [data-key="Quote"],
+  [data-key="Backslash"],
+  [data-key="Slash"],
+  [data-key="KeyP"] {
+    --KeyboardKey-button__color: var(--yellow-dim);
+  }
+}
diff --git a/src/moodle.user.css b/src/moodle.user.css
new file mode 100644
index 0000000..5eb45db
--- /dev/null
+++ b/src/moodle.user.css
@@ -0,0 +1,324 @@
+/* ==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);
+  }
+}