Add base for duolingo theme
This commit is contained in:
parent
ca0bc9450d
commit
1cb94db2d8
4 changed files with 118 additions and 257 deletions
55
src/duolingo.user.css
Normal file
55
src/duolingo.user.css
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
/* ==UserStyle==
|
||||||
|
@name Gruvbox for Duolingo
|
||||||
|
@namespace git.m3.fyi/Marsn3
|
||||||
|
@version 1.0.0
|
||||||
|
@description Gruvbox Theme for Duolingo
|
||||||
|
@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("duolingo.com") {
|
||||||
|
/*~~~~~ Base Colors ~~~~~*/
|
||||||
|
:root {
|
||||||
|
--bg_h: 29, 32, 33;
|
||||||
|
--bg: 40, 40, 40;
|
||||||
|
--bg_s: 50, 48, 47;
|
||||||
|
--bg1: 60, 56, 54;
|
||||||
|
--bg2: 80, 73, 69;
|
||||||
|
--bg3: 102, 92, 84;
|
||||||
|
--bg4: 124, 111, 100;
|
||||||
|
|
||||||
|
--fg: 251, 241, 199;
|
||||||
|
--fg1: 235, 219, 178;
|
||||||
|
--fg2: 213, 196, 161;
|
||||||
|
--fg3: 189, 174, 147;
|
||||||
|
--fg4: 168, 153, 132;
|
||||||
|
|
||||||
|
--red: 251, 73, 52;
|
||||||
|
--green: 184, 187, 38;
|
||||||
|
--yellow: 250, 189, 47;
|
||||||
|
--blue: 131, 165, 152;
|
||||||
|
--purple: 211, 134, 155;
|
||||||
|
--aqua: 142, 192, 124;
|
||||||
|
--gray: 146, 131, 116;
|
||||||
|
--orange: 254, 128, 25;
|
||||||
|
|
||||||
|
--red-dim: 204, 36, 18;
|
||||||
|
--green-dim: 152, 151, 26;
|
||||||
|
--yellow-dim: 215, 153, 33;
|
||||||
|
--blue-dim: 69, 133, 136;
|
||||||
|
--purple-dim: 177, 98, 134;
|
||||||
|
--aqua-dim: 104, 157, 106;
|
||||||
|
--gray-dim: 168, 153, 132;
|
||||||
|
--orange-dim: 214, 93, 14;
|
||||||
|
|
||||||
|
--color-snow: var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Color Logo*/
|
||||||
|
._2Wzh_ {
|
||||||
|
filter: brightness(0) saturate(100%) invert(76%) sepia(32%) saturate(998%)
|
||||||
|
hue-rotate(15deg) brightness(92%) contrast(85%);
|
||||||
|
}
|
||||||
|
}
|
||||||
60
src/github.user.css
Normal file
60
src/github.user.css
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
/* ==UserStyle==
|
||||||
|
@name Gruvbox for Github
|
||||||
|
@namespace git.m3.fyi/Marsn3
|
||||||
|
@version 1.0.1
|
||||||
|
@description A dark Theme for Gubmlz
|
||||||
|
@author Marsn3
|
||||||
|
@homepageURL https://git.m3.fyi/Marsn3/custom-css
|
||||||
|
@updateURL https://git.m3.fyi/Marsn3/custom-css/~raw/main/src/github.user.css
|
||||||
|
@license MIT
|
||||||
|
==/UserStyle== */
|
||||||
|
|
||||||
|
@-moz-document domain("github.com") {
|
||||||
|
:root {
|
||||||
|
--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;
|
||||||
|
--monospaceFontFamily: "ComicCodeLigatures Nerd Font", "Ubuntu Mono",
|
||||||
|
monospace, emoji;
|
||||||
|
}
|
||||||
|
[data-color-mode="light"][data-light-theme="light"], // Light default
|
||||||
|
[data-color-mode="dark"][data-dark-theme="light"],
|
||||||
|
[data-color-mode="light"][data-light-theme="dark"], // Dark default
|
||||||
|
[data-color-mode="dark"][data-dark-theme="dark"],
|
||||||
|
[data-color-mode="light"][data-light-theme="dark_high_contrast"], // Dark high contrast
|
||||||
|
[data-color-mode="dark"][data-dark-theme="dark_high_contrast"],
|
||||||
|
[data-color-mode="light"][data-light-theme="dark_dimmed"], //Dark dimmed
|
||||||
|
[data-color-mode="dark"][data-dark-theme="dark_dimmed"],
|
||||||
|
[data-color-mode=auto][data-light-theme*=light], //Auto colors
|
||||||
|
[data-color-mode=auto][data-light-theme*=dark] {
|
||||||
|
--color-header-bg: var(--bg4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,254 +0,0 @@
|
||||||
/* ==UserStyle==
|
|
||||||
@name Dracula for Meine Fahrschul-App
|
|
||||||
@namespace git.m3.fyi/Marsn3
|
|
||||||
@version 1.0.0
|
|
||||||
@description A dark Theme for Meine Fahrschul-App
|
|
||||||
@author Marsn3
|
|
||||||
@homepageURL https://git.m3.fyi/Marsn3/custom-css
|
|
||||||
@updateURL https://git.m3.fyi/projects/22/raw/main/src/meine-fahrschule.user.css
|
|
||||||
@license MIT
|
|
||||||
==/UserStyle== */
|
|
||||||
|
|
||||||
@-moz-document domain("meine-fahrschulapp.de") {
|
|
||||||
/*~~~~~ Base Colors ~~~~~*/
|
|
||||||
:root {
|
|
||||||
--txtPrimaryColor: #f8f8f2;
|
|
||||||
--txtHintColor: #7b81a6;
|
|
||||||
--txtDisabledColor: #9599b7;
|
|
||||||
--primaryColor: #969dca;
|
|
||||||
--bodyColor: #282a36;
|
|
||||||
--baseColor: #282a36;
|
|
||||||
--baseAlt1Color: #585b74;
|
|
||||||
--baseAlt2Color: #4d5166;
|
|
||||||
--baseAlt3Color: #424457;
|
|
||||||
--baseAlt4Color: #373949;
|
|
||||||
--infoColor: #8be9fd;
|
|
||||||
--infoAltColor: #8be9fd;
|
|
||||||
--successColor: #50fa7b;
|
|
||||||
--successAltColor: #50fa7b;
|
|
||||||
--dangerColor: #ff5555;
|
|
||||||
--dangerAltColor: #ff5555;
|
|
||||||
--warningColor: #FFB86C;
|
|
||||||
--warningAltColor: #ffffa5;
|
|
||||||
--overlayColor: rgba(65, 82, 105, 0.25);
|
|
||||||
--tooltipColor: rgba(255, 255, 255, 0.85);
|
|
||||||
--shadowColor: rgba(0, 0, 0, 0.05);
|
|
||||||
accent-color: var(--primaryColor);
|
|
||||||
}
|
|
||||||
|
|
||||||
* .tab-container,
|
|
||||||
#text,
|
|
||||||
.background-stable,
|
|
||||||
.question-selector,
|
|
||||||
.row.tab-body,
|
|
||||||
.button,
|
|
||||||
ion-content.examination,
|
|
||||||
a.button.question-field,
|
|
||||||
div,
|
|
||||||
a,
|
|
||||||
ion-header-bar,
|
|
||||||
label,
|
|
||||||
ion-nav-view,
|
|
||||||
select,
|
|
||||||
button,
|
|
||||||
ion-content.examination a.button.question-field,
|
|
||||||
ion-content.examination .header,
|
|
||||||
ion-content.examination .list.card,
|
|
||||||
body > div:nth-child(1) > ion-nav-view > ion-view > ion-nav-bar,
|
|
||||||
body
|
|
||||||
> div:nth-child(1)
|
|
||||||
> ion-nav-view
|
|
||||||
> ion-view
|
|
||||||
> ion-nav-bar
|
|
||||||
> div:nth-child(3)
|
|
||||||
> ion-header-bar,
|
|
||||||
.pane,
|
|
||||||
.view,
|
|
||||||
.tabs-training .tab-nav,
|
|
||||||
.item {
|
|
||||||
background-color: var(--bodyColor) !important;
|
|
||||||
color: var(--txtPrimaryColor) !important;
|
|
||||||
text-shadow: 1px 1px var(--baseAlt4Color);
|
|
||||||
}
|
|
||||||
ion-content.examination,
|
|
||||||
ion-content.examination-result,
|
|
||||||
ion-content.background-stable {
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
p,
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
#answer_value1 {
|
|
||||||
color: var(--textPrimaryColor) !important;
|
|
||||||
text-shadow: 1px 1px var(--baseAlt4Color);
|
|
||||||
}
|
|
||||||
body
|
|
||||||
> div:nth-child(1)
|
|
||||||
> ion-nav-view
|
|
||||||
> ion-view
|
|
||||||
> ion-content
|
|
||||||
> div.scroll
|
|
||||||
> div.question-selector
|
|
||||||
> div.row.tab-body {
|
|
||||||
background-color: var(--bodyColor) !important;
|
|
||||||
}
|
|
||||||
ion-content.examination a.button.tab-header.selected,
|
|
||||||
ion-content.examination a.button.question-field.answered {
|
|
||||||
background-color: var(--baseAlt3Color) !important;
|
|
||||||
color: var(--textPrimaryColor) !important;
|
|
||||||
text-shadow: 1px 1px var(--baseAlt4Color);
|
|
||||||
border: none !important;
|
|
||||||
}
|
|
||||||
ion-content.examination a.button.tab-header,
|
|
||||||
ion-content.examination a.button.question-field {
|
|
||||||
background-color: var(--baseAlt3Color) !important;
|
|
||||||
color: var(--textPrimaryColor) !important;
|
|
||||||
text-shadow: 1px 1px var(--baseAlt4Color);
|
|
||||||
border: none !important;
|
|
||||||
}
|
|
||||||
.question-video,
|
|
||||||
body
|
|
||||||
> div:nth-child(1)
|
|
||||||
> ion-nav-view
|
|
||||||
> ion-view
|
|
||||||
> ion-content
|
|
||||||
> div.scroll
|
|
||||||
> question
|
|
||||||
> div
|
|
||||||
> div,
|
|
||||||
body
|
|
||||||
> div:nth-child(1)
|
|
||||||
> ion-nav-view
|
|
||||||
> ion-view
|
|
||||||
> ion-content
|
|
||||||
> div.scroll
|
|
||||||
> div.question-selector,
|
|
||||||
body
|
|
||||||
> div:nth-child(1)
|
|
||||||
> ion-nav-view
|
|
||||||
> ion-view
|
|
||||||
> ion-content
|
|
||||||
> div.scroll
|
|
||||||
> question
|
|
||||||
> div
|
|
||||||
> question-video
|
|
||||||
> div:nth-child(1),
|
|
||||||
body
|
|
||||||
> div:nth-child(1)
|
|
||||||
> ion-nav-view
|
|
||||||
> ion-view
|
|
||||||
> ion-content
|
|
||||||
> div.scroll
|
|
||||||
> question
|
|
||||||
> div
|
|
||||||
> question-video
|
|
||||||
> div:nth-child(4),
|
|
||||||
body
|
|
||||||
> div:nth-child(1)
|
|
||||||
> ion-nav-view
|
|
||||||
> ion-view
|
|
||||||
> ion-content
|
|
||||||
> div.scroll
|
|
||||||
> question
|
|
||||||
> div
|
|
||||||
> question-video
|
|
||||||
> div:nth-child(2)
|
|
||||||
> div
|
|
||||||
> div,
|
|
||||||
.bar-header.has-tabs-top {
|
|
||||||
width: 50%;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
body
|
|
||||||
> div:nth-child(1)
|
|
||||||
> ion-nav-view
|
|
||||||
> ion-view
|
|
||||||
> ion-content
|
|
||||||
> div.scroll
|
|
||||||
> question
|
|
||||||
> div
|
|
||||||
> question-video
|
|
||||||
> div:nth-child(2)
|
|
||||||
> div
|
|
||||||
> div
|
|
||||||
> button {
|
|
||||||
border-right: none !important;
|
|
||||||
}
|
|
||||||
ion-content.examination a.button.question-field.selected,
|
|
||||||
.training-level-tab.selected {
|
|
||||||
background-color: var(--infoColor) !important;
|
|
||||||
color: var(--textPrimaryColor) !important;
|
|
||||||
}
|
|
||||||
.question-image {
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
transition: width 0.5s ease;
|
|
||||||
}
|
|
||||||
.question-image:hover {
|
|
||||||
width: 200%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
ion-content.examination-result .question-icon.correctly-answered {
|
|
||||||
background: var(--successColor) !important;
|
|
||||||
color: var(--textPrimaryColor) !important;
|
|
||||||
}
|
|
||||||
ion-content.examination-result .question-icon.wrongly-answered {
|
|
||||||
background: var(--dangerColor) !important;
|
|
||||||
color: var(--textPrimaryColor) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
body
|
|
||||||
> div:nth-child(1)
|
|
||||||
> ion-nav-view
|
|
||||||
> ion-view
|
|
||||||
> ion-content
|
|
||||||
> div.scroll
|
|
||||||
> div.row.header {
|
|
||||||
padding-top: 5%;
|
|
||||||
}
|
|
||||||
.balanced,
|
|
||||||
a.balanced {
|
|
||||||
color: var(--successColor);
|
|
||||||
}
|
|
||||||
a.button.tab-header.marked:before,
|
|
||||||
ion-content.examination a.button.question-field.marked:before {
|
|
||||||
border-left: 10px solid var(--warningColor);
|
|
||||||
}
|
|
||||||
.bar {
|
|
||||||
background-color: var(--baseColor);
|
|
||||||
}
|
|
||||||
.training-level-tabs {
|
|
||||||
background-color: var(--baseAlt3Color) !important;
|
|
||||||
}
|
|
||||||
hr,
|
|
||||||
.toggle.toggle-positive input:checked + .track {
|
|
||||||
color: var(--infoColor) !important;
|
|
||||||
background-color: var(--infoColor) !important;
|
|
||||||
border-color: var(--infoColor);
|
|
||||||
}
|
|
||||||
.toggle input:checked + .track {
|
|
||||||
color: var(--successColor) !important;
|
|
||||||
background-color: var(--successColor) !important;
|
|
||||||
border-color: var(--successColor);
|
|
||||||
}
|
|
||||||
.item-radio .radio-icon {
|
|
||||||
color: var(--successColor) !important;
|
|
||||||
}
|
|
||||||
.ion-log-out:before {
|
|
||||||
color: var(--dangerColor);
|
|
||||||
}
|
|
||||||
.positive {
|
|
||||||
color: var(--infoColor);
|
|
||||||
}
|
|
||||||
ion-content.examination a.button.tab-header.selected,
|
|
||||||
ion-content.examination a.button.question-field.answered {
|
|
||||||
background-color: var(--successColor) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
/* ==UserStyle==
|
/* ==UserStyle==
|
||||||
@name Gruvbox for Pocketbase
|
@name Gruvbox for Pocketbase
|
||||||
@namespace git.m3.fyi/Marsn3
|
@namespace git.m3.fyi/Marsn3
|
||||||
@version 1.0.0
|
@version 1.0.1
|
||||||
@description A dark Theme for Pocketbase
|
@description A dark Theme for Pocketbase
|
||||||
@author Marsn3
|
@author Marsn3
|
||||||
@homepageURL https://git.m3.fyi/Marsn3/custom-css
|
@homepageURL https://git.m3.fyi/Marsn3/custom-css
|
||||||
|
|
@ -64,8 +64,8 @@
|
||||||
--dangerAltColor: var(--red-dim);
|
--dangerAltColor: var(--red-dim);
|
||||||
--warningColor: var(--orange);
|
--warningColor: var(--orange);
|
||||||
--warningAltColor: var(--orange-dim);
|
--warningAltColor: var(--orange-dim);
|
||||||
--overlayColor: rgba(168, 153, 132,0.25);
|
--overlayColor: rgba(168, 153, 132, 0.25);
|
||||||
--tooltipColor: var(--bg4)
|
--tooltipColor: var(--bg4);
|
||||||
--shadowColor: rgba(50, 48, 47, 0.5);
|
--shadowColor: rgba(50, 48, 47, 0.5);
|
||||||
--accent-color: var(--primaryColor);
|
--accent-color: var(--primaryColor);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue