diff --git a/src/lib/Room/RoomHeader/RoomHeader.scss b/src/lib/Room/RoomHeader/RoomHeader.scss index b4ffddb8..4a780be5 100644 --- a/src/lib/Room/RoomHeader/RoomHeader.scss +++ b/src/lib/Room/RoomHeader/RoomHeader.scss @@ -1,9 +1,9 @@ .vac-room-header { - position: fixed; + position: var(--chat-header-position); display: flex; align-items: center; height: 64px; - width: 100%; + width: var(--chat-header-width); z-index: 10; margin-right: 1px; background: var(--chat-header-bg-color); diff --git a/src/themes/index.js b/src/themes/index.js index b6412bfa..f681e6c1 100644 --- a/src/themes/index.js +++ b/src/themes/index.js @@ -23,7 +23,9 @@ export const defaultThemeStyles = { header: { background: '#fff', colorRoomName: '#0a0a0a', - colorRoomInfo: '#9ca6af' + colorRoomInfo: '#9ca6af', + position: 'absolute', + width: '100%', }, footer: { @@ -168,7 +170,9 @@ export const defaultThemeStyles = { header: { background: '#181a1b', colorRoomName: '#fff', - colorRoomInfo: '#9ca6af' + colorRoomInfo: '#9ca6af', + position: 'absolute', + width: '100%' }, footer: { @@ -327,6 +331,8 @@ export const cssThemeVars = ({ '--chat-header-bg-color': header.background, '--chat-header-color-name': header.colorRoomName, '--chat-header-color-info': header.colorRoomInfo, + '--chat-header-position': header.position, + '--chat-header-width': header.width, // footer '--chat-footer-bg-color': footer.background,