Takumon/mean-blog

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css";


/* fontawsomeのfa-fwに概要するクラス　等幅でマテリアルアイコンを表示する */
.material-icons.fw {
  width: 1.28571429em;
  text-align: center;
}

html,
body {
  height: 100%;
}
body {
    margin: 0;
    background:#f5f4f4;
}

body * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.chapter-title {
  color: #3949ab;
  font-size: 34px;
  font-weight: 400;
  line-height: 40px;
  margin-bottom: 30px;
}

.ink-bar-white .mat-ink-bar {
  background-color: #f1f1ff !important;
  height: 3px;
}

.ink-bar-pink .mat-ink-bar {
  background-color: #ec407a !important;
  height: 3px;
}

.mat-tooltip {
  font-size: 0.9em !important;
}

.mat-raised-button:hover,
.mat-fab:hover,
.mat-mini-fab:hover {
  box-shadow: 0 25px 55px 0 hsla(0, 0%, 0%, 0.21), 0 16px 28px 0 rgba(0, 0, 0, 0.22) !important;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -ms-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  -transition-duration: 0.2s;
  transition-duration: 0.2s;
}

.mat-radio-button.full-width {
  .mat-radio-label {
    width: 100%;
  }
}

/* ツールバー */
.mat-tooltip {
  /* 改行を表示する */
  white-space: pre-wrap;
  /* 読みやすくするため透過率を上げる */
  background: rgba(97,97,97, 0.95);
}

.mat-ripple {
  position: relative;
}

/* キャレットの色検討 */
input,textarea {
  caret-color: blue;
}



.markdown-body {
  h1, h2, h3, h4, h5, h6 {
    position: relative;
  }

  h1.highlighted,
  h2.highlighted,
  h3.highlighted,
  h4.highlighted,
  h5.highlighted,
  h6.highlighted {
    -webkit-animation: flash 1s;
    animation: flash 1s;
  }

  h1 .fa.fa-link,
  h2 .fa.fa-link,
  h3 .fa.fa-link,
  h4 .fa.fa-link,
  h5 .fa.fa-link,
  h6 .fa.fa-link {
    display: none;
    position: absolute;
    top: 50%;
    left: -28px;
    margin-top: -18px;
    padding: 10px 5px 10px 10px;
    color: #555;
    font-size: 16px;
    font-weight: 400;
  }

  h1:hover .fa.fa-link,
  h2:hover .fa.fa-link,
  h3:hover .fa.fa-link,
  h4:hover .fa.fa-link,
  h5:hover .fa.fa-link,
  h6:hover .fa.fa-link {
    display: block;
  }

  h1:hover .fa.fa-link:hover,
  h2:hover .fa.fa-link:hover,
  h3:hover .fa.fa-link:hover,
  h4:hover .fa.fa-link:hover,
  h5:hover .fa.fa-link:hover,
  h6:hover .fa.fa-link:hover {
    color: blue;
  }
}

@-webkit-keyframes flash {
  0% {
    opacity: .4;
    background-color: #ffc3d6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flash {
  0% {
    opacity: .4;
    background-color: #ffc3d6;
  }
  100% {
    opacity: 1;
  }
}

/*
 * 一覧のMarkdownは限られたスペースで多くの情報を表示したいので
 * スタイルをスリムアップする
 */
.article-list .markdown-body {
  font-size: 14px;
  margin: 0;

  &>*:first-child {
    margin-top: 0;
  }

  h1 {
    padding-bottom: 0.2em;
    margin: 0 0.2em 0.6em 0;
    font-size: 1.2em;
    border-bottom: 1px solid #eaecef;
    color: rgba(36, 41, 46, 0.9);
  }

  h2 {
    padding-bottom: 0.2em;
    margin: 0 0.2em 0.6em 0;
    font-size: 1.2em;
    border-bottom: 1px solid #eaecef;
    color: rgba(36, 41, 46, 0.9);
  }

  h3 {
    padding-bottom: 0.2em;
    margin: 0 0.2em 0.6em 0;
    font-size: 1.2em;
    color: rgba(36, 41, 46, 0.95);
  }

  h4 {
    padding-bottom: 0.2em;
    margin: 0 0.2em 0.6em 0;
    font-size: 1.2em;
    color: rgba(36, 41, 46, 0.95);
  }

  h5 {
    padding-bottom: 0.2em;
    margin: 0 0.2em 0.6em 0;
    font-size: 1.2em;
    color: rgba(36, 41, 46, 0.95);
  }

  p {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
  }
}