git ssb

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