Upload 2 files

style.css

@@ -0,0 +1,131 @@
+/* Estilos gerais */
+:root {
+    --background: 0 0% 80%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
+    --chart-1: 173 58% 39%;
+    --chart-2: 12 76% 61%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+}
+.dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-5: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-2: 340 75% 55%;
+}
+
+/* Estilos gerais */
+body {
+    font-family: 'Roboto', sans-serif;
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+}
+
+.stApp {
+    padding: 4rem;
+}
+
+/* Estilo Neuromórfico para as métricas */
+div[data-testid="stMetric"] {
+    background: hsl(var(--card));
+    border-radius: 15px;
+    padding: 2em 1em; /* Aumenta o padding para sobressair */
+    box-shadow: 8px 8px 15px hsl(var(--muted)), -8px -8px 15px hsl(var(--background));
+    transition: all 0.3s ease;
+}
+
+div[data-testid="stMetric"]:hover {
+    transform: translateY(-5px);
+    box-shadow: 12px 12px 20px hsl(var(--muted)), -12px -12px 20px hsl(var(--background));
+}
+
+div[data-testid="stMetricLabel"] p {
+    font-family: 'Quattrocento-Regular';
+    color: hsl(var(--primary));
+    font-size: 1.3em;
+}
+
+div[data-testid="stMetricValue"] {
+    font-size: 1.3em;
+    font-weight: 400;
+    color: hsl(var(--primary-foreground));
+}
+
+/* Outros elementos neuromórficos */
+.stButton button,
+.stTextInput input,
+.stSelectbox select {
+    border-radius: 25px;
+    padding: 1em 2em;
+    background: hsl(var(--card));
+    box-shadow: 8px 8px 15px hsl(var(--muted)), -8px -8px 15px hsl(var(--background));
+    transition: all 0.3s ease;
+    border: none;
+    color: hsl(var(--foreground));
+}
+
+.stButton button:hover,
+.stTextInput input:focus,
+.stSelectbox select:focus {
+    box-shadow: 12px 12px 20px hsl(var(--muted)), -12px -12px 20px hsl(var(--background));
+}
+
+.stButton button:active,
+.stTextInput input:active,
+.stSelectbox select:active {
+    box-shadow: inset 5px 5px 10px hsl(var(--muted)), inset -5px -5px 10px hsl(var(--background));
+}
+
+/* Ajustes para títulos e subtítulos */
+.title {
+    font-family: 'Quattrocento-Bold';
+    color: hsl(var(--primary));
+    font-size: 4em;
+    text-shadow: 2px 2px 4px hsl(var(--border));
+}
+
+h3 span {
+    font-family: 'PoiretOne-Regular';
+    font-size: 1.1em;
+    font-weight: 600;
+    margin-top: 1em;
+    color: hsl(var(--foreground));
+}

styles1.html

@@ -0,0 +1,64 @@
+<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>