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