core/templates/base-components/oppia-footer.component.css - develop - githubmirror/oppia

core/templates/base-components/oppia-footer.component.css
362 строки6 KB
Rohan Unbeg
Fix #23935: Use href for footer links and add hover effect (#24151)
08 янв 2026, 19:33
08 янв 2026, 19:3303b0386
/*
  NOTE to developers: We generate RTL CSS from this file in the webpack
  compilation, here are sme additional rules that can be added to the CSS files:
  https://rtlcss.com/learn/usage-guide/control-directives .
*/

.oppia-footer-container {
  margin-left: auto;
  margin-right: auto;
  padding: 30px 0;
  text-align: left;
  width: 1140px;
}

.oppia-footer-container a {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 18.75px;
}

.oppia-footer-terms-privacy a,
.oppia-footer-terms-privacy>small {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

/* Force all links in the footer lists to have a pointer and underline on hover */
.oppia-footer ul li a {
  color: #fff;
  /* Ensures text is white */
  cursor: pointer;
  text-decoration: none;
}

.oppia-footer-container a:focus {
  outline: 2px solid #fff;
  text-decoration: underline;
}

.oppia-footer ul li a:hover {
  color: #fff;
  text-decoration: underline;
}

.oppia-footer-container p {
  color: #fff;
  font-size: 1em;
  font-weight: bold;
  margin: 2rem 0;
  text-transform: uppercase;
}

.oppia-footer-container .oppia-mission {
  font-size: 24px;
  font-weight: 400;
  line-height: 28px;
  margin-bottom: 20px;
  text-transform: none;
}

.oppia-footer-container ul {
  padding-left: 0;
}

.oppia-footer-container li {
  list-style-position: inside;
  list-style-type: none;
  margin-bottom: 5px;
}

.oppia-footer-container hr {
  border: 1px solid #fff;
  display: none;
  margin: 1rem 0;
  opacity: 1;
  width: 100%;
}

.oppia-flex-break {
  display: none;
  flex-basis: 100%;
  height: 0;
}

.oppia-footer-newsletter-container {
  background-color: #00645c;
  padding: 30px;
}

.oppia-footer-newsletter {
  display: flex;
  gap: 4rem;
  margin: 0 auto;
  position: relative;
  width: 1140px;
}

.oppia-newsletter-content {
  flex: 1;
}

.oppia-newsletter-content>h2 {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  margin: 0;
  margin-bottom: 12px;
}

.oppia-newsletter-content>p {
  font-size: 16px;
  font-weight: 400;
  line-height: 18.75px;
}

.oppia-footer-newsletter-warning>p {
  color: #fc0;
  font-size: 16px;
  font-weight: 700;
  line-height: 18.75px;
  margin-top: 1em;
}

.oppia-footer-newsletter-input {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.oppia-footer-newsletter-input>label {
  font-size: 14px;
  font-weight: 600;
  width: max-content;
}

.oppia-footer-newsletter-input .oppia-newsletter-input {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.oppia-newsletter-input>input {
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 18px;
  height: 44px;
  outline-color: transparent;
  padding: 0 3px;
  width: 455px;
}

.oppia-newsletter-input>button {
  background-color: #004d45;
  border: 2px solid #fff;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  height: 44px;
  outline-color: transparent;
  padding: 10px;
  width: 96px;
}

.oppia-newsletter-input>button:active {
  background-color: #f5f5f5;
  color: #009688;
}

.oppia-mission-volunteer {
  max-width: 51.3%;
  padding-left: 0;
  padding-right: 3rem;
}

.oppia-footer-terms-privacy {
  display: flex;
  flex-direction: row;
  flex-shrink: 1;
  gap: 6%;
  justify-content: center;
  margin: 0 auto;
  padding-bottom: 15px;
  width: 85%;
}

.pd-0 {
  padding: 0;
}

.pd-r-10 {
  padding-right: 10px;
}

.me-30 {
  margin-right: 30px;
}

.max-width-fit {
  max-width: fit-content;
}

@media (max-width: 1350px) {
  .oppia-footer-container .oppia-mission-volunteer {
    flex: 0 0 100%;
    max-width: 100%;
    padding-right: 0;
  }

  .col.me-30 {
    margin-right: 0;
  }

  .oppia-footer-container hr {
    display: block;
  }

  .oppia-footer-container p {
    margin-bottom: 15px;
  }

  .oppia-newsletter-input>input {
    width: 445px;
  }
}

@media (max-width: 1199px) {

  .oppia-footer-container,
  .oppia-footer-newsletter,
  .oppia-footer-terms-privacy {
    width: 960px;
  }

  .oppia-footer-newsletter {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}

@media (max-width: 1000px) {
  .oppia-footer-container {
    width: 90%;
  }

  .oppia-footer-newsletter,
  .oppia-footer-terms-privacy {
    width: 95%;
  }

  .oppia-newsletter-input>input {
    font-size: 16px;
  }
}

@media (max-width: 991px) {

  .oppia-footer-container,
  .oppia-footer-newsletter {
    width: 720px;
  }
}

@media (max-width: 767px) {

  .oppia-footer-container,
  .oppia-footer-newsletter {
    width: 540px;
  }

  .oppia-newsletter-input>input {
    font-size: 16px;
  }

  .oppia-footer-terms-privacy {
    gap: 4%;
    width: 100%;
  }

  .oppia-flex-break {
    display: block;
  }
}

@media (max-width: 600px) {
  .oppia-footer-container {
    width: 82%;
  }

  .oppia-footer-newsletter {
    width: 94%;
  }

  .oppia-footer-container a {
    font-size: 14px;
    font-weight: 400;
    line-height: 16.5px;
  }

  .oppia-newsletter-input,
  .oppia-newsletter-input>input {
    width: 100%;
  }

  .oppia-footer-newsletter-input .oppia-newsletter-input {
    flex-direction: column;
  }

  .oppia-footer-newsletter-input>label {
    font-size: 10px;
    font-weight: 600;
    line-height: 12px;
  }

  .oppia-newsletter-input>button {
    margin-left: auto;
    padding: 7px;
  }

  .oppia-newsletter-content>h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
  }

  .oppia-newsletter-content>p {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
  }

  .oppia-footer-newsletter-warning>p {
    font-size: 12px;
    font-weight: 700;
    line-height: 14px;
    margin-top: -3em;
    max-width: 70%;
  }

  .oppia-footer-terms-privacy small,
  .oppia-footer-terms-privacy small a {
    font-size: 10px;
    font-weight: 400;
    line-height: 12px;
  }

  .oppia-footer-container .oppia-mission {
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
  }
}

.oppia-footer-version-info {
  font-size: 10px;
  text-align: right;
}