LogalDeveloper/owncast
0
Fork 0
Code Activity

Add support for less variables and using a custom theme

Browse Source
This commit is contained in:
Gabe Kangas
2022-04-17 22:32:57 -07:00
parent 1c77219a75
commit 3ce6fd4cb3
13 changed files with 135 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/styles/global.less Normal file
View File

@@ -0,0 +1,5 @@
// @import '~antd/dist/antd.less'; // Import Ant Design styles by less entry
// @import '~antd/dist/antd.less';
@import '~antd/dist/antd.dark.less'; // Introduce the official dark less style entry file
@import './theme.less'; // Import owncast theme styles

74
web/styles/home.scss
View File

@@ -4,17 +4,17 @@
.online-details-card {
border-color: var(--online-color);
}
.ant-statistic {
text-align: center;
}
.ant-statistic-title {
color: var(--white-50);
}
// .ant-statistic {
// text-align: center;
// }
// .ant-statistic-title {
// color: var(--white-50);
// }
}
.ant-card-head {
color: var(--online-color);
}
// .ant-card-head {
// color: var(--online-color);
// }
.stream-details-item-container {
margin: 1em 0;
@@ -22,17 +22,17 @@
margin-top: 0;
}
}
.ant-statistic.stream-details-item {
background-color: var(--black-50);
padding: 1em;
.ant-statistic-title {
color: var(--blue);
}
.ant-statistic-content {
font-size: 1.25em;
white-space: nowrap;
}
}
// .ant-statistic.stream-details-item {
// background-color: var(--black-50);
// padding: 1em;
// .ant-statistic-title {
// color: var(--blue);
// }
// .ant-statistic-content {
// font-size: 1.25em;
// white-space: nowrap;
// }
// }
.stream-details {
> .ant-card-bordered {
@@ -46,16 +46,16 @@
.offline-content {
.logo-section {
.ant-result-title {
font-size: 2rem;
}
.ant-result-subtitle {
font-size: 1rem;
}
.ant-result-icon svg {
height: 8rem;
width: 8rem;
}
// .ant-result-title {
// font-size: 2rem;
// }
// .ant-result-subtitle {
// font-size: 1rem;
// }
// .ant-result-icon svg {
// height: 8rem;
// width: 8rem;
// }
}
.list-section {
background-color: var(--container-bg-color-alt);
@@ -65,13 +65,13 @@
> .ant-card {
background-color: var(--black);
margin-bottom: 1em;
.ant-card-meta-avatar {
margin-top: 0.25rem;
svg {
height: 1.5em;
width: 1.5em;
}
}
// .ant-card-meta-avatar {
// margin-top: 0.25rem;
// svg {
// height: 1.5em;
// width: 1.5em;
// }
// }
}
}
}

18
web/styles/main-layout.scss
View File

@@ -112,15 +112,15 @@
align-items: center;
margin-bottom: 0;
.ant-input-affix-wrapper {
border-color: var(--owncast-purple-50);
}
input.ant-input {
&::placeholder {
color: var(--owncast-purple);
text-align: center;
}
}
// .ant-input-affix-wrapper {
// border-color: var(--owncast-purple-50);
// }
// input.ant-input {
// &::placeholder {
// color: var(--owncast-purple);
// text-align: center;
// }
// }
.input-side {
width: 400px;

40
web/styles/theme.less Normal file
View File

@@ -0,0 +1,40 @@
@theme: owncast;
// These overrides are only used for customizing the style of Ant Design
// components and do not impact any custom components. Therefore CSS variables
// should be set in a centralized place and used here so changes only need
// to be made once.
// Variable names can be found in
// https://github.com/ant-design/ant-design/blob/master/components/style/themes/dark.less
// From color palette
@green-1: #D15AD5;
@green-2: #6CE9A6;
@green-3: #12B76A;
@green-4: #027A48;
@green-5: #054F31;
// Defaults
@green-6: mix(@green-base, @component-background, 85%);
@green-7: mix(color(~`colorPalette('@{green-base}', 5) `), @component-background, 90%);
@green-8: mix(color(~`colorPalette('@{green-base}', 4) `), @component-background, 95%);
@green-9: mix(color(~`colorPalette('@{green-base}', 3) `), @component-background, 97%);
@green-10: mix(color(~`colorPalette('@{green-base}', 2) `), @component-background, 98%);
// From color palette
@purple-1: #F4EBFF;
@purple-2: #D6BBFB;
@purple-3: #9E77ED;
@purple-4: #6941C6;
@purple-5: #42307D;
// Defaults
@purple-6: mix(@purple-base, @component-background, 85%);
@purple-7: mix(color(~`colorPalette('@{purple-base}', 5) `), @component-background, 90%);
@purple-8: mix(color(~`colorPalette('@{purple-base}', 4) `), @component-background, 95%);
@purple-9: mix(color(~`colorPalette('@{purple-base}', 3) `), @component-background, 97%);
@purple-10: mix(color(~`colorPalette('@{purple-base}', 2) `), @component-background, 98%);
@primary-color: #d62222; // split border inside a component
@text-color: green;
@text-color-secondary: orange;

1
web/styles/variables.scss
View File

@@ -1,3 +1,4 @@
// See theme.less for specific Ant Design overrides.
:root {
// colors
--white: rgba(255, 255, 255, 1);