CoCalc -- phui-timeline-view.css

GitHub Repository: freebsd/phabricator
Path: blob/master/webroot/rsrc/css/phui/phui-timeline-view.css
¹²²⁴¹ views
1
/**
2
 * @provides phui-timeline-view-css
3
 */
4

5
.phui-timeline-view {
6
  padding: 0 16px;
7
  background-image: url('/rsrc/image/d5d8e1.png');
8
  background-repeat: repeat-y;
9
  background-position: 96px;
10
}
11

12
.device .phui-timeline-view {
13
  padding: 0 8px;
14
}
15

16
.device-tablet .phui-timeline-view {
17
  background-position: 24px;
18
}
19

20
.device-phone .phui-timeline-view {
21
  padding: 0;
22
  background-position: 24px;
23
}
24

25
.phui-timeline-major-event .phui-timeline-group {
26
  border-left: 1px solid {$timeline};
27
  border-right: 1px solid {$timeline};
28
  border-radius: 3px;
29
}
30

31
.device-desktop .phui-timeline-event-view {
32
  margin-left: 62px;
33
  position: relative;
34
}
35

36
.device-desktop .phui-timeline-event-view.phui-timeline-minor-event {
37
  margin-left: 67px;
38
}
39

40
.device-desktop .phui-timeline-spacer {
41
  min-height: 16px;
42
}
43

44
.device-desktop .phui-timeline-event-view.the-worlds-end {
45
  background: {$lightblueborder};
46
  width: 9px;
47
  height: 9px;
48
  border-radius: 2px;
49
  margin-left: 76px;
50
  margin-bottom: 20px;
51
}
52

53
.device-desktop .phui-timeline-wedge {
54
  border-bottom: 1px solid {$timeline};
55
  position: absolute;
56
  width: 12px;
57
}
58

59
.device-phone .phui-timeline-minor-event,
60
.device-tablet .phui-timeline-minor-event {
61
  padding-left: 3px;
62
}
63

64
.phui-timeline-major-event .phui-timeline-content {
65
  border-top: 1px solid {$timeline};
66
  border-bottom: 1px solid {$timeline};
67
  border-radius: 3px;
68
}
69

70
.phui-timeline-title {
71
  line-height: 24px;
72
  min-height: 19px;
73
  position: relative;
74
  color: {$greytext};
75
}
76

77
.phui-timeline-minor-event .phui-timeline-title {
78
  padding: 1px 8px 4px 33px;
79
}
80

81
.phui-timeline-title a {
82
  font-weight: bold;
83
  color: {$darkgreytext};
84
}
85

86
.device-desktop .phui-timeline-wedge {
87
  left: -12px;
88
}
89

90
.device-desktop .phui-timeline-major-event .phui-timeline-wedge {
91
  top: 26px;
92
}
93

94
.device-desktop .phui-timeline-minor-event .phui-timeline-wedge {
95
  top: 12px;
96
  left: -18px;
97
  width: 20px;
98
}
99

100
.phui-timeline-image {
101
  background-repeat: no-repeat;
102
  position: absolute;
103
  border-radius: 3px;
104
  background-size: 100%;
105
  display: block;
106
}
107

108
.device-desktop .phui-timeline-major-event .phui-timeline-image {
109
  width: 50px;
110
  height: 50px;
111
  top: 0px;
112
  left: -62px;
113
}
114

115
.device-desktop .phui-timeline-minor-event .phui-timeline-image {
116
  width: 26px;
117
  height: 26px;
118
  background-size: 26px auto;
119
  left: -41px;
120
}
121

122
.phui-timeline-major-event .phui-timeline-title {
123
  background: {$lightgreybackground};
124
  min-height: 22px;
125
  border-top-right-radius: 3px;
126
  border-top-left-radius: 3px;
127
}
128

129
.phui-timeline-major-event .phui-timeline-title + .phui-timeline-title {
130
  border-radius: 0;
131
  padding-top: 0;
132
}
133

134
.phui-timeline-major-event .phui-timeline-title + .phui-timeline-title
135
  .phui-timeline-icon-fill {
136
    margin-top: 0;
137
  }
