Remove references to variables.scss and replace colors

This commit is contained in:
Gabe Kangas
2023-01-31 21:22:45 -08:00
parent f4f6ea2ffe
commit caa0bb608d
9 changed files with 49 additions and 123 deletions

View File

@@ -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);
border-bottom: 1px dotted var(--white-50);
color: var(--theme-color-palette-4);
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);
}
.user-details .ant-divider {
border-color: var(--white-25);
color: var(--theme-color-palette-12);
}
.block-user-button {
text-transform: capitalize;
}

View File

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

View File

@@ -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);
}

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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);
border-radius: var(--container-border-radius);
/* background-color: var(--theme-color-palette-3); */
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);
}

View File

@@ -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;
}