Marsn3/userstyles
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add theme for keybr.com

Browse source
This commit is contained in:
Mars Niermann 2023-02-27 20:40:24 +01:00
parent a6d619cebb
commit d4a49df6b0
No known key found for this signature in database
GPG key ID: B2D0FC62A74FC971
2 changed files with 537 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

213
src/keybr.user.css Normal file
View 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
View 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);
}
}