Bundle embedded web app

static/web/styles/admin/chat.css

@@ -21,19 +21,17 @@
 .chat-messages .bulk-editor {
   margin: 0.5rem 0;
   padding: 0.5rem;
-  border: 1px solid var(--textfield-border);
+  border: 1px solid var(--theme-color-palette-8);
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;
   border-radius: 4px;
 }
-.chat-messages .bulk-editor.active .label {
+
-  color: var(--black-3);
-}
 .chat-messages .bulk-editor .label {
   font-size: 0.75rem;
-  color: var(--white-50);
+  color: var(--theme-color-palette-10);
   margin-right: 0.5rem;
 }
 .chat-messages .bulk-editor button {
@@ -67,7 +65,7 @@
   opacity: 1;
 }
 .toggle-switch .ant-btn-text:hover {
-  background-color: var(--black-35);
+  background-color: var(--theme-color-palette-10);
 }
 .blockuser-popover {
   max-width: 400px;
@@ -82,14 +80,14 @@
   outline: none;
 }
 .user-item-container .display-name {
-  color: var(--white);
+  color: var(--theme-color-palette-4);
-  border-bottom: 1px dotted var(--white-50);
+  border-bottom: 1px dotted var(--theme-color-palette-10);
 }
 .user-item-container:hover .display-name {
-  border-color: var(--white);
+  border-color: var(--theme-color-palette-4);
 }
 .user-details h5 {
-  color: var(--white);
+  color: var(--theme-color-palette-4);
 }
 .user-details .created-at {
   font-size: 0.75em;
@@ -110,11 +108,9 @@
 .user-details .previous-names-list .latest .user-name-item {
   font-weight: bold;
   font-style: normal;
-  color: var(--pink);
+  color: var(--theme-color-palette-12);
-}
-.user-details .ant-divider {
-  border-color: var(--white-25);
 }
+
 .block-user-button {
   text-transform: capitalize;
 }

static/web/styles/admin/config-edit-string-tags.css

@@ -12,13 +12,12 @@
   margin-left: 0.3rem;
   padding: 2px;
   border-radius: 5rem;
-  color: var(--black);
+  border: 1px solid black;
-  border: 1px solid var(--black);
   transition-duration: var(--ant-transition-duration);
 }
 .edit-current-strings .ant-tag .ant-tag-close-icon:hover {
-  border-color: var(--owncast-purple);
+  border-color: var(--theme-color-palette-6);
-  background-color: var(--white);
+  background-color: var(--theme-color-palette-4);
 }
 .edit-current-strings .ant-tag .ant-tag-close-icon:hover svg {
   fill: black;

static/web/styles/admin/config-public-details.css

@@ -41,13 +41,13 @@
   width: 100%;
 }
 .config-public-details-page .social-items-container {
-  background-color: var(--container-bg-color-alt);
+  background-color: var(--theme-color-palette-5);
   padding: 0 0.75em;
   margin-left: 1em;
   max-width: 450px;
 }
 .config-public-details-page .social-items-container .form-module {
-  background-color: var(--black);
+  background-color: var(--theme-color-palette-10);
 }
 .config-public-details-page .social-items-container .social-handles-container {
   min-width: 350px;
@@ -78,5 +78,5 @@
   max-width: 256px;
   margin-right: 1em;
   display: inline-block;
-  border: 1px solid var(--white-25);
+  border: 1px solid var(--theme-color-palette-5);
 }

static/web/styles/admin/config-socialhandles.css

