skin/desktop-options.css - Issue 29654555: Issue 6209 - Updated woff fonts and table status column for long texts

Delta Between Two Patch Sets: skin/desktop-options.css

Issue 29654555: Issue 6209 - Updated woff fonts and table status column for long texts (Closed)

Left Patch Set: Added font ranges Created Jan. 29, 2018, 4:14 p.m.

Right Patch Set: Addressed Thomas comments Created Feb. 20, 2018, 3:26 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 /*

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 */

17	17

18 /* cyrillic-ext */
saroyanm 2018/01/29 16:16:17 I added fonts from the URLS bellow accordingly: * I added fonts from the URLS bellow accordingly: * https://fonts.googleapis.com/css?family=Source+Sans+Pro:300&subset=cyrillic,c... * https://fonts.googleapis.com/css?family=Source+Sans+Pro:400&subset=cyrillic,c... * https://fonts.googleapis.com/css?family=Source+Sans+Pro:700&subset=cyrillic,c... @Thomas if you agree with current implementation, I'll add same fonts into mobile-options.css and issue-reporter.css and remove unused fonts. As soon we will have SASS support we will be able to move the fonts into a separate file and avoid duplication. Thomas Greiner 2018/02/14 17:13:45 Can you verify that we actually need each of those Can you verify that we actually need each of those unicode ranges? If there's a language we don't support or generally, if there are characters we refer to here which we don't use, we don't need to include them here either. Thomas Greiner 2018/02/14 17:13:46 Anything we need to consider when using the fonts Show quoted text On 2018/01/29 16:16:17, saroyanm wrote: > I added fonts from the URLS bellow accordingly: Anything we need to consider when using the fonts from this source? Are they under a different license then the one we already include in the repo? On 2018/01/29 16:16:17, saroyanm wrote: Show quoted text > @Thomas if you agree with current implementation, I'll add same fonts into > mobile-options.css and issue-reporter.css and remove unused fonts. > > As soon we will have SASS support we will be able to move the fonts into a > separate file and avoid duplication. I don't think we want to duplicate them across all CSS files so why not just separate them into a "fonts.css" file already? saroyanm 2018/02/14 18:30:04 Not sure how I can verify ? We do support "cyrill Show quoted text On 2018/02/14 17:13:45, Thomas Greiner wrote: > Can you verify that we actually need each of those unicode ranges? > > If there's a language we don't support or generally, if there are characters we > refer to here which we don't use, we don't need to include them here either. Not sure how I can verify ? We do support "cyrillic" languages, "greek", "vietnamese", I'm not sure if some of them are using or might use characters in future that are part of extended version. saroyanm 2018/02/14 18:30:04 Only thing I could find is from -> https://develop Show quoted text On 2018/02/14 17:13:46, Thomas Greiner wrote: > On 2018/01/29 16:16:17, saroyanm wrote: > > I added fonts from the URLS bellow accordingly: > > Anything we need to consider when using the fonts from this source? Are they > under a different license then the one we already include in the repo? Only thing I could find is from -> https://developers.google.com/fonts/faq The open source fonts in the Google Fonts catalog are published under licenses that allow you to use them on any website, whether it’s commercial or personal. Search queries may surface results from external foundries, who may or may not use open source licenses. Source Sans Pro is "OFL" and links to actual license from here -> https://fonts.google.com/specimen/Source+Sans+Pro I'll include the license as a separate file. Show quoted text > On 2018/01/29 16:16:17, saroyanm wrote: > > @Thomas if you agree with current implementation, I'll add same fonts into > > mobile-options.css and issue-reporter.css and remove unused fonts. > > > > As soon we will have SASS support we will be able to move the fonts into a > > separate file and avoid duplication. > > I don't think we want to duplicate them across all CSS files so why not just > separate them into a "fonts.css" file already? I agree, mind if I use Import until we have CSS preprocessor in place https://developer.mozilla.org/en-US/docs/Web/CSS/%40import ? Thomas Greiner 2018/02/15 12:17:06 Ok. From what I read in the license text, the requ Show quoted text On 2018/02/14 18:30:04, saroyanm wrote: > Only thing I could find is from -> https://developers.google.com/fonts/faq > The open source fonts in the Google Fonts catalog are published under licenses > that allow you to use them on any website, whether it’s commercial or personal. > Search queries may surface results from external foundries, who may or may not > use open source licenses. > > Source Sans Pro is "OFL" and links to actual license from here -> > https://fonts.google.com/specimen/Source+Sans+Pro > > I'll include the license as a separate file. Ok. From what I read in the license text, the requirements are: - Include the license text in adblockplusui and in the extension build - Include the copyright notice in adblockplusui and in the extension build The Google Fonts page doesn't mention though what the copyright notice should say so I did a quick search and found the font's official site at https://typekit.com/fonts/source-sans. There you find links on the bottom for each font variant. Those pages contain the license as well as the copyright notice we need to include. This also matches the license file that I found in the repo where you got the font files from: https://github.com/adobe-fonts/source-sans-pro/blob/release/LICENSE.txt We could even include the fonts as an npm package if we want (see https://github.com/adobe-fonts/source-sans-pro/blob/release/README.md#font-in... and https://www.npmjs.com/package/source-sans-pro). Show quoted text > I agree, mind if I use Import until we have CSS preprocessor in place > https://developer.mozilla.org/en-US/docs/Web/CSS/%40import ? I think there's a misunderstanding. What I'm suggesting is to include it as follows: <head> ... <link rel="stylesheet" type="text/css" href="fonts.css"> <link rel="stylesheet" type="text/css" href="desktop-options.css"> ... </head> Thomas Greiner 2018/02/15 12:17:06 I assumed there'd be resources out there that clar Show quoted text On 2018/02/14 18:30:04, saroyanm wrote: > Not sure how I can verify ? > We do support "cyrillic" languages, "greek", "vietnamese", I'm not sure if some > of them are using or might use characters in future that are part of extended > version. I assumed there'd be resources out there that clarify that since that's quite an important aspect of which ranges to choose. But all I found was http://cldr.unicode.org/ which is not too easy to extract information from. So let's simplify this: - If there's at least one language for each Unicode block (e.g. "latin"), we should keep it. Presumably, that's all of them anyway. - If there's a language we support that's not covered by any of the Unicode blocks, we're missing characters. It may be sufficient to check for support of arabic, chinese, cyrillic, greek, japanese and latin but let's check back with C&T on that. saroyanm 2018/02/15 18:47:19 If we include Font as an npm package, we don't nee Show quoted text On 2018/02/15 12:17:06, Thomas Greiner wrote: > On 2018/02/14 18:30:04, saroyanm wrote: > > Only thing I could find is from -> https://developers.google.com/fonts/faq > > The open source fonts in the Google Fonts catalog are published under licenses > > that allow you to use them on any website, whether it’s commercial or > personal. > > Search queries may surface results from external foundries, who may or may not > > use open source licenses. > > > > Source Sans Pro is "OFL" and links to actual license from here -> > > https://fonts.google.com/specimen/Source+Sans+Pro > > > > I'll include the license as a separate file. > > Ok. From what I read in the license text, the requirements are: > - Include the license text in adblockplusui and in the extension build > - Include the copyright notice in adblockplusui and in the extension build > > The Google Fonts page doesn't mention though what the copyright notice should > say so I did a quick search and found the font's official site at > https://typekit.com/fonts/source-sans. There you find links on the bottom for > each font variant. Those pages contain the license as well as the copyright > notice we need to include. > > This also matches the license file that I found in the repo where you got the > font files from: > https://github.com/adobe-fonts/source-sans-pro/blob/release/LICENSE.txt > > We could even include the fonts as an npm package if we want (see > https://github.com/adobe-fonts/source-sans-pro/blob/release/README.md#font-in... > and https://www.npmjs.com/package/source-sans-pro). If we include Font as an npm package, we don't need to include License ? Show quoted text > > I agree, mind if I use Import until we have CSS preprocessor in place > > https://developer.mozilla.org/en-US/docs/Web/CSS/%40import ? > > I think there's a misunderstanding. What I'm suggesting is to include it as > follows: > > <head> > ... > <link rel="stylesheet" type="text/css" href="fonts.css"> > <link rel="stylesheet" type="text/css" href="desktop-options.css"> > ... > </head> Sure, I was referring to use @include rather than manage another file in HTML, but if you have a strong preference to current method, I'll go for it. saroyanm 2018/02/15 18:47:19 I don't think that C&T ever noticed that we had th Show quoted text On 2018/02/15 12:17:06, Thomas Greiner wrote: > On 2018/02/14 18:30:04, saroyanm wrote: > > Not sure how I can verify ? > > We do support "cyrillic" languages, "greek", "vietnamese", I'm not sure if > some > > of them are using or might use characters in future that are part of extended > > version. > > I assumed there'd be resources out there that clarify that since that's quite an > important aspect of which ranges to choose. But all I found was > http://cldr.unicode.org/ which is not too easy to extract information from. > > So let's simplify this: > - If there's at least one language for each Unicode block (e.g. "latin"), we > should keep it. Presumably, that's all of them anyway. > - If there's a language we support that's not covered by any of the Unicode > blocks, we're missing characters. It may be sufficient to check for support of > arabic, chinese, cyrillic, greek, japanese and latin but let's check back with > C&T on that. I don't think that C&T ever noticed that we had that problem for more than 3 years. Result of my tests: Arabic, Chinese, Japanese is using "Latin" only, because we are not loading Source Sans Pro for them, I'm not sure if Source Sans Pro has a separate implementation for them. Greek and Cyrilic languages I've tested so far looks good. I think we should fix the issue for Cyrilic and Greek if possible and find a Font that support all other languages. Alternatively we can allow usage of Local fonts and rely on user having right font in the system. I suggest that we fix for as much languages as possible with the current review and find optimal solution separately. saroyanm 2018/02/16 21:02:56 As discussed, I've included "fonts" file separatel Show quoted text On 2018/02/15 18:47:19, saroyanm wrote: > On 2018/02/15 12:17:06, Thomas Greiner wrote: > > On 2018/02/14 18:30:04, saroyanm wrote: > > > Only thing I could find is from -> https://developers.google.com/fonts/faq > > > The open source fonts in the Google Fonts catalog are published under > licenses > > > that allow you to use them on any website, whether it’s commercial or > > personal. > > > Search queries may surface results from external foundries, who may or may > not > > > use open source licenses. > > > > > > Source Sans Pro is "OFL" and links to actual license from here -> > > > https://fonts.google.com/specimen/Source+Sans+Pro > > > > > > I'll include the license as a separate file. > > > > Ok. From what I read in the license text, the requirements are: > > - Include the license text in adblockplusui and in the extension build > > - Include the copyright notice in adblockplusui and in the extension build > > > > The Google Fonts page doesn't mention though what the copyright notice should > > say so I did a quick search and found the font's official site at > > https://typekit.com/fonts/source-sans. There you find links on the bottom for > > each font variant. Those pages contain the license as well as the copyright > > notice we need to include. > > > > This also matches the license file that I found in the repo where you got the > > font files from: > > https://github.com/adobe-fonts/source-sans-pro/blob/release/LICENSE.txt > > > > We could even include the fonts as an npm package if we want (see > > > https://github.com/adobe-fonts/source-sans-pro/blob/release/README.md#font-in... > > and https://www.npmjs.com/package/source-sans-pro). > If we include Font as an npm package, we don't need to include License ? > > > > I agree, mind if I use Import until we have CSS preprocessor in place > > > https://developer.mozilla.org/en-US/docs/Web/CSS/%40import ? > > > > I think there's a misunderstanding. What I'm suggesting is to include it as > > follows: > > > > <head> > > ... > > <link rel="stylesheet" type="text/css" href="fonts.css"> > > <link rel="stylesheet" type="text/css" href="desktop-options.css"> > > ... > > </head> > Sure, I was referring to use @include rather than manage another file in HTML, > but if you have a strong preference to current method, I'll go for it. As discussed, I've included "fonts" file separately as you suggested and included license.
19 @font-face

