git ssb

1
AboutEditor {
2
  position: relative
3
4
  margin-bottom: 2rem
5
6
  display: flex
7
  flex-wrap: wrap
8
  justify-content: space-between
9
10
  div.lightbox {
11
    div.lightbox__content {
12
      div.cropper {
13
        div.PatchProfileCrop {}
14
        div.background {
15
          position: fixed
16
          z-index: 98
17
          top: 0
18
          left: 0
19
20
          width: 100%
21
          height: 100%
22
          background-color: rgba(0, 0, 0, 0.5)
23
        }
24
      }
25
    }
26
  }
27
28
  section.avatar {
29
    margin-right: 1rem
30
31
    section img {
32
      width: 320px
33
      height: 320px
34
    }
35
36
    footer {
37
      font-size: 1.8rem
38
      margin: .4rem 0
39
    }
40
  }
41
42
  section.description {
43
    flex-basis: 40%
44
    flex-grow: 1
45
46
    margin-top: 1rem
47
  }
48
49
  section.credit {
50
    flex-basis: 40%
51
    flex-grow: 1
52
53
    margin-top: 1rem
54
  }
55
56
  section.aliases {
57
    flex-basis: 100%
58
59
    margin-top: 1rem
60
61
    header {
62
      margin-bottom: .8rem
63
      border-bottom: 1px gainsboro solid
64
    }
65
66
    section {
67
      display: flex
68
      flex-wrap: wrap
69
      align-content: flex-start
70
71
      margin-bottom: 1rem
72
73
      header {
74
        flex-basis: 100%
75
76
        font-size: .9rem
77
        $textSubtle
78
79
        margin-bottom: .2rem
80
      }
81
82
      input {
83
      }
84
    }
85
86
    section.avatars {
87
      img {
88
        $avatarLarge
89
        margin: 0 .15rem 0.2rem 0
90
91
        cursor: pointer
92
      }
93
94
      div.file-upload {
95
        position: relative
96
97
        input[type="file"] {
98
          $avatarLarge
99
          color: transparent
100
          border: none
101
102
          ::-webkit-file-upload-button {
103
            visibility: hidden
104
          }
105
106
          ::before {
107
            position: absolute
108
109
            background: #fff
110
            color: #666
111
            border: 1px solid #bbb
112
            border-radius: .2rem
113
            padding: .5rem
114
            cursor: pointer
115
116
            margin: 0
117
            padding: 10% 20%
118
            top: 12%
119
            left: 18%
120
121
            content: '+'
122
            font-size: 1.4rem
123
124
            outline: none
125
            white-space: nowrap
126
            -webkit-user-select: none
127
          }
128
129
          :active, :focus {
130
            outline: none
131
            box-shadow: none
132
          }
133
        }
134
      }
135
    }
136
137
    section.names {
138
      header {
139
      }
140
141
      section {
142
        display: flex
143
        flex-wrap: wrap
144
145
        div {
146
          display: flex
147
          cursor: pointer
148
149
          border: 1px gainsboro solid
150
          margin: 0 .4rem .5rem 0
151
152
          div { padding: .3rem }
153
154
          div.name {
155
            border-right: 1px gainsboro solid
156
          }
157
158
          div.count {
159
            font-size: .9rem
160
            background-color: #eeeeee
161
          }
162
        }
163
164
        input {
165
          border: 1px gainsboro solid
166
          font-size: 1rem
167
          height: 1.7rem
168
        }
169
      }
170
171
    }
172
173
    section.action {
174
      button.cancel {
175
        margin-left: 0
176
      }
177
178
      button.confirm {
179
        $backgroundPrimary
180
      }
181
    }
182
  }
183
}
184
185
PatchProfileCrop {
186
  background: #f5f5f5
187
188
  z-index: 99
189
  position: absolute
190
  top: 0
191
  left: 0
192
  right: 0
193
194
195
  overflow: auto
196
  max-width: 100%
197
  padding: 1rem
198
  border: 1px solid #eee
199
  border-radius: .2em
200
201
  display: flex
202
  flex-direction: column
203
204
  header {
205
    font-weight: 600
206
    margin-bottom: .5rem
207
  }
208
209
  canvas { 
210
    margin: 0 auto 1rem auto
211
    max-height: 80vh
212
    max-width: 100%
213
  }
214
215
  section.actions {
216
    display: flex
217
    justify-content: space-between
218
  }
219
}
220
221