Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code
Issues
All Issues

Delta Between Two Patch Sets: skin/updates.css

Issue 29592569: Issue 5943 - Implement Updates Page for Adblock Plus extension (Closed) Base URL: https://hg.adblockplus.org/adblockplusui/
Left Patch Set: Addressed second round of feedback Created Nov. 13, 2017, 8:47 a.m.
Right Patch Set: Addressed seventh round of feedback Created Jan. 12, 2018, 11:35 a.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
« no previous file with change/comment | « locale/en_US/updates.json ('k') | skin/updates/appstore-bg.svg » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
1 @font-face 1 @font-face
Thomas Greiner 2017/11/20 17:06:05 I'm glad that you got rid of those because it's pr
2 { 2 {
3 font-family: "Source Sans Pro"; 3 font-family: "Source Sans Pro";
4 font-style: normal; 4 font-style: normal;
5 font-weight: 400; 5 font-weight: 400;
6 font-stretch: normal; 6 font-stretch: normal;
7 src: local ("Ø"), 7 src: local ("Ø"),
8 url(fonts/SourceSansPro-Regular.woff) format("woff"); 8 url(fonts/SourceSansPro-Regular.woff) format("woff");
9 } 9 }
10 10
11 @font-face 11 @font-face
12 { 12 {
13 font-family: "Source Sans Pro"; 13 font-family: "Source Sans Pro";
14 font-style: bold; 14 font-style: bold;
15 font-weight: 600; 15 font-weight: 600;
16 font-stretch: normal; 16 font-stretch: normal;
17 src: local ("Ø"), 17 src: local ("Ø"),
18 url(fonts/SourceSansPro-bold.woff) format("woff"); 18 url(fonts/SourceSansPro-bold.woff) format("woff");
19 } 19 }
20 20
21 html 21 html
22 { 22 {
23 font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; 23 font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
24 -webkit-font-smoothing: antialiased;
24 } 25 }
25 26
26 body 27 body
27 { 28 {
28 margin: 0; 29 margin: 0;
29 padding: 0; 30 padding: 0;
30 } 31 }
31 32
32 #container 33 #container
33 { 34 {
34 display: flex; 35 display: flex;
35 flex-direction: row; 36 flex-direction: row;
36 align-items: stretch; 37 align-items: stretch;
37 } 38 }
38 39
39 .column 40 .column
40 { 41 {
41 height: 100vh; 42 height: 100vh;
42 display: flex; 43 display: flex;
43 align-items: center; 44 align-items: center;
44 justify-content: center; 45 justify-content: center;
45 flex: 1; 46 flex: 1;
46 } 47 }
47 48
48 #graphic-column 49 #graphic-column,
49 { 50 .graphic-column
50 background-color: #8DC446;
51
Thomas Greiner 2017/11/14 12:25:43 Coding style: "No whitespace at the end of a line.
martin 2017/11/20 11:47:30 Done.
52 }
53
54 .graphic-column
55 { 51 {
56 background-color: #8DC446; 52 background-color: #8DC446;
57 } 53 }
58 54
59 #content 55 #content
60 { 56 {
61 padding: 0 3em; 57 padding: 0 3em;
62 max-width: 760px; 58 max-width: 760px;
63 } 59 }
64 60
65 #content a { 61 #content a
62 {
66 color: #C70D2C; 63 color: #C70D2C;
67 text-decoration: none; 64 text-decoration: none;
68 } 65 }
69 66
70 #content a:hover { 67 #optionsPageLink
68 {
69 color: red;
70 }
71
72 /* Needed in order to achieve standard behavior
73 for links, due to lacking href attribute */
74 #content a:hover
75 {
71 text-decoration: underline; 76 text-decoration: underline;
77 cursor: pointer;
72 } 78 }
73 79
74 #content header 80 #content header
75 { 81 {
76 margin: 0 0 2em 5em; 82 margin: 0 0 2em 5em;
77 } 83 }
78 84
79 #content header[dir="rtl"] 85 html[dir="rtl"] #content header
Thomas Greiner 2017/11/14 12:25:41 This won't work because the "dir" attribute is on
martin 2017/11/20 11:47:31 Done.
80 { 86 {
81 margin: 0 5em 2em 0; 87 margin: 0 5em 2em 0;
Thomas Greiner 2017/11/14 12:25:42 Coding style: "No whitespace at the end of a line.
martin 2017/11/20 11:47:31 Done.
82 } 88 }
83 89
84 #content header p { 90 #content header p {
85 margin: 0; 91 margin: 0;
86 opacity: 0.5; 92 opacity: 0.5;
87 font-weight: 400; 93 font-weight: 400;
88 font-size: 1.2em; 94 font-size: 1.2em;
89 } 95 }
90 96
91 #content header h1 97 #content header h1
92 { 98 {
93 margin: 0; 99 margin: 0;
94 } 100 }
95 101
96 .custom-feature-entry 102 .custom-feature-entry
97 { 103 {
98 margin-top: 2em; 104 margin-top: 2em;
99 } 105 }
100 106
101 .custom-feature-entry h2 { 107 .custom-feature-entry h2
108 {
102 margin: 0 0 0 3.4em; 109 margin: 0 0 0 3.4em;
Thomas Greiner 2017/11/14 12:25:42 Detail: This may produce unexpected results for ri
martin 2017/11/20 11:47:33 Done.
103 } 110 }
104 111
105 .update-graphic-container 112 html[dir="rtl"] .custom-feature-entry h2
106 { 113 {
114 margin: 0 3.4em 0 0;
115 }
116
117 .update-graphic-container
118 {
119 display: flex;
120 align-items: center;
121 position: relative;
107 width: 560px; 122 width: 560px;
108 height: 460px; 123 height: 460px;
109 background-image: url(./updates/base-graphic.svg); 124 background-image: url(./updates/base-graphic.svg);
Thomas Greiner 2017/11/14 12:25:41 Coding style: "CSS rule declaration order should f
martin 2017/11/20 11:47:30 Soo... Is this about the declaration order? Should
Thomas Greiner 2017/11/20 17:06:04 Yes, it's about the order of declaration. No, don'
martin 2017/11/26 17:08:37 Done.
110 position: relative;
111 display: flex;
112 align-items: center;
113 background-repeat: no-repeat; 125 background-repeat: no-repeat;
114 background-size: cover; 126 background-size: cover;
115 } 127 }
116 128
117 .update-graphic-container img 129 .update-graphic-container img
118 { 130 {
119 display: block; 131 display: block;
120 width: 162px; 132 width: 162px;
121 height: 162px; 133 height: 162px;
122 } 134 }
123 135
124 .update-graphic-content 136 .update-graphic-content
125 { 137 {
138 display: flex;
139 align-items: center;
126 position: absolute; 140 position: absolute;
127 top: 65px; 141 top: 65px;
128 left: 100px; 142 left: 100px;
129 display: flex;
130 align-items: center;
131 } 143 }
132 144
133 .version-details 145 .version-details
134 { 146 {
135 margin: 0 1em 0 1em; 147 margin: 0 1em 0 1em;
Thomas Greiner 2017/11/14 12:25:42 Well spotted
136 } 148 }
137 149
138 .version-details h2 150 .version-details h2
139 { 151 {
140 margin: 0; 152 margin: 0;
141 } 153 }
142 154
143 .feature-entry 155 .feature-entry
144 { 156 {
145 display: flex; 157 display: flex;
146 align-items: center; 158 align-items: center;
147 padding: 0 1em; 159 padding: 0 1em;
148 } 160 }
149 161
150 .feature-entry img 162 .feature-entry img
151 { 163 {
152 width: 50px; 164 width: 50px;
153 height: 50px; 165 height: 50px;
154 display: block; 166 display: block;
155 margin: 0 1em 0 0; 167 margin: 0 1em 0 0;
156 } 168 }
157 169
158 .feature-entry img[dir="rtl"] 170 html[dir="rtl"] .feature-entry img
159 { 171 {
160 margin: 0 0 0 1em; 172 margin: 0 0 0 1em;
161 } 173 }
162 174
163 #block-ads-text > strong 175 #block-ads-text > strong
164 { 176 {
165 text-decoration: line-through; 177 text-decoration: line-through;
166 font-weight: normal; 178 font-weight: normal;
167 } 179 }
168 180
169 .store-buttons 181 .store-buttons
170 { 182 {
171 width: 100%;
Thomas Greiner 2017/11/14 12:25:41 This causes both scrollbars to be shown when I ope
martin 2017/11/20 11:47:32 Done.
172 height: 58px; 183 height: 58px;
173 margin: 0 0 0 5em; 184 margin: 0 0 0 5em;
174 } 185 }
175 186
176 .store-buttons[dir="rtl"] 187 html[dir="rtl"] .store-buttons
177 { 188 {
178 margin: 0 5em 0 0; 189 margin: 0 5em 0 0;
179 } 190 }
180 191
181 .store-button 192 .store-button
182 { 193 {
183 display: block; 194 display: block;
184 width: 180px;
185 height: 58px; 195 height: 58px;
186 border-radius: 6px; 196 border-radius: 6px;
187 background-color: #000; 197 background-color: #000;
188 float: left; 198 float: left;
189 margin-bottom: 1em; 199 margin-bottom: 1em;
190 } 200 }
191 201
192 .store-button[dir="rtl"] 202 html[dir="rtl"] .store-button
193 { 203 {
194 float: right; 204 float: right;
195 } 205 }
196 206
197 .store-button > img 207 .store-button > img
198 { 208 {
199 height: 54px; 209 height: 100%;
200 } 210 }
201 211
202 .applestore-button 212 .applestore-button
203 { 213 {
204 margin-right: 1em; 214 margin-right: 1em;
205 } 215 }
206 216
207 [dir="rtl"] .appstore-button 217 html[dir="rtl"] .applestore-button
208 { 218 {
209 margin-right: 0; 219 margin-right: 0;
210 margin-left: 1em; 220 margin-left: 1em;
211 } 221 }
212 222
213 @media(max-width: 960px) 223 @media(max-width: 960px)
214 { 224 {
215 #container 225 #container
216 { 226 {
217 flex-direction: column; 227 flex-direction: column;
218 } 228 }
219 } 229 }
220 230
221 @media(max-width: 480px) 231 @media(max-width: 480px)
222 { 232 {
223 #content header 233 #content header
224 { 234 {
225 margin: 2em 0 2em 5em; 235 margin: 2em 0 2em 5em;
Thomas Greiner 2017/11/14 12:25:42 Detail: This may produce unexpected results for ri
martin 2017/11/20 11:47:33 Previewed it. Saw nothing weird. Let me know if I'
Thomas Greiner 2017/11/20 17:06:05 I'd have to check whether this issue is visible. B
226 } 236 }
237
227 .column 238 .column
228 { 239 {
229 align-items: flex-start; 240 align-items: flex-start;
230 } 241 }
231 } 242
Thomas Greiner 2017/11/14 12:25:41 Coding style: "Newline at end of file, otherwise n
martin 2017/11/20 11:47:32 Done.
243 html[dir="rtl"] .applestore-button
244 {
245 margin: 0 0 1em 0;
246 }
247 }
LEFTRIGHT
« locale/en_US/updates.json ('k') | skin/updates/appstore-bg.svg » ('j') | Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Toggle Comments ('s')

Powered by Google App Engine
This is Rietveld