writer.less

@charset "UTF-8";
@import "http://blog.hatena.ne.jp/css/theme/alpha2/alpha2.css";

@import "lib/elements.less";
@import "lib/mixins.less";
@import "lib/variables.less";

body {
  background: #fff;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

/* ===== GLOBAL HEADER ===== */
#globalheader-container {
  background: rgba(255, 255, 255, 0.3);
}

.globalheader-fadein {
  0% {
    display: none;
    opacity: 0;
  }

  60% {
    display: block;
    opacity: 0;
  }

  100% {
    display: block;
    opacity: 1;
  }
}

@-webkit-keyframes globalheader-fadein { .globalheader-fadein }
@-moz-keyframes    globalheader-fadein { .globalheader-fadein }
@-ms-keyframes     globalheader-fadein { .globalheader-fadein }
@-o-keyframes      globalheader-fadein { .globalheader-fadein }
@keyframes         globalheader-fadein { .globalheader-fadein }

#globalheader-container, .btn-subscribe {
  -webkit-animation-name: globalheader-fadein;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
}

/* ===== PAGE CONTAINER ===== */
#container {
  width: auto;
  width: 840px;
  margin: 20px auto;
  background: rgba(255, 255, 255, 0.8);
}

#content-inner  {
  margin: 0 auto;
  max-width: @vertical-width;
  letter-spacing: 1px;
}

#main {
  float: none;
  padding: 0;
  width: auto;
  direction: rtl;
}

#main-inner {
  width: auto;
  margin: 0 auto;
}

/* ===== HEADER ===== */
#title a:before {
  position: relative;
  left: -13px;
  top: 15px;
}

#blog-title-inner {
  font-family: @font-family;
}

#blog-title h1 {
  text-shadow: none;
}

#blog-description {
  margin-top: 8px;
}

/* ===== SIDEBAR ===== */
#box2 {
  width: 100%;
  margin-top: 50px;
}

:root *> .hatena-module { // except for IE6-8
  float: left;
  width: 160px;
  padding: 10px;
  font-size: 70%;
}

:root *> .hatena-module-title,
:root *> .hatena-module-title a { // except for IE6-8
  font-size: 13px;
}

/* ===== ENTRY ===== */
.entry-inner header,
.entry-content,
.entry-inner footer {
  direction: ltr;
}

.entry-inner {
  width: @horizontal-width;
  margin: 0 auto;
  font-family: @font-family;

  :root *> & { // except for IE6-8
    width: @vertical-width;
    height: @vertical-height;
    overflow-x: auto;
    .writing-mode(vertical-rl);
    -webkit-background-clip: text;
    background-image: -webkit-linear-gradient(right, fadeout(@font-color, 70%) 0, @font-color 30px, @font-color @vertical-width - 30px, fadeout(@font-color, 70%));
  }
}

/* ===== ASIN ===== */
.hatena-asin-detail {
  p {
    text-indent: 0 !important;
    -webkit-text-fill-color: #256fba !important;
  }
  :root *> & { // except for IE6-8
    margin: 0;
  }
  &, x:-moz-any-link { // for Firefox
    margin: 1em 0;
  }
  .hatena-asin-detail-image {
    :root *> & { // except for IE6-8
      margin-right: 10px;
      margin-bottom: 15px;
    }
    &, x:-moz-any-link { // for Firefox
      margin-bottom: 0 !important;
      margin-right: 15px !important;
    }
  }
  ul {
    margin: 0 !important;
  }
}

/* ===== ENTRY HEADER ===== */
.entry-header {
  .date {
    width: auto;
    white-space: nowrap;
    left: 0;
    border: none;
    color: #ccc;
    position: relative;
    line-height: 140%;
    :root *> & {
      margin-left: 5px;
    }
    &, x:-moz-any-link {
      margin-left: 0 !important;
    }
  }

  .entry-title {
    line-height: 30px;
    :root *> & {
      margin: 5px 0;
    }
    &, x:-moz-any-link {
      margin: 0 !important;
    }
  }
  .entry-title a:hover {
    :root *> & {
      text-decoration: overline;
    }
    &, x:-moz-any-link {
      text-decoration: underline !important;
    }
  }

  .categories {
    :root *> & {
      position: relative;
      top: 5px;
    }
    &, x:-moz-any-link {
      position: static !important;
    }
  }
  .categories a {
    :root *> & {
      padding: 8px 5px;
    }
    &, x:-moz-any-link {
      padding: 5px 8px !important;
    }
  }

  .entry-header-menu {
    :root *> & {
      position: absolute;
      top: 100px;
      right: -2px;
    }
    &, x:-moz-any-link {
      position: static !important;
    }
  }
  .entry-header-menu a {
    position: absolute;
    top: 40px;
    left: -65px;
    padding: 3px 10px;
    z-index: 1000;

    :root *> & {
      position: static;
      display: inline-block;
      padding: 20px 1px 20px 0;
    }
    &, x:-moz-any-link {
      position: absolute !important;
      top: 40px !important;
      left: -65px !important;
      padding: 3px 10px !important;
    }
  }
}

