Dark theme input fields

2020-07-22 15:17:27 +02:00 · 2020-07-22 15:17:27 +02:00 · 8f50c5b297
commit 8f50c5b297
parent 8668413a58
1 changed files with 41 additions and 1 deletions
--- a/templates/base.html
+++ b/templates/base.html
@ -33,6 +33,11 @@
 			font-size: 2vh;
 		}

+		nav span {
+			padding: 2vw;
+			font-family: monospace;
+		}
+
 		nav a {
 			text-decoration: none;

@ -98,9 +103,42 @@
 		.alignRight {
 			float: right;
 		}
+
 		.accentuated {
 			color: #66351d;
 		}
+
+		:root {
+			--white: #afafaf;
+			--red: #e31b23;
+			--bodyColor: #292a2b;
+			--borderFormEls: hsl(0, 0%, 10%);
+			--bgFormEls: hsl(0, 0%, 14%);
+			--bgFormElsFocus: hsl(0, 7%, 20%);
+		}
+
+		select,
+		input,
+		textarea,
+		button {
+			width: 100%;
+			line-height: 1.5;
+			padding: 15px 10px;
+			border: 1px solid var(--borderFormEls);
+			color: var(--white);
+			background: var(--bgFormEls);
+			transition: background-color 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25),
+			transform 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);
+		}
+
+		textarea {
+			height: 170px;
+		}
+
+		::placeholder {
+			color: inherit;
+			opacity: 1;
+		}
 	</style>
 </head>
 <body>
@ -121,7 +159,9 @@
 	<ul class="alignRight">
 		{% if user.is_authenticated %}
 			<li class="accentuated">
+				<span>
 					Hello, {{ user.username }}
+				</span>
 			</li>
 			<li>
 				<a href="{% url 'users:logout' %}">