[proxy] improve styling of items' "install" and "uninstall" buttons in the web UI

1 files changed, 47 insertions, 3 deletions

diff --git a/src/hydrilla/proxy/web_ui/templates/base.html.jinja b/src/hydrilla/proxy/web_ui/templates/base.html.jinja
index 31613cd..8b8be4b 100644
--- a/src/hydrilla/proxy/web_ui/templates/base.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/base.html.jinja
@@ -45,11 +45,15 @@ in a proprietary work, I am not going to enforce this in court.
           }
 
           .inline-form {
-              display: inline-block;
+              display: inline-flex;
               padding: 0;
               margin: 0;
           }
 
+          .inline-form > * {
+              flex: 1 1 0;
+          }
+
           .small-print {
               font-size: 80%;
               color: #555;
@@ -61,8 +65,7 @@ in a proprietary work, I am not going to enforce this in court.
               background-color: #fcc;
           }
 
-          .green-button {
-                  background-color: #4caf50;
+          .green-button, .red-button, .blue-button {
                   border: none;
                   border-radius: 2px;
                   color: white;
@@ -77,6 +80,47 @@ in a proprietary work, I am not going to enforce this in court.
                   margin: 2px;
           }
 
+          .green-button {
+              background-color: #4caf50;
+          }
+
+          .red-button {
+              background-color: #af504c;
+          }
+
+          .red-button {
+              background-color: #504caf;
+          }
+
+          .disabled-button {
+                  background-color: #aaa;
+                  cursor: default;
+          }
+
+          .button-bordering-right {
+              margin-right: 0;
+              border-radius: 2px 0 0 2px;
+              border-right: 1px solid #65A065;
+          }
+
+          .button-bordering-left {
+              margin-left: 0;
+              border-radius: 0 2px 2px 0;
+              border-left: 1px solid #65A065;
+          }
+
+          .button-bordering-left.button-bordering-right {
+              border-radius: 0;
+          }
+
+          .button-row {
+              display: flex;
+          }
+
+          .button-row > * {
+              flex: 1 1 0;
+          }
+
           .hide {
               display: none !important;
           }