Stylus_template/nginx_proxy_manager.css

/* ==UserStyle==
@name         Nginx Proxy Manager - dark theme
@version      20240604.12.41
@namespace    https://userstyles.world/user/Erreur32
@description  Dark theme nginx proxy manager
@author       Erreur32
==/UserStyle== */
@-moz-document url-prefix("http://192.168.1.200:81") {
	/* Couleurs de base */
	:root {
		--primary-color: #1e2533;
		--secondary-color: #272e3b;
		--accent-color: #5e72e4;
		--accent-color-alt: #6b63f5;
		--text-color: #c5c9d2;
		--text-color-muted: #9da5b4;
		--border-color: #35404f;
		--background-color: #1e2533;
	}
	/* Thème général */
	body {
		background-color: var(--background-color);
		color: var(--text-color);
	}
	/* En-tête */
	.header, .footer {
		/*background-color: var(--primary-color);*/
		border-bottom: 1px solid var(--border-color);
		background-color: var(--background-color);
	}
	.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand, .navbar-light .navbar-brand:focus {
		color: unset;
	}
	.text-default {
		color: unset !important;
	}
	.navbar-brand {
		color: white;
	}
	/* Navigation */
	.header .dropdown-menu {
		margin-top: .75rem;
		background-color: #272e3b;
	}
	.dropdown-item {
		color: #6e7687;
		background-color: unset;
		border-color: #dee2e6 #dee2e6 #f5f7fb;
	}
	.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
		color: #495057;
		background-color: #c5c9d2;
		border-color: #dee2e6 #dee2e6 #f5f7fb;
	}
	.dropdown-menu {
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
		min-width: 12rem;
		color: white;
	}
	.nav-tabs .nav-link:hover {
		border-color: #e9ecef #e9ecef #dee2e6;
		color: white;
	}
	.nav-tabs .nav-link:hover:not(.disabled) {
		border-color: white;
		color: white;
	}
	.form-control {
		color: #495057;
		background-color: #222631;
	}
	.dropdown-menu {
		background-color: var(--background-color);
		border-color: white;
	}
	.dropdown-item:hover, .dropdown-item:focus {
		color: #1e2533;
		text-decoration: none;
		background-color: #f8f9fa;
	}
	.dropdown-item {
		color: #fff;
		background-color: unset;
		border-color: #dee2e6 #dee2e6 #f5f7fb;
	}
	.tag {
		background-color: #5eba00;
		color: white;
	}
	.bg-success {
		background-color: #5eba00 !important;
	}
	.bg-warning {
		background-color: #f95801 !important;
	}
	.btn-outline-success:hover {
		color: #f0eaea;
		background-color: #5eba00;
		border-color: #5eba00;
	}
	.tag.hover-green, .tag.hover-green:active, .tag.hover-green, .btn .btn-outline-success {
		background-color: #4b8b1f;
		/* Couleur de fond légèrement plus foncée pour un meilleur contraste */
		cursor: pointer;
		color: #fff;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
		/* Ombre portée pour améliorer la lisibilité */
	}
	.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
		color: #fff;
		background-color: #314455;
		border-color: #dee2e6 #dee2e6 #f5f7fb;
	}
	/* Cartes */
	.card {
		background-color: var(--secondary-color);
		border: 1px solid var(--border-color);
	}
	/* Formulaires */
	input, textarea, select {
		background-color: var(--primary-color);
		color: var(--text-color);
		border: 1px solid var(--border-color);
	}
	/* Tableaux */
	table {
		background-color: var(--secondary-color);
		border: 1px solid var(--border-color);
	}
	th {
		background-color: var(--primary-color);
		color: var(--text-color);
	}
	tr:nth-child(even) {
		background-color: var(--primary-color);
	}
	.modal-content {
		background-color: var(--background-color);
		border-color: white;
		border: 1px solid rgba(200, 195, 195, .64);
	}
	.modal-content .form-control {
		color: #171717;
		background-color: #c8cace;
	}
	.custom-switch-input:checked ~ .custom-switch-description {
		color: #d4e0ec;
	}
	.selectize-input, .selectize-control.single .selectize-input.input-active {
		background: #929aac;
		cursor: text;
		display: inline-block;
	}
	.selectize-control.multi .selectize-input > div {
		background: #5eba00;
		color: #fff;
		font-size: 17px;
		font-weight: bold;
	}
	.custom-switch-description {
		margin-left: .5rem;
		color: #a8b0c1;
	}
	.modal-content .form-control, .selectize-input.full1 {
		color: #aeecff;
		background-color: #515255;
	}
	.modal-open .modal {
		overflow-x: hidden;
		overflow-y: auto;
		background: var(--background-color);
	}
}