[Summary view] [Print] [Text view]

   1  /**
   2   * @provides phabricator-main-menu-view
   3   */
   4  
   5  
   6  /* - Main Menu -----------------------------------------------------------------
   7  
   8    Main menu at the top of every page that has chrome. It reacts to resolution
   9    changes in order to behave reasonably on tablets and phones.
  10  
  11  */
  12  
  13  .phabricator-main-menu {
  14    background: #2d3236;
  15    background-repeat: repeat-x;
  16    position: relative;
  17    min-height: 44px;
  18  }
  19  
  20  .device-desktop .phabricator-main-menu {
  21    height: 44px;
  22    padding-right: 4px;
  23  }
  24  
  25  .phabricator-main-menu a:hover {
  26    text-decoration: none;
  27  }
  28  
  29  
  30  /* - Logo ----------------------------------------------------------------------
  31  
  32    The "Phabricator" logo group in the main menu. On tablet and phone devices,
  33    this shows a "reveal" button to expand/collapse the rest of the menu.
  34  
  35  */
  36  
  37  .device-desktop .phabricator-main-menu-group-logo {
  38    float: left;
  39  }
  40  
  41  .phabricator-main-menu-brand {
  42    display: inline-block;
  43    width: 148px;
  44    height: 44px;
  45    float: left;
  46    margin-right: 6px;
  47    padding-right: 4px;
  48    padding-left: 6px;
  49  }
  50  
  51  .phabricator-main-menu-logo {
  52    position: absolute;
  53    width: 96px;
  54    height: 26px;
  55    left: 52px;
  56    top: 9px;
  57  }
  58  
  59  .phabricator-main-menu-eye {
  60    position: absolute;
  61    width: 40px;
  62    height: 40px;
  63    top: 2px;
  64  }
  65  
  66  .device-desktop .phabricator-main-menu-brand:hover {
  67    background-color: rgba(0,0,0,.6);
  68    cursor: hand;
  69  }
  70  
  71  /* - Expand/Collapse Button ----------------------------------------------------
  72  
  73    On phones, the menu switches to a vertical layout and uses a button to expand
  74    or collapse the items.
  75  
  76  */
  77  
  78  .phabricator-menu-button-icon {
  79    width: 24px;
  80    height: 24px;
  81    float: left;
  82    margin: 10px 10px 0 5px;
  83  }
  84  
  85  .phabricator-expand-application-menu,
  86  .phabricator-expand-search-menu {
  87    float: right;
  88  }
  89  
  90  .device-desktop .phabricator-main-menu-search-button,
  91  .device-desktop .phabricator-main-menu-expand-button {
  92    display: none;
  93  }
  94  
  95  
  96  /* - Search --------------------------------------------------------------------
  97  
  98    The main search input in the menu bar.
  99  
 100  */
 101  
 102  .device-desktop .phabricator-main-menu-search {
 103    width: 220px;
 104  }
 105  
 106  .device .phabricator-main-menu-search {
 107    height: 40px;
 108  }
 109  
 110  .phabricator-main-menu-search-container {
 111    padding: 9px 0 10px 0;
 112    position: relative;
 113    height: 24px;
 114    margin: 0 8px;
 115  }
 116  
 117  .phabricator-main-menu-search-target {
 118    position: absolute;
 119    top: 46px;
 120  }
 121  
 122  .device-desktop .phabricator-main-menu-search-target {
 123    width: 320px;
 124    margin-left: -150px;
 125  }
 126  
 127  .device .phabricator-main-menu-search-target {
 128    width: 100%;
 129    margin-left: -25px;
 130  }
 131  
 132  .device .phabricator-main-menu-search-container {
 133    padding: 4px 0;
 134  }
 135  
 136  .phabricator-main-menu .phabricator-main-menu-search input {
 137    outline: 0;
 138    margin: 0;
 139    box-shadow: none;
 140    transition: none;
 141  
 142    color: {$lightgreytext};
 143    width: 100%;
 144    right: 0;
 145    position: absolute;
 146    font-size: 13px;
 147    border: 1px solid #333;
 148    border-radius: 12px;
 149    background-color: #222;
 150    opacity: .8;
 151    height: 26px;
 152    line-height: 12px;
 153    box-shadow: 0px 1px 1px rgba(128, 128, 128, 0.25);
 154    padding: 6px 32px 6px 10px;
 155  }
 156  
 157  .phabricator-main-menu.main-header-dark .phabricator-main-menu-search input {
 158    background-color: #555;
 159  }
 160  
 161  .device .phabricator-main-menu-search input {
 162    height: 30px;
 163    font-size: 15px;
 164    border-radius: 15px;
 165  }
 166  
 167  .phabricator-main-menu .phabricator-main-menu-search input:focus {
 168    background: #fff;
 169    opacity: 1;
 170    color: #333;
 171    border-color: #e7e7e7;
 172    box-shadow: none;
 173  }
 174  
 175  .phabricator-main-menu-search input.jx-typeahead-placeholder {
 176    color: #fff;
 177  }
 178  
 179  .phabricator-main-menu-search button {
 180    position: absolute;
 181    color: transparent;
 182    background: transparent 5px 6px url(/rsrc/image/search-white.png) no-repeat;
 183    border: none;
 184    outline: none;
 185    box-shadow: none;
 186    text-shadow: none;
 187    min-width: 0;
 188  
 189    height: 20px;
 190    width: 20px;
 191    top: 10px;
 192    right: 6px;
 193  }
 194  
 195  .device .phabricator-main-menu-search button {
 196    top: 7px;
 197  }
 198  
 199  .phabricator-main-menu-search-target div.jx-typeahead-results {
 200    background: #ffffff;
 201    word-wrap: break-word;
 202    overflow-y: auto;
 203    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
 204    border: {$blueborder};
 205    border-radius: 3px;
 206    margin-left: 40px;
 207  }
 208  
 209  .device .phabricator-main-menu-search-target div.jx-typeahead-results {
 210    margin-left: 30px;
 211  }
 212  
 213  .phabricator-main-search-typeahead-result .phabricator-search-icon {
 214    display: inline-block;
 215    width: 28px;
 216    height: 28px;
 217    position: absolute;
 218    top: 9px;
 219    left: 9px;
 220  }
 221  
 222  .phabricator-main-search-typeahead-result {
 223    display: block;
 224    padding: 6px 8px 8px 44px;
 225    background-position: 8px;
 226    background-size: 30px 30px;
 227    background-repeat: no-repeat;
 228    position: relative;
 229  }
 230  
 231  .phabricator-main-search-typeahead-result .result-name {
 232    display: block;
 233    font-size: 13px;
 234    font-weight: bold;
 235    color: {$darkgreytext};
 236  }
 237  
 238  .phabricator-main-search-typeahead-result .result-type {
 239    color: {$lightgreytext};
 240    font-size: 11px;
 241    font-weight: normal;
 242  }
 243  
 244  .device .phabricator-application-menu-expanded.phabricator-search-menu-expanded
 245   .phabricator-search-menu {
 246    padding: 0;
 247  }
 248  
 249  .device-phone .phabricator-main-search-typeahead-result .result-name {
 250    font-size: 15px;
 251  }
 252  
 253  .device-phone .phabricator-main-search-typeahead-result .result-type {
 254    font-size: 13px;
 255  }
 256  
 257  .device .phabricator-dark-menu .phui-list-item-type-link
 258    .phabricator-main-search-typeahead-result {
 259    line-height: 18px;
 260  }
 261  
 262  /* - Alert ---------------------------------------------------------------------
 263  
 264    Alert menus are like icon menus but don't obey collapse rules.
 265  
 266  */
 267  
 268  .phabricator-main-menu-alerts {
 269    display: inline-block;
 270    border-radius: 15px;
 271    float: left;
 272    background: rgba(0,0,0,.5);
 273    height: 20px;
 274    padding: 2px 10px 3px 8px;
 275    margin-top: 10px;
 276  }
 277  
 278  .phabricator-main-menu-alert-icon,
 279  .phabricator-main-menu-message-icon {
 280    width: 18px;
 281    height: 18px;
 282    display: block;
 283    float: left;
 284    margin: 2px 0 0 0;
 285  }
 286  
 287  .alert-notifications .phabricator-main-menu-message-icon {
 288    margin: 2px 0 0 6px;
 289  }
 290  
 291  .phabricator-main-menu-alert-count,
 292  .phabricator-main-menu-message-count {
 293    font-weight: bold;
 294    line-height: 20px;
 295    color: #ffffff;
 296    text-align: center;
 297    display: none;
 298    float: left;
 299    margin-left: 3px;
 300  }
 301  
 302  .alert-unread .phabricator-main-menu-alert-count,
 303  .message-unread .phabricator-main-menu-message-count  {
 304    display: block;
 305  }
 306  
 307  /* - Dark Menu -----------------------------------------------------------------
 308  
 309    Styles shared between the "core" menu (left button on mobile) and
 310    "application" menu (right button on mobile). These styles give the menu a
 311    white-on-black appearance.
 312  
 313  */
 314  
 315  .device .phabricator-dark-menu,
 316  .device .phabricator-dark-menu a.phui-list-item-href {
 317    color: #fff;
 318    -webkit-font-smoothing: antialiased;
 319  }
 320  
 321  .device .phabricator-dark-menu .phui-list-item-type-label {
 322    text-transform: uppercase;
 323    font-size: 13px;
 324    background-color: #151719;
 325    padding: 6px 0;
 326    display: block;
 327    font-weight: bold;
 328  }
 329  
 330  .device .phabricator-dark-menu .phui-list-item-href {
 331    border-width: 1px 0;
 332    border-style: solid;
 333    border-color: #34373b transparent #282c2d;
 334    background-color: #272c2f;
 335    padding: 4px 0 4px 16px;
 336    display: block;
 337  }
 338  
 339  
 340  /* - Core Menu -----------------------------------------------------------------
 341  
 342    Styles unique to the core menu (left button on mobile).
 343  
 344  */
 345  
 346  .phabricator-core-menu-profile-image {
 347    background-size: 28px 28px;
 348  }
 349  
 350  .device .phabricator-search-menu {
 351    display: none;
 352  }
 353  
 354  .device-desktop .phabricator-search-menu {
 355    float: right;
 356  }
 357  
 358  .device .phabricator-search-menu-expanded .phabricator-search-menu {
 359    display: block;
 360    padding-top: 44px;
 361  }
 362  
 363  .device .phabricator-dark-menu .phui-list-item-type-link {
 364    font-size: 15px;
 365    min-height: 30px;
 366    line-height: 28px;
 367    background: #000;
 368  }
 369  
 370  .device .phui-list-item-type-link
 371    .phabricator-core-menu-icon + .phui-list-item-name {
 372    margin-left: 30px;
 373  }
 374  
 375  .device-desktop .phabricator-application-menu {
 376    float: right;
 377  }
 378  
 379  .device-desktop .phabricator-application-menu .phui-list-item-view,
 380  .device-desktop .phabricator-application-menu .phui-list-item-name  {
 381    display: none;
 382  }
 383  
 384  .phabricator-application-menu .phui-list-item-icon {
 385    display: none;
 386  }
 387  
 388  .device-desktop .phabricator-application-menu .phui-list-item-view.core-menu-item {
 389    display: block;
 390  }
 391  
 392  .device-desktop .main-header-dark .phabricator-application-menu
 393   .core-menu-item.phui-list-item-view:hover {
 394    background-color: rgba(0,0,0,.6);
 395  }
 396  
 397  .device-desktop .phabricator-application-menu
 398   .core-menu-item.phui-list-item-view:hover {
 399    box-shadow: inset 0 5px 10px rgba(0,0,0,0.5);
 400    border-radius: 3px;
 401  }
 402  
 403  .device-desktop .phabricator-application-menu .phui-list-item-view {
 404    float: left;
 405    position: relative;
 406    min-width: 36px;
 407    height: 36px;
 408    margin-top: 4px;
 409  }
 410  
 411  .device-desktop .phabricator-core-menu-icon {
 412    top: 5px;
 413    left: 4px;
 414  }
 415  
 416  .device .phabricator-core-menu-icon {
 417    left: 24px;
 418  }
 419  
 420  .phabricator-core-menu-icon {
 421    position: absolute;
 422    display: block;
 423    width: 28px;
 424    height: 28px;
 425  }
 426  
 427  .phabricator-main-menu-dropdown {
 428    position: absolute;
 429    background: #fff;
 430    top: 38px;
 431    padding: 2px;
 432    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
 433    border: {$blueborder};
 434    border-radius: 3px;
 435  }
 436  
 437  
 438  /* - Application Menu ----------------------------------------------------------
 439  
 440    Styles unique to the application menu (right button on mobile).
 441  
 442  */
 443  
 444  .device .phabricator-application-menu-expanded .phabricator-application-menu {
 445    display: block;
 446    padding-top: 44px;
 447  }
 448  
 449  .device .phabricator-application-menu,
 450  .device-desktop .phabricator-dark-menu .phui-list-item-type-label {
 451    display: none;
 452  }
 453  
 454  .phabricator-application-menu .phui-list-item-name {
 455    padding-left: 12px;
 456  }
 457  
 458  
 459  /* - Print ---------------------------------------------------------------------
 460  */
 461  
 462  !print .phabricator-main-menu {
 463    display: none;
 464  }