LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Remove references to variables.scss and replace colors

Browse Source
This commit is contained in:
Gabe Kangas 2023-01-31 21:22:45 -08:00
parent f4f6ea2ffe
commit caa0bb608d
No known key found for this signature in database
GPG Key ID: 4345B2060657F330
9 changed files with 49 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/public/styles/admin/chat.css
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;
}

7
web/public/styles/admin/config-edit-string-tags.css
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;

6
web/public/styles/admin/config-public-details.css
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);
}

1
web/public/styles/admin/config-socialhandles.css
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;

8
web/public/styles/admin/config-video-variants.css
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;

8
web/public/styles/admin/form-misc-elements.css
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;

21
web/public/styles/admin/home.css
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);
}

16
web/public/styles/admin/main-layout.css
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;
}

81
web/styles/variables.scss
View File

@ -1,81 +0,0 @@
@import '@fontsource/open-sans';
@import '@fontsource/poppins';
// See theme.less for specific Ant Design overrides.
:root {
// old colors
--white: rgba(255, 255, 255, 1);
--white-15: rgba(255, 255, 255, 0.15);
--white-25: rgba(255, 255, 255, 0.25);
--white-35: rgba(255, 255, 255, 0.35);
--white-50: rgba(255, 255, 255, 0.5);
--white-75: rgba(255, 255, 255, 0.75);
--white-88: rgba(255, 255, 255, 0.88);
--black: rgba(0, 0, 0, 1);
--black-35: rgba(0, 0, 0, 0.35);
--black-50: rgba(0, 0, 0, 0.5);
--black-75: rgba(0, 0, 0, 0.75);
// New colors
--purple-100: #f4ebff;
--purple-300: #d6bbfb;
--purple-500: #9e77ed;
--purple-700: #6941c6;
--purple-900: #42307d;
--green-100: #d15ad5;
--green-300: #6ce9a6;
--green-500: #12b76a;
--green-700: #027a48;
--green-900: #054f31;
--red-100: #fee4e2;
--red-300: #fda29b;
--red-500: #f04438;
--red-700: #b42318;
--red-900: #7a271a;
--orange-100: #fef0c7;
--orange-300: #fec84b;
--orange-500: #f79009;
--orange-700: #b54708;
--orange-900: #93370d;
--gray-100: #f2f4f7;
--gray-300: #d0d5dd;
--gray-500: #667085;
--gray-700: #344054;
--gray-900: #101828;
// owncast logo color family
--owncast-purple: rgba(120, 113, 255, 1);
--purple-dark: rgba(28, 26, 59, 1); // #1c1a3b;
--pink: rgba(201, 139, 254, 1); // #D18BFE;
--blue: rgba(32, 134, 225, 1); // #2086E1;
// owncast purple variations
--owncast-purple-25: rgba(120, 113, 255, 0.25);
--owncast-purple-50: rgba(120, 113, 255, 0.5);
--gray-light: rgba(168, 175, 197, 1);
--gray-medium: rgba(102, 107, 120, 1);
--gray: rgba(51, 53, 60, 1);
--gray-dark: rgba(23, 24, 27, 1); // #17181b;
--online-color: #73dd3f;
--offline-color: #999;
// ////////////////////////////////
--default-text-color: var(--white-88);
--default-bg-color: var(--black);
--default-link-color: var(--owncast-purple);
--container-bg-color: var(--gray-dark);
--container-bg-color-alt: var(--purple-dark);
--container-border-radius: 4px;
--nav-bg-color: var(--gray-dark);
--textfield-border: var(--white-25);
}