git ssb

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