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