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

Update Gruvbox themes for Proxmox, Searx, and Base, adding new styles and improving overall design

Browse source
This commit is contained in:
Mars Niermann 2023-03-29 19:17:51 +02:00
parent 94480e8149
commit d7a73b3624
No known key found for this signature in database
GPG key ID: B2D0FC62A74FC971
4 changed files with 212 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/base.user.css
View file

@ -1,7 +1,7 @@
/* ==UserStyle== /* ==UserStyle==
@name Gruvbox Base @name Gruvbox Base
@namespace git.m3.fyi/Marsn3 @namespace git.m3.fyi/Marsn3
@version 1.0.2 @version 1.0.4
@description Base Gruvbox Theme @description Base Gruvbox Theme
@author Marsn3 @author Marsn3
@homepageURL https://git.m3.fyi/Marsn3/userstyles @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; --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);
}
} }

192
src/headscaleui.user.css Normal file
View file

@ -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);
}
}

8
src/proxmox.user.css
View file

@ -1,7 +1,7 @@
/* ==UserStyle== /* ==UserStyle==
@name Gruvbox for Proxmox @name Gruvbox for Proxmox
@namespace git.m3.fyi/Marsn3 @namespace git.m3.fyi/Marsn3
@version 1.0.3 @version 1.0.4
@description Gruvbox Theme for Proxmox @description Gruvbox Theme for Proxmox
@author Marsn3 @author Marsn3
@homepageURL https://git.m3.fyi/Marsn3/userstyles @homepageURL https://git.m3.fyi/Marsn3/userstyles
@ -296,10 +296,4 @@
box-shadow: none; box-shadow: none;
border-color: var(--bg4); border-color: var(--bg4);
} }
::-webkit-scrollbar {
background-color: var(--bg1);
}
::-webkit-scrollbar-thumb {
background-color: var(--bg3);
}
} }

5
src/searx.user.css
View file

@ -1,7 +1,7 @@
/* ==UserStyle== /* ==UserStyle==
@name Gruvbox for Searx @name Gruvbox for Searx
@namespace git.m3.fyi/Marsn3 @namespace git.m3.fyi/Marsn3
@version 1.0.4 @version 1.0.5
@description Gruvbox Theme for Searx @description Gruvbox Theme for Searx
@author Marsn3 @author Marsn3
@homepageURL https://git.m3.fyi/Marsn3/userstyles @homepageURL https://git.m3.fyi/Marsn3/userstyles
@ -112,9 +112,6 @@
.search_filters select { .search_filters select {
filter: var(--filter-reset) var(--filter-fg) !important; filter: var(--filter-reset) var(--filter-fg) !important;
} }
* {
scrollbar-color: var(--fg2) var(--bg3) !important;
}
#main_index { #main_index {
margin-top: 0em; margin-top: 0em;
} }