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