From 1cb94db2d85a723b2901c64b624848c76f93a3c9 Mon Sep 17 00:00:00 2001 From: Mars Niermann Date: Wed, 8 Mar 2023 00:37:05 +0100 Subject: [PATCH] Add base for duolingo theme --- src/duolingo.user.css | 55 ++++++++ src/github.user.css | 60 ++++++++ src/meine-fahrschule.user.css | 254 ---------------------------------- src/pocketbase.user.css | 6 +- 4 files changed, 118 insertions(+), 257 deletions(-) create mode 100644 src/duolingo.user.css create mode 100644 src/github.user.css delete mode 100644 src/meine-fahrschule.user.css diff --git a/src/duolingo.user.css b/src/duolingo.user.css new file mode 100644 index 0000000..9a1692e --- /dev/null +++ b/src/duolingo.user.css @@ -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%); + } +} diff --git a/src/github.user.css b/src/github.user.css new file mode 100644 index 0000000..efe86d4 --- /dev/null +++ b/src/github.user.css @@ -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); + } +} diff --git a/src/meine-fahrschule.user.css b/src/meine-fahrschule.user.css deleted file mode 100644 index faf4d18..0000000 --- a/src/meine-fahrschule.user.css +++ /dev/null @@ -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; - } -} diff --git a/src/pocketbase.user.css b/src/pocketbase.user.css index 3d70dcc..da67aad 100644 --- a/src/pocketbase.user.css +++ b/src/pocketbase.user.css @@ -1,7 +1,7 @@ /* ==UserStyle== @name Gruvbox for Pocketbase @namespace git.m3.fyi/Marsn3 -@version 1.0.0 +@version 1.0.1 @description A dark Theme for Pocketbase @author Marsn3 @homepageURL https://git.m3.fyi/Marsn3/custom-css @@ -64,8 +64,8 @@ --dangerAltColor: var(--red-dim); --warningColor: var(--orange); --warningAltColor: var(--orange-dim); - --overlayColor: rgba(168, 153, 132,0.25); - --tooltipColor: var(--bg4) + --overlayColor: rgba(168, 153, 132, 0.25); + --tooltipColor: var(--bg4); --shadowColor: rgba(50, 48, 47, 0.5); --accent-color: var(--primaryColor); }