Page Menu
Home
GnuPG
Search
Configure Global Search
Log In
Files
F35860101
main-menu-view.css
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Size
10 KB
Subscribers
None
main-menu-view.css
View Options
/**
* @provides phabricator-main-menu-view
*/
/* - Main Menu -----------------------------------------------------------------
Main menu at the top of every page that has chrome. It reacts to resolution
changes in order to behave reasonably on tablets and phones.
*/
.
phabricator-main-menu
{
background
:
#2d3236
;
background-repeat
:
repeat-x
;
position
:
relative
;
min-height
:
44
px
;
}
.
device-desktop
.
phabricator-main-menu
{
height
:
44
px
;
padding-right
:
4
px
;
}
.
phabricator-main-menu
a
:
hover
{
text-decoration
:
none
;
}
/* - Logo ----------------------------------------------------------------------
The "Phabricator" logo group in the main menu. On tablet and phone devices,
this shows a "reveal" button to expand/collapse the rest of the menu.
*/
.
device-desktop
.
phabricator-main-menu-group-logo
{
float
:
left
;
}
.
phabricator-main-menu-brand
{
display
:
inline-block
;
width
:
148
px
;
height
:
44
px
;
float
:
left
;
margin-right
:
4
px
;
padding-left
:
6
px
;
}
.
phabricator-main-menu-logo
{
position
:
absolute
;
width
:
96
px
;
height
:
26
px
;
left
:
52
px
;
top
:
9
px
;
}
.
phabricator-main-menu-eye
{
position
:
absolute
;
width
:
40
px
;
height
:
40
px
;
top
:
2
px
;
}
.
device-desktop
.
phabricator-main-menu-brand
:
hover
{
background-color
:
rgba
(
0
,
0
,
0
,
.6
);
cursor
:
hand
;
}
/* - Expand/Collapse Button ----------------------------------------------------
On phones, the menu switches to a vertical layout and uses a button to expand
or collapse the items.
*/
.
phabricator-menu-button-icon
{
width
:
20
px
;
height
:
32
px
;
float
:
left
;
margin
:
10
px
8
px
0
8
px
;
}
.
phabricator-menu-button-icon
.
phui-icon-view
{
font-size
:
24
px
;
}
.
phabricator-expand-application-menu
,
.
phabricator-expand-search-menu
{
float
:
right
;
}
.
device-desktop
.
phabricator-main-menu-search-button
,
.
device-desktop
.
phabricator-main-menu-expand-button
{
display
:
none
;
}
/* - Search --------------------------------------------------------------------
The main search input in the menu bar.
*/
.
device-desktop
.
phabricator-main-menu-search
{
width
:
220
px
;
}
.
device
.
phabricator-main-menu-search
{
height
:
40
px
;
}
.
phabricator-main-menu-search-container
{
padding
:
9
px
0
10
px
0
;
position
:
relative
;
height
:
24
px
;
margin
:
0
8
px
;
}
.
phabricator-main-menu-search-target
{
position
:
absolute
;
top
:
46
px
;
}
.
device-desktop
.
phabricator-main-menu-search-target
{
width
:
320
px
;
margin-left
:
-150
px
;
}
.
device
.
phabricator-main-menu-search-target
{
width
:
100
%
;
margin-left
:
-25
px
;
}
.
device
.
phabricator-main-menu-search-container
{
padding
:
4
px
0
;
}
.
phabricator-main-menu
.
phabricator-main-menu-search
input
{
outline
:
0
;
margin
:
0
;
box-shadow
:
none
;
transition
:
none
;
color
:
{$
lightgreytext
}
;
width
:
100
%;
right
:
0
;
position
:
absolute
;
font-size
:
13px
;
border
:
1px
solid
#
333
;
border-radius
:
12px
;
background-color
:
#
222
;
opacity
:
.
8
;
height
:
26px
;
line-height
:
12px
;
box-shadow
:
0px
1px
1px
rgba
(
128
,
128
,
128
,
0
.
25
);
padding
:
6px
32px
6px
10px
;
}
.
phabricator-main-menu
.
main-header-dark
.
phabricator-main-menu-search
input
{
background-color
:
#555
;
}
.
device
.
phabricator-main-menu-search
input
{
height
:
30
px
;
font-size
:
15
px
;
border-radius
:
15
px
;
}
.
phabricator-main-menu
.
phabricator-main-menu-search
input
:
focus
{
background
:
#fff
;
opacity
:
1
;
color
:
#333
;
border-color
:
#e7e7e7
;
box-shadow
:
none
;
}
.
phabricator-main-menu-search
input
.
jx-typeahead-placeholder
{
color
:
#fff
;
}
.
phabricator-main-menu-search
button
{
position
:
absolute
;
color
:
transparent
;
background
:
transparent
5
px
6
px
url
(
/rsrc/image/search-white.png
)
no-repeat
;
border
:
none
;
outline
:
none
;
box-shadow
:
none
;
text-shadow
:
none
;
min-width
:
0
;
height
:
20
px
;
width
:
20
px
;
top
:
10
px
;
right
:
6
px
;
}
.
device
.
phabricator-main-menu-search
button
{
top
:
7
px
;
}
.
phabricator-main-menu-search-target
div
.
jx-typeahead-results
{
background
:
#ffffff
;
word-wrap
:
break-word
;
overflow-y
:
auto
;
box-shadow
:
0
3
px
8
px
rgba
(
0
,
0
,
0
,
0.35
);
border
:
{$
blueborder
}
;
border-radius
:
3px
;
margin-left
:
40px
;
}
.
device
.
phabricator-main-menu-search-target
div
.
jx-typeahead-results
{
margin-left
:
30
px
;
}
.
phabricator-main-search-typeahead-result
.
phabricator-search-icon
{
display
:
inline-block
;
width
:
28
px
;
height
:
28
px
;
position
:
absolute
;
top
:
9
px
;
left
:
9
px
;
}
.
phabricator-main-search-typeahead-result
{
display
:
block
;
padding
:
6
px
8
px
8
px
44
px
;
background-position
:
8
px
;
background-size
:
30
px
30
px
;
background-repeat
:
no-repeat
;
position
:
relative
;
}
.
phabricator-main-search-typeahead-result
.
result-name
{
display
:
block
;
font-size
:
13
px
;
font-weight
:
bold
;
color
:
{$
darkgreytext
}
;
}
.
phabricator-main-search-typeahead-result
.
result-type
{
color
:
{$
lightgreytext
}
;
font-size
:
11px
;
font-weight
:
normal
;
}
.
device
.
phabricator-application-menu-expanded
.
phabricator-search-menu-expanded
.
phabricator-search-menu
{
padding
:
0
;
}
.
device-phone
.
phabricator-main-search-typeahead-result
.
result-name
{
font-size
:
15
px
;
}
.
device-phone
.
phabricator-main-search-typeahead-result
.
result-type
{
font-size
:
13
px
;
}
.
device
.
phabricator-dark-menu
.
phui-list-item-type-link
.
phabricator-main-search-typeahead-result
{
line-height
:
18
px
;
}
/* - Alert ---------------------------------------------------------------------
Alert menus are like icon menus but don't obey collapse rules.
*/
.
phabricator-main-menu-alerts
{
display
:
inline-block
;
float
:
left
;
padding
:
4
px
0
;
}
.
alert-notifications
{
float
:
left
;
}
.
alert-notifications
:
hover
.
phui-icon-view
{
color
:
#fff
;
}
.
alert-unread
:
hover
.
phabricator-main-menu-alert-icon
.
phui-icon-view
,
.
message-unread
:
hover
.
phabricator-main-menu-message-icon
.
phui-icon-view
{
color
:
{$
sky
}
;
}
.
phabricator-main-menu-alert-icon
,
.
phabricator-main-menu-message-icon
{
width
:
18
px
;
height
:
18
px
;
float
:
left
;
padding
:
8
px
6
px
8
px
4
px
;
color
:
white
;
font-size
:
18
px
;
line-height
:
20
px
;
text-align
:
right
;
}
.
phabricator-main-menu-alert-icon
{
font-size
:
16
px
;
margin-top
:
2
px
;
}
.
phabricator-main-menu-alert-count
,
.
phabricator-main-menu-message-count
{
color
:
#fff
;
text-align
:
center
;
display
:
none
;
float
:
left
;
margin
:
11
px
6
px
0
-2
px
;
font-size
:
12
px
;
}
.
device-phone
.
alert-unread
.
phabricator-main-menu-alert-count
,
.
device-phone
.
message-unread
.
phabricator-main-menu-message-count
{
display
:
none
;
}
.
alert-unread
.
phabricator-main-menu-alert-icon
,
.
message-unread
.
phabricator-main-menu-message-icon
{
color
:
{$
sky
}
;
}
.
alert-unread
.
phabricator-main-menu-alert-count
,
.
message-unread
.
phabricator-main-menu-message-count
{
display
:
block
;
}
/* - Dark Menu -----------------------------------------------------------------
Styles shared between the "core" menu (left button on mobile) and
"application" menu (right button on mobile). These styles give the menu a
white-on-black appearance.
*/
.
device
.
phabricator-dark-menu
,
.
device
.
phabricator-dark-menu
a
.
phui-list-item-href
{
color
:
#fff
;
-webkit-
font-smoothing
:
antialiased
;
}
.
device
.
phabricator-dark-menu
.
phui-list-item-type-label
{
text-transform
:
uppercase
;
font-size
:
13
px
;
background-color
:
#151719
;
padding
:
6
px
0
6
px
20
px
;
display
:
block
;
font-weight
:
bold
;
}
.
device
.
phabricator-dark-menu
.
phui-list-item-href
{
border-width
:
1
px
0
;
border-style
:
solid
;
border-color
:
#34373b
transparent
#282c2d
;
background-color
:
#272c2f
;
padding
:
4
px
0
4
px
20
px
;
display
:
block
;
}
/* - Core Menu -----------------------------------------------------------------
Styles unique to the core menu (left button on mobile).
*/
.
phabricator-core-menu-profile-image
{
background-size
:
28
px
28
px
;
}
.
device
.
phabricator-search-menu
{
display
:
none
;
}
.
device-desktop
.
phabricator-search-menu
{
float
:
right
;
}
.
device
.
phabricator-search-menu-expanded
.
phabricator-search-menu
{
display
:
block
;
padding-top
:
44
px
;
}
.
device
.
phabricator-dark-menu
.
phui-list-item-type-link
{
font-size
:
15
px
;
min-height
:
30
px
;
line-height
:
28
px
;
background
:
#000
;
}
.
device
.
phui-list-item-type-link
.
phabricator-core-menu-icon
+
.
phui-list-item-name
{
margin-left
:
32
px
;
}
.
device-desktop
.
phabricator-application-menu
{
float
:
right
;
}
.
device-desktop
.
phabricator-application-menu
.
phui-list-item-view
,
.
device-desktop
.
phabricator-application-menu
.
phui-list-item-name
{
display
:
none
;
}
.
phabricator-application-menu
.
phui-list-item-href
{
display
:
block
;
}
.
phabricator-application-menu
.
phui-list-item-icon
.
phui-font-fa
{
font-size
:
20
px
;
height
:
20
px
;
width
:
20
px
;
color
:
#d7d7d7
;
margin
:
8
px
;
text-align
:
center
;
vertical-align
:
middle
;
}
.
device
.
phabricator-application-menu
.
phui-list-item-icon
.
phui-font-fa
{
margin
:
4
px
12
px
4
px
0
;
}
.
phabricator-application-menu
.
phui-list-item-icon
.
fa-plus
{
line-height
:
22
px
;
}
.
device-desktop
.
phabricator-application-menu
.
core-menu-item
.
phui-list-item-view
:
hover
.
phui-list-item-icon
.
phui-font-fa
{
color
:
#fff
;
}
.
device-desktop
.
phabricator-application-menu
.
phui-list-item-view
.
core-menu-item
{
display
:
block
;
}
.
device-desktop
.
main-header-dark
.
phabricator-application-menu
.
core-menu-item
.
phui-list-item-view
:
hover
{
background-color
:
rgba
(
0
,
0
,
0
,
.6
);
}
.
device-desktop
.
phabricator-application-menu
.
core-menu-item
.
phui-list-item-view
:
hover
{
box-shadow
:
inset
0
5
px
10
px
rgba
(
0
,
0
,
0
,
0.5
);
border-radius
:
3
px
;
color
:
#fff
;
}
.
device-desktop
.
phabricator-application-menu
.
phui-list-item-view
{
float
:
left
;
position
:
relative
;
min-width
:
36
px
;
height
:
36
px
;
margin-top
:
4
px
;
}
.
device-desktop
.
phabricator-core-menu-icon
{
top
:
5
px
;
left
:
4
px
;
}
.
device
.
phabricator-core-menu-icon
{
left
:
16
px
;
height
:
24
px
;
width
:
24
px
;
background-size
:
24
px
;
margin
:
2
px
;
}
.
phabricator-core-menu-icon
{
position
:
absolute
;
display
:
block
;
width
:
28
px
;
height
:
28
px
;
}
.
phabricator-main-menu-dropdown
{
position
:
absolute
;
background
:
#fff
;
top
:
38
px
;
padding
:
2
px
;
box-shadow
:
0
3
px
8
px
rgba
(
0
,
0
,
0
,
0.35
);
border
:
{$
blueborder
}
;
border-radius
:
3px
;
}
/* - Application Menu ----------------------------------------------------------
Styles unique to the application menu (right button on mobile).
*/
.
device
.
phabricator-application-menu-expanded
.
phabricator-application-menu
{
display
:
block
;
padding-top
:
44
px
;
}
.
device
.
phabricator-application-menu
,
.
device-desktop
.
phabricator-dark-menu
.
phui-list-item-type-label
{
display
:
none
;
}
/* - Print ---------------------------------------------------------------------
*/
!
print
.
phabricator-main-menu
{
display
:
none
;
}
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Sun, Feb 15, 3:45 PM (11 h, 46 m)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
ab/cd/7c7723d99f6ed3c60345251f86ae
Attached To
rPHAB Phabricator
Event Timeline
Log In to Comment