skin/firstRun.css - Issue 29565721: No Issue - Implemented first run page

Delta Between Two Patch Sets: skin/firstRun.css

Issue 29565721: No Issue - Implemented first run page Base URL: https://hg.adblockplus.org/adblockplusui/

Left Patch Set: Included Header / Footer, addressed previous feedback Created Oct. 17, 2017, 2:06 p.m.

Right Patch Set: Addressed latest round of feedback Created Jan. 30, 2018, 2:06 p.m.

Left:
Right:

Use n/p to move between diff chunks; N/P to move between comments.

Jump to:

Left: Side by side diff | Download
Right: Side by side diff | Download

LEFT	RIGHT
1 /*	1 /*
	Thomas Greiner 2018/02/16 16:19:15 It is difficult to distinguish styles that are com It is difficult to distinguish styles that are coming from websites-defaults from styles you introduced for the purpose of the first-run page. However, both are mixed together in "firstRun.css", implying that all of those were made specifically for the first-run page. Therefore, I strongly suggest to split those styles up and only include styles specifically created for the first-run page in here. Thereby you can keep any non-relevant styles (e.g. ones targeting IE9) but in a separate file so that we know that we've simply imported them from Websites and don't need to change them.
2 * This file is part of Adblock Plus <https://adblockplus.org/>,	2 * This file is part of Adblock Plus <https://adblockplus.org/>,

3 * Copyright (C) 2006-present eyeo GmbH	3 * Copyright (C) 2006-present eyeo GmbH

4 *	4 *

5 * Adblock Plus is free software: you can redistribute it and/or modify	5 * Adblock Plus is free software: you can redistribute it and/or modify

6 * it under the terms of the GNU General Public License version 3 as	6 * it under the terms of the GNU General Public License version 3 as

7 * published by the Free Software Foundation.	7 * published by the Free Software Foundation.

8 *	8 *

9 * Adblock Plus is distributed in the hope that it will be useful,	9 * Adblock Plus is distributed in the hope that it will be useful,

10 * but WITHOUT ANY WARRANTY; without even the implied warranty of	10 * but WITHOUT ANY WARRANTY; without even the implied warranty of

11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the	11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

12 * GNU General Public License for more details.	12 * GNU General Public License for more details.

13 *	13 *

14 * You should have received a copy of the GNU General Public License	14 * You should have received a copy of the GNU General Public License

15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.	15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.

16 */	16 */
	Thomas Greiner 2018/02/16 16:19:15 Detail: What happened to the whitespaces here? Detail: What happened to the whitespaces here?
17

18 @font-face

19 {

20 font-family: "Source Sans Pro";

21 font-style: normal;

22 font-weight: 300;

23 font-stretch: normal;

24 src: local ("Ø"),

25 url(fonts/SourceSansPro-Light.woff) format("otf");

26 }

27	17

28 @font-face	18 @font-face

29 {	19 {

30 font-family: "Source Sans Pro";	20 font-family: "Source Sans Pro";

31 font-style: normal;	21 font-style: normal;

32 font-weight: 400;	22 font-weight: 400;

33 font-stretch: normal;	23 font-stretch: normal;

34 src: local ("Ø"),	24 src: local ("Ø"),

35 url(fonts/SourceSansPro-Regular.woff) format("woff");	25 url(fonts/SourceSansPro-Regular.woff) format("woff");

36 }	26 }

37	27

38 @font-face	28 @font-face

39 {	29 {

40 font-family: "Source Sans Pro";	30 font-family: "Source Sans Pro";

41 font-style: normal;	31 font-style: bold;

42 font-weight: 700;	32 font-weight: 700;

43 font-stretch: normal;	33 font-stretch: normal;

44 src: local ("Ø"),	34 src: local ("Ø"),

45 url(fonts/SourceSansPro-bold.woff) format("woff");	35 url(fonts/SourceSansPro-bold.woff) format("woff");

46 }	36 }

47	37

48

49 html	38 html

50 {	39 {

51 font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;	40 font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;

52 font-size: 16px;
juliandoucette 2017/10/18 10:42:35 This is unnecessary (because the default is 16px) This is unnecessary (because the default is 16px) and not-accessible (because it overrides the browser font-size).
53 }	41 }

