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