git ssb

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