docbrown/app/assets/stylesheets/notifications.scss

@import 'variables';
.notifications-index {
  background:$light-gray;
  .home{
    .articles-list{
      .signup-cue{
        padding:30px 25px;
        background:white;
        border-radius:6px;
        box-shadow: 0px 3px 9px #d4dce4;
        hr{
          margin:30px auto 15px;
        }
        a.sign-up-link {
          display:inline-block;
          border:1px solid $medium-gray;
          padding:4px 8px;
          border-radius:3px;
          margin:20px 6px;
          img {
            width:18px;
            vertical-align: -1px;
          }
        }
      }
      .signup-cue-advanced{
        text-align:left;
        padding:30px 25px;
        .sloan{
          height:calc(5vw + 200px);
          margin:10px auto 30px;
          display:block;
        }
      }
      .single-article{
        .reaction-images{
          display:inline-block;
        }
        .reaction-image{
          width:21px;
          height:21px;
          vertical-align:-4px;
        }
        .content{
          padding-bottom:18px;
          &.notification-content{
            a{
              color:$sky-blue;
              font-weight:500;
            }
          }
          &.reaction-content{
            width:calc(100% - 145px);
          }
          .follow-action-button{
            display:block;
            color:white;
            background:$sky-blue;
            border:2px solid $sky-blue;
            border-radius:3px;
            font-size:1.1em;
            margin-top:0.3em;
            padding:2px 10px;
            min-width:150px;
            &.following-butt{
              background:$sky-blue;
              color:white;
            }
            &:hover{
              border:2px solid darken($sky-blue,5%);
            }
          }
          .mod-instructions{
            font-size:0.9em;
            background: darken($light-gray,1%);
            border:1px solid darken($light-gray,12%);
            width:80%;
            padding:10px 0px 10px 35px;
            border-radius:3px;
          }
          .notification-comment-reacted-link{
            padding:2px 6px;
            border:1px solid lighten($medium-gray,9%);
            border-radius:3px;
            max-width:100%;
            display:inline-block;
            margin-bottom:3px;
            color:$black !important;
            &:hover{
              background:lighten($blue,57%);
              border:1px solid lighten($sky-blue,17%);
            }
          }
          .notification-new-post{
            padding:12px 10px;
            margin-top:10px;
            border: 1px solid lighten($dark-gray,18%);
            border-radius:3px;
            color:$black;
            position:relative;
            .notification-new-post-title{
              font-size:1.7em;
              word-wrap: break-word;
            }
            .notification-new-post-tags{
              margin-top:6px;
              color:$medium-gray;
            }
          }
          .footnote{
            font-size:0.8em;
            opacity:0.9;
          }
          .follower-pic-row{
            display: inline-block;
          }
        }
        .comment-link-wrapper{
          display:block;
          position:absolute;
          left:0;
          right:0;
          top:0;
          bottom:0;
        }
        .comment-text{
          padding:10px;
          margin-top:10px;
          border: 1px solid lighten($dark-gray,18%);
          border-radius:3px;
          color:$black;
          position:relative;
          &:hover{
            border: 1px solid $black;
            background:white;
          }
          h1,h2,h3,h4,h5,h6{
            font-size:1.2em;
          }
          p{
            color:$black;
            width:99%;
            padding:0;
            margin-left:0;
          }
          img{
            max-width:100%;
            max-height:400px;
          }
        }
        .comment-actions{
          position:relative;
          button{
            background: transparent;
            border:0px;
            margin-top:5px;
            margin-left:-5px;
            margin-right:3px;
            height:30px;
            width:45px;
            padding:3px 0px;
            overflow-y:hidden;
            -webkit-appearance: none;
            .reacted-emoji{
              display:none;
            }
            &.readinglist-button{
              background: darken($purple, 26%);
              color: white;
              font-family: $helvetica-condensed;
              height: auto;
              width: auto;
              padding: 3px 7px;
              display: inline-block;
              vertical-align: 5px;
              font-size: 17px;
              border-radius: 3px;
              float:right;
              img{
                opacity:1;
              }
              &.reacted{
                vertical-align:0px;
                padding: 3px 7px 1px;
              }
            }
            &.reacted {
              background: transparent;
              .reacted-emoji{
                display:inline;
              }
              .reaction-button-text{
                display: none;
              }
              img{
                display:none;
              }
            }
          }
          img{
            height:25px;
            width:25px;
            opacity:0.7;
            &:hover{
              opacity:1;
            }
          }
          .toggle-reply-form{
            position:absolute;
            right:5px;
            bottom:8px;
            font-weight:300;
            font-family: $helvetica-condensed;
            font-stretch:condensed;
            color: $bold-blue;
            &.already-replied-link{
              color: $green;
            }
          }
        }
        .reply-sent-notice{
          text-align:center;
          padding:10px 0px;
          background: $light-green;
          a {
            display:inline-block;
            background: $green;
            color:white !important;
            padding: 3px 8px;
            border-radius:3px;
          }
        }
        form{
          width:104%;
          background:$light-gray;
          overflow:auto;
          position:relative;
          margin-bottom:calc(0.8vw - 6px);
          z-index:4;
          margin-left:-2%;
          border-top:1px solid $light-medium-gray;
          text-align:right;
          display:none;
          margin-top:4px;
          &.showing{
            display:block;
          }
          &.submitting{
            input[type="submit"]{
              background: #00bbff;
            }
            textarea{
              color:lighten($dark-gray,25%);
              border: 1px solid $light-green;
              background: white url(image_path('loading-ellipsis.svg')) no-repeat center center;
              background-size: 50px;
            }
          }
          @media screen and ( min-width: 820px ){
            width:100%;
            margin-left:0%;
            border-radius:3px;
            border:1px solid $light-medium-gray;
          }

          .field{
            margin-bottom:0px;
          }
          textarea{
            width:92%;
            margin:15px auto 2px;
            display:block;
            resize:none;
            border-radius:3px;
            border:1px solid rgb(232, 229, 229);
            height:55px;
            font-size:16px;
            padding:6px;
            transition: height 0.3s ease;
            height:calc(4vw + 68px);
          }
          input[type="submit"]{
            margin-right:15px;
            background:rgb(0, 146, 228);
            color:white;
            border:0px;
            font-size:11px;
            font-weight:500;
            margin-top:3px;
            padding:5px 12px;
            border-radius:3px;
            appearance: none;
          }
        }
      }
      .unseen{
        background-color: $light-purple;
      }
    }
  }
}