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