1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-02 11:42:42 +01:00
phorge-phorge/webroot/rsrc/css/application/conpherence/menu.css
Chad Little 6fc867d382 Update Conpherence full for common colors / styles
Summary: Conpherence Full modernize pass, setting standard space and colors on all widget panels. Moved menu back to 240px as the narrow column wasn't really usefull. Removed 'subtitle' on menu, seems simpler but almost under-designed. Subtitle isn't particularly useful and I plan on adding audience icons next (single, group, project, public) so I think this is the right direction.

Test Plan:
Tested with and without number columns on the menu, test with files, calendar dates, removing participants.

{F337941}

{F337942}

{F337943}

Reviewers: epriestley, btrahan

Reviewed By: btrahan

Subscribers: Korvin, epriestley

Differential Revision: https://secure.phabricator.com/D12078
2015-03-17 14:01:45 -07:00

185 lines
3.6 KiB
CSS

/**
* @provides conpherence-menu-css
*/
.conpherence-layout {
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: 44px;
background: #fff;
}
.conpherence-layout .conpherence-no-threads {
text-align: center;
position: fixed;
left: 240px;
right: 241px;
top: 76px;
bottom: 0px;
min-width: 300px;
width: auto;
}
.device .conpherence-layout .conpherence-no-threads {
left: 0;
right: 0;
width: 100%;
}
.conpherence-layout .conpherence-no-threads .text {
margin: 0px 0px 16px 0px;
}
.conpherence-menu-pane {
width: 100%;
position: absolute;
overflow-x: hidden;
overflow-y: auto;
top: 0;
bottom: 0;
background: #dbdde0;
border-right: 1px solid {$hovergrey}
}
.conpherence-menu-pane.phabricator-side-menu .phui-list-item-type-label {
padding: 8px 0 6px 8px;
}
.device-desktop .conpherence-layout .conpherence-menu-pane {
width: 240px;
}
.device .conpherence-menu-pane {
top: 41px;
}
.device .conpherence-role-list .conpherence-menu-pane {
top: 0px;
}
.device-phone .conpherence-menu-pane {
-webkit-overflow-scrolling: touch;
}
.conpherence-layout .phabricator-nav-column-background {
display: block;
}
.device .phabricator-nav-column-background {
top: 44px;
}
.device .conpherence-role-thread .conpherence-menu-pane,
.device .conpherence-role-thread .phabricator-nav-column-background {
display: none;
}
.device-desktop .conpherence-content-pane {
margin-left: 241px;
}
.conpherence-content-pane {
display: none;
margin-left: 0px;
position: relative;
}
.device-desktop .conpherence-content-pane,
.device .conpherence-role-thread .conpherence-content-pane {
display: block;
}
.conpherence-menu .conpherence-menu-item-view {
display: block;
height: 38px;
overflow: hidden;
position: relative;
text-decoration: none;
border-left: 3px solid transparent;
}
.conpherence-menu .conpherence-selected {
background: {$hovergrey};
border-left: 3px solid {$sky};
}
.device-desktop .conpherence-menu
.conpherence-selected.conpherence-menu-item-view:hover {
background-color: {$hoverselectedgrey};
}
.conpherence-menu .loading {
font-style: italic;
}
.device-desktop .conpherence-menu .conpherence-menu-item-view:hover {
background-color: {$hovergrey};
}
.conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-image {
top: 5px;
left: 6px;
display: block;
position: absolute;
width: 24px;
height: 24px;
background-size: 24px;
border: 2px solid #fff;
}
.conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-title {
display: block;
margin-top: 10px;
margin-left: 40px;
text-align: left;
font-weight: bold;
font-size: 13px;
color: {$darkbluetext};
text-shadow: 0px 1px 1px #fff;
overflow: hidden;
width: 175px;
text-overflow: ellipsis;
}
.conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-subtitle {
display: none;
}
.conpherence-menu .conpherence-menu-item-view
.conpherence-menu-item-unread-count {
position: absolute;
right: 4px;
top: 11px;
background: {$blue};
border-radius: 2px;
color: #fff;
font-weight: bold;
padding: 0 5px 1px;
font-size: 11px;
}
.conpherence-menu .hide-unread-count .conpherence-menu-item-unread-count,
.conpherence-menu .conpherence-selected .conpherence-menu-item-unread-count {
display: none;
}
.conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-date {
position: absolute;
top: 15px;
right: 16px;
color: {$bluetext};
font-size: 11px;
}
.conpherence-menu-item-header {
font-weight: bold;
text-transform: uppercase;
color: {$bluetext};
}
.no-conpherences-menu-item {
color: {$bluetext};
padding: 4px 12px;
}