channelNotice.scss

/* CHANNEL NOTICE */
%channels %channelNotices {
  %channelNotice {
    position: relative;
    background-color: rgba(0, 0, 0, 0.1);
    background-size: 0;
  }
}
%channelNotices {
  %channelNotice {
    &:after {
      content: '';
      position: absolute;
      @include stretch;
      @include bg($img: inherit, $pos: inherit, $size: auto, $rep: no-repeat);
      opacity: 0.3;
      filter: grayscale(1) brightness(1.5);
      pointer-events: none;
    }
    %channelNoticeClose {
      opacity: 0.3;
      transition: all 0.15s ease-in-out;
      &:hover {
        opacity: 0.7;
      }
    }
    %channelNoticeMessage {
      color: hsla(0, 0%, 100%, 0.5);
      %channelNoticeMessageButton {
        background: hsla(0, 0%, 100%, 0.1);
        border-color: transparent;
        color: hsla(0, 0%, 100%, 0.7);
        transition: all 0.15s ease-in-out;
        &:hover {
          background: hsla(0, 0%, 100%, 0.2);
          color: #fff;
        }
      }
    }
  }
}