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
      margin-bottom: 15px
38
      div.meta {
39
        a.likes {
40
          margin-top: -5px
41
        }
42
        a {
43
          display: inline-block
44
          margin-left: 3px
45
        }
46
      }
47
    }
48
  }
49
50
  -reply {
51
    font-size: 120%
52
    header {
53
      div.meta {
54
        a.channel {
55
          display: none;
56
        }
57
      }
58
      div.main {
59
        a.avatar {
60
          img {
61
            width: 40px
62
            height: 40px
63
          }
64
        }
65
      }
66
    }
67
  }
68
69
  -new {
70
    border-color: #ffe794
71
  }
72
73
  header {
74
    margin: 15px 20px 0
75
    display: flex
76
77
    div.mini {
78
      flex: 1
79
    }
80
81
    div.main {
82
      display: flex
83
      flex: 1
84
85
      a.avatar {
86
        img {
87
          width: 50px
88
          height: 50px
89
        }
90
      }
91
92
      div.main {
93
        div.name {
94
          a {
95
            color: #444
96
            font-weight: bold
97
          }
98
        }
99
        div.meta {
100
          font-size: 90%
101
        }
102
        margin-left: 10px
103
      }
104
    }
105
106
    div.meta {
107
      display: flex;
108
      flex-direction: column-reverse;
109
      align-items: flex-end;
110
      justify-content: flex-end;
111
112
      span.flag {
113
        width: 12px
114
        height: 12px
115
116
        background-repeat: no-repeat
117
        background-position: center
118
        display: inline-block
119
        vertical-align: middle;
120
        margin-top: -3px;
121
122
        -new {
123
          background-image: svg(new)
124
        }
125
126
        @svg new {
127
          width: 12px
128
          height: 12px
129
          content: "<circle cx='6' stroke='none' fill='#ffcf04' cy='6' r='5' />"
130
        }
131
      }
132
133
      em {
134
        display: inline-block
135
        padding: 4px
136
      }
137
138
      a.channel {
139
        font-weight: bold;
140
      }
141
142
      a.likes {
143
        color: #286bc3;
144
        font-size:90%;
145
      }
146
147
      span.private {
148
        display: inline-block;
149
        margin: -3px -3px -3px 4px;
150
        border: 4px solid #525050;
151
        position: relative;
152
153
        a {
154
          display: inline-block
155
156
          img {
157
            margin: 0
158
            vertical-align: bottom
159
            border: none
160
          }
161
        }
162
163
        :after {
164
          content: 'private';
165
          position: absolute;
166
          background: #525050;
167
          bottom: 0;
168
          left: -1px;
169
          font-size: 10px;
170
          padding: 2px 4px 0 2px;
171
          border-top-right-radius: 5px;
172
          color: white;
173
          font-weight: bold;
174
          pointer-events: none;
175
          white-space: nowrap
176
        }
177
      }
178
    }
179
  }
180
181
  section {
182
    margin: 0
183
    padding: 0 20px
184
    (img) {
185
      max-width: 100%
186
    }
187
  }
188
189
  a.backlink {
190
    display: block;
191
    border-top: 1px solid #e2e0e0;
192
    margin: 0 -1px;
193
    padding: 10px 15px;
194
    background: #f3f2f2;
195
    border-bottom: 1px solid #d1d0d0;
196
    color: #8f8f8f;
197
    margin-top: -1px;
198
    font-size: 9pt;
199
200
    :hover {
201
      text-decoration: none
202
      color: #777
203
    }
204
  }
205
206
  footer {
207
    margin: 5px 0 20px;
208
    padding: 0 20px
209
210
    div.actions {
211
      a {
212
        opacity: 0.4
213
        :hover {
214
          opacity: 1
215
          text-decoration: none;
216
        }
217
      }
218
      a + a {
219
        margin-left: 25px;
220
      }
221
    }
222
  }
223
}
224