Improved: Frss.css - font size + line height with 'rem' values (#4671)

* headlines h1-h3

* delete for <sup> trust the browser

* .icons = 1rem

* line-height WIP

* .flux .item

* paragraphs

* kbd

* button.as-link

* .form-advanced-title

* set line-height 1.5 as default

* .flux .item.title .summary

* .flux .item.title .author

* .content > header, .content > footer

* popup

* last lines

* RTL CSS

* imrpove jumpy line

* Origine Compact

* Swage

* FRSS CSS RTL

* deleted: br

* deleted: font-size: 16px

* RTL CSS

app/views/helpers/feed/update.phtml

@@ -650,7 +650,7 @@
 
 <div id="popup">
 	<div id="popup-content">
-		<div id="popup-close" class="popup-row">×</div>
+		<div id="popup-close" class="popup-row"><?= _i('close') ?></div>
 		<div id="popup-iframe-container" class="popup-row">
 			<div id="popup-iframe-sub">
 				<iframe id="popup-iframe" frameborder="0"></iframe>

p/themes/Origine-compact/origine-compact.css

@@ -162,6 +162,10 @@ a.btn,
 	max-height: 1.5em;
 }
 
+.flux:not(.current):hover .item.title {
+	top: auto;
+}
+
 /*=== Content of feed articles */
 .content {
 	padding: 10px 10px;

p/themes/Origine-compact/origine-compact.rtl.css

@@ -162,6 +162,10 @@ a.btn,
 	max-height: 1.5em;
 }
 
