updated list cards design

fquirin · fquirin · commit a0db5b581dc5 · 2018-11-27T14:03:39.000+01:00
diff --git a/www/css/sepiaFW-cards.css b/www/css/sepiaFW-cards.css
@@ -1,5 +1,5 @@
 .sepiaFW-cards-flexSize-container {
-    background: rgba(0, 0, 0, 0.10);
+    background: #e5e5e5; /*rgba(0, 0, 0, 0.10);*/
 	position: relative;
 	margin: 5px 0px;
 	border-radius: 3px;
@@ -154,10 +154,14 @@
 .sepiaFW-cards-list-body .listElement {
 	display: flex;
 	min-height: 33px;
+	padding-top: 2px;
+}
+.sepiaFW-cards-list-body .listElement:first-child {
+	margin-top: 3px;
 }
 .sepiaFW-cards-list-body .listElement div {
 	background: rgba(255, 255, 255, 0.90);
-	border-radius: 3px;
+	border-radius: 0px;
 	display: inline-block;
 	vertical-align: top;
 	min-height: 20px;
@@ -166,34 +170,46 @@
 	display: flex;
     align-items: center;
     justify-content: center;
-	width: 50px;
-	margin: 5px 0px 0px 5px;
+	width: 44px;
+    /*border-right: 3px solid #e5e5e5;*/
+	margin: 0px 2px 0px 5px;
 	user-select: none;
 }
 .sepiaFW-cards-list-body .listElement .listCenter {
-	width: calc(100% - 120px);
-	margin: 5px 5px 0px 5px;
-	padding: 5px;
+	display: flex;
+	align-items: center;
+	justify-content: left;
+	width: calc(100% - 100px);
+	margin: 0px 0px 0px 0px;
+	padding: 5px 8px;
 }
 .sepiaFW-cards-list-body .listElement .listRight {
 	display: flex;
     align-items: center;
     justify-content: center;
-	width: 50px;
-	margin: 5px 5px 0px 0px;
+	width: 44px;
+	border-left: 2px solid #545454;
+	background: #bcbebe;
+	color: #fff;
+	margin: 0px 5px 0px 0px;
 	user-select: none;
 }
-.sepiaFW-notouch-device .sepiaFW-cards-list-body .listElement .listRight:hover {	background: rgba(255, 0, 0, 0.50);		}
+.sepiaFW-notouch-device .sepiaFW-cards-list-body .listElement .listRight:hover {	
+	background: rgba(255, 0, 0, 0.50);		
+}
 
 .sepiaFW-cards-list-body .listElement .checked {
 	background: rgba(0, 255, 0, 0.50);
 }
-.sepiaFW-notouch-device .sepiaFW-cards-list-body .listElement .checked:hover {	background: rgba(0, 255, 255, 0.50);	}
-
+.sepiaFW-notouch-device .sepiaFW-cards-list-body .listElement .checked:hover {	
+	background: rgba(0, 255, 255, 0.50);	
+}
 .sepiaFW-cards-list-body .listElement .unchecked {
 	background: rgba(255, 255, 255, 0.90);
 }
-.sepiaFW-notouch-device .sepiaFW-cards-list-body .listElement .unchecked:hover {	background: rgba(0, 255, 0, 0.50);		}
+.sepiaFW-notouch-device .sepiaFW-cards-list-body .listElement .unchecked:hover {	
+	background: rgba(0, 255, 0, 0.50);		
+}
 
 /* hidden and visible */
 .sepiaFW-cards-list-body .itemHidden {
diff --git a/www/css/sepiaFW-skin-9to5.css b/www/css/sepiaFW-skin-9to5.css
@@ -114,7 +114,10 @@ html {
 .sepiaFW-cards-list-title.newsHeader button {
 	color: #312F3F !important;
 }
-
+.sepiaFW-cards-list-body .listElement .listRight {
+    border-left: 2px solid #545454;
+    background: #d2d2d5;
+}
 .sepiaFW-cards-list-body .weatherNowSmall .weatherNowSmallImage {
 	background: #4B6688;
 }
diff --git a/www/css/sepiaFW-skin-autum.css b/www/css/sepiaFW-skin-autum.css
@@ -132,6 +132,10 @@ html {
 	color: #BE3E2C !important;
 }
 
+.sepiaFW-cards-list-body .listElement .listRight {
+    border-left: 2px solid #545454;
+    background: #d2d2d5;
+}
 .sepiaFW-cards-list-body .weatherNowSmall .weatherNowSmallImage {
 	background: #44451F;
 }
diff --git a/www/css/sepiaFW-skin-bytemind.css b/www/css/sepiaFW-skin-bytemind.css
@@ -161,6 +161,10 @@ html {
 	background: #6b4d9f;
 	color: #fff;
 }
+.sepiaFW-cards-list-body .listElement .listRight {
+    border-left: 2px solid #999;
+    background: #d2d2d5;
+}
 
 /*----- teachUI -----*/
 
diff --git a/www/css/sepiaFW-skin-canny.css b/www/css/sepiaFW-skin-canny.css
@@ -70,7 +70,7 @@ html {
 	color: #fff;
 }
 #sepiaFW-chat-menu li {
-	background: rgba(97, 230, 157, 0.10);
+	background: #e9e9e9;
 }
 
 #sepiaFW-myEvents-buttons button,
@@ -157,9 +157,13 @@ html {
 /*----- cards ------*/
 
 .sepiaFW-cards-list-title {
-	background: #eaeaea;
+	background: #61E69D;
 	color: #2f3035;
 }
+.sepiaFW-cards-list-body .listElement .listRight {
+    border-left: 2px solid #545454;
+    background: #d2d2d5;
+}
 
 /*----- teachUI -----*/
 
diff --git a/www/css/sepiaFW-skin-grid.css b/www/css/sepiaFW-skin-grid.css
@@ -293,6 +293,10 @@ html {
 .sepiaFW-cards-list-body .listElement .checked {
     background: rgba(206, 255, 26, 0.95);
 }
+.sepiaFW-cards-list-body .listElement .listRight {
+    border-left: 2px solid #ceff1a;
+    background: #44505c;
+}
 .sepiaFW-cards-list-body .listElement .listRight:hover {
 	background: rgba(255, 0, 0, 0.95);
 }
diff --git a/www/css/sepiaFW-skin-malachite.css b/www/css/sepiaFW-skin-malachite.css
@@ -10,17 +10,17 @@ html {
 	#sepiaFW-main-window {
 		border-color: #1d1d1d;
 		border-width: 6px;
-		border-radius: 16px;
+		border-radius: 0px;
 		/*overflow: hidden;*/ 	/* we can't use this with position fixed children, its buggy */
 	}
 	#sepiaFW-nav-bar {
-		border-radius: 9px 9px 0 0;
+		border-radius: 0px 0px 0 0;
 	}
 	#sepiaFW-chat-controls {
-		border-radius: 0 0 9px 9px;
+		border-radius: 0 0 0px 0px;
 	}
 	.sepiaFW-top-layer-view {
-		border-radius: 7px;
+		border-radius: 0px;
 	}
 }
 
diff --git a/www/css/sepiaFW-skin-minimal.css b/www/css/sepiaFW-skin-minimal.css
@@ -276,6 +276,7 @@ html {
 .sepiaFW-cards-list-body > div > div {
     background: #000 !important;
 	color: #fff;
+	border-left-color: #222 !important;
 }
 .sepiaFW-cards-list-body .listElement .checked {
     background: #c4f31a !important;
diff --git a/www/css/sepiaFW-skin-neo-sepia-dark.css b/www/css/sepiaFW-skin-neo-sepia-dark.css
@@ -17,7 +17,7 @@ html {
 		border-radius: 9px 9px 0 0;
 	}
 	#sepiaFW-chat-controls {
-		border-radius: 0 0 9px 9px;
+		border-radius: 0 0 0px 0px;
 	}
 	.sepiaFW-top-layer-view {
 		border-radius: 7px;
diff --git a/www/css/sepiaFW-skin-neo-sepia.css b/www/css/sepiaFW-skin-neo-sepia.css
@@ -181,6 +181,10 @@ html {
 	background: #121212; /*rgba(225, 225, 245, 1.00);*/
 	color: #fff; /*#000;*/
 }
+.sepiaFW-cards-list-body .listElement .listRight {
+    border-left: 2px solid #ceff1a;
+    background: #bcbebe;
+}
 .sepiaFW-cards-list-footer {
 	background: #CEFF1A;
 	color: #000;
diff --git a/www/css/sepiaFW-skin-nippon.css b/www/css/sepiaFW-skin-nippon.css
@@ -134,6 +134,10 @@ html {
 	background: #BC002D;
 	color: #fff;
 }
+.sepiaFW-cards-list-body .listElement .listRight {
+    border-left: 2px solid #545454;
+    background: #d2d2d5;
+}
 
 /*----- teachUI -----*/
 
diff --git a/www/css/sepiaFW-skin-odyssey1.css b/www/css/sepiaFW-skin-odyssey1.css
@@ -17,7 +17,7 @@ html {
 		border-radius: 9px 9px 0 0;
 	}
 	#sepiaFW-chat-controls {
-		border-radius: 0 0 9px 9px;
+		border-radius: 0 0 0px 0px;
 	}
 	.sepiaFW-top-layer-view {
 		border-radius: 7px;
diff --git a/www/css/sepiaFW-skin-odyssey2.css b/www/css/sepiaFW-skin-odyssey2.css
@@ -17,7 +17,7 @@ html {
 		border-radius: 9px 9px 0 0;
 	}
 	#sepiaFW-chat-controls {
-		border-radius: 0 0 9px 9px;
+		border-radius: 0 0 0px 0px;
 	}
 	.sepiaFW-top-layer-view {
 		border-radius: 7px;
diff --git a/www/css/sepiaFW-skin-poppy.css b/www/css/sepiaFW-skin-poppy.css
@@ -126,6 +126,10 @@
 	color: #fff;
 }
 
+.sepiaFW-cards-list-body .listElement .listRight {
+    border-left: 2px solid #C1E7FB;
+    background: #d2d2d5;
+}
 .sepiaFW-cards-list-body .weatherNowSmall .weatherNowSmallImage {
 	background: #8E88BE;
 }
diff --git a/www/css/sepiaFW-skin-sakura.css b/www/css/sepiaFW-skin-sakura.css
@@ -130,6 +130,10 @@ html {
 	color: #883446 !important;
 }
 
+.sepiaFW-cards-list-body .listElement .listRight {
+    border-left: 2px solid #eebcb4;
+    background: #d2d2d5;
+}
 .sepiaFW-cards-list-body .weatherNowSmall .weatherNowSmallImage {
 	background: #503040;
 }
diff --git a/www/css/sepiaFW-skin-study.css b/www/css/sepiaFW-skin-study.css
@@ -17,7 +17,7 @@ html {
 		border-radius: 9px 9px 0 0;
 	}
 	#sepiaFW-chat-controls {
-		border-radius: 0 0 9px 9px;
+		border-radius: 0 0 0px 0px;
 	}
 	.sepiaFW-top-layer-view {
 		border-radius: 7px;
diff --git a/www/css/sepiaFW-skin-uplink.css b/www/css/sepiaFW-skin-uplink.css
@@ -158,6 +158,10 @@ html {
 	color: #fff;
 }
 
+.sepiaFW-cards-list-body .listElement .listRight {
+    border-left: 2px solid #545454;
+    background: #d2d2d5;
+}
 .sepiaFW-cards-list-body .weatherNowSmall .weatherNowSmallImage {
 	background: #283059;
 }
diff --git a/www/css/sepiaFW-style.css b/www/css/sepiaFW-style.css
@@ -1627,9 +1627,11 @@ body {
 	margin-bottom: 5px;
 }
 #sepiaFW-my-view > .sepiaFW-cards-flexSize-container > :last-child {
-	padding-bottom: 0px !important;
 	margin-bottom: 0px !important;
 }
+#sepiaFW-my-view > .sepiaFW-cards-flexSize-container > :last-child:not(.sepiaFW-cards-list-footer) {
+	padding-bottom: 0px !important;
+}
 
 #sepiaFW-result-view {
 }

