chamilo-lms/assets/css/app.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

@import '~cropper/dist/cropper.css';
//@import "~flag-icons/sass/flag-icons.scss";
@import "~select2/dist/css/select2.css";
@import "~bootstrap-daterangepicker/daterangepicker.css";
//@import '~jquery-ui/themes/base/all.css';

@import "tinymce/skins/ui/oxide/skin.css";
@import './editor_content.css';

@layer utilities {
  .border-gray-300 {
    --tw-border-opacity: 1;
    border-color: rgba(156, 163, 175, var(--tw-border-opacity));
  }
  .border-gray-100 {
    --tw-border-opacity: 1;
    border-color: rgba(247, 250, 252, var(--tw-border-opacity));
  }
}

@layer components {
  .card {
    @apply rounded bg-white drop-shadow-lg w-full;
  }

  // Buttons with icons.
  .btn > .svg {
    @apply -ml-1 mr-1 h-4 w-5 fill-current ;
  }

  // Forms.

  .help-block {
    @apply mt-2 text-caption;
  }

  .has-error .ch-form-label {
    @apply h-8;
  }

  .has-error .help-block {
    @apply italic text-caption;
  }

  .has-error .ch-form-control {
  }

  // List

  .list-group {
    @apply flex flex-col mr-4;
  }

  .list-group-item {
    @apply flex flex-row justify-start gap-2 border rounded-sm px-3 py-3 items-center;
  }

  #lp_item_list .list-group-item {
    align-items: normal !important;
  }

  .data_table, .table-striped  {
    @apply border-collapse w-full mt-2;

    thead th {
      @apply bg-gray-20 text-gray-90 font-semibold text-left px-4 py-3 border-b border-gray-30 border-t border-l border-r border-gray-30 text-center;
    }

    tbody td {
      @apply px-4 py-3 border-b border-gray-30 border-l border-r border-gray-30;
    }

    tbody tr:nth-child(odd) {
      @apply bg-gray-5;
    }

    tbody tr:hover {
      background-color: #eff6ff;
    }

    .checkbox label {
      @apply pl-4;
    }

    i.mdi {
      @apply align-middle;
    }

    .mdi::before {
      @apply inline-block;
      font-size: inherit;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      transform: translate(0, 0);
    }
  }

  .sortable-container {
    width: 100%;
    overflow: auto;
  }

  .toolbar-action {
    .p-toolbar-group-start.p-toolbar-group-left {
      display: flex;
      padding: 10px;
      background: #f0f0f0;
      border-radius: 5px;
    }

    .p-toolbar-group-start.p-toolbar-group-left .btn {
      padding: 10px 20px;
      text-decoration: none;
      color: #333;
      background-color: #e7e7e7;
      border: 1px solid #ddd;
      border-radius: 5px;
      transition: background-color 0.3s;
    }

    .p-toolbar-group-start.p-toolbar-group-left .btn:hover {
      background-color: #ddd;
    }

    .p-toolbar-group-start.p-toolbar-group-left .btn.active {
      background-color: #007bff;
      color: white;
      border-color: #007bff;
    }

    .p-toolbar-group-start.p-toolbar-group-left .btn + .btn {
      margin-left: 10px;
    }
  }

  .sortable-buttons-actions {
    @apply bg-gray-5 border border-gray-20 rounded shadow;

    .btn {
      @apply px-4 bg-white border border-gray-30 py-2 mr-2 text-gray-90 rounded cursor-pointer transition-all;
      height: 35px;
    }

    .btn--action {
      @apply bg-white border border-gray-30 py-1 px-3 text-sm rounded cursor-pointer text-gray-90;
    }

    .btn:hover, .plane:hover {
      @apply bg-gray-25 text-gray-90;
    }
  }

  .card .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card .flex .relative {
    position: relative;
    font-size: 16px;
    font-weight: bold;
  }

  .card .flex a {
    margin-left: 10px;
    font-size: 18px;
    color: #333;
  }

  .card .sectioncomment {
    padding: 15px;
    background-color: #f7f7f7;
  }

  .card span.float-right {
    float: right;
    margin-right: 15px;
    font-size: 14px;
    color: #666;
  }

  .card .stat-content {
    padding: 10px;
  }

  // Alerts

  .alert {
    @apply p-3.5 mb-5 border border-transparent rounded;
  }

  .alert-warning {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffeeba;
  }

  .alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
  }

  .alert-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border-color: #bee5eb;
  }

  .alert-success {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
  }


  // Tabs

  .tab_wrapper nav {
    @apply card flex flex-row justify-between gap-4;
  }

  .tab_wrapper nav a {
    @apply p-4;
  }

  // Calendar

  #calendar .fc-toolbar-chunk {
    @apply flex flex-row;
  }

  // Page header

  .page-header {
    @apply text-h3 flex flex-row gap-2;
  }

  #no-data-view {
    @apply flex flex-col items-center justify-center p-4 space-y-4 antialiased;
  }

  .pull-right {
    @apply flex justify-end;
  }

  .header-border-bottom {
    border-bottom: 1px solid #e4e9ed !important;
  }

  .ch-tool-icon {
    @apply font-extrabold text-primary;
  }
  .ch-toolbar-icon {
    @apply font-extrabold text-primary leading-none;
  }
  .ch-tool-icon-disabled {
    @apply font-extrabold text-gray-50;
  }
  .ch-tool-icon-gradient {
    @apply font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-primary to-primary-gradient;
  }
  .ch-tool-icon-button {
    @apply font-extrabold bg-clip-text;
  }

  #course-search-keyword {
    @apply w-auto;
  }

  // Form
  .has-error input, .has-error select {
    border-color: red !important;
  }

  // Special

  // Progress bars
  .progress {
    @apply rounded-sm ring-1 text-center min-h-full ml-12 mr-4;
  }

  .log-container {
    height: 300px;
    overflow-y: scroll;
    background-color: #000;
    padding: 10px;
  }

  .terminal {
    color: #00ff00; /* Green */
    font-family: monospace;
  }

  .terms-container {
    overflow-y: scroll;
    height: 180px;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 20px;
  }

  // Pager
  .pager-bar {
  }
  .pager-bar .pager-select {
  }
  .pager-bar .pager-counter {
    @apply mt-4;
  }
  .pager-bar .pager-jumper {
    @apply mt-4;
  }
  .pager-bar .pager-jumper .btn-link {
    @apply -mt-2 mx-2;
  }

  // free-jqGrid override
  .ui-jqgrid-bootstrap.modal {
    @apply bg-white;
  }
}

