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