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
101
          ::-webkit-file-upload-button {
102
            visibility: hidden
103
          }
104
105
          ::before {
106
            position: absolute
107
108
            background: #fff
109
            color: #666
110
            border: 1px solid #bbb
111
            border-radius: .2rem
112
            padding: .5rem
113
            cursor: pointer
114
115
            margin: 0
116
            padding: 10% 20%
117
            top: 12%
118
            left: 18%
119
120
            content: '+'
121
            font-size: 1.4rem
122
123
            outline: none
124
            white-space: nowrap
125
            -webkit-user-select: none
126
          }
127
128
          :active, :focus {
129
            outline: none
130
            box-shadow: none
131
          }
132
        }
133
      }
134
    }
135
136
    section.names {
137
      header {
138
      }
139
140
      section {
141
        display: flex
142
        flex-wrap: wrap
143
144
        div {
145
          display: flex
146
          cursor: pointer
147
148
          border: 1px gainsboro solid
149
          margin: 0 .4rem .5rem 0
150
151
          div { padding: .3rem }
152
153
          div.name {
154
            border-right: 1px gainsboro solid
155
          }
156
157
          div.count {
158
            font-size: .9rem
159
            background-color: #eeeeee
160
          }
161
        }
162
163
        input {
164
          border: 1px gainsboro solid
165
          font-size: 1rem
166
          height: 1.7rem
167
        }
168
      }
169
170
    }
171
172
    section.action {
173
      button.cancel {
174
        margin-left: 0
175
      }
176
177
      button.confirm {
178
        color: #fff
179
        $backgroundPrimary
180
        border: none
181
      }
182
    }
183
  }
184
}
185
186
PatchProfileCrop {
187
  background: #f5f5f5
188
189
  z-index: 99
190
  position: absolute
191
  top: 0
192
  left: 0
193
  right: 0
194
195
196
  overflow: auto
197
  max-width: 100%
198
  padding: 1rem
199
  border: 1px solid #eee
200
  border-radius: .2em
201
202
  display: flex
203
  flex-direction: column
204
205
  header {
206
    font-weight: 600
207
    margin-bottom: .5rem
208
  }
209
210
  canvas { 
211
    margin: 0 auto 1rem auto
212
    max-height: 80vh
213
    max-width: 100%
214
  }
215
216
  section.actions {
217
    display: flex
218
    justify-content: space-between
219
  }
220
}
221
222