chamilo-lms/assets/css/scss/_forums.scss

.category-forum {
  @apply flex flex-row w-full;
}

.forum_display {
  @apply flex flex-row w-full;
}

.category-forum {
  @apply flex flex-row w-full;
}

.forum_display {
  @apply flex flex-row w-full;
}

.custom-panel-heading {
  @apply flex items-center justify-between;
}

.open {
  @apply flex-shrink-0;
}

.custom-panel-heading h4 {
  @apply m-0 flex-grow pl-2.5;
}

.actions {
  @apply flex items-center gap-2.5;
}

.actions a,
.actions button {
  @apply flex items-center;
}

.custom-panel-heading {
  @apply bg-gray-25 border-b border-gray-300 py-2.5 px-4 flex items-center justify-between;
}

.custom-panel-title span {
  @apply font-bold text-lg text-gray-90;
}

.custom-panel-heading a {
  @apply text-gray-90 no-underline;
}

.custom-panel-heading a:hover,
.custom-panel-heading a:focus {
  @apply underline;
}

.custom-panel-body {
  @apply p-4;
}

.forum_display {
  @apply border-t border-gray-300 py-2.5;
}

.forum_display:first-child {
  @apply border-t-0;
}

.forum-description,
.description {
  @apply text-gray-50 text-sm mt-1.5;
}

.custom-panel-heading .mdi-folder {
  @apply text-gray-90;
}

.ch-tool-icon-disabled {
  @apply text-gray-50;
}

.category-forum {
  .custom-panel-group {
    border: none;
    margin: 0;
    width: 100%;
  }

  .custom-panel {
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    margin-bottom: 10px;
    border-radius: 4px;
    overflow: hidden;
  }

  .custom-panel-heading {
    padding: 10px 15px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .custom-panel-heading .open {
    flex-shrink: 0;
  }

  .custom-panel-heading h4 {
    margin: 0;
    padding: 0;
    font-size: 18px;
    color: #333;
    flex-grow: 1;
    text-align: left;
  }

  .custom-panel-title {
    margin-left: 10px;
  }

  .pull-right a {
    margin-left: 10px;
  }

  .custom-panel-body {
    padding: 15px;
    background-color: #fff;
  }
}

.forum_display {
  display: flex;
  width: 100%;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  .forum-row {
    width: 100%;
    padding: 5px;
  }

  .card-forum {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 10px;
    align-items: flex-start;
    background-color: #fff;
  }

  .number-post {
    text-align: center;
    flex: 0 0 25%;
    padding: 30px;
    border-right: 1px solid #ddd;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20px;
  }

  .number-post i {
    font-size: 48px;
    color: #3276b1;
  }

  .number-post p {
    font-size: 14px;
    margin-top: 8px;
  }

  .content-forum {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding-left: 15px;
  }

  .title-forum {
    font-size: 18px;
    margin: 0;
  }

  .description-forum {
    font-size: 14px;
    color: #666;
    margin-top: 4px;
  }

  .actions-forum {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .actions-forum i {
    font-size: 22px;
    margin-left: 10px;
    cursor: pointer;
  }

  @media (max-width: 768px) {
    flex-direction: column;

    .number-post {
      border-right: none;
      border-bottom: 1px solid #ddd;
      order: -1;
      width: 100%;
      padding: 15px;
    }

    .content-forum {
      padding: 15px;
    }

    .actions-forum {
      justify-content: center;
      margin-top: 10px;
    }
  }
}

.forum-post {
  .post-col1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
      width: 15% !important;
  }

  .q-avatar {
    border-radius: 50%;
    overflow: hidden;
    width: 80px;
    height: 80px;
  }

  .q-avatar img {
    width: 100%;
    height: auto;
  }

  .post-date {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #666;
  }

  .flex-row {
    display: flex;
    margin-top: 10px;
  }

  .boot-tooltip {
    position: relative;
  }

  .boot-tooltip::before {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: black;
    color: white;
    padding: 5px;
    border-radius: 4px;
    font-size: 0.7rem;
    display: none;
  }

  .boot-tooltip:hover::before {
    display: block;
  }
}