@charset "UTF-8";

@import './variables';

@import './font';
@import './debug';

// wrap all rules in body{} to increase css rule specificity, relatively safe overriding without !important
body {
  // metadata overlay tweak
  @if $icedream-metadata-overlay {
    #meta {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      text-align: left;
      padding: 1em;
      margin: 0;
      z-index: 900;
      // copied from https://gist.github.com/Odepia/5790397
      background: transparent;
      background: linear-gradient(to right, #000 0%, transparent 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#000, endColorstr=transparent);
    }

    .page:not(#page_EQ) {
      height: calc(100% - 9vmin);
    }
  }

  // push in some air between lines
  #meta,
  #nav {
    line-height: 5vmin;
  }

  // use user font for all text it is seen to look good on
  #meta,
  #nav,
  .page:not(#page_Chat) {
    @include icedream-font();
  }

  // apply darker background and brighter text to content
  #nav > .active,
  .page,
  .page.active {
    background: $icedream-bg-color;
    color: $icedream-text-color;
  }

  // stylization of text
  //text-transform: lowercase;

  // currently playing track metadata
  #meta {
    color: $icedream-text-color;

    &:before {
      content: '🎶 Now playing: ';
      font-weight: 700;
    }
  }

  .station .title {
    font-weight: 700;
  }

  #nav > .active,
  .page,
  .page.active {
    position: relative;
  }

  // just some nice fades
  #nav {
    > div {
      @if $icedream-nav-bg-fade {
        transition: background 0.6s ease-in-out, color 0.6s ease-in-out, border 0.25s ease-out;
      }
      @if $icedream-nav-tab-fix {
        &:not(.active) {
          border: 1px transparent solid;
          border-bottom-color: #aaa;

          &+div {
            // rules here for all but first child that don't follow an active tab
            &:hover {
              border-left-color: #aaa;
            }
          }
        }

        &:not(:last-child) {
          // rules here for all but last child
          &:hover {
            border-right-color: #aaa;
          }
        }
        // rules here for all children
        &:hover {
          border-bottom-color: transparent;
          border-top-color: #aaa;
        }
      }
    }
  }

  // smoke effect
  @if $icedream-fog-bg {
    #main {
      position: relative;

      &::before {
        opacity: 0.2;
        background-image: url("whitefog.png");
        background-attachment: fixed;
        content: ' ';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        @if not($icedream-fog-bg-animated) {
          background-size: cover;
          min-width: 100%;
          width: 100%;
        }

        // animate it so it moves right to left slowly?
        @if $icedream-fog-bg-animated {
          background-repeat: repeat-x;
          background-size: 100% 100%;
          min-width: 200%;
          width: 200%;
          animation: icedream-bg-slide linear $icedream-fog-bg-animation-length infinite;
          @keyframes icedream-bg-slide {
            from {
              transform: translateX(0);
            }

            to {
              transform: translateX(-50%);
            }
          }
        }
      }
    }
  }
}