20 {

21 font-family: "Source Sans Pro";

22 font-style: normal;

23 font-weight: 300;

24 /* local("Ø") forces using no local font called Source Sans Pro */

25 src: local("Ø"), url("fonts/Source-Sans-Pro/300/cyrillic-ext.woff2") format("w off2");

26 unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+F E2E-FE2F;
Thomas Greiner 2018/02/14 17:13:45 Coding style: "Line length: 80 characters or less" Coding style: "Line length: 80 characters or less" Also applies to other occurrences in this file. saroyanm 2018/02/14 18:30:04 Will fix this. Show quoted text On 2018/02/14 17:13:45, Thomas Greiner wrote: > Coding style: "Line length: 80 characters or less" > > Also applies to other occurrences in this file. Will fix this. saroyanm 2018/02/16 21:02:56 Done. Show quoted text On 2018/02/14 18:30:04, saroyanm wrote: > On 2018/02/14 17:13:45, Thomas Greiner wrote: > > Coding style: "Line length: 80 characters or less" > > > > Also applies to other occurrences in this file. > > Will fix this. Done.
27 }

28

29 @font-face

30 {

31 font-family: "Source Sans Pro";

32 font-style: normal;

33 font-weight: 400;

34 /* local("Ø") forces using no local font called Source Sans Pro */

35 src: local("Ø"), url("fonts/Source-Sans-Pro/400/cyrillic-ext.woff2") format("w off2");

36 unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+F E2E-FE2F;

37 }

