Changeset View
Changeset View
Standalone View
Standalone View
webroot/rsrc/css/application/base/main-menu-view.css
| Show First 20 Lines • Show All 57 Lines • ▼ Show 20 Lines | |||||
| } | } | ||||
| .device-desktop .phabricator-main-menu-brand:hover { | .device-desktop .phabricator-main-menu-brand:hover { | ||||
| background-color: rgba({$alphagrey},.2); | background-color: rgba({$alphagrey},.2); | ||||
| cursor: hand; | cursor: hand; | ||||
| } | } | ||||
| .device-phone .phabricator-wordmark { | .device-phone .phabricator-wordmark { | ||||
| max-width: 112px; /* iPhone 5 limitation */ | display: none; | ||||
| } | } | ||||
| .phabricator-wordmark { | .phabricator-wordmark { | ||||
| float: left; | float: left; | ||||
| color: #fff; | color: #fff; | ||||
| font-size: 18px; | font-size: 18px; | ||||
| margin: 9px 4px 9px 6px; | margin: 9px 4px 9px 6px; | ||||
| padding-right: 8px; | padding-right: 8px; | ||||
| Show All 39 Lines | |||||
| /* - Search -------------------------------------------------------------------- | /* - Search -------------------------------------------------------------------- | ||||
| The main search input in the menu bar. | The main search input in the menu bar. | ||||
| */ | */ | ||||
| .device-desktop .phabricator-main-menu-search { | .device-desktop .phabricator-main-menu-search { | ||||
| width: 220px; | width: 298px; | ||||
| } | } | ||||
| .device .phabricator-main-menu-search { | .device .phabricator-main-menu-search { | ||||
| height: 40px; | height: 40px; | ||||
| } | } | ||||
| .phabricator-main-menu-search-container { | .phabricator-main-menu-search-container { | ||||
| padding: 8px 0; | padding: 8px 0; | ||||
| position: relative; | position: relative; | ||||
| height: 24px; | height: 24px; | ||||
| margin: 0 8px; | margin: 0 8px 0 0; | ||||
| } | } | ||||
| .phabricator-main-menu-search-target { | .phabricator-main-menu-search-target { | ||||
| position: absolute; | position: absolute; | ||||
| top: 42px; | top: 42px; | ||||
| } | } | ||||
| .device-desktop .phabricator-main-menu-search-target { | .device-desktop .phabricator-main-menu-search-target { | ||||
| width: 320px; | width: 320px; | ||||
| margin-left: -150px; | margin-left: -150px; | ||||
| } | } | ||||
| .device .phabricator-main-menu-search-target { | .device .phabricator-main-menu-search-target { | ||||
| width: 100%; | width: 100%; | ||||
| margin-left: -25px; | margin-left: -25px; | ||||
| } | } | ||||
| .device .phabricator-main-menu-search-container { | .device .phabricator-main-menu-search-container { | ||||
| padding: 4px 0; | padding: 4px 0; | ||||
| margin: 0 4px; | |||||
| } | } | ||||
| .phabricator-main-menu .phabricator-main-menu-search input { | .phabricator-main-menu .phabricator-main-menu-search input { | ||||
| outline: 0; | outline: 0; | ||||
| margin: 0; | margin: 0; | ||||
| box-shadow: none; | box-shadow: none; | ||||
| transition: none; | transition: none; | ||||
| color: {$bluetext}; | color: {$bluetext}; | ||||
| width: 100%; | width: 100%; | ||||
| right: 0; | right: 0; | ||||
| position: absolute; | position: absolute; | ||||
| font-size: {$normalfontsize}; | font-size: {$normalfontsize}; | ||||
| border-width: 1px; | border-width: 1px; | ||||
| border-color: {$lightblueborder}; | border-color: {$lightblueborder}; | ||||
| border-radius: 3px; | border-radius: 3px; | ||||
| border-style: solid; | border-style: solid; | ||||
| background-color: #fff; | background-color: #fff; | ||||
| height: 28px; | height: 28px; | ||||
| padding: 3px 30px 3px 6px; | padding: 3px 28px 3px 52px; | ||||
| float: left; | float: left; | ||||
| width: 205px; | width: 280px; | ||||
| } | } | ||||
| .device .phabricator-main-menu-search input { | .device .phabricator-main-menu-search input { | ||||
| height: 32px; | height: 32px; | ||||
| font-size: {$biggestfontsize}; | font-size: {$biggestfontsize}; | ||||
| width: 100%; | width: 100%; | ||||
| padding-left: 50px; | padding-left: 50px; | ||||
| } | } | ||||
| .phabricator-main-menu .phabricator-main-menu-search input:focus { | .phabricator-main-menu .phabricator-main-menu-search input:focus { | ||||
| background: #fff; | background: #fff; | ||||
| opacity: 1; | opacity: 1; | ||||
| color: {$darkbluetext}; | color: {$darkbluetext}; | ||||
| border-color: {$sky}; | border-color: {$sky}; | ||||
| box-shadow: none; | box-shadow: none; | ||||
| } | } | ||||
| .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: {$greybackground}; | background: transparent; | ||||
| 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: 9px; | ||||
| right: -6px; | right: -6px; | ||||
| margin: 0 8px 0 0; | margin: 0 8px 0 0; | ||||
| padding: 0; | padding: 0; | ||||
| border-radius: 0; | border-radius: 0; | ||||
| } | } | ||||
| .phabricator-main-menu-search button.phabricator-main-menu-search-dropdown { | .phabricator-main-menu-search button.phabricator-main-menu-search-dropdown { | ||||
| position: absolute; | position: absolute; | ||||
| right: auto; | right: auto; | ||||
| left: -45px; | left: 12px; | ||||
| width: 40px; | width: 46px; | ||||
| background: transparent; | background: {$greybackground}; | ||||
| z-index: 1; | |||||
| } | } | ||||
| .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: 24px; | ||||
| top: 8px; | top: 10px; | ||||
| border-radius: 3px; | |||||
| } | } | ||||
| .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: #fff; | color: {$sky}; | ||||
| } | } | ||||
| .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: {$greybackground}; | background: {$greybackground}; | ||||
| } | } | ||||
| button.phabricator-main-menu-search-dropdown .caret:before { | button.phabricator-main-menu-search-dropdown .caret:before, | ||||
| a.phabricator-core-user-menu .caret:before { | |||||
| content: "\f107"; | content: "\f107"; | ||||
| font-family: FontAwesome; | font-family: FontAwesome; | ||||
| 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: {$hoverwhite}; | color: {$bluetext}; | ||||
| font-size: 15px; | font-size: 15px; | ||||
| top: 6px; | top: 4px; | ||||
| left: 8px; | left: 8px; | ||||
| } | } | ||||
| .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: 18px; | ||||
| top: 5px; | top: 2px; | ||||
| border: none; | border: none; | ||||
| margin-top: 1px; | margin-top: 1px; | ||||
| } | } | ||||
| .phabricator-main-menu-search button:hover { | .phabricator-main-menu-search button:hover { | ||||
| color: {$sky}; | color: {$sky}; | ||||
| } | } | ||||
| .device .phabricator-main-menu-search button { | .device .phabricator-main-menu-search button { | ||||
| top: 6px; | top: 6px; | ||||
| border-radius: 0; | border-radius: 0; | ||||
| height: 28px; | height: 28px; | ||||
| right: -6px; | right: -6px; | ||||
| } | } | ||||
| .phabricator-main-menu-search-target div.jx-typeahead-results { | .phabricator-main-menu-search-target div.jx-typeahead-results { | ||||
| background: #fff; | background: #fff; | ||||
| word-wrap: break-word; | word-wrap: break-word; | ||||
| overflow-y: auto; | overflow-y: auto; | ||||
| box-shadow: {$dropshadow}; | box-shadow: {$dropshadow}; | ||||
| border: 1px solid {$blueborder}; | border: 1px solid {$lightgreyborder}; | ||||
| border-radius: 3px; | border-radius: 3px; | ||||
| margin-left: 40px; | margin-left: 40px; | ||||
| } | } | ||||
| .device .phabricator-main-menu-search-target div.jx-typeahead-results { | .device .phabricator-main-menu-search-target div.jx-typeahead-results { | ||||
| margin-left: 30px; | margin-left: 30px; | ||||
| } | } | ||||
| Show All 38 Lines | |||||
| .device-phone .phabricator-main-search-typeahead-result .result-name { | .device-phone .phabricator-main-search-typeahead-result .result-name { | ||||
| font-size: {$biggestfontsize}; | font-size: {$biggestfontsize}; | ||||
| } | } | ||||
| .device-phone .phabricator-main-search-typeahead-result .result-type { | .device-phone .phabricator-main-search-typeahead-result .result-type { | ||||
| font-size: {$normalfontsize}; | font-size: {$normalfontsize}; | ||||
| } | } | ||||
| .device .phabricator-dark-menu .phui-list-item-type-link | |||||
| .phabricator-main-search-typeahead-result { | |||||
| 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 { | ||||
| ▲ Show 20 Lines • Show All 81 Lines • ▼ Show 20 Lines | |||||
| } | } | ||||
| .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, | ||||
| .setup-unread .phabricator-main-menu-setup-count { | .setup-unread .phabricator-main-menu-setup-count { | ||||
| display: block; | 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: {$darkbluetext}; | |||||
| -webkit-font-smoothing: antialiased; | |||||
| } | |||||
| .device .phabricator-dark-menu .phui-list-item-type-label { | |||||
| text-transform: uppercase; | |||||
| font-size: {$normalfontsize}; | |||||
| background-color: #fff; | |||||
| padding: 6px 0 6px 12px; | |||||
| display: block; | |||||
| font-weight: bold; | |||||
| color: #000; | |||||
| } | |||||
| .device .phabricator-dark-menu .phui-list-item-href { | |||||
| background-color: #fff; | |||||
| padding: 4px 0 4px 20px; | |||||
| display: block; | |||||
| } | |||||
| /* - Core Menu ----------------------------------------------------------------- | /* - Core Menu ----------------------------------------------------------------- | ||||
| Styles unique to the core menu (left button on mobile). | Styles unique to the core menu (left button on mobile). | ||||
| */ | */ | ||||
| .phabricator-core-menu-profile-image { | |||||
| background-size: 28px 28px; | |||||
| } | |||||
| .device .phabricator-search-menu { | .device .phabricator-search-menu { | ||||
| display: none; | display: none; | ||||
| } | } | ||||
| .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; | ||||
| position: absolute; | position: absolute; | ||||
| top: 38px; | top: 38px; | ||||
| left: 8px; | left: 8px; | ||||
| right: 8px; | right: 8px; | ||||
| border: 1px solid {$lightblueborder}; | border: 1px solid {$lightblueborder}; | ||||
| border-radius: 3px; | border-radius: 3px; | ||||
| box-shadow: {$dropshadow}; | box-shadow: {$dropshadow}; | ||||
| } | background: {$page.background}; | ||||
| .device .phabricator-dark-menu .phui-list-item-type-link { | |||||
| min-height: 24px; | |||||
| line-height: 20px; | |||||
| background: #fff; | |||||
| } | } | ||||
| .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 { | ||||
| Show All 9 Lines | .phabricator-application-menu .phui-list-item-icon.phui-font-fa { | ||||
| height: 20px; | height: 20px; | ||||
| width: 20px; | width: 20px; | ||||
| color: {$hoverwhite}; | color: {$hoverwhite}; | ||||
| margin: 8px; | margin: 8px; | ||||
| text-align: center; | text-align: center; | ||||
| vertical-align: middle; | vertical-align: middle; | ||||
| } | } | ||||
| .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; | ||||
| } | } | ||||
| .phabricator-application-menu .phui-list-item-icon.fa-plus { | .phabricator-application-menu .phui-list-item-icon.fa-plus { | ||||
| line-height: 22px; | line-height: 22px; | ||||
| } | } | ||||
| ▲ Show 20 Lines • Show All 53 Lines • ▼ Show 20 Lines | .phui-list-item-href { | ||||
| white-space: nowrap; | white-space: nowrap; | ||||
| } | } | ||||
| .phabricator-main-menu-dropdown.phui-list-sidenav .phui-list-item-type-label | .phabricator-main-menu-dropdown.phui-list-sidenav .phui-list-item-type-label | ||||
| .phui-list-item-name { | .phui-list-item-name { | ||||
| padding-left: 12px; | padding-left: 12px; | ||||
| } | } | ||||
| /* - User Menu ----------------------------------------------------------------- | |||||
| /* - Application Menu ---------------------------------------------------------- | Styles unique to the user profile menu. | ||||
epriestley: woah woah there's no nintendo IP in this codebase and any resemblances of any profile icons to… | |||||
| Styles unique to the application menu (right button on mobile). | |||||
| */ | */ | ||||
| .device .phabricator-application-menu-expanded .phabricator-application-menu { | .phabricator-core-user-menu { | ||||
| display: block; | float: right; | ||||
| display: inline-block; | |||||
| padding: 9px 24px 0 8px; | |||||
| height: 35px; | |||||
| position: relative; | |||||
| } | |||||
| .phabricator-core-user-mobile-menu { | |||||
| display: none; | |||||
| } | |||||
| .phabricator-core-user-menu span.phui-icon-view.phuihead-small { | |||||
| height: 24px; | |||||
| width: 24px; | |||||
| background-size: 24px; | |||||
| border-radius: 3px; | |||||
| display: inline-block; | |||||
| margin: 1px 0 0 0; | |||||
| } | |||||
| .phabricator-core-user-menu .phui-icon-view { | |||||
| color: {$hoverwhite}; | |||||
| font-size: 18px; | |||||
| margin: 4px 0 0 0; | |||||
| } | |||||
| .phabricator-core-user-menu .caret { | |||||
| position: absolute; | position: absolute; | ||||
| border: 1px solid {$blueborder}; | right: 17px; | ||||
| top: 13px; | |||||
| border: none; | |||||
| margin: 1px; | |||||
| color: {$hoverwhite}; | |||||
| } | |||||
| .phabricator-core-login-button { | |||||
| float: right; | |||||
| display: inline-block; | |||||
| padding: 4px 12px; | |||||
| border-radius: 3px; | border-radius: 3px; | ||||
| box-shadow: {$dropshadow}; | margin: 8px 6px 4px; | ||||
| top: 42px; | border: 1px solid {$hoverwhite}; | ||||
| right: 8px; | color: {$hoverwhite}; | ||||
| width: 240px; | |||||
| } | } | ||||
| .device .phabricator-application-menu, | .device-desktop .phabricator-core-login-button:hover { | ||||
| .device-desktop .phabricator-dark-menu .phui-list-item-type-label { | border: 1px solid #fff; | ||||
| color: #fff; | |||||
| } | |||||
| .device-desktop .phabricator-core-user-menu:hover .caret, | |||||
| .device-desktop .phabricator-core-user-menu:hover .phui-icon-view { | |||||
| color: #fff; | |||||
| } | |||||
| .device .phabricator-core-user-menu .caret { | |||||
| display: none; | display: none; | ||||
| } | } | ||||
| .device .phabricator-core-user-mobile-menu { | |||||
| display: block; | |||||
| } | |||||
| .device .phabricator-core-user-menu { | |||||
| padding: 9px 8px 0 8px; | |||||
| } | |||||
| .device .phabricator-core-user-menu .phui-icon-view { | |||||
| font-size: 20px; | |||||
| margin: 3px 0 0 0; | |||||
| } | |||||
| /* - Print --------------------------------------------------------------------- | /* - Print --------------------------------------------------------------------- | ||||
| */ | */ | ||||
| !print .phabricator-main-menu { | !print .phabricator-main-menu { | ||||
| display: none; | display: none; | ||||
| } | } | ||||
woah woah there's no nintendo IP in this codebase and any resemblances of any profile icons to any characters, living or dead or fictional Pokemon, are purely coincidental