.report_panel {
height: 0px;
overflow: visible;
position: fixed;
text-align: center;
top: 0px;
visibility: visible;
width: 100%;
z-index: 3000;
a {
text-shadow: none;
white-space: nowrap;
}
&.error {
z-index: 2999;
}
&.hide {
visibility: hidden;
}
.csstransitions & {
.perspective(200px);
.transition(~"visibility 0ms linear 0ms");
&.hide {
.transition(~"visibility 0ms linear 500ms");
}
}
.content {
background: #f9f9f9;
border: 1px solid #c3c3c3;
border-top: 0px;
border-radius: 0px 0px 4px 4px;
box-shadow: 0px 1px 2px 0px #bbb;
display: inline-block;
font-weight: bold;
max-width: 20%;
padding: 15px 30px 10px;
text-align: left;
text-shadow: 0px 1px 2px rgba(0,0,0,0.4);
.opacity(1);
@media screen and (max-width: 768px) {
max-width: 80%;
}
.csstransitions & {
.transform(rotateX(0deg));
-webkit-transform-origin: 0px 0px;
-moz-transform-origin: 0px 0px;
-o-transform-origin: 0px 0px;
transform-origin: 0px 0px;
.transition(all 200ms ease 0s);
}
.hide& {
.opacity(0);
.csstransitions & {
.transform(rotateX(-90deg));
.transition(all 200ms ease 0s);
}
}
.loading& {
color: #ffffff;
background: #dac073;
border-color: #c5ac60;
a {
color: #332808;
}
}
.report& {
color: #ffffff;
background: #96c671;
border-color: #82b35d;
}
.error& {
color: #ffffff;
background: #f47474;
border-color: #e26464;
}
.report&, .error& {
.close {
cursor: pointer;
height: 16px;
position: absolute;
right: 2px;
top: 2px;
width: 16px;
.init-icon-font();
&:before {
content: "\e63e";
display: inline-block;
font-size: 16px;
}
}
}
.gray& {
background: #cccccc;
border-color: #a9a9a9;
}
.icon {
display: none;
float: left;
height: 17px;
margin-left: -23px;
width: 16px;
}
}
}