38

39 @font-face

40 {

41 font-family: "Source Sans Pro";

42 font-style: normal;

43 font-weight: 700;

44 /* local("Ø") forces using no local font called Source Sans Pro */

45 src: local("Ø"), url("fonts/Source-Sans-Pro/700/cyrillic-ext.woff2") format("w off2");

46 unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+F E2E-FE2F;

47 }

48

49 /* cyrillic */

50 @font-face

51 {

52 font-family: "Source Sans Pro";

53 font-style: normal;

54 font-weight: 300;

55 /* local("Ø") forces using no local font called Source Sans Pro */

56 src: local("Ø"), url("fonts/Source-Sans-Pro/300/cyrillic.woff2") format("woff2 ");

57 unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;

58 }

59

60 @font-face

61 {

62 font-family: "Source Sans Pro";

63 font-style: normal;

64 font-weight: 400;

65 /* local("Ø") forces using no local font called Source Sans Pro */

66 src: local("Ø"), url("fonts/Source-Sans-Pro/400/cyrillic.woff2") format("woff2 ");

67 unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;

68 }

69

70 @font-face

71 {

72 font-family: "Source Sans Pro";

73 font-style: normal;

74 font-weight: 700;

75 /* local("Ø") forces using no local font called Source Sans Pro */

76 src: local("Ø"), url("fonts/Source-Sans-Pro/700/cyrillic.woff2") format("woff2 ");

77 unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;

78 }

