fimfic2epub/src/titlestyle.styl

@require 'mixins'

.title {
  margin: 1em 0;
  text-align: left;
  vertical-align: middle;
  
  .story_name, .author {
    display: inline-block;
    font-family: sans-serif;
    text-align: left;
  }

  .story_name {
    font-size: 1.5em;
    color: #222;
    font-weight: bold;
    margin-right: 5px;
  }

  .author {
    margin: 0;
    font-size: 0.9em;
    color: #444;
    font-weight: normal;
    display: inline-block;
    
    a {
      font-weight: bold;
    }
  }
}

.readlink {
  text-align: left;
  font-size: 0.9em;
  line-height: 1.1em;
}

.extra_story_data {
  text-align: left;
}

// Last Modified and First Published
.datebox {
  textcolor(#222);
  padding-left: 10px;
  font-weight: bold;
  display: inline-block;
  padding: 0 10px;
  padding-top: 2px;
  padding-bottom: 4px;
  border-radius: 3px;
  bgcolor(#fff);
  vertical-align: middle;
  border: 1px solid #999;
  margin: 0px 2px;
  margin-bottom: 6px;
  height: 2em;
  
  .heading, .date {
    font-family: sans-serif;
    font-size: 0.8em;
    text-align: center;
  }

  .wrap {
    line-height: 0.9em;
    vertical-align: middle;
    display: inline-block;
    text-align: center;
  }

  .heading {
    font-weight: normal;
    textcolor(#444);
  }
}

// Character icon
span.character_icon {
  vertical-align: middle;
  margin: 0 2px;
  padding: 3px;
  bgcolor(#fff);
  border-radius: 3px;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #999;
  margin-bottom: 6px;

  img.character_icon {
    border-radius: 0;
    display: block;
    height: 2em;
  }
}

// Ratings
.content-rating-everyone, .content-rating-teen, .content-rating-mature {
  padding: 0.5em;
  textcolor(#fff);
  border: 1px solid rgba(0,0,0,0.2);
  text-shadow: -1px -1px rgba(0,0,0,0.2);
  border-radius: 4px;
  margin-bottom: 4px;
  display: inline-block;
  line-height: 1.0em;
  font-family: sans-serif;
  font-weight: bold;
}
.content-rating-everyone {
  bgcolor(#78ac40);
  box-shadow: 0px 1px 0px #90ce4d inset;
}
.content-rating-teen {
  bgcolor(#ffb400);
  box-shadow: 0px 1px 0px #ffd800 inset;
}
.content-rating-mature {
  bgcolor(#c03d2f);
  box-shadow: 0px 1px 0px #e64938 inset;
}

// Categories
#categories {
  text-align: left;
}
.story_category {
  display: inline-block;
  padding: 0.5em;
  line-height: 1.0em;
  text-decoration: none;
  bgcolor(#eee);
  textcolor(#fff);
  border-radius: 4px;
  margin-bottom: 4px;
  font-family: sans-serif;
}

.story_category_sex {
  bgcolor(#992584);
  box-shadow: 0px 1px 0px #b82c9e inset;
  text-shadow: -1px -1px #7a1e6a;
  border: 1px solid #821f70;
}
.story_category_gore {
  bgcolor(#742828);
  box-shadow: 0px 1px 0px #8b3030 inset;
  text-shadow: -1px -1px #5d2020;
  border: 1px solid #632222;
}
.story_category_romance {
  bgcolor(#974bff);
  box-shadow: 0px 1px 0px #b55aff inset;
  text-shadow: -1px -1px #793ccc;
  border: 1px solid #8040d9;
}
.story_category_dark {
  bgcolor(#b93737);
  box-shadow: 0px 1px 0px #de4242 inset;
  text-shadow: -1px -1px #942c2c;
  border: 1px solid #9d2f2f;
}
.story_category_sad {
  bgcolor(#bd42a7);
  box-shadow: 0px 1px 0px #e34fc8 inset;
  text-shadow: -1px -1px #973586;
  border: 1px solid #a1388e;
}
.story_category_tragedy {
  bgcolor(#ffb54b);
  box-shadow: 0px 1px 0px #ffd95a inset;
  text-shadow: -1px -1px #cc913c;
  border: 1px solid #d99a40;
}
.story_category_comedy {
  bgcolor(#f59c00);
  box-shadow: 0px 1px 0px #fb0 inset;
  text-shadow: -1px -1px #c47d00;
  border: 1px solid #d08500;
}
.story_category_random {
  bgcolor(#3f74ce);
  box-shadow: 0px 1px 0px #4c8bf7 inset;
  text-shadow: -1px -1px #325da5;
  border: 1px solid #3663af;
}
.story_category_slice_of_life {
  bgcolor(#4b86ff);
  box-shadow: 0px 1px 0px #5aa1ff inset;
  text-shadow: -1px -1px #3c6bcc;
  border: 1px solid #4072d9;
}
.story_category_adventure {
  bgcolor(#45c950);
  box-shadow: 0px 1px 0px #53f160 inset;
  text-shadow: -1px -1px #37a140;
  border: 1px solid #3bab44;
}
.story_category_alternate_universe {
  bgcolor(#888);
  box-shadow: 0px 1px 0px #a3a3a3 inset;
  text-shadow: -1px -1px #6d6d6d;
  border: 1px solid #747474;
}
.story_category_crossover {
  bgcolor(#47b8a0);
  box-shadow: 0px 1px 0px #55ddc0 inset;
  text-shadow: -1px -1px #399380;
  border: 1px solid #3c9c88;
}
.story_category_human {
  bgcolor(#b5835a);
  box-shadow: 0px 1px 0px #d99d6c inset;
  text-shadow: -1px -1px #916948;
  border: 1px solid #9a6f4d;
}
.story_category_anthro {
  bgcolor(#b5695a);
  box-shadow: 0px 1px 0px #d97e6c inset;
  text-shadow: -1px -1px #915448;
  border: 1px solid #9a594d;
}
.story_category_scifi {
  bgcolor(#5d63a5);
  box-shadow: 0px 1px 0px #7077c6 inset;
  text-shadow: -1px -1px #4a4f84;
  border: 1px solid #4f548c;
}
.story_category_equestria_girls {
  bgcolor(#4d3281);
  box-shadow: 0px 1px 0px #5c3c9b inset;
  text-shadow: -1px -1px #3e2867;
  border: 1px solid #412b6e;
}
.story_category_horror {
  bgcolor(#6d232f);
  box-shadow: 0px 1px 0px #832a38 inset;
  text-shadow: -1px -1px #571c26;
  border: 1px solid #5d1e28;
}
.story_category_mystery {
  bgcolor(#444);
  box-shadow: 0px 1px 0px #525252 inset;
  text-shadow: -1px -1px #363636;
  border: 1px solid #3a3a3a;
}
.story_category_drama {
  bgcolor(#ec50ca);
  box-shadow: 0px 1px 0px #ff60f2 inset;
  text-shadow: -1px -1px #bd40a2;
  border: 1px solid #c944ac;
}
.story_category_thriller {
  bgcolor(#d62b2b);
  box-shadow: 0px 1px 0px #ff3434 inset;
  text-shadow: -1px -1px #ab2222;
  border: 1px solid #b62525;
}
.story_category_second_person {
  bgcolor(#02a1db);
  box-shadow: 0px 1px 0px #02c1ff inset;
  text-shadow: -1px -1px #0281af;
  border: 1px solid #0289ba;
}