added flexbox to mobile view, adjusted icon border-radius

kantai · Feb 27, 2017 · 89a8054 · 89a8054
1 parent e854a19
commit 89a8054
Showing 1 changed file with 39 additions and 19 deletions.
diff --git a/app/styles/app.css b/app/styles/app.css
@@ -139,7 +139,17 @@ button.btn.btn-sm.nav-page{margin-top:-1px;padding:10px 8px;}
 .out-form-group{width:490px;margin-left:-80px;}
 .app-box-container{display:block;min-height:1px;padding-right:4px;text-align:center;}
 .app-box{height:auto;margin:1.5rem auto;width:100%;margin-left:0px;margin-right:0px!important;}
-.app-box img{width:100%;max-width:192px;background-color:rgba(44,150,255,0.5);-webkit-box-shadow:0px 0px 100px 0px rgba(44,150,255,1);-moz-box-shadow:0px 0px 100px 0px rgba(44,150,255,1);box-shadow:0px 0px 100px 0px rgba(44,150,255,1);-moz-border-radius:42px;-webkit-border-radius:42px;border-radius:42px;}
+.app-box img {
+	width: 100%;
+	max-width: 76px;
+	background-color: rgba(44, 150, 255, 0.5);
+	-webkit-box-shadow: 0px 0px 100px 0px rgba(44, 150, 255, 1);
+	-moz-box-shadow: 0px 0px 100px 0px rgba(44, 150, 255, 1);
+	box-shadow: 0px 0px 100px 0px rgba(44, 150, 255, 1);
+	-moz-border-radius: 15px;
+	-webkit-border-radius: 15px;
+	border-radius: 15px;
+}
 
 .text-feat-dash{padding:12px;margin-bottom:0;}
 a.view-out-link{color:#494f56;}
@@ -321,25 +331,28 @@ a.list-group-item-dash:hover,
 .page-header{width:100%;height:150px;background-color:#270F34;display:flex;align-items:center;justify-content:center;}
 .page-header > h1{margin-bottom:0;}
 .vertical-split-content{margin-top:40px;}
-.app-center{display:flex;align-items:center;justify-content:center;}
-.app-wrap{width:940px;display:flex;align-items:center;justify-content:center;}
-.app-container{display:flex;align-items:center;justify-content:center;}
+.app-center {
+	display: flex;
+	-webkit-box-orient: horizontal;
+	-webkit-box-direction: normal;
+	flex-direction: row;
+	justify-content: center;
+}
+.app-wrap {
+	-webkit-box-orient: horizontal;
+	-webkit-box-direction: normal;
+	flex-direction: row;
+	justify-content: center;
+}
+.app-container {
+	-webkit-box-orient: horizontal;
+	-webkit-box-direction: normal;
+	flex-direction: row;
+	justify-content: center;
+}
 div.app-text-container > h3 {color:#fff;font-weight:300;font-size:1.5rem;}
 .btn-home-profiles{position:absolute;font-size:12px;font-weight:500;top:75px;left:0px;padding:2px 10px;background-color:#fafafa;border-radius:6px;-webkit-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.15);-moz-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.15);box-shadow:0px 0px 20px 0px rgba(0,0,0,0.15);}
-.btn-home-pageheader {
-	position: absolute;
-	font-size: 11px;
-	font-weight: 400;
-	color: rgba(255,255,255,0.85);
-	top: 15px;
-	left: 15px;
-	padding: 3px 20px;
-	background-color: #41294E;
-	border-radius: 6px;
-	-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
-	-moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
-	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
-}
+.btn-home-pageheader{position:absolute;font-size:11px;font-weight:400;color:rgba(255,255,255,0.85);top:15px;left:15px;padding:3px 20px;background-color:rgba(255,255,255,0.15);border-radius:6px;-webkit-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.15);-moz-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.15);box-shadow:0px 0px 20px 0px rgba(0,0,0,0.15);}
 
 
 /* Modal */
@@ -366,7 +379,14 @@ div.ReactModal__Content.ReactModal__Content--after-open{width:465px;background-c
 @media (min-width:975px){
 	.card-list-wrap{min-width:330px;margin-right:30px;margin-right:1.875rem;}
 	.pro-wrap{min-width:905px;}
-	.app-wrap{width:80%;}
+	/*.app-wrap{width:80%;}*/
+	.app-center{display:flex;align-items:center;justify-content:center;}
+	.app-wrap{width:975px;display:flex;align-items:center;justify-content:center;}
+	.app-container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
 }
 
 /* Large devices (large desktops, 1200px and up) */