question-wall.component.scss

:host{

  p,h1,h2,h3,h4,h5{
    padding:0;
    margin:0;
  }

  .test{
    width:100%;
    height:250px;
    box-shadow:inset 0 0 0 1px black;
  }

  .icon-svg{
    color:var(--ars-header-color);
    height:18px;
    width:18px;
  }

  .pseudo-button{
    cursor:default;
    >*{
      cursor:default;
    }
  }

  .questionwall{
    &-icon{
      font-family:'Material Icons', serif;
      font-weight:normal;
      font-style:normal;
      font-size:18px;
      line-height:18px;
      padding:0;
      margin:0;
      color:var(--ars-header-color);
    }
    &-header{
      background-color:var(--ars-foreground-color);
      border-bottom:solid 1px var(--ars-border-color);
      z-index:4;
    }
    &-footer{
      background-color:var(--ars-foreground-color);
      border-top:solid 1px var(--ars-border-color);
      z-index:54;
      >*{
        height:100%;
        float:left;
      }
    }
    &-comment{
      &-meta{
        display:flex;
        justify-content:flex-start;
        flex-direction:row;
      }
      &-border{
        &-on{
          box-shadow:inset 0px 0px 0px 1px var(--ars-button-color-light);
        }
        &-off{
          box-shadow:inset 0px 0px 0px 0px var(--ars-button-color-light);
        }
      }
      &-timestamp{
        color:var(--ars-paragraph-color);
        font-size:14px;
        line-height:18px;
      }
      &-user{
        color:var(--ars-header-color);
        font-size:14px;
        padding-right:8px;
        line-height:18px;
      }
      &-body{
        hyphens:auto;
        word-break:break-word;
        color:var(--ars-header-color);
        line-height:22px;
        white-space:normal;
      }
      &-btn{
        >button>*{
          color:var(--ars-button-color-light);
        }
        >button:hover>*{
          color:var(--ars-button-color);
        }
      }
      &-notification{
        font-size:12px;
        text-transform:uppercase;
        letter-spacing:2px;
        line-height:18px;
        font-weight:600;
        color: #cc4244;
      }
    }
    &-list{
      box-sizing:border-box;
      border-left:solid 1px var(--ars-border-color);
      &-filter{
        border-top:solid 1px var(--ars-border-color);
        border-bottom:solid 1px var(--ars-border-color);
      }
      &-border-bottom{
        border-bottom:solid 1px var(--ars-border-color);
      }
      &-comments{
      }
      &-scroll{
        width:100%;
        height:100%;
        display:flex;
        flex-direction:column;
        background-color:orange;
      }
    }
    &-present{
      font-size:45px;
      padding:16px 32px 16px 32px;
      color:var(--ars-header-color);
      word-break:break-word;
      &-options{
        &-outer{
          width:0;
          height:0;
          position:relative;
        }
        &-inner{
          width:150px;
          height:50px;
          position:relative;
          top:16px;
          left:-182px;
        }
        &-slider{
          width:100%;
        }
      }
      &-box{
        &-outer{
          display:flex;
          flex-direction:row;
          justify-content:center;
        }
        &-inner{
          width:1000px;
          flex-shrink:1;
        }
      }
      &-meta{
        padding-top:16px;
        display:flex;
        justify-content:start;
        flex-direction:row;
        :first-child{
          padding-left:32px;
        }
        &-icon{
          font-size:20px;
          line-height:20px;
        }
        &-user{
          font-family:Roboto, 'sans-serif';
          font-size:18px;
          padding-left:4px;
          padding-right:16px;
          color:var(--ars-header-color);
        }
        &-timestamp{
          font-family:Roboto, 'sans-serif';
          font-size:18px;
          font-weight:400;
          color:var(--ars-paragraph-color);
        }
      }
      &-introduction{
        &-title{
          font-size:35px;
          padding:32px 32px 0 32px;
          color:var(--ars-header-color);
        }
        &-desc{
          font-size:18px;
          padding:16px 32px 0 32px;
          color:var(--ars-paragraph-color);
        }
      }
    }
    &-screen{
      background-color:var(--ars-background-color);
    }
    &-text{
      &-color{
        color:var(--ars-paragraph-color);
      }
    }
  }

  .bound img{
    max-width:100%;
  }

}

:host ::ng-deep{
  .questionwall-present-markdown{
    max-width:100%;
    img{
      width:100%!important;
    }
  }
  .questionwall-present-options-slider{
    .mat-slider-wrapper{
      background-color:var(--ars-border-color);
    }
    .mat-slider-thumb{
      background-color:var(--ars-button-color);
    }
    .mat-slider-track-fill{
      background-color:var(--ars-button-color);
    }
  }
}