Original file line number	Diff line number	Diff line change
`@@ -114,7 +114,10 @@ html {`
`114`	`114`	`.sepiaFW-cards-list-title.newsHeader button {`
`115`	`115`	`color: #312F3F !important;`
`116`	`116`	`}`
`117`		`-`
	`117`	`+.sepiaFW-cards-list-body .listElement .listRight {`
	`118`	`+ border-left: 2px solid #545454;`
	`119`	`+ background: #d2d2d5;`
	`120`	`+}`
`118`	`121`	`.sepiaFW-cards-list-body .weatherNowSmall .weatherNowSmallImage {`
`119`	`122`	`background: #4B6688;`
`120`	`123`	`}`
Original file line number	Diff line number	Diff line change
`@@ -132,6 +132,10 @@ html {`
`132`	`132`	`color: #BE3E2C !important;`
`133`	`133`	`}`
`134`	`134`
	`135`	`+.sepiaFW-cards-list-body .listElement .listRight {`
	`136`	`+ border-left: 2px solid #545454;`
	`137`	`+ background: #d2d2d5;`
	`138`	`+}`
`135`	`139`	`.sepiaFW-cards-list-body .weatherNowSmall .weatherNowSmallImage {`
`136`	`140`	`background: #44451F;`
`137`	`141`	`}`
Original file line number	Diff line number	Diff line change
`@@ -161,6 +161,10 @@ html {`
`161`	`161`	`background: #6b4d9f;`
`162`	`162`	`color: #fff;`
`163`	`163`	`}`
	`164`	`+.sepiaFW-cards-list-body .listElement .listRight {`
	`165`	`+ border-left: 2px solid #999;`
	`166`	`+ background: #d2d2d5;`
	`167`	`+}`
