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