@import "scss/index.scss";

.field > small.p-error {
  @apply text-error;
}

// tabs
.tab-content {
  > .tab-pane {
    display: none;
  }
  > .active {
    display: block;
  }
}

.col-md-offset-0 {
  margin-left: 0 !important;
}

.col-md-offset-1 {
  margin-left: 5% !important;
}

.col-md-offset-2 {
  margin-left: 10% !important;
}

.col-md-offset-3 {
  margin-left: 15% !important;
}

.col-md-offset-4 {
  margin-left: 20% !important;
}

.custom-message {
  padding: 15px;
}

.custom-message {
  ol,
  ul,
  menu {
    list-style: initial;
  }
}

.custom-link {
  color: blue;
  text-decoration: underline;
}

#date_fields label,
.p-float-label .datepicker-label {
  top: 0px;
  left: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(46 117 163 / var(--tw-text-opacity));
  font-size: 12px;
}

.question_options .droppable {
  padding: 5px;
  text-align: center;
  background-color: #ECF0F1;
  border: dotted #dddddd 2px;
  border-radius: 4px;
  color: #666666;
  display: inline-block;
  width: 85%;
  margin-bottom: 0;
}

.question_options .droppable-item {
  background-color: #84bd00;
  color: #FFF;
  padding: 3px 0 3px 5px;
  width: 20%;
}

