From d7a73b3624fd1e7634ae13ab750e506b91938b5f Mon Sep 17 00:00:00 2001 From: Mars Niermann Date: Wed, 29 Mar 2023 19:17:51 +0200 Subject: [PATCH 1/7] Update Gruvbox themes for Proxmox, Searx, and Base, adding new styles and improving overall design --- src/base.user.css | 19 +++- src/headscaleui.user.css | 192 +++++++++++++++++++++++++++++++++++++++ src/proxmox.user.css | 8 +- src/searx.user.css | 5 +- 4 files changed, 212 insertions(+), 12 deletions(-) create mode 100644 src/headscaleui.user.css diff --git a/src/base.user.css b/src/base.user.css index e922e2a..379c7d1 100644 --- a/src/base.user.css +++ b/src/base.user.css @@ -1,7 +1,7 @@ /* ==UserStyle== @name Gruvbox Base @namespace git.m3.fyi/Marsn3 -@version 1.0.2 +@version 1.0.4 @description Base Gruvbox Theme @author Marsn3 @homepageURL https://git.m3.fyi/Marsn3/userstyles @@ -151,4 +151,21 @@ regexp("about:(?!addons|app-manager|config|customizing|stylish-edit|downloads|pe --bg-road: url("https://cdn.m3.fyi/road.jpg") !important; } + input::placeholder, + textarea::placeholder { + color: var(--fg4) !important; + } + input, + textarea { + color: var(--fg) !important; + } + * { + scrollbar-color: var(--fg2) var(--bg3) !important; + } + ::-webkit-scrollbar { + background-color: var(--bg3); + } + ::-webkit-scrollbar-thumb { + background-color: var(--fg2); + } } diff --git a/src/headscaleui.user.css b/src/headscaleui.user.css new file mode 100644 index 0000000..d58acaa --- /dev/null +++ b/src/headscaleui.user.css @@ -0,0 +1,192 @@ +/* ==UserStyle== +@name Gruvbox for Headscale-UI +@namespace git.m3.fyi/Marsn3 +@version 1.0.2 +@description A dark Theme for Headscale-UI +@author Marsn3 +@homepageURL https://git.m3.fyi/Marsn3/userstyles +@updateURL https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/headscaleui.user.css +@license MIT +==/UserStyle== */ + +@-moz-document domain("vpn.m3.fyi") { + img[src="static/img/headscale3-dots.png"] { + filter: invert(100%) sepia(100%); + -webkit-filter: invert(100%) sepia(100%); + } + .red.darken-1 { + background-color: var(--bg3) !important; + } + body { + background-color: var(--bg); + color: var(--fg); + } + .modal, + .card { + background-color: var(--bg1); + } + .modal .modal-close { + color: var(--fg); + } + .modal-footer { + background-color: var(--bg_h) !important; + color: var(--fg); + } + .collection.with-header .collection-header, + .collapsible-header, + .collection .collection-item { + background-color: var(--bg1); + border-bottom: 1px solid var(--bg3); + } + .collection { + border: 1px solid var(--bg3); + } + .btn, + .btn-small, + .btn-large { + color: var(--fg); + background-color: var(--green); + } + .btn:hover, + .btn-small:hover, + .btn-large:hover { + background-color: var(--green-dim); + } + .material-icons, + nav ul a, + nav .brand-logo, + .btn-floating i { + color: var(--fg); + } + .grey.lighten-2 { + background-color: var(--fg4) !important; + color: var(--fg); + } + .z-depth-1 { + box-shadow: 0 2px 2px 0 rgba(40, 40, 40, 0.14), + 0 3px 1px -2px rgba(40, 40, 40, 0.12), 0 1px 5px 0 rgba(40, 40, 40, 0.2); + } + nav ul a:hover { + background-color: rgba(40, 40, 40, 0.1); + } + .orange-text, + .yellow-text, + .modal-trigger { + color: var(--yellow) !important; + } + .card + .card-action + a:not(.btn):not(.btn-small):not(.btn-large):not(.btn-large):not( + .btn-floating + ):hover { + color: var(--yellow-dim) !important; + } + .green-text, + .input-field .prefix.active { + color: var(--green) !important; + } + .red.darken-3, + .green { + background-color: var(--green) !important; + } + .white-text { + color: var(--fg) !important; + } + .blue-grey.lighten-1 { + background-color: var(--blue-dim) !important; + } + .blue-grey-text.text-lighten-1 { + color: var(--blue-dim) !important; + } + .teal-text.text-lighten-1 { + color: var(--aqua) !important; + } + .teal.lighten-1 { + background-color: var(--aqua) !important; + } + .grey-text { + color: var(--gray) !important; + } + .green-text.text-lighten-2 { + color: var(--green-dim) !important; + } + .material-tooltip { + color: var(--fg); + background-color: var(--bg2); + } + .dropdown-content li { + color: var(--fg); + } + .collection .collection-item.avatar i.circle { + color: var(--fg); + background-color: var(--bg3); + } + .dropdown-content li > a, + .dropdown-content li > span { + color: var(--fg); + } + .divider { + background-color: var(--bg4); + } + #dropdown1 > li:nth-child(3) { + background-color: var(--bg1); + } + table.striped > tbody > tr:nth-child(2n + 1) { + background-color: var(--bg4); + } + .input-field > label { + color: var(--fg3); + } + input:not([type]):not(.browser-default), + input[type="text"]:not(.browser-default), + input[type="password"]:not(.browser-default), + input[type="email"]:not(.browser-default), + input[type="url"]:not(.browser-default), + input[type="time"]:not(.browser-default), + input[type="date"]:not(.browser-default), + input[type="datetime"]:not(.browser-default), + input[type="datetime-local"]:not(.browser-default), + input[type="month"]:not(.browser-default), + input[type="tel"]:not(.browser-default), + input[type="number"]:not(.browser-default), + input[type="search"]:not(.browser-default), + textarea.materialize-textarea { + border-bottom: 1px solid var(--fg3); + } + input:not([type]):not(.browser-default):focus:not([readonly]) + label, + input[type="text"]:not(.browser-default):focus:not([readonly]) + label, + input[type="password"]:not(.browser-default):focus:not([readonly]) + label, + input[type="email"]:not(.browser-default):focus:not([readonly]) + label, + input[type="url"]:not(.browser-default):focus:not([readonly]) + label, + input[type="time"]:not(.browser-default):focus:not([readonly]) + label, + input[type="date"]:not(.browser-default):focus:not([readonly]) + label, + input[type="datetime"]:not(.browser-default):focus:not([readonly]) + label, + input[type="datetime-local"]:not(.browser-default):focus:not([readonly]) + + label, + input[type="month"]:not(.browser-default):focus:not([readonly]) + label, + input[type="tel"]:not(.browser-default):focus:not([readonly]) + label, + input[type="number"]:not(.browser-default):focus:not([readonly]) + label, + input[type="search"]:not(.browser-default):focus:not([readonly]) + label, + textarea.materialize-textarea:focus:not([readonly]) + label, + a { + color: var(--green); + } + + input:not([type]):not(.browser-default):focus:not([readonly]), + input[type="text"]:not(.browser-default):focus:not([readonly]), + input[type="password"]:not(.browser-default):focus:not([readonly]), + input[type="email"]:not(.browser-default):focus:not([readonly]), + input[type="url"]:not(.browser-default):focus:not([readonly]), + input[type="time"]:not(.browser-default):focus:not([readonly]), + input[type="date"]:not(.browser-default):focus:not([readonly]), + input[type="datetime"]:not(.browser-default):focus:not([readonly]), + input[type="datetime-local"]:not(.browser-default):focus:not([readonly]), + input[type="month"]:not(.browser-default):focus:not([readonly]), + input[type="tel"]:not(.browser-default):focus:not([readonly]), + input[type="number"]:not(.browser-default):focus:not([readonly]), + input[type="search"]:not(.browser-default):focus:not([readonly]), + textarea.materialize-textarea:focus:not([readonly]) { + border-bottom: 1px solid var(--green); + box-shadow: 0 1px 0 0 var(--green); + } +} diff --git a/src/proxmox.user.css b/src/proxmox.user.css index 2950808..edc2e0f 100644 --- a/src/proxmox.user.css +++ b/src/proxmox.user.css @@ -1,7 +1,7 @@ /* ==UserStyle== @name Gruvbox for Proxmox @namespace git.m3.fyi/Marsn3 -@version 1.0.3 +@version 1.0.4 @description Gruvbox Theme for Proxmox @author Marsn3 @homepageURL https://git.m3.fyi/Marsn3/userstyles @@ -296,10 +296,4 @@ box-shadow: none; border-color: var(--bg4); } - ::-webkit-scrollbar { - background-color: var(--bg1); - } - ::-webkit-scrollbar-thumb { - background-color: var(--bg3); - } } diff --git a/src/searx.user.css b/src/searx.user.css index 13cc455..ad15473 100644 --- a/src/searx.user.css +++ b/src/searx.user.css @@ -1,7 +1,7 @@ /* ==UserStyle== @name Gruvbox for Searx @namespace git.m3.fyi/Marsn3 -@version 1.0.4 +@version 1.0.5 @description Gruvbox Theme for Searx @author Marsn3 @homepageURL https://git.m3.fyi/Marsn3/userstyles @@ -112,9 +112,6 @@ .search_filters select { filter: var(--filter-reset) var(--filter-fg) !important; } - * { - scrollbar-color: var(--fg2) var(--bg3) !important; - } #main_index { margin-top: 0em; } From 2fe8a1dd03fab805b704a3a2d1afb2cb86c8903b Mon Sep 17 00:00:00 2001 From: Mars Niermann Date: Wed, 29 Mar 2023 21:36:01 +0200 Subject: [PATCH 2/7] Add Headscale-UI to the list of sites in Readme.md --- Readme.md | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/Readme.md b/Readme.md index 13c5cf7..786791e 100644 --- a/Readme.md +++ b/Readme.md @@ -4,16 +4,17 @@ Userstyles to add the Gruvbox theme to various sites ## Installation -| Site | Link | -| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Base | [![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/base.user.css) | -| Duolingo | [![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/duolingo.user.css) | -| Keybr | [![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/keybr.user.css) | -| Moodle | [![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/moodle.user.css) | -| OneDev | [![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/onedev.user.css) | -| Paperless | [![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/paperless.user.css) | -| Photopea | [![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/photopea.user.css) | -| Pocketbase | [![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/pocketbase.user.css) | -| Portainer | [![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/portainer.user.css) | -| Proxmox | [![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/proxmox.user.css) | -| SearX/SearXNG | [![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/searx.user.css) | +| Site | Link | +| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Base | [![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/base.user.css) | +| Duolingo | [![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/duolingo.user.css) | +| Headscale-UI | [![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/headscaleui.user.css) | +| Keybr | [![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/keybr.user.css) | +| Moodle | [![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/moodle.user.css) | +| OneDev | [![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/onedev.user.css) | +| Paperless | [![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/paperless.user.css) | +| Photopea | [![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/photopea.user.css) | +| Pocketbase | [![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/pocketbase.user.css) | +| Portainer | [![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/portainer.user.css) | +| Proxmox | [![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/proxmox.user.css) | +| SearX/SearXNG | [![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/searx.user.css) | From 65f9bdcc47ea040d0cf9c1b6691ece70e825a7bd Mon Sep 17 00:00:00 2001 From: Mars Niermann Date: Wed, 29 Mar 2023 21:38:49 +0200 Subject: [PATCH 3/7] Update version to 1.0.3 and add yellow color to modal-trigger in Gruvbox for Headscale-UI userstyle --- src/headscaleui.user.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/headscaleui.user.css b/src/headscaleui.user.css index d58acaa..72bc659 100644 --- a/src/headscaleui.user.css +++ b/src/headscaleui.user.css @@ -1,7 +1,7 @@ /* ==UserStyle== @name Gruvbox for Headscale-UI @namespace git.m3.fyi/Marsn3 -@version 1.0.2 +@version 1.0.3 @description A dark Theme for Headscale-UI @author Marsn3 @homepageURL https://git.m3.fyi/Marsn3/userstyles @@ -10,6 +10,9 @@ ==/UserStyle== */ @-moz-document domain("vpn.m3.fyi") { + .modal-trigger { + color: var(--yellow); + } img[src="static/img/headscale3-dots.png"] { filter: invert(100%) sepia(100%); -webkit-filter: invert(100%) sepia(100%); @@ -69,9 +72,9 @@ nav ul a:hover { background-color: rgba(40, 40, 40, 0.1); } + .orange-text, - .yellow-text, - .modal-trigger { + .yellow-text { color: var(--yellow) !important; } .card From ee42d3029afd0b874977b8b39f098e8d49f05e22 Mon Sep 17 00:00:00 2001 From: Mars Niermann Date: Wed, 29 Mar 2023 23:35:31 +0200 Subject: [PATCH 4/7] Add hover background color to table rows, change background color of dropdown content, and update focus styles for select dropdowns and chips in Headscale UI --- src/headscaleui.user.css | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/src/headscaleui.user.css b/src/headscaleui.user.css index 72bc659..d04eb86 100644 --- a/src/headscaleui.user.css +++ b/src/headscaleui.user.css @@ -41,9 +41,15 @@ background-color: var(--bg1); border-bottom: 1px solid var(--bg3); } + .dropdown-content { + background-color: var(--bg2); + } .collection { border: 1px solid var(--bg3); } + tr:hover { + background-color: var(--bg4) !important; + } .btn, .btn-small, .btn-large { @@ -155,6 +161,7 @@ input[type="search"]:not(.browser-default), textarea.materialize-textarea { border-bottom: 1px solid var(--fg3); + background-color: var(--bg3); } input:not([type]):not(.browser-default):focus:not([readonly]) + label, input[type="text"]:not(.browser-default):focus:not([readonly]) + label, @@ -188,8 +195,24 @@ input[type="tel"]:not(.browser-default):focus:not([readonly]), input[type="number"]:not(.browser-default):focus:not([readonly]), input[type="search"]:not(.browser-default):focus:not([readonly]), - textarea.materialize-textarea:focus:not([readonly]) { + textarea.materialize-textarea:focus:not([readonly]), + .select-wrapper input.select-dropdown:focus, + .chips.focus { border-bottom: 1px solid var(--green); box-shadow: 0 1px 0 0 var(--green); } + .keyboard-focused .collapsible-header:focus { + background-color: var(--bg2); + } + .chip { + color: var(--fg); + background-color: var(--fg4); + } + .chip:focus { + color: var(--fg); + background-color: var(--green); + } + .red.lighten-2 { + background-color: var(--red) !important; + } } From 9fee9887a1b93e2e0020249ad3882b9d3a986915 Mon Sep 17 00:00:00 2001 From: Mars Niermann Date: Thu, 30 Mar 2023 01:00:54 +0200 Subject: [PATCH 5/7] Update Gruvbox Base user style version to 1.0.5 and add background color to input and textarea fields --- src/base.user.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/base.user.css b/src/base.user.css index 379c7d1..4aac253 100644 --- a/src/base.user.css +++ b/src/base.user.css @@ -1,7 +1,7 @@ /* ==UserStyle== @name Gruvbox Base @namespace git.m3.fyi/Marsn3 -@version 1.0.4 +@version 1.0.5 @description Base Gruvbox Theme @author Marsn3 @homepageURL https://git.m3.fyi/Marsn3/userstyles @@ -158,6 +158,7 @@ regexp("about:(?!addons|app-manager|config|customizing|stylish-edit|downloads|pe input, textarea { color: var(--fg) !important; + background-color: var(--bg3) !important; } * { scrollbar-color: var(--fg2) var(--bg3) !important; From 8232d0e083b35fd82e869d8df256ab2aee82e950 Mon Sep 17 00:00:00 2001 From: Mars Niermann Date: Thu, 30 Mar 2023 01:01:54 +0200 Subject: [PATCH 6/7] Update Gruvbox Base user style to version 1.0.6 and make minor color adjustments --- src/base.user.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/base.user.css b/src/base.user.css index 4aac253..fb71965 100644 --- a/src/base.user.css +++ b/src/base.user.css @@ -1,7 +1,7 @@ /* ==UserStyle== @name Gruvbox Base @namespace git.m3.fyi/Marsn3 -@version 1.0.5 +@version 1.0.6 @description Base Gruvbox Theme @author Marsn3 @homepageURL https://git.m3.fyi/Marsn3/userstyles @@ -153,12 +153,12 @@ regexp("about:(?!addons|app-manager|config|customizing|stylish-edit|downloads|pe } input::placeholder, textarea::placeholder { - color: var(--fg4) !important; + color: var(--fg3) !important; } input, textarea { color: var(--fg) !important; - background-color: var(--bg3) !important; + background-color: var(--bg2) !important; } * { scrollbar-color: var(--fg2) var(--bg3) !important; From a586466beb28a3c73d5b176656b30d0a84d62216 Mon Sep 17 00:00:00 2001 From: Mars Niermann Date: Thu, 30 Mar 2023 02:08:30 +0200 Subject: [PATCH 7/7] Update version number to 1.0.7 and remove unnecessary CSS rules --- src/base.user.css | 20 +------------------- 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/src/base.user.css b/src/base.user.css index fb71965..f7313f9 100644 --- a/src/base.user.css +++ b/src/base.user.css @@ -1,7 +1,7 @@ /* ==UserStyle== @name Gruvbox Base @namespace git.m3.fyi/Marsn3 -@version 1.0.6 +@version 1.0.7 @description Base Gruvbox Theme @author Marsn3 @homepageURL https://git.m3.fyi/Marsn3/userstyles @@ -151,22 +151,4 @@ regexp("about:(?!addons|app-manager|config|customizing|stylish-edit|downloads|pe --bg-road: url("https://cdn.m3.fyi/road.jpg") !important; } - input::placeholder, - textarea::placeholder { - color: var(--fg3) !important; - } - input, - textarea { - color: var(--fg) !important; - background-color: var(--bg2) !important; - } - * { - scrollbar-color: var(--fg2) var(--bg3) !important; - } - ::-webkit-scrollbar { - background-color: var(--bg3); - } - ::-webkit-scrollbar-thumb { - background-color: var(--fg2); - } }