static/styles.html

<style>
    @font-face {
        font-family: 'PoiretOne-Regular';
        src: url('app/static/Quattrocento-Bold.ttf');
    }

    div [data-testid="stWidgetLabel"] {
        font-family: 'PoiretOne-Regular';
        font-size: large;
        font-weight: 400;
        color: hsl(var(--primary));
    }

    div [data-testid="stRadio"], 
    div [data-testid="stSlider"], 
    div [data-testid="stSelectbox"], 
    div [data-testid="stSidebar"] {
        margin-top: 1em;
        padding: 1em;
        border-radius: 18px;
        box-shadow: 2px 3px 10px hsl(var(--border));
        background-color: hsl(var(--card));
    }

    div[data-testid="stVerticalBlockBorderWrapper"]:has(.stHtml > .watchlist_card), 
    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .watchlist_symbol_name), 
    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .watchlist_ticker), 
    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .watchlist_price_label), 
    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .watchlist_price_value), 
    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .column_plotly), 
    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .column_indicator) {
        border-radius: 18px;
        box-shadow: 2px 3px 10px hsl(var(--border));
        background-color: hsl(var(--card));
        color: hsl(var(--foreground));
    }

    /* Estilo específico para os indicadores */
    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .low_indicator) div[data-testid="stMetric"] {
        border-left: 0.5rem solid red;
    }

    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .high_indicator) div[data-testid="stMetric"] {
        border-left: 0.5rem solid rgb(166, 255, 166);
    }
 
    /* Estilo para métricas */
    div[data-testid="stMetric"] {
        background-color: hsl(var(--card));
        border: 2px solid hsl(var(--border));
        margin-top: 1em;
        padding: 1.5em 1em 1em 1.5em; /* top right bottom left */
        border-radius: 20px;
        box-shadow: 4px 5px 10px hsl(var(--border));
        width: 100%; /* Define a largura como 80% do contêiner pai */
    }
    
    div[data-testid="stMetricValue"] {
        font-size: 1em;
        font-weight: 400;
        color: hsl(var(--primary));
    }

</style>