54	42

55 body	43 body

56 {	44 {

57 background-color: #fff;
juliandoucette 2017/10/18 10:42:36 This is unnecessary (because the default is white) This is unnecessary (because the default is white).
58 margin: 0;	45 margin: 0;

59 padding: 0;	46 padding: 0;

60 }	47 }

61	48

62 .container	49 .ta-centre

63 {

64 width: 80%;

65 max-width: 100%;

66 margin: 0 auto 8em;

67 padding: 0px 1em;

68 }

69

70 .column-centered-content
juliandoucette 2017/10/18 10:42:35 SuperNIT: We usually call this `ta-centre` SuperNIT: We usually call this `ta-centre`
71 {	50 {

72 text-align: center;	51 text-align: center;

73 }	52 }

74	53

	54 #content {

	55 margin-bottom: 3em;

	56 }

	57

75 @media (max-width: 992px)	58 @media (max-width: 992px)

76 {	59 {

77 .one-third	60 #content .one-third
juliandoucette 2017/10/18 10:42:37 NIT: This selector is too general (you mean all on NIT: This selector is too general (you mean all one-third columns in the body, not all one-third columns). martin 2017/10/20 10:03:28 How about I give the parent div a class of "conten Show quoted text On 2017/10/18 10:42:37, juliandoucette wrote: > NIT: This selector is too general (you mean all one-third columns in the body, > not all one-third columns). How about I give the parent div a class of "content-columns-container" and then do `.content-columns-container > .one-third`? juliandoucette 2017/10/20 13:50:22 By "body" I didn't mean <body> or `body .one-third Show quoted text On 2017/10/20 10:03:28, martin wrote: > On 2017/10/18 10:42:37, juliandoucette wrote: > > NIT: This selector is too general (you mean all one-third columns in the body, > > not all one-third columns). > > How about I give the parent div a class of "content-columns-container" and then > do `.content-columns-container > .one-third`? By "body" I didn't mean <body> or `body .one-third`. I meant `#content .one-third` or similar. You have the right idea. But classes are meant to be reused. Use an ID unless this rule applies to more than one page that you know about.
78 {	61 {

79 padding: 3em 0;	62 padding: 3em 2em;

80 border-bottom: 1px solid #d3d3d3;	63 border-bottom: 1px solid #d3d3d3;

81 }	64 }

	65 #content .one-third:last-child {

	66 border-bottom: none;

	67 }

82 }	68 }

83	69

84 /******************************************************************************	70 /******************************************************************************

85 * .content	71 * .content
juliandoucette 2017/10/18 10:42:35 SuperNIT: You removed the space before the "" (th SuperNIT: You removed the space before the "" (the same applies elsewhere) (SuperNIT = Less than NIT)
86 *****************************************************************************/	72 *****************************************************************************/
	Thomas Greiner 2018/02/16 16:19:17 Detail: Missing whitespace at beginning of line ca Detail: Missing whitespace at beginning of line causing the line to be offset a bit. Also applies to other occurrences in this file.
87	73

88 .content h1,	74 .content h1,

89 .content h2,	75 .content h2,

90 .content h3,	76 .content h3,

91 .content h4,	77 .content h4,

92 .content h5	78 .content h5

93 {	79 {

94 font-weight: bold;	80 font-weight: bold;
	Thomas Greiner 2018/02/16 16:19:19 We consistently use number values for the font wei We consistently use number values for the font weight across all our files to avoid confusion so please use `700` here.
95 margin: 32px 0px;	81 margin: 32px 0px;
	Thomas Greiner 2018/02/16 16:19:19 Coding style: "Omit unit specification after “0” v Coding style: "Omit unit specification after “0” values, unless required." Also applies to other occurrences in this file. See https://google.github.io/styleguide/htmlcssguide.html#0_and_Units
96 margin: 2rem 0rem;	82 margin: 2rem 0rem;

97 }	83 }

98	84

