(theme) add container styles

Author: antoine92190

README.md

@@ -192,6 +192,12 @@ colors="{
     backgroundScrollIcon: '#fff'
   },
 
+  container: {
+    border: 'none',
+    borderRadius: '4px',
+    boxShadow: '0px 3px 1px 1px #000'
+  },
+
   header: {
     background: '#fff'
   },

src/ChatWindow/ChatWindow.vue

@@ -199,16 +199,16 @@ export default {
 
 .card-window {
 	width: 100%;
-	border-radius: 4px;
 	display: block;
 	max-width: 100%;
 	background: var(--chat-content-bg-color);
 	color: var(--chat-color);
 	overflow-wrap: break-word;
 	position: relative;
 	white-space: normal;
-	box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
-		0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+	border: var(--chat-container-border);
+	border-radius: var(--chat-container-border-radius);
+	box-shadow: var(--chat-container-box-shadow);
 }
 
 .chat-container {

src/themes/index.js

@@ -10,6 +10,13 @@ export const defaultThemeColors = {
 			backgroundScrollIcon: '#fff'
 		},
 
+		container: {
+			border: 'none',
+			borderRadius: '4px',
+			boxShadow:
+				'0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)'
+		},
+
 		header: {
 			background: '#fff'
 		},
@@ -109,6 +116,13 @@ export const defaultThemeColors = {
 			backgroundScrollIcon: '#fff'
 		},
 
+		container: {
+			border: 'none',
+			borderRadius: '4px',
+			boxShadow:
+				'0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)'
+		},
+
 		header: {
 			background: '#181a1b'
 		},
@@ -201,6 +215,7 @@ export const defaultThemeColors = {
 
 export const cssThemeVars = ({
 	general,
+	container,
 	header,
 	footer,
 	sidemenu,
@@ -221,6 +236,11 @@ export const cssThemeVars = ({
 		'--chat-border-style': general.borderStyle,
 		'--chat-bg-scroll-icon': general.backgroundScrollIcon,
 
+		// container
+		'--chat-container-border': container.border,
+		'--chat-container-border-radius': container.borderRadius,
+		'--chat-container-box-shadow': container.boxShadow,
+
 		// header
 		'--chat-header-bg-color': header.background,