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