99 .content h1 { font-size: 2.4em; }	85 .content h1 { font-size: 1.8em; }
juliandoucette 2017/10/18 10:42:37 Note: I have added smaller heading sizes for mobil Note: I have added smaller heading sizes for mobile recently martin 2017/10/20 10:03:27 I pulled the latest changes for `website-defaults` Show quoted text On 2017/10/18 10:42:37, juliandoucette wrote: > Note: I have added smaller heading sizes for mobile recently I pulled the latest changes for `website-defaults`, rebuilt by running `gulp`, looked through `main.css` but couldn't find any media queries associated with heading sizes. Where should I find these? juliandoucette 2017/10/20 13:50:21 Ack. I didn't push this (https://codereview.adbloc Show quoted text On 2017/10/20 10:03:27, martin wrote: > On 2017/10/18 10:42:37, juliandoucette wrote: > > Note: I have added smaller heading sizes for mobile recently > > I pulled the latest changes for `website-defaults`, rebuilt by running `gulp`, > looked through `main.css` but couldn't find any media queries associated with > heading sizes. Where should I find these? Ack. I didn't push this (https://codereview.adblockplus.org/29581842/) yes. Sorry. juliandoucette 2017/10/20 14:13:51 Not to mention that this isn't part of website-def Show quoted text On 2017/10/20 13:50:21, juliandoucette wrote: > On 2017/10/20 10:03:27, martin wrote: > > On 2017/10/18 10:42:37, juliandoucette wrote: > > > Note: I have added smaller heading sizes for mobile recently > > > > I pulled the latest changes for `website-defaults`, rebuilt by running `gulp`, > > looked through `main.css` but couldn't find any media queries associated with > > heading sizes. Where should I find these? > > Ack. I didn't push this (https://codereview.adblockplus.org/29581842/) yes. > Sorry. Not to mention that this isn't part of website-defaults. I added smaller mobile sizes to new abp.org main.css. You can copy & paste them from here. .content h1 { font-size: 1.8em; } .content h2 { font-size: 1.4em; } .content h3 { font-size: 1.3em; } .content h4 { font-size: 1.2em; } .content h5 { font-size: 1.1em; } @media(min-width: 768px) { .content h1 { font-size: 2.4em; } .content h2 { font-size: 1.6em; } } PS: We can probably bundle main.css from abp.org into abpui in the future instead of maintaining his CSS in firstRun.css.
100 .content h2 { font-size: 1.6em; }	86 .content h2 { font-size: 1.4em; }

101 .content h3 { font-size: 1.3em; }	87 .content h3 { font-size: 1.3em; }

102 .content h4 { font-size: 1.2em; }	88 .content h4 { font-size: 1.2em; }

103 .content h5 { font-size: 1.1em; }	89 .content h5 { font-size: 1.1em; }

104	90

	91 @media(min-width: 768px)

	92 {

	93 .content h1 { font-size: 2.4em; }

	94 .content h2 { font-size: 1.6em; }

	95 }

	96

	97 .content a,

	98 .content a:visited

	99 {

	100 color: #C70D2C;

	101 }

	102

105 /*******************************************************************************	103 /*******************************************************************************

106 * #navbar	104 * #navbar

107 ******************************************************************************/	105 ******************************************************************************/

108	106

109 #navbar	107 #navbar

110 {	108 {

111 height: 4em;	109 min-height: 4em;

112 background-color: #c70d2c;	110 background-color: #c70d2c;

113 }	111 }

114	112

	113 @media(max-width: 991px)

	114 {

	115 #navbar

	116 {

	117 overflow: auto;

	118 }

	119 }

	120

115 #navbar li	121 #navbar li

116 {	122 {

117 list-style-type: none;	123 list-style-type: none;

118 }	124 }

119	125

120 /* padding provided by navbar contents */	126 #navbar .container

121 .navbar-container	127 {

122 {	128 padding-left: 0;

123 width: 80%;	129 padding-right: 0;

124 margin: 0 auto;

125 }

126

127 /* full-width under .container max-width */

128 @media(max-width: 1199px)

129 {

130 .navbar-container

131 {

132 width: 100%;

133 }

134 }	130 }

135	131

136 /* #navbar #navbar-logo	132 /* #navbar #navbar-logo

137 ******************************************************************************/	133 ******************************************************************************/

138	134

139 #navbar-logo	135 #navbar-logo

140 {	136 {

141 /* padding is visible in hover background-color change */	137 /* padding is visible in hover background-color change */

142 padding: 0em 1em;	138 padding: 0em 1em;

143 color: #fff;	139 color: #fff;

144 }	140 }

145	141

146 #navbar-logo:hover,	142 #navbar-logo:hover,

147 #navbar-logo:active,	143 #navbar-logo:active,

(...skipping 28 matching lines...) Expand all Loading...
176 }	172 }