138

139
.phui-timeline-title {
140
  padding: 5px 8px;
141
  overflow-x: auto;
142
  overflow-y: hidden;
143
}
144

145
.phui-timeline-title-with-icon {
146
  padding-left: 36px;
147
}
148

149
.phui-timeline-title-with-menu {
150
  padding-right: 36px;
151
}
152

153
.phui-timeline-view .phui-icon-view.phui-timeline-token {
154
  vertical-align: middle;
155
  margin-right: 4px;
156
}
157

158
.phui-timeline-token.strikethrough {
159
  position: relative;
160
}
161

162
.phui-timeline-token.strikethrough:before {
163
  position: absolute;
164
  content: "";
165
  left: 0;
166
  top: 50%;
167
  right: 0;
168
  border-top: 3px solid;
169
  border-color: {$darkbluetext};
170

171
  -webkit-transform:rotate(-40deg);
172
  -moz-transform:rotate(-40deg);
173
  -ms-transform:rotate(-40deg);
174
  -o-transform:rotate(-40deg);
175
  transform:rotate(-40deg);
176
}
177

178
.phui-timeline-major-event .phui-timeline-content
179
  .phui-timeline-core-content {
180
  padding: 16px;
181
  line-height: 18px;
182
  background: {$page.content};
183
  border-top: 1px solid rgba({$alphablue},.1);
184
  border-bottom-left-radius: 3px;
185
  border-bottom-right-radius: 3px;
186
}
187

188
.phui-timeline-core-content {
189
  overflow-x: auto;
190
}
191

192
.phui-timeline-core-content .comment-deleted {
193
  font-style: italic;
194
}
195

196
.device .phui-timeline-event-view {
197
  min-height: 23px;
198
  position: relative;
199
}
200

201
.device-phone .phui-timeline-event-view {
202
  margin: 0 8px;
203
}
204

205
.device .phui-timeline-image {
206
  display: none;
207
}
208

209
.device .phui-timeline-spacer {
210
  min-height: 8px;
211
  border-width: 0;
212
}
213

214
.phui-timeline-icon-fill {
215
  position: absolute;
216
  width: 34px;
217
  height: 34px;
218
  top: 0;
219
  left: 0;
220
  text-align: center;
221
}
222

223
.phui-timeline-icon {
224
  color: {$bluetext};
225
}
226

227
.phui-icon-view.phui-timeline-icon {
228
  font-size: 14px;
229
}
230

231
.phui-timeline-icon-fill {
232
  height: 26px;
233
  width: 26px;
234
  border-radius: 3px;
235
  background-color: {$timeline.icon.background};
236
}
237

238
.phui-timeline-major-event .phui-timeline-icon-fill {
239
  margin: 4px;
240
}
241

242
.phui-timeline-icon-fill .phui-timeline-icon {
243
  margin-top: 6px;
244
}
245

246
.phui-timeline-extra,
247
.phui-timeline-extra .phabricator-content-source-view {
248
  font-size: {$smallerfontsize};
249
  font-weight: normal;
250
  color: {$lightgreytext};
251
  margin-left: 8px;
252
}
253

254
.phui-timeline-title .phui-timeline-extra a {
255
  font-weight: normal;
256
  color: {$lightgreytext};
257
}
258

259
.phui-timeline-title .phui-timeline-value,
260
.conpherence-transaction-content .phui-timeline-value,
261
.phui-feed-story-head .phui-timeline-value {
262
  font-style: italic;
263
  color: {$blacktext};
264
}
265

266
.device-desktop .phui-timeline-extra {
267
  float: right;
268
}
269

270
.device .phui-timeline-extra {
271
  display: inline-block;
272
  line-height: 16px;
273
  margin-left: 8px;
274
  white-space: nowrap;
275
}
276

277
.device-phone .phui-timeline-extra {
278
  display: block;
279
  margin: 0;
280
}
281

282
.phui-timeline-icon-fill.fill-has-color .phui-icon-view {
283
  color: {$page.content};
284
}
285

286
.phui-timeline-icon-fill-red {
287
  background-color: {$red};
288
}
289