/* ===== ENTRY CONTENT ===== */
.entry-content {
  margin-right: 10px;
  line-height: 1.7;

  p {
    -webkit-text-fill-color: transparent;
  }
  blockquote p {
    -webkit-text-fill-color: @font-color;
  }

  a {
    -webkit-text-fill-color: #256fba;
    &:visited {
      -webkit-text-fill-color: #7d9ab7;
    }
    &:hover {
      text-decoration: none;
    }
  }

  .footnote {
    text-indent: 0;
    margin-top: 3em;
    margin-right: 0;
    :root *> & {
      margin-top: 0;
      margin-right: 1em;
    }
    &, x:-moz-any-link {
      margin-top: 3em;
      margin-right: 0;
    }
  }
}

/* ===== ENTRY FOOTER ===== */
.entry-footer {
  margin-top: 10px;
  .social-buttons {
    :root *> & {
      margin: 0;
      padding-left: 10px;
    }
    &, x:-moz-any-link {
      margin: 10px 0 15px !important;
      padding-left: 0 !important;
    }
  }
  .entry-footer-section {
    margin: 0 15px;
  }

  .comment {
    :root *> & {
      margin-left: 15px;
    }
    &, x:-moz-any-link {
      margin-left: 0 !important;
    }

    .entry-comment {
      :root *> & {
        border: none;
        border-right: 1px solid #DDD;
        padding: 0 8px;
      }
      &, x:-moz-any-link {
        border: none !important;
        border-bottom: 1px solid #DDD !important;
        padding: 8px 0 !important;
      }

      .comment-content {
        line-height: 150%;
      }
    }
  }
}

div#google_afc_user {
  ul .title a {
    text-decoration: none;
  }

  .google_afc_image {
    .writing-mode(horizontal-tb);
  }

  :root *> & {
    margin: 0 1em 0 2em !important;
  }
  &, x:-moz-any-link {
    margin: 0 !important;
  }
}

.permalink.pager {
  display: block;
  text-align: center;
}

/* ===== ENTRY SCROLLBAR ==== */
.entry-inner::-webkit-scrollbar {
  width: 6px;
  height: 8px;
}

.entry-inner::-webkit-scrollbar-track {
  display: none;
}

.entry-inner::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

/* ===== ARCHIVE ENTRY ===== */
.archive-entry {
  direction: ltr;
  font-family: @font-family;
}

/* ===== STAR ===== */
.hatena-star-container {
  :root *> & {
    margin-top: 0 !important;
    margin-left: 10px !important;
  }
  &, x:-moz-any-link {
    margin-top: 10px !important;
  }
}

/* ===== ELEMENTS IN ENTRY ===== */
.entry-content {
  h1, h2, h3, h4, h5, h6 {
    border: none;
    margin-top: 0;
  }

  p {
    text-indent: 1em;
    margin: 0;
  }

  img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    &.profile-icon {
      display: inline;
    }
  }
  .hatenablog-circle img {
    display: inline;
  }

  a.keyword {
    border: 0;
    border-right: 1px dotted #bbb;
    -webkit-text-fill-color: black;
  }

  pre.code {
    .writing-mode(horizontal-tb);
    font-size: 11px;
    max-width: 40em;
  }

  pre.code, blockquote {
    margin: 1em;
  }

  blockquote {
    // for IE6-8
    margin: 1em 0;

    border-radius: 0;
    border: 1px solid #ccc;

    p {
      margin: 0;
      text-indent: 0;
    }

    :root *> & {
      margin: 0 auto 0 1em;
    }
  }

  p {
    :root *> & {
      padding: 0 0.4em;
    }
    &, x:-moz-any-link {
      padding: 0.4em 0 !important;
    }
  }
  ul, ol {
    :root *> & {
      margin-top: 1em;
    }
    &, x:-moz-any-link {
      margin-top: 0 !important;
    }
  }
}