updatev2

css/style.css

@@ -21,54 +21,87 @@ body {
     box-sizing: border-box;
 }
 
-.settings {
-    display: flex;
-    flex-direction: column;
+main {
+    flex-grow: 1;
+}
+
+.h-100 {
+    height: 100%;
+}
+
+.row {
+    margin: 0 !important;
+}
+
+.gap {
     gap: .5em;
 }
 
-.setting-group {
+.flex-grow {
+    flex-grow: 1;
+}
+
+/*.settings {*/
+/*    display: flex;*/
+/*    flex-direction: column;*/
+/*    gap: .5em;*/
+/*}*/
+
+/*.setting-group {*/
+/*    display: flex;*/
+/*    width: 50%;*/
+/*}*/
+
+/*.setting-group:last-child{*/
+/*    flex-direction: column;*/
+/*    gap: .5em;*/
+/*}*/
+
+/*.input {*/
+/*    display: flex;*/
+/*}*/
+
+
+/*.setting-group:first-child, .input {*/
+/*    justify-content: space-between;*/
+/*}*/
+
+
+/*.setting-group label {*/
+/*    display: flex;*/
+/*    width: 50%;*/
+/*}*/
+
+/*.setting-group input {*/
+/*    width: 100%;*/
+/*}*/
+
+/*.input-field {*/
+/*    width: 100%;*/
+/*    display: flex;*/
+/*    gap: .5em;*/
+/*}*/
+
+/*.args {*/
+/*    width: 100%;*/
+
+/*    display: flex;*/
+/*    gap: .5em;*/
+
+/*    flex-wrap: wrap;*/
+/*}*/
+
+.args, .db {
+    min-height: 100px;
     display: flex;
-    width: 50%;
-}
-
-.setting-group:last-child{
-    flex-direction: column;
-    gap: .5em;
-}
-
-.input {
-    display: flex;
-}
-
-
-.setting-group:first-child, .input {
+    flex-wrap: wrap;
+    align-content: start;
     justify-content: space-between;
 }
 
-
-.setting-group label {
-    display: flex;
-    width: 50%;
-}
-
-.setting-group input {
-    width: 100%;
-}
-
-.input-field {
-    width: 100%;
-    display: flex;
-    gap: .5em;
-}
-
-.args {
-    width: 100%;
-
-    display: flex;
-    gap: .5em;
-
-    flex-wrap: wrap;
+.db input {
+    width: 49% !important;
+    margin-bottom: .5em;
 }
 
 .arg {
@@ -81,6 +114,10 @@ body {
 
     gap: .25em;
     align-items: center;
+    line-height: 1;
+
+    height: fit-content;
+    width: fit-content;
 }
 
 .delete-arg {
@@ -91,60 +128,60 @@ body {
     cursor: pointer;
 }
 
-.content {
-    flex-grow: 1;
-    width: 100%;
+/*.content {*/
+/*    flex-grow: 1;*/
+/*    width: 100%;*/
 
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    gap: .5em;
-}
+/*    display: flex;*/
+/*    flex-wrap: wrap;*/
+/*    justify-content: space-between;*/
+/*    gap: .5em;*/
+/*}*/
 
-.content .buttons {
-    width: 100%;
-    display: flex;
+/*.content .buttons {*/
+/*    width: 100%;*/
+/*    display: flex;*/
 
-    justify-content: space-between;
-}
+/*    justify-content: space-between;*/
+/*}*/
 
-.content .buttons div {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 49%;
-}
+/*.content .buttons div {*/
+/*    display: flex;*/
+/*    justify-content: space-between;*/
+/*    align-items: center;*/
+/*    width: 49%;*/
+/*}*/
 
-.content textarea {
-    height: 100%;
-    width: 49%;
-}
+/*.content textarea {*/
+/*    height: 100%;*/
+/*    width: 49%;*/
+/*}*/
 
-footer {
-    display: flex;
-    width: 100%;
-    padding: .5em;
-    margin-top: .5em;
+/*footer {*/
+/*    display: flex;*/
+/*    width: 100%;*/
+/*    padding: .5em;*/
+/*    margin-top: .5em;*/
 
-    font-size: 12pt;
+/*    font-size: 12pt;*/
 
-    text-align: center;
-    align-items: center;
-    justify-content: center;
+/*    text-align: center;*/
+/*    align-items: center;*/
+/*    justify-content: center;*/
 
-    font-weight: 600;
+/*    font-weight: 600;*/
 
 
-    color: #333;
-}
+/*    color: #333;*/
+/*}*/
 
-footer a {
-    text-decoration: none;
+/*footer a {*/
+/*    text-decoration: none;*/
 
-    color: #333;
-    transition: color .5s ease;
-}
+/*    color: #333;*/
+/*    transition: color .5s ease;*/
+/*}*/
 
-footer a:hover {
-    color: blueviolet;
-}
+/*footer a:hover {*/
+/*    color: blueviolet;*/
+/*}*/