177	173

178 #navbar-logo > span	174 #navbar-logo > span

179 {	175 {

180 /* full-height: 2.91 * 1.375 = ~4em */	176 /* full-height: 2.91 * 1.375 = ~4em */

181 line-height: 2.91em;	177 line-height: 2.91em;

182 font-size: 1.375em;	178 font-size: 1.375em;

183 }	179 }

184	180

185 /* #navbar #navbar-menu-toggle	181 /* #navbar #navbar-menu-toggle

186 ******************************************************************************/	182 ******************************************************************************/

187	183

188 #navbar-menu-toggle	184 #navbar-menu-toggle

189 {	185 {

190 float: right;	186 float: right;

191 padding: 1em;	187 padding: 1em;

192 }	188 }

193	189

194 [dir="rtl"] #navbar-menu-toggle	190 [dir="rtl"] #navbar-menu-toggle

195 {	191 {

196 float: left;	192 float: left;

(...skipping 22 matching lines...) Expand all Loading...
219 }	215 }

220	216

221 #navbar-menu-toggle:hover,	217 #navbar-menu-toggle:hover,

222 #navbar-menu-toggle:active,	218 #navbar-menu-toggle:active,

223 #navbar-menu-toggle:focus	219 #navbar-menu-toggle:focus

224 {	220 {

225 background-color: #AE0013;	221 background-color: #AE0013;

226 }	222 }

227	223

228 /* #navbar #navbar-menu	224 /* #navbar #navbar-menu

229 ******************************************************************************/	225 ******************************************************************************/

230	226

231 #navbar-menu a	227 #navbar-menu a

232 {	228 {

233 display: block;	229 display: block;

234 color: #fff;	230 color: #fff;

235 text-decoration: none;	231 text-decoration: none;

236 }	232 }

237	233

238 /* #navbar #navbar-menu #navbar-locale-menu	234 /* #navbar #navbar-menu #navbar-locale-menu

239 ******************************************************************************/	235 ******************************************************************************/

240	236

241 /* caret */	237 /* caret */

242 #navbar-locale-selected:after	238 #navbar-locale-selected:after

243 {	239 {

244 display: inline-block;	240 display: inline-block;

245 width: 0;	241 width: 0;

246 height: 0;	242 height: 0;

247 margin: 0em 0em 0em 0.255em;	243 margin: 0em 0em 0em 0.255em;

248 vertical-align: .255em;	244 vertical-align: .255em;
	Thomas Greiner 2018/02/16 16:19:16 Coding style: "Don't omit the optional leading 0 f Coding style: "Don't omit the optional leading 0 for decimal numbers." Also applies to other occurrences in this file.
249 content: "";	245 content: "";

250 border-top: .3em solid;	246 border-top: .3em solid;

251 border-right: .3em solid transparent;	247 border-right: .3em solid transparent;

252 border-left: .3em solid transparent;	248 border-left: .3em solid transparent;

253 }	249 }

254	250

255 [dir="rtl"] #navbar-locale-selected:after	251 [dir="rtl"] #navbar-locale-selected:after

256 {	252 {

257 margin: 0em 0.255em 0em 0em;	253 margin: 0em 0.255em 0em 0em;

258 }	254 }

(...skipping 14 matching lines...) Expand all Loading...
273 }	269 }

274	270

275 #navbar-locale-menu > li > a:hover,	271 #navbar-locale-menu > li > a:hover,

276 #navbar-locale-menu > li > a:active,	272 #navbar-locale-menu > li > a:active,

