emmaramirez.me/src/assets/code-theme.css

emma's personal website

@keyframes fade-in {
    0% {
      opacity: 0
    }
    100% {
      opacity: 1
    }
  }
  
  @keyframes fade {
    10% {
      transform: scale(1, 1)
    }
    35% {
      transform: scale(1, 1.7)
    }
    40% {
      transform: scale(1, 1.7)
    }
    50% {
      opacity: 1
    }
    60% {
      transform: scale(1, 1)
    }
    100% {
      transform: scale(1, 1);
      opacity: 0
    }
  }
  
  [data-language] code,
  [class^="lang"] code,
  pre [data-language],
  pre [class^="lang"] {
    animation: fade-in 50ms ease-in-out 2s forwards
  }
  
  [data-language] code.rainbow,
  [class^="lang"] code.rainbow,
  pre [data-language].rainbow,
  pre [class^="lang"].rainbow {
    animation: none;
    transition: opacity 50ms ease-in-out
  }
  
  [data-language] code.loading,
  [class^="lang"] code.loading,
  pre [data-language].loading,
  pre [class^="lang"].loading {
    animation: none
  }
  
  [data-language] code.rainbow-show,
  [class^="lang"] code.rainbow-show,
  pre [data-language].rainbow-show,
  pre [class^="lang"].rainbow-show {
    opacity: 1
  }
  
  pre {
    position: relative
  }
  
  pre.loading .preloader div {
    animation-play-state: running
  }
  
  pre.loading .preloader div:nth-of-type(1) {
    background: #0081f5;
    animation: fade 1.5s 300ms linear infinite
  }
  
  pre.loading .preloader div:nth-of-type(2) {
    background: #5000f5;
    animation: fade 1.5s 438ms linear infinite
  }
  
  pre.loading .preloader div:nth-of-type(3) {
    background: #9000f5;
    animation: fade 1.5s 577ms linear infinite
  }
  
  pre.loading .preloader div:nth-of-type(4) {
    background: #f50419;
    animation: fade 1.5s 715ms linear infinite
  }
  
  pre.loading .preloader div:nth-of-type(5) {
    background: #f57900;
    animation: fade 1.5s 853ms linear infinite
  }
  
  pre.loading .preloader div:nth-of-type(6) {
    background: #f5e600;
    animation: fade 1.5s 992ms linear infinite
  }
  
  pre.loading .preloader div:nth-of-type(7) {
    background: #00f50c;
    animation: fade 1.5s 1130ms linear infinite
  }
  
  pre .preloader {
    position: absolute;
    top: 12px;
    left: 10px
  }
  
  pre .preloader div {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    display: inline-block;
    margin-right: 4px;
    opacity: 0;
    animation-play-state: paused;
    animation-fill-mode: forwards
  }
  
  pre {
    border: 1px solid #ccc;
    word-wrap: break-word;
    padding: 6px 10px;
    line-height: 19px;
    margin-bottom: 20px
  }
  
  pre code {
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 0
  }
  
  code {
    border: 1px solid #eaeaea;
    margin: 0px 2px;
    padding: 0px 5px;
    font-size: 12px
  }
  
  pre,
  code {
    font-family: Consolas, 'Liberation Mono', Courier, monospace;
    color: #333;
    background: #f8f8f8;
    border-radius: 3px
  }
  
  pre,
  pre code {
    font-size: 13px
  }
  
  pre .comment {
    color: #998
  }
  
  pre .support {
    color: #0086B3
  }
  
  pre .tag,
  pre .tag-name {
    color: navy
  }
  
  pre .keyword,
  pre .css-property,
  pre .vendor-fix,
  pre .sass,
  pre .class,
  pre .id,
  pre .css-value,
  pre .entity.function,
  pre .storage.function {
    font-weight: bold
  }
  
  pre .css-property,
  pre .css-value,
  pre .vendor-fix,
  pre .support.namespace {
    color: #333
  }
  
  pre .constant.numeric,
  pre .keyword.unit,
  pre .hex-color {
    font-weight: normal;
    color: #099
  }
  
  pre .entity.class {
    color: #458
  }
  
  pre .entity.id,
  pre .entity.function {
    color: #900
  }
  
  pre .attribute,
  pre .variable {
    color: teal
  }
  
  pre .string,
  pre .support.value {
    font-weight: normal;
    color: #d14
  }
  
  pre .regexp {
    color: #009926
  }