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

}