.attachments {
@levelColor: #e4e4e4;
.children {
background: @levelColor;
border-radius: 1px;
box-shadow: 0 0 0 8px @levelColor;
margin: 10px 0px 5px;
.children {
background: darken(@levelColor, 10%);
box-shadow: 0 0 0 8px darken(@levelColor, 10%);
.children {
background: darken(@levelColor, 20%);
box-shadow: 0 0 0 8px darken(@levelColor, 20%);
.size {
color: #777777;
}
.children {
background: darken(@levelColor, 30%);
box-shadow: 0 0 0 8px darken(@levelColor, 30%);
.title {
color: #000000
}
.size {
color: #555555;
}
}
}
}
}
.expanded {
background: #e4e4e4;
box-shadow: 0 0 0 8px #e4e4e4;
.expanded {
box-shadow: 0 0 0 8px #c2c2c2;
background: #c2c2c2;
}
}
.item {
background: inherit;
border-radius: 1px;
display: inline-block;
margin: 0 16px 20px 0;
max-height: inherit;
overflow: visible;
vertical-align: top;
width: 136px;
&:last-child {
margin-bottom: 0px
}
&.fail {
opacity: 0.3;
.csstransitions & {
.transition(opacity 1000ms ease 1s);
}
}
.item_content {
background: #ffffff;
border: 0px;
border-radius: 3px;
box-shadow: 0 2px 6px #ccc;
display: block;
margin-bottom: 6px;
padding: 9px 9px 7px;
}
.footer {
height: 22px;
}
.progress {
display: block;
height: 3px;
margin-bottom: -3px;
padding: 8px 0px;
width: 100%;
span {
display: block;
height: 3px;
background: #ef4a4a;
}
.progress-percent {
display: block;
background: none;
text-align: center;
font-size: 8pt;
color: #000000 !important;
}
}
.image {
border-bottom: 1px solid #dedede;
display: block;
min-height: 100px;
overflow: hidden;
position: relative;
text-align: center;
white-space: nowrap;
&:after {
content: "";
display: inline-block;
min-height: inherit;
vertical-align: middle;
}
img {
background: #ffffff;
left: 50%;
max-height: 100px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
vertical-align: middle;
}
}
&.has_child > .item_content > .image {
display: none;
}
.text {
color: #c7c7c7;
display: inline-block;
font-size: 18pt;
margin: 36px 0px 0px;
text-transform: uppercase;
}
.icon {
margin: 15px 0px 0px !important;
vertical-align: top;
}
.has_action {
cursor: pointer;
}
.title {
.box-sizing;
display: inline-block;
font-weight: bold;
max-height: 2.5em;
overflow: hidden;
padding: 0px 43px 0px 8px;
white-space: normal;
width: 100%;
word-wrap: break-word;
&.entire_line {
padding: 0px 8px 0px 8px;
}
.name {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
}
.ext {
display: inline-block;
}
.size {
color: #929292;
float: right;
margin: 0px 8px -5em 0px;
}
.status_text {
display: block;
margin: 0;
padding: 6px 0px;
white-space: normal;
}
&.fail .status_text {
color: #ff0000;
}
&.success .status_text {
color: #308F00;
}
.buttons {
.clearfix-helper();
display: block;
margin: 0;
padding: 6px 0px;
text-align: left;
.button {
background: none;
border: 0px;
color: #4477bb;
font-size: 9pt;
font-weight: normal;
padding: 0px;
text-shadow: none;
float: left;
html.rtl & {
float: right;
}
&.open,
&.download {
float: right;
html.rtl & {
float: left;
}
}
}
}
}
}