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