Merge branch 'admin-css-overhaul-pt3' of github.com:owncast/owncast-admin into admin-css-overhaul-pt3

web/styles/ant-overrides.scss

@@ -1,6 +1,5 @@
 // GENERAL ANT OVERRIDES
 
-
 // RESET BG, TEXT COLORS
 .ant-layout,
 .ant-layout-header,
@@ -23,7 +22,7 @@ td.ant-table-column-sort,
 .ant-menu-submenu > .ant-menu,
 .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
   background-color: transparent;
-  color: var(--default-text-color)
+  color: var(--default-text-color);
 }
 
 h1.ant-typography,
@@ -39,7 +38,7 @@ h5.ant-typography,
 .ant-typography h5 {
   color: var(--white);
   font-weight: 400;
-  margin: .5em 0;
+  margin: 0.5em 0;
 }
 .ant-typography.ant-typography-secondary {
   color: var(--white);
@@ -71,15 +70,11 @@ h3.ant-typography {
   font-size: 1.25em;
 }
 
-
-
 .ant-progress-text,
 .ant-progress-circle .ant-progress-text {
   color: var(--default-text-color);
 }
 
-
-
 // ANT MENU
 // menu base
 .ant-menu-item {
@@ -130,7 +125,7 @@ h3.ant-typography {
 }
 // submenu items
 .ant-menu-submenu {
-  &> .ant-menu {
+  & > .ant-menu {
     border-left: 1px solid var(--white-50);
     background-color: var(--black-35);
   }
@@ -165,7 +160,6 @@ h3.ant-typography {
   }
 }
 
-
 // ANT RESULT
 .ant-result-title {
   color: var(--default-text-color);
@@ -174,7 +168,6 @@ h3.ant-typography {
   color: var(--white-75);
 }
 
-
 // ANT CARD
 .ant-card {
   border-radius: var(--container-border-radius);
@@ -196,7 +189,6 @@ h3.ant-typography {
   border-color: var(--white-25);
 }
 
-
 // ANT INPUT
 input.ant-input,
 textarea.ant-input {
@@ -252,9 +244,6 @@ textarea.ant-input {
   padding-right: 25px;
 }
 
-
-
-
 // ANT BUTTON
 .ant-btn {
   background-color: var(--owncast-purple-25);
@@ -299,7 +288,6 @@ textarea.ant-input {
   transition-duration: 0.15s;
 }
 
-
 // ANT TABLE
 .ant-table-thead > tr > th,
 .ant-table-small .ant-table-thead > tr > th {
@@ -339,10 +327,9 @@ textarea.ant-input {
 }
 .ant-table-thead th.ant-table-column-sort {
   background-color: var(--owncast-purple-25);
-  opacity: .75;
+  opacity: 0.75;
 }
 
-
 // MODAL
 .ant-modal,
 .ant-modal-body {
@@ -384,7 +371,7 @@ textarea.ant-input {
 }
 .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
   background-color: var(--black);
-  border-color:  var(--owncast-purple-50);
+  border-color: var(--owncast-purple-50);
 }
 .ant-select-arrow {
   color: var(--owncast-purple);
@@ -409,10 +396,10 @@ textarea.ant-input {
 //   margin-right: 2em;
 // }
 .ant-slider-mark-text {
-  font-size: .85em;
+  font-size: 0.85em;
   white-space: nowrap;
   color: var(--white);
-  opacity: .5;
+  opacity: 0.5;
 }
 .ant-slider-handle {
   border-color: var(--blue);
@@ -441,15 +428,14 @@ textarea.ant-input {
   }
 }
 
-
 // ANT COLLAPSE
 .ant-collapse {
   font-size: 1em;
   border-color: transparent;
-  &> .ant-collapse-item,
+  & > .ant-collapse-item,
   .ant-collapse-content {
     border-color: transparent;
-    &> .ant-collapse-header {
+    & > .ant-collapse-header {
       border-radius: var(--container-border-radius);
       border-color: transparent;
       background-color: var(--purple-dark);
@@ -461,15 +447,14 @@ textarea.ant-input {
 .ant-collapse-content {
   background-color: var(--black-35); //#181231;
 }
-.ant-collapse > .ant-collapse-item:last-child, .ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
+.ant-collapse > .ant-collapse-item:last-child,
+.ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
   border-radius: var(--container-border-radius) var(--container-border-radius) 0 0;
 }
 .ant-collapse-item:last-child > .ant-collapse-content {
   border-radius: 0 0 var(--container-border-radius) var(--container-border-radius);
 }
 
-
-
 // ANT POPOVER
 .ant-popover-inner {
   background-color: var(--gray);
@@ -477,14 +462,11 @@ textarea.ant-input {
 .ant-popover-message,
 .ant-popover-inner-content {
   color: var(--default-text-color);
-
 }
 .ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow {
   border-color: var(--gray);
 }
 
-
-
 // ANT TAGS
 .ant-tag-red,
 .ant-tag-orange,
@@ -493,7 +475,6 @@ textarea.ant-input {
   background-color: var(--black);
 }
 
-
 // ANT PAGINATOR
 .ant-pagination-item-active {
   color: var(--white);
@@ -503,16 +484,15 @@ textarea.ant-input {
     color: var(--white);
     &:hover {
       color: var(--white);
-      opacity: .75;
+      opacity: 0.75;
     }
   }
 }
 
-
 // ANT CHECKBOX
 .ant-checkbox-wrapper {
   color: var(--white-75);
-  margin: .5em 0;
+  margin: 0.5em 0;
 }
 .ant-checkbox-group {
   .ant-checkbox-group-item {

web/styles/config-public-details.scss

@@ -48,7 +48,7 @@
   }
   .social-items-container {
     background-color: var(--container-bg-color-alt);
-    padding: 0 .75em;
+    padding: 0 0.75em;
     margin-left: 1em;
     max-width: 450px;
     .form-module {
@@ -72,5 +72,5 @@
 }
 
 .other-field-container {
-  margin: .5em 0;
+  margin: 0.5em 0;
 }

web/styles/config-socialhandles.scss

@@ -8,7 +8,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    padding: .25em;
+    padding: 0.25em;
     line-height: normal;
 
     .option-icon {
@@ -43,7 +43,7 @@
         flex-direction: column;
         margin: 0 0 0 1em;
         line-height: 2;
-        font-size: .85em;
+        font-size: 0.85em;
       }
     }
     .actions {

web/styles/home.scss

@@ -38,13 +38,12 @@
 
   .outbound-details,
   .inbound-details {
-    >.ant-card-bordered {
+    > .ant-card-bordered {
-      border-color: rgba(255,255,255,.1);
+      border-color: rgba(255, 255, 255, 0.1);
     }
   }
 }
 
-
 .offline-content {
   max-width: 1000px;
 
@@ -69,7 +68,7 @@
       background-color: var(--black);
       margin-bottom: 1em;
       .ant-card-meta-avatar {
-        margin-top: .25rem;
+        margin-top: 0.25rem;
         svg {
           height: 1.5em;
           width: 1.5em;

web/styles/main-layout.scss

@@ -1,5 +1,4 @@
 .app-container {
-  
   .side-nav {
     position: fixed;
     height: 100vh;
@@ -21,7 +20,7 @@
 
     .logo-container {
       background-color: var(--white);
-      padding: .35rem;
+      padding: 0.35rem;
       border-radius: 9999px;
     }
 
@@ -33,7 +32,7 @@
       font-weight: 200;
       text-transform: uppercase;
       line-height: normal;
-      letter-spacing: .05em;
+      letter-spacing: 0.05em;
     }
   }
 
@@ -48,7 +47,6 @@
     background-color: var(--nav-bg-color);
   }
 
-
   .main-content-container {
     padding: 2em 3em 3em;
   }
@@ -57,8 +55,6 @@
     text-align: center;
   }
 
-
-
   .online-status-indicator {
     display: flex;
     flex-direction: row;
@@ -72,9 +68,9 @@
     .status-label {
       color: var(--white);
       text-transform: uppercase;
-      font-size: .75rem;
+      font-size: 0.75rem;
       display: inline-block;
-      margin-right: .5rem;
+      margin-right: 0.5rem;
       color: var(--offline-color);
     }
     .status-icon {
@@ -99,7 +95,6 @@
   }
 }
 
-
 // stream title form field in header
 .global-stream-title-container {
   display: flex;
@@ -149,10 +144,9 @@
       }
       .update-button-container {
         margin: 0;
-        margin-left: .5em;
+        margin-left: 0.5em;
         line-height: 1;
       }
     }
   }
 }
-