1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-09-21 01:38:48 +02:00
phorge-phorge/webroot/rsrc/css/application/conpherence/menu.css
epriestley f8ff590360 Render Conpherence threads as a separate menu inside the layout, not a side nav
Summary: Currently, the thread list is in a standard side nav, but that makes it awkward to render (rendering logic needs to live in the base controller) and gives it some bad beahviors (like autohiding on mobile). Instead, move it into its own view and make it a little more custom. Ref T2421.

Test Plan: {F38098}

Reviewers: btrahan

Reviewed By: btrahan

CC: aran, chad

Maniphest Tasks: T2421

Differential Revision: https://secure.phabricator.com/D5504
2013-04-01 12:50:39 -07:00

128 lines
2.6 KiB
CSS

/**
* @provides conpherence-menu-css
*/
.conpherence-layout {
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: 44px;
}
.conpherence-menu-pane {
width: 300px;
position: absolute;
overflow-x: hidden;
overflow-y: auto;
top: 0;
bottom: 0;
}
.conpherence-content-pane {
margin-left: 300px;
position: relative;
}
div.conpherence-layout .phabricator-nav-column-background {
display: block;
width: 300px;
}
.conpherence-menu .conpherence-menu-item-view {
display: block;
height: 70px;
width: 100%;
overflow: hidden;
position: relative;
text-decoration: none;
border-top: solid 1px #3B3D3E;
border-bottom: solid 1px #1C1F21;
border-right: 0;
border-left: 2px solid transparent;
}
.conpherence-menu .conpherence-selected {
background: rgba(0, 0, 0, .6);
border-left: 2px solid #66CCFF;
}
.conpherence-menu .conpherence-menu-item-view:hover {
background-image: url('/rsrc/image/texture/dark-menu-hover.png');
}
.conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-image {
top: 6px;
left: 6px;
display: block;
position: absolute;
width: 50px;
height: 50px;
border: 4px solid rgb(29, 32, 34);
border-radius: 2px;
}
.conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-title {
display: block;
margin-top: 12px;
margin-left: 70px;
text-align: left;
font-weight: bold;
font-size: 12px;
color: #ffffff;
text-shadow: 0px 1px 1px #000000;
}
.conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-subtitle {
display: block;
color: #bfbfbf;
font-size: 11px;
margin-top: 2px;
margin-left: 70px;
font-style: italic;
}
.conpherence-menu .conpherence-menu-item-view
.conpherence-menu-item-message-text {
display: block;
color: #66CCFF;
font-size: 12px;
margin-top: 4px;
margin-left: 70px;
}
.conpherence-menu .conpherence-menu-item-view
.conpherence-menu-item-unread-count {
position: absolute;
left: 48px;
top: 3px;
background: #f00;
border-radius: 10px;
color: white;
font-weight: bold;
padding: 1px 6px 2px;
border: 1px solid #a00;
font-size: 12px;
}
.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: 10px;
right: 12px;
color: white;
font-size: 12px;
}
.no-conpherences-menu-item {
color: #a1a5a9;
border-top: solid 1px #3B3D3E;
padding: 20px 0;
margin: 0px auto;
width: 300px;
text-align: center;
}