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