Updating Berlin host configs and adding carousel style (#6896)

* Updating Berlin host configs and adding carousel style * Updaring host config and carousel style * Override carousel control properties * Additional overrides and host config color updates * Adding container and media styles
microsoft · Jan 26, 2022 · d608411 · d608411
1 parent beb7e3a
commit d608411
Show file tree

Hide file tree

Showing 4 changed files with 197 additions and 35 deletions.
diff --git a/samples/HostConfig/berlin-dark.json b/samples/HostConfig/berlin-dark.json
@@ -11,10 +11,10 @@
 	"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
 	"fontSizes": {
 		"small": 12,
-		"default": 12,
-		"medium": 14,
+		"default": 14,
+		"medium": 18,
 		"large": 20,
-		"extraLarge": 40
+		"extraLarge": 28
 	},
 	"fontWeights": {
 		"lighter": 400,
@@ -26,10 +26,10 @@
 			"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
 			"fontSizes": {
 				"small": 12,
-				"default": 12,
-				"medium": 14,
+				"default": 14,
+				"medium": 18,
 				"large": 20,
-				"extraLarge": 40
+				"extraLarge": 28
 			},
 			"fontWeights": {
 				"lighter": 400,
@@ -41,10 +41,10 @@
 			"fontFamily": "'Courier New', Courier, monospace",
 			"fontSizes": {
 				"small": 12,
-				"default": 12,
-				"medium": 14,
+				"default": 14,
+				"medium": 18,
 				"large": 20,
-				"extraLarge": 40
+				"extraLarge": 28
 			},
 			"fontWeights": {
 				"lighter": 400,
@@ -57,16 +57,28 @@
 		"default": {
 			"foregroundColors": {
 				"default": {
-					"default": "#FFFFFF",
-					"subtle": "#FFFFFF"
+					"default": "#FFFFFFFF",
+					"subtle": "#C5FFFFFF"
 				},
 				"accent": {
-					"default": "#60CDFF",
+					"default": "#FF60CDFF",
 					"subtle": "#60CDFF"
 				},
 				"dark": {
-					"default": "#FFFFFFC8",
-					"subtle": "#FFFFFFC8"
+					"default": "#FFFFFFFF",
+					"subtle": "#C5FFFFFF"
+				},
+				"good": {
+					"default": "#6CCB5E",
+					"subtle": "#6CCB5E"
+				},
+				"warning": {
+					"default": "#FCE100",
+					"subtle": "#FCE100"
+				},
+				"attention": {
+					"default": "#FF99A4",
+					"subtle": "#FF99A4"
 				}
 			}
 		}

diff --git a/samples/HostConfig/berlin-light.json b/samples/HostConfig/berlin-light.json
@@ -11,10 +11,10 @@
 	"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
 	"fontSizes": {
 		"small": 12,
-		"default": 12,
-		"medium": 14,
+		"default": 14,
+		"medium": 18,
 		"large": 20,
-		"extraLarge": 40
+		"extraLarge": 28
 	},
 	"fontWeights": {
 		"lighter": 400,
@@ -26,10 +26,10 @@
 			"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
 			"fontSizes": {
 				"small": 12,
-				"default": 12,
-				"medium": 14,
+				"default": 14,
+				"medium": 18,
 				"large": 20,
-				"extraLarge": 40
+				"extraLarge": 28
 			},
 			"fontWeights": {
 				"lighter": 400,
@@ -41,10 +41,10 @@
 			"fontFamily": "'Courier New', Courier, monospace",
 			"fontSizes": {
 				"small": 12,
-				"default": 12,
-				"medium": 14,
+				"default": 14,
+				"medium": 18,
 				"large": 20,
-				"extraLarge": 40
+				"extraLarge": 28
 			},
 			"fontWeights": {
 				"lighter": 400,
@@ -57,16 +57,28 @@
 		"default": {
 			"foregroundColors": {
 				"default": {
-					"default": "#000000",
-					"subtle": "#000000"
+					"default": "#E4000000",
+					"subtle": "#9E000000"
 				},
 				"dark": {
 					"default": "#000000",
 					"subtle": "#000000"
 				},
 				"accent": {
-					"default": "#005FB8",
-					"subtle": "#005FB8"
+					"default": "#003E92",
+					"subtle": "#003E92"
+				},
+                "good": {
+					"default": "#0F7B0F",
+					"subtle": "#0F7B0F"
+				},
+				"warning": {
+					"default": "#9D5D00",
+					"subtle": "#9D5D00"
+				},
+				"attention": {
+					"default": "#C42B1C",
+					"subtle": "#C42B1C"
 				}
 			}
 		}

diff --git a/source/nodejs/adaptivecards-designer/src/containers/berlin/berlin-container-dark.css b/source/nodejs/adaptivecards-designer/src/containers/berlin/berlin-container-dark.css
@@ -1,9 +1,11 @@
 .berlin-outer-container {
-    border: 1px solid #E6E6E6;
+    border: 1px solid rgba(0, 0, 0, 0.1);
     padding: 1px 1px;
-    background-color: #201E1F;
+    background: linear-gradient(rgba(255, 255, 255, 0.0326), rgba(255, 255, 255, 0.0326)), linear-gradient(rgba(44, 44, 44, 1), rgba(44, 44, 44, 1));
     width: 300px;
-    border-radius: 4px;
+    border-radius: 8px;
+	box-sizing: border-box;
+	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.13);
     color: white;
     position: relative;
 }
@@ -50,7 +52,7 @@
 
 .ac-adaptiveCard {
     border: 0px;
-    padding: 48px 24px 24px 24px !important;
+    padding: 48px 16px 16px 16px !important;
     border-radius: 4px !important;
 }
 
@@ -295,4 +297,71 @@ a.ac-anchor:hover {
 .ac-container.ac-selectable:hover,
 .ac-columnSet.ac-selectable:hover {
     background-color: rgba(255, 255, 255, 0.0605);
+}
+
+.ac-image, .ac-media {
+	border-radius: 4px;
+	overflow: hidden;
+}
+
+.ac-media video {
+	border-radius: 4px;
+}
+
+.ac-carousel-container {
+	padding: 0px 16px 16px 16px !important;
+	margin: 0px -16px -16px -16px !important;
+}
+
+.ac-container.ac-adaptiveCard .swiper-button-prev.ac-carousel-left,
+.ac-carousel-container .swiper-button-next.ac-carousel-right {
+	display:none;
+}
+
+.ac-container.ac-adaptiveCard:hover .swiper-button-prev.ac-carousel-left,
+.ac-container.ac-adaptiveCard:hover .swiper-button-next.ac-carousel-right,
+.ac-container.ac-adaptiveCard:focus .swiper-button-prev.ac-carousel-left,
+.ac-container.ac-adaptiveCard:focus .swiper-button-next.ac-carousel-right {
+	display: flex;
+}
+
+.swiper-button-prev.ac-carousel-left,
+.swiper-button-next.ac-carousel-right {
+	border-radius:3px;
+	height:38px;
+	width:16px;
+}
+
+.swiper-button-prev.ac-carousel-left:hover,
+.swiper-button-next.ac-carousel-right:hover {
+	background: transparent !important;
+}
+
+.swiper-button-prev.ac-carousel-left::after,
+.swiper-button-next.ac-carousel-right::after {
+	color:rgba(255, 255, 255, 0.5442);
+	font-size:8px !important;
+}
+
+.swiper-button-prev.ac-carousel-left:active::after,
+.swiper-button-prev.ac-carousel-left:hover::after,
+.swiper-button-next.ac-carousel-right:active::after,
+.swiper-button-next.ac-carousel-right:hover::after {
+	color:rgba(255, 255, 255, 0.786) !important;
+}
+
+.swiper-pagination-bullet {
+	background:rgba(255, 255, 255, 0.5442) !important;
+	height:4px !important;
+	width:4px !important;
+	vertical-align:middle;
+}
+
+.swiper-pagination-bullet:hover {
+	background:rgba(255, 255, 255, 0.786);
+}
+
+.swiper-pagination-bullet.swiper-pagination-bullet-active {
+	height:6px !important;
+	width:6px !important;
 }
diff --git a/source/nodejs/adaptivecards-designer/src/containers/berlin/berlin-container-light.css b/source/nodejs/adaptivecards-designer/src/containers/berlin/berlin-container-light.css
@@ -1,15 +1,17 @@
 .ac-adaptiveCard {
     border: 0px;
-    padding: 48px 24px 24px 24px !important;
+    padding: 48px 16px 16px 16px !important;
     border-radius: 4px !important;
 }
 
 .berlin-outer-container {
-    border: 1px solid #E6E6E6;
+    border: 1px solid rgba(0, 0, 0, 0.0578);
     padding: 1px 1px;
-    background-color: #F6F6F6;
+    background: linear-gradient(rgba(246, 246, 246, 0.5), rgba(246, 246, 246, 0.5)), linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
     width: 300px;
-    border-radius: 4px;
+    border-radius: 8px;
+	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
+	box-sizing: border-box;
 }
 
 .berlin-header {
@@ -294,4 +296,71 @@ a.ac-anchor:hover {
 .ac-container.ac-selectable:hover,
 .ac-columnSet.ac-selectable:hover {
     background-color: rgba(0, 0, 0, 0.0373);
+}
+
+.ac-image, .ac-media {
+	border-radius: 4px;
+	overflow: hidden;
+}
+
+.ac-media video {
+	border-radius: 4px;
+}
+
+.ac-carousel-container {
+	padding: 0px 16px 16px 16px !important;
+	margin: 0px -16px -16px -16px !important;
+}
+
+.ac-container.ac-adaptiveCard .swiper-button-prev.ac-carousel-left,
+.ac-carousel-container .swiper-button-next.ac-carousel-right {
+	display:none;
+}
+
+.ac-container.ac-adaptiveCard:hover .swiper-button-prev.ac-carousel-left,
+.ac-container.ac-adaptiveCard:hover .swiper-button-next.ac-carousel-right,
+.ac-container.ac-adaptiveCard:focus .swiper-button-prev.ac-carousel-left,
+.ac-container.ac-adaptiveCard:focus .swiper-button-next.ac-carousel-right {
+	display: flex;
+}
+
+.swiper-button-prev.ac-carousel-left,
+.swiper-button-next.ac-carousel-right {
+	border-radius:3px;
+	height:38px;
+	width:16px;
+}
+
+.swiper-button-prev.ac-carousel-left:hover,
+.swiper-button-next.ac-carousel-right:hover {
+	background: transparent !important;
+}
+
+.swiper-button-prev.ac-carousel-left::after,
+.swiper-button-next.ac-carousel-right::after {
+	color:rgba(0, 0, 0, 0.4458);
+	font-size:8px !important;
+}
+
+.swiper-button-prev.ac-carousel-left:active::after,
+.swiper-button-prev.ac-carousel-left:hover::after,
+.swiper-button-next.ac-carousel-right:active::after,
+.swiper-button-next.ac-carousel-right:hover::after {
+	color:rgba(0, 0, 0, 0.6063) !important;
+}
+
+.swiper-pagination-bullet{
+	background:rgba(0, 0, 0, 0.4458) !important;
+	height:4px !important;
+	width:4px !important;
+	vertical-align:middle;
+}
+
+.swiper-pagination-bullet:hover{
+	background:rgba(0, 0, 0, 0.6063);
+}
+
+.swiper-pagination-bullet.swiper-pagination-bullet-active{
+	height:6px !important;
+	width:6px !important;
 }