79

80 /* greek-ext */

81 @font-face

82 {

83 font-family: "Source Sans Pro";

84 font-style: normal;

85 font-weight: 300;

86 /* local("Ø") forces using no local font called Source Sans Pro */

87 src: local("Ø"), url("fonts/Source-Sans-Pro/300/greek-ext.woff2") format("woff 2");

88 unicode-range: U+1F00-1FFF;

89 }

90

91 @font-face

92 {

93 font-family: "Source Sans Pro";

94 font-style: normal;

95 font-weight: 400;

96 /* local("Ø") forces using no local font called Source Sans Pro */

97 src: local("Ø"), url("fonts/Source-Sans-Pro/400/greek-ext.woff2") format("woff 2");

98 unicode-range: U+1F00-1FFF;

99 }

100

101 @font-face

102 {

103 font-family: "Source Sans Pro";

104 font-style: normal;

105 font-weight: 700;

106 /* local("Ø") forces using no local font called Source Sans Pro */

107 src: local("Ø"), url("fonts/Source-Sans-Pro/700/greek-ext.woff2") format("woff 2");

108 unicode-range: U+1F00-1FFF;

109 }

110

111 /* greek */

112 @font-face

113 {

114 font-family: "Source Sans Pro";

115 font-style: normal;

116 font-weight: 300;

117 /* local("Ø") forces using no local font called Source Sans Pro */

118 src: local("Ø"), url("fonts/Source-Sans-Pro/300/greek.woff2") format("woff2");

119 unicode-range: U+0370-03FF;

120 }

121

122 @font-face

123 {

124 font-family: "Source Sans Pro";

125 font-style: normal;

126 font-weight: 400;

127 /* local("Ø") forces using no local font called Source Sans Pro */

128 src: local("Ø"), url("fonts/Source-Sans-Pro/400/greek.woff2") format("woff2");

129 unicode-range: U+0370-03FF;

130 }

131

132 @font-face

133 {

134 font-family: "Source Sans Pro";

135 font-style: normal;

136 font-weight: 700;

137 /* local("Ø") forces using no local font called Source Sans Pro */

138 src: local("Ø"), url("fonts/Source-Sans-Pro/700/greek.woff2") format("woff2");

139 unicode-range: U+0370-03FF;

140 }

141

142 /* vietnamese */

143 @font-face

144 {

145 font-family: "Source Sans Pro";

146 font-style: normal;

147 font-weight: 300;

148 /* local("Ø") forces using no local font called Source Sans Pro */

149 src: local("Ø"), url("fonts/Source-Sans-Pro/300/vietnamese.woff2") format("wof f2");

150 unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;

151 }

152

153 @font-face

154 {

155 font-family: "Source Sans Pro";

156 font-style: normal;

157 font-weight: 400;

158 /* local("Ø") forces using no local font called Source Sans Pro */

159 src: local("Ø"), url("fonts/Source-Sans-Pro/400/vietnamese.woff2") format("wof f2");

160 unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;

161 }

162

163 @font-face

164 {

165 font-family: "Source Sans Pro";

166 font-style: normal;

167 font-weight: 700;

168 /* local("Ø") forces using no local font called Source Sans Pro */

169 src: local("Ø"), url("fonts/Source-Sans-Pro/700/vietnamese.woff2") format("wof f2");

170 unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;

171 }

172

173 /* latin-ext */

174 @font-face

175 {

176 font-family: "Source Sans Pro";

177 font-style: normal;

178 font-weight: 300;

179 /* local("Ø") forces using no local font called Source Sans Pro */

180 src: local("Ø"), url(fonts/Source-Sans-Pro/300/latin-ext.woff2) format("woff2" );

181 unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2 C60-2C7F, U+A720-A7FF;

182 }

183

184 @font-face

