Mercurial > addons > firefox-addons > feed-preview

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

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
7:2bbb7617dd13 8:c271192aac9d
1 /*
2 * Copyright (C) 2018 Guido Berhoerster <guido+feed-preview@berhoerster.name>
3 *
4 * This Source Code Form is subject to the terms of the Mozilla Public
5 * License, v. 2.0. If a copy of the MPL was not distributed with this
6 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
7 */
8
9 @import url("chrome://browser/content/extension.css");
1 @import url("photon-colors.css"); 10 @import url("photon-colors.css");
11
12 :root {
13 --link-color: var(--blue-50);
14 --link-hover-color: var(--blue-60);
15 --link-active-color: var(--blue-70);
16 }
2 17
3 html, 18 html,
4 body { 19 body {
5 box-sizing: border-box;
6 margin: 0; 20 margin: 0;
7 font: -moz-desktop;
8 font-size: 15px;
9 line-height: 1.4em; 21 line-height: 1.4em;
10 color: var(--grey-90);
11 } 22 }
12 23
13 h1, h2, h3, h4, h5, h6 { 24 h1, h2, h3, h4, h5, h6 {
14 line-height: 1.15em; 25 line-height: 1.15em;
15 } 26 }
16 27
17 :link { 28 :any-link {
18 color: var(--blue-50); 29 color: var(--link-color);
19 text-decoration: none; 30 text-decoration: none;
20 } 31 }
21 32
22 :visited { 33 :any-link:hover {
23 color: var(--blue-50); 34 color: var(--link-hover-color);
24 text-decoration: none;
25 }
26
27 :link:hover,
28 :link:active,
29 :visited:hover,
30 :visited:active {
31 text-decoration: underline; 35 text-decoration: underline;
32 } 36 }
33 37
34 :link:hover { 38 :any-link:active {
35 color: var(--blue-60); 39 color: var(--link-active-color);
40 text-decoration: underline;
36 } 41 }
37
38 :link:active {
39 color: var(--blue-70);
40 }
41
42 :visited:hover {
43 color: var(--blue-60);
44 }
45
46 :visited:active {
47 color: var(--blue-70);
48 }