Use buttons instead of links for "mark as read"

See https://github.com/marienfressinaud/FreshRSS/issues/599

6 files changed, 31 insertions, 13 deletions

diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 2ef48c406..669f4ce42 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -16,9 +16,9 @@ html, body {
 }
 
 /*=== Links */
-a {
-	outline: none;
+a, button.as-link {
 	color: #6986B2;
+	outline: none;
 }
 
 /*=== Images */
@@ -338,7 +338,8 @@ a.btn {
 	padding: 0 25px;
 	line-height: 2.5em;
 }
-.dropdown-menu > .item > span {
+.dropdown-menu > .item > span,
+.dropdown-menu > .item > .as-link {
 	padding: 0 25px;
 	line-height: 2em;
 }
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index a75ed2713..a942df0e8 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -15,7 +15,7 @@ html, body {
 }
 
 /*=== Links */
-a {
+a, button.as-link {
 	color: #2980b9;
 	outline: none;
 }
@@ -338,17 +338,21 @@ a.btn {
 	padding: 0 25px;
 	line-height: 2.5em;
 }
-.dropdown-menu > .item > span {
+.dropdown-menu > .item > span,
+.dropdown-menu > .item > .as-link {
 	padding: 0 25px;
 	line-height: 2em;
 }
+.dropdown-menu > .item:hover {
+	background: #2980b9;
+	color: #fff;
+}
 .dropdown-menu > .item[aria-checked="true"] > a:before {
 	font-weight: bold;
 	margin: 0 0 0 -14px;
 }
 .dropdown-menu > .item:hover > a {
 	text-decoration: none;
-	background: #2980b9;
 	color: #fff;
 }
 .dropdown-menu .input select,
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 0d1d95bad..5ec6f1339 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -15,7 +15,7 @@ html, body {
 }
 
 /*=== Links */
-a {
+a, button.as-link {
 	color: #0062be;
 	outline: none;
 }
@@ -364,7 +364,8 @@ a.btn {
 	padding: 0 25px;
 	line-height: 2.5em;
 }
-.dropdown-menu > .item > span {
+.dropdown-menu > .item > span,
+.dropdown-menu > .item > .as-link {
 	padding: 0 25px;
 	line-height: 2em;
 }
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index 665f89c71..1d84753c7 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -16,7 +16,7 @@ html, body {
 }
 
 /*=== Links */
-a {
+a, button.as-link {
 	color: #D18114;
 	outline: none;
 }
@@ -390,11 +390,13 @@ a.btn {
 .dropdown-menu > .item > a {
 	padding: 0 25px;
 	line-height: 2.5em;
-	color:#ccc;
+	color: #ccc;
 }
-.dropdown-menu > .item > span {
+.dropdown-menu > .item > span,
+.dropdown-menu > .item > .as-link {
 	padding: 0 25px;
 	line-height: 2em;
+	color: #ccc;
 }
 .dropdown-menu > .item:hover {
 	background: #171717;
diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index 76ac37933..b49cd79ea 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -14,7 +14,7 @@ html, body {
 }
 
 /*=== Links */
-a {
+a, button.as-link {
 	outline: none;
 }
 
@@ -255,7 +255,8 @@ a.btn {
 	padding: 0 25px;
 	line-height: 2.5em;
 }
-.dropdown-menu > .item > span {
+.dropdown-menu > .item > span,
+.dropdown-menu > .item > .as-link {
 	padding: 0 25px;
 	line-height: 2em;
 }
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index 466ec4603..9d81b6180 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -88,6 +88,15 @@ input[type="checkbox"] {
 input.extend:focus {
 	width: 300px;
 }
+button.as-link,
+button.as-link:hover,
+button.as-link:active {
+	background: transparent;
+	border: none;
+	color: inherit;
+	cursor: pointer;
+	font-size: 1.1em;
+}
 
 /*=== COMPONENTS */
 /*===============*/