Mercurial > addons > firefox-addons > feed-preview
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); -}