`164`	`168`
`165`	`169`	`/----- teachUI -----/`
`166`	`170`
Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,7 @@ html {`
`70`	`70`	`color: #fff;`
`71`	`71`	`}`
`72`	`72`	`#sepiaFW-chat-menu li {`
`73`		`- background: rgba(97, 230, 157, 0.10);`
	`73`	`+ background: #e9e9e9;`
`74`	`74`	`}`
`75`	`75`
`76`	`76`	`#sepiaFW-myEvents-buttons button,`
`@@ -157,9 +157,13 @@ html {`
`157`	`157`	`/----- cards ------/`
`158`	`158`
`159`	`159`	`.sepiaFW-cards-list-title {`
`160`		`- background: #eaeaea;`
	`160`	`+ background: #61E69D;`
`161`	`161`	`color: #2f3035;`
`162`	`162`	`}`
	`163`	`+.sepiaFW-cards-list-body .listElement .listRight {`
	`164`	`+ border-left: 2px solid #545454;`
	`165`	`+ background: #d2d2d5;`
	`166`	`+}`
`163`	`167`
`164`	`168`	`/----- teachUI -----/`
`165`	`169`
Original file line number	Diff line number	Diff line change
`@@ -293,6 +293,10 @@ html {`
`293`	`293`	`.sepiaFW-cards-list-body .listElement .checked {`
`294`	`294`	`background: rgba(206, 255, 26, 0.95);`
`295`	`295`	`}`
	`296`	`+.sepiaFW-cards-list-body .listElement .listRight {`
	`297`	`+ border-left: 2px solid #ceff1a;`
	`298`	`+ background: #44505c;`
	`299`	`+}`
`296`	`300`	`.sepiaFW-cards-list-body .listElement .listRight:hover {`
`297`	`301`	`background: rgba(255, 0, 0, 0.95);`
`298`	`302`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,17 +10,17 @@ html {`
`10`	`10`	`#sepiaFW-main-window {`
`11`	`11`	`border-color: #1d1d1d;`
`12`	`12`	`border-width: 6px;`
`13`		`- border-radius: 16px;`
	`13`	`+ border-radius: 0px;`
`14`	`14`	`/overflow: hidden;/ /* we can't use this with position fixed children, its buggy */`
`15`	`15`	`}`
`16`	`16`	`#sepiaFW-nav-bar {`
`17`		`- border-radius: 9px 9px 0 0;`
	`17`	`+ border-radius: 0px 0px 0 0;`
`18`	`18`	`}`
`19`	`19`	`#sepiaFW-chat-controls {`
`20`		`- border-radius: 0 0 9px 9px;`
	`20`	`+ border-radius: 0 0 0px 0px;`
`21`	`21`	`}`
`22`	`22`	`.sepiaFW-top-layer-view {`
`23`		`- border-radius: 7px;`
	`23`	`+ border-radius: 0px;`
`24`	`24`	`}`
`25`	`25`	`}`
`26`	`26`
Original file line number	Diff line number	Diff line change
`@@ -276,6 +276,7 @@ html {`
`276`	`276`	`.sepiaFW-cards-list-body > div > div {`
`277`	`277`	`background: #000 !important;`
`278`	`278`	`color: #fff;`
	`279`	`+ border-left-color: #222 !important;`
`279`	`280`	`}`
`280`	`281`	`.sepiaFW-cards-list-body .listElement .checked {`
`281`	`282`	`background: #c4f31a !important;`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ html {`
`17`	`17`	`border-radius: 9px 9px 0 0;`
`18`	`18`	`}`
`19`	`19`	`#sepiaFW-chat-controls {`
`20`		`- border-radius: 0 0 9px 9px;`
	`20`	`+ border-radius: 0 0 0px 0px;`
`21`	`21`	`}`
`22`	`22`	`.sepiaFW-top-layer-view {`
`23`	`23`	`border-radius: 7px;`