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