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