application/css/editing.css.scss
@import "definitions.css.scss";
$editing-0: #ede9e4;
$editing-1: #444444;
$editing-2: #ccc;
$editing-3: darken($editing-2, 20%);
$editing-4: darken($editing-3, 20%);
// $editing-focus: #8ac551;
$text-edit-width: 621px;
.editing-panel {
@extend .editing-background;
z-index: 1001;
// background-color: $editing-0;
// background: url(/@spontaneous/static/editing-texture-1-42b06a3439752490988f30f2a06d5e7c.png) repeat;
.editing-fields {
@extend .clearfix;
@include display-box;
@include box-align(horizontal);
padding: $unit;
}
.editing-toolbar {
@include rounded($radius $radius 0 0);
background-color: rgba(0, 0, 0, 0.2);
padding: $unit/2 $unit*2;
.indent {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 6px;
}
&.bottom .indent {
top: auto;
bottom: 0;
}
.buttons {
@include display-box;
@include box-orient(row);
@include box-pack(space-between);
width: $text-edit-width;
.save, .cancel {
@include button($action);
}
.cancel {
@include button($editing-1);
// margin-right: $unit; // for right aligned buttons
}
.save, .cancel {
display: block;
width: 128px;
}
}
&.bottom {
@include rounded( 0 0 $radius $radius);
.buttons {
// padding-bottom: $unit/2;
padding-top: 0;
}
}
}
.field-group-bg {
@include rounded;
// background-color: #6b6b6b;
position: absolute;
margin: 8px;
top: 0px;
bottom: 0px;
}
.field-group-bg.text {
left: 0;
right: 343px;
}
.field-group-bg.image {
left: 629px;
right: 0;
}
input[type="submit"] {
visibility: hidden;
position: absolute;
width: 0;
height: 0;
}
.field-group {
position: relative;
z-index: 1010;
float: left;
// margin: 8px 0 0 8px;
padding: 8px;
// margin-top: 8px;
// margin-bottom: 8px;
.field + .field {
margin-top: 8px;
}
.name {
@include field-name;
.comment {
font-weight: normal;
text-transform: none;
margin-left: $unit;
// color: $editing-4;
}
}
.value {
@include field-value;
textarea, input[type="text"] {
@include input-font;
outline: none;
}
input[type="file"] {
visibility: hidden;
position: absolute;
width: 0;
height: 0;
}
textarea {
@include box-sizing;
border: none;
width: 100%;
// padding-right: 64px;
padding-left: 7px;
padding-right: 7px;
resize:vertical;
position: relative;
left: -7px;
}
input[type="text"] {
@include text-input;
}
}
.field.focus {
.name {
background-color: $editing-focus;
color: white;
.comment {
color: white;
}
}
.value {
border-color: #fff;
background-color: #fff;
opacity: 1;
}
// textarea, input[type="text"] {
// background-color: #fff;
// }
}
}
.field-group.text {
width: $text-edit-width;
}
&.depth-2 {
.editing-fields {
padding: 0;
@include box-orient(column);
}
.editing-toolbar {
padding-left: $unit;
padding-right: $unit;
.buttons {
width: 100%;
}
}
.field-group.text {
width: 100%;
@include box-sizing;
}
.field-group.image {
padding: $unit;
}
}
.field-group.image {
@include box-sizing;
@include box-flex(1);
display: block;
padding: $unit 0;
.field {
display: inline-block;
vertical-align: top;
min-width: 100px;
margin-right: $unit;
margin-bottom: $unit;
margin-top: 0;
margin-left: 0;
.name {
background-color: $editing-focus;
}
.value {
opacity: 1;
}
}
.field + .field {
// margin-top: 0;
// margin-left: $unit;
}
.field .value {
position: relative;
min-height: 70px;
text-align: center;
img {
display: block;
max-width: 200px;
@extend .shadow;
cursor: pointer;
}
img:hover {
outline: solid 1px $action;
}
img.empty {
width: 100%;
height: 100px;
color: #ddd;
position: relative;
&:before {
position: absolute;
left: 0;
right: 0;
text-align: center;
line-height: 100px;
@include awesome-icon("\f03e");
}
}
.image-drop {
// @include rounded;
@include box-sizing;
z-index: 2;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
&.drop-active,
&:hover {
border: solid 1px $action;
}
}
.actions {
margin: 8px 0 0 0;
.button {
display: block;
}
.button + .button {
margin-top: $unit / 2;
}
.button.clear {
@include button-color($highlight, $action);
width: 100%;
&:before {
@include awesome-icon("\f05e");
margin-right: $unit / 2;
}
}
.button.image-download-original {
@include button-color(#999);
&:before {
@include awesome-icon("\f019");
margin-right: $unit / 2;
}
}
}
.info {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: $unit;
@include image-overlay;
@include interface;
text-transform: none;
@include display-box;
@include box-orient(column);
.filename {
word-wrap: break-word;
}
.sizes {
padding-top: $unit/2;
@include display-box;
@include box-orient(row);
@include box-pack(space-between);
}
}
.info.empty {
display: none;
}
.landscape {
img {
max-width: 200px;
}
}
}
}
}
#page-fields .editing-panel,
.box-fields .editing-panel {
.editing-fields, .editing-toolbar {
padding-left: $container-padding;
padding-right: $container-padding;
}
.field-group.text {
padding-left: 0;
}
}
.box-fields .editing-panel {
.editing-toolbar.bottom .indent {
opacity: 0.2;
}
}
.field {
.markdown-editor {
position: relative;
.md-toolbar {
@include display-box;
@include box-orient;
@include rounded(5px);
position: absolute;
z-index: 100;
background-color: $action;
a {
@include interface;
@include no-select;
color: #333;
display: block;
border: solid 1px transparent;
padding: 2px 6px;
cursor: pointer;
min-width: 30px;
text-align: center;
}
a:first-of-type {
@include rounded-left(5px);
}
a:last-child {
@include rounded-right(5px);
}
a.active:hover,
a.active {
// border: solid 1px $editing-2;
background-color: $editing-focus;
color: #fff;
}
a:hover {
// background-color: $highlight;
background-color: $editing-blur;
}
a + a {
// margin-left: 10px;
border-left: solid 1px $editing-blur;
}
.arrow {
@include transform(rotate(45deg));
position: absolute;
width: 10px;
height: 10px;
bottom: -5px;
left: 50%;
background-color: $action;
z-index: -10;
}
}
}
}
.field.focus {
.markdown-editor .md-toolbar {
background-color: $action;
// background-color: $editing-focus;
a {
}
}
}
#conflicted-fields-dialogue {
.instructions {
@include interface;
text-transform: none;
margin: 0;
background-color: #f2f2f2;
color: #666;
padding: $unit;
}
.differences {
@include display-box;
}
.changes {
}
.diff {
@include box-sizing;
font-size: $field-preview-font-size;
width: 50%;
padding: $unit $unit;
border: solid 2px #f2f2f2;
cursor: pointer;
&.selected {
border-color: $action;
}
ins {
background-color: #deffdd;
text-decoration: none;
}
del {
background-color: #fedddd;
text-decoration: line-through;
}
.para {
color: #ccc;
}
}
.labels {
.diff {
border: none;
background-color: #fbfbfb;
@include interface;
@include no-select;
padding-top: $unit/2;
padding-bottom: $unit/2;
}
}
.image-field-conflict.changes {
.diff {
@include display-box;
@include box-orient(row);
@include box-pack(center);
@include box-align(center);
img {
max-height: 500px;
max-width: 100%;
display: block;
}
}
}
}
.ui-resizable-handle.ui-resizable-s {
width: 100%;
height: 9px;
background: url(/@spontaneous/static/editing-textarea-resize-s-b5af62365eb7e19ea4beccf7242d508e.png) repeat-x;
cursor: ns-resize;
}
.field-boolean {
.value {
label {
@include interface;
color: #333;
}
label + label {
margin-left: 20px;
}
}
}