mirror of
https://we.phorge.it/source/phorge.git
synced 2024-09-20 17:28:51 +02:00
42c1e39ae6
Summary: makes conpherence switch to a liquid layout once we go from desktop -> less than that. When we make the switch conpherence updates to show a few more "Widgets" -- the list of conpherences and the current conversation -- and the switcher starts working. As you transition from device to device you are automagically forced to have the "conversation" widget toggled on initial change to smaller than desktop and then file widget once you get back to desktop. Generally looks good when I make my browser small. Does not look as good on iOS simulator - in particular there seems to be a weird visual artifact on the "add people" widget that is present in all tokenizers, and the pontificate UI on mobile could use some work. ref T2399. Test Plan: played in Safari, FF, Chrome and iOS Simulator. The first 3 were all pretty spiffy, and otherwise iOS add people widget was a bit ugly. Reviewers: epriestley, chad Reviewed By: epriestley CC: aran, Korvin, AnhNhan Maniphest Tasks: T2399 Differential Revision: https://secure.phabricator.com/D5674
426 lines
10 KiB
CSS
426 lines
10 KiB
CSS
/**
|
|
* @provides conpherence-widget-pane-css
|
|
*/
|
|
|
|
.conpherence-widget-pane {
|
|
position: fixed;
|
|
right: 0px;
|
|
top: 125px;
|
|
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: 165px;
|
|
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%;
|
|
}
|
|
.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;
|
|
}
|