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