Mercurial > addons > firefox-addons > feed-preview
view options/options.css @ 57:3c97046c2348
Fix non-responsive buttons for managing feed readers
In recent Firefox releases the "explicitOriginalTarget" property returns the
associated form element instead of the originally clicked button so that the
buttons for managing feed readers on the option page no longer worked.
Determine the button used to submit the form using the "submitter" property of
the new SubmitEvent instead.
Add a polyfill for older Firefox releases not yet supporting this.
author | Guido Berhoerster <guido+feed-preview@berhoerster.name> |
---|---|
date | Wed, 06 May 2020 13:42:35 +0200 |
parents | 688d75e554e0 |
children |
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; } h1 ~ h1 { margin-top: 32px; } input[type="text"] { border-radius: 2px; font-size: 15px; padding: 8px; min-height: 32px; } input[type="checkbox"], input[type="checkbox"] + label { vertical-align: middle; } .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); }