git ssb

1
MainWindow {
2
  height: 100%
3
  display: flex
4
  flex-direction: column
5
6
  -darwin {
7
    div.top {
8
      padding-left: 70px
9
      span.appTitle {
10
        span.title {
11
          visibility: visible
12
        }
13
      }
14
    }
15
  }
16
17
  div.top {
18
    display: flex;
19
    align-items: center;
20
    background: #2d2c2c;
21
    padding: 6px;
22
    border-bottom: 2px solid #6f74e5;
23
    position: relative;
24
    z-index: 100
25
26
    span {
27
      input.search {
28
        padding: 4px 8px;
29
        border-radius: 3px;
30
        border: 0 none;
31
        background: rgba(0, 0, 0, 0.2);
32
        color: #ccc;
33
        font-size: 120%;
34
        width: 180px;
35
        box-shadow: inset 0 0 0px 1px rgba(0,0,0,0.1)
36
        :focus {
37
          outline: 0;
38
          background: #383736;
39
        }
40
        ::-webkit-input-placeholder {
41
          color: #757474
42
        }
43
      }
44
    }
45
46
    span.history {
47
      padding-left: 6px
48
      height: 26px;
49
      display: inline-block
50
      a {
51
        cursor: pointer;
52
        text-decoration: none !important
53
        display: inline-block
54
        width: 28px
55
        height: 100%
56
        border-radius: 3px
57
        background: svg(backArrow) no-repeat center
58
        opacity: 0.4
59
        -active {
60
          opacity: 1
61
        }
62
        :hover {
63
          background-color: #383736
64
        }
65
      }
66
67
      a + a {
68
        transform: rotate(180deg)
69
      }
70
71
      @svg backArrow {
72
        width: 14px
73
        height: 14px
74
        content: '<g stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M1.5 7h11M7 13L1 7l6-6"/></g>'
75
76
        path {
77
          stroke: #979797
78
        }
79
80
        -active {
81
          path {
82
            fill: #DDD
83
          }
84
        }
85
      }
86
    }
87
88
    span.nav {
89
      display: inline-block
90
      a {
91
        padding: 4px 10px;
92
        border-radius: 3px;
93
        background: #434141;
94
        color: #aaa;
95
        font-size: 120%;
96
        font-weight: 200;
97
        cursor: pointer;
98
        margin-left: 8px;
99
        text-decoration: none !important
100
101
        :hover {
102
          color: black
103
          background: #aeaeae
104
        }
105
106
        -selected {
107
          background: #aeaeae
108
          color: black
109
          :hover {
110
            background: #aeaeae
111
          }
112
        }
113
114
        -drop {
115
116
          :after {
117
            background-image: svg(dropArrow)
118
            background-repeat: no-repeat;
119
            background-position: center right;
120
            width: 10px;
121
            height: 14px;
122
            display: inline-block;
123
            content: ' ';
124
            margin-left: 6px;
125
            margin-right: -6px;
126
            border-left: 1px solid #6e6d6d;
127
            padding-left: 5px;
128
            margin-bottom: -2px;
129
          }
130
        }
131
132
        -add {
133
          border-color: #498849
134
          background-color: #255D24
135
          text-shadow: 1px 1px 1px #000
136
          color: white
137
138
          :active {
139
            background-color: #1F331F !important
140
          }
141
142
          :hover {
143
            background-color: #356D34
144
            border-color: #4CB54C
145
          }
146
        }
147
      }
148
    }
149
150
    span.appTitle {
151
      flex: 1;
152
      text-align: center;
153
      font-size: 20px;
154
      color: #ccc;
155
      letter-spacing: 1px;
156
      font-weight: 200;
157
      -webkit-app-region: drag;
158
      position: relative
159
160
      span.title {
161
        visibility: hidden
162
      }
163
164
      div.info {
165
        display: block
166
        position: absolute;
167
        top: 0;
168
        bottom: 0;
169
        left: 0;
170
        right: 0;
171
        background: white;
172
        margin-top: -3px;
173
        opacity: 1;
174
        transition: opacity 0.1s;
175
        max-height: 25px;
176
        padding: 0 10px;
177
        font-size: 13px;
178
        letter-spacing: 0;
179
        [hidden] {
180
          opacity: 0
181
        }
182
      }
183
    }
184
  }
185
186
  div.info {
187
    a.message {
188
      display: block;
189
      padding: 10px;
190
      background: #deffde;
191
      transition: color 0.2s, background-color 0.2s;
192
      color: #217720;
193
194
      a.ignore {
195
        float: right
196
        border-radius: 10px
197
        padding: 2px 5px
198
        margin-top: -2px
199
        :hover {
200
          text-decoration: none
201
          background: #c0c0c0
202
          color: white
203
        }
204
      }
205
206
      :hover {
207
        text-decoration: none
208
        background: #c0ffae
209
      }
210
    }
211
212
    div.status {
213
      padding: 5px
214
      background: #7c7c7c
215
      color: white
216
      (svg) {
217
        width: 20px
218
        height: 20px
219
      }
220
    }
221
222
    [hidden] {
223
      display: block
224
      max-height: 0
225
      animation: none
226
    }
227
228
    max-height: 100px
229
    box-shadow: 0 0 3px #616161
230
    overflow: hidden
231
    transition: 0.5s max-height
232
    animation: 0.5s slide-in
233
    position: relative
234
    z-index: 1
235
  }
236
237
  div.main {
238
    flex: 1
239
    position: relative
240
241
    div.view {
242
243
      position: absolute
244
      top: 0
245
      bottom: 0
246
      left: 0
247
      right: 0
248
249
      [hidden] {
250
        visibility: hidden
251
      }
252
253
      display: flex
254
      flex-direction: column
255
256
      div {
257
        -webkit-user-select: text
258
      }
259
    }
260
  }
261
262
  div.bottom {
263
    position: relative
264
    box-shadow: 0 0 3px #222
265
    background: #222
266
    align-items: center
267
    display: flex
268
    padding: 5px
269
270
    audio {
271
      color: #EEE
272
273
      ::-webkit-media-controls-panel {
274
        background: transparent
275
      }
276
277
      ::-webkit-media-controls-current-time-display {
278
        color: inherit
279
      }
280
281
      width: 100%
282
    }
283
  }
284
}
285
286
@keyframes slide-in {
287
  0% {
288
    max-height: 0
289
  }
290
  100% {
291
    max-height: 100px
292
  }
293
}
294
295
@svg dropArrow {
296
  width: 12px
297
  height: 6px
298
  content: "<path d='M2,0 L10,0 L6,6 Z' />"
299
300
  path {
301
    fill: #888
302
  }
303
304
  -active {
305
    path {
306
      fill: #DDD
307
    }
308
  }
309
}
310