mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-03 12:12:43 +01:00
df0c3df3cc
Summary: A few things - pht Maniphest where I could - implement dust background - optimize pages for mobile - adds aphront-two-column-layout - reworks maniphest page with two column layout - tweaks task table for mobile, though we should move to object-list-view Stopping here as I want to get feedback in. Super excited about mobile and the new tasks views. Only sort of excited about the sidebar filters, they need more UI work, but we should talk about that. Test Plan: Test Maniphest, Differential, and Homepage views. Sort tasks, make reports Reviewers: epriestley, btrahan Reviewed By: btrahan CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5314
371 lines
6.5 KiB
CSS
371 lines
6.5 KiB
CSS
/**
|
|
* @provides aphront-form-view-css
|
|
*/
|
|
|
|
/**
|
|
* These styles are overrides for .aphront-form-view
|
|
*/
|
|
.aphront-form-view-shaded {
|
|
border: 1px solid #d4dae0;
|
|
background: #f4f5f8;
|
|
}
|
|
|
|
.aphront-form-view-padded {
|
|
padding: 1em;
|
|
}
|
|
|
|
.aphront-form-view label.aphront-form-label {
|
|
padding-top: 4px;
|
|
width: 19%;
|
|
float: left;
|
|
text-align: right;
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
color: #666;
|
|
}
|
|
|
|
.device-phone .aphront-form-view label.aphront-form-label {
|
|
display: block;
|
|
float: none;
|
|
text-align: left;
|
|
width: 100%;
|
|
color: #777;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.aphront-form-input {
|
|
margin-left: 20%;
|
|
margin-right: 25%;
|
|
width: 55%;
|
|
}
|
|
|
|
.device-phone .aphront-form-input {
|
|
margin-left: 0%;
|
|
margin-right: 0%;
|
|
width: 100%;
|
|
}
|
|
|
|
.aphront-form-control-text .aphront-form-input input,
|
|
.aphront-form-control-password .aphront-form-input input {
|
|
font-size: 13px;
|
|
padding: 4px 4px;
|
|
color: #333;
|
|
vertical-align: middle;
|
|
background-color: #ffffff;
|
|
border: 1px solid #96A6C5;
|
|
border-radius: 3px;
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
|
}
|
|
|
|
.aphront-form-error {
|
|
width: 23%;
|
|
float: right;
|
|
color: #aa0000;
|
|
font-weight: bold;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.device-phone .aphront-form-error {
|
|
float: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.device-phone .aphront-form-drag-and-drop-upload {
|
|
display: none;
|
|
}
|
|
|
|
.aphront-form-required {
|
|
font-weight: normal;
|
|
color: #888888;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.aphront-form-input input,
|
|
.aphront-form-input textarea {
|
|
font-size: 13px;
|
|
display: block;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
.aphront-form-input textarea {
|
|
height: 12em;
|
|
}
|
|
|
|
.aphront-form-control {
|
|
padding: 4px;
|
|
}
|
|
|
|
.aphront-form-control-submit button,
|
|
.aphront-form-control-submit a.button {
|
|
float: right;
|
|
margin: 0.5em 0 0em 2%;
|
|
}
|
|
|
|
.aphront-form-control-textarea textarea.aphront-textarea-very-short {
|
|
height: 3em;
|
|
border: 1px solid #96A6C5;
|
|
border-radius: 3px;
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
|
}
|
|
|
|
.aphront-form-control-textarea textarea.aphront-textarea-very-tall {
|
|
height: 24em;
|
|
}
|
|
|
|
.aphront-form-control-select .aphront-form-input {
|
|
padding-top: 2px;
|
|
}
|
|
|
|
|
|
.aphront-form-view .aphront-form-caption {
|
|
font-size: 12px;
|
|
color: #888;
|
|
padding: 2px;
|
|
text-align: right;
|
|
margin-right: 25%;
|
|
margin-left: 20%;
|
|
}
|
|
|
|
.device-phone .aphront-form-view .aphront-form-caption {
|
|
margin-right: 0%;
|
|
}
|
|
|
|
/* override for when inside an aphront-panel-view */
|
|
.aphront-panel-view .aphront-form-view h1 {
|
|
padding: 0em 0em .8em 0em;
|
|
}
|
|
|
|
.aphront-form-instructions {
|
|
margin: 0.75em 3% 1.25em;
|
|
}
|
|
|
|
.aphront-form-important {
|
|
margin: .5em 0;
|
|
background: #ffffdd;
|
|
padding: .5em 1em;
|
|
}
|
|
.aphront-form-important code {
|
|
display: block;
|
|
padding: .25em;
|
|
margin: .5em 2em;
|
|
}
|
|
|
|
|
|
.aphront-form-control-static .aphront-form-input,
|
|
.aphront-form-control-markup .aphront-form-input {
|
|
padding-top: 4px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.aphront-form-control-togglebuttons .aphront-form-input {
|
|
padding: 2px 0 0 0;
|
|
}
|
|
|
|
table.aphront-form-control-radio-layout,
|
|
table.aphront-form-control-checkbox-layout {
|
|
margin-top: 3px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
table.aphront-form-control-radio-layout th,
|
|
table.aphront-form-control-checkbox-layout th {
|
|
padding-top: 2px;
|
|
padding-left: 0.35em;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.aphront-form-control-radio-layout td input,
|
|
.aphront-form-control-checkbox-layout td input {
|
|
margin-top: 4px;
|
|
width: auto;
|
|
}
|
|
|
|
.aphront-form-radio-caption {
|
|
font-size: 11px;
|
|
color: #444444;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.aphront-form-control-image span {
|
|
margin: 0px 4px 0px 2px;
|
|
}
|
|
|
|
.aphront-form-control-image .default-image {
|
|
display: inline;
|
|
width: 12px;
|
|
}
|
|
|
|
.aphront-form-input hr {
|
|
border: none;
|
|
background: #bbbbbb;
|
|
height: 1px;
|
|
position: relative;
|
|
}
|
|
|
|
.aphront-form-inset {
|
|
margin: 0 0 1em;
|
|
padding: .75em;
|
|
background: #f3f3f3;
|
|
border: 1px solid #afafaf;
|
|
}
|
|
|
|
.aphront-form-drag-and-drop-file-list {
|
|
width: 400px;
|
|
}
|
|
|
|
.drag-and-drop-instructions {
|
|
color: #333333;
|
|
font-size: 11px;
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
.drag-and-drop-file-target {
|
|
border: 1px dashed #bfbfbf;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.aphront-textarea-drag-and-drop {
|
|
background: #99ff99;
|
|
border-color: #669966;
|
|
}
|
|
|
|
.aphront-form-crop .crop-box {
|
|
cursor: move;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.aphront-form-crop .crop-box .crop-image {
|
|
position: relative;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
|
|
|
|
.calendar-button {
|
|
display: inline;
|
|
background: url(/rsrc/image/icon/fatcow/calendar_edit.png)
|
|
no-repeat center center;
|
|
padding: 8px 12px;
|
|
margin: 2px 8px 2px 2px;
|
|
position: relative;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.aphront-form-date-container {
|
|
position: relative;
|
|
display: inline;
|
|
}
|
|
|
|
.aphront-form-date-container select {
|
|
margin: 2px;
|
|
display: inline;
|
|
}
|
|
|
|
.aphront-form-date-container input.aphront-form-date-time-input {
|
|
width: 7em;
|
|
display: inline;
|
|
}
|
|
|
|
.fancy-datepicker {
|
|
position: absolute;
|
|
width: 240px;
|
|
}
|
|
|
|
.fancy-datepicker-core {
|
|
padding: 1px;
|
|
font-size: 11px;
|
|
font-family: Verdana;
|
|
text-align: center;
|
|
}
|
|
|
|
.fancy-datepicker-core .month-table,
|
|
.fancy-datepicker-core .day-table {
|
|
margin: 0 auto;
|
|
border-collapse: separate;
|
|
border-spacing: 1px;
|
|
width: 100%;
|
|
}
|
|
|
|
.fancy-datepicker-core .month-table {
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.fancy-datepicker-core .month-table td.lrbutton {
|
|
width: 20%;
|
|
}
|
|
|
|
.fancy-datepicker-core .month-table td {
|
|
padding: 4px;
|
|
font-weight: bold;
|
|
color: #444444;
|
|
}
|
|
|
|
.fancy-datepicker-core .month-table td.lrbutton {
|
|
background: #e6e6e6;
|
|
border: 1px solid;
|
|
border-color: #a6a6a6 #969696 #868686 #a6a6a6;
|
|
}
|
|
|
|
.fancy-datepicker-core .day-table td {
|
|
overflow: hidden;
|
|
background: #f6f6f6;
|
|
vertical-align: center;
|
|
text-align: center;
|
|
border: 1px solid #d6d6d6;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.fancy-datepicker-core .day-table td.day-placeholder {
|
|
border-color: transparent;
|
|
background: transparent;
|
|
}
|
|
|
|
.fancy-datepicker-core .day-table td.weekend {
|
|
color: #666666;
|
|
border-color: #e6e6e6;
|
|
}
|
|
|
|
.fancy-datepicker-core .day-table td.day-name {
|
|
background: transparent;
|
|
border: 1px transparent;
|
|
vertical-align: bottom;
|
|
color: #888888;
|
|
}
|
|
|
|
.fancy-datepicker-core .day-table td.today {
|
|
background: #eeee99;
|
|
border-color: #aaaa66;
|
|
}
|
|
|
|
.fancy-datepicker-core .day-table td.datepicker-selected {
|
|
background: #0099ff;
|
|
border-color: #0066cc;
|
|
}
|
|
|
|
.fancy-datepicker-core td {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.fancy-datepicker-core td.novalue {
|
|
cursor: inherit;
|
|
}
|
|
|
|
.picker-open .calendar-button,
|
|
.fancy-datepicker-core {
|
|
background-color: white;
|
|
border: 1px solid #777777;
|
|
|
|
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.picker-open .calendar-button {
|
|
border-left: 1px solid white;
|
|
}
|
|
|
|
.login-to-comment {
|
|
padding: 12px;
|
|
float: right;
|
|
}
|