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
  :focus {
12
    z-index: 1
13
  }
14
15
  -data {
16
    header {
17
      div.main {
18
        font-size: 80%
19
        a.avatar {
20
          img {
21
            width: 25px
22
          }
23
        }
24
      }
25
    }
26
    (pre) {
27
      overflow: auto
28
      max-height: 200px
29
    }
30
  }
31
32
  -reply {
33
    font-size: 100%
34
    header {
35
      div.main {
36
        a.avatar {
37
          img {
38
            width: 30px
39
          }
40
        }
41
      }
42
    }
43
  }
44
45
  header {
46
    margin: 15px 15px
47
    display: flex
48
49
    div.mini {
50
      flex: 1
51
    }
52
53
    div.main {
54
      display: flex
55
      flex: 1
56
57
      a.avatar {
58
        img {
59
          width: 50px
60
        }
61
      }
62
63
      div.main {
64
        div.name {
65
          font-size: 120%
66
          a {
67
            color: #444
68
            font-weight: bold
69
          }
70
        }
71
        div.meta {
72
          font-size: 90%
73
        }
74
        margin-left: 10px
75
      }
76
77
      div.meta {
78
79
      }
80
    }
81
82
    div.meta {
83
84
      em {
85
        display: inline-block
86
        padding: 4px
87
      }
88
89
      a.channel {
90
        display: inline-block
91
        padding: 4px
92
      }
93
94
      span.likes {
95
        color: #ffffff;
96
        background: linear-gradient(45deg, #859c88, #87d47d);
97
        padding: 5px 8px;
98
        border-radius: 10px;
99
        display: inline-block;
100
        vertical-align: top;
101
        margin: -2px 0;
102
      }
103
104
      span.private {
105
        display: inline-block;
106
        margin: -3px -3px -3px 4px;
107
        border: 4px solid #525050;
108
        position: relative;
109
110
        a {
111
          display: inline-block
112
113
          img {
114
            margin: 0
115
            vertical-align: bottom
116
            border: none
117
          }
118
        }
119
120
        :after {
121
          content: 'private';
122
          position: absolute;
123
          background: #525050;
124
          bottom: 0;
125
          left: -1px;
126
          font-size: 10px;
127
          padding: 2px 4px 0 2px;
128
          border-top-right-radius: 5px;
129
          color: white;
130
          font-weight: bold;
131
          pointer-events: none;
132
          white-space: nowrap
133
        }
134
      }
135
    }
136
  }
137
138
  section {
139
    margin: 0 15px
140
    (img) {
141
      max-width: 100%
142
    }
143
  }
144
145
  a.backlink {
146
    display: block;
147
    border-top: 1px solid #d1d0d0;
148
    margin: 0 -1px;
149
    padding: 10px 15px;
150
    background: #e8e6e6;
151
    border-bottom: 1px solid #d1d0d0;
152
    color: #8f8f8f;
153
    margin-top: -1px;
154
    font-size: 9pt;
155
156
    :hover {
157
      text-decoration: none
158
      color: #777
159
    }
160
  }
161
162
  footer {
163
    background: #fdfdfd
164
    padding: 15px 15px
165
    text-align: right
166
167
    div.actions {
168
      a {
169
        margin-left: 5px;
170
        color: #5f5f5f;
171
        padding: 3px 6px;
172
        background: white;
173
        border: 2px solid #DDD;
174
        border-radius: 4px;
175
176
        :hover {
177
          background: #cbeeff;
178
          color: #3b7ba2;
179
          text-decoration: none;
180
          border-color: #8eafc1;
181
        }
182
      }
183
    }
184
  }
185
}
186