277 #navbar-locale-menu > li > a:focus	273 #navbar-locale-menu > li > a:focus

278 {	274 {

279 background-color: #434343;	275 background-color: #434343;

280 }	276 }

281	277

282 /* #navbar #navbar-menu (desktop)	278 /* #navbar #navbar-menu (desktop)

283 ******************************************************************************/	279 ******************************************************************************/

284	280

285 @media(min-width: 992px)	281 @media(min-width: 992px)

286 {	282 {

287 #navbar-menu	283 #navbar-menu

288 {	284 {

289 float: right;	285 float: right;

290 }	286 }

291	287

292 [dir="rtl"] #navbar-menu	288 [dir="rtl"] #navbar-menu

293 {	289 {

294 float: left;	290 float: left;

295 }	291 }

296	292

297 #navbar-menu > li,	293 #navbar-menu > li,

298 #navbar-menu > li > a	294 #navbar-menu > li > a

299 {	295 {

300 display: inline-block;	296 display: inline-block;

301 }	297 }

302	298

303 #navbar-menu > li > a	299 #navbar-menu > li > a

304 {	300 {

305 padding: 0em 1em;	301 padding: 0em 1em;

306 line-height: 4em;	302 line-height: 4em;

307 }	303 }

308	304

309 #navbar-menu > li > a:hover,	305 #navbar-menu > li > a:hover,

310 #navbar-menu > li > a:active,	306 #navbar-menu > li > a:active,

311 #navbar-menu > li > a:focus	307 #navbar-menu > li > a:focus

312 {	308 {

313 background-color: #AE0013;	309 background-color: #AE0013;

314 }	310 }

315	311

316 /* #navbar #navbar-menu #navbar-locale-menu	312 /* #navbar #navbar-menu #navbar-locale-menu
	Thomas Greiner 2018/02/16 16:19:20 You don't include this section of the navbar so le You don't include this section of the navbar so let's not include its styles either.
317 ****************************************************************************/	313 ****************************************************************************/

318	314

319 #navbar-locale-menubar	315 #navbar-locale-menubar

320 {	316 {

321 position: relative;	317 position: relative;

322 }	318 }

323	319

324 #navbar-locale-menu	320 #navbar-locale-menu

325 {	321 {

326 position: absolute;	322 position: absolute;

327 min-width: 16em;	323 min-width: 16em;

328 max-height: 20em;	324 max-height: 20em;

329 max-height: 50vh;	325 max-height: 50vh;

330 top: 100%;	326 top: 100%;

331 right: 0px;	327 right: 0px;

332 overflow: auto;	328 overflow: auto;

333 z-index: 9001;	329 z-index: 9001;

334 background-color: #292929;	330 background-color: #292929;

335 }	331 }

336	332

337 [dir="rtl"] #navbar-locale-menu	333 [dir="rtl"] #navbar-locale-menu

338 {	334 {

339 right: auto;	335 right: auto;

340 left: 0px;	336 left: 0px;

341 }	337 }

342 }	338 }

343	339

344 /* #navbar #navbar-menu (mobile)	340 /* #navbar #navbar-menu (mobile)

345 ******************************************************************************/	341 ******************************************************************************/

346	342

347 @media(max-width: 991px)	343 @media(max-width: 991px)

348 {	344 {

349 #navbar-menu	345 #navbar-menu

350 {	346 {

351 display: none;	347 display: none;

352 float: left;	348 float: left;
	Thomas Greiner 2018/02/16 16:19:18 I don't see a rule for reversing this for right-to I don't see a rule for reversing this for right-to-left locales.
353 clear: both;	349 clear: both;

354 width: 100%;	350 width: 100%;

355 background-color: #292929;	351 background-color: #292929;

356 }	352 }

357	353

358 #navbar-menu.visible	354 #navbar-menu.visible

359 {	355 {

360 display: block;	356 display: block;

361 }	357 }

362	358

363 #navbar-menu li a	359 #navbar-menu li a

364 {	360 {

365 padding: 0.75em 1em;	361 padding: 0.75em 1em;

366 }	362 }

367	363

368 #navbar-menu li a:hover,	364 #navbar-menu li a:hover,

369 #navbar-menu li a:active,	365 #navbar-menu li a:active,

370 #navbar-menu li a:focus	366 #navbar-menu li a:focus

371 {	367 {

372 background-color: #434343;	368 background-color: #434343;

373 }	369 }

374 }	370 }

