Mercurial > addons > firefox-addons > feed-preview
view options/options.css @ 22:38b20de704a0
Use seperate grey icon for the page action
This does not stand out so much as the orange icon espeacially when using dark
themes and should be readable on any theme since there is no transparency.
Currently there is neither a way for addons to specify themed icons for page
actions nor is it possible to use the browser's foreground and background color
as native page action icons do.
author | Guido Berhoerster <guido+feed-preview@berhoerster.name> |
---|---|
date | Sun, 16 Dec 2018 10:22:19 +0100 |
parents | ff5e5e3eba32 |
children | 688d75e554e0 |
line wrap: on
line source
/* * 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("../web_resources/style/photon-colors.css"); :root { --blue-50-a30: rgba(10, 132, 255, 0.3); --red-50-a30: rgba(255, 0, 57, 0.3); --selection-item-background-color: var(--grey-90-a10); --selection-selected-background-color: var(--blue-50); --selection-selected-color: var(--white-100); --text-input-border-color: var(--grey-90-a30); --text-input-hover-border-color: var(--grey-90-a50); --text-input-focus-border-color: var(--blue-50); --text-input-invalid-border-color: var(--red-50); --secondary-color: var(--grey-50); --text-input-shadow: 0 0 0 4px var(--blue-50-a30); --invalid-shadow: 0 0 0 4px var(--red-50-a30); --selection-border: 1px solid var(--grey-90-a30); } body { padding: 0 4px; } h1 { margin: 0 0 16px 0; font-size: 1.29em; font-weight: bold; } input[type="text"] { border-radius: 2px; font-size: 15px; padding: 8px; min-height: 32px; } .browser-style > input[type=text] { border-color: var(--text-input-border-color); box-shadow: none; } .browser-style > input[type=text]:hover { border-color: var(--text-input-hover-border-color); box-shadow: none; } .browser-style > input[type=text]:focus, .browser-style > input[type=text]:focus:hover { border-color: var(--text-input-focus-border-color); box-shadow: var(--text-input-shadow); } .browser-style > input[type=text]:invalid, .browser-style > input[type=text]:invalid:hover, .browser-style > input[type=text]:invalid:focus:hover, .browser-style > input[type=text]:invalid:focus { border-color: var(--text-input-invalid-border-color); box-shadow: var(--invalid-shadow); } button.browser-style { border-radius: 2px; padding: 2px 16px; } #feed-reader-selection { margin: 4px 0; padding: 0; border: var(--selection-border); border-radius: 2px; width: 100%; height: 10em; overflow: auto; } #feed-reader-selection:focus-within { border: 1px dotted var(--selection-selected-background-color); } .feed-reader-item { list-style: none; } .feed-reader-item label { position: relative; } .feed-reader-item input[type=radio] { /* * take the actual radio button out of the page flow and make it invisible * without hiding it (using "display: none" or "visibility: hidden") so that * keyboard focus handling keeps working as expected */ position: absolute; -moz-appearance: none; appearance: none; width: 0; height: 0; opacity: 0; } .feed-reader-item input[type=radio]:checked + .feed-reader-content { background-color: var(--selection-selected-background-color); color: var(--selection-selected-color); } .feed-reader-content { padding: 4px 8px; white-space: nowrap; } .feed-reader-item:nth-child(even) .feed-reader-content { background-color: var(--selection-item-background-color); } .feed-reader-content .feed-reader-title, .feed-reader-content .feed-reader-url-template { display: inline-block; overflow: hidden; text-overflow: ellipsis; } .feed-reader-content .feed-reader-title { width: 30%; } .feed-reader-content .feed-reader-url-template { width: 70%; } .button-box { border: none; padding: 0; margin: 4px 0 0 0; text-align: right; } .button-box button + button { margin-left: 8px; } #add-feed-reader label { display: block; font-size: 13px; margin: 4px 0; } #add-feed-reader input[type="text"] { display: block; width: 100%; } .caption { font-size: 11px; margin: 4px 0; color: var(--secondary-color); }