1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-22 21:40:55 +01:00
phorge-phorge/webroot/rsrc/css/application/pholio/pholio-edit.css
epriestley dd76143399 Pholio - make the form maintain client side edits between file uploads
Summary: Fixes T3553. Did it by adding some code that refreshes the File object on keyup events within a given file entry. also fixes an html derp I found trying to fix this.

Test Plan: added cool things like 'bbb' to every field and noted they were maintained when I added more files

Reviewers: btrahan

Reviewed By: btrahan

CC: aran, Korvin, chad

Maniphest Tasks: T3553

Differential Revision: https://secure.phabricator.com/D6488
2013-07-18 15:04:08 -07:00

107 lines
2 KiB
CSS

/**
* @provides pholio-edit-css
*/
.pholio-uploaded-image {
margin: 0 0 12px 0;
overflow: hidden;
}
.pholio-uploaded-image .thumb-box {
border: 1px solid #D5D9DF;
border-radius: 3px;
min-width: 280px;
width: 48%;
float: left;
text-align: center;
}
.pholio-uploaded-image .image-data {
width: 48%;
float: right;
}
.pholio-uploaded-image .thumb-box .title {
width: 100%;
float: left;
background: #EDF0F4;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom: 1px solid #D5D9DF;
}
.pholio-uploaded-image .thumb-box .thumb {
background: white;
padding: 12px 0px 0px 0px;
width: 100%;
}
.pholio-uploaded-image .thumb-box .thumb img {
margin: 0 auto;
}
.pholio-uploaded-image .thumb-box .title .text {
width: 220px;
float: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding: 6px 0px 0px 8px;
}
.pholio-uploaded-image .thumb-box .title .remove {
float: right;
}
.pholio-uploaded-image .thumb-box .title .remove .button {
background: #EDF0F4;
border: none;
}
.pholio-uploaded-image .thumb-box .title .remove .button:hover {
box-shadow: inset 0 0 2px rgba(0,0,0,.2);
}
.pholio-uploaded-image .image-data .aphront-form-control {
padding: 0px 0px 4px 4px;
}
.pholio-uploaded-image .image-data .aphront-form-label {
text-align: left;
margin: 0px 0px 5px 0px;
}
.pholio-uploaded-image .image-data .aphront-form-input {
margin: 0;
width: 100%;
}
.aphront-form-input .aphront-form-drag-and-drop-file-list {
float: left;
width: 100%;
}
.aphront-form-input .aphront-form-drag-and-drop-file-list
.drag-and-drop-file-target {
padding: 20px;
clear: both;
}
.pholio-edit-drop {
border-width: 1px;
border-style: dashed;
border-color: #999999;
text-align: center;
padding: 16px;
color: #666666;
}
.pholio-edit-drop.pholio-drop-active {
border-color: {$green};
background-color: {$lightgreen};
}
.pholio-drop-uploading {
padding: 24px;
text-align: center;
border: 1px solid #bbbbbb;
background: #fcfcfc;
color: #666666;
}