diff web_resources/style/common.css @ 8:c271192aac9d

Improve visual appearance Make use of the built-in browser extension stylesheet. Use semantic CSS variables.
author Guido Berhoerster <guido+feed-preview@berhoerster.name>
date Tue, 27 Nov 2018 11:11:15 +0100
parents bc5cc170163c
children
line wrap: on
line diff
--- a/web_resources/style/common.css	Tue Nov 27 10:47:26 2018 +0100
+++ b/web_resources/style/common.css	Tue Nov 27 11:11:15 2018 +0100
@@ -1,48 +1,41 @@
+/*
+ * Copyright (C) 2018 Guido Berhoerster <guido+feed-preview@berhoerster.name>
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+@import url("chrome://browser/content/extension.css");
 @import url("photon-colors.css");
 
+:root {
+  --link-color: var(--blue-50);
+  --link-hover-color: var(--blue-60);
+  --link-active-color: var(--blue-70);
+}
+
 html,
 body {
-  box-sizing: border-box;
   margin: 0;
-  font: -moz-desktop;
-  font-size: 15px;
   line-height: 1.4em;
-  color: var(--grey-90);
 }
 
 h1, h2, h3, h4, h5, h6 {
   line-height: 1.15em;
 }
 
-:link {
-  color: var(--blue-50);
-  text-decoration: none;
-}
-
-:visited {
-  color: var(--blue-50);
+:any-link {
+  color: var(--link-color);
   text-decoration: none;
 }
 
-:link:hover,
-:link:active,
-:visited:hover,
-:visited:active {
+:any-link:hover {
+  color: var(--link-hover-color);
   text-decoration: underline;
 }
 
-:link:hover {
-  color: var(--blue-60);
-}
-
-:link:active {
-  color: var(--blue-70);
+:any-link:active {
+  color: var(--link-active-color);
+  text-decoration: underline;
 }
-
-:visited:hover {
-  color: var(--blue-60);
-}
-
-:visited:active {
-  color: var(--blue-70);
-}