css: simplify flex styling a bit, set more specific selectors for i elements

css/cdm.less

@@ -6,24 +6,22 @@
 	}
 
 	.header img, .footer img,
-	.footer i {
+	.footer i.material-icons {
 		margin : 0px 4px;
 		vertical-align: middle;
 	}
 
 	.header {
+		align-items : center;
+
 		> * {
-			align-self : center;
 			padding : 4px;
 			white-space : nowrap;
 		}
 
 		.left, .right {
 			display : flex;
-
+			align-items : center;
-			> * {
-				align-self : center;
-			}
 
 			i.material-icons {
 				margin-left : 2px;
@@ -56,10 +54,7 @@
 		font-weight : normal;
 		color : @default-text;
 		clear : both;
-
+		align-items : center;
-		> * {
-			align-self : center;
-		}
 
 		.left {
 			flex-grow : 2;
@@ -232,19 +227,16 @@ div#floatingTitle {
 	flex-direction : row;
 	flex-wrap : nowrap;
 	box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1);
+	align-items: center;
 
 	> * {
-		align-self: center;
 		white-space : nowrap;
 		padding : 4px;
 	}
 
 	.left, .right {
 		display : flex;
-
+		align-items : center;
-		> * {
-			align-self : center;
-		}
 
 		i.material-icons {
 			margin-left : 2px;
@@ -266,7 +258,7 @@ div#floatingTitle {
 		display : none;
 	}
 
-	.collapse i {
+	.collapse i.material-icons {
 		color : @color-accent;
 		cursor : pointer;
 	}
@@ -407,7 +399,7 @@ div.cdm.expandable.Unread div.header a.title {
 }
 
 div.cdm.expandable.active {
-	.collapse i {
+	.collapse i.material-icons {
 		color : @color-accent;
 		cursor : pointer;
 	}

css/default.css

@@ -38,26 +38,22 @@ body.ttrss_main div.post div.header .row {
   display: flex;
   margin-bottom: 4px;
   flex-wrap: nowrap;
-}
+  align-items: center;
-body.ttrss_main div.post div.header .row > * {
+  justify-content: space-between;
-  align-self: center;
 }
 body.ttrss_main div.post div.header .comments {
   flex-grow: 2;
 }
 body.ttrss_main div.post div.header .date {
-  text-align: right;
   white-space: nowrap;
-  align-self: flex-start;
 }
 body.ttrss_main div.post div.header img,
-body.ttrss_main div.post div.header i {
+body.ttrss_main div.post div.header i.material-icons {
   margin: 0px 4px;
   vertical-align: middle;
 }
 body.ttrss_main div.post div.header .title {
   flex-grow: 2;
-  align-self: flex-start;
   font-size: 15px;
   font-weight: 600;
   text-rendering: optimizelegibility;
@@ -82,9 +78,7 @@ body.ttrss_main div.post div.content iframe {
 }
 body.ttrss_main .inline-player {
   display: flex;
-}
+  align-items: center;
-body.ttrss_main .inline-player > * {
-  align-self: center;
 }
 body.ttrss_main .inline-player audio {
   margin-right: 8px;
@@ -95,9 +89,9 @@ body.ttrss_main .article-note {
   border: 1px solid #e7d796;
   color: #9a8c59;
   display: flex;
+  align-items: center;
 }
 body.ttrss_main .article-note > * {
-  align-self: center;
   padding: 5px;
 }
 body.ttrss_main .article-note.editable {
@@ -145,10 +139,10 @@ body.ttrss_main #notify {
   font-size: 13px;
   z-index: 99;
   display: flex;
+  align-items: center;
   transition: all 0.5s ease-in-out;
 }
 body.ttrss_main #notify > * {
-  align-self: center;
   padding: 4px;
 }
 body.ttrss_main #notify img {
@@ -192,9 +186,9 @@ body.ttrss_main .hl {
   flex-direction: row;
   flex-wrap: nowrap;
   background: #f5f5f5;
+  align-items: center;
 }
 body.ttrss_main .hl > * {
-  align-self: center;
   white-space: nowrap;
   padding: 4px;
 }
@@ -204,10 +198,7 @@ body.ttrss_main .hl img {
 body.ttrss_main .hl .left,
 body.ttrss_main .hl .right {
   display: flex;
-}
+  align-items: center;
-body.ttrss_main .hl .left > *,
-body.ttrss_main .hl .right > * {
-  align-self: center;
 }
 body.ttrss_main .hl .left i.material-icons,
 body.ttrss_main .hl .right i.material-icons {
@@ -384,9 +375,9 @@ body.ttrss_main ul.browseFeedList {
 }
 body.ttrss_main ul.browseFeedList li {
   display: flex;
+  align-items: center;
 }
 body.ttrss_main ul.browseFeedList li > * {
-  align-self: center;
   margin: 2px;
 }
 body.ttrss_main .browseFeedList span.subscribers {
@@ -681,9 +672,7 @@ body.ttrss_main #toolbar-frame #toolbar {
   flex-wrap: nowrap;
   color: #555;
   font-size: 12px;
-}
+  align-items: center;
-body.ttrss_main #toolbar-frame #toolbar > * {
-  align-self: center;
 }
 body.ttrss_main #toolbar-frame #toolbar .dijitSelect,
 body.ttrss_main #toolbar-frame #toolbar .dijitDropDownButton .dijitButtonNode,
@@ -705,19 +694,15 @@ body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines {
 body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left {
   flex-grow: 2;
   display: flex;
+  align-items: center;
 }
 body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left img {
   vertical-align: middle;
   margin-right: 8px;
 }
-body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left > * {
-  align-self: center;
-}
 body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .right {
   display: flex;
-}
+  align-items: center;
-body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .right > * {
-  align-self: center;
 }
 body.ttrss_main #toolbar-frame #toolbar #updates-available {
   color: #69C671;
@@ -1025,22 +1010,21 @@ video::-webkit-media-controls-overlay-play-button {
 }
 .cdm .header img,
 .cdm .footer img,
-.cdm .footer i {
+.cdm .footer i.material-icons {
   margin: 0px 4px;
   vertical-align: middle;
 }
+.cdm .header {
+  align-items: center;
+}
 .cdm .header > * {
-  align-self: center;
   padding: 4px;
   white-space: nowrap;
 }
 .cdm .header .left,
 .cdm .header .right {
   display: flex;
-}
+  align-items: center;
-.cdm .header .left > *,
-.cdm .header .right > * {
-  align-self: center;
 }
 .cdm .header .left i.material-icons,
 .cdm .header .right i.material-icons {
@@ -1068,9 +1052,7 @@ video::-webkit-media-controls-overlay-play-button {
   font-weight: normal;
   color: #555;
   clear: both;
-}
+  align-items: center;
-.cdm .footer > * {
-  align-self: center;
 }
 .cdm .footer .left {
   flex-grow: 2;
@@ -1209,19 +1191,16 @@ div#floatingTitle {
   flex-direction: row;
   flex-wrap: nowrap;
   box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
+  align-items: center;
 }
 div#floatingTitle > * {
-  align-self: center;
   white-space: nowrap;
   padding: 4px;
 }
 div#floatingTitle .left,
 div#floatingTitle .right {
   display: flex;
-}
+  align-items: center;
-div#floatingTitle .left > *,
-div#floatingTitle .right > * {
-  align-self: center;
 }
 div#floatingTitle .left i.material-icons,
 div#floatingTitle .right i.material-icons {
@@ -1241,7 +1220,7 @@ div#floatingTitle .right i.icon-anchor {
 div#floatingTitle .excerpt {
   display: none;
 }
-div#floatingTitle .collapse i {
+div#floatingTitle .collapse i.material-icons {
   color: #257aa7;
   cursor: pointer;
 }
@@ -1352,7 +1331,7 @@ div.cdm.expandable div.header a.title {
 div.cdm.expandable.Unread div.header a.title {
   color: black;
 }
-div.cdm.expandable.active .collapse i {
+div.cdm.expandable.active .collapse i.material-icons {
   color: #257aa7;
   cursor: pointer;
 }

css/tt-rss.less

@@ -28,10 +28,8 @@ body.ttrss_main {
 				display : flex;
 				margin-bottom : 4px;
 				flex-wrap : nowrap;
-
+				align-items : center;
-				> * {
+				justify-content : space-between;
-					align-self : center;
-				}
 			}
 
 			.comments {
@@ -39,19 +37,16 @@ body.ttrss_main {
 			}
 
 			.date {
-				text-align : right;
 				white-space : nowrap;
-				align-self : flex-start;
 			}
 
-			img, i {
+			img, i.material-icons {
 				margin : 0px 4px;
 				vertical-align: middle;
 			}
 
 			.title {
 				flex-grow : 2;
-				align-self : flex-start;
 				font-size : 15px;
 				font-weight : 600;
 				text-rendering: optimizelegibility;
@@ -83,10 +78,7 @@ body.ttrss_main {
 
 	.inline-player {
 		display : flex;
-
+		align-items : center;
-		> * {
-			align-self : center;
-		}
 
 		audio {
 			margin-right : 8px;
@@ -99,9 +91,9 @@ body.ttrss_main {
 		border: 1px solid #e7d796;
 		color : #9a8c59;
 		display : flex;
+		align-items : center;
 
 		> * {
-			align-self : center;
 			padding : 5px;
 		}
 	}
@@ -163,11 +155,10 @@ body.ttrss_main {
 		font-size : 13px;
 		z-index : 99;
 		display : flex;
-
+		align-items : center;
 		transition: all 0.5s ease-in-out;
 
 		> * {
-			align-self : center;
 			padding : 4px;
 		}
 
@@ -221,9 +212,9 @@ body.ttrss_main {
 		flex-direction : row;
 		flex-wrap : nowrap;
 		background : @color-panel-bg;
+		align-items : center;
 
 		> * {
-			align-self : center;
 			white-space : nowrap;
 			padding : 4px;
 		}
@@ -234,10 +225,7 @@ body.ttrss_main {
 
 		.left, .right {
 			display : flex;
-
+			align-items : center;
-			> * {
-				align-self : center;
-			}
 
 			i.material-icons {
 				margin-left : 2px;
@@ -438,9 +426,9 @@ body.ttrss_main {
 
 		li {
 			display : flex;
+			align-items : center;
 
 			> * {
-				align-self : center;
 				margin : 2px;
 			}
 		}
@@ -802,10 +790,7 @@ body.ttrss_main {
 			flex-wrap : nowrap;
 			color : @default-text;
 			font-size : 12px;
-
+			align-items : center;
-			> * {
-				align-self : center;
-			}
 
 			.dijitSelect,
 			.dijitDropDownButton .dijitButtonNode,
@@ -829,23 +814,17 @@ body.ttrss_main {
 				.left {
 					flex-grow: 2;
 					display : flex;
+					align-items : center;
 
 					img {
 						vertical-align : middle;
 						margin-right : 8px;
 					}
-
-					> * {
-						align-self: center;
-					}
 				}
 
 				.right {
 					display : flex;
-
+					align-items : center;
-					> * {
-						align-self : center;
-					}
 				}
 			}
 

themes/night.css

@@ -39,26 +39,22 @@ body.ttrss_main div.post div.header .row {
   display: flex;
   margin-bottom: 4px;
   flex-wrap: nowrap;
-}
+  align-items: center;
-body.ttrss_main div.post div.header .row > * {
+  justify-content: space-between;
-  align-self: center;
 }
 body.ttrss_main div.post div.header .comments {
   flex-grow: 2;
 }
 body.ttrss_main div.post div.header .date {
-  text-align: right;
   white-space: nowrap;
-  align-self: flex-start;
 }
 body.ttrss_main div.post div.header img,
-body.ttrss_main div.post div.header i {
+body.ttrss_main div.post div.header i.material-icons {
   margin: 0px 4px;
   vertical-align: middle;
 }
 body.ttrss_main div.post div.header .title {
   flex-grow: 2;
-  align-self: flex-start;
   font-size: 15px;
   font-weight: 600;
   text-rendering: optimizelegibility;
@@ -83,9 +79,7 @@ body.ttrss_main div.post div.content iframe {
 }
 body.ttrss_main .inline-player {
   display: flex;
-}
+  align-items: center;
-body.ttrss_main .inline-player > * {
-  align-self: center;
 }
 body.ttrss_main .inline-player audio {
   margin-right: 8px;
@@ -96,9 +90,9 @@ body.ttrss_main .article-note {
   border: 1px solid #e7d796;
   color: #9a8c59;
   display: flex;
+  align-items: center;
 }
 body.ttrss_main .article-note > * {
-  align-self: center;
   padding: 5px;
 }
 body.ttrss_main .article-note.editable {
@@ -146,10 +140,10 @@ body.ttrss_main #notify {
   font-size: 13px;
   z-index: 99;
   display: flex;
+  align-items: center;
   transition: all 0.5s ease-in-out;
 }
 body.ttrss_main #notify > * {
-  align-self: center;
   padding: 4px;
 }
 body.ttrss_main #notify img {
@@ -193,9 +187,9 @@ body.ttrss_main .hl {
   flex-direction: row;
   flex-wrap: nowrap;
   background: #222;
+  align-items: center;
 }
 body.ttrss_main .hl > * {
-  align-self: center;
   white-space: nowrap;
   padding: 4px;
 }
@@ -205,10 +199,7 @@ body.ttrss_main .hl img {
 body.ttrss_main .hl .left,
 body.ttrss_main .hl .right {
   display: flex;
-}
+  align-items: center;
-body.ttrss_main .hl .left > *,
-body.ttrss_main .hl .right > * {
-  align-self: center;
 }
 body.ttrss_main .hl .left i.material-icons,
 body.ttrss_main .hl .right i.material-icons {
@@ -385,9 +376,9 @@ body.ttrss_main ul.browseFeedList {
 }
 body.ttrss_main ul.browseFeedList li {
   display: flex;
+  align-items: center;
 }
 body.ttrss_main ul.browseFeedList li > * {
-  align-self: center;
   margin: 2px;
 }
 body.ttrss_main .browseFeedList span.subscribers {
@@ -682,9 +673,7 @@ body.ttrss_main #toolbar-frame #toolbar {
   flex-wrap: nowrap;
   color: #ccc;
   font-size: 12px;
-}
+  align-items: center;
-body.ttrss_main #toolbar-frame #toolbar > * {
-  align-self: center;
 }
 body.ttrss_main #toolbar-frame #toolbar .dijitSelect,
 body.ttrss_main #toolbar-frame #toolbar .dijitDropDownButton .dijitButtonNode,
@@ -706,19 +695,15 @@ body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines {
 body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left {
   flex-grow: 2;
   display: flex;
+  align-items: center;
 }
 body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left img {
   vertical-align: middle;
   margin-right: 8px;
 }
-body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left > * {
-  align-self: center;
-}
 body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .right {
   display: flex;
-}
+  align-items: center;
-body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .right > * {
-  align-self: center;
 }
 body.ttrss_main #toolbar-frame #toolbar #updates-available {
   color: #69C671;
@@ -1026,22 +1011,21 @@ video::-webkit-media-controls-overlay-play-button {
 }
 .cdm .header img,
 .cdm .footer img,
-.cdm .footer i {
+.cdm .footer i.material-icons {
   margin: 0px 4px;
   vertical-align: middle;
 }
+.cdm .header {
+  align-items: center;
+}
 .cdm .header > * {
-  align-self: center;
   padding: 4px;
   white-space: nowrap;
 }
 .cdm .header .left,
 .cdm .header .right {
   display: flex;
-}
+  align-items: center;
-.cdm .header .left > *,
-.cdm .header .right > * {
-  align-self: center;
 }
 .cdm .header .left i.material-icons,
 .cdm .header .right i.material-icons {
@@ -1069,9 +1053,7 @@ video::-webkit-media-controls-overlay-play-button {
   font-weight: normal;
   color: #ccc;
   clear: both;
-}
+  align-items: center;
-.cdm .footer > * {
-  align-self: center;
 }
 .cdm .footer .left {
   flex-grow: 2;
@@ -1210,19 +1192,16 @@ div#floatingTitle {
   flex-direction: row;
   flex-wrap: nowrap;
   box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
+  align-items: center;
 }
 div#floatingTitle > * {
-  align-self: center;
   white-space: nowrap;
   padding: 4px;
 }
 div#floatingTitle .left,
 div#floatingTitle .right {
   display: flex;
-}
+  align-items: center;
-div#floatingTitle .left > *,
-div#floatingTitle .right > * {
-  align-self: center;
 }
 div#floatingTitle .left i.material-icons,
 div#floatingTitle .right i.material-icons {
@@ -1242,7 +1221,7 @@ div#floatingTitle .right i.icon-anchor {
 div#floatingTitle .excerpt {
   display: none;
 }
-div#floatingTitle .collapse i {
+div#floatingTitle .collapse i.material-icons {
   color: #b87d2c;
   cursor: pointer;
 }
@@ -1353,7 +1332,7 @@ div.cdm.expandable div.header a.title {
 div.cdm.expandable.Unread div.header a.title {
   color: black;
 }
-div.cdm.expandable.active .collapse i {
+div.cdm.expandable.active .collapse i.material-icons {
   color: #b87d2c;
   cursor: pointer;
 }

themes/night_blue.css

@@ -39,26 +39,22 @@ body.ttrss_main div.post div.header .row {
   display: flex;
   margin-bottom: 4px;
   flex-wrap: nowrap;
-}
+  align-items: center;
-body.ttrss_main div.post div.header .row > * {
+  justify-content: space-between;
-  align-self: center;
 }
 body.ttrss_main div.post div.header .comments {
   flex-grow: 2;
 }
 body.ttrss_main div.post div.header .date {
-  text-align: right;
   white-space: nowrap;
-  align-self: flex-start;
 }
 body.ttrss_main div.post div.header img,
-body.ttrss_main div.post div.header i {
+body.ttrss_main div.post div.header i.material-icons {
   margin: 0px 4px;
   vertical-align: middle;
 }
 body.ttrss_main div.post div.header .title {
   flex-grow: 2;
-  align-self: flex-start;
   font-size: 15px;
   font-weight: 600;
   text-rendering: optimizelegibility;
@@ -83,9 +79,7 @@ body.ttrss_main div.post div.content iframe {
 }
 body.ttrss_main .inline-player {
   display: flex;
-}
+  align-items: center;
-body.ttrss_main .inline-player > * {
-  align-self: center;
 }
 body.ttrss_main .inline-player audio {
   margin-right: 8px;
@@ -96,9 +90,9 @@ body.ttrss_main .article-note {
   border: 1px solid #e7d796;
   color: #9a8c59;
   display: flex;
+  align-items: center;
 }
 body.ttrss_main .article-note > * {
-  align-self: center;
   padding: 5px;
 }
 body.ttrss_main .article-note.editable {
@@ -146,10 +140,10 @@ body.ttrss_main #notify {
   font-size: 13px;
   z-index: 99;
   display: flex;
+  align-items: center;
   transition: all 0.5s ease-in-out;
 }
 body.ttrss_main #notify > * {
-  align-self: center;
   padding: 4px;
 }
 body.ttrss_main #notify img {
@@ -193,9 +187,9 @@ body.ttrss_main .hl {
   flex-direction: row;
   flex-wrap: nowrap;
   background: #222;
+  align-items: center;
 }
 body.ttrss_main .hl > * {
-  align-self: center;
   white-space: nowrap;
   padding: 4px;
 }
@@ -205,10 +199,7 @@ body.ttrss_main .hl img {
 body.ttrss_main .hl .left,
 body.ttrss_main .hl .right {
   display: flex;
-}
+  align-items: center;
-body.ttrss_main .hl .left > *,
-body.ttrss_main .hl .right > * {
-  align-self: center;
 }
 body.ttrss_main .hl .left i.material-icons,
 body.ttrss_main .hl .right i.material-icons {
@@ -385,9 +376,9 @@ body.ttrss_main ul.browseFeedList {
 }
 body.ttrss_main ul.browseFeedList li {
   display: flex;
+  align-items: center;
 }
 body.ttrss_main ul.browseFeedList li > * {
-  align-self: center;
   margin: 2px;
 }
 body.ttrss_main .browseFeedList span.subscribers {
@@ -682,9 +673,7 @@ body.ttrss_main #toolbar-frame #toolbar {
   flex-wrap: nowrap;
   color: #ccc;
   font-size: 12px;
-}
+  align-items: center;
-body.ttrss_main #toolbar-frame #toolbar > * {
-  align-self: center;
 }
 body.ttrss_main #toolbar-frame #toolbar .dijitSelect,
 body.ttrss_main #toolbar-frame #toolbar .dijitDropDownButton .dijitButtonNode,
@@ -706,19 +695,15 @@ body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines {
 body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left {
   flex-grow: 2;
   display: flex;
+  align-items: center;
 }
 body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left img {
   vertical-align: middle;
   margin-right: 8px;
 }
-body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left > * {
-  align-self: center;
-}
 body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .right {
   display: flex;
-}
+  align-items: center;
-body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .right > * {
-  align-self: center;
 }
 body.ttrss_main #toolbar-frame #toolbar #updates-available {
   color: #69C671;
@@ -1026,22 +1011,21 @@ video::-webkit-media-controls-overlay-play-button {
 }
 .cdm .header img,
 .cdm .footer img,
-.cdm .footer i {
+.cdm .footer i.material-icons {
   margin: 0px 4px;
   vertical-align: middle;
 }
+.cdm .header {
+  align-items: center;
+}
 .cdm .header > * {
-  align-self: center;
   padding: 4px;
   white-space: nowrap;
 }
 .cdm .header .left,
 .cdm .header .right {
   display: flex;
-}
+  align-items: center;
-.cdm .header .left > *,
-.cdm .header .right > * {
-  align-self: center;
 }
 .cdm .header .left i.material-icons,
 .cdm .header .right i.material-icons {
@@ -1069,9 +1053,7 @@ video::-webkit-media-controls-overlay-play-button {
   font-weight: normal;
   color: #ccc;
   clear: both;
-}
+  align-items: center;
-.cdm .footer > * {
-  align-self: center;
 }
 .cdm .footer .left {
   flex-grow: 2;
@@ -1210,19 +1192,16 @@ div#floatingTitle {
   flex-direction: row;
   flex-wrap: nowrap;
   box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
+  align-items: center;
 }
 div#floatingTitle > * {
-  align-self: center;
   white-space: nowrap;
   padding: 4px;
 }
 div#floatingTitle .left,
 div#floatingTitle .right {
   display: flex;
-}
+  align-items: center;
-div#floatingTitle .left > *,
-div#floatingTitle .right > * {
-  align-self: center;
 }
 div#floatingTitle .left i.material-icons,
 div#floatingTitle .right i.material-icons {
@@ -1242,7 +1221,7 @@ div#floatingTitle .right i.icon-anchor {
 div#floatingTitle .excerpt {
   display: none;
 }
-div#floatingTitle .collapse i {
+div#floatingTitle .collapse i.material-icons {
   color: #257aa7;
   cursor: pointer;
 }
@@ -1353,7 +1332,7 @@ div.cdm.expandable div.header a.title {
 div.cdm.expandable.Unread div.header a.title {
   color: black;
 }
-div.cdm.expandable.active .collapse i {
+div.cdm.expandable.active .collapse i.material-icons {
   color: #257aa7;
   cursor: pointer;
 }