LogalDeveloper/owncast
0
Fork 0
Code Activity

Draft: rough-ish draft of proposed color theme changes (#2067)

Browse Source 
* color experimentation and troubleshooting

* create color scheme, assign colors, more ant overrides

* fun selection color

* Prettified Code!

* Correctly import opensans

* Prettified Code!

* Organize+standardize colors/names and update the app to use them

* Prettified Code!

* Use css var references instead of resolving value of vars in css files

* Prettified Code!

Co-authored-by: gingervitis <gingervitis@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
Co-authored-by: gabek <gabek@users.noreply.github.com>
This commit is contained in:
gingervitis
2022-08-29 23:17:12 -07:00
committed by GitHub
parent a0a28fa572
commit d5fa81f76e
32 changed files with 817 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/components/action-buttons/ActionButton.tsx
View File

@@ -6,10 +6,15 @@ import s from './ActionButton.module.scss';
interface Props {
action: ExternalAction;
primary?: boolean;
}
ActionButton.defaultProps = {
primary: false,
};
export default function ActionButton({
action: { url, title, description, icon, color, openExternally },
primary = false,
}: Props) {
const [showModal, setShowModal] = useState(false);
@@ -24,7 +29,7 @@ export default function ActionButton({
return (
<>
<Button
type="primary"
type={primary ? 'primary' : 'default'}
className={`${s.button}`}
onClick={buttonClicked}
style={{ backgroundColor: color }}

5
web/components/chat/ChatSystemMessage/ChatSystemMessage.module.scss
View File

@@ -1,5 +1,5 @@
.chatSystemMessage {
background: var(--theme-background-secondary);
background: var(--theme-color-background-main);
background: linear-gradient(
70deg,
rgb(78, 54, 114) 0%,
@@ -31,8 +31,7 @@
mark {
padding-left: 0.35em;
padding-right: 0.35em;
color: var(--theme-text-highlight);
background-color: var(--color-bg-highlight);
background-color: var(--theme-color-palette-12);
}
}
}

6
web/components/chat/ChatTextField/ChatTextField.module.scss
View File

@@ -4,14 +4,16 @@
bottom: 0px;
width: 100%;
padding: 0.3rem;
color: var(--theme-text-secondary);
color: var(--theme-color-components-form-field-text);
overflow-x: hidden;
div[role='textbox'] {
font-size: 0.9rem;
border-radius: 0.2rem;
padding: 0.6rem;
padding-right: calc(0.6rem + 44px);
background-color: var(--color-owncast-gray-700);
background-color: var(--theme-color-components-form-field-background);
border-color: var(--theme-color-components-form-field-border);
box-shadow: 0;
transition: box-shadow 50ms ease-in-out;
&:focus {

4
web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
View File

@@ -13,12 +13,12 @@
font-weight: bold;
}
.message {
color: var(--theme-text-primary);
color: var(--theme-color-components-chat-text);
mark {
padding-left: 0.35em;
padding-right: 0.35em;
color: var(--theme-text-highlight);
color: var(--theme-color-palette-12);
}
}

19
web/components/common/ContentHeader/ContentHeader.module.scss
View File

@@ -1,6 +1,7 @@
.root {
position: relative;
display: grid;
padding: 20px;
}
.buttonsLogoTitleSection {
@@ -28,31 +29,31 @@
.titleSection {
display: flex;
flex-direction: column;
margin-left: 10px;
.title {
font-family: var(--theme-text-display-font-family);
color: var(--theme-color-palette-0);
font-size: 32px;
font-weight: bold;
color: black;
text-transform: uppercase;
line-height: 30px;
}
.subtitle {
font-size: 24px;
font-weight: 400;
line-height: 22px;
color: var(--theme-text-secondary);
font-size: 22px;
font-weight: 300;
line-height: 1.3;
color: var(--theme-color-background-header);
}
}
.tagList {
font-family: var(--theme-text-display-font-family);
color: var(--theme-text-primary);
color: var(--theme-color-palette-10);
span {
display: inline-block;
margin-right: 8px;
font-size: 14px;
font-weight: 300;
font-weight: 500;
}
}

1
web/components/common/Logo/Logo.module.scss
View File

@@ -12,7 +12,6 @@
.contrast {
padding: 5px;
border-radius: 50%;
background-color: var(--color-owncast-gray-100);
svg {
width: clamp(2rem, 7vw, 40px);
height: clamp(2rem, 7vw, 40px);

5
web/components/common/UserDropdown/UserDropdown.module.scss
View File

@@ -1,5 +1,10 @@
.root {
button {
border: none;
.ant-space {
.ant-space-item {
color: var(--theme-unknown-2);
}
}
}
}

2
web/components/common/UserDropdown/UserDropdown.tsx
View File

@@ -68,7 +68,7 @@ export default function UserDropdown({ username: defaultUsername }: Props) {
return (
<div className={`${s.root}`}>
<Dropdown overlay={menu} trigger={['click']}>
<Button icon={<UserOutlined style={{ marginRight: '.5rem' }} />}>
<Button type="primary" icon={<UserOutlined style={{ marginRight: '.5rem' }} />}>
<Space>
{username}
<CaretDownOutlined />

6
web/components/modals/Follow/FollowModal.tsx
View File

@@ -111,10 +111,12 @@ export default function FollowModal(props: Props) {
</div>
</div>
<Space className={s.buttons}>
<Button disabled={!valid} onClick={remoteFollowButtonPressed}>
<Button disabled={!valid} type="primary" onClick={remoteFollowButtonPressed}>
Follow
</Button>
<Button onClick={joinButtonPressed}>Join the Fediverse</Button>
<Button onClick={joinButtonPressed} type="primary">
Join the Fediverse
</Button>
</Space>
</Spin>
</Space>

2
web/components/modals/NameChangeModal.tsx
View File

@@ -18,7 +18,7 @@ function UserColor(props: { color: number }): React.ReactElement {
const { color } = props;
const style: CSSProperties = {
textAlign: 'center',
backgroundColor: `var(--theme-user-colors-${color})`,
backgroundColor: `var(--theme-color-users-${color})`,
width: '100%',
height: '100%',
};

16
web/components/ui/Content/Content.module.scss
View File

@@ -1,7 +1,16 @@
.root {
display: grid;
grid-template-columns: 1fr auto;
padding: 0.7em;
background-color: var(--theme-color-background-main);
.topSection {
padding: 0;
background-color: var(--theme-color-components-video-background);
}
.lowerSection {
padding: 0em 2em;
}
}
.leftCol {
@@ -22,13 +31,12 @@
flex-direction: column;
height: calc(100vh - 64px);
overflow: hidden;
.topHalf {
.topSection {
display: grid;
grid-template-rows: 30vh 5vh 5vh;
height: 40vh;
// overflow: hidden;
}
.lowerHalf {
.lowerSection {
height: 60vh;
}
}

8
web/components/ui/Content/Content.tsx
View File

@@ -113,7 +113,8 @@ export default function ContentComponent() {
<Content className={rootClassName}>
<div className={s.leftContent}>
<Spin className={s.loadingSpinner} size="large" spinning={appState.appLoading} />
<div className={s.topHalf}>
<div className={s.topSection}>
{online && <OwncastPlayer source="/hls/stream.m3u8" online={online} />}
{!online && (
<OfflineBanner
@@ -129,6 +130,8 @@ export default function ContentComponent() {
lastDisconnectTime={lastDisconnectTime}
viewerCount={viewerCount}
/>
</div>
<div className={s.midSection}>
<div className={s.buttonsLogoTitleSection}>
<ActionButtonRow>
{externalActionButtons}
@@ -161,6 +164,9 @@ export default function ContentComponent() {
links={socialHandles}
logo="/logo"
/>
</div>
<div className={s.lowerSection}>
<Tabs defaultActiveKey="0" style={{ height: '100%' }}>
{isChatVisible && isMobile && (
<TabPane tab="Chat" key="0" style={{ height: '100%' }}>

10
web/components/ui/CustomPageContent/CustomPageContent.module.scss
View File

@@ -9,12 +9,10 @@
line-height: 1.5em;
margin: 0;
padding: 0;
width: 80%;
max-width: 1200px;
color: var(--theme-text);
background-color: var(--theme-background-secondary);
padding: 1em;
color: var(--theme-color-palette-0);
background-color: var(--theme-color-palette-4);
padding: calc(3 * var(--content-padding));
border-radius: var(--theme-rounded-corners);
// Allow the content to fill the width on narrow screens.
@media only screen and (max-width: 768px) {

4
web/components/ui/Footer/Footer.module.scss
View File

@@ -1,5 +1,7 @@
.footer {
font-size: 0.85em;
font-weight: 500;
color: var(--theme-text-secondary);
color: var(--theme-color-palette-1);
background-color: transparent;
padding: var(--content-padding);
}

11
web/components/ui/Header/Header.module.scss
View File

@@ -5,13 +5,18 @@
align-items: center;
justify-content: space-between;
z-index: 20;
padding: 0.4rem .7rem;
background-color: var(--default-bg-color);
padding: 0.4rem 0.7rem;
box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%);
background-color: var(--theme-color-background-header);
.logo {
display: flex;
align-items: center;
span {
margin-left: .5rem;
color: var(--theme-color-components-text-on-dark);
font-family: var(--theme-text-display-font-family);
margin-left: 0.5rem;
font-size: 1.5rem;
font-weight: 600;
}

4
web/components/ui/Logo/Logo.module.scss
View File

@@ -10,8 +10,8 @@
border-radius: 50%;
border-width: 5px;
border-style: solid;
border-color: var(--theme-primary-color);
background-color: var(--theme-background-secondary);
border-color: var(--theme-color-palette-0);
background-color: var(--theme-color-palette-4);
}
.container {

1
web/components/ui/Modal/Modal.module.scss
View File

@@ -8,4 +8,5 @@
display: block;
height: 100%;
padding: 2vw;
background-color: var(--theme-color-components-modal-content-background);
}

3
web/components/ui/OfflineBanner/OfflineBanner.module.scss
View File

@@ -7,7 +7,8 @@
width: clamp(200px, 100%, 300px);
display: flex;
flex-direction: column;
background-color: var(--theme-background-secondary);
color: var(--theme-color-components-text-on-light);
background-color: var(--theme-color-background-main);
margin: 1rem auto;
border-radius: var(--theme-rounded-corners);
padding: 1rem;

5
web/components/ui/Sidebar/Sidebar.module.scss
View File

@@ -1,5 +1,5 @@
.root {
background-color: var(--theme-background-secondary);
background-color: var(--theme-color-components-chat-background);
display: none;
--header-h: 64px;
}
@@ -13,7 +13,7 @@
max-height: calc(100vh - var(--header-h));
}
}
/*
/*
First div is .ant-layout-sider-children
Only way to target it apparently
*/
@@ -24,4 +24,3 @@ Only way to target it apparently
flex-grow: 1 !important;
height: 100% !important;
}

8
web/components/ui/Statusbar/Statusbar.module.scss
View File

@@ -1,12 +1,10 @@
.statusbar {
display: flex;
align-items: center;
font-size: .8rem;
padding-left: 10px;
padding-right: 10px;
font-size: 0.8rem;
justify-content: space-between;
height: 2rem;
width: 100%;
color: var(--color-owncast-gray-300);
background-color: var(--theme-background-secondary);
padding: var(--content-padding);
color: var(--theme-color-palette-5);
}

19
web/components/video/player.scss
View File

@@ -1,20 +1,23 @@
/* Change all text and icon colors in the player. */
.vjs-owncast.video-js {
color: var(--theme-text-secondary);
color: var(--theme-color-components-text-on-light);
}
.vjs-owncast .vjs-big-play-button {
z-index: 10;
color: var(--theme-text-secondary);
font-size: 15rem !important;
color: var(--theme-color-action);
font-size: 8rem !important;
border-color: transparent !important;
border-radius: var(--theme-rounded-corners) !important;
background-color: transparent !important;
text-shadow: 2px 3px 4px #0000005f;
-webkit-text-stroke: 2px white;
text-stroke: 2px white;
:hover {
transition: all 0.2s ease-in-out;
font-size: 20rem;
font-size: 10rem;
text-shadow: 2px 5px 4px #00000093;
}
}
@@ -22,16 +25,16 @@
.vjs-owncast .vjs-loading-spinner {
z-index: 10;
display: block;
color: var(--theme-text-secondary);
color: var(--theme-color-components-text-on-light);
}
.vjs-owncast .vjs-control-bar {
color: var(--theme-text-secondary);
background-color: var(--theme-background-primary) !important;
color: var(--theme-color-components-text-on-light);
background-color: var(--theme-color-background-main) !important;
}
.vjs-owncast .vjs-control {
color: var(--theme-text-secondary);
color: var(--theme-color-components-text-on-light);
}
.vjs-airplay .vjs-icon-placeholder::before {