question-wall.component.scss

:host{

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

  .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;
      padding:16px 0px;
      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);
      }
    }
    &-present{
      font-size:45px;
      padding:16px 32px 16px 32px;
      color:var(--ars-header-color);
      word-break:break-word;
      &-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);
      }
    }
  }

}