form fields for video config modal

web/styles/config.scss

@@ -186,4 +186,72 @@
     //   align-items: flex-start;
     // }
   }
+
+}
+.variant-form {
+  .blurb {
+    margin: 1em;
+    opacity: .75;
+  }
+  .note {
+    display: inline-block;
+    margin-left: 1em;
+    font-size: .75em;
+    opacity: .5;
+    font-style: italic;
+  }
+  .section-intro {
+    margin-bottom: 2em;
+  }
+  .field {
+    margin-bottom: 2em;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: flex-start;
+    transform: opacity .15s;
+    &.disabled {
+      opacity: .25;
+    }
+
+    .label {
+      width: 40%;
+      text-align: right;
+      padding-right: 2em;
+      font-weight: bold;
+      color: var(--owncast-purple);
+    }
+    .info-tip {
+      margin-right: 1em;
+    }
+    .form-component {
+      width: 60%;
+      .ant-slider-with-marks {
+        margin-right: 2em;
+      }
+      .ant-slider-mark-text {
+        font-size: .85em;
+        white-space: nowrap;
+      }
+      
+      .selected-value-note {
+        font-size: .85em;
+        display: inline-block;
+        text-align: center;
+      }
+    }
+  }
+  .ant-collapse {
+    border: none;
+    border-radius: 6px;
+  }
+  .ant-collapse > .ant-collapse-item:last-child, 
+  .ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
+    border: none;
+    background-color: rgba(0,0,0,.25);
+    border-radius: 6px;
+  }
+  .ant-collapse-content {
+    background-color: rgba(0,0,0,.1);
+  }
 }

web/styles/globals.scss

@@ -27,12 +27,9 @@ pre {
   display: block;
   padding: 1rem;
   margin: .5rem 0;
-  background-color: #eee;
+  background-color: rgb(44, 44, 44);
+  color:lightgrey;
 }
-// pre {
-//   background-color: rgb(44, 44, 44);
-//   color:lightgrey;
-// }
 
 code {
   color: var(--owncast-purple);
@@ -41,12 +38,6 @@ code {
 .owncast-layout .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected {
   background-color: $owncast-purple;
 }
-
-// 07050d
-
-// 020103
-
-
 // GENERAL ANT FORM OVERRIDES
 .ant-layout,
 .ant-layout-footer,
@@ -93,6 +84,17 @@ code {
 .ant-table-small .ant-table-thead > tr > th {
   background-color: #000;
 }
+.ant-modal-content {
+  border-radius: 6px;
+}
+.ant-modal-header {
+  background-color: #1c173d;
+  border-radius: 6px 6px 0 0;
+}
+.ant-modal-title {
+  font-weight: bold;
+  font-size: 1.5em;
+}
 
 // markdown editor overrides