Changeset View
Changeset View
Standalone View
Standalone View
webroot/rsrc/css/application/base/main-menu-view.css
| /** | /** | ||||
| * @provides phabricator-main-menu-view | * @provides phabricator-main-menu-view | ||||
| * @requires phui-theme-css | |||||
| */ | */ | ||||
| /* - Main Menu ----------------------------------------------------------------- | /* - Main Menu ----------------------------------------------------------------- | ||||
| Main menu at the top of every page that has chrome. It reacts to resolution | 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. | changes in order to behave reasonably on tablets and phones. | ||||
| */ | */ | ||||
| .phabricator-main-menu { | .phabricator-main-menu { | ||||
| position: relative; | position: relative; | ||||
| } | } | ||||
| .phabricator-main-menu-background { | .phabricator-main-menu-background { | ||||
| min-height: 43px; | min-height: 43px; | ||||
| background: #ebecee; | background: #ebecee; | ||||
| border-bottom: 1px solid {$hovergrey}; | border-bottom: 1px solid rgba(0,0,0,.1); | ||||
| } | } | ||||
| .device-desktop .phabricator-main-menu { | .device-desktop .phabricator-main-menu { | ||||
| height: 43px; | height: 43px; | ||||
| padding-right: 4px; | padding-right: 4px; | ||||
| } | } | ||||
| .phabricator-main-menu a:hover { | .phabricator-main-menu a:hover { | ||||
| ▲ Show 20 Lines • Show All 54 Lines • ▼ Show 20 Lines | .phabricator-menu-button-icon { | ||||
| float: left; | float: left; | ||||
| margin: 10px 8px 0 8px; | margin: 10px 8px 0 8px; | ||||
| } | } | ||||
| .phabricator-menu-button-icon.phui-icon-view { | .phabricator-menu-button-icon.phui-icon-view { | ||||
| font-size: 20px; | font-size: 20px; | ||||
| height: 20px; | height: 20px; | ||||
| width: 20px; | width: 20px; | ||||
| color: {$bluetext}; | color: {$hoverwhite}; | ||||
| text-align: center; | text-align: center; | ||||
| vertical-align: middle; | vertical-align: middle; | ||||
| line-height: 24px; | line-height: 24px; | ||||
| text-shadow: {$whitetextshadow}; | |||||
| } | } | ||||
| .phabricator-expand-application-menu, | .phabricator-expand-application-menu, | ||||
| .phabricator-expand-search-menu { | .phabricator-expand-search-menu { | ||||
| float: right; | float: right; | ||||
| } | } | ||||
| .device-desktop .phabricator-main-menu-search-button, | .device-desktop .phabricator-main-menu-search-button, | ||||
| ▲ Show 20 Lines • Show All 52 Lines • ▼ Show 20 Lines | .phabricator-main-menu .phabricator-main-menu-search input { | ||||
| width: 100%; | width: 100%; | ||||
| right: 0; | right: 0; | ||||
| position: absolute; | position: absolute; | ||||
| font-size: 13px; | font-size: 13px; | ||||
| border-width: 1px; | border-width: 1px; | ||||
| border-color: {$blueborder}; | border-color: {$blueborder}; | ||||
| border-radius: 3px; | border-radius: 3px; | ||||
| background-color: #fff; | background-color: #fff; | ||||
| opacity: .8; | |||||
| height: 28px; | height: 28px; | ||||
| padding: 3px 30px 3px 6px; | padding: 3px 30px 3px 6px; | ||||
| float: left; | float: left; | ||||
| width: 205px; | width: 205px; | ||||
| } | } | ||||
| .device .phabricator-main-menu-search input { | .device .phabricator-main-menu-search input { | ||||
| height: 32px; | height: 32px; | ||||
| Show All 12 Lines | |||||
| .phabricator-main-menu-search input.jx-typeahead-placeholder { | .phabricator-main-menu-search input.jx-typeahead-placeholder { | ||||
| color: {$bluetext}; | color: {$bluetext}; | ||||
| } | } | ||||
| .phabricator-main-menu-search button { | .phabricator-main-menu-search button { | ||||
| color: {$bluetext}; | color: {$bluetext}; | ||||
| position: absolute; | position: absolute; | ||||
| background: {$lightgreybackground}; | background: {$greybackground}; | ||||
| border: none; | border: none; | ||||
| outline: none; | outline: none; | ||||
| box-shadow: none; | box-shadow: none; | ||||
| text-shadow: none; | text-shadow: none; | ||||
| min-width: 0; | min-width: 0; | ||||
| height: 24px; | height: 24px; | ||||
| width: 28px; | width: 28px; | ||||
| top: 10px; | top: 10px; | ||||
| Show All 14 Lines | |||||
| .device-desktop .phabricator-main-menu-search | .device-desktop .phabricator-main-menu-search | ||||
| button.phabricator-main-menu-search-dropdown { | button.phabricator-main-menu-search-dropdown { | ||||
| height: 28px; | height: 28px; | ||||
| top: 8px; | top: 8px; | ||||
| } | } | ||||
| .device-desktop .phabricator-main-menu-search | .device-desktop .phabricator-main-menu-search | ||||
| button.phabricator-main-menu-search-dropdown:hover .phui-icon-view { | button.phabricator-main-menu-search-dropdown:hover .phui-icon-view { | ||||
| color: {$darkbluetext}; | color: #fff; | ||||
| } | |||||
| .device-desktop .phabricator-main-menu-search | |||||
| button.phabricator-main-menu-search-dropdown:hover { | |||||
| background-color: rgba(55,55,55,0.08); | |||||
| border-radius: 3px; | |||||
| } | } | ||||
| .device .phabricator-main-menu-search | .device .phabricator-main-menu-search | ||||
| button.phabricator-main-menu-search-dropdown { | button.phabricator-main-menu-search-dropdown { | ||||
| left: 2px; | left: 2px; | ||||
| background: {$lightgreybackground}; | background: {$greybackground}; | ||||
| } | } | ||||
| button.phabricator-main-menu-search-dropdown .caret:before { | button.phabricator-main-menu-search-dropdown .caret:before { | ||||
| content: "\f107"; | content: "\f107"; | ||||
| font-family: FontAwesome; | font-family: FontAwesome; | ||||
| color: {$lightbluetext}; | color: {$hoverwhite}; | ||||
| } | } | ||||
| .phabricator-main-menu-search button.phabricator-main-menu-search-dropdown | .phabricator-main-menu-search button.phabricator-main-menu-search-dropdown | ||||
| .phui-icon-view { | .phui-icon-view { | ||||
| color: {$lightbluetext}; | color: {$hoverwhite}; | ||||
| font-size: 15px; | font-size: 15px; | ||||
| top: 6px; | top: 6px; | ||||
| left: 8px; | left: 8px; | ||||
| text-shadow: {$whitetextshadow}; | } | ||||
| .device | |||||
| .phabricator-main-menu-search button.phabricator-main-menu-search-dropdown | |||||
| .phui-icon-view { | |||||
| color: {$bluetext}; | |||||
| } | |||||
| .device button.phabricator-main-menu-search-dropdown .caret:before { | |||||
| color: {$bluetext}; | |||||
| } | } | ||||
| .phabricator-main-menu-search-dropdown .caret { | .phabricator-main-menu-search-dropdown .caret { | ||||
| position: absolute; | position: absolute; | ||||
| right: 15px; | right: 15px; | ||||
| top: 5px; | top: 5px; | ||||
| border: none; | border: none; | ||||
| margin-top: 1px; | margin-top: 1px; | ||||
| ▲ Show 20 Lines • Show All 70 Lines • ▼ Show 20 Lines | .device-phone .phabricator-main-search-typeahead-result .result-type { | ||||
| font-size: 13px; | font-size: 13px; | ||||
| } | } | ||||
| .device .phabricator-dark-menu .phui-list-item-type-link | .device .phabricator-dark-menu .phui-list-item-type-link | ||||
| .phabricator-main-search-typeahead-result { | .phabricator-main-search-typeahead-result { | ||||
| line-height: 18px; | line-height: 18px; | ||||
| } | } | ||||
| /* - Alert --------------------------------------------------------------------- | /* - Alert --------------------------------------------------------------------- | ||||
| Alert menus are like icon menus but don't obey collapse rules. | Alert menus are like icon menus but don't obey collapse rules. | ||||
| */ | */ | ||||
| .phabricator-main-menu-alerts { | .phabricator-main-menu-alerts { | ||||
| display: inline-block; | display: inline-block; | ||||
| float: left; | float: left; | ||||
| padding: 4px 0; | padding: 4px 0; | ||||
| } | } | ||||
| .alert-notifications { | .alert-notifications { | ||||
| float: left; | float: left; | ||||
| } | } | ||||
| .alert-notifications .phui-icon-view { | .alert-notifications .phui-icon-view { | ||||
| color: {$lightbluetext}; | color: {$hoverwhite}; | ||||
| text-shadow: {$whitetextshadow}; | |||||
| } | } | ||||
| .device-desktop .alert-notifications:hover { | .device-desktop .alert-notifications:hover { | ||||
| margin-top: -2px; | margin-top: -2px; | ||||
| transition-duration: .2s; | transition-duration: .2s; | ||||
| } | } | ||||
| .device-desktop .alert-notifications:hover .phui-icon-view { | .device-desktop .alert-notifications:hover .phui-icon-view { | ||||
| color: {$sky}; | color: #fff; | ||||
| } | } | ||||
| .phabricator-main-menu-alert-icon, | .phabricator-main-menu-alert-icon, | ||||
| .phabricator-main-menu-message-icon { | .phabricator-main-menu-message-icon { | ||||
| width: 18px; | width: 18px; | ||||
| height: 18px; | height: 18px; | ||||
| float: left; | float: left; | ||||
| padding: 8px 6px 8px 4px; | padding: 8px 6px 8px 4px; | ||||
| color: {$sky}; | color: #fff; | ||||
| font-size: 18px; | font-size: 18px; | ||||
| line-height: 20px; | line-height: 20px; | ||||
| text-align: right; | text-align: right; | ||||
| } | } | ||||
| .phui-icon-view.menu-icon-selected { | |||||
| color: #fff; | |||||
| } | |||||
| .phabricator-main-menu-alert-icon { | .phabricator-main-menu-alert-icon { | ||||
| font-size: 16px; | font-size: 16px; | ||||
| margin-top: 2px; | margin-top: 2px; | ||||
| } | } | ||||
| .phabricator-main-menu-alert-count, | .phabricator-main-menu-alert-count, | ||||
| .phabricator-main-menu-message-count { | .phabricator-main-menu-message-count { | ||||
| color: {$sky}; | color: #fff; | ||||
| text-align: center; | text-align: center; | ||||
| display: none; | display: none; | ||||
| float: left; | float: left; | ||||
| margin: 11px 6px 0 -2px; | margin: 11px 6px 0 -2px; | ||||
| font-size: 12px; | font-size: 12px; | ||||
| text-shadow: {$whitetextshadow}; | |||||
| } | } | ||||
| .device-phone .alert-unread .phabricator-main-menu-alert-count, | .device-phone .alert-unread .phabricator-main-menu-alert-count, | ||||
| .device-phone .message-unread .phabricator-main-menu-message-count { | .device-phone .message-unread .phabricator-main-menu-message-count { | ||||
| display: none; | display: none; | ||||
| } | } | ||||
| .alert-unread .phabricator-main-menu-alert-icon, | .alert-unread .phabricator-main-menu-alert-icon, | ||||
| .message-unread .phabricator-main-menu-message-icon { | .message-unread .phabricator-main-menu-message-icon { | ||||
| color: {$sky}; | color: #fff; | ||||
| } | } | ||||
| .alert-unread .phabricator-main-menu-alert-count, | .alert-unread .phabricator-main-menu-alert-count, | ||||
| .message-unread .phabricator-main-menu-message-count { | .message-unread .phabricator-main-menu-message-count { | ||||
| display: block; | display: block; | ||||
| } | } | ||||
| /* - Dark Menu ----------------------------------------------------------------- | /* - Dark Menu ----------------------------------------------------------------- | ||||
| Styles shared between the "core" menu (left button on mobile) and | Styles shared between the "core" menu (left button on mobile) and | ||||
| "application" menu (right button on mobile). These styles give the menu a | "application" menu (right button on mobile). These styles give the menu a | ||||
| white-on-black appearance. | white-on-black appearance. | ||||
| */ | */ | ||||
| .device .phabricator-dark-menu, | .device .phabricator-dark-menu, | ||||
| .device .phabricator-dark-menu a.phui-list-item-href { | .device .phabricator-dark-menu a.phui-list-item-href { | ||||
| color: {$darkbluetext}; | color: {$darkbluetext}; | ||||
| -webkit-font-smoothing: antialiased; | -webkit-font-smoothing: antialiased; | ||||
| } | } | ||||
| .device .phabricator-dark-menu .phui-list-item-type-label { | .device .phabricator-dark-menu .phui-list-item-type-label { | ||||
| border-top: 1px solid {$thinblueborder}; | |||||
| text-transform: uppercase; | text-transform: uppercase; | ||||
| font-size: 13px; | font-size: 13px; | ||||
| background-color: #fff; | background-color: #fff; | ||||
| padding: 6px 0 6px 12px; | padding: 6px 0 6px 12px; | ||||
| display: block; | display: block; | ||||
| font-weight: bold; | font-weight: bold; | ||||
| color: {$blue}; | color: #000; | ||||
| } | } | ||||
| .device .phabricator-dark-menu .phui-list-item-href { | .device .phabricator-dark-menu .phui-list-item-href { | ||||
| border-top: 1px solid {$thinblueborder}; | |||||
| background-color: #fff; | background-color: #fff; | ||||
| padding: 4px 0 4px 20px; | padding: 4px 0 4px 20px; | ||||
| display: block; | display: block; | ||||
| } | } | ||||
| /* - Core Menu ----------------------------------------------------------------- | /* - Core Menu ----------------------------------------------------------------- | ||||
| Show All 10 Lines | |||||
| } | } | ||||
| .device-desktop .phabricator-search-menu { | .device-desktop .phabricator-search-menu { | ||||
| float: right; | float: right; | ||||
| } | } | ||||
| .device .phabricator-search-menu-expanded .phabricator-search-menu { | .device .phabricator-search-menu-expanded .phabricator-search-menu { | ||||
| display: block; | display: block; | ||||
| padding-top: 44px; | position: absolute; | ||||
| top: 38px; | |||||
| left: 8px; | |||||
| right: 8px; | |||||
| border: 1px solid {$lightblueborder}; | |||||
| border-radius: 3px; | |||||
| box-shadow: {$dropshadow}; | |||||
| } | } | ||||
| .device .phabricator-dark-menu .phui-list-item-type-link { | .device .phabricator-dark-menu .phui-list-item-type-link { | ||||
| font-size: 15px; | min-height: 24px; | ||||
| min-height: 30px; | line-height: 20px; | ||||
| line-height: 28px; | |||||
| background: #fff; | background: #fff; | ||||
| } | } | ||||
| .device .phui-list-item-type-link | |||||
| .phabricator-core-menu-icon + .phui-list-item-name { | |||||
| margin-left: 32px; | |||||
| } | |||||
| .device-desktop .phabricator-application-menu { | .device-desktop .phabricator-application-menu { | ||||
| float: right; | float: right; | ||||
| } | } | ||||
| .device-desktop .phabricator-application-menu .phui-list-item-view, | .device-desktop .phabricator-application-menu .phui-list-item-view, | ||||
| .device-desktop .phabricator-application-menu .phui-list-item-name { | .device-desktop .phabricator-application-menu .phui-list-item-name { | ||||
| display: none; | display: none; | ||||
| } | } | ||||
| .phabricator-application-menu .phui-list-item-href { | .phabricator-application-menu .phui-list-item-href { | ||||
| display: block; | display: block; | ||||
| } | } | ||||
| .phabricator-application-menu .phui-list-item-icon.phui-font-fa { | .phabricator-application-menu .phui-list-item-icon.phui-font-fa { | ||||
| font-size: 20px; | font-size: 20px; | ||||
| height: 20px; | height: 20px; | ||||
| width: 20px; | width: 20px; | ||||
| color: {$lightbluetext}; | color: {$hoverwhite}; | ||||
| margin: 8px; | margin: 8px; | ||||
| text-align: center; | text-align: center; | ||||
| vertical-align: middle; | vertical-align: middle; | ||||
| text-shadow: {$whitetextshadow}; | } | ||||
| .device .phabricator-dark-menu.phabricator-application-menu | |||||
| .phui-list-item-icon.phui-font-fa, | |||||
| .device .phabricator-dark-menu .phabricator-core-menu-icon { | |||||
| display: none; | |||||
| } | } | ||||
| .device .phabricator-application-menu .phui-list-item-icon.phui-font-fa { | .device .phabricator-application-menu .phui-list-item-icon.phui-font-fa { | ||||
| margin: 4px 12px 4px 0; | margin: 4px 12px 4px 0; | ||||
| } | } | ||||
epriestley: Debugging/temporary/etc? | |||||
| .phabricator-application-menu .phui-list-item-icon.fa-plus { | .phabricator-application-menu .phui-list-item-icon.fa-plus { | ||||
| line-height: 22px; | line-height: 22px; | ||||
| } | } | ||||
| .device-desktop .phabricator-application-menu | .device-desktop .phabricator-application-menu | ||||
| .core-menu-item.phui-list-item-view:hover | .core-menu-item.phui-list-item-view:hover | ||||
| .phui-list-item-icon.phui-font-fa { | .phui-list-item-icon.phui-font-fa { | ||||
| color: {$darkbluetext}; | color: #fff; | ||||
| } | } | ||||
| .device-desktop .phabricator-application-menu | .device-desktop .phabricator-application-menu | ||||
| .phui-list-item-view.core-menu-item { | .phui-list-item-view.core-menu-item { | ||||
| display: block; | display: block; | ||||
| } | } | ||||
| .device-desktop .phabricator-application-menu | |||||
| .core-menu-item.phui-list-item-view:hover { | |||||
| background-color: rgba(55,55,55,.08); | |||||
| border-radius: 3px; | |||||
| } | |||||
| .device-desktop .phabricator-application-menu .phui-list-item-view { | .device-desktop .phabricator-application-menu .phui-list-item-view { | ||||
| float: left; | float: left; | ||||
| position: relative; | position: relative; | ||||
| min-width: 36px; | min-width: 36px; | ||||
| height: 36px; | height: 36px; | ||||
| margin-top: 4px; | margin-top: 4px; | ||||
| } | } | ||||
| Show All 31 Lines | |||||
| /* - Application Menu ---------------------------------------------------------- | /* - Application Menu ---------------------------------------------------------- | ||||
| Styles unique to the application menu (right button on mobile). | Styles unique to the application menu (right button on mobile). | ||||
| */ | */ | ||||
| .device .phabricator-application-menu-expanded .phabricator-application-menu { | .device .phabricator-application-menu-expanded .phabricator-application-menu { | ||||
| display: block; | display: block; | ||||
| padding-top: 44px; | position: absolute; | ||||
| border: 1px solid {$lightblueborder}; | |||||
| border-radius: 3px; | |||||
| box-shadow: {$dropshadow}; | |||||
| top: 38px; | |||||
| right: 8px; | |||||
| width: 240px; | |||||
| } | } | ||||
| .device .phabricator-application-menu, | .device .phabricator-application-menu, | ||||
| .device-desktop .phabricator-dark-menu .phui-list-item-type-label { | .device-desktop .phabricator-dark-menu .phui-list-item-type-label { | ||||
| display: none; | display: none; | ||||
| } | } | ||||
| /* - Print --------------------------------------------------------------------- | /* - Print --------------------------------------------------------------------- | ||||
| */ | */ | ||||
| !print .phabricator-main-menu { | !print .phabricator-main-menu { | ||||
| display: none; | display: none; | ||||
| } | } | ||||
Debugging/temporary/etc?