mirror of
https://we.phorge.it/source/phorge.git
synced 2024-09-21 01:38:48 +02:00
a56ca7a043
Summary: removes the whole custom image thing, instead using a more standard application crumbs. Gives this glorious space back to the compose area which is now tens of pixels taller. Also defaults it to the people widget. Basically, fixes T3160. For now, you **CAN NOT** edit the title of a conpherence. I didn't want to jam in too much here. Next diff will be to change the widget icons into the dropdown switcher, which will also bring back the editing of titles. Test Plan: looked at conpherence and it was pretty. Resized it vigorously and it wasn't too bad. Reviewers: epriestley Reviewed By: epriestley CC: chad, aran, Korvin Maniphest Tasks: T3160 Differential Revision: https://secure.phabricator.com/D5998
427 lines
10 KiB
CSS
427 lines
10 KiB
CSS
/**
|
|
* @provides conpherence-widget-pane-css
|
|
*/
|
|
|
|
.conpherence-widget-pane {
|
|
position: fixed;
|
|
right: 0px;
|
|
top: 76px;
|
|
width: 280px;
|
|
height: 100%;
|
|
border-width: 0 0 0 1px;
|
|
border-color: #CCC;
|
|
border-style: solid;
|
|
background: url('/rsrc/image/texture/dust_background.jpeg');
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.device .conpherence-widget-pane {
|
|
top: 44px;
|
|
width: 100%;
|
|
}
|
|
|
|
.conpherence-widget-pane .aphront-form-input {
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.conpherence-widget-pane .aphront-form-inset {
|
|
border: 0;
|
|
background: url('/rsrc/image/texture/dust_background.jpeg');
|
|
}
|
|
|
|
.conpherence-widget-pane .widgets-header {
|
|
background-color: #d8dce2;
|
|
box-shadow: 0px 2px 2px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.conpherence-widget-pane .widgets-header .widgets-header-icon-holder {
|
|
height: 40px;
|
|
width: 280px;
|
|
margin: 0px auto;
|
|
}
|
|
|
|
.device-desktop .conpherence-widget-pane .widgets-header
|
|
.widgets-header-icon-holder {
|
|
width: 175px;
|
|
}
|
|
|
|
.conpherence-widget-pane .widgets-header .sprite-conpherence {
|
|
display: block;
|
|
width: 29px;
|
|
height: 34px;
|
|
margin: 4px 0px 0px 14px;
|
|
float: left;
|
|
clear: none;
|
|
}
|
|
|
|
.conpherence-widget-pane .widgets-header .conpherence_list_on,
|
|
.conpherence-widget-pane .widgets-header .conpherence_conversation_on,
|
|
.conpherence-widget-pane .widgets-header .conpherence_people_on,
|
|
.conpherence-widget-pane .widgets-header .conpherence_files_on,
|
|
.conpherence-widget-pane .widgets-header .conpherence_calendar_on,
|
|
.conpherence-widget-pane .widgets-header .conpherence_settings_on {
|
|
border-bottom: 3px solid #525252;
|
|
}
|
|
|
|
.device-desktop .conpherence-widget-pane .widgets-header
|
|
#conpherence-menu-pane-toggle,
|
|
.device-desktop .conpherence-widget-pane .widgets-header
|
|
#conpherence-message-pane-toggle {
|
|
display: none;
|
|
}
|
|
|
|
.conpherence-widget-pane .widgets-body {
|
|
position: fixed;
|
|
overflow-y: auto;
|
|
top: 116px;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
}
|
|
|
|
.device .conpherence-widget-pane .widgets-body {
|
|
top: 85px;
|
|
}
|
|
|
|
/* files widget */
|
|
|
|
.conpherence-widget-pane #widgets-files .file-entry {
|
|
padding: 12px 0px 14px 0px;
|
|
}
|
|
.conpherence-widget-pane #widgets-files .file-icon {
|
|
position: relative;
|
|
top: 0px;
|
|
left: 8px;
|
|
width: 32px;
|
|
height: 32px;
|
|
float: left;
|
|
}
|
|
.conpherence-widget-pane #widgets-files .file-title {
|
|
display: block;
|
|
position: relative;
|
|
top: -4px;
|
|
left: 20px;
|
|
overflow-x: hidden;
|
|
width: 210px;
|
|
font-weight: bold;
|
|
}
|
|
.conpherence-widget-pane #widgets-files .file-uploaded-by {
|
|
color: #a1a5a9;
|
|
position: relative;
|
|
top: 0px;
|
|
left: 20px;
|
|
width: 210px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.conpherence-widget-pane #widgets-files .file-extra {
|
|
display: block;
|
|
height: 120px;
|
|
width: 160px;
|
|
margin: 8px 0px 8px 52px;
|
|
border: 1px solid #7289b7;
|
|
box-shadow: 0 0px 5px rgba(0,0,0,.25);
|
|
background: #fff;
|
|
}
|
|
|
|
.conpherence-widget-pane #widgets-files .divider {
|
|
float: left;
|
|
clear: both;
|
|
width: 210px;
|
|
margin: 8px 0px 0px 50px;
|
|
border: 1px dashed #bfbfbf;
|
|
}
|
|
|
|
.device .conpherence-widget-pane #widgets-files .file-title,
|
|
.device .conpherence-widget-pane #widgets-files .file-uploaded-by {
|
|
width: 82%;
|
|
}
|
|
.device .conpherence-widget-pane #widgets-files .divider {
|
|
width: 80%;
|
|
margin: 8px 0px 0px 10%;
|
|
}
|
|
|
|
/* calendar widget */
|
|
|
|
.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view {
|
|
margin: 2px 0px 0px 0px;
|
|
width: 280px;
|
|
}
|
|
.device .conpherence-widget-pane #widgets-calendar .aphront-multi-column-view {
|
|
width: 100%;
|
|
}
|
|
.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
|
|
.aphront-multi-column-column {
|
|
background: white;
|
|
border-right: 1px solid #bfbfbf;
|
|
text-align: center;
|
|
}
|
|
.device-phone .conpherence-widget-pane #widgets-calendar
|
|
.aphront-multi-column-fluid .aphront-multi-column-5-up
|
|
.aphront-multi-column-column-outer {
|
|
width: 20%;
|
|
margin-bottom: 0px;
|
|
}
|
|
.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
|
|
.aphront-multi-column-column-last {
|
|
border-right: 0;
|
|
}
|
|
.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
|
|
.aphront-multi-column-column .day-column,
|
|
.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
|
|
.aphront-multi-column-column .day-column-active {
|
|
color: #bfbfbf;
|
|
background-color: white;
|
|
font-weight: bold;
|
|
padding: 0px 0px 10px 0px;
|
|
}
|
|
.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
|
|
.aphront-multi-column-column .day-column-active {
|
|
color: black;
|
|
}
|
|
.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
|
|
.aphront-multi-column-column .present ,
|
|
.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
|
|
.aphront-multi-column-column .sporadic ,
|
|
.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
|
|
.aphront-multi-column-column .away {
|
|
height: 10px;
|
|
margin: 5px 0px 5px 0px;
|
|
width: 100%;
|
|
}
|
|
.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
|
|
.aphront-multi-column-column .present {
|
|
background-color: white;
|
|
}
|
|
.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
|
|
.aphront-multi-column-column .sporadic {
|
|
background-color: rgb(222, 226, 232);
|
|
}
|
|
.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
|
|
.aphront-multi-column-column .away {
|
|
background-color: rgb(102, 204, 255);
|
|
}
|
|
.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
|
|
.aphront-multi-column-column .day-name {
|
|
padding: 5px 0px 0px 0px;
|
|
font-size: 12px;
|
|
}
|
|
.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
|
|
.aphront-multi-column-column .day-number {
|
|
font-size: 16px;
|
|
padding: 5px 0px 5px 0px;
|
|
}
|
|
.conpherence-widget-pane #widgets-calendar .day-header {
|
|
float: left;
|
|
clear: both;
|
|
background-color: #d8dce2;
|
|
border-top: 1px solid #bfbfbf;
|
|
border-bottom: 1px solid #bfbfbf;
|
|
padding: 5px 10px 5px 10px;
|
|
width: 260px;
|
|
}
|
|
.device .conpherence-widget-pane #widgets-calendar .day-header {
|
|
width: 98%;
|
|
padding: 5px 1% 5px 1%;
|
|
}
|
|
.conpherence-widget-pane #widgets-calendar .day-header .day-name {
|
|
float: left;
|
|
clear: none;
|
|
}
|
|
.conpherence-widget-pane #widgets-calendar .day-header .day-date {
|
|
float: right;
|
|
clear: none;
|
|
}
|
|
|
|
.conpherence-widget-pane #widgets-calendar .divider {
|
|
float: left;
|
|
clear: both;
|
|
width: 260px;
|
|
margin: 0px 0px 0px 10px;
|
|
border: 1px dashed #bfbfbf;
|
|
}
|
|
.conpherence-widget-pane #widgets-calendar .divider {
|
|
width: 96%;
|
|
margin: 0px 0px 0px 2%;
|
|
}
|
|
.conpherence-widget-pane #widgets-calendar .spacer {
|
|
float: left;
|
|
clear: both;
|
|
height: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
.conpherence-widget-pane #widgets-calendar .user-status {
|
|
float: left;
|
|
clear: both;
|
|
height: 60px;
|
|
width: 280px;
|
|
}
|
|
.device .conpherence-widget-pane #widgets-calendar .user-status {
|
|
width: 100%;
|
|
}
|
|
|
|
.conpherence-widget-pane #widgets-calendar .user-status .icon {
|
|
border-radius: 10px;
|
|
position: relative;
|
|
top: 24px;
|
|
left: 10px;
|
|
height: 16px;
|
|
width: 16px;
|
|
box-shadow: 0px 0px 1px #000;
|
|
}
|
|
|
|
.conpherence-widget-pane #widgets-calendar .sporadic .icon {
|
|
background-color: rgb(222, 226, 232);
|
|
}
|
|
|
|
.conpherence-widget-pane #widgets-calendar .away .icon {
|
|
background-color: rgb(102, 204, 255);
|
|
}
|
|
|
|
.conpherence-widget-pane #widgets-calendar .user-status .epoch-range {
|
|
float: right;
|
|
font-style: italic;
|
|
position: relative;
|
|
top: 24px;
|
|
right: 10px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.conpherence-widget-pane #widgets-calendar .user-status .description {
|
|
position: relative;
|
|
left: 40px;
|
|
top: 0px;
|
|
width: 260px;
|
|
}
|
|
|
|
.conpherence-widget-pane #widgets-calendar .user-status .participant {
|
|
position: relative;
|
|
left: 40px;
|
|
top: 0px;
|
|
font-style: italic;
|
|
font-size: 11px;
|
|
width: 260px;
|
|
}
|
|
|
|
.device .conpherence-widget-pane #widgets-calendar .user-status .description,
|
|
.device .conpherence-widget-pane #widgets-calendar .user-status .participant {
|
|
/* we keep these short so no need to change the width */
|
|
}
|
|
|
|
.conpherence-widget-pane .widget-icon {
|
|
display: block;
|
|
height: 14px;
|
|
width: 14px;
|
|
}
|
|
|
|
.conpherence-widget-pane .phabricator-remarkup-embed-layout-link {
|
|
padding-bottom: 1px;
|
|
}
|
|
|
|
/* people widget */
|
|
.conpherence-widget-pane .people-widget-header {
|
|
float: left;
|
|
width: 280px;
|
|
}
|
|
.conpherence-widget-pane .people-widget-header .divider {
|
|
float: left;
|
|
clear: both;
|
|
width: 260px;
|
|
margin: 0px 0px 0px 10px;
|
|
border: 1px dashed #bfbfbf;
|
|
}
|
|
.device .conpherence-widget-pane .people-widget-header .divider {
|
|
width: 96%;
|
|
margin: 0px 0px 0px 2%;
|
|
}
|
|
.conpherence-widget-pane .people-widget-header .add-people-widget {
|
|
float: left;
|
|
padding: 10px 0px 10px 0px;
|
|
width: 280px;
|
|
}
|
|
|
|
.device .conpherence-widget-pane .people-widget-header,
|
|
.device .conpherence-widget-pane .people-widget-header .add-people-widget {
|
|
width: 100%;
|
|
}
|
|
|
|
.conpherence-widget-pane .people-widget-header .add-people-widget
|
|
.aphront-form-control-tokenizer {
|
|
float: left;
|
|
width: 180px;
|
|
padding: 0px 0px 0px 10px
|
|
}
|
|
.device .conpherence-widget-pane .people-widget-header .add-people-widget
|
|
.aphront-form-control-tokenizer {
|
|
width: 70%;
|
|
}
|
|
.conpherence-widget-pane .people-widget-header .add-people-widget
|
|
.people-add-button {
|
|
float: right;
|
|
margin: 2px 10px 0px 0px;
|
|
padding: 3px 16px 4px 16px;
|
|
}
|
|
@-moz-document url-prefix() {
|
|
.conpherence-widget-pane .people-widget-header .add-people-widget
|
|
.people-add-button {
|
|
margin: -1px 10px 0px 0px;
|
|
}
|
|
}
|
|
.conpherence-widget-pane .person-entry {
|
|
float: left;
|
|
width: 270px;
|
|
clear: both;
|
|
padding: 10px 0px 0px 8px;
|
|
}
|
|
|
|
.device .conpherence-widget-pane .person-entry {
|
|
width: 98%;
|
|
padding: 10px 0px 0px 2%;
|
|
}
|
|
|
|
.conpherence-widget-pane .person-entry a {
|
|
float: left;
|
|
clear: none;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
width: 164px;
|
|
}
|
|
|
|
.conpherence-widget-pane .person-entry .pic {
|
|
float: left;
|
|
clear: left;
|
|
margin: 0px 10px 0px 0px;
|
|
width: 50px;
|
|
padding: 0;
|
|
}
|
|
|
|
.conpherence-widget-pane .person-entry .remove {
|
|
float: right;
|
|
clear: right;
|
|
margin: 0;
|
|
width: 34px;
|
|
height: 36px;
|
|
text-align: center;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
padding: 8px 0px 8px 0px;
|
|
}
|
|
|
|
.conpherence-widget-pane .person-entry .remove:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.conpherence-widget-pane .person-entry .remove .icon {
|
|
color: #bfbfbf;
|
|
}
|
|
|
|
.conpherence-widget-pane .person-entry .remove:hover .icon {
|
|
color: #18559d;
|
|
}
|
|
|
|
/* settings widget */
|
|
.conpherence-widget-pane .notifications-update {
|
|
margin: 2px 0px 0px 8px;
|
|
}
|