@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
1/**
2 * @provides phabricator-main-menu-view
3 * @requires phui-theme-css
4 */
5
6
7/* - Main Menu -----------------------------------------------------------------
8
9 Main menu at the top of every page that has chrome. It reacts to resolution
10 changes in order to behave reasonably on tablets and phones.
11
12*/
13
14.phabricator-main-menu {
15 position: relative;
16}
17
18.phabricator-main-menu-background {
19 min-height: 44px;
20}
21
22.device-desktop .phabricator-main-menu {
23 height: 44px;
24 padding-right: 4px;
25}
26
27.phabricator-main-menu a:hover {
28 text-decoration: none;
29}
30
31
32/* - Logo ----------------------------------------------------------------------
33
34 The "Phabricator" logo group in the main menu. On tablet and phone devices,
35 this shows a "reveal" button to expand/collapse the rest of the menu.
36
37*/
38
39.phabricator-main-menu-brand {
40 height: 44px;
41 float: left;
42 margin-right: 6px;
43 padding-left: 6px;
44}
45
46.phabricator-main-menu-project-logo {
47 margin: 2px 0;
48 width: 40px;
49 height: 40px;
50 float: left;
51 display: block;
52 background-image: url(/rsrc/image/logo/project-logo.png);
53 background-size: 40px 40px;
54}
55
56.device-desktop .phabricator-main-menu-brand:hover {
57 background-color: rgba({$alphagrey},.2);
58 cursor: pointer;
59}
60
61.device-phone .phabricator-wordmark {
62 display: none;
63}
64
65.phabricator-wordmark {
66 float: left;
67 color: #fff;
68 font-size: 18px;
69 line-height: 22px;
70 margin: 11px 4px 11px 6px;
71 padding-right: 8px;
72 max-width: 175px;
73 overflow: hidden;
74 white-space: nowrap;
75}
76
77/* - Expand/Collapse Button ----------------------------------------------------
78
79 On phones, the menu switches to a vertical layout and uses a button to expand
80 or collapse the items.
81
82*/
83
84.phabricator-menu-button-icon {
85 width: 20px;
86 height: 32px;
87 float: left;
88 margin: 10px 8px 0 8px;
89}
90
91.phabricator-menu-button-icon.phui-icon-view {
92 font-size: 20px;
93 height: 20px;
94 width: 20px;
95 color: {$hoverwhite};
96 text-align: center;
97 vertical-align: middle;
98 line-height: 24px;
99}
100
101.phabricator-expand-application-menu {
102 float: right;
103}
104
105.device-desktop .phabricator-main-menu-search-button {
106 display: none;
107}
108
109
110/* - Search --------------------------------------------------------------------
111
112 The main search input in the menu bar.
113
114*/
115
116.device-desktop .phabricator-main-menu-search {
117 width: 298px;
118}
119
120.device .phabricator-main-menu-search {
121 height: 40px;
122}
123
124.phabricator-main-menu-search-container {
125 padding: 8px 0;
126 position: relative;
127 height: 24px;
128 margin: 0 8px 0 0;
129}
130
131.phabricator-main-menu-search-target {
132 position: absolute;
133 top: 42px;
134}
135
136.device-desktop .phabricator-main-menu-search-target {
137 width: 360px;
138}
139
140.device .phabricator-main-menu-search-target {
141 width: 100%;
142 margin-left: -25px;
143}
144
145.device .phabricator-main-menu-search-container {
146 padding: 4px 0;
147 margin: 0 4px;
148}
149
150.phabricator-main-menu .phabricator-main-menu-search input {
151 outline: 0;
152 margin: 0;
153 box-shadow: none;
154 transition: none;
155
156 color: {$bluetext};
157 right: 0;
158 position: absolute;
159 font-size: {$normalfontsize};
160 border: none;
161 background-color: {$page.content};
162 height: 28px;
163 padding: 3px 28px 3px 48px;
164 float: left;
165 width: 280px;
166}
167
168.device .phabricator-main-menu-search input {
169 height: 32px;
170 font-size: {$biggestfontsize};
171 width: 100%;
172 padding-left: 50px;
173 border: 1px solid {$lightblueborder};
174}
175
176.phabricator-main-menu .phabricator-main-menu-search input:focus {
177 background: {$page.content};
178 opacity: 1;
179 color: {$darkbluetext};
180 box-shadow: none;
181}
182
183.phabricator-main-menu-search input.jx-typeahead-placeholder {
184 color: {$bluetext};
185}
186
187.phabricator-main-menu-search button {
188 color: {$bluetext};
189 position: absolute;
190 background: transparent;
191 border: none;
192 outline: none;
193 box-shadow: none;
194 text-shadow: none;
195 min-width: 0;
196 height: 24px;
197 width: 28px;
198 top: 9px;
199 right: -6px;
200 margin: 0 8px 0 0;
201 padding: 0;
202 border-radius: 0;
203}
204
205.phabricator-main-menu-search button.phabricator-main-menu-search-dropdown {
206 position: absolute;
207 right: auto;
208 left: 12px;
209 width: 40px;
210 background: {$greybackground};
211 z-index: 1;
212}
213
214.device-desktop .phabricator-main-menu-search
215 button.phabricator-main-menu-search-dropdown {
216 height: 24px;
217 top: 10px;
218 border-radius: 3px;
219 }
220
221.device-desktop .phabricator-main-menu-search
222 button.phabricator-main-menu-search-dropdown:hover .phui-icon-view {
223 color: {$sky};
224}
225
226.device .phabricator-main-menu-search
227 button.phabricator-main-menu-search-dropdown {
228 left: 2px;
229 background: {$greybackground};
230}
231
232button.phabricator-main-menu-search-dropdown .caret:before,
233a.phabricator-core-user-menu .caret:before {
234 content: "\f107";
235 font-family: FontAwesome;
236}
237
238.phabricator-main-menu-search button.phabricator-main-menu-search-dropdown
239 .phui-icon-view {
240 color: {$bluetext};
241 font-size: 15px;
242 top: 4px;
243 left: 8px;
244 position: absolute;
245}
246
247.phabricator-main-menu-search-dropdown .caret {
248 position: absolute;
249 right: 20px;
250 top: 2px;
251 border: none;
252 margin-top: 1px;
253}
254
255.phabricator-main-menu-search button:hover {
256 color: {$sky};
257}
258
259.device .phabricator-main-menu-search button {
260 top: 6px;
261 border-radius: 0;
262 height: 28px;
263 right: -6px;
264}
265
266.phabricator-main-menu-search-target div.jx-typeahead-results {
267 background: {$page.content};
268 word-wrap: break-word;
269 overflow-y: auto;
270 box-shadow: {$dropshadow};
271 border: 1px solid {$lightgreyborder};
272 border-radius: 3px;
273 margin-left: -64px;
274}
275
276.device .phabricator-main-menu-search-target div.jx-typeahead-results {
277 margin-left: 28px;
278}
279
280.phabricator-main-search-typeahead-result .phabricator-search-icon {
281 width: 28px;
282 height: 28px;
283 position: absolute;
284 top: 8px;
285 left: 8px;
286 font-size: 24px;
287 text-align: center;
288 vertical-align: bottom;
289}
290
291.phabricator-main-search-typeahead-result {
292 display: block;
293 padding: 6px 8px 8px 44px;
294 background-position: 8px;
295 background-size: 30px 30px;
296 background-repeat: no-repeat;
297 position: relative;
298 overflow: hidden;
299 text-overflow: ellipsis;
300}
301
302.phabricator-main-search-typeahead-result .result-name {
303 display: block;
304 font-size: {$normalfontsize};
305 font-weight: bold;
306 color: {$darkgreytext};
307 white-space: normal;
308}
309
310.phabricator-main-search-typeahead-result.result-closed {
311 opacity: .8;
312 -webkit-filter: grayscale(100%);
313 filter: grayscale(100%);
314}
315
316.phabricator-main-search-typeahead-result.result-closed
317 .result-name {
318 text-decoration: line-through;
319 color: {$lightgreytext};
320}
321
322.phabricator-main-search-typeahead-result.has-image {
323 padding-left: 48px;
324}
325
326.phabricator-main-search-typeahead-result .result-type {
327 color: {$lightgreytext};
328 font-size: {$smallestfontsize};
329 font-weight: normal;
330}
331
332.phabricator-main-search-typeahead-result .result-type .phui-font-fa {
333 color: {$lightgreytext};
334}
335
336.device-phone .phabricator-main-search-typeahead-result .result-name {
337 font-size: {$biggestfontsize};
338}
339
340.device-phone .phabricator-main-search-typeahead-result .result-type {
341 font-size: {$normalfontsize};
342}
343
344
345/* - Alert ---------------------------------------------------------------------
346
347 Alert menus are like icon menus but don't obey collapse rules.
348
349*/
350
351.phabricator-main-menu-alerts {
352 display: inline-block;
353 float: left;
354 padding: 4px 0;
355}
356
357.alert-notifications {
358 float: left;
359}
360
361.alert-notifications .phui-icon-view {
362 color: {$hoverwhite};
363}
364
365.device-desktop .alert-notifications:hover {
366 margin-top: -2px;
367 transition-duration: .2s;
368
369 /* See T13508. Avoid animation flickering behavior if the user's cursor is
370 at the very bottom of the element. */
371 padding-bottom: 2px;
372}
373
374.device-desktop .alert-notifications:hover .phui-icon-view {
375 color: #fff;
376}
377
378.phabricator-main-menu-alert-icon,
379.phabricator-main-menu-message-icon,
380.phabricator-main-menu-setup-icon {
381 width: 18px;
382 height: 18px;
383 float: left;
384 padding: 8px 6px 8px 4px;
385 color: #fff;
386 font-size: 18px;
387 line-height: 20px;
388 text-align: right;
389}
390
391.phui-icon-view.menu-icon-selected {
392 color: #fff;
393}
394
395.phabricator-main-menu-alert-icon {
396 font-size: 16px;
397 margin-top: 2px;
398}
399
400.setup-unread .phui-icon-view.phabricator-main-menu-setup-icon {
401 color: #ecf36c;
402 font-size: 16px;
403 margin-top: 2px;
404 width: 15px;
405}
406
407.setup-unread .phabricator-main-menu-setup-count {
408 color: #ecf36c;
409 margin-top: 10px;
410}
411
412.device-desktop .alert-notifications.setup-unread:hover .phui-icon-view {
413 color: #ecf36c;
414}
415
416.phabricator-main-menu-alert-count,
417.phabricator-main-menu-message-count,
418.phabricator-main-menu-setup-count {
419 color: #fff;
420 text-align: center;
421 display: none;
422 float: left;
423 margin: 11px 6px 0 -2px;
424 font-size: {$smallerfontsize};
425}
426
427.device-phone .alert-unread .phabricator-main-menu-alert-count,
428.device-phone .message-unread .phabricator-main-menu-message-count,
429.device-phone .setup-unread .phabricator-main-menu-setup-count {
430 display: none;
431}
432
433.alert-unread .phabricator-main-menu-alert-icon,
434.message-unread .phabricator-main-menu-message-icon,
435.setup-unread .phabricator-main-menu-setup-icon {
436 color: #fff;
437}
438
439.alert-unread .phabricator-main-menu-alert-count,
440.message-unread .phabricator-main-menu-message-count,
441.setup-unread .phabricator-main-menu-setup-count {
442 display: block;
443}
444
445
446/* - Core Menu -----------------------------------------------------------------
447
448 Styles unique to the core menu (left button on mobile).
449
450*/
451
452.device .phabricator-search-menu {
453 display: none;
454}
455
456.device-desktop .phabricator-search-menu {
457 float: right;
458}
459
460.device .phabricator-search-menu-expanded .phabricator-search-menu {
461 display: block;
462 position: absolute;
463 top: 38px;
464 left: 8px;
465 right: 8px;
466 border: 1px solid {$lightblueborder};
467 border-radius: 3px;
468 box-shadow: {$dropshadow};
469 background: {$page.background};
470}
471
472.device-desktop .phabricator-application-menu {
473 float: right;
474}
475
476.device-desktop .phabricator-application-menu .phui-list-item-view,
477.device-desktop .phabricator-application-menu .phui-list-item-name {
478 display: none;
479}
480
481.phabricator-application-menu .phui-list-item-href {
482 display: block;
483}
484
485.phabricator-application-menu .phui-list-item-icon.phui-font-fa {
486 font-size: 20px;
487 height: 20px;
488 width: 20px;
489 color: {$hoverwhite};
490 margin: 8px;
491 text-align: center;
492 vertical-align: middle;
493}
494
495.device .phabricator-application-menu .phui-list-item-icon.phui-font-fa {
496 margin: 4px 12px 4px 0;
497}
498
499.phabricator-application-menu .phui-list-item-icon.fa-plus {
500 line-height: 22px;
501}
502
503.device-desktop .phabricator-application-menu
504 .core-menu-item.phui-list-item-view:hover
505 .phui-list-item-icon.phui-font-fa {
506 color: #fff;
507 }
508
509.device-desktop .phabricator-application-menu
510 .phui-list-item-view.core-menu-item {
511 display: block;
512}
513
514.device-desktop .phabricator-application-menu .phui-list-item-view {
515 float: left;
516 position: relative;
517 min-width: 36px;
518 height: 36px;
519 margin-top: 4px;
520}
521
522.phabricator-main-menu-dropdown.phui-list-sidenav {
523 position: absolute;
524 background: {$page.content};
525 top: 42px;
526 padding: 6px 0;
527 margin: 0 20px 0 0;
528 box-shadow: {$dropshadow};
529 border: 1px solid {$lightblueborder};
530 border-radius: 3px;
531}
532
533.phabricator-main-menu-dropdown.phui-list-sidenav .phui-list-item-has-icon
534 .phui-list-item-href {
535 padding: 4px 40px 4px 12px;
536 white-space: nowrap;
537}
538
539.phabricator-main-menu-dropdown.phui-list-sidenav .phui-list-item-type-label
540 .phui-list-item-name {
541 padding-left: 12px;
542}
543
544/* - User Menu -----------------------------------------------------------------
545
546 Styles unique to the user profile menu.
547
548*/
549
550.phabricator-core-user-menu {
551 float: right;
552 display: inline-block;
553 padding: 9px 24px 0 8px;
554 height: 35px;
555 position: relative;
556}
557
558.phabricator-core-user-mobile-menu {
559 display: none;
560}
561
562.phabricator-core-user-menu span.phui-icon-view.phuihead-small {
563 height: 24px;
564 width: 24px;
565 background-size: 24px;
566 border-radius: 3px;
567 display: inline-block;
568 margin: 1px 0 0 0;
569}
570
571.phabricator-core-user-menu .phui-icon-view {
572 color: {$hoverwhite};
573 font-size: 18px;
574 margin: 4px 0 0 0;
575}
576
577.phabricator-core-user-menu .caret {
578 position: absolute;
579 right: 17px;
580 top: 13px;
581 border: none;
582 margin: 1px;
583 color: {$hoverwhite};
584}
585
586.phabricator-core-login-button {
587 float: right;
588 display: inline-block;
589 padding: 4px 12px;
590 border-radius: 3px;
591 margin: 8px 6px 4px;
592 border: 1px solid {$hoverwhite};
593 color: {$hoverwhite};
594}
595
596.device-desktop .phabricator-core-login-button:hover {
597 border: 1px solid #fff;
598 color: #fff;
599}
600
601.device-desktop .phabricator-core-user-menu:hover .caret,
602.device-desktop .phabricator-core-user-menu:hover .phui-icon-view {
603 color: #fff;
604}
605
606.device .phabricator-core-user-menu .caret {
607 display: none;
608}
609
610.device .phabricator-core-user-mobile-menu {
611 display: block;
612}
613
614.device .phabricator-core-user-menu {
615 padding: 9px 8px 0 8px;
616}
617
618.device .phabricator-core-user-menu .phui-icon-view {
619 font-size: 20px;
620 margin: 3px 0 0 0;
621}
622
623ul.phabricator-core-user-profile-object .phui-oi-objname {
624 font-size: {$biggestfontsize};
625}
626
627ul.phabricator-core-user-profile-object li.phui-oi,
628ul.phabricator-core-user-profile-object .phui-oi-name,
629ul.phabricator-core-user-profile-object .phui-oi-content,
630ul.phabricator-core-user-profile-object .phui-oi-subhead {
631 padding: 0;
632 margin: 0;
633 background: transparent;
634}
635
636ul.phabricator-core-user-profile-object.phui-oi-list-simple .phui-oi-image {
637 height: 36px;
638 width: 36px;
639}
640
641ul.phabricator-core-user-profile-object.phui-oi-list-simple
642 .phui-oi-content-box {
643 margin-left: 44px;
644}
645
646
647
648/* - Print ---------------------------------------------------------------------
649*/
650
651!print .phabricator-main-menu {
652 display: none;
653}