fix software highlight block size and behavior with differents image proportions

Melissa Wen · Álvaro Fernando Matos de Souza
1 parent cb66b73a
Showing 1 changed file with 16 additions and 13 deletions Show diff stats
src/noosfero-spb-theme/css/home-page.css
@@ -374,8 +374,8 @@
   border: 1px solid #c0c1c1;
   border-radius: 8px;
   width: auto;
-  height: 248px;
-  max-height: 250px;
+  height: 270px;
+  max-height: 270px;
   background-color: #e8e9ec;
   background-image: linear-gradient(
     0deg,
@@ -385,37 +385,39 @@
 }
  
 .action-home-index #content .highlights-container {
-  border-radius: 8px;
+  border-radius: 8px 8px 0px 0px;
   border-width: 0px 0px 1px 0px;
   border-bottom: none;
   padding: 0;
   width: 100% !important;
-  max-height: 230px;
-  background: transparent;
+  max-height: 240px;
+  background: #FFF;
   position: relative;
   top: 0;
 }
  
 .action-home-index #content .highlights-image-link {
-  padding: 18px 0px 0px 0px;
+  display: block;
+  padding: 0px;
   border-radius: 0px 0px 8px 8px;
-  width: 220px;
-  max-height: 217px;
+  height: 250px !important;
   background-color: #fff;
+  opacity: 1.0 !important;
 }
  
 .action-home-index #content .highlights-image-link img {
-  height: 100px;
-  max-width: 200px;
+  height: 80px;
+  max-width: 160px;
+  padding: 30px;
+  background: #FFF;
 }
  
 .action-home-index #content .highlights-label {
   border-top: 4px solid #3b61a7;
-  padding: 23px 20px 46px 20px;
-  max-height: 60px;
+  padding: 20px;
+  height: 100px;
   width: 190px;
   position: relative;
-  bottom: -18px;
   background: #e8e9ec;
   color: #172638;
   text-align: center;
@@ -427,6 +429,7 @@
   float: none;
   display: block;
   text-align: center;
+  padding: 10px 0px;
 }
  
 .action-home-index #content .highlights-block-pager a {
...	...	@@ -374,8 +374,8 @@
374	374	border: 1px solid #c0c1c1;
375	375	border-radius: 8px;
376	376	width: auto;
377		- height: 248px;
378		- max-height: 250px;
	377	+ height: 270px;
	378	+ max-height: 270px;
379	379	background-color: #e8e9ec;
380	380	background-image: linear-gradient(
381	381	0deg,
...	...	@@ -385,37 +385,39 @@
385	385	}
386	386
387	387	.action-home-index #content .highlights-container {
388		- border-radius: 8px;
	388	+ border-radius: 8px 8px 0px 0px;
389	389	border-width: 0px 0px 1px 0px;
390	390	border-bottom: none;
391	391	padding: 0;
392	392	width: 100% !important;
393		- max-height: 230px;
394		- background: transparent;
	393	+ max-height: 240px;
	394	+ background: #FFF;
395	395	position: relative;
396	396	top: 0;
397	397	}
398	398
399	399	.action-home-index #content .highlights-image-link {
400		- padding: 18px 0px 0px 0px;
	400	+ display: block;
	401	+ padding: 0px;
401	402	border-radius: 0px 0px 8px 8px;
402		- width: 220px;
403		- max-height: 217px;
	403	+ height: 250px !important;
404	404	background-color: #fff;
	405	+ opacity: 1.0 !important;
405	406	}
406	407
407	408	.action-home-index #content .highlights-image-link img {
408		- height: 100px;
409		- max-width: 200px;
	409	+ height: 80px;
	410	+ max-width: 160px;
	411	+ padding: 30px;
	412	+ background: #FFF;
410	413	}
411	414
412	415	.action-home-index #content .highlights-label {
413	416	border-top: 4px solid #3b61a7;
414		- padding: 23px 20px 46px 20px;
415		- max-height: 60px;
	417	+ padding: 20px;
	418	+ height: 100px;
416	419	width: 190px;
417	420	position: relative;
418		- bottom: -18px;
419	421	background: #e8e9ec;
420	422	color: #172638;
421	423	text-align: center;
...	...	@@ -427,6 +429,7 @@
427	429	float: none;
428	430	display: block;
429	431	text-align: center;
	432	+ padding: 10px 0px;
430	433	}
431	434
432	435	.action-home-index #content .highlights-block-pager a {
...	...