Sith/pedagogy/static/pedagogy/css/pedagogy.scss

@import "core/static/core/devices";
@import "core/static/core/colors";


$pedagogy-blue: #1bb9ea;
$pedagogy-orange: #ea7900;
$pedagogy-hover-blue: #0e97ce;
$pedagogy-light-blue: #caf0ff;
$pedagogy-white-text: #f0f0f0;

.pedagogy {
  .star-not-checked {
    color: lightgray;
    margin-bottom: 0;
    margin-top: 0;
  }

  .star-checked {
    color: $pedagogy-orange;
    margin-bottom: 0;
    margin-top: 0;
  }

  #ue-list {
    font-size: 1.1em;

    overflow-wrap: break-word;

    .closed td.title {
      color: lighten($black-color, 10%);
      font-style: italic;
    }

    td {
      text-align: center;
      border: none;
    }
  }

  #search_form {
    .radio-guide fieldset {
      input[type="checkbox"] {
        display: none;
      }
      margin-top: 10px;
      margin-bottom: 0;
      color: white;

      label {
        padding: 10px 20px;
      }

      input[type="checkbox"]:checked+label {
        background-color: $pedagogy-orange;
        @include shadow;
      }
    }
  }

  &#ue_detail {
    .ue-infos {
      display: flex;
      gap: 2em;
      flex-direction: row;
      @media screen and (max-width: 700px) {
        flex-direction: column;
      }
    }
    .infos-column {
      display: flex;
      flex-direction: column;
      gap: 1em;
      min-width: 300px;
    }
    .info-container {
      // Darken the background color just enough to make this part
      // stand out a little, while not being too perceptible
      background: darken($white-color, 1%);
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-radius: 5px;
      padding: .75rem 1rem ;
      grid-gap: .5rem;
      @include shadow;

      .info-container-item {
        display: grid;
        grid-column: span 2;
        grid-template-rows: subgrid;
        grid-template-columns: subgrid;
        grid-column-gap: 1rem;

        div {
          display: flex;
          align-items: center;
        }

        :first-child {
          justify-content: right;
          text-align: right;
        }
      }

      hr {
        grid-column: span 2;
        width: 50%;
        margin: auto;
      }
    }

    #leave_comment_not_allowed {
      p {
        text-align: center;
        color: red;
      }
    }

    #leave_comment {
      .leave-comment-grid-container {
        display: grid;
        grid-template-columns: 270px auto;
        grid-template-rows: 100%;
        grid-template-areas: "stars comment";

        @media screen and (max-width: $large-devices) {
          grid-template-columns: 100%;
          grid-template-rows: auto auto;
          grid-template-areas:
          "stars"
          "comment";
        }

      }

      .form-stars {
        grid-area: stars;
      }

      .form-comment {
        grid-area: comment;
      }

      .ui-accordion-header-icon {
        color: $pedagogy-white-text;
        margin-right: 10px;
      }

      .input-stars {
        margin-top: 20px;
      }
    }

    .ue-infos {
      grid-area: ue-infos;
      padding-left: 10px;
    }

    .comment-container {
      display: grid;
      grid-template-columns: 300px auto;
      grid-template-rows: auto auto auto;
      grid-template-areas:
      "grade-block comment"
      "grade-block info"
      "comment-end-bar comment-end-bar";
      margin-bottom: 30px;
      margin-top: 10px;

      @media screen and (max-width: $large-devices) {
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
        "grade-block"
        "comment"
        "info"
        "comment-end-bar";
      }

      .grade-block {
        grid-area: grade-block;
        width: 300px;

        display: grid;
        grid-template-columns: 150px 150px;
        grid-template-rows: 156px auto;
        grid-template-areas:
        "grade-type grade-stars"
        "grade-extension grade-extension";
        grid-gap: 15px;

        clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30px, 270px 0);
        align-items: start;

        background-color: $pedagogy-blue;

        @media screen and (max-width: $large-devices) {
          grid-template-columns: 50% auto;
          grid-template-rows: auto;
          grid-template-areas: "grade-type grade-stars";
          width: auto;
          clip-path: none;
          align-content: space-evenly;
          align-items: end;
        }

        .grade-extension {
          grid-area: grade-extension;
          background-color: $pedagogy-blue;
        }

        .grade-type {
          grid-area: grade-type;

          >p {
            color: $pedagogy-white-text;
            font-weight: bold;
            text-align: right;
          }
        }

        .grade-stars {
          grid-area: grade-stars;
        }
      }

      .comment {
        grid-area: comment;

        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto;
        grid-template-areas:
        "anchor"
        "markdown";

        @media screen and (max-width: $large-devices) {
          border-left: solid;
          border-right: solid;
          border-color: $pedagogy-blue;
        }

        .anchor {
          grid-area: anchor;
          text-align: right;
          margin-right: 15px;
        }

        .markdown {
          grid-area: markdown;

          min-height: 139px;
          margin-top: 0;
          margin-right: 0;
          padding: 10px;
          text-align: justify;
          overflow: auto;
        }
      }

      .info {
        grid-area: info;
        padding-bottom: 10px;

        @media screen and (max-width: $large-devices) {
          border-left: solid;
          border-right: solid;
          border-color: $pedagogy-blue;
        }

        .status-reported {
          color: red;
          float: left;
          padding-left: 10px;
        }

        .action {
          float: right;
          margin-top: 0;
        }
      }

      .comment-end-bar {
        grid-area: comment-end-bar;

        display: grid;
        grid-template-columns: 33% auto auto;
        grid-template-rows: 2.5em;
        grid-template-areas: "author date report";

        background-color: $pedagogy-blue;
        margin-top: -1px;

        @media screen and (max-width: $large-devices) {
          grid-template-columns: auto;
          grid-template-rows: auto auto auto;
          grid-template-areas:
          "report"
          "date"
          "author";
          margin-top: 0;
          text-align: center;
        }

        .author {
          grid-area: author;

          padding-top: 6px;
          padding-left: 20px;

          background-color: $pedagogy-orange;
          clip-path: polygon(0 10px, 0 100%, 350px 200%, 300px 10px);

          @media screen and (max-width: $large-devices) {
            clip-path: none;
            padding: 0;
            padding-bottom: 7px;
          }

          a {
            color: $pedagogy-white-text;
            font-weight: bold;
          }

          a:hover {
            color: $pedagogy-hover-blue;
          }
        }

        .date {
          grid-area: date;
          color: $pedagogy-white-text;

          @media screen and (max-width: $large-devices) {
            padding-bottom: 7px;
          }
        }

        .report {
          grid-area: report;
          justify-self: right;
          padding-right: 30px;
          padding-left: 30px;

          a {
            color: $pedagogy-white-text;
            cursor: pointer;
          }

          a:hover {
            color: $pedagogy-hover-blue;
          }

          @media screen and (max-width: $large-devices) {
            text-align: center;
            justify-self: inherit;
            padding-bottom: 7px;
            background-color: $white-color;

            border-left: solid;
            border-right: solid;
            border-color: $pedagogy-blue;

            a {
              color: $black-color;
            }
          }
        }
      }
    }
  }
}

details.accordion summary {

  background: $pedagogy-orange !important;
  color: $pedagogy-white-text !important;
  clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0);

  @media screen and (max-width: $large-devices) {
    clip-path: none;
  }
}

details.accordion>.accordion-content {
  background-color: $white-color;
  border-color: $pedagogy-orange;
  border-right: none;
}

.buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}