git ssb

1
Message -default {
2
  padding: 1rem 0
3
4
  display: grid
5
  grid-template-columns: 6rem 1fr minmax(6rem, auto)
6
  grid-gap: 1.5rem
7
8
  section.left {
9
    grid-column: 1
10
11
    display: grid
12
    align-content: start
13
    justify-items: end
14
15
    div.avatar {
16
      grid-row: 1
17
      a img { }
18
    }
19
20
    div.author {
21
      grid-row: 2
22
      font-weight: 600
23
      text-align: right
24
      (a) { color: #222 }
25
    }
26
27
    div.timestamp {
28
      grid-row: 3
29
      a {
30
        font-size: .9rem
31
        $textSubtle
32
      }
33
    }
34
  }
35
36
  section.body {
37
    /* padding: .5rem */
38
    background: rgba(255,255,255, .5)
39
40
    grid-column: 2
41
42
    display: grid
43
    align-content: start
44
45
    div.title {
46
      grid-row: 1
47
      font-size: .9rem
48
      $textSubtle
49
      (a) { $textSubtle }
50
    }
51
52
    div.content {
53
      grid-row: 2
54
      (img) {
55
        max-width: 100%
56
      }
57
      (video) {
58
        max-width: 100%
59
      }
60
    }
61
62
    footer.backlinks {
63
      grid-row: 3
64
    }
65
66
    div.raw-content {
67
      grid-row: 4
68
      pre {
69
        border: 1px gainsboro solid
70
        padding: .8rem
71
        background-color: #f5f5f5
72
        color: #c121dc
73
        padding: .3rem
74
        white-space: pre-wrap
75
        word-wrap: break-word
76
77
        span {
78
          font-weight: 600
79
        }
80
        a {
81
          word-break: break-all
82
        }
83
      }
84
    }
85
86
  }
87
88
  section.right {
89
    grid-column: 3
90
91
    display: grid
92
    justify-items: start
93
    align-content: space-between
94
95
    div.meta {
96
      grid-row: 1
97
98
      display: grid
99
      justify-items: start
100
      grid-gap: .5rem
101
102
      i, div, a { }
103
104
      a.channel {
105
        grid-row: 1
106
        color: gray
107
        letter-spacing: 1px
108
      }
109
110
      i.toggle-raw-msg { visibility: hidden }
111
      :hover {
112
        i.toggle-raw-msg { visibility: visible }
113
      }
114
    }
115
116
    div.actions {
117
      grid-row: 2
118
      justify-self: start
119
120
      display: grid
121
      grid-auto-flow: column
122
      grid-gap: .8rem
123
124
      font-size: .9rem
125
126
      div.MessageLike { }
127
      i.MessageQuote { margin-top: 3px }
128
      i.MessageReply { margin-top: 1px }
129
    }
130
  }
131
132
  :focus {
133
    outline: #e794e7 solid 2px
134
135
    /* section.body { background: rgba(255,255,255, 1) } */
136
  }
137
138
  /* UnreadFeature (search codebase for this if extracting) */
139
140
  /* initially read */
141
  -read {
142
  }
143
144
  /* initially unread */
145
  -unread {
146
    section.right {
147
      div.meta {
148
        div.unread {
149
          display: initial
150
          padding: 1px 4px
151
152
          transition: color, border 1s ease-in
153
154
          color: hotpink
155
          border: 1px solid hotpink
156
          border-radius: 2px
157
        }
158
      }
159
    }
160
  }
161
162
  /* initially unread, but subsequently marked read */
163
  -unread {
164
    -read {
165
      section.right {
166
        div.meta {
167
          div.unread {
168
            color: #bbb
169
            border: 1px solid #bbb
170
          }
171
        }
172
      }
173
    }
174
  }
175
}
176