290
.phui-timeline-icon-fill-orange {
291
  background-color: {$orange};
292
}
293

294
.phui-timeline-icon-fill-yellow {
295
  background-color: {$yellow};
296
}
297

298
.phui-timeline-icon-fill-green {
299
  background-color: {$green};
300
}
301

302
.phui-timeline-icon-fill-sky {
303
  background-color: {$sky};
304
}
305

306
.phui-timeline-icon-fill-blue {
307
  background-color: {$blue};
308
}
309

310
.phui-timeline-icon-fill-indigo {
311
  background-color: {$indigo};
312
}
313

314
.phui-timeline-icon-fill-violet {
315
  background-color: {$violet};
316
}
317

318
.phui-timeline-icon-fill-pink {
319
  background-color: {$pink};
320
}
321

322
.phui-timeline-icon-fill-grey {
323
  background-color: #888;
324
}
325

326
.phui-timeline-icon-fill-black {
327
  background-color: #000;
328
}
329

330
.phui-timeline-shell.anchor-target {
331
  background: {$lightyellow};
332
  border-width: 0 1px 0 0;
333
  border-style: solid;
334
  border-color: {$yellow};
335
  padding: 4px;
336
  margin: -4px;
337
}
338

339
.phui-timeline-preview-header {
340
  background: #e0e3ec;
341
  color: {$darkgreytext};
342
  padding: 4px 1.25%;
343
  border: solid {$blueborder} 1px 0;
344
}
345

346
.phui-timeline-change-details {
347
  padding: 10px 0;
348
  border-style: solid;
349
  border-color: #efefef;
350
  border-width: 1px 0;
351
}
352

353
.phui-timeline-older-transactions-are-hidden {
354
  background: {$gentle.highlight};
355
  border: 1px solid {$gentle.highlight.border};
356
  text-align: center;
357
  padding: 12px;
358
  color: {$darkgreytext};
359
  cursor: pointer;
360
  border-radius: 3px;
361
}
362

363
.device-phone .phui-timeline-older-transactions-are-hidden {
364
  margin: 0 8px;
365
}
366

367
.phui-timeline-title .phui-timeline-extra-information a {
368
  font-weight: normal;
369
  color: {$greytext};
370
}
371

372
.phui-timeline-comment-actions .phui-icon-view {
373
  width: 16px;
374
  height: 16px;
375
  font-size: 16px;
376
  text-align: center;
377
  overflow: hidden;
378
}
379

380
.phui-timeline-menu {
381
  position: absolute;
382
  right: 3px;
383
  top: 6px;
384
  width: 28px;
385
  height: 24px;
386
  text-align: center;
387
  line-height: 22px;
388
  font-size: 16px;
389
  border-left: 1px solid {$thinblueborder};
390
}
391

392
.phui-timeline-menu:focus {
393
  outline: none;
394
}
395

396
a.phui-timeline-menu .phui-icon-view {
397
  color: {$bluetext};
398
}
399

400
.device-desktop a.phui-timeline-menu:hover .phui-icon-view {
401
  color: {$sky};
402
}
403

404
.phui-timeline-menu.phuix-dropdown-open {
405
  background: rgba({$alphablue},0.1);
406
  border: none;
407
  border-radius: 3px;
408
}
409

410
.phui-timeline-view + .phui-object-box {
411
  margin-top: 0;
412
}
413

414
.phui-timeline-badges {
415
  position: absolute;
416
  left: -64px;
417
  top: 52px;
418
  width: 54px;
419
  text-align: center;
420
}
421

422
.phui-timeline-badges .phui-badge-mini {
423
  height: 18px;
424
  width: 18px;
425
  line-height: 16px;
426
}
427

428
.phui-timeline-badges .phui-badge-mini .phui-icon-view {
429
  font-size: 10px;
430
}
431

432
.phui-comment-preview-view {
433
  margin-bottom: 20px;
434
}
435

436
.phui-timeline-view .phui-pinboard-view {
437
  margin: 8px 0 0 0;
438
  padding: 0;
439
  text-align: left;
440
}
441

442
Product

Resources

Company