375	371
juliandoucette 2017/10/18 10:42:36 There should be some sort of separation here so th There should be some sort of separation here so that we don't confuse these with #navbar styles.
376 .installation-status-header	372 /******************************************************************************
juliandoucette 2017/10/18 10:42:36 See comment in firstRun.html See comment in firstRun.html
	373 * Main Page Content

	374 *****************************************************************************/

	375

	376 #installation-status-header

377 {	377 {

378 text-align: center;	378 text-align: center;

379 background: #f9f9f9;	379 background: #f9f9f9;
	Thomas Greiner 2018/02/16 16:19:20 Detail: Do you actually want to override other bac Detail: Do you actually want to override other background-* properties or do you merely want to change the color? Because for the latter, using "background-color" would make this more maintainable. Also applies to other occurrences in this file.
380 padding: 4em 0;	380 padding: 4em 0;

381 margin-bottom: 4em;	381 margin-bottom: 4em;

	382 }

	383

	384 #installation-status-header > h1 {

	385 text-transform: uppercase;

382 }	386 }

383	387

384 .section-header > h2	388 .section-header > h2

385 {	389 {

386 margin: 1em 0 0;	390 margin: 1em 0 0;

387 }	391 }

388	392

389 .button-primary	393 .button-primary

390 {	394 {

391 display: inline-block;	395 display: inline-block;

392 text-decoration: none;	396 text-decoration: none;

393 text-transform: uppercase;	397 text-transform: uppercase;

394 color: #fff !important;	398 color: #fff !important;
	Thomas Greiner 2018/02/16 16:19:17 What's the reason for using `!important` here? What's the reason for using `!important` here?
395 text-align: center;	399 text-align: center;

396 width: 100%;	400 width: 100%;

397 border-radius: 6px;	401 border-radius: 6px;

398 padding: 1em 0;	402 padding: 1em 0;

399 background: #C70D2C;	403 background: #C70D2C;

400 }	404 }

401	405

402 .store-buttons	406 .store-buttons

403 {	407 {

404 width: 100%;	408 width: 100%;

(...skipping 12 matching lines...) Expand all Loading...
417 }	421 }

418	422

419 .store-button > img	423 .store-button > img

420 {	424 {

421 height: 54px;	425 height: 54px;

422 }	426 }

423	427

424 .applestore-button	428 .applestore-button

425 {	429 {

426 margin-right: 1em;	430 margin-right: 1em;

427 }	431 }
juliandoucette 2017/10/18 10:42:36 Missing right-to-left style [dir="rtl"] .appstore Missing right-to-left style [dir="rtl"] .appstore-button { margin-right: 0; margin-left: 1em; }
428	432

	433 [dir="rtl"] .appstore-button

	434 {

	435 margin-right: 0;

	436 margin-left: 1em;

	437 }

	438

429 @media (max-width: 1280px)	439 @media (max-width: 1280px)

430 {	440 {

431 .store-buttons	441 .store-buttons

432 {	442 {

433 flex-direction: column;	443 flex-direction: column;

434 }	444 }

435	445

436 .store-button	446 .store-button

437 {	447 {

438 width: 100%;	448 width: 100%;

439 }	449 }

440 .applestore-button	450 .applestore-button
	Thomas Greiner 2018/02/16 16:19:16 Coding style: "Separate rules by new lines." See Coding style: "Separate rules by new lines." See https://google.github.io/styleguide/htmlcssguide.html#Rule_Separation
441 {	451 {

442 margin: 0 0 1em;	452 margin: 0 0 1em;

443 }	453 }

444 }	454 }

445	455

