git ssb

10+

Matt McKegg / patchwork



Tree: 611893db73609fa2881490d2853965c07461ee17

Files: 611893db73609fa2881490d2853965c07461ee17 / styles / dark / main-window.mcss

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

Built with git-ssb-web