Refactoring for stability, etc. Add new animation.

res/webserver/style.css

@@ -1,4 +1,3 @@
-
 /* For more information visit:https://fipsok.de */
 body {
 	font-family: sans-serif;
@@ -7,72 +6,89 @@ body {
 	flex-flow: column;
 	align-items: center;
 }
-h1,h2 {
+
+h1,
+h2 {
 	color: #e1e1e1;
 	text-shadow: 2px 2px 2px black;
 }
+
 li {
 	background-color: #feb1e2;
 	list-style-type: none;
 	margin-bottom: 10px;
 	padding: 2px 5px 1px 0;
-	box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
+	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
 }
-li a:first-child, li b {
+
+li a:first-child,
+li b {
 	background-color: #8f05a5;
 	font-weight: bold;
 	color: white;
-	text-decoration:none;
+	text-decoration: none;
 	padding: 2px 5px;
 	text-shadow: 2px 2px 1px black;
-	cursor:pointer;
+	cursor: pointer;
 }
+
 li strong {
 	color: red;
 }
+
 input {
-	height:35px;
-	font-size:14px;
+	height: 35px;
+	font-size: 14px;
 	padding-left: .3em;
 }
-label + a {
+
+label+a {
 	text-decoration: none;
 }
-h1 + main {
+
+h1+main {
 	display: flex;
-}  
+}
+
 aside {
 	display: flex;
 	flex-direction: column;
 	padding: 0.2em;
 }
+
 button {
-	height:40px;
-	width:130px;
-	font-size:16px;
+	height: 40px;
+	width: 130px;
+	font-size: 16px;
 	margin-top: 1em;
-	box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
+	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
 }
+
 div button {
 	background-color: #7bff97;
 }
+
 nav {
 	display: flex;
 	align-items: baseline;
 	justify-content: space-between;
 }
+
 #left {
-	align-items:flex-end;
+	align-items: flex-end;
 	text-shadow: 0.5px 0.5px 1px #757474;
 }
+
 #cr {
 	font-weight: bold;
-	cursor:pointer;
+	cursor: pointer;
 	font-size: 1.5em;
 }
+
 #up {
-	width: auto; 
+	width: auto;
 }
+
 .note {
 	background-color: #fecdee;
 	padding: 0.5em;
@@ -81,31 +97,39 @@ nav {
 	max-width: 320px;
 	border-radius: 0.5em;
 }
+
 .no {
 	display: none;
 }
+
 form [title] {
 	background-color: skyblue;
 	font-size: 16px;
 	width: 125px;
 }
+
 form:nth-of-type(2) {
 	margin-bottom: 1em;
 }
+
 [value*=Format] {
 	margin-top: 1em;
-	box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
+	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
 }
+
 [name="group"] {
 	display: none;
 }
-[name="group"] + label {
+
+[name="group"]+label {
 	font-size: 1.5em;
 	margin-right: 5px;
 }
-[name="group"] + label::before {
+
+[name="group"]+label::before {
 	content: "\002610";
-}	
-[name="group"]:checked + label::before {
-	content: '\002611\0027A5';
 }
+
+[name="group"]:checked+label::before {
+	content: '\002611\0027A5';
+}