+.flux:not(.current):hover .item.title {
+	top: auto;
+}
+
 /*=== Content of feed articles */
 .content {
 	padding: 10px 10px;

p/themes/Swage/swage.css

@@ -814,6 +814,7 @@ form th {
 .flux:hover:not(.current):hover .item.title,
 .flux .current:not(.current):hover .item.title {
 	background: #fff;
+	top: 0.15rem;
 }
 .flux.favorite:not(.current) {
 	background: #fff6da;
@@ -1015,6 +1016,10 @@ a.signin {
 		text-align: center;
 	}
 
+	.flux:not(.current):hover .item.title {
+		top: auto !important;
+	}
+
 	.aside {
 		padding: 0;
 		width: 0;

p/themes/Swage/swage.rtl.css

@@ -814,6 +814,7 @@ form th {
 .flux:hover:not(.current):hover .item.title,
 .flux .current:not(.current):hover .item.title {
 	background: #fff;
+	top: 0.15rem;
 }
 .flux.favorite:not(.current) {
 	background: #fff6da;
@@ -1015,6 +1016,10 @@ a.signin {
 		text-align: center;
 	}
 
+	.flux:not(.current):hover .item.title {
+		top: auto !important;
+	}
+
 	.aside {
 		padding: 0;
 		width: 0;

p/themes/Swage/swage.scss

@@ -1038,6 +1038,7 @@ form {
 
 		&:not(.current):hover .item.title {
 			background: $color_hover;
+			top: 0.15rem;
 		}
 	}
 
@@ -1285,6 +1286,10 @@ a.signin {
 		text-align: center;
 	}
 
+	.flux:not(.current):hover .item.title {
+		top: auto !important;
+	}
+
 	.aside {
 		padding: 0;
 		width: 0;

p/themes/base-theme/frss.css

@@ -37,6 +37,8 @@
 	--frss-scrollbar-track-hover: #0001;
 
 	--frss-loading-image: url("loader.gif");
+
+	line-height: 1.5;
 }
 
 @font-face {
@@ -83,31 +85,31 @@ ul, ol, dd {
 
 /*=== Titles */
 h1 {
-	margin: 0.6em 0 0.3em;
-	font-size: 1.5em;
-	line-height: 1.6em;
+	margin: 1rem 0 0.5rem;
+	font-size: 1.6rem;
+	line-height: 1.5;
 }
 
 h2 {
-	margin: 0.5em 0 0.25em;
-	font-size: 1.3em;
-	line-height: 2em;
+	margin: 0.5rem 0 0.25rem;
+	font-size: 1.4rem;
+	line-height: 1.5;
 }
 
 h3 {
-	margin: 0.5em 0 0.25em;
-	font-size: 1.1em;
-	line-height: 2em;
+	margin: 0.5rem 0 0.25rem;
+	font-size: 1.2rem;
+	line-height: 1.5;
 }
 
 /*=== Paragraphs */
 p {
-	margin: 1em 0 0.5em;
-	font-size: 1em;
+	margin: 1rem 0 0.5rem;
+	font-size: 1rem;
 }
 
 p.help, .prompt p.help {
-	margin: 5px 0 0.5em;
+	margin: 0.25rem 0 0.5rem;
 	text-align: left;
 }
 
@@ -115,21 +117,14 @@ p.help .icon {
 	filter: brightness(2);
 }
 
-sup {
-	line-height: 25px;
-	position: relative;
-	top: -0.8em;
-	vertical-align: baseline;
-}
-
 kbd {
 	background-color: var(--frss-background-color-middle);
-	padding: 2px 4px 2px 24px;
+	padding: 0 0.5rem 0 0.5rem;
 	display: inline-block;
 	color: var(--frss-font-color-grey-dark);
+	font-size: 0.9rem;
 	border: 1px solid var(--frss-border-color);
 	border-radius: 3px;
-	text-indent: -20px;
 	white-space: pre-wrap;
 	overflow-wrap: anywhere;
 }
@@ -142,8 +137,8 @@ img {
 
 img.favicon {
 	margin: 0 0.25rem 0 0;
-	width: 16px;
-	height: 16px;
+	width: 1rem;
+	height: 1rem;
 	vertical-align: middle;
 }
 
@@ -310,7 +305,7 @@ button.as-link:hover,
 button.as-link:active {
 	background: transparent;
 	color: inherit;
-	font-size: 1.1em;
+	font-size: 1.1rem;
 	border: none;
 	cursor: pointer;
 	text-align: left;
@@ -397,7 +392,6 @@ td.numeric {
 .form-advanced-title {
 	padding: 15px 0;
 	width: 200px;
-	font-size: 1.1em;
 	font-weight: bold;
 	text-align: right;
 	cursor: pointer;
@@ -730,10 +724,10 @@ input[type="checkbox"]:focus-visible {
 .icon {
 	display: inline-block;
 	max-width: none;
-	width: 16px;
-	height: 16px;
+	width: 1rem;
+	height: 1rem;
 	vertical-align: middle;
-	line-height: 16px;
+	line-height: 1;
 }
 
 /* === stream-footer **/
@@ -772,7 +766,6 @@ input[type="checkbox"]:focus-visible {
 
 .pagination .item a {
 	display: block;
-	line-height: 3em;
 	text-decoration: none;
 }
 
@@ -1121,8 +1114,12 @@ input[type="search"] {
 	position: static;
 }
 
+.flux_header:hover {
+	position: relative;
+}
+
 .flux .item {
-	line-height: 40px;
+	padding: 0.5rem 0;
 	white-space: nowrap;
 }
 
@@ -1151,6 +1148,7 @@ a.website:hover .favicon {
 	background-color: var(--frss-background-color);
 	max-width: calc(100% - 320px);
 	position: absolute;
+	top: 0.25rem
 }
 
 .flux:not(.current):hover .item.title.multiline {
@@ -1208,8 +1206,7 @@ a.website:hover .favicon {
 .flux .item.title .summary {
 	max-height: 3em;
 	color: var(--frss-font-color-grey-dark);
-	font-size: 0.9em;
-	line-height: 1.5em;
+	font-size: 0.9rem;
 	font-weight: normal;
 	white-space: initial;
 	overflow: hidden;
@@ -1219,7 +1216,7 @@ a.website:hover .favicon {
 .flux .item.title .author {
 	padding-left: 1rem;
 	color: var(--frss-font-color-grey-dark);
-	font-size: .9rem;
+	font-size: 0.9rem;
 	font-weight: normal;
 }
 
@@ -1254,7 +1251,7 @@ a.website:hover .favicon {
 .content {
 	min-height: 20em;
 	margin: auto;
-	line-height: 1.7em;
+	line-height: 1.5;
 	word-wrap: break-word;
 }
 
@@ -1277,7 +1274,7 @@ a.website:hover .favicon {
 .content > header,
 .content > footer {
 	color: var(--frss-font-color-grey-light);
-	font-size: .9rem;
+	font-size: 0.9rem;
 }
 
 .content > footer {
@@ -1345,10 +1342,6 @@ a.website:hover .favicon {
 	content: ' · ';
 }
 
-br {
-	line-height: 1em;
-}
-
 /*=== Notification and actualize notification */
 .notification {
 	padding: 10px 50px 10px 10px;
@@ -1429,11 +1422,8 @@ br {
 #popup-close {
 	float: right;
 	width: 27px;
-	height: 27px;
-	padding-bottom: 5px;
-	color: var(--frss-font-color-grey-light);
-	font-size: 28px;
-	font-weight: bold;
+	height: 22px;
+	padding-top: 5px;
 }
 
 #popup-close:hover,
@@ -1505,11 +1495,11 @@ br {
 	display: block;
 	width: 100%;
 	text-align: center;
-	font-size: 1.4em;
+	font-size: 1.25rem;
 }
 
 .bigTick {
-	font-size: 4em;
+	font-size: 4rem;
 }
 
 /*=== Statistiques */
@@ -1690,14 +1680,14 @@ br {
 	height: 100%;
 	color: var(--frss-font-color-light);
 	font-family: "Varela Round", sans-serif;
-	font-size: 1000%;
+	font-size: 9rem;
 	position: absolute;
 	opacity: 0;
 	z-index: 9;
 	cursor: pointer;
 	transition: opacity .2s;
 	text-align: center;
-	line-height: 225%;
+	line-height: 2;
 	background-color: var(--frss-background-color-transparent);
 	text-shadow: 0px 0px 15px rgb(119, 119, 119);
 }
@@ -1778,7 +1768,7 @@ input:checked + .slide-container .properties {
 	top: 0;
 	right: 10px;
 	text-align: center;
-	font-size: 0.9em;
+	font-size: 0.9rem;
 	border-radius: 12px;
 	line-height: 1;
 	font-weight: initial;
@@ -1854,7 +1844,7 @@ input:checked + .slide-container .properties {
 }
 
 .enclosure [download] {
-	font-size: xx-large;
+	font-size: 3rem;
 	margin-left: .8em;
 }
 
@@ -2089,6 +2079,7 @@ input:checked + .slide-container .properties {
 		position: relative;
 		width: auto;
 		white-space: nowrap;
+		top: 0;
 	}
 
 	.notification {

p/themes/base-theme/frss.rtl.css

@@ -37,6 +37,8 @@
 	--frss-scrollbar-track-hover: #0001;
 
 	--frss-loading-image: url("loader.gif");
+
+	line-height: 1.5;
 }
 
 @font-face {
@@ -83,31 +85,31 @@ ul, ol, dd {
 
 /*=== Titles */
 h1 {
-	margin: 0.6em 0 0.3em;
-	font-size: 1.5em;
-	line-height: 1.6em;
+	margin: 1rem 0 0.5rem;
+	font-size: 1.6rem;
+	line-height: 1.5;
 }
 
 h2 {
-	margin: 0.5em 0 0.25em;
-	font-size: 1.3em;
-	line-height: 2em;
+	margin: 0.5rem 0 0.25rem;
+	font-size: 1.4rem;
+	line-height: 1.5;
 }
 
 h3 {
-	margin: 0.5em 0 0.25em;
-	font-size: 1.1em;
-	line-height: 2em;
+	margin: 0.5rem 0 0.25rem;
+	font-size: 1.2rem;
+	line-height: 1.5;
 }
 
 /*=== Paragraphs */
 p {
-	margin: 1em 0 0.5em;
-	font-size: 1em;
+	margin: 1rem 0 0.5rem;
+	font-size: 1rem;
 }
 
 p.help, .prompt p.help {
-	margin: 5px 0 0.5em;
+	margin: 0.25rem 0 0.5rem;
 	text-align: right;
 }
 
@@ -115,21 +117,14 @@ p.help .icon {
 	filter: brightness(2);
 }
 
-sup {
-	line-height: 25px;
-	position: relative;
-	top: -0.8em;
-	vertical-align: baseline;
-}
-
 kbd {
 	background-color: var(--frss-background-color-middle);
-	padding: 2px 24px 2px 4px;
+	padding: 0 0.5rem 0 0.5rem;
 	display: inline-block;
 	color: var(--frss-font-color-grey-dark);
+	font-size: 0.9rem;
 	border: 1px solid var(--frss-border-color);
 	border-radius: 3px;
-	text-indent: -20px;
 	white-space: pre-wrap;
 	overflow-wrap: anywhere;
 }
@@ -142,8 +137,8 @@ img {
 
 img.favicon {
 	margin: 0 0 0 0.25rem;
-	width: 16px;
-	height: 16px;
+	width: 1rem;
+	height: 1rem;
 	vertical-align: middle;
 }
 
@@ -310,7 +305,7 @@ button.as-link:hover,
 button.as-link:active {
 	background: transparent;
 	color: inherit;
-	font-size: 1.1em;
+	font-size: 1.1rem;
 	border: none;
 	cursor: pointer;
 	text-align: right;
@@ -397,7 +392,6 @@ td.numeric {
 .form-advanced-title {
 	padding: 15px 0;
 	width: 200px;
-	font-size: 1.1em;
 	font-weight: bold;
 	text-align: left;
 	cursor: pointer;
@@ -730,10 +724,10 @@ input[type="checkbox"]:focus-visible {
 .icon {
 	display: inline-block;
 	max-width: none;
-	width: 16px;
-	height: 16px;
+	width: 1rem;
+	height: 1rem;
 	vertical-align: middle;
-	line-height: 16px;
+	line-height: 1;
 }
 
 /* === stream-footer **/
@@ -772,7 +766,6 @@ input[type="checkbox"]:focus-visible {
 
 .pagination .item a {
 	display: block;
-	line-height: 3em;
 	text-decoration: none;
 }
 
@@ -1121,8 +1114,12 @@ input[type="search"] {
 	position: static;
 }
 
+.flux_header:hover {
+	position: relative;
+}
+
 .flux .item {
-	line-height: 40px;
+	padding: 0.5rem 0;
 	white-space: nowrap;
 }
 
@@ -1151,6 +1148,7 @@ a.website:hover .favicon {
 	background-color: var(--frss-background-color);
 	max-width: calc(100% - 320px);
 	position: absolute;
+	top: 0.25rem
 }
 
 .flux:not(.current):hover .item.title.multiline {
@@ -1208,8 +1206,7 @@ a.website:hover .favicon {
 .flux .item.title .summary {
 	max-height: 3em;
 	color: var(--frss-font-color-grey-dark);
-	font-size: 0.9em;
-	line-height: 1.5em;
+	font-size: 0.9rem;
 	font-weight: normal;
 	white-space: initial;
 	overflow: hidden;
@@ -1219,7 +1216,7 @@ a.website:hover .favicon {
 .flux .item.title .author {
 	padding-right: 1rem;
 	color: var(--frss-font-color-grey-dark);
-	font-size: .9rem;
+	font-size: 0.9rem;
 	font-weight: normal;
 }
 
@@ -1254,7 +1251,7 @@ a.website:hover .favicon {
 .content {
 	min-height: 20em;
 	margin: auto;
-	line-height: 1.7em;
+	line-height: 1.5;
 	word-wrap: break-word;
 }
 
@@ -1277,7 +1274,7 @@ a.website:hover .favicon {
 .content > header,
 .content > footer {
 	color: var(--frss-font-color-grey-light);
-	font-size: .9rem;
+	font-size: 0.9rem;
 }
 
 .content > footer {
@@ -1345,10 +1342,6 @@ a.website:hover .favicon {
 	content: ' · ';
 }
 
-br {
-	line-height: 1em;
-}
-
 /*=== Notification and actualize notification */
 .notification {
 	padding: 10px 10px 10px 50px;
@@ -1429,11 +1422,8 @@ br {
 #popup-close {
 	float: left;
 	width: 27px;
-	height: 27px;
-	padding-bottom: 5px;
-	color: var(--frss-font-color-grey-light);
-	font-size: 28px;
-	font-weight: bold;
+	height: 22px;
+	padding-top: 5px;
 }
 
 #popup-close:hover,
@@ -1505,11 +1495,11 @@ br {
 	display: block;
 	width: 100%;
 	text-align: center;
-	font-size: 1.4em;
+	font-size: 1.25rem;
 }
 
 .bigTick {
-	font-size: 4em;
+	font-size: 4rem;
 }
 
 /*=== Statistiques */
@@ -1690,14 +1680,14 @@ br {
 	height: 100%;
 	color: var(--frss-font-color-light);
 	font-family: "Varela Round", sans-serif;
-	font-size: 1000%;
+	font-size: 9rem;
 	position: absolute;
 	opacity: 0;
 	z-index: 9;
 	cursor: pointer;
 	transition: opacity .2s;
 	text-align: center;
-	line-height: 225%;
+	line-height: 2;
 	background-color: var(--frss-background-color-transparent);
 	text-shadow: 0px 0px 15px rgb(119, 119, 119);
 }
@@ -1778,7 +1768,7 @@ input:checked + .slide-container .properties {
 	top: 0;
 	left: 10px;
 	text-align: center;
-	font-size: 0.9em;
+	font-size: 0.9rem;
 	border-radius: 12px;
 	line-height: 1;
 	font-weight: initial;
@@ -1854,7 +1844,7 @@ input:checked + .slide-container .properties {
 }
 
 .enclosure [download] {
-	font-size: xx-large;
+	font-size: 3rem;
 	margin-right: .8em;
 }
 
@@ -2089,6 +2079,7 @@ input:checked + .slide-container .properties {
 		position: relative;
 		width: auto;
 		white-space: nowrap;
+		top: 0;
 	}
 
 	.notification {