git ssb

1
Message -default {
2
  padding: 1rem .5rem
3
4
  display: grid
5
  grid-template-columns: 6rem 1fr 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
    grid-column: 2
38
39
    display: grid
40
    align-content: start
41
42
    div.title {
43
      grid-row: 1
44
      font-size: .9rem
45
      $textSubtle
46
      (a) { $textSubtle }
47
    }
48
49
    div.content {
50
      grid-row: 2
51
      (img) {
52
        max-width: 100%
53
      }
54
      (video) {
55
        max-width: 100%
56
      }
57
    }
58
59
    footer.backlinks {
60
      grid-row: 3
61
    }
62
63
    div.raw-content {
64
      grid-row: 4
65
      pre {
66
        border: 1px gainsboro solid
67
        padding: .8rem
68
        background-color: #f5f5f5
69
        color: #c121dc
70
        padding: .3rem
71
        white-space: pre-wrap
72
        word-wrap: break-word
73
74
        span {
75
          font-weight: 600
76
        }
77
        a {
78
          word-break: break-all
79
        }
80
      }
81
    }
82
83
  }
84
85
  section.right {
86
    grid-column: 3
87
88
    display: grid
89
    justify-items: end
90
    align-content: space-between
91
92
    div.meta {
93
      grid-row: 1
94
95
      display: grid
96
      justify-items: end
97
      grid-gap: .5rem
98
99
      i, div, a { }
100
101
      a.channel { grid-row: 1 }
102
    }
103
104
    div.actions {
105
      grid-row: 2
106
      justify-self: end
107
108
      display: grid
109
      grid-auto-flow: column
110
      grid-gap: .8rem
111
112
      font-size: .9rem
113
114
      div.MessageLike { }
115
      i.MessageQuote { margin-top: 3px }
116
      i.MessageReply { margin-top: 1px }
117
    }
118
  }
119
120
  /* UnreadFeature (search codebase for this if extracting) */
121
122
  /* initially read */
123
  -read {
124
  }
125
126
  /* initially unread */
127
  -unread {
128
    section.right {
129
      div.meta {
130
        i.unread {
131
          display: initial
132
          transition: color 1s ease-in
133
          color: hotpink
134
        }
135
      }
136
    }
137
  }
138
139
  /* initially unread, but subsequently marked read */
140
  -unread {
141
    -read {
142
      section.right {
143
        div.meta {
144
          i.unread {
145
            color: #bbb
146
          }
147
        }
148
      }
149
    }
150
  }
151
}
152