git ssb

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