git ssb

1
ProfileEdit {
2
  display: flex
3
  flex-wrap: wrap
4
  justify-content: space-between
5
6
  margin-bottom: 2rem
7
8
  section.lightbox {
9
    position: absolute
10
    z-index: 40
11
  }
12
13
  section.avatar {
14
    margin-right: 1rem
15
16
    section img {
17
      width: 256px
18
      height: 256px
19
    }
20
21
    footer {
22
      font-size: 1.2rem
23
    }
24
  }
25
26
  section.description {
27
    flex-basis: 40%
28
    flex-grow: 1
29
30
    margin-top: 1rem
31
  }
32
33
  section.aliases {
34
    flex-basis: 100%
35
36
    margin-top: 1rem
37
38
    header {
39
      margin-bottom: .8rem
40
      border-bottom: 1px gainsboro solid
41
    }
42
43
    section {
44
      display: flex
45
      flex-wrap: wrap
46
      align-content: flex-start
47
48
      margin-bottom: 1rem
49
50
      header {
51
        flex-basis: 100%
52
53
        font-size: .9rem
54
        _textSubtle
55
56
        margin-bottom: .2rem
57
      }
58
59
      input {
60
      }
61
    }
62
63
    section.avatars {
64
      img {
65
        _avatar-large
66
        margin: 0 .15rem 0.2rem 0
67
68
        cursor: pointer
69
      }
70
71
      div.file-upload {
72
        position: relative
73
74
        input[type="file"] {
75
          _avatar-large
76
          color: transparent
77
78
          ::-webkit-file-upload-button {
79
            visibility: hidden
80
          }
81
82
          ::before {
83
            position: absolute
84
85
            background: #fff
86
            color: #666
87
            border: 1px solid #bbb
88
            border-radius: .2rem
89
            padding: .5rem
90
            cursor: pointer
91
92
            margin: 0
93
            padding: 10% 20%
94
            top: 12%
95
            left: 18%
96
97
            content: '+'
98
            font-size: 1.4rem
99
100
            outline: none
101
            white-space: nowrap
102
            -webkit-user-select: none
103
          }
104
105
          :active, :focus {
106
            outline: none
107
            box-shadow: none
108
          }
109
        }
110
      }
111
    }
112
113
    section.names {
114
      header {
115
      }
116
117
      section {
118
        display: flex
119
        flex-wrap: wrap
120
121
        div {
122
          display: flex
123
          cursor: pointer
124
125
          border: 1px gainsboro solid
126
          margin: 0 .4rem .5rem 0
127
128
          div { padding: .3rem }
129
130
          div.name {
131
            border-right: 1px gainsboro solid
132
          }
133
134
          div.count {
135
            font-size: .9rem
136
            background-color: #eeeeee
137
          }
138
        }
139
140
        input {
141
          border: 1px gainsboro solid
142
          font-size: 1rem
143
          height: 1.7rem
144
        }
145
      }
146
147
    }
148
149
    section.action {
150
      button.cancel {
151
        margin-left: 0
152
      }
153
154
      button.confirm {
155
        color: #fff
156
        _backgroundPrimary
157
        border: none
158
      }
159
    }
160
  }
161
}
162
163
AvatarEditor {
164
  header {
165
    font-weight: 600
166
    margin-bottom: .5rem
167
  }
168
169
  section.actions {
170
    display: flex
171
    justify-content: flex-end
172
173
    button.cancel {
174
175
    }
176
177
    button.okay {
178
      margin-right: 0
179
180
    }
181
  }
182
}
183
184