185 {

186 font-family: "Source Sans Pro";

187 font-style: normal;

188 font-weight: 400;

189 /* local("Ø") forces using no local font called Source Sans Pro */

190 src: local("Ø"), url(fonts/Source-Sans-Pro/400/latin-ext.woff2) format("woff2" );

191 unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2 C60-2C7F, U+A720-A7FF;

192 }

193

194 @font-face

195 {

196 font-family: "Source Sans Pro";

197 font-style: normal;

198 font-weight: 700;

199 /* local("Ø") forces using no local font called Source Sans Pro */

200 src: local("Ø"), url(fonts/Source-Sans-Pro/700/latin-ext.woff2) format("woff2" );

201 unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2 C60-2C7F, U+A720-A7FF;

202 }

203

204 /* latin */

205 @font-face

206 {

207 font-family: "Source Sans Pro";

208 font-style: normal;

209 font-weight: 300;

210 /* local("Ø") forces using no local font called Source Sans Pro */

211 src: local("Ø"), url(fonts/Source-Sans-Pro/300/latin.woff2) format("woff2");

212 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;

213 }

214

215 @font-face

216 {

217 font-family: "Source Sans Pro";

218 font-style: normal;

219 font-weight: 400;

220 /* local("Ø") forces using no local font called Source Sans Pro */

221 src: local("Ø"), url(fonts/Source-Sans-Pro/400/latin.woff2) format("woff2");

222 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;

223 }

224

225 @font-face

226 {

227 font-family: "Source Sans Pro";

228 font-style: normal;

229 font-weight: 700;

230 /* local("Ø") forces using no local font called Source Sans Pro */

231 src: local("Ø"), url(fonts/Source-Sans-Pro/700/latin.woff2) format("woff2");

232 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;

233 }

234

235 html	18 html

236 {	19 {

237 font-size: 16px;	20 font-size: 16px;

238 }	21 }

239	22

240 body	23 body

