OurHike/client/src/screens/moderation.css at main · ghzhost/OurHike · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
/* The moderation queue (#235). Desk work, deliberately: this is read on a
   laptop, not on a phone at a blowdown - so the layout is a readable column
   rather than anything that has to survive a gloved thumb. */

.moderation {
  padding: 1rem;
  max-width: 52rem;
  margin: 0 auto;
}

.moderation__section {
  margin-block: 1.5rem;
}

/* The one section that is not about the trail. Marked in the layout as well
   as in words, because the whole point is that it does not read as another
   row of the same thing. */
.moderation__section--people {
  border-left: 4px solid var(--danger);
  padding-left: 0.75rem;
}

.moderation__preamble,
.moderation__empty,
.moderation__meta,
.moderation__attachment {
  color: var(--fg-3);
  font-size: 0.9rem;
}

.moderation__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.moderation__item {
  border: 1px solid var(--border-1);
  border-radius: 8px;
  padding: 0.75rem;
  margin-block: 0.5rem;
}

.moderation__headline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  margin: 0;
}

.moderation__type {
  font-weight: 600;
}

.moderation__note {
  margin-block: 0.5rem;
  white-space: pre-wrap;
}

.moderation__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.moderation__failed {
  color: var(--danger);
}

/* The photo, and the things said in its place (#385). */

.moderation__photo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-block: 0.5rem;
}

.moderation__photo .moderation__attachment {
  margin: 0;
}

/* Bounded rather than natural size: a downscaled phone photo is still wider
   than this column, and a queue where each row is a screen tall is a queue
   nobody scrolls to the bottom of. `height: auto` keeps the aspect ratio so a
   portrait shot is not squashed into evidence of something else. */
.moderation__photo-image {
  display: block;
  max-width: 100%;
  max-height: 20rem;
  height: auto;
  margin-block: 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border-1);
}

/* A photo that would not load is not the same as no photo, and this is that
   sentence in colour as well as in words - it sits next to a Confirm button. */
.moderation__refused {
  color: var(--danger);
}