446 h1	456 #installation-status-header > h1
juliandoucette 2017/10/18 10:42:37 NIT: I think that this selector is too general (I NIT: I think that this selector is too general (I think that you mean all h1 inside of .installation-status-header)
447 {	457 {

448 font-size: 3em;	458 font-size: 3em;

449 margin: 0;	459 margin: 0;

450 }	460 }

451	461

452 p
juliandoucette 2017/10/18 10:42:36 I think that all of these styles are already cover I think that all of these styles are already covered correctly by defaults.css.
453 {

454 margin: 0 0 1em;

455 font-weight: 400;

456 line-height: 150%;

457 }

458

459 .column-description > a
juliandoucette 2017/10/18 10:42:37 I think that this selector is too specific. I thin I think that this selector is too specific. I think that you want all links in the main content to be red. e.g. .content a, .content a:visited { color: #c70d2c; } I think that font-weight and text-decoration are already covered by defaults.css martin 2017/10/20 10:03:27 I went for this specific of a selector because whe I went for this specific of a selector because when I did `.content > a` all links remained blue... On 2017/10/18 10:42:37, juliandoucette wrote: Show quoted text > I think that this selector is too specific. I think that you want all links in > the main content to be red. e.g. > > .content a, > .content a:visited > { > color: #c70d2c; > } > > I think that font-weight and text-decoration are already covered by defaults.css juliandoucette 2017/10/20 13:50:21 That's because [the child combinator only matches Show quoted text On 2017/10/20 10:03:27, martin wrote: > I went for this specific of a selector because when I did `.content > a` all > links remained blue... That's because [the child combinator only matches one level deep, two selectors are more specific than one]. If you use `.content a, .content a:visited` and place this CSS file after defaults.css then it will take prescience. @see https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors PS: In the future we may integrate SCSS into adblockplusui (hopefully) and use the link color variable when generating defaults.css instead. Sorry about this :/
460 {

461 color: #C70D2C;

462 text-decoration: none;

463 font-weight: 400;

464 }

465

466 p > a:hover
juliandoucette 2017/10/18 10:42:35 I think that this is already covered by defaults.c I think that this is already covered by defaults.css
467 {

468 text-decoration: underline;

469 }

470	462

471 /*******************************************************************************	463 /*******************************************************************************

472 * #footer	464 * #footer

473 ******************************************************************************/	465 ******************************************************************************/

474	466

475 #footer	467 #footer

476 {	468 {

477 overflow: auto;	469 overflow: auto;

478 margin-top: 2em;	470 margin-top: 2em;

479 padding: 2em 0em;	471 padding: 2em 0em;

480 color: #ececec;	472 color: #ececec;

481 background-color: #292929;	473 background-color: #292929;

482 font-size: 0.9em;	474 font-size: 0.9em;

483 }	475 }

484	476

485 /* #footer body	477 /* #footer body

486 ******************************************************************************/	478 ******************************************************************************/

487	479

488 #footer h5	480 #footer h5

489 {	481 {

490 margin-top: 1em;	482 margin-top: 1em;

491 margin-bottom: 1.5em;	483 margin-bottom: 1.5em;

492 }	484 }

493	485

494 #footer h5:after	486 #footer h5:after
	Thomas Greiner 2018/02/16 16:19:16 Detail: The standard way to write this is `#footer Detail: The standard way to write this is `#footer h5::after`. Unlike Websites, we don't need to support older browsers who don't understand the standard syntax yet. See also https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
495 {	487 {

496 content: "";	488 content: "";

497 display: block;	489 display: block;

498 width: 1.25em;	490 width: 1.25em;

499 height: 0.125em;	491 height: 0.125em;

500 margin-top: 0.5em;	492 margin-top: 0.5em;

501 background-color: #ececec;	493 background-color: #ececec;

502 }	494 }

503	495

504 #footer ul	496 #footer ul

505 {	497 {

506 padding: 0em;	498 padding: 0em;

507 list-style-type: none;	499 list-style-type: none;

508 }	500 }

509	501

510 #footer a	502 #footer a

511 {	503 {

512 color: #ececec;	504 color: #ececec;

513 }	505 }

514	506

515 #footer a:hover,	507 #footer a:hover,

516 #footer a:active,	508 #footer a:active,

517 #footer a:focus	509 #footer a:focus

518 {	510 {

519 color: #fff;	511 color: #fff;

520 text-decoration: underline;	512 text-decoration: underline;

521 }	513 }

522	514

523 /* #footer #social-list	515 /* #footer #social-list

524 ******************************************************************************/	516 ******************************************************************************/

525	517

526 #social-list ul	518 #social-list ul

527 {	519 {

528 /* negative margin canceled out by li margin below */	520 /* negative margin canceled out by li margin below */

529 margin: 0em -0.375em;	521 margin: 0em -0.375em;

530 }	522 }

531	523

532 #social-list li	524 #social-list li

533 {	525 {

534 float: left;	526 float: left;

(...skipping 12 matching lines...) Expand all Loading...
547	539

548 @media(min-width: 1200px)	540 @media(min-width: 1200px)

549 {	541 {

550 #social-list img	542 #social-list img

551 {	543 {

552 height: 3em;	544 height: 3em;

553 }	545 }

554 }	546 }

555	547

556 /* #footer #footer-legal	548 /* #footer #footer-legal

557 ******************************************************************************/	549 ******************************************************************************/

558	550

559 #footer-legal	551 #footer-legal

560 {	552 {

561 margin-top: 1em;	553 margin-top: 1em;

562 }	554 }

563	555

564 @media(min-width: 1200px)	556 @media(min-width: 1200px)

565 {	557 {

566 #footer-legal	558 #footer-legal

567 {	559 {

568 margin-top: 2em;	560 margin-top: 2em;

569 }	561 }

570 }	562 }

571	563

572 /* #footer #footer-legal #legal-list	564 /* #footer #footer-legal #legal-list

573 ******************************************************************************/	565 ******************************************************************************/

574	566

575 #legal-list li	567 #legal-list li

576 {	568 {

577 float: left;	569 float: left;

578 }	570 }

579	571

580 [dir="rtl"] #legal-list li	572 [dir="rtl"] #legal-list li

581 {	573 {

582 float: right;	574 float: right;

583 }	575 }

584	576

585 #legal-list li:after	577 #legal-list li:after

586 {	578 {

587 margin: 0em 0.375em;	579 margin: 0em 0.375em;

588 }	580 }

589	581

590 /* IE9+ only */	582 /* IE9+ only */
	Thomas Greiner 2018/02/16 16:19:19 This is not relevant for us since we don't support This is not relevant for us since we don't support IE9 so let's remove it.
591 #legal-list li::after	583 #legal-list li::after

592 {	584 {

593 content: "\|"	585 content: "\|"

594 }	586 }

595	587

596 #legal-list li:last-of-type::after	588 #legal-list li:last-of-type::after

597 {	589 {

598 content: none;	590 content: none;

599 }	591 }

600	592

601 /* float copyright and legal links left and right on ~desktop */	593 /* float copyright and legal links left and right on ~desktop */

602 @media(min-width: 1200px)	594 @media(min-width: 1200px)

603 {	595 {

604 #copyright-notice	596 #copyright-notice

605 {	597 {

606 float: left;	598 float: left;

607 }	599 }

608	600

609 [dir="rtl"] #copyright-notice	601 [dir="rtl"] #copyright-notice

610 {	602 {

611 float: right;	603 float: right;

612 }	604 }

613	605

614 #legal-list	606 #legal-list

615 {	607 {

616 float: right;	608 float: right;

617 }	609 }

618	610

619 [dir="rtl"] #legal-list	611 [dir="rtl"] #legal-list

620 {	612 {

621 float: left;	613 float: left;

622 }	614 }

623 }	615 }

624	616

625 /* hide all footer links except #social-list on ~mobile */	617 /* hide all footer links except #social-list on ~mobile */

626 @media(max-width: 767px)	618 @media(max-width: 767px)

627 {	619 {

628 #footer .column	620 #footer .column

629 {	621 {

630 display: none;	622 display: none;

631 }	623 }

632	624

633 /* overriding display:none above */	625 /* overriding display:none above */

634 #footer #social-list	626 #footer #social-list

635 {	627 {

636 display: block;	628 display: block;

637 }	629 }

638 }	630 }

LEFT	RIGHT