241 {	24 {

242 background-color: #F3F3F3;	25 background-color: #F3F3F3;

243 display: flex;	26 display: flex;

244 justify-content: center;	27 justify-content: center;

(...skipping 161 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
406 .side-controls:not(.wrap)	189 .side-controls:not(.wrap)

407 {	190 {

408 margin: 0.8rem 0rem;	191 margin: 0.8rem 0rem;

409 display: flex;	192 display: flex;

410 justify-content: flex-end;	193 justify-content: flex-end;

411 }	194 }

412	195

413 .side-controls button	196 .side-controls button

414 {	197 {

415 margin: 0rem;	198 margin: 0rem;

416 -moz-margin-start: 1rem;	199 }

417 -webkit-margin-start: 1rem;	200

	201 /*

	202 Due to Edge adoption as new target browser

	203 we cannot use -moz/webkit-margin-start

	204 or -moz/webkit-margin-end because

	205 these lack Edge support.

	206 Yet we need to preserve html direction

	207 and potential UI that might swap right to left.

	208 */

	209 html:not([dir="rtl"]) .side-controls button

	210 {

	211 margin-left: 1rem;

	212 }

	213

	214 html[dir="rtl"] .side-controls button

	215 {

	216 margin-right: 1rem;

418 }	217 }

419	218

420 .side-controls.wrap button	219 .side-controls.wrap button

421 {	220 {

422 margin: 0.6rem 0rem;	221 margin: 0.6rem 0rem;

423 -moz-margin-start: auto;	222 }

424 -webkit-margin-start: auto;	223

	224 html:not([dir="rtl"]) .side-controls.wrap button

	225 {

	226 margin-left: auto;

	227 }

	228

	229 html[dir="rtl"] .side-controls.wrap button

	230 {

	231 margin-right: auto;

425 }	232 }

426	233

427 /*	234 /*

428 icons	235 icons

429 */	236 */

430	237

431 .icon	238 .icon

432 {	239 {

433 border: 0px;	240 border: 0px;

434 padding: 0px;	241 padding: 0px;

(...skipping 290 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
725	532

726 #sidebar,	533 #sidebar,

727 #sidebar .fixed,	534 #sidebar .fixed,

728 [role="tablist"]	535 [role="tablist"]

729 {	536 {

730 width: 14.3rem;	537 width: 14.3rem;

731 }	538 }

732	539

733 #sidebar	540 #sidebar

734 {	541 {

735 flex-shrink: 0;	542 flex-shrink: 0;

736 }	543 }

737	544

738 #sidebar .fixed	545 #sidebar .fixed

739 {	546 {

740 top: 1.2rem;	547 top: 1.2rem;

741 bottom: 0rem;	548 bottom: 0rem;

742 height: auto;	549 height: auto;

743 }	550 }

744	551

745 #sidebar header	552 #sidebar header

(...skipping 50 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
796 padding: 0rem;	603 padding: 0rem;

797 position: relative;	604 position: relative;

798 font-size: 1rem;	605 font-size: 1rem;

799 }	606 }

800	607

801 [role="tablist"] li a	608 [role="tablist"] li a

802 {	609 {

803 display: flex;	610 display: flex;

804 margin-top: -1px;	611 margin-top: -1px;

805 padding: 1rem 0.8rem;	612 padding: 1rem 0.8rem;

806 -moz-margin-end: -1px;	613 margin-left: -1px;

807 -webkit-margin-end: -1px;	614 margin-right: -1px;

808 -moz-margin-start: -1px;

809 -webkit-margin-start: -1px;

810 border-color: #CDCDCD transparent;	615 border-color: #CDCDCD transparent;

811 border-style: solid;	616 border-style: solid;

812 border-width: 1px;	617 border-width: 1px;

813 text-decoration: none;	618 text-decoration: none;

814 color: inherit;	619 color: inherit;

815 cursor: pointer;	620 cursor: pointer;

816 }	621 }

817	622

818 li a[role="tab"][aria-selected]	623 li a[role="tab"][aria-selected]

819 {	624 {

820 -moz-border-start-color: #CDCDCD;

821 -webkit-border-start-color: #CDCDCD;

822 font-weight: 700;	625 font-weight: 700;

823 background-color: #FFF;	626 background-color: #FFF;

	627 }

	628

	629 html:not([dir="rtl"]) li a[role="tab"][aria-selected]

	630 {

	631 border-left-color: #CDCDCD;

	632 }

	633

	634 html[dir="rtl"] li a[role="tab"][aria-selected]

	635 {

	636 border-right-color: #CDCDCD;

824 }	637 }

825	638

826 #sidebar footer	639 #sidebar footer

827 {	640 {

828 width: 100%;	641 width: 100%;

829 }	642 }

830	643

831 #sidebar footer p	644 #sidebar footer p

832 {	645 {

833 display: flex;	646 display: flex;

834 justify-content: center;	647 justify-content: center;

835 margin: 1rem 0rem;	648 margin: 1rem 0rem;

836 }	649 }

837	650

838 /* This is a stopgap solution of footer overlapping tabs on low resolutions */	651 /* This is a stopgap solution of footer overlapping tabs on low resolutions */

839 @media (min-height: 37rem)	652 @media (min-height: 37rem)

840 {	653 {

841 #sidebar .fixed	654 #sidebar .fixed

842 {	655 {

843 position: fixed;	656 position: fixed;

844 }	657 }

845	658

846 #sidebar footer	659 #sidebar footer

847 {	660 {

848 bottom: 0px;	661 bottom: 0px;

849 position: absolute;	662 position: absolute;

850 }	663 }

	664

851 }	665 }

852	666

853 /*	667 /*

854 Main content	668 Main content

855 */	669 */

856	670

857 body[data-tab\|="general"] #content-general,	671 body[data-tab\|="general"] #content-general,

858 body[data-tab\|="advanced"] #content-advanced,	672 body[data-tab\|="advanced"] #content-advanced,

859 body[data-tab\|="whitelist"] #content-whitelist,	673 body[data-tab\|="whitelist"] #content-whitelist,

860 body[data-tab\|="help"] #content-help	674 body[data-tab\|="help"] #content-help

(...skipping 55 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
916 }	730 }

917	731

918 section.cols	732 section.cols

919 {	733 {

920 display: flex;	734 display: flex;

921 }	735 }

922	736

923 section.cols > *:first-child	737 section.cols > *:first-child

924 {	738 {

925 flex: 1;	739 flex: 1;

926 -moz-margin-end: 2rem;	740 }

927 -webkit-margin-end: 2rem;	741

	742 html:not([dir="rtl"]) section.cols > *:first-child

	743 {

	744 margin-right: 2rem;

	745 }

	746

	747 html[dir="rtl"] section.cols > *:first-child

	748 {

	749 margin-left: 2rem;

928 }	750 }

929	751

930 section.cols > *:last-child	752 section.cols > *:last-child

931 {	753 {

932 flex: 3;	754 flex: 3;

933 }	755 }

934	756

935 /*	757 /*

936 Acceptable ads	758 Acceptable ads

937 */	759 */

(...skipping 54 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
992 html[dir="rtl"] button	814 html[dir="rtl"] button

993 {	815 {

994 left: auto;	816 left: auto;

995 right: 0rem;	817 right: 0rem;

996 }	818 }

997	819

998 #acceptable-ads label	820 #acceptable-ads label

999 {	821 {

1000 font-weight: 700;	822 font-weight: 700;

1001 font-size: 1rem;	823 font-size: 1rem;

1002 -moz-margin-end: 0.5rem;	824 }

1003 -webkit-margin-end: 0.5rem;	825

	826 html:not([dir="rtl"]) #acceptable-ads label

	827 {

	828 margin-right: 0.5rem;

	829 }

	830

	831 html[dir="rtl"] #acceptable-ads label

	832 {

	833 margin-left: 0.5rem;

1004 }	834 }

1005	835

1006 #dnt	836 #dnt

1007 {	837 {

1008 padding: 0.8rem;	838 padding: 0.8rem;

1009 border: 1px solid #077CA6;	839 border: 1px solid #077CA6;

1010 }	840 }

1011	841

1012 .new	842 .new

1013 {	843 {

(...skipping 120 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
1134 .cols .col5,	964 .cols .col5,

1135 .th .col5	965 .th .col5

1136 {	966 {

1137 margin: 0rem 1rem;	967 margin: 0rem 1rem;

1138 align-self: center;	968 align-self: center;

1139 }	969 }

1140	970

1141 .th .col5:nth-of-type(1),	971 .th .col5:nth-of-type(1),

1142 .table .col5:nth-of-type(1)	972 .table .col5:nth-of-type(1)

1143 {	973 {

1144 flex: 5;	974 flex: 5;
Thomas Greiner 2018/02/14 17:13:45 If the design doesn't consider long texts, there's If the design doesn't consider long texts, there's not much we can do. Therefore I'd argue that we shouldn't optimize for exceptions but instead make sure that the design works for most users. In this case, for instance, we'd be unnecessarily increasing the column width for all languages even though most of them may not even have this issue. What I'd suggest is to feed this issue back to Product and resolve the underlying issue rather than patching one hole after another (see also "Disabled" label in Spanish). saroyanm 2018/02/14 18:30:04 I agree that this need to be fixed in design, but Show quoted text On 2018/02/14 17:13:45, Thomas Greiner wrote: > If the design doesn't consider long texts, there's not much we can do. Therefore > I'd argue that we shouldn't optimize for exceptions but instead make sure that > the design works for most users. > > In this case, for instance, we'd be unnecessarily increasing the column width > for all languages even though most of them may not even have this issue. > > What I'd suggest is to feed this issue back to Product and resolve the > underlying issue rather than patching one hole after another (see also > "Disabled" label in Spanish). I agree that this need to be fixed in design, but mind if we keep this as a stopgap solution, because currently this is the only column that has both elements next to each other, though we might change this, it was done so to easily change the state using sibling selector. I'll followup and create a Gitlab issue to address that as well. Thomas Greiner 2018/02/15 12:17:07 Ok, I'm fine with that. Show quoted text On 2018/02/14 18:30:04, saroyanm wrote: > I agree that this need to be fixed in design, but mind if we keep this as a > stopgap solution, because currently this is the only column that has both > elements next to each other, though we might change this, it was done so to > easily change the state using sibling selector. > > I'll followup and create a Gitlab issue to address that as well. Ok, I'm fine with that.
1145 }	975 }

1146	976

1147 .th .col5:nth-of-type(2),	977 .th .col5:nth-of-type(2),

1148 .table .col5:nth-of-type(2)	978 .table .col5:nth-of-type(2)

1149 {	979 {

1150 flex: 8;	980 flex: 8;

1151 }	981 }

1152	982

1153 .th .col5:nth-of-type(3),	983 .th .col5:nth-of-type(3),

1154 .table .col5:nth-of-type(3)	984 .table .col5:nth-of-type(3)

1155 {	985 {

1156 flex: 4;	986 flex: 4;

1157 }	987 }

1158	988

1159 .th .col5:nth-of-type(4),	989 .th .col5:nth-of-type(4),

1160 .table .col5:nth-of-type(4)	990 .table .col5:nth-of-type(4)

1161 {	991 {

1162 flex: 1;	992 flex: 1;

1163 }	993 }

1164	994

1165 .th .col5:nth-of-type(5),	995 .th .col5:nth-of-type(5),

1166 .table .col5:nth-of-type(5)	996 .table .col5:nth-of-type(5)

1167 {	997 {

1168 flex: 1;	998 flex: 1;

1169 -moz-margin-start: 0;	999 }

1170 -webkit-margin-start: 0;	1000

1171 -moz-margin-end: 1.8rem;	1001 html:not([dir="rtl"]) .th .col5:nth-of-type(5),

1172 -webkit-margin-end: 1.8rem;	1002 html:not([dir="rtl"]) .table .col5:nth-of-type(5)

	1003 {

	1004 margin-left: 0;

	1005 margin-right: 1.8rem;

	1006 }

	1007

	1008 html[dir="rtl"] .th .col5:nth-of-type(5),

	1009 html[dir="rtl"] .table .col5:nth-of-type(5)

	1010 {

	1011 margin-right: 0;

	1012 margin-left: 1.8rem;

1173 }	1013 }

1174	1014

1175 .table.cols > span	1015 .table.cols > span

1176 {	1016 {

1177 margin: 0rem;	1017 margin: 0rem;

1178 }	1018 }

1179	1019

1180 .table.cols li	1020 .table.cols li

1181 {	1021 {

1182 padding: 0.5rem 0rem;	1022 padding: 0.5rem 0rem;

(...skipping 52 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
1235 }	1075 }

1236	1076

1237 /*	1077 /*

1238 Tooltips	1078 Tooltips

1239 */	1079 */

1240	1080

1241 .tooltip	1081 .tooltip

1242 {	1082 {

1243 position: relative;	1083 position: relative;

1244 margin: 0rem;	1084 margin: 0rem;

1245 -moz-margin-end: 1rem;

1246 -webkit-margin-end: 1rem;

1247 line-height: 1.5rem;	1085 line-height: 1.5rem;

1248 text-decoration: none;	1086 text-decoration: none;

1249 cursor: help;	1087 cursor: help;

	1088 }

	1089

	1090 html:not([dir="rtl"]) .tooltip

	1091 {

	1092 margin-right: 1rem;

	1093 }

	1094

	1095 html[dir="rtl"] .tooltip

	1096 {

	1097 margin-left: 1rem;

1250 }	1098 }

1251	1099

1252 /*	1100 /*

1253 Used for translatable screen reader only content.	1101 Used for translatable screen reader only content.

1254 e.g.: Use instead of aria-label to avoid complex attribute value translation	1102 e.g.: Use instead of aria-label to avoid complex attribute value translation

1255 */	1103 */

1256 .sr-only	1104 .sr-only

1257 {	1105 {

1258 position: absolute;	1106 position: absolute;

1259 overflow: hidden;	1107 overflow: hidden;

(...skipping 33 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
1293	1141

1294 #content-whitelist form input	1142 #content-whitelist form input

1295 {	1143 {

1296 flex: 1;	1144 flex: 1;

1297 height: 100%;	1145 height: 100%;

1298 padding: 0.5rem 1rem;	1146 padding: 0.5rem 1rem;

1299 font-size: 1rem;	1147 font-size: 1rem;

1300 border: 2px solid #077CA6;	1148 border: 2px solid #077CA6;

1301 }	1149 }

1302	1150

1303 #content-whitelist form button	1151 html:not([dir="rtl"]) #content-whitelist form button

1304 {	1152 {

1305 -moz-margin-start: 0.7rem;	1153 margin-left: 0.7rem;

1306 -webkit-margin-start: 0.7rem;	1154 }

	1155

	1156 html[dir="rtl"] #content-whitelist form button

	1157 {

	1158 margin-right: 0.7rem;

1307 }	1159 }

1308	1160

1309 #whitelisting-table li	1161 #whitelisting-table li

1310 {	1162 {

1311 padding-left: 1.4rem;	1163 padding-left: 1.4rem;

1312 padding-right: 1.4rem;	1164 padding-right: 1.4rem;

1313 border-left: 0rem;	1165 border-left: 0rem;

1314 border-right: 0rem;	1166 border-right: 0rem;

1315 }	1167 }

1316	1168

(...skipping 212 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
1529	1381

1530 #social ul	1382 #social ul

1531 {	1383 {

1532 list-style: none;	1384 list-style: none;

1533 padding: 0px;	1385 padding: 0px;

1534 }	1386 }

1535	1387

1536 #social ul li	1388 #social ul li

1537 {	1389 {

1538 display: inline-block;	1390 display: inline-block;

1539 -moz-margin-end: 1rem;	1391 }

1540 -webkit-margin-end: 1rem;	1392

	1393 html:not([dir="rtl"]) #social ul li

	1394 {

	1395 margin-right: 1rem;

	1396 }

	1397

	1398 html[dir="rtl"] #social ul li

	1399 {

	1400 margin-left: 1rem;

1541 }	1401 }

1542	1402

1543 #social ul li a	1403 #social ul li a

1544 {	1404 {

1545 display: block;	1405 display: block;

1546 text-align: center;	1406 text-align: center;

1547 text-decoration: none;	1407 text-decoration: none;

1548 }	1408 }

1549	1409

1550 /*	1410 /*

(...skipping 150 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
1701 font-size: 1rem;	1561 font-size: 1rem;

1702 color: #077CA6;	1562 color: #077CA6;

1703 background-color: #E1F2FA;	1563 background-color: #E1F2FA;

1704 }	1564 }

1705	1565

1706 #notification strong	1566 #notification strong

1707 {	1567 {

1708 flex: 1;	1568 flex: 1;

1709 text-align: center;	1569 text-align: center;

1710 }	1570 }

LEFT	RIGHT