Add theme for keybr.com
This commit is contained in:
parent
a6d619cebb
commit
d4a49df6b0
2 changed files with 537 additions and 0 deletions
213
src/keybr.user.css
Normal file
213
src/keybr.user.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
324
src/moodle.user.css
Normal file
324
src/moodle.user.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue