Changeset View
Changeset View
Standalone View
Standalone View
webroot/rsrc/css/application/conpherence/durable-column.css
| /** | /** | ||||
| * @provides conpherence-durable-column-view | * @provides conpherence-durable-column-view | ||||
| */ | */ | ||||
| .with-durable-column .phabricator-standard-page-body { | |||||
| margin-right: 300px; | |||||
| } | |||||
| .with-durable-margin .phabricator-standard-page-body { | |||||
| margin-right: 312px; | |||||
| } | |||||
| .with-durable-column .phabricator-main-menu { | |||||
| padding-right: 304px; | |||||
| } | |||||
| .with-durable-margin .phabricator-main-menu { | |||||
| padding-right: 316px; | |||||
| } | |||||
| .with-durable-column | |||||
| .phabricator-global-upload-instructions { | |||||
| font-size: 28px; | |||||
| width: 50%; | |||||
| } | |||||
| .global-upload-mask { | .global-upload-mask { | ||||
| pointer-events: none; | pointer-events: none; | ||||
| } | } | ||||
| .with-durable-column .global-upload-mask { | |||||
| right: 300px; | |||||
| } | |||||
| .with-durable-margin .global-upload-mask { | |||||
| right: 312px; | |||||
| } | |||||
| .conpherence-durable-column { | .conpherence-durable-column { | ||||
| position: fixed; | position: fixed; | ||||
| top: 0; | |||||
| bottom: 0; | bottom: 0; | ||||
| right: 0; | right: 12px; | ||||
| width: 300px; | width: 300px; | ||||
| height: 380px; | |||||
| background: #fff; | background: #fff; | ||||
| box-shadow: 0px 1px 8px rgba(55,55,55, .3); | |||||
| } | } | ||||
| .with-durable-margin .conpherence-durable-column { | .device .conpherence-durable-column { | ||||
| border-right: 12px solid {$lightgreybackground}; | |||||
| } | |||||
| .conpherence-durable-column .loading-mask { | |||||
| position: absolute; | |||||
| top: 90px; | |||||
| bottom: 0; | |||||
| right: 1px; | |||||
| width: 298px; | |||||
| background: #fff; | |||||
| display: none; | display: none; | ||||
| opacity: .6; | |||||
| z-index: 2; | |||||
| } | } | ||||
| .device-desktop .conpherence-durable-column.loading .loading-mask { | .device-desktop .conpherence-durable-column.loading .loading-mask { | ||||
| display: block; | display: block; | ||||
| } | } | ||||
| .conpherence-durable-column-header .conpherence-settings-dropdown { | .conpherence-durable-column-header .conpherence-settings-dropdown { | ||||
| z-index: 1; | z-index: 1; | ||||
| } | } | ||||
| .conpherence-durable-column-header .phabricator-application-menu { | .conpherence-durable-column-header .phabricator-application-menu { | ||||
| display: block; | display: block; | ||||
| float: right; | float: right; | ||||
| padding-right: 4px; | padding-right: 4px; | ||||
| width: 36px; | width: 36px; | ||||
| } | } | ||||
| .conpherence-durable-column-header | |||||
| .phabricator-application-menu .phui-list-item-view.core-menu-item { | .conpherence-durable-column-header .phabricator-application-menu | ||||
| .phui-list-item-view.core-menu-item { | |||||
| display: block; | display: block; | ||||
| } | } | ||||
| .conpherence-durable-column-header | |||||
| .phabricator-application-menu .phui-list-item-name { | .conpherence-durable-column-header .phabricator-application-menu | ||||
| .phui-list-item-name { | |||||
| display: none; | display: none; | ||||
| } | } | ||||
| .conpherence-durable-column-header | |||||
| .phabricator-application-menu .phui-list-item-view { | .conpherence-durable-column-header .phabricator-application-menu | ||||
| .phui-list-item-view { | |||||
| float: left; | float: left; | ||||
| position: relative; | position: relative; | ||||
| width: 36px; | width: 30px; | ||||
| height: 36px; | height: 30px; | ||||
| margin-top: 4px; | margin-top: 2px; | ||||
| } | } | ||||
| .conpherence-durable-column-header | |||||
| .phabricator-application-menu .phui-list-item-href { | .conpherence-durable-column-header .phabricator-application-menu | ||||
| .phui-list-item-href { | |||||
| background: transparent; | background: transparent; | ||||
| border: none; | border: none; | ||||
| padding: 0; | padding: 0; | ||||
| } | } | ||||
| .conpherence-durable-column-header | |||||
| .phabricator-dark-menu .phui-list-item-type-link { | .conpherence-durable-column-header .phabricator-application-menu | ||||
| background: transparent; | |||||
| } | |||||
| .conpherence-durable-column-header | |||||
| .phabricator-application-menu | |||||
| .phui-list-item-view.core-menu-item { | .phui-list-item-view.core-menu-item { | ||||
| display: block; | display: block; | ||||
| } | } | ||||
| .conpherence-durable-column-header { | .conpherence-durable-column-header { | ||||
| border-left: 1px solid rgba({$alphablack},.1); | border-top-right-radius: 3px; | ||||
| border-right: 1px solid rgba({$alphablack},.1); | border-top-left-radius: 3px; | ||||
| background-color: #525867; | |||||
| } | |||||
| .conpherence-durable-column-header | |||||
| .phabricator-main-menu-dropdown.phui-list-sidenav { | |||||
| top: 30px; | |||||
| } | } | ||||
| .conpherence-durable-column-header-text { | .conpherence-durable-column-header-text { | ||||
| float: left; | float: left; | ||||
| padding: 13px 0 12px 12px; | padding: 8px 0 8px 10px; | ||||
| font-size: 15px; | color: #fff; | ||||
| color: {$hoverwhite}; | |||||
| width: 230px; | width: 230px; | ||||
| text-overflow: ellipsis; | text-overflow: ellipsis; | ||||
| overflow: hidden; | overflow: hidden; | ||||
| white-space: nowrap; | white-space: nowrap; | ||||
| text-shadow: 1px 1px 0 rgba(0,0,0,.6); | |||||
| } | |||||
| .conpherence-durable-column-header .phabricator-application-menu | |||||
| .phui-list-item-icon.phui-font-fa { | |||||
| font-size: 14px; | |||||
| margin: 8px 10px; | |||||
| } | } | ||||
| .conpherence-durable-column-header-text .phui-icon-view { | .conpherence-durable-column-header-text .phui-icon-view { | ||||
| color: {$hoverwhite}; | color: #fff; | ||||
| text-shadow: 1px 1px 0 rgba(0,0,0,.6); | |||||
| } | } | ||||
| .conpherence-durable-column-icon-bar { | .conpherence-durable-column-icon-bar { | ||||
| height: 38px; | height: 32px; | ||||
| padding: 4px; | padding: 4px; | ||||
| background-color: {$lightgreybackground}; | background-color: {$lightgreybackground}; | ||||
| } | } | ||||
| .conpherence-durable-column-icon-bar .conpherence-durable-column-thread-icon { | .conpherence-durable-column-icon-bar .conpherence-durable-column-thread-icon { | ||||
| float: left; | float: left; | ||||
| display: block; | display: block; | ||||
| height: 34px; | height: 28px; | ||||
| width: 34px; | width: 28px; | ||||
| border: 2px solid transparent; | border: 2px solid transparent; | ||||
| border-radius: 3px; | border-radius: 3px; | ||||
| margin: 0 4px 0 0; | margin: 0 2px 0 0; | ||||
| } | |||||
| .conpherence-durable-column-icon-bar .conpherence-durable-column-search-button { | |||||
| margin: 4px 0px 0px 0px; | |||||
| } | |||||
| .conpherence-durable-column-icon-bar .phui-button-bar { | |||||
| } | |||||
| .conpherence-durable-column-icon-bar .phui-button-bar a.button.has-icon { | |||||
| height: 21px; | |||||
| } | |||||
| .conpherence-durable-column-icon-bar .phui-button-bar .button .phui-icon-view { | |||||
| top: 8px; | |||||
| } | } | ||||
| .conpherence-durable-column-icon-bar | .conpherence-durable-column-icon-bar | ||||
| .conpherence-durable-column-thread-icon.selected { | .conpherence-durable-column-thread-icon.selected { | ||||
| border-color: {$sky}; | border-color: {$sky}; | ||||
| } | } | ||||
| .conpherence-durable-column-icon-bar | .conpherence-durable-column-icon-bar | ||||
| .conpherence-durable-column-thread-icon span { | .conpherence-durable-column-thread-icon span { | ||||
| position: relative; | position: relative; | ||||
| display: block; | display: block; | ||||
| width: 30px; | width: 24px; | ||||
| height: 30px; | height: 24px; | ||||
| top: 2px; | top: 2px; | ||||
| left: 2px; | left: 2px; | ||||
| background-size: 30px 30px; | background-size: 24px 24px; | ||||
| } | } | ||||
| .conpherence-durable-column-body { | .conpherence-durable-column-body { | ||||
| position: absolute; | position: absolute; | ||||
| top: 44px; | top: 34px; | ||||
| bottom: 0; | bottom: 0; | ||||
| right: 0; | right: 0; | ||||
| left: 0; | left: 0; | ||||
| border-left: 1px solid {$lightblueborder}; | |||||
| } | |||||
| .with-durable-margin .conpherence-durable-column-body { | |||||
| border-right: 1px solid {$lightblueborder}; | |||||
| } | } | ||||
| .conpherence-durable-column-main { | .conpherence-durable-column-main { | ||||
| position: absolute; | position: absolute; | ||||
| top: 46px; | top: 40px; | ||||
| bottom: 134px; | bottom: 36px; | ||||
| left: 0; | left: 0; | ||||
| right: 0; | right: 0; | ||||
| overflow-x: hidden; | overflow-x: hidden; | ||||
| border-top: 1px solid {$thinblueborder}; | border-top: 1px solid {$thinblueborder}; | ||||
| } | } | ||||
| .conpherence-durable-column-transactions { | .conpherence-durable-column-transactions { | ||||
| padding: 8px 12px 0; | padding: 8px 12px 0; | ||||
| Show All 14 Lines | |||||
| .conpherence-durable-column-transactions .conpherence-transaction-view { | .conpherence-durable-column-transactions .conpherence-transaction-view { | ||||
| background: none; | background: none; | ||||
| margin: 0; | margin: 0; | ||||
| padding: 4px 0; | padding: 4px 0; | ||||
| min-height: 0; | min-height: 0; | ||||
| } | } | ||||
| .conpherence-durable-column-transactions | .conpherence-durable-column-transactions .conpherence-transaction-view | ||||
| .conpherence-transaction-view | |||||
| .conpherence-message { | .conpherence-message { | ||||
| word-wrap: break-word; | word-wrap: break-word; | ||||
| } | } | ||||
| .conpherence-durable-column-transactions .conpherence-transaction-detail { | .conpherence-durable-column-transactions .conpherence-transaction-detail { | ||||
| border: 0; | border: 0; | ||||
| margin: 0; | margin: 0; | ||||
| } | } | ||||
| .conpherence-durable-column-transactions .conpherence-transaction-detail | .conpherence-durable-column-transactions .conpherence-transaction-detail | ||||
| .conpherence-transaction-header { | .conpherence-transaction-header { | ||||
| background: none; | background: none; | ||||
| padding: 0 0 2px 0; | padding: 0 0 2px 0; | ||||
| } | } | ||||
| .conpherence-durable-column-transactions | .conpherence-durable-column-transactions | ||||
| .conpherence-transaction-view.date-marker { | .conpherence-transaction-view.date-marker { | ||||
| margin: 20px 0px 8px; | margin: 20px 0px 8px; | ||||
| } | } | ||||
| .conpherence-durable-column-transactions | .conpherence-durable-column-transactions | ||||
| ▲ Show 20 Lines • Show All 46 Lines • ▼ Show 20 Lines | .conpherence-transaction-content { | ||||
| background: #fff; | background: #fff; | ||||
| padding: 0 0 8px 0; | padding: 0 0 8px 0; | ||||
| } | } | ||||
| .conpherence-durable-column-textarea { | .conpherence-durable-column-textarea { | ||||
| position: absolute; | position: absolute; | ||||
| left: 0; | left: 0; | ||||
| right: 0; | right: 0; | ||||
| bottom: 34px; | bottom: 0; | ||||
| height: 100px; | height: 36px; | ||||
| margin: 0; | margin: 0; | ||||
| border-width: 1px 0; | border-width: 1px 0 0 0; | ||||
| border-style: solid; | border-style: solid; | ||||
| border-top-color: {$thinblueborder}; | border-top-color: {$thinblueborder}; | ||||
| border-bottom-color: {$thinblueborder}; | padding: 8px; | ||||
| padding: 8px 12px; | |||||
| width: 100%; | width: 100%; | ||||
| resize: none; | resize: none; | ||||
| } | } | ||||
| .conpherence-durable-column-textarea:focus { | .conpherence-durable-column-textarea:focus { | ||||
| outline: 0; | outline: 0; | ||||
| border-top-color: {$sky}; | border-top-color: {$lightblueborder}; | ||||
| border-bottom-color: {$sky}; | |||||
| box-shadow: none; | box-shadow: none; | ||||
| } | } | ||||
| .conpherence-durable-column-footer { | .conpherence-durable-column-footer { | ||||
| position: absolute; | display: none; | ||||
| height: 26px; | |||||
| padding: 4px 8px 4px 12px; | |||||
| left: 0; | |||||
| right: 0; | |||||
| bottom: 0; | |||||
| background-color: {$lightgreybackground}; | |||||
| } | |||||
| .conpherence-durable-column-footer button { | |||||
| float: right; | |||||
| } | |||||
| .conpherence-durable-column-status { | |||||
| vertical-align: middle; | |||||
| line-height: 24px; | |||||
| font-size: {$smallerfontsize}; | |||||
| color: {$lightbluetext}; | |||||
| } | } | ||||