git ssb

1
body {
2
  margin: 0px;
3
}
4
5
.invalid {
6
  background: rgba(255, 250, 250, 0.8)
7
}
8
9
video, img { max-width: 100%; }
10
img.avatar {
11
  width: 50px;
12
  height: 50px;
13
  overflow: hidden; /*broken images, will show alt text*/
14
  background: lightgray;
15
  display: inline-block; /*also make broken images not go over*/
16
}
17
/* avatar, when shown in recipient lists, etc */
18
li img.avatar {
19
  width: 30px;
20
}
21
img.emoji { width: 16px; }
22
23
div.main {
24
  /*padding at the top, to allow space for nav bar */
25
  padding-top: 100px;
26
  max-width: 800px; margin-left: auto; margin-right: auto;
27
}
28
div.Message {
29
  margin: 50px;
30
  display: flex;
31
  flex-direction: row;
32
}
33
div.MessageMeta {
34
  display: flex;
35
  flex-direction: column;
36
  align-items: flex-end;
37
  margin-right: 15px;
38
  width: 75px;
39
}
40
.MessageMeta>.Avatar {
41
  display: flex;
42
  flex-direction: column;
43
  align-items: flex-end;
44
}
45
.msgId {
46
  overflow: hidden;
47
  font-family: monospace;
48
  color: gray;
49
  width: 75px;
50
  word-break: keep-all;
51
}
52
.Recipients {
53
  display: flex; flex-direction: row;
54
}
55
56
#AppHeader {
57
  position: fixed;
58
  height; 50px;
59
  width: 100%;
60
  background: white;
61
}
62
#AppHeader h2 {
63
  margin: 3px;
64
}
65
66
#AppHeader>nav {
67
  display: flex;
68
  flex-direction: row;
69
  justify-content: space-between;
70
  height: 50px;
71
}
72
73
progress {
74
  width: 100%;
75
  height: 3px;
76
  position: fixed;
77
  top: 50px;
78
}
79
80
.IdentitySelector button {
81
  max-width: 100px;
82
  overflow: hidden;
83
  word-break: keep-all;
84
}
85
86
/*
87
  drop down menu, functional aspects
88
*/
89
90
._menu {
91
  margin: 1px;
92
}
93
94
._menu ul {
95
  padding: 0px;
96
  margin: 0px;
97
  position: absolute;
98
  /*left: -9999px;
99
  apparently this is better for screen readers, but I couldn't get it to work nicely*/
100
  display: none;
101
  list-style: none;
102
}
103
._menu li {
104
//  display: block;
105
  position: relative;
106
}
107
108
._menu:hover ul {
109
  /* in chrome, -4px margin-top is needed. I don't understand why */
110
  margin-top: -4px;
111
  display: block;
112
}
113
114
textarea {
115
  width: 100%;
116
  height: 100px;
117
}
118
119
.EmbeddedMessage::before {
120
  content: "";
121
  position: absolute;
122
  background: linear-gradient(180deg, rgba(255,255,255,0) 100px, rgba(255,255,255,1) 200px);
123
  width: 800px;
124
  height: 200px;
125
  pointer-events: none;
126
}
127
128
.EmbeddedMessage {
129
  max-height: 200px;
130
  
131
/*
132
  TODO: fade out the extra content.
133
  also make clickable expand/contract.
134
  That might need javascript.
135
  Could do hover with css though,
136
  but I don't like a UI that jumps around,
137
  better explicit interactions.
138
139
  background: linear-gradient(0deg, rgba(255,255,255,0), green 175px);
140
*/
141
  overflow: hidden;
142
143
}
144
145
146