mirror of
https://we.phorge.it/source/phorge.git
synced 2025-03-13 12:54:53 +01:00
fe2a96e37f
Summary: This attempts some consistency in form layouts. Notably, they all now contain headers and are 16px off the sides and tops of pages. Also updated dialogs to the same look and feel. I think I got 98% of forms with this pass, but it's likely I missed some buried somewhere. TODO: will take another pass as consolidating these colors and new gradients in another diff. Test Plan: Played in my sandbox all week. Please play with it too and let me know how they feel. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: Korvin, aran Differential Revision: https://secure.phabricator.com/D6806
441 lines
7.8 KiB
CSS
441 lines
7.8 KiB
CSS
/**
|
|
* @provides phui-form-view-css
|
|
*/
|
|
|
|
.phui-form-view {
|
|
padding: 16px;
|
|
background: #fff;
|
|
}
|
|
|
|
.phui-form-view.phui-form-full-width {
|
|
padding: 0;
|
|
}
|
|
|
|
/* only used in transaction comments */
|
|
.phui-form-shaded .phui-form-view {
|
|
border-bottom: 1px solid #D4DAE0;
|
|
background: #F4F5F8;
|
|
}
|
|
|
|
.phui-form-view label.aphront-form-label {
|
|
padding-top: 5px;
|
|
width: 19%;
|
|
float: left;
|
|
text-align: right;
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
color: #6b748c;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.device-phone .phui-form-view label.aphront-form-label,
|
|
.phui-form-full-width.phui-form-view label.aphront-form-label {
|
|
display: block;
|
|
float: none;
|
|
text-align: left;
|
|
width: 100%;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.aphront-form-input {
|
|
margin-left: 20%;
|
|
margin-right: 20%;
|
|
width: 60%;
|
|
}
|
|
|
|
.device-phone .aphront-form-input,
|
|
.phui-form-full-width .aphront-form-input {
|
|
margin-left: 0%;
|
|
margin-right: 0%;
|
|
width: 100%;
|
|
}
|
|
|
|
.aphront-form-error {
|
|
width: 18%;
|
|
float: right;
|
|
color: {$red};
|
|
font-weight: bold;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.aphront-dialog-body .phui-form-full-width {
|
|
margin-top: -10px;
|
|
}
|
|
|
|
.aphront-dialog-body .phui-form-view {
|
|
padding: 0;
|
|
}
|
|
|
|
.device-phone .aphront-form-error,
|
|
.phui-form-full-width .aphront-form-error {
|
|
float: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.device-phone .aphront-form-drag-and-drop-upload {
|
|
display: none;
|
|
}
|
|
|
|
.aphront-form-required {
|
|
font-weight: normal;
|
|
color: #6b748c;
|
|
font-size: 11px;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.aphront-form-input input {
|
|
width: 100%;
|
|
}
|
|
|
|
.aphront-form-input textarea {
|
|
display: block;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
height: 12em;
|
|
}
|
|
|
|
.aphront-form-control {
|
|
padding: 4px;
|
|
}
|
|
|
|
.phui-form-full-width .aphront-form-control {
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.aphront-form-control-submit button,
|
|
.aphront-form-control-submit a.button {
|
|
float: right;
|
|
margin: 4px 0 0 8px;
|
|
}
|
|
|
|
.phui-form-control-multi-submit input {
|
|
float: right;
|
|
margin: 0.5em 0 0em 2%;
|
|
width: auto;
|
|
}
|
|
|
|
.aphront-form-control-textarea textarea.aphront-textarea-very-short {
|
|
height: 44px;
|
|
}
|
|
|
|
.aphront-form-control-textarea textarea.aphront-textarea-very-tall {
|
|
height: 24em;
|
|
}
|
|
|
|
.aphront-form-control-select .aphront-form-input {
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.phui-form-view .aphront-form-caption {
|
|
font-size: 12px;
|
|
color: #6b748c;
|
|
padding: 8px 4px;
|
|
text-align: right;
|
|
margin-right: 20%;
|
|
margin-left: 20%;
|
|
-webkit-font-smoothing: antialiased;
|
|
line-height: 15px;
|
|
}
|
|
|
|
.device-phone .phui-form-view .aphront-form-caption,
|
|
.phui-form-full-width .phui-form-view .aphront-form-caption {
|
|
margin-right: 0%;
|
|
}
|
|
|
|
/* override for when inside an aphront-panel-view */
|
|
.aphront-panel-view .phui-form-view h1 {
|
|
padding: 0em 0em .8em 0em;
|
|
}
|
|
|
|
.aphront-form-instructions {
|
|
width: 60%;
|
|
margin-left: 20%;
|
|
padding: 10px 4px;
|
|
}
|
|
|
|
.device .aphront-form-instructions,
|
|
.phui-form-full-width .aphront-form-instructions {
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
.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: 6px;
|
|
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 {
|
|
padding-top: 3px;
|
|
padding-left: 8px;
|
|
padding-bottom: 12px;
|
|
font-weight: bold;
|
|
color: #222222;
|
|
}
|
|
|
|
|
|
table.aphront-form-control-checkbox-layout th {
|
|
padding-top: 2px;
|
|
padding-left: 8px;
|
|
padding-bottom: 12px;
|
|
color: #222222;
|
|
}
|
|
|
|
.aphront-form-control-radio-layout td input,
|
|
.aphront-form-control-checkbox-layout td input {
|
|
margin-top: 4px;
|
|
width: auto;
|
|
}
|
|
|
|
.aphront-form-control-radio-layout label.disabled,
|
|
.aphront-form-control-checkbox-layout label.disabled {
|
|
color: #777777;
|
|
}
|
|
|
|
.aphront-form-radio-caption {
|
|
margin-top: 4px;
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
color: #444444;
|
|
}
|
|
|
|
.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 8px;
|
|
padding: 8px;
|
|
background: #fff;
|
|
border: 1px solid #d4dae0;
|
|
}
|
|
|
|
.aphront-form-inset h1 {
|
|
color: #777;
|
|
font-weight: normal;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.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: 12px;
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
.aphront-textarea-drag-and-drop {
|
|
background: {$lightgreen};
|
|
border-color: {$green};
|
|
}
|
|
|
|
.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-enabled-input {
|
|
width: auto;
|
|
display: inline;
|
|
margin-right: 8px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.phui-form-divider hr {
|
|
height: 1px;
|
|
border: 0;
|
|
background: #c0c0c0;
|
|
width: 85%;
|
|
margin: 15px auto;
|
|
}
|
|
|
|
.recaptcha_only_if_privacy {
|
|
display: none;
|
|
}
|
|
|
|
.phui-form-box .phabricator-action-header {
|
|
padding: 4px 5px 4px 12px;
|
|
border-bottom: 1px solid #bfcfda;
|
|
}
|
|
|
|
.phui-form-box .phabricator-action-header h3 {
|
|
color: #6b748c;
|
|
text-shadow: 0 1px 2px #fff;
|
|
}
|
|
|
|
.phui-form-box .aphront-error-view {
|
|
margin-bottom: 0;
|
|
}
|