.question_options .droppable-item .number {
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
}

.hide-label-title {
  color: #0a0a0a;
}

#global-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}

.documents-layout {
  display: flex;
  justify-content: space-between;
}

.template-list-container {
  flex-basis: 20%;
  max-height: 600px;
  overflow-y: auto;
}

.documents-form-container {
  flex-basis: 78%;
}

.template-item img {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  transition: transform 0.2s ease;
}

.template-item img:hover {
  transform: scale(1.05);
  cursor: pointer;
}

.template-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.template-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.template-item img {
  width: 100%;
  max-width: 200px;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 5px;
}

.template-item:hover {
  background-color: #ececec;
  cursor: pointer;
}

.users-list {
  .nav-tabs {
    display: flex;
    list-style-type: none;
    padding: 0;
    border-bottom: 1px solid #ddd;
    margin: 0 0 20px;
  }

  .nav-tabs .nav-item {
    margin-bottom: -1px;
  }

  .nav-tabs .nav-link {
    display: block;
    padding: 0.5rem 1rem;
    margin-right: 0.1rem;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 0.25rem 0.25rem 0 0;
    text-decoration: none;
    color: #555;
  }

  .nav-tabs .nav-link:hover {
    background-color: #e9ecef;
  }

  .nav-tabs .nav-link.active {
    color: #495057;
    background-color: #fff;
    border-color: #ddd #ddd #fff;
    border-bottom-color: transparent;
    font-weight: bolder;
  }
}

form .field {
  .help-text {
    color: #666;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    background-color: #f8f8f8;
    border-left: 4px solid #007bff;
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-width: 80%;
    display: inline-block;
  }

  textarea {
    width: 100%;
  }

  .freeze {
    display: block;
    padding-top: 10px;
  }

  .freeze + label,
  .advmultiselect + label,
  textarea + label.settings-label
  {
    font-size: 13px;
    @apply absolute top-0 left-0 text-support-3 text-caption px-1 bg-white text-primary;
  }
}

.flatpickr-calendar .flatpickr-validate-btn {
  margin-top: 10px;
  width: 100%;
  padding: 5px;
  background-color: #569ff7;
  border: none;
  cursor: pointer;
  color: #ffffff;
}

.mce-translatehtml, span[lang] {
  display: none;
}

.sub-item-indent {
  padding-left: 20px;
}

.sub-item-indent.active {
  background-color: #e0e0e0;
  color: #333;
  font-weight: bold;
}

