Mercurial > addons > firefox-addons > feed-preview

comparison web_resources/style/feed-preview.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 fcd65cf3f634
children b9dc94ce2eeb
comparison
equal deleted inserted replaced
9:fcd65cf3f634 10:ff5e5e3eba32
7 */ 7 */
8 8
9 @import url("common.css"); 9 @import url("common.css");
10 10
11 :root { 11 :root {
12 --blue-50-a30: rgba(10, 132, 255, 0.3);
12 --default-background: var(--grey-10); 13 --default-background: var(--grey-10);
13 --entry-background: var(--white-100); 14 --entry-background: var(--white-100);
15 --primary-color: var(--grey-90);
14 --secondary-color: var(--grey-50); 16 --secondary-color: var(--grey-50);
17 --button-focus-shadow: 0 0 0 1px var(--blue-50) inset,
18 0 0 0 1px var(--blue-50), 0 0 0 4px var(--blue-50-a30);
19 --primary-button-color: var(--white-100);
20 --primary-button-background-color: var(--blue-60);
21 --primary-button-hover-background-color: var(--blue-70);
22 --primary-button-active-background-color: var(--blue-80);
23 --secondary-button-color: var(--primary-color);
24 --secondary-button-background-color: var(--grey-90-a10);
25 --secondary-button-hover-background-color: var(--grey-90-a20);
26 --secondary-button-active-background-color: var(--grey-90-a30);
15 --entry-content-border: 1px solid var(--grey-90-a10); 27 --entry-content-border: 1px solid var(--grey-90-a10);
16 --font-family-default: "Segoe UI", "San Fancisco", "Ubuntu", sans-serif; 28 --font-family-default: "Segoe UI", "San Fancisco", "Ubuntu", sans-serif;
17 --font-display-20: 300 36px var(--font-family-default); 29 --font-display-20: 300 36px var(--font-family-default);
18 --font-title-40: 300 28px var(--font-family-default); 30 --font-title-40: 300 28px var(--font-family-default);
19 --font-title-30: 300 22px var(--font-family-default); 31 --font-title-30: 300 22px var(--font-family-default);
55 background-image: url('../images/feed.svg'); 67 background-image: url('../images/feed.svg');
56 background-size: 33vh 33vh; 68 background-size: 33vh 33vh;
57 } 69 }
58 } 70 }
59 71
72 #feed-subscription {
73 width: 100%;
74 max-width: 80ch;
75 margin: 0 auto 32px auto;
76 padding: 0 16px;
77 white-space: nowrap;
78 }
79
80 #feed-subscription fieldset[name="main"] {
81 display: flex;
82 align-items: baseline;
83 margin: 0;
84 padding: 0;
85 border: none;
86 }
87
88 #feed-subscription fieldset[name="main"] > * + * {
89 margin-left: 8px;
90 }
91
92 #feed-reader-selection {
93 -moz-appearance: none;
94 appearance: none;
95 border: none;
96 border-radius: 2px;
97 padding: 0 28px 0 8px;
98 height: 32px;
99 min-width: 20ch;
100 color: var(--secondary-button-color);
101 background-color: var(--secondary-button-background-color);
102 background-image: url('../images/arrow.svg');
103 background-repeat: no-repeat;
104 background-position: center right 8px;
105 background-size: 12px;
106 flex-grow: 1;
107 flex-shrink: 1;
108 text-overflow: ellipsis;
109 }
110
111 #feed-reader-selection:not(:disabled):hover {
112 background-color: var(--secondary-button-hover-background-color);
113 }
114
115 #feed-reader-selection:not(:disabled):active {
116 background-color: var(--secondary-button-active-background-color);
117 }
118
119 #feed-reader-selection option:hover,
120 #feed-reader-selection option:active,
121 #feed-reader-selection option:focus {
122 background-color: red;
123 }
124
125 #subscribe {
126 color: var(--primary-button-color);
127 background-color: var(--primary-button-background-color);
128 border-radius: 2px;
129 padding: 0 8px;
130 height: 32px;
131 min-width: 132px;
132 text-align: center;
133 border: none;
134 }
135
136 #subscribe:not(:disabled):hover {
137 background-color: var(--primary-button-hover-background-color);
138 }
139
140 #feed-reader-selection:not(:disabled):focus,
141 #subscribe:not(:disabled):focus {
142 box-shadow: var(--button-focus-shadow);
143 }
144
145 #subscribe:not(:disabled):active {
146 background-color: var(--primary-button-active-background-color);
147 }
148
149 #feed-reader-selection:disabled,
150 #subscribe:disabled {
151 opacity: .4;
152 }
153
60 #feed-header { 154 #feed-header {
61 width: 100%; 155 width: 100%;
62 max-width: 80ch; 156 max-width: 80ch;
63 min-width: 40ch; 157 min-width: 40ch;
64 padding: 16px; 158 padding: 16px;
65 margin: 0 auto; 159 margin: 0 auto;
160 border-top: 1px solid var(--grey-90-a10);
66 } 161 }
67 162
68 #feed-logo { 163 #feed-logo {
69 float: right; 164 float: right;
70 max-width: 188px; 165 max-width: 188px;
134 details.entry > summary::before { 229 details.entry > summary::before {
135 content: url('../images/arrow.svg'); 230 content: url('../images/arrow.svg');
136 width: 16px; 231 width: 16px;
137 height: 16px; 232 height: 16px;
138 flex: 0 0 16px; 233 flex: 0 0 16px;
234 transform: rotate(-90deg);
139 transition: 100ms; 235 transition: 100ms;
140 } 236 }
141 237
142 details.entry[open] > summary { 238 details.entry[open] > summary {
143 margin: 0 0 8px 0; 239 margin: 0 0 8px 0;
144 } 240 }
145 241
146 details.entry[open] > summary::before { 242 details.entry[open] > summary::before {
147 transform: rotate(90deg); 243 transform: rotate(0deg);
148 transition: 100ms; 244 transition: 100ms;
149 } 245 }
150 246
151 .entry-header { 247 .entry-header {
152 margin: 0 0 0 8px; 248 margin: 0 0 0 8px;