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