core/templates/components/summary-tile/exploration-summary-tile.component.css - develop - githubmirror/oppia

core/templates/components/summary-tile/exploration-summary-tile.component.css
152 строки3 KB
Harshvardhan Agarwal
Fix #24976: Display exploration tags in Preview Summary tile (#25089)
31 мар 2026, 15:37
31 мар 2026, 15:37773401c
/*
  NOTE to developers: We generate RTL CSS from this file in the webpack
  compilation, here are some additional rules that can be added to the CSS files:
  https://rtlcss.com/learn/usage-guide/control-directives .
*/
oppia-exploration-summary-tile .oppia-exploration-dashboard-card {
  position: relative;
  text-align: left;
  width: 198px;
  z-index: 5;
}

oppia-exploration-summary-tile .oppia-play-exploration-button {
  display: block;
  margin: auto;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  touch-action: pan-y;
  -webkit-user-drag: none;
  user-select: none;
}

oppia-exploration-summary-tile .oppia-return-to-parent-button {
  margin-top: 12px;
}

/*
  The comment in the section below is an rtlcss value directive mentioned here:
  https://rtlcss.com/learn/usage-guide/value-directives/, which tells rtlcss
  to replace the value of the input style to whatever is specified in the
  comment.
*/
oppia-exploration-summary-tile .oppia-arrow-icon {
  font-size: 19px;
  padding-top: 1.5px;
  -moz-transform: scaleX(1) /*rtl:scaleX(-1)*/;
  -o-transform: scaleX(1) /*rtl:scaleX(-1)*/;
  -webkit-transform: scaleX(1) /*rtl:scaleX(-1)*/;
  transform: scaleX(1) /*rtl:scaleX(-1)*/;
}

oppia-exploration-summary-tile .oppia-learner-confirm-button {
  background: #0d48a1;
  color: #fff;
  font-size: 16px;
  line-height: 22px;
  padding: 6px 12px;
}

oppia-exploration-summary-tile .mobile-activity-summary-card {
  box-shadow: slategrey 2px 4px 4px 0;
  padding: 0 0 0 0;
  width: 340px;
}

oppia-exploration-summary-tile .mobile-exploration-card-image-container {
  align-self: center;
  width: 63px;
}

oppia-exploration-summary-tile .mobile-exploration-card-image {
  height: 100%;
  width: auto;
}

oppia-exploration-summary-tile .views-text {
  margin-left: 6px;
}

oppia-exploration-summary-tile .thumbnail-image {
  display: block;
}

oppia-exploration-summary-tile .exploration-summary-btn {
  align-items: center;
  background-color: #fff;
  border: none;
  border-radius: 4px;
  border-width: 1px;
  color: #0d48a1;
  display: flex;
  font-family: "Capriola", "Roboto", Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  height: 78px;
  justify-content: space-between;
  margin-bottom: 15px;
  padding: 16px;
  width: 325px;
}

oppia-exploration-summary-tile a:hover {
  text-decoration: none;
}

oppia-exploration-summary-tile .exploration-summary-btn p {
  text-align: right;
}

oppia-exploration-summary-tile .arrow-icon {
  font-size: 24px;
  margin-right: 10px;
}

oppia-exploration-summary-tile .star-icon {
  margin-right: 5px;
}

oppia-exploration-summary-tile .exploration-summary-btn span {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
}

oppia-exploration-summary-tile .oppia-exploration-dashboard-card .layout-row {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  max-width: 100%;
}

oppia-exploration-summary-tile .tags-section {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

oppia-exploration-summary-tile .tag-badge {
  background: #f0f0f0;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  color: #333;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 11px;
  padding: 2px 8px;
}

@media (max-width: 480px) {
  oppia-exploration-summary-tile .exploration-summary-btn {
    font-size: 13px;
    width: 240px;
  }

  oppia-exploration-summary-tile .arrow-icon {
    font-size: 18px;
  }

  oppia-exploration-summary-tile .exploration-summary-btn span {
    font-size: 13px;
  }

}