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
  -win32 {
13
    div.top {
14
      padding-right: 70px
15
    }
16
  }
17
18
  div.top {
19
    display: flex;
20
    background: #fff;
21
    padding: 10px;
22
    border-bottom: 2px solid #e4edff;
23
    box-shadow: 0 0 3px #7f7f7f;
24
    position: relative;
25
    z-index: 2;
26
27
    span {
28
29
      input.search {
30
        padding: 2px 4px;
31
        border: 01px solid #c7c6c6;
32
        border-radius: 4px;
33
        background: #ffffff;
34
        color: #656565;
35
        font-size: 120%;
36
        margin-top: -3px;
37
        width: 180px;
38
      }
39
40
      a {
41
        padding: 2px 8px;
42
        border: 2px solid #c7c6c6;
43
        border-radius: 4px;
44
        background: #dedede;
45
        color: #656565;
46
        font-size: 120%;
47
        cursor: pointer;
48
        margin-left: 5px;
49
        text-decoration: none !important
50
51
        :hover {
52
          color: black
53
          border-color: #888
54
        }
55
56
        -selected {
57
          border-color: #444
58
          background: #CCC
59
          color: black
60
        }
61
62
        -add {
63
          border-color: #498849
64
          background-color: #255D24
65
          text-shadow: 1px 1px 1px #000
66
          color: white
67
68
          :active {
69
            background-color: #1F331F !important
70
          }
71
72
          :hover {
73
            background-color: #356D34
74
            border-color: #4CB54C
75
          }
76
        }
77
      }
78
    }
79
80
    span.history {
81
      a {
82
        opacity: 0.3
83
84
        -active {
85
          opacity: 1
86
        }
87
      }
88
89
      a + a {
90
        margin-left: 0
91
      }
92
    }
93
94
    span.appTitle {
95
      flex: 1;
96
      text-align: center;
97
      font-size: 130%;
98
      color: #757575;
99
      letter-spacing: 0.1em;
100
      font-weight: bold;
101
      font-weight: normal;
102
      -webkit-app-region: drag;
103
    }
104
  }
105
106
  div.info {
107
    a.message {
108
      display: block
109
      padding: 10px
110
      background: #314427
111
      transition: color 0.2s, background-color 0.2s
112
113
      :hover {
114
        text-decoration: none
115
        color: white
116
        background: #315427
117
      }
118
    }
119
    box-shadow: 0 0 3px black
120
    overflow: hidden
121
    animation: 0.5s slide-in
122
    position: relative
123
  }
124
125
  div.main {
126
    flex: 1
127
    display: flex
128
129
    div.view {
130
131
      [hidden] {
132
        display: none
133
      }
134
135
      display: flex
136
      flex-direction: column
137
      flex: 1
138
139
      a.loader {
140
        padding: 10px;
141
        display: block;
142
        background: rgb(214, 228, 236);
143
        border: 1px solid rgb(187, 201, 210);
144
        text-align: center;
145
146
        :hover {
147
          background: rgb(220, 242, 255);
148
        }
149
150
        animation: 0.5s slide-in
151
        position: relative
152
      }
153
154
      div {
155
        -webkit-user-select: text
156
      }
157
    }
158
  }
159
160
  div.bottom {
161
    position: relative
162
    box-shadow: 0 0 3px #222
163
    background: #222
164
    align-items: center
165
    display: flex
166
    padding: 5px
167
168
    audio {
169
      color: #EEE
170
171
      ::-webkit-media-controls-panel {
172
        background: transparent
173
      }
174
175
      ::-webkit-media-controls-current-time-display {
176
        color: inherit
177
      }
178
179
      width: 100%
180
    }
181
  }
182
}
183
184
@keyframes slide-in {
185
  0% {
186
    max-height: 0
187
  }
188
  100% {
189
    max-height: 100px
190
  }
191
}
192