git ssb

1
Message {
2
  display: flex
3
  flex-direction: column
4
  background: white
5
  position: relative
6
  font-size: 120%
7
  line-height: 1.4
8
  flex-shrink: 0
9
10
  (highlight) {
11
    background-color: yellow
12
  }
13
14
  :focus {
15
    z-index: 1
16
  }
17
18
  -data {
19
    header {
20
      div.main {
21
        font-size: 80%
22
        a.avatar {
23
          img {
24
            width: 25px
25
          }
26
        }
27
      }
28
    }
29
    (pre) {
30
      overflow: auto
31
      max-height: 200px
32
    }
33
  }
34
35
  -mini {
36
    header {
37
      font-size: 100%
38
      margin-bottom: 15px
39
      div.main {
40
        a.avatar {
41
          img {
42
            width: 40px
43
            height: 40px
44
          }
45
        }
46
      }
47
    }
48
  }
49
50
  -compact {
51
    section {
52
      max-height: 300px
53
    }
54
  }
55
56
  -reply {
57
    header {
58
      font-size: 100%
59
      div.meta {
60
        a.channel {
61
          display: none;
62
        }
63
        span.private {
64
          (img) {
65
            width: 40px
66
            height: 40px
67
          }
68
        }
69
      }
70
      div.main {
71
        a.avatar {
72
          img {
73
            width: 40px
74
            height: 40px
75
          }
76
        }
77
      }
78
    }
79
  }
80
81
  -missing {
82
    header {
83
      div.main {
84
        div.main {
85
          margin-left: 0
86
        }
87
      }
88
    }
89
    section {
90
      font-size: 90%
91
      font-style: italic
92
      color: #777
93
    }
94
  }
95
96
  -new {
97
    box-shadow: 0 0 1px #ffc600;
98
    z-index: 1;
99
  }
100
101
  header {
102
    font-size: 120%
103
    margin: 15px 20px 0
104
    display: flex
105
106
    div.mini {
107
      flex: 1
108
    }
109
110
    div.main {
111
      display: flex
112
      flex: 1
113
114
      a.avatar {
115
        img {
116
          width: 50px
117
          height: 50px
118
        }
119
      }
120
121
      div.main {
122
        div.name {
123
          a {
124
            color: #444
125
            font-weight: bold
126
          }
127
        }
128
        div.meta {
129
          font-size: 90%
130
        }
131
        margin-left: 10px
132
      }
133
    }
134
135
    div.meta {
136
      display: flex;
137
      flex-direction: column-reverse;
138
      align-items: flex-end;
139
      justify-content: flex-end;
140
141
      span.flag {
142
        width: 12px
143
        height: 12px
144
145
        background-repeat: no-repeat
146
        background-position: center
147
        display: inline-block
148
        vertical-align: middle;
149
        margin-top: -3px;
150
151
        -new {
152
          background-image: svg(new)
153
        }
154
155
        @svg new {
156
          width: 12px
157
          height: 12px
158
          content: "<circle cx='6' stroke='none' fill='#ffcf04' cy='6' r='5' />"
159
        }
160
      }
161
162
      em {
163
        display: inline-block
164
        padding: 4px
165
      }
166
167
      a.channel {
168
        font-weight: bold;
169
      }
170
171
      a.likes {
172
        color: #286bc3;
173
        font-size:90%;
174
      }
175
176
      span.private {
177
        display: inline-block;
178
        margin: -3px -3px 3px 4px;
179
        border: 4px solid #525050;
180
        position: relative;
181
182
        a {
183
          display: inline-block
184
185
          img {
186
            margin: 0
187
            vertical-align: bottom
188
            border: none
189
          }
190
        }
191
192
        :after {
193
          content: 'private';
194
          position: absolute;
195
          background: #525050;
196
          bottom: 0;
197
          left: -1px;
198
          font-size: 10px;
199
          padding: 2px 4px 0 2px;
200
          border-top-right-radius: 5px;
201
          color: white;
202
          font-weight: bold;
203
          pointer-events: none;
204
          white-space: nowrap
205
        }
206
      }
207
    }
208
  }
209
210
  section {
211
    margin: 0
212
    padding: 0 20px
213
    max-height: 1500px
214
    overflow: hidden
215
216
    (img) {
217
      max-width: 100%
218
    }
219
220
    -expanded {
221
      max-height: none
222
    }
223
  }
224
225
  a.backlink {
226
    display: block;
227
    border-top: 1px solid #EEE;
228
    padding: 10px 15px;
229
    background: #ffffff;
230
    color: #8f8f8f;
231
    margin-top: -1px;
232
    font-size: 9pt;
233
234
    :hover {
235
      text-decoration: none
236
      color: #777
237
    }
238
  }
239
240
  footer {
241
    margin: 5px 0 20px;
242
    padding: 0 20px
243
244
    div.expander {
245
      text-align: center;
246
      background-color: white;
247
248
      -truncated {
249
        padding-top: 50px;
250
        margin-top: -50px;
251
        -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,1) 50%, rgba(0,0,0,0));
252
        a {
253
          :before { content: '▼ '; font-size: 80% }
254
        }
255
      }
256
    }
257
258
    div.actions {
259
      a {
260
        opacity: 0.4
261
        transition: opacity 0.2s
262
        font-weight: bold
263
        color: #333
264
265
        :hover {
266
          opacity: 1
267
          text-decoration: none;
268
        }
269
      }
270
      a + a {
271
        margin-left: 25px;
272
      }
273
    }
274
  }
275
}
276