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