„threadr/style.css“ ändern

threadr/style.css

@@ -1,5 +1,3 @@
-/* optimized for desktop users */
-/*@media only screen and (min-width: 1280px) {*/
 .container{
   display: grid;
   grid-template-rows: 100px;
@@ -8,48 +6,89 @@
   grid-auto-rows: minmax(100px, auto);
   padding: 10px;
 }
+
 div {
   overflow: hidden;
   text-overflow: clip;
 }
+
 div.item-1 {
   grid-column: 2 / 3;
   grid-row: 1;
 }
+
 div.item-2 {
   grid-column: 2 / 3;
   grid-row: 2;
 }
+
 div.item-3 {
   grid-column: 2 / 3;
   grid-row: 3;
 }
+
 div.item-4 {
   grid-column: 2 / 3;
   grid-row: 4;
 }
+
 body {
   font-size: 1em;
 }
+
 p {
   font-family: monospace;
   color: #001858;
 }
+
 a {
   font-family: monospace;
   color: #001858;
 }
+
 i {
   font-family: monospace;
   color: #001858;
 }
+
 li {
   font-family: monospace;
   color: #001858;
 }
+
 input {
   font-family: monospace;
+  width: 100%;
+  border-radius: 4px;
+  padding: 14px 20px;
+  margin: 8px 0;
 }
+
+input[type=text], select {
+  color: #8bd3dd;
+  display: inline-block;
+  border: 1px solid #001858;
+  box-sizing: border-box;
+}
+
+input[type=password], select {
+  color: #8bd3dd;
+  display: inline-block;
+  border: 1px solid #001858;
+  box-sizing: border-box;
+}
+
+input[type=submit] {
+  background-color: #001858;
+  color: #fef6e4;
+  border: none;
+  cursor: pointer;
+}
+
+input[type=submit]:hover {
+  background-color: #8bd3dd;
+}
+
 button {
   font-family: monospace;
   width: 100%;
@@ -65,45 +104,17 @@
 button:hover {
   background-color: #8bd3dd;
 }
+
 h1, h2, h3, h4, h5, h6 {
   font-family: monospace;
   color: #001858;
 }
 
-/*}*/
-
-/* optimized for mobile users */
-/*
-@media only screen and (max-width: 1279px) {
-  .container{
-    display: grid;
-    grid-template-columns: repeat(1, 1fr);
-    grid-template-rows: 100px;
-    grid-template-columns: 1fr;
-    grid-auto-rows: minmax(100px, auto);
-  }
-  div.item-1 {
-    grid-column: 1 / 1;
-    grid-row: 1;
-  }
-  div.item-2 {
-    grid-column: 1 / 1;
-    grid-row: 2;
-  }
-  div.item-3 {
-    grid-column: 1 / 1;
-    grid-row: 3;
-  }
-  body {
-    font-size:3em;
-  }
-}
-*/
-
 div.round-border {
-  border: 1px solid;
+  border: 1px solid #001858;
-  padding: 0.01em 16px;
+  padding: 20px;
-  border-radius: 16px;
+  margin: 8px 0;
+  border-radius: 5px;
 }
 
 img {
@@ -115,23 +126,20 @@ img.available_space {
 }
 
 div.image_container {
-  border: 1px solid;
+  border: 1px solid #001858;
   padding: 0.5em 0.5em;
-  background-color: #F0F0F0;
+  background-color: #001858;
+  border-radius: 5px;
 }
 
 p.image_container {
   font-size: 0.8em;
 }
 
-div.margin {
-  margin:  20px;
-}
-
 body {
   margin:                 0px;
   background-color:       #fef6e4;
-  color:                  #000000;
+  color:                  #001858;
 }
 
 body.status_page {
@@ -313,41 +321,6 @@ div.dropdown {
   background-color: #8bd3dd;
 }
 
-input[type=text], select {
-  width: 100%;
-  padding: 12px 20px;
-  margin: 8px 0;
-  display: inline-block;
-  border: 1px solid #001858;
-  border-radius: 4px;
-  box-sizing: border-box;
-}
-
-input[type=password], select {
-  width: 100%;
-  padding: 12px 20px;
-  margin: 8px 0;
-  display: inline-block;
-  border: 1px solid #001858;
-  border-radius: 4px;
-  box-sizing: border-box;
-}
-
-input[type=submit] {
-  width: 100%;
-  background-color: #001858;
-  color: #fef6e4;
-  padding: 14px 20px;
-  margin: 8px 0;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-input[type=submit]:hover {
-  background-color: #8bd3dd;
-}
-
 div.form {
   border-radius: 5px;
   border: 1px solid #001858;