html/front_layout.html

<!-- html/front_layout.html -->
<h1 style="text-align:center;margin-bottom:15px;margin-left:10px">
  Swift Stock Screener
</h1>
<p style="margin-left:10px">
  Browse and search over 12,000 stocks. Search assets by theme, filter, sort, analyze, and get ideas to build portfolios and indices. Search by <b>ticker symbol</b> to display a ranked list of similar companies based on fundamentals and performance. Enter any keyword in <b>thematic search</b> to search companies by theme. Click on <u>country names</u> or <u>GICS sectors</u> for strict filtering. <b>Reset</b> the search and <b>sort</b> all assets by any of the displayed metrics.

<style>
  /* Botón de tamaño contenido */
  .small-btn {
    /*width: 140px;*/
    max-width: 140px;
    /*min-width: 140px;*/
  }

  /* Etiqueta de paginación */
  .pagination-label {
    flex: 0 0 auto;
    width: auto;
    margin: 0 8px;   /* small horizontal gap */
  }

  /* cap the Gradio table + keep pagination row below */
  .clickable-columns .dataframe-container {
    max-height: calc(100vh - 300px);  /* adjust px to match header+controls height */
    overflow-y: auto;
  }

  /* Columnas filtrables (click en la celda) */
  .clickable-columns tbody td:nth-child(3),
  .clickable-columns tbody td:nth-child(4) {
      color: #1a0dab;              /* link blue for light theme */
      text-decoration: underline;  /* underline */
      cursor: pointer;             /* pointer cursor */
  }

  @media (prefers-color-scheme: dark) {
    .clickable-columns tbody td:nth-child(3),
    .clickable-columns tbody td:nth-child(4) {
      color: #8ab4f8;              /* lighter blue for dark theme */
    }
  }

  .clickable-columns span.negative-value {
    color: red;
  }

    /* make the table use fixed layout so width rules apply */
    .clickable-columns table {
    table-layout: fixed;
  }

  /* CONFIGURACIÓN DE ANCHO DE COLUMNAS */
  /* Ticker */
  .clickable-columns table th:nth-child(1),
  .clickable-columns table td:nth-child(1) {
    min-width: 40px; max-width: 100px;
    overflow: hidden;
  }
  .clickable-columns table th:nth-child(2),
  .clickable-columns table td:nth-child(2) {
    min-width: 75px; max-width: 220px;
    overflow: hidden;
  }
  .clickable-columns table th:nth-child(3),
  .clickable-columns table td:nth-child(3) {
    min-width: 70px; max-width: 160px;
    overflow: hidden;
  }
  .clickable-columns table th:nth-child(4),
  .clickable-columns table td:nth-child(4) {
    min-width: 70px; max-width: 200px;
    overflow: hidden;
  }
  .clickable-columns table th:nth-child(5),
  .clickable-columns table td:nth-child(5) {
    min-width: 60px; max-width: 80px;
    overflow: hidden;
  }
  /* 1yr return */
  .clickable-columns table th:nth-child(6),
  .clickable-columns table td:nth-child(6) {
    min-width: 60px; max-width: 80px;
    overflow: hidden;
  }
  .clickable-columns table th:nth-child(7),
  .clickable-columns table td:nth-child(7) {
    min-width: 70px; max-width: 100px;
    overflow: hidden;
  }
  .clickable-columns table th:nth-child(8),
  .clickable-columns table td:nth-child(8) {
    min-width: 70px; max-width: 100px;
    overflow: hidden;
  }
  .clickable-columns table th:nth-child(9),
  .clickable-columns table td:nth-child(9) {
    min-width: 70px; max-width: 100px;
    overflow: hidden;
  }
  .clickable-columns table th:nth-child(10),
  .clickable-columns table td:nth-child(10) {
    min-width: 70px; max-width: 100px;
    overflow: hidden;
  }
  .clickable-columns table th:nth-child(11),
  .clickable-columns table td:nth-child(11) {
    min-width: 60px; max-width: 70px;
    overflow: hidden;
  }
  .clickable-columns table th:nth-child(12),
  .clickable-columns table td:nth-child(12) {
    min-width: 50px; max-width: 70px;
    overflow: hidden;
  }

</style>