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