Красивые формы в CSS

src/css/grades.css

@@ -2,7 +2,7 @@ table {
 	border: 1px solid #404040;
 	box-shadow: 0px 0px 5px 5px #404040;
 	border-radius: 10px;
-	margin: 0 auto;
+	margin: 2em auto;
 	border-collapse: collapse;
 	font-size: 16pt;
 }

src/css/pockit.css

@@ -1,15 +1,24 @@
 :root {
-	--bg: #252525;
-	--fg: #ffffff;
-
-	--fg-5: #ccc;
-
-	--gray-6: #4f4f4f;
+	--gray-9: #E6E6E6;
+	--gray-8: #CCCCCC;
+	--gray-7: #B3B3B3;
+	--gray-6: #4D4D4D;
 	--gray-5: #404040;
-	--gray-4: #333;
+	--gray-4: #333333;
 	--gray-3: #252525;
+	--gray-2: #1f1f1f;
+	--gray-1: #1c1c1c;
+	--gray-0: #161616;
+
+	--error: #4B2224;
+
+	--success: #2B4B22;
+	--successhover: #3A662E;
+	--successfocus: #25401D;
+	--successborder: green;
 
-	--card-border: #396690;
+	--blue: #006DFF;
+	--accent: #396690;
 }
 
 @font-face {
@@ -18,24 +27,77 @@
 } 
 
 body {
-	background-color: var(--bg);
-	color: var(--fg);
+	background-color: var(--gray-1);
+	color: var(--gray-8);
 	font-family: 'Finlandica';
 	font-size: 18px;
 	margin: 0;
 }
 
+nav {
+	background-color: var(--gray-0);
+	border-bottom: 1px solid var(--gray-2);
+}
+
+/* Forms */
+.form-control-container {
+	margin: 1em auto;
+	position: relative;
+	display: flex;
+	flex-flow: column;
+}
+
+.form-control-container label {
+	color: var(--gray-9)
+}
+
+.form-control {
+	padding: 0.5em;
+	margin: 0.1em 0;
+	width: 1fr;
+	background-color: var(--gray-4);
+	color: var(--gray-7);
+	outline: none;
+	border-radius: 5px;
+	font-size: 16px;
+	border: 1px solid transparent;
+}
+
+.form-control:hover,
+.form-control:focus {
+	border-color: var(--gray-6);
+}
+
+.form-control:focus {
+	color: var(--gray-9);
+}
+
+/* End Forms */
+
+
 /* Buttons */
-button {
+button,
+input {
 	background-color: var(--gray-4);
 	border: 1px solid var(--gray-5);
 	padding: 0.25em;
-	color: var(--fg-5);
-	font-size: 18px;
+	color: var(--gray-6);
+	font-size: 1rem;
+	border-radius: 5px;
 }
 
-button:hover {
-	background-color: var(--gray-6);
+.createbutton {
+	background-color: var(--success);
+	border-color: var(--successborder);
+	color: var(--gray-9);
+	width: 100%;
+}
+.createbutton:hover {
+	background-color: var(--successhover);
+}
+.createbutton:active,
+.createbutton:focus {
+	background-color: var(--successfocus);
 }
 
 a {
@@ -85,7 +147,7 @@ a:hover {
 	display: block;
 	width: 100%;
 	height: 100%;
-	color: var(--fg);
+	color: var(--gray-8);
 }
 
 .stretched-link {
@@ -99,7 +161,11 @@ a:hover {
 
 /* Breadcrumbs */
 .breadcrumb {
-	padding: 0 .5rem;
+	padding: 0 0.5em;
+}
+
+.breadcrumb-item {
+	padding: 0.5em 0;
 }
 
 .breadcrumb ul {
@@ -114,27 +180,28 @@ a:hover {
   display: inline-block;
   margin: 0 .25rem;
   content: "→";
-  color: #808080;
+  color: var(--gray-7);
 }
 
 .breadcrumb-item a {
-	color: #006DFF;
+	color: var(--accent);
 }
 
 .breadcrumb-item.active {
-	color: #808080;
+	color: var(--gray-7);
 }
 
 /* End Breadcrumbs */
 
 /* Cards */
 .card {
-	border: 2px solid var(--card-border);
+	background-color: var(--gray-3);
+	border: 1px solid var(--gray-4);
 	border-radius: 15px;
-	background-color: #2f2f2f;
 	padding: 1em;
 	margin: 2em auto;
 	width: 80%;
+	max-width: 866px;
 }
 
 .card.error {
@@ -142,38 +209,4 @@ a:hover {
 	border-color: red;
 	color: #f9fbf8;
 }
-/* End Cards */
-
-/* Forms */
-
-.form-control-container {
-	margin: 1em auto;
-	position: relative;
-	display: grid;
-	grid-template-columns: 50% 50%;
-}
-
-label {
-	padding: 0.5em;
-}
-
-.form-control {
-	padding: 0.5em;
-	background-color: var(--bg);
-	color: var(--fg);
-	outline: none;
-	border: 1.5px solid transparent;
-	border-radius: 5px;
-	font-size: 14pt;
-}
-
-.form-control:focus {
-	border: 1.5px solid var(--card-border);
-	box-shadow: 0px 0px 2px 2px var(--card-border);
-}
-
-.form-control:hover {
-	box-shadow: 0px 0px 2px 2px var(--card-border);
-}
-
-/* End Forms */
+/* End Cards */

src/pockit.php

@@ -31,6 +31,7 @@ class Router {
 	public function handle(string $request_uri) {
 		if (preg_match('/^\/(?:css|fonts|img|jquery|jqueryui|js)\//', $request_uri)) {
 			// Подача как есть
+			header("Cache-Control: public, max-age=3600");
 			return false;
 		}
 

src/views/LayoutView.php

@@ -30,6 +30,7 @@ class LayoutView extends View {
 	<head>
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta http-equiv="Cache-control" content="public">
 		<title><?= $this->page_title ?></title>
 		<link rel="stylesheet" href="/jqueryui/themes/base/jquery-ui.min.css">
 		<link rel="stylesheet" href="/css/pockit.css">

src/views/RegenNewReportView.php

@@ -17,7 +17,7 @@ class RegenNewReportView extends LayoutView {
 <?php } ?>
 
 <form action="/regen/new" method="POST">
-	<div class="card">
+	<div class="card" style='border-color: var(--accent)'>
 		<div class="form-control-container">
 			<label for="sel-subject_id">Предмет</label>
 			<select class="form-control" id="sel-subject_id" name="subject_id">
@@ -46,7 +46,7 @@ class RegenNewReportView extends LayoutView {
 			<input class="form-control" id="inp-notice" placeholder="Всё что угодно" type="text" name="notice"/>
 		</div>
 
-		<input class="form-control" type="submit" value="Создать">
+		<button type="submit" class="createbutton form-control">Создать</button>
 	</div>
 </form>
 <?php }} ?>