@@ -31,7 +31,6 @@
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
-  color: var(--white-75);
 }
 .social-links-edit-container .social-handles-table .social-handle-cell .option-icon {
   height: 2em;

static/web/styles/admin/config-video-variants.css

@@ -10,10 +10,10 @@
 .config-variant-form .passthrough-warning {
   text-align: center;
   padding: 1em;
-  color: var(--ant-warning);
+  color: var(--theme-color-palette-error);
   font-size: 0.88em;
   font-weight: 500;
-  background-color: var(--black-50);
+  background-color: var(--theme-color-palette-10);
   border-radius: var(--theme-rounded-corners);
 }
 .config-variant-form .cpu-usage-container,
@@ -43,9 +43,7 @@
 .read-more-subtext {
   font-size: 0.8rem;
 }
-.codec-module .ant-collapse-content-active {
+
-  background-color: var(--white-15);
-}
 .video-text-field-container {
   margin-left: 12px;
   margin-bottom: 30px;

static/web/styles/admin/form-misc-elements.css

@@ -23,7 +23,7 @@
 }
 .field-tip {
   font-size: 0.8em;
-  color: var(--white-50);
+  color: var(--theme-color-palette-10);
 }
 .field-container {
   padding: 0.85em 0 0.5em;
@@ -33,7 +33,7 @@
   margin: auto;
   padding: 1em 2em 0.75em;
   background-color: var(--color-owncast-palette-7);
-  border-radius: var(--container-border-radius);
+  border-radius: var(--theme-rounded-corners);
 }
 .segment-slider-container .status-container {
   width: 100%;
@@ -46,10 +46,10 @@
   text-align: center;
   font-size: 0.75em;
   line-height: normal;
-  color: var(--white);
+  color: var(--theme-color-palette-4);
   padding: 1em;
   border-radius: var(--theme-rounded-corners);
-  background-color: var(--black-35);
+  background-color: var(--theme-color-palette-error);
 }
 .segment-tip {
   width: 10em;

static/web/styles/admin/home.css

@@ -2,7 +2,7 @@
   margin-bottom: 1em;
 }
 .home-container .online-status-section .online-details-card {
-  border-color: var(--online-color);
+  border-color: var(--theme-color-palette-6);
 }
 .home-container .stream-details-item-container {
   margin: 1em 0;
@@ -17,8 +17,8 @@
   margin-bottom: 1em;
 }
 .offline-content .list-section {
-  background-color: var(--container-bg-color-alt);
+  /* background-color: var(--theme-color-palette-3); */
-  border-radius: var(--container-border-radius);
+  border-radius: var(--theme-rounded-corners);
   padding: 1em;
 }
 .offline-content .list-section > .ant-card {
@@ -38,17 +38,18 @@
 .news-feed {
   margin-top: 0;
   padding: 1.5em;
+	border: 1px solid var(--theme-color-palette-15);
 }
 .news-feed h2 {
   font-size: 1.2em;
   margin-top: 0;
-  color: var(--pink);
+  color: var(--theme-color-palette-11);
 }
 .news-feed article {
   padding: 1em 0.25em;
   font-size: 0.9rem;
   color: var(--white-75);
-  border-bottom: 1px solid var(--gray);
+  border-bottom: 1px solid var(--theme-color-palette-10);
 }
 .news-feed article h3 {
   font-size: 1.2em;
@@ -60,5 +61,13 @@
 .news-feed article .timestamp {
   margin-top: 0;
   font-size: 0.75em;
-  color: var(--white-50);
+}
+
+.ant-collapse > .ant-collapse-item:last-child, .ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
+	background-color: var(--theme-color-palette-5);
+}
+
+.ant-card-body {
+	/* background-color: var(--theme-color-palette-5); */
+	border: 1px solid var(--theme-color-palette-15);
 }

static/web/styles/admin/main-layout.css

@@ -5,11 +5,12 @@
   height: 100vh;
   overflow: auto;
   z-index: 10;
-  background-color: var(--theme-color-background-main);
+  background-color: var(--theme-color-palette-1);
 }
 .app-container .menu-container {
   border-color: transparent;
 	background-color: unset;
+	color: var(--theme-color-components-text-on-dark);
 }
 .app-container h1.owncast-title {
   padding: 1rem;
@@ -20,7 +21,7 @@
   align-items: center;
 }
 .app-container h1.owncast-title .logo-container {
-  background-color: var(--white);
+  background-color: var(--theme-color-palette-4);
   padding-top: 4px;
   padding-right: 6px;
   padding-left: 6px;
@@ -29,7 +30,7 @@
 .app-container h1.owncast-title .title-label {
   display: inline-block;
   margin-left: 1rem;
-  color: var(--white);
+  color: var(--theme-color-palette-4);
   font-size: 1.15rem;
   font-weight: 200;
   text-transform: uppercase;
@@ -45,9 +46,10 @@
   justify-content: flex-end;
   padding-right: 1rem;
   padding-left: 1rem;
-  background-color: var(--nav-bg-color);
+	background-color: var(--theme-color-background-main);
 }
 .app-container .main-content-container {
+	background-color: var(--theme-color-palette-3);
   padding: 2em 3em 3em;
   min-width: 50vw;
 }
@@ -64,7 +66,7 @@
   width: 12.5rem;
 }
 .app-container .online-status-indicator .status-label {
-  color: var(--white);
+  color: var(--theme-color-palette-4);
   text-transform: uppercase;
   font-size: 0.75rem;
   display: inline-block;
@@ -135,3 +137,7 @@
 .ant-select:not(.ant-select-customize-input) .ant-select-selector {
   background-color: var(--theme-color-components-form-field-background);
 }
+
+.ant-menu-item a, .ant-menu-submenu-expand-icon, .ant-menu-submenu-arrow {
+	color: unset;
+}