2012-12-07 22:43:11 +01:00
|
|
|
/**
|
2012-07-31 01:09:14 +02:00
|
|
|
* @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 {
|
2012-08-21 01:02:36 +02:00
|
|
|
background: #2d3236;
|
2012-12-07 22:33:03 +01:00
|
|
|
background-repeat: repeat-x;
|
2012-07-31 01:09:14 +02:00
|
|
|
position: relative;
|
|
|
|
|
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
|
2012-12-07 22:33:03 +01:00
|
|
|
min-height: 44px;
|
2012-07-31 01:09:14 +02:00
|
|
|
}
|
|
|
|
|
|
2012-12-07 22:49:39 +01:00
|
|
|
.device-desktop .phabricator-main-menu {
|
|
|
|
|
height: 44px;
|
2014-01-31 18:10:32 +01:00
|
|
|
padding-right: 4px;
|
2012-12-07 22:49:39 +01:00
|
|
|
}
|
|
|
|
|
|
2012-07-31 01:09:14 +02:00
|
|
|
.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.
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
2012-08-01 02:58:21 +02:00
|
|
|
.device-desktop .phabricator-main-menu-group-logo {
|
2012-07-31 01:09:14 +02:00
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-main-menu-logo {
|
|
|
|
|
display: inline-block;
|
2013-07-18 00:53:26 +02:00
|
|
|
width: 149px;
|
2013-01-29 00:43:15 +01:00
|
|
|
height: 44px;
|
|
|
|
|
float: left;
|
2012-12-09 01:58:19 +01:00
|
|
|
margin-right: 6px;
|
|
|
|
|
padding-right: 6px;
|
|
|
|
|
padding-left: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-12-06 21:08:11 +01:00
|
|
|
.menu-logo-image {
|
2012-12-07 23:29:09 +01:00
|
|
|
position: absolute;
|
2013-07-18 00:53:26 +02:00
|
|
|
width: 149px;
|
|
|
|
|
height: 26px;
|
2012-12-07 23:29:09 +01:00
|
|
|
top: 9px;
|
2012-07-31 01:09:14 +02:00
|
|
|
}
|
|
|
|
|
|
2013-03-22 19:50:30 +01:00
|
|
|
.device-phone .phabricator-main-menu-logo {
|
|
|
|
|
margin-left: -45px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device .phabricator-main-menu-logo:hover {
|
|
|
|
|
background-color: transparent;
|
2012-12-07 22:37:10 +01:00
|
|
|
}
|
|
|
|
|
|
2012-07-31 01:09:14 +02:00
|
|
|
/* - Expand/Collapse Button ----------------------------------------------------
|
|
|
|
|
|
|
|
|
|
On phones, the menu switches to a vertical layout and uses a button to expand
|
|
|
|
|
or collapse the items.
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
2012-12-07 22:36:35 +01:00
|
|
|
.phabricator-menu-button-icon {
|
|
|
|
|
width: 24px;
|
2013-03-22 19:50:30 +01:00
|
|
|
height: 24px;
|
|
|
|
|
float: left;
|
|
|
|
|
margin: 10px 10px 0 5px;
|
2012-12-07 22:34:44 +01:00
|
|
|
}
|
|
|
|
|
|
2013-03-22 19:50:30 +01:00
|
|
|
.phabricator-expand-application-menu,
|
|
|
|
|
.phabricator-expand-search-menu {
|
|
|
|
|
float: right;
|
2012-12-07 22:34:44 +01:00
|
|
|
}
|
|
|
|
|
|
2013-03-22 19:50:30 +01:00
|
|
|
.device-desktop .phabricator-main-menu-search-button,
|
2012-07-31 01:09:14 +02:00
|
|
|
.device-desktop .phabricator-main-menu-expand-button {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-07 22:34:44 +01:00
|
|
|
|
2012-07-31 01:09:14 +02:00
|
|
|
/* - Search --------------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
The main search input in the menu bar.
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
.device-desktop .phabricator-main-menu-search {
|
|
|
|
|
width: 220px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-06-09 18:11:32 +02:00
|
|
|
.device .phabricator-main-menu-search {
|
|
|
|
|
height: 40px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-07-31 01:09:14 +02:00
|
|
|
.phabricator-main-menu-search-container {
|
2013-07-18 00:53:26 +02:00
|
|
|
padding: 9px 0 10px 0;
|
2012-07-31 01:09:14 +02:00
|
|
|
position: relative;
|
|
|
|
|
height: 24px;
|
2013-05-16 22:10:06 +02:00
|
|
|
margin: 0 8px;
|
2012-07-31 01:09:14 +02:00
|
|
|
}
|
|
|
|
|
|
2012-08-01 02:58:21 +02:00
|
|
|
.phabricator-main-menu-search-target {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 46px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-desktop .phabricator-main-menu-search-target {
|
|
|
|
|
width: 320px;
|
|
|
|
|
margin-left: -150px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-07 22:37:10 +01:00
|
|
|
.device .phabricator-main-menu-search-target {
|
2012-08-01 02:58:21 +02:00
|
|
|
width: 100%;
|
|
|
|
|
margin-left: -25px;
|
2012-07-31 01:09:14 +02:00
|
|
|
}
|
|
|
|
|
|
2012-12-07 22:37:10 +01:00
|
|
|
.device .phabricator-main-menu-search-container {
|
2013-06-09 18:11:32 +02:00
|
|
|
padding: 4px 0;
|
2012-07-31 01:09:14 +02:00
|
|
|
}
|
|
|
|
|
|
Update form styles, implement in many places
Summary:
This creates a common form look and feel across the site. I spent a bit of time working out a number of kinks in our various renderings. Some things:
- Font Styles are correctly applied for form elements now.
- Everything lines up!
- Selects are larger, easier to read, interact.
- Inputs have been squared.
- Consistant CSS applied glow (try it!)
- Improved Mobile Responsiveness
- CSS applied to all form elements, not just Aphront
- Many other minor tweaks.
I tried to hit as many high profile forms as possible in an effort to increase consistency. Stopped for now and will follow up after this lands. I know Evan is not a super fan of the glow, but after working with it for a week, it's way cleaner and responsive than the OS controls. Give it a try.
Test Plan: Tested many applications, forms, mobile and tablet.
Reviewers: epriestley, btrahan
Reviewed By: epriestley
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D5860
2013-05-07 23:07:06 +02:00
|
|
|
.phabricator-main-menu .phabricator-main-menu-search input {
|
2012-07-31 01:09:14 +02:00
|
|
|
outline: 0;
|
|
|
|
|
margin: 0;
|
Update form styles, implement in many places
Summary:
This creates a common form look and feel across the site. I spent a bit of time working out a number of kinks in our various renderings. Some things:
- Font Styles are correctly applied for form elements now.
- Everything lines up!
- Selects are larger, easier to read, interact.
- Inputs have been squared.
- Consistant CSS applied glow (try it!)
- Improved Mobile Responsiveness
- CSS applied to all form elements, not just Aphront
- Many other minor tweaks.
I tried to hit as many high profile forms as possible in an effort to increase consistency. Stopped for now and will follow up after this lands. I know Evan is not a super fan of the glow, but after working with it for a week, it's way cleaner and responsive than the OS controls. Give it a try.
Test Plan: Tested many applications, forms, mobile and tablet.
Reviewers: epriestley, btrahan
Reviewed By: epriestley
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D5860
2013-05-07 23:07:06 +02:00
|
|
|
box-shadow: none;
|
|
|
|
|
transition: none;
|
2012-07-31 01:09:14 +02:00
|
|
|
|
2013-09-02 17:12:18 +02:00
|
|
|
color: {$lightgreytext};
|
2012-07-31 01:09:14 +02:00
|
|
|
width: 100%;
|
|
|
|
|
right: 0;
|
|
|
|
|
position: absolute;
|
Update form styles, implement in many places
Summary:
This creates a common form look and feel across the site. I spent a bit of time working out a number of kinks in our various renderings. Some things:
- Font Styles are correctly applied for form elements now.
- Everything lines up!
- Selects are larger, easier to read, interact.
- Inputs have been squared.
- Consistant CSS applied glow (try it!)
- Improved Mobile Responsiveness
- CSS applied to all form elements, not just Aphront
- Many other minor tweaks.
I tried to hit as many high profile forms as possible in an effort to increase consistency. Stopped for now and will follow up after this lands. I know Evan is not a super fan of the glow, but after working with it for a week, it's way cleaner and responsive than the OS controls. Give it a try.
Test Plan: Tested many applications, forms, mobile and tablet.
Reviewers: epriestley, btrahan
Reviewed By: epriestley
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D5860
2013-05-07 23:07:06 +02:00
|
|
|
font-size: 13px;
|
|
|
|
|
border: 1px solid #333;
|
2012-07-31 01:09:14 +02:00
|
|
|
border-radius: 12px;
|
2013-12-06 21:08:11 +01:00
|
|
|
background-color: #222;
|
|
|
|
|
opacity: .8;
|
Update form styles, implement in many places
Summary:
This creates a common form look and feel across the site. I spent a bit of time working out a number of kinks in our various renderings. Some things:
- Font Styles are correctly applied for form elements now.
- Everything lines up!
- Selects are larger, easier to read, interact.
- Inputs have been squared.
- Consistant CSS applied glow (try it!)
- Improved Mobile Responsiveness
- CSS applied to all form elements, not just Aphront
- Many other minor tweaks.
I tried to hit as many high profile forms as possible in an effort to increase consistency. Stopped for now and will follow up after this lands. I know Evan is not a super fan of the glow, but after working with it for a week, it's way cleaner and responsive than the OS controls. Give it a try.
Test Plan: Tested many applications, forms, mobile and tablet.
Reviewers: epriestley, btrahan
Reviewed By: epriestley
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D5860
2013-05-07 23:07:06 +02:00
|
|
|
height: 26px;
|
2012-07-31 01:09:14 +02:00
|
|
|
line-height: 12px;
|
|
|
|
|
box-shadow: 0px 1px 1px rgba(128, 128, 128, 0.25);
|
|
|
|
|
padding: 6px 32px 6px 10px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-12-06 21:08:11 +01:00
|
|
|
.phabricator-main-menu.main-header-dark .phabricator-main-menu-search input {
|
|
|
|
|
background-color: #555;
|
|
|
|
|
}
|
|
|
|
|
|
2013-01-27 16:59:05 +01:00
|
|
|
.device .phabricator-main-menu-search input {
|
2013-05-12 06:15:14 +02:00
|
|
|
height: 30px;
|
2013-01-27 16:59:05 +01:00
|
|
|
font-size: 15px;
|
|
|
|
|
border-radius: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
Update form styles, implement in many places
Summary:
This creates a common form look and feel across the site. I spent a bit of time working out a number of kinks in our various renderings. Some things:
- Font Styles are correctly applied for form elements now.
- Everything lines up!
- Selects are larger, easier to read, interact.
- Inputs have been squared.
- Consistant CSS applied glow (try it!)
- Improved Mobile Responsiveness
- CSS applied to all form elements, not just Aphront
- Many other minor tweaks.
I tried to hit as many high profile forms as possible in an effort to increase consistency. Stopped for now and will follow up after this lands. I know Evan is not a super fan of the glow, but after working with it for a week, it's way cleaner and responsive than the OS controls. Give it a try.
Test Plan: Tested many applications, forms, mobile and tablet.
Reviewers: epriestley, btrahan
Reviewed By: epriestley
CC: aran, Korvin
Differential Revision: https://secure.phabricator.com/D5860
2013-05-07 23:07:06 +02:00
|
|
|
.phabricator-main-menu .phabricator-main-menu-search input:focus {
|
2013-05-16 22:10:06 +02:00
|
|
|
background: #fff;
|
2013-12-06 21:08:11 +01:00
|
|
|
opacity: 1;
|
2013-05-16 22:10:06 +02:00
|
|
|
color: #333;
|
|
|
|
|
border-color: #e7e7e7;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
-webkit-box-shadow: none;
|
|
|
|
|
-moz-box-shadow: none;
|
2012-07-31 01:09:14 +02:00
|
|
|
}
|
|
|
|
|
|
2012-08-06 00:07:12 +02:00
|
|
|
.phabricator-main-menu-search input.jx-typeahead-placeholder {
|
2013-12-06 21:08:11 +01:00
|
|
|
color: #fff;
|
2012-07-31 01:09:14 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-main-menu-search button {
|
|
|
|
|
position: absolute;
|
|
|
|
|
color: transparent;
|
2013-12-06 21:08:11 +01:00
|
|
|
background: transparent 5px 6px url(/rsrc/image/search-white.png) no-repeat;
|
2012-07-31 01:09:14 +02:00
|
|
|
border: none;
|
|
|
|
|
outline: none;
|
|
|
|
|
box-shadow: none;
|
2012-11-09 00:47:11 +01:00
|
|
|
text-shadow: none;
|
|
|
|
|
min-width: 0;
|
2012-07-31 01:09:14 +02:00
|
|
|
|
|
|
|
|
height: 20px;
|
|
|
|
|
width: 20px;
|
2013-07-18 00:53:26 +02:00
|
|
|
top: 10px;
|
2012-07-31 01:09:14 +02:00
|
|
|
right: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-01-27 16:59:05 +01:00
|
|
|
.device .phabricator-main-menu-search button {
|
2013-06-09 18:11:32 +02:00
|
|
|
top: 7px;
|
2013-01-27 16:59:05 +01:00
|
|
|
}
|
|
|
|
|
|
2012-08-01 02:58:21 +02:00
|
|
|
.phabricator-main-menu-search-target div.jx-typeahead-results {
|
2013-05-16 22:10:06 +02:00
|
|
|
background: #ffffff;
|
|
|
|
|
word-wrap: break-word;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
|
|
|
|
|
border: 2px solid #33393d;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
margin-left: 40px;
|
2012-08-01 02:58:21 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-main-search-typeahead-result {
|
|
|
|
|
display: block;
|
Show icons and disabled/archived/closed results in typahead dynamic list
Summary:
Ref T4420. This is mostly a design change, but addresses two functional issues:
# Many sources exclude disabled accounts, system agents, archived projects, etc. It is rare to select these, but excluding them completely is too severe, and we've made more than a handful of changes over time to replace a "users" endpoint with an "accounts" endpoint (to include disabled users) or similar. Instead, always show these results, but sort them last and use a special style to clearly mark them as closed, disabled, or otherwise unusual.
- As a practical consequence, all the similar endpoints can now be merged, so "accounts" and "users" return the exact same result sets.
# Increasingly, sources can return multiple object types in a single list. For example, "CC" can have a user or mailing list, and soon a project or repository. However, the result list is fairly homogenous across types and it isn't easy to quickly pick out projects vs users. To help with this, add icons showing the result type.
Test Plan:
{F113079}
(The main search results get touched here too, I verified they didn't blow up.)
Reviewers: chad, btrahan
Reviewed By: chad
CC: chad, aran, mbishopim3
Maniphest Tasks: T4420
Differential Revision: https://secure.phabricator.com/D8231
2014-02-14 19:24:11 +01:00
|
|
|
padding: 6px 12px 6px 46px;
|
|
|
|
|
background-position: 12px 9px;
|
2012-08-01 02:58:21 +02:00
|
|
|
background-size: 25px 25px;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-main-search-typeahead-result .result-name {
|
|
|
|
|
display: block;
|
2013-05-16 22:10:06 +02:00
|
|
|
font-size: 12px;
|
2012-08-01 02:58:21 +02:00
|
|
|
font-weight: bold;
|
2013-05-16 22:10:06 +02:00
|
|
|
color: #333;
|
2012-08-01 02:58:21 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-main-search-typeahead-result .result-type {
|
2013-09-02 17:12:18 +02:00
|
|
|
color: {$lightgreytext};
|
2013-05-16 22:10:06 +02:00
|
|
|
font-size: 11px;
|
|
|
|
|
font-weight: normal;
|
2012-08-01 02:58:21 +02:00
|
|
|
}
|
|
|
|
|
|
2013-06-09 18:11:32 +02:00
|
|
|
.device .phabricator-application-menu-expanded.phabricator-search-menu-expanded
|
|
|
|
|
.phabricator-search-menu {
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2012-08-01 02:58:21 +02:00
|
|
|
|
2012-07-31 01:09:14 +02:00
|
|
|
/* - Alert ---------------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
Alert menus are like icon menus but don't obey collapse rules.
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
2013-01-27 02:04:18 +01:00
|
|
|
.phabricator-main-menu-alerts {
|
2012-07-31 01:09:14 +02:00
|
|
|
display: inline-block;
|
2013-01-27 02:04:18 +01:00
|
|
|
border-radius: 15px;
|
2013-01-29 00:43:15 +01:00
|
|
|
float: left;
|
2013-07-20 18:57:34 +02:00
|
|
|
background: rgba(0,0,0,.5);
|
2013-01-27 02:04:18 +01:00
|
|
|
height: 20px;
|
2013-02-26 23:56:25 +01:00
|
|
|
padding: 2px 10px 3px 8px;
|
2013-07-18 00:53:26 +02:00
|
|
|
margin-top: 10px;
|
2012-07-31 01:09:14 +02:00
|
|
|
}
|
|
|
|
|
|
2013-01-27 02:04:18 +01:00
|
|
|
.phabricator-main-menu-alert-icon,
|
|
|
|
|
.phabricator-main-menu-message-icon {
|
2013-02-26 23:56:25 +01:00
|
|
|
width: 18px;
|
|
|
|
|
height: 18px;
|
2013-01-27 02:04:18 +01:00
|
|
|
display: block;
|
|
|
|
|
float: left;
|
|
|
|
|
margin: 2px 0 0 0;
|
2012-11-27 23:03:25 +01:00
|
|
|
}
|
2012-07-31 01:09:14 +02:00
|
|
|
|
2013-01-27 02:04:18 +01:00
|
|
|
.alert-notifications .phabricator-main-menu-message-icon {
|
2013-02-26 23:56:25 +01:00
|
|
|
margin: 2px 0 0 6px;
|
2013-01-27 02:04:18 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phabricator-main-menu-alert-count,
|
|
|
|
|
.phabricator-main-menu-message-count {
|
2012-07-31 01:09:14 +02:00
|
|
|
font-weight: bold;
|
2013-01-27 02:04:18 +01:00
|
|
|
line-height: 20px;
|
2012-07-31 01:09:14 +02:00
|
|
|
color: #ffffff;
|
2012-11-27 23:03:25 +01:00
|
|
|
text-align: center;
|
|
|
|
|
display: none;
|
2013-01-27 02:04:18 +01:00
|
|
|
float: left;
|
|
|
|
|
margin-left: 3px;
|
2012-11-27 23:03:25 +01:00
|
|
|
}
|
|
|
|
|
|
2013-01-27 02:04:18 +01:00
|
|
|
.alert-unread .phabricator-main-menu-alert-count,
|
|
|
|
|
.message-unread .phabricator-main-menu-message-count {
|
2012-11-27 23:03:25 +01:00
|
|
|
display: block;
|
2012-07-31 01:09:14 +02:00
|
|
|
}
|
2012-12-07 22:33:03 +01:00
|
|
|
|
2012-12-07 22:34:44 +01:00
|
|
|
/* - 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.
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
2012-12-07 22:37:10 +01:00
|
|
|
.device .phabricator-dark-menu,
|
2013-06-05 17:41:43 +02:00
|
|
|
.device .phabricator-dark-menu a.phui-list-item-href {
|
2013-01-14 22:40:51 +01:00
|
|
|
color: #fff;
|
2012-12-07 22:34:44 +01:00
|
|
|
}
|
|
|
|
|
|
2013-06-05 17:41:43 +02:00
|
|
|
.device .phabricator-dark-menu .phui-list-item-type-label {
|
2012-12-07 22:34:44 +01:00
|
|
|
text-transform: uppercase;
|
2013-01-27 16:59:05 +01:00
|
|
|
font-size: 12px;
|
2012-12-07 22:36:35 +01:00
|
|
|
background-color: #151719;
|
2013-06-05 17:41:43 +02:00
|
|
|
padding: 5px 0;
|
2012-12-07 22:36:35 +01:00
|
|
|
display: block;
|
2013-06-05 17:41:43 +02:00
|
|
|
font-weight: bold;
|
2012-12-07 22:36:35 +01:00
|
|
|
}
|
|
|
|
|
|
2013-06-05 17:41:43 +02:00
|
|
|
.device .phabricator-dark-menu .phui-list-item-href {
|
2012-12-07 22:36:35 +01:00
|
|
|
border-width: 1px 0;
|
|
|
|
|
border-style: solid;
|
|
|
|
|
border-color: #34373b transparent #282c2d;
|
2013-06-09 18:11:32 +02:00
|
|
|
background-image: url(/rsrc/image/texture/dark-menu.png);
|
2013-01-27 16:59:05 +01:00
|
|
|
padding: 4px 0;
|
|
|
|
|
display: block;
|
2012-12-07 22:36:35 +01:00
|
|
|
}
|
|
|
|
|
|
2012-12-07 22:34:44 +01:00
|
|
|
|
2012-12-07 22:33:03 +01:00
|
|
|
/* - Core Menu -----------------------------------------------------------------
|
|
|
|
|
|
2012-12-07 22:34:44 +01:00
|
|
|
Styles unique to the core menu (left button on mobile).
|
|
|
|
|
|
2012-12-07 22:33:03 +01:00
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
.phabricator-core-menu-profile-image {
|
Use application icons for "Eye" menu and Crumbs
Summary:
Issues here:
- Need an application-sized "eye", or a "home" icon for "Phabricator Home".
- Some of the "apps_lb_2x" sliced images are the "_dark_" versions, not the light versions.
- If you slice an application-sized "logout" (power off) icon and application-sized "help" (questionmark in circle) icon I can replace the current menu icons and nearly get rid of "autosprite".
- To replace the icons on /applications/, the non-retina size is "4x", so we'd need "8x" for retina. Alternatively I can reduce the icon sizes by 50%.
- The "Help", "Settings" and "Logout" items currently have a "glowing" hover state, which needs a variant (or we can drop it).
- The /applications/ icons have a white hover state (or we can drop it).
- The 1x application (14x14) icons aren't used anywhere right now, should they be? Maybe in the feed in the future, etc?
- The "apps-2x" and "apps-large" sheets are the same image, but getting them to actually use the same file is a bit tricky, so I just left them separate for now.
Test Plan:
{F26698}
{F26699}
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T1960
Differential Revision: https://secure.phabricator.com/D4108
2012-12-07 22:37:28 +01:00
|
|
|
background-size: 28px 28px;
|
2012-12-07 22:33:03 +01:00
|
|
|
}
|
|
|
|
|
|
2013-03-22 19:50:30 +01:00
|
|
|
.device .phabricator-search-menu {
|
2012-12-07 22:33:03 +01:00
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2013-03-22 19:50:30 +01:00
|
|
|
.device-desktop .phabricator-search-menu {
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device .phabricator-search-menu-expanded .phabricator-search-menu {
|
2012-12-07 22:33:03 +01:00
|
|
|
display: block;
|
2013-01-29 00:43:15 +01:00
|
|
|
padding-top: 44px;
|
2012-12-07 22:33:03 +01:00
|
|
|
}
|
|
|
|
|
|
2013-06-05 17:41:43 +02:00
|
|
|
.device .phabricator-dark-menu .phui-list-item-type-link {
|
2012-12-07 22:33:03 +01:00
|
|
|
font-size: 15px;
|
|
|
|
|
min-height: 30px;
|
2013-01-27 16:59:05 +01:00
|
|
|
line-height: 28px;
|
2014-04-28 02:47:15 +02:00
|
|
|
background: #000;
|
2012-12-07 22:33:03 +01:00
|
|
|
}
|
|
|
|
|
|
2013-06-05 17:41:43 +02:00
|
|
|
.device .phui-list-item-type-link
|
|
|
|
|
.phabricator-core-menu-icon + .phui-list-item-name {
|
|
|
|
|
margin-left: 30px;
|
2012-12-07 22:33:03 +01:00
|
|
|
}
|
|
|
|
|
|
2013-03-22 19:50:30 +01:00
|
|
|
.device-desktop .phabricator-application-menu {
|
2013-06-09 18:11:32 +02:00
|
|
|
float: right;
|
2012-12-07 22:33:03 +01:00
|
|
|
}
|
|
|
|
|
|
2013-06-09 18:11:32 +02:00
|
|
|
.device-desktop .phabricator-application-menu .phui-list-item-view,
|
|
|
|
|
.device-desktop .phabricator-application-menu .phui-list-item-name {
|
2012-12-07 22:33:03 +01:00
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2013-06-09 18:11:32 +02:00
|
|
|
.device-desktop .phabricator-application-menu .phui-list-item-view.core-menu-item {
|
2013-04-03 17:26:36 +02:00
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
2013-12-06 21:08:11 +01:00
|
|
|
.device-desktop .main-header-dark .phabricator-application-menu
|
|
|
|
|
.core-menu-item.phui-list-item-view:hover,
|
|
|
|
|
.device-desktop .main-header-dark .phabricator-main-menu-logo:hover {
|
2013-07-18 19:42:37 +02:00
|
|
|
background-color: rgba(0,0,0,.6);
|
2013-04-03 17:26:36 +02:00
|
|
|
}
|
|
|
|
|
|
2013-12-06 21:08:11 +01:00
|
|
|
.device-desktop .phabricator-application-menu
|
|
|
|
|
.core-menu-item.phui-list-item-view:hover,
|
|
|
|
|
.device-desktop .phabricator-main-menu-logo:hover {
|
|
|
|
|
background-color: rgba(0,0,0,.3);
|
2014-01-31 18:10:32 +01:00
|
|
|
box-shadow: inset 0 5px 10px rgba(0,0,0,0.5);
|
|
|
|
|
border-radius: 3px;
|
2013-12-06 21:08:11 +01:00
|
|
|
}
|
|
|
|
|
|
2013-06-05 17:41:43 +02:00
|
|
|
.device-desktop .phabricator-application-menu .phui-list-item-view {
|
2012-12-07 22:33:03 +01:00
|
|
|
float: left;
|
|
|
|
|
position: relative;
|
2014-01-31 18:10:32 +01:00
|
|
|
min-width: 36px;
|
|
|
|
|
height: 36px;
|
|
|
|
|
margin-top: 4px;
|
2012-12-07 22:33:03 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-desktop .phabricator-core-menu-icon {
|
2014-01-31 18:10:32 +01:00
|
|
|
top: 5px;
|
|
|
|
|
left: 4px;
|
2012-12-07 22:33:03 +01:00
|
|
|
}
|
|
|
|
|
|
2012-12-07 22:37:10 +01:00
|
|
|
.device .phabricator-core-menu-icon {
|
2012-12-07 22:33:03 +01:00
|
|
|
left: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-03-22 19:50:30 +01:00
|
|
|
.phabricator-core-menu-icon {
|
|
|
|
|
position: absolute;
|
|
|
|
|
display: block;
|
|
|
|
|
width: 28px;
|
|
|
|
|
height: 28px;
|
2012-12-07 22:33:03 +01:00
|
|
|
}
|
2012-12-07 22:34:44 +01:00
|
|
|
|
2014-01-29 05:19:20 +01:00
|
|
|
.phabricator-main-menu-dropdown {
|
|
|
|
|
position: absolute;
|
2014-02-01 00:19:39 +01:00
|
|
|
background: #fff;
|
|
|
|
|
top: 38px;
|
2014-01-29 05:19:20 +01:00
|
|
|
padding: 2px;
|
2014-02-01 00:19:39 +01:00
|
|
|
border: 1px solid {$lightblueborder};
|
|
|
|
|
border-bottom: 1px solid {$blueborder};
|
|
|
|
|
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
|
2014-01-29 05:19:20 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2012-12-07 22:34:44 +01:00
|
|
|
/* - Application Menu ----------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
Styles unique to the application menu (right button on mobile).
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
2012-12-07 22:37:10 +01:00
|
|
|
.device .phabricator-application-menu-expanded .phabricator-application-menu {
|
2012-12-07 22:34:44 +01:00
|
|
|
display: block;
|
2013-01-29 00:43:15 +01:00
|
|
|
padding-top: 44px;
|
2012-12-07 22:34:44 +01:00
|
|
|
}
|
|
|
|
|
|
2013-03-22 19:50:30 +01:00
|
|
|
.device .phabricator-application-menu,
|
2013-06-05 17:41:43 +02:00
|
|
|
.device-desktop .phabricator-dark-menu .phui-list-item-type-label {
|
2012-12-07 22:34:44 +01:00
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2013-06-05 17:41:43 +02:00
|
|
|
.phabricator-application-menu .phui-list-item-name {
|
2012-12-07 22:34:44 +01:00
|
|
|
padding-left: 12px;
|
|
|
|
|
}
|
2013-10-19 23:23:19 +02:00
|
|
|
|
|
|
|
|
|
|
|
|
|
/* - Print ---------------------------------------------------------------------
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
!print .phabricator-main-menu {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|