richpeck/exception_handler

/* ---------------------------------------------------- */
/* ---------------------------------------------------- */

.exception {
  display:          block;
  color:            rgba(0,0,0,1);
  position:         relative;
  width:            20%;
  top:              48%;
  margin:           auto;
  border:           1px solid rgba(0,0,0,1);
  max-width:        400px;
  min-width:        350px;
  border-radius:    5px;
  box-sizing:       border-box;
  box-shadow:       0px 0px 2px 0px rgba(0,0,0,0.5);
  background:       rgba(16,0,1,1);
  background-image: linear-gradient(to bottom, rgba(16,0,1,1) 70%,rgba(0,0,0,1) 100%);
  background-clip:  content-box;
  overflow-x:       hidden;
  overflow-y:       hidden;
  transition:       background 0.1s ease-in-out;
  transform:        translateY(-50%);
  z-index:          10;
}
.exception::before {
  content:           url(<%= asset_url("exception_handler/icon.png") %>) "  " attr(data-response);
  display:           block;
  color:             rgba(255,255,255,1);
  font-size:         1.25em;
  font-weight:       bold;
  text-transform:    capitalize;
  padding:           1em;
  line-height:       10px;
  text-shadow:       0 1px 0 rgba(0,0,0,1);
  border-bottom:     1px solid rgba(122,11,11,1);
  vertical-align:    middle;
  background-color:  rgba(227,11,11,1);
  background-image:  url(<%= asset_url("exception_handler/noise.png") %>), linear-gradient(to bottom,  rgba(227,11,11,0) 0%,rgba(0,0,0,0.55) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007a07ed', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.exception::after {
  content:       attr(data-rails) " \203A\203A  Our developers have been notified. Click here to go home.";
  display:       block;
  padding:       1em;
  font-size:     0.8em;
  line-height:   11px;
  color:         rgba(255,255,255,1);
  text-align:    center;
  box-sizing:    border-box;

  border-width:  0 1px 1px;
  border-color:  rgba(255,255,255,0.09);
  border-style:  solid
}
.exception:hover       { cursor: pointer; }
.exception:hover:after { text-decoration: underline; }

.exception span:before {
  display:         block;
  content:         url(<%= asset_url("exception_handler/alert.png") %>);
  padding:         3.5em 0 1em;
  text-align:      center;
}
.exception span {
  position:         relative;
  display:          block;
  min-height:       288px;
  color:            rgba(255,255,255,1);
  padding:          0 2.5em 3em;
  box-sizing:       border-box;
  background-clip:  border-box;
  text-align:       center;
  background:       url(<%= asset_url("exception_handler/alert.jpg") %>) top center no-repeat;

  border-top:       1px solid rgba(0,0,0,0.05);
  border-left:      1px solid rgba(255,255,255,0.08);
  border-right:     1px solid rgba(255,255,255,0.08);
}
.exception span:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;

  background: rgba(0,0,0,0.35);
  background: -moz-linear-gradient(top, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.35)), color-stop(100%, rgba(0,0,0,0)));
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 100%);
  background: -o-linear-gradient(top, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 100%);
  background: -ms-linear-gradient(top, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
}
.exception span strong {
  display:          block;
  font-size:        2em;
  margin:           1em 0 0.25em;
  text-transform:   uppercase;
}
.exception span p { display: block; margin-top: 1.5em; font-size: 0.85em; text-decoration: underline; }
/* ---------------------------------------------------- */
/* ---------------------------------------------------- */