Add Gruvbox dark theme for Portainer authored by Marsn3
This commit is contained in:
parent
dec11d26d5
commit
17c64c132a
1 changed files with 190 additions and 0 deletions
190
src/portainer.user.css
Normal file
190
src/portainer.user.css
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
/* ==UserStyle==
|
||||
@name Gruvbox for Portainer
|
||||
@namespace git.m3.fyi/Marsn3
|
||||
@version 1.0.0
|
||||
@description A dark Theme for Portainer
|
||||
@author Marsn3
|
||||
@homepageURL https://git.m3.fyi/Marsn3/userstyles
|
||||
@updateURL https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/portainer.user.css
|
||||
@license MIT
|
||||
==/UserStyle== */
|
||||
|
||||
@-moz-document domain("portainer.m3.fyi") {
|
||||
/*~~~~~ Base Colors ~~~~~*/
|
||||
:root {
|
||||
--bg-body-color: var(--bg);
|
||||
--bg-panel-body-color: var(--bg1);
|
||||
--text-body-color: var(--fg);
|
||||
--border-panel-color: var(--bg2);
|
||||
--text-muted-color: var(--fg3);
|
||||
--grey-26: var(--fg3);
|
||||
--grey-38: var(--fg3);
|
||||
--grey-3: var(--bg2);
|
||||
--grey-2: var(--bg);
|
||||
--grey-8: var(--fg4);
|
||||
--grey-1: var(--bg1);
|
||||
--bg-inputbox: var(--bg3);
|
||||
--text-form-control-color: var(--fg);
|
||||
--border-form-control-color: var(--bg4);
|
||||
--border-searchbar: var(--bg4);
|
||||
--white-color: var(--fg);
|
||||
--border-blocklist: var(--bg4);
|
||||
--ui-success-6: var(--green);
|
||||
--ui-success-7: var(--green);
|
||||
--ui-error-9: var(--red);
|
||||
--bg-codemirror-color: var(--bg);
|
||||
--text-codemirror-color: var(--fg);
|
||||
--bg-sidebar-nav-color: var(--bg);
|
||||
--border-sidebar-color: var(--bg2);
|
||||
--ui-white: var(--fg);
|
||||
--text-cm-default-color: var(--orange);
|
||||
--text-cm-string-color: var(--green);
|
||||
}
|
||||
.CodeMirror-linenumber {
|
||||
color: var(--fg3);
|
||||
}
|
||||
.label-warning {
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.label-primary,
|
||||
.label-info {
|
||||
background-color: var(--blue);
|
||||
}
|
||||
.text-warning:is([theme="dark"] *) {
|
||||
color: var(--orange);
|
||||
}
|
||||
.widget .widget-body table thead th .table-filter {
|
||||
color: var(--fg3);
|
||||
}
|
||||
.th-dark\:bg-gray-warm-11:is([theme="dark"] *) {
|
||||
background-color: var(--bg3);
|
||||
}
|
||||
.border-green-3,
|
||||
.border-gray-5 {
|
||||
border-color: var(--bg3) !important;
|
||||
}
|
||||
.text-gray-5 {
|
||||
color: var(--fg2);
|
||||
}
|
||||
.th-dark\:hover\:bg-gray-10:hover:is([theme="dark"] *) {
|
||||
background-color: var(--bg1);
|
||||
}
|
||||
.th-dark\:bg-gray-iron-10:is([theme="dark"] *),
|
||||
.th-dark\:hover\:bg-gray-true-9:hover:is([theme="dark"] *) {
|
||||
background-color: var(--bg2);
|
||||
}
|
||||
.bg-green-2,
|
||||
.th-dark\:bg-gray-true-8:is([theme="dark"] *) {
|
||||
background-color: var(--bg3);
|
||||
}
|
||||
.text-gray-6,
|
||||
.\!text-gray-6,
|
||||
.form-section-title:is([theme="dark"] *) {
|
||||
color: var(--fg3) !important;
|
||||
}
|
||||
.text-gray-3,
|
||||
.text-white {
|
||||
color: var(--fg);
|
||||
}
|
||||
.text-green-7,
|
||||
.\!text-green-7,
|
||||
.btn.btn-link:is([theme="dark"] *),
|
||||
.th-dark\:text-blue-7:is([theme="dark"] *) {
|
||||
color: var(--green) !important;
|
||||
}
|
||||
.icon-orange,
|
||||
.icon-warning {
|
||||
color: var(--yellow) !important;
|
||||
}
|
||||
.text-gray-7 {
|
||||
color: var(--fg2) !important;
|
||||
}
|
||||
.btn.btn-dangerlight:is([theme="dark"] *),
|
||||
.btn-danger {
|
||||
background-color: var(--red) !important;
|
||||
color: var(--fg) !important;
|
||||
border-color: var(--red-dim) !important;
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: var(--green) !important;
|
||||
color: var(--fg) !important;
|
||||
border-color: var(--green-dim) !important;
|
||||
}
|
||||
input::placeholder,
|
||||
textarea::placeholder,
|
||||
.portainer-selector__placeholder {
|
||||
color: var(--fg4) !important;
|
||||
}
|
||||
a.hyperlink:hover,
|
||||
a:focus,
|
||||
a:hover {
|
||||
color: var(--fg2) !important;
|
||||
}
|
||||
.form-control:focus {
|
||||
border-color: var(--green);
|
||||
box-shadow: inset 0 1px 1px rgba(40, 40, 40, 0.075),
|
||||
0 0 8px rgba(184, 187, 38, 0.6);
|
||||
}
|
||||
input:checked + .slider {
|
||||
background-color: var(--green) !important;
|
||||
}
|
||||
.th-dark\:bg-blue-3:is([theme="dark"] *) {
|
||||
background-color: var(--blue);
|
||||
}
|
||||
.th-dark\:text-green-4:is([theme="dark"] *) {
|
||||
color: var(--fg);
|
||||
}
|
||||
.th-dark\:bg-green-4:is([theme="dark"] *) {
|
||||
background-color: var(--green);
|
||||
}
|
||||
.icon {
|
||||
filter: var(--filter-reset) var(--filter-fg);
|
||||
-webkit-filter: var(--filter-reset) var(--filter-fg);
|
||||
}
|
||||
.motd-body,
|
||||
.be-indicator,
|
||||
.business,
|
||||
li[aria-label="Authentication logs"],
|
||||
#sideview > sidebar > div > button,
|
||||
#sideview > sidebar > div > nav > div.flex > div > div {
|
||||
display: none;
|
||||
}
|
||||
.th-dark\:bg-green-3\/30:is([theme="dark"] *) {
|
||||
background-color: var(--blue-dim);
|
||||
}
|
||||
img[alt="docker endpoint"],
|
||||
g[clip-path="url(#portainer_logo_svg__a)"],
|
||||
path[fill="#0091E2"] {
|
||||
filter: var(--filter-reset) var(--filter-blue);
|
||||
-webkit-filter: var(--filter-reset) var(--filter-blue);
|
||||
}
|
||||
.app-react-components-datatables-TableHeaderSortIcons-module__sort-icon,
|
||||
.portainer-selector__indicator,
|
||||
.searchIcon {
|
||||
filter: var(--filter-reset) var(--filter-fg2);
|
||||
-webkit-filter: var(--filter-reset) var(--filter-fg2);
|
||||
}
|
||||
a,
|
||||
a.hyperlink {
|
||||
color: var(--green);
|
||||
}
|
||||
.btn.btn-default:is([theme="dark"] *),
|
||||
.btn.btn-light:is([theme="dark"] *) {
|
||||
color: var(--fg) !important;
|
||||
background-color: var(--bg3);
|
||||
border-color: var(--bg4);
|
||||
}
|
||||
.th-dark\:text-white:is([theme="dark"] *),
|
||||
.control-label:is([theme="dark"] *) {
|
||||
color: var(--fg);
|
||||
}
|
||||
.widget .widget-icon:is([theme="dark"] *) {
|
||||
border: none;
|
||||
background-color: var(--bg4);
|
||||
color: var(--fg);
|
||||
}
|
||||
.th-dark\:hover\:bg-gray-9:hover:is([theme="dark"] *) {
|
||||
background-color: var(--bg2);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue