Mercurial > addons > firefox-addons > feed-preview

comparison options/options.css @ 10:ff5e5e3eba32

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Implement feed subscription for web-based feed readers Add options page for configuring web-based feed readers which allow for subscribing to feeds via GET requests. Track tabs containing feed previews and inject a content script which retrieves the configured feed readers and keeps them in sync.
author Guido Berhoerster <guido+feed-preview@berhoerster.name>
date Fri, 07 Dec 2018 23:00:41 +0100
parents
children 688d75e554e0
comparison
equal deleted inserted replaced
9:fcd65cf3f634 10:ff5e5e3eba32
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");
10 @import url("../web_resources/style/photon-colors.css");
11
12 :root {
13 --blue-50-a30: rgba(10, 132, 255, 0.3);
14 --red-50-a30: rgba(255, 0, 57, 0.3);
15 --selection-item-background-color: var(--grey-90-a10);
16 --selection-selected-background-color: var(--blue-50);
17 --selection-selected-color: var(--white-100);
18 --text-input-border-color: var(--grey-90-a30);
19 --text-input-hover-border-color: var(--grey-90-a50);
20 --text-input-focus-border-color: var(--blue-50);
21 --text-input-invalid-border-color: var(--red-50);
22 --secondary-color: var(--grey-50);
23 --text-input-shadow: 0 0 0 4px var(--blue-50-a30);
24 --invalid-shadow: 0 0 0 4px var(--red-50-a30);
25 --selection-border: 1px solid var(--grey-90-a30);
26 }
27
28 body {
29 padding: 0 4px;
30 }
31
32 h1 {
33 margin: 0 0 16px 0;
34 font-size: 1.29em;
35 font-weight: bold;
36 }
37
38 input[type="text"] {
39 border-radius: 2px;
40 font-size: 15px;
41 padding: 8px;
42 min-height: 32px;
43 }
44
45 .browser-style > input[type=text] {
46 border-color: var(--text-input-border-color);
47 box-shadow: none;
48 }
49
50 .browser-style > input[type=text]:hover {
51 border-color: var(--text-input-hover-border-color);
52 box-shadow: none;
53 }
54
55 .browser-style > input[type=text]:focus,
56 .browser-style > input[type=text]:focus:hover {
57 border-color: var(--text-input-focus-border-color);
58 box-shadow: var(--text-input-shadow);
59 }
60
61 .browser-style > input[type=text]:invalid,
62 .browser-style > input[type=text]:invalid:hover,
63 .browser-style > input[type=text]:invalid:focus:hover,
64 .browser-style > input[type=text]:invalid:focus {
65 border-color: var(--text-input-invalid-border-color);
66 box-shadow: var(--invalid-shadow);
67 }
68
69 button.browser-style {
70 border-radius: 2px;
71 padding: 2px 16px;
72 }
73
74 #feed-reader-selection {
75 margin: 4px 0;
76 padding: 0;
77 border: var(--selection-border);
78 border-radius: 2px;
79 width: 100%;
80 height: 10em;
81 overflow: auto;
82 }
83
84 #feed-reader-selection:focus-within {
85 border: 1px dotted var(--selection-selected-background-color);
86 }
87
88 .feed-reader-item {
89 list-style: none;
90 }
91
92 .feed-reader-item label {
93 position: relative;
94 }
95
96 .feed-reader-item input[type=radio] {
97 /*
98 * take the actual radio button out of the page flow and make it invisible
99 * without hiding it (using "display: none" or "visibility: hidden") so that
100 * keyboard focus handling keeps working as expected
101 */
102 position: absolute;
103 -moz-appearance: none;
104 appearance: none;
105 width: 0;
106 height: 0;
107 opacity: 0;
108 }
109
110 .feed-reader-item input[type=radio]:checked + .feed-reader-content {
111 background-color: var(--selection-selected-background-color);
112 color: var(--selection-selected-color);
113 }
114
115 .feed-reader-content {
116 padding: 4px 8px;
117 white-space: nowrap;
118 }
119
120 .feed-reader-item:nth-child(even) .feed-reader-content {
121 background-color: var(--selection-item-background-color);
122 }
123
124 .feed-reader-content .feed-reader-title,
125 .feed-reader-content .feed-reader-url-template {
126 display: inline-block;
127 overflow: hidden;
128 text-overflow: ellipsis;
129 }
130
131 .feed-reader-content .feed-reader-title {
132 width: 30%;
133 }
134
135 .feed-reader-content .feed-reader-url-template {
136 width: 70%;
137 }
138
139 .button-box {
140 border: none;
141 padding: 0;
142 margin: 4px 0 0 0;
143 text-align: right;
144 }
145
146 .button-box button + button {
147 margin-left: 8px;
148 }
149
150 #add-feed-reader label {
151 display: block;
152 font-size: 13px;
153 margin: 4px 0;
154 }
155
156 #add-feed-reader input[type="text"] {
157 display: block;
158 width: 100%;
159 }
160
161 .caption {
162 font-size: 11px;
163 margin: 4px 0;
164 color: var(--secondary-color);
165 }