.easy-donut {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.easy-donut .percent {
  font-size: 1.25rem;
  font-weight: bold;
}
.stat-widget-five {
  display: flex;
  align-items: center;
}
.stat-widget-five .fa, .stat-widget-five .mdi-icon {
  margin-right: 1rem;
}

.toggle-password {
  position: absolute !important;
  top: 65% !important;
  transform: translateY(-50%);
  right: 0.75rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.toggle-password i {
  font-size: 24px;
}

#legacy_content {
  .exercise-overview {
    padding: 30px 10px 60px;
  }
  .question-result {
    padding-top: 30px;
  }

  .exercise-draggable-answer.full-width {
    width: 100%;
  }

  .exercise-draggable-answer.list-inline {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .exercise-draggable-answer.vertical {
    @apply flex flex-col w-full;
  }

  .exercise-draggable-answer.horizontal {
    @apply flex flex-wrap;
  }

  .droppable-item {
    @apply flex items-center justify-between p-4 mb-4 rounded-md;
  }

  .number {
    @apply text-lg font-bold;
  }

  .droppable, .ui-droppable {
    @apply border-2 border-dashed p-4 bg-white rounded-md min-h-[50px];
  }

  .question_options .question-answer__items--vertical .droppable {
    width: 98%;
  }

  .ui-dragging {
    @apply w-full flex items-center justify-center p-4 border-2 border-dashed;
  }

  .vertical .ui-draggable-dragging {
    width: 80%;
  }

  .question-answer__items--vertical {
    @apply flex flex-col w-full;
  }

  .question-answer__items--horizontal {
    @apply flex flex-row flex-wrap;
  }
}

.btn:hover {
  cursor: pointer;
  color: #fff;
}

.btn.btn--success.btn-large:hover {
  background-color: #28a745;
}

.btn.btn--warning.question-validate-btn:hover {
  background-color: #ffc107;
}

.btn.btn--info:hover {
  background-color: #17a2b8;
}

.btn.btn--success:hover {
  background-color: #28a745;
}

.btn.btn--danger:hover {
  background-color: #dc3545;
}

.permissions-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
  }
  th {
    background-color: #f9f9f9;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  tr:hover {
    background-color: #e9e9e9;
  }
  th, td {
    padding: 5px;
    font-size: 0.9em;
    white-space: normal;
    word-wrap: break-word;
    min-width: 100px;
    vertical-align: top;
  }
  th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    background-color: #999;
    color: white;
  }
  td {
    padding: 12px;
  }
  input[type="checkbox"] {
    transform: scale(1.2);
  }
  .save-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    margin: 20px 0;
    border: none;
    cursor: pointer;
    text-align: center;
  }
  .save-button:hover {
    background-color: #45a049;
  }
  input[type="checkbox"] {
    transform: scale(1);
    margin: 0 auto;
  }
}

.files-info-page {
  .form-control {
    @apply w-48 p-1 border border-gray-300 rounded;
  }

  .btn-primary {
    @apply bg-primary text-primary-button-text p-1 rounded;
  }

  .btn-primary:hover {
    @apply bg-secondary-hover;
  }

  .modal {
    @apply hidden fixed z-10 left-0 top-0 w-full h-full overflow-auto bg-black bg-opacity-50 pt-16;
  }

  .modal-content {
    @apply bg-white m-auto p-5 border border-gray-300 w-1/3;
  }

  .close-button {
    @apply text-fontdisabled float-right text-2xl font-bold;
  }

  .close-button:hover,
  .close-button:focus {
    @apply text-black no-underline cursor-pointer;
  }

  .pagination {
    @apply flex justify-center my-5;
  }

  .pagination a,
  .pagination span {
    @apply mx-1 px-4 py-2 text-primary border border-gray-25;
  }

  .pagination a:hover {
    @apply bg-gray-15;
  }

  .pagination span {
    @apply bg-primary text-white border-primary;
  }
}

.filemanager-container {
  .mdi-icon {
    font-size: 48px;
  }

  .thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .thumbnail-item {
    width: 150px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
  }

  .thumbnail-icon {
    font-size: 2rem;
  }

  .thumbnail-title {
    margin-top: 10px;
    font-size: 1rem;
    cursor: pointer;
  }

  .thumbnail-actions {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 5px;
  }

  .thumbnail-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
  }
}

.row {
  @apply flex flex-wrap -mx-4;
}
.col-md-4 {
  @apply w-full md:w-1/3 px-4;
}
.col-md-6 {
  @apply w-full md:w-1/2 px-4;
}

//@import 'primevue-md-light-indigo/theme.css';
//@import '~primevue/resources/primevue.min.css';
//@import '~primeflex/primeflex.css';
//@import "~primeicons/primeicons.css";

@import 'primeflex/core/_variables.scss';
@import 'primeflex/core/_formlayout.scss';

//@import "~jquery-ui-timepicker-addon/dist/jquery-ui-timepicker-addon.css";
@import "~@fancyapps/fancybox/dist/jquery.fancybox.css";
@import "~timepicker/jquery.timepicker.min.css";
@import "~qtip2/dist/jquery.qtip.min.css";