mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-10 17:02:41 +01:00
3ffc764141
Summary: images attached to maniphest tasks and mentioned in remarkup anywhere now invoke a lightbox control that lets the user page through all the images. lightbox includes a download button, next / prev buttons, and if we're not at the tippy toppy of hte page an "X" or close button. we also respond to left, right, and esc for navigating. next time we should get non-images working in here...! Test Plan: played with maniphest - looks good made comments with images. looks good. made sure multiple image comments worked. Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin, chad Maniphest Tasks: T1896 Differential Revision: https://secure.phabricator.com/D3705
373 lines
7.9 KiB
CSS
373 lines
7.9 KiB
CSS
/**
|
|
* @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-image: url(/rsrc/image/main_texture.png);
|
|
position: relative;
|
|
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
|
|
height: 44px;
|
|
z-index: 6;
|
|
}
|
|
|
|
.phabricator-main-menu a:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.device-desktop .phabricator-main-menu {
|
|
text-align: right;
|
|
width: 100%;
|
|
}
|
|
|
|
/* - Main Menu Group -----------------------------------------------------------
|
|
|
|
Container representing a single item on the main menu. For desktops these lay
|
|
out horizontally; on phones they switch to vertical.
|
|
|
|
*/
|
|
|
|
.phabricator-main-menu-group {
|
|
height: 44px;
|
|
position: relative;
|
|
}
|
|
|
|
.device-desktop .phabricator-main-menu-group {
|
|
display: inline-block;
|
|
text-align: left;
|
|
}
|
|
|
|
.device-tablet .phabricator-main-menu-group,
|
|
.device-phone .phabricator-main-menu-group {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.device-tablet .phabricator-main-menu-group + .phabricator-main-menu-group,
|
|
.device-phone .phabricator-main-menu-group + .phabricator-main-menu-group {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
|
|
/* - 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-logo {
|
|
display: inline-block;
|
|
height: 44px;
|
|
width: 170px;
|
|
margin-right: 12px;
|
|
background: 6px 9px url(/rsrc/image/logo_grey.png) no-repeat;
|
|
}
|
|
|
|
.phabricator-main-menu-logo span {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* - Expand/Collapse Button ----------------------------------------------------
|
|
|
|
On phones, the menu switches to a vertical layout and uses a button to expand
|
|
or collapse the items.
|
|
|
|
*/
|
|
|
|
.phabricator-main-menu-expand-button {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 10px;
|
|
display: block;
|
|
width: 40px;
|
|
height: 28px;
|
|
text-align: center;
|
|
background: #22292d url(/rsrc/image/lines.png) no-repeat 8px 6px;
|
|
border-radius: 6px;
|
|
|
|
border: 1px solid #111111;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
|
0 1px 0 rgba(255, 255, 255, 0.075);
|
|
}
|
|
|
|
.device-desktop .phabricator-main-menu-expand-button {
|
|
display: none;
|
|
}
|
|
|
|
.device-tablet .phabricator-main-menu-expand-button,
|
|
.device-phone .phabricator-main-menu-expand-button {
|
|
display: block;
|
|
}
|
|
|
|
.phabricator-main-menu-expand-button span {
|
|
display: none;
|
|
}
|
|
|
|
.phabricator-main-menu-reveal .phabricator-main-menu-expand-button {
|
|
background-color: #55595d;
|
|
}
|
|
|
|
|
|
/* - Icon Menus ----------------------------------------------------------------
|
|
|
|
These are the small icons for actions like "Settings" and "Log Out" which
|
|
appear on the right side of the main menu. On tablets and phones these layout
|
|
vertically.
|
|
|
|
*/
|
|
|
|
.phabricator-main-menu-icon {
|
|
width: 26px;
|
|
height: 26px;
|
|
margin: 9px 6px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.device-desktop .phabricator-main-menu-icon-label {
|
|
display: none;
|
|
}
|
|
|
|
.device-tablet .phabricator-main-menu-icon-label,
|
|
.device-phone .phabricator-main-menu-icon-label {
|
|
font-weight: bold;
|
|
color: #eeeeee;
|
|
position: absolute;
|
|
display: block;
|
|
line-height: 44px;
|
|
left: 60px;
|
|
right: 0px;
|
|
top: 0px;
|
|
}
|
|
|
|
.device-tablet .phabricator-main-menu-icon,
|
|
.device-phone .phabricator-main-menu-icon {
|
|
margin-left: 20px;
|
|
position: absolute;
|
|
}
|
|
|
|
.main-menu-item-icon-profile {
|
|
background-repeat: no-repeat;
|
|
background-size: 26px 26px;
|
|
}
|
|
|
|
.device-desktop .main-menu-item-icon-profile {
|
|
background-position: 12px 9px;
|
|
margin: 0 6px;
|
|
padding: 0 12px;
|
|
height: 44px;
|
|
border-width: 0 1px;
|
|
border-style: solid;
|
|
border-color: #44494d;
|
|
}
|
|
|
|
.main-menu-item-icon-profile-not-selected:hover {
|
|
background-color: #44494d;
|
|
}
|
|
|
|
.main-menu-item-icon-profile-selected {
|
|
background-color: #44494d;
|
|
}
|
|
|
|
/* - Search --------------------------------------------------------------------
|
|
|
|
The main search input in the menu bar.
|
|
|
|
*/
|
|
|
|
.device-desktop .phabricator-main-menu-search {
|
|
width: 220px;
|
|
}
|
|
|
|
.phabricator-main-menu-search-container {
|
|
padding: 10px 0;
|
|
position: relative;
|
|
height: 24px;
|
|
}
|
|
|
|
.phabricator-main-menu-search-target {
|
|
position: absolute;
|
|
top: 46px;
|
|
}
|
|
|
|
.device-desktop .phabricator-main-menu-search-target {
|
|
width: 320px;
|
|
margin-left: -150px;
|
|
}
|
|
|
|
.device-tablet .phabricator-main-menu-search-target,
|
|
.device-phone .phabricator-main-menu-search-target {
|
|
width: 100%;
|
|
margin-left: -25px;
|
|
|
|
}
|
|
|
|
.device-desktop .phabricator-main-menu-search-container {
|
|
margin: 0 8px 0 50px;
|
|
}
|
|
|
|
.device-tablet .phabricator-main-menu-search-container,
|
|
.device-phone .phabricator-main-menu-search-container {
|
|
margin: 0 18px 0 60px;
|
|
}
|
|
|
|
.phabricator-main-menu-search input {
|
|
outline: 0;
|
|
margin: 0;
|
|
|
|
width: 100%;
|
|
right: 0;
|
|
position: absolute;
|
|
|
|
border: 1px solid #333333;
|
|
border-radius: 12px;
|
|
background: #555555;
|
|
height: 12px;
|
|
line-height: 12px;
|
|
box-shadow: 0px 1px 1px rgba(128, 128, 128, 0.25);
|
|
padding: 6px 32px 6px 10px;
|
|
}
|
|
|
|
.phabricator-main-menu-search input:focus {
|
|
background: #c9c9c9;
|
|
}
|
|
|
|
.phabricator-main-menu-search input.jx-typeahead-placeholder {
|
|
color: #999999;
|
|
}
|
|
|
|
.phabricator-main-menu-search button {
|
|
position: absolute;
|
|
color: transparent;
|
|
background: transparent 5px 6px url(/rsrc/image/search.png) no-repeat;
|
|
border: none;
|
|
outline: none;
|
|
box-shadow: none;
|
|
|
|
height: 20px;
|
|
width: 20px;
|
|
top: 11px;
|
|
right: 6px;
|
|
}
|
|
|
|
.phabricator-main-menu-search-target div.jx-typeahead-results {
|
|
border-radius: 4px;
|
|
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.35);
|
|
border: 1px solid #33393d;
|
|
}
|
|
|
|
.phabricator-main-menu-search-target div.jx-typeahead-results a.jx-result {
|
|
border: 0;
|
|
}
|
|
|
|
.phabricator-main-menu-search-target div.jx-typeahead-results a.focused,
|
|
.phabricator-main-menu-search-target div.jx-typeahead-results a:hover {
|
|
background: #3875d7;
|
|
}
|
|
|
|
.phabricator-main-search-typeahead-result {
|
|
display: block;
|
|
padding: 4px 4px 4px 38px;
|
|
background-position: 4px 4px;
|
|
background-size: 25px 25px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.phabricator-main-search-typeahead-result .result-name {
|
|
display: block;
|
|
font-weight: bold;
|
|
color: #444444;
|
|
}
|
|
|
|
.focused .phabricator-main-search-typeahead-result .result-name,
|
|
a:hover .phabricator-main-search-typeahead-result .result-name {
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.phabricator-main-search-typeahead-result .result-type {
|
|
color: #888888;
|
|
}
|
|
|
|
.focused .phabricator-main-search-typeahead-result .result-type,
|
|
a:hover .phabricator-main-search-typeahead-result .result-type {
|
|
color: #dddddd;
|
|
}
|
|
|
|
|
|
|
|
/* - Collapsible ---------------------------------------------------------------
|
|
|
|
By default, groups are collapsible, which means they'll be hidden on phones
|
|
and respond to the menu toggle button.
|
|
|
|
*/
|
|
|
|
.device-tablet .phabricator-main-menu-collapsible,
|
|
.device-phone .phabricator-main-menu-collapsible {
|
|
background: #44494d;
|
|
display: none;
|
|
}
|
|
|
|
.phabricator-main-menu-reveal {
|
|
height: auto;
|
|
}
|
|
|
|
.device-tablet .phabricator-main-menu-reveal .phabricator-main-menu-collapsible,
|
|
.device-phone .phabricator-main-menu-reveal .phabricator-main-menu-collapsible {
|
|
display: block;
|
|
}
|
|
|
|
|
|
/* - Alert ---------------------------------------------------------------------
|
|
|
|
Alert menus are like icon menus but don't obey collapse rules.
|
|
|
|
*/
|
|
|
|
.phabricator-main-menu-alert {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
.phabricator-main-menu-alert-item {
|
|
width: 26px;
|
|
height: 26px;
|
|
margin: 9px;
|
|
display: block;
|
|
}
|
|
|
|
.phabricator-main-menu-alert-indicator {
|
|
display: none;
|
|
}
|
|
|
|
.phabricator-main-menu-alert-indicator-unread {
|
|
position: absolute;
|
|
display: block;
|
|
|
|
right: 0px;
|
|
top: 2px;
|
|
padding: 1px 4px 2px;
|
|
|
|
background: #dd3333;
|
|
|
|
border: 1px solid #aa0000;
|
|
font-size: 11px;
|
|
|
|
box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.5);
|
|
border-radius: 6px;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
}
|