Upload 2 files

style (1).css

@@ -0,0 +1,287 @@
+/* Estilos gerais */
+body {
+    font-family: 'Roboto', sans-serif;
+    background-color: #7fafcf;
+    color: #31333F;
+}
+
+.stApp {
+    padding: 4rem;
+}
+
+
+/* Estilo para o data editor */
+.stDataFrame {
+    border: none !important;
+    width: 100% !important;
+    padding: initial !important;
+    align-self: center !important;
+    cursor: pointer;
+    border-radius: 15px !important;
+    overflow: hidden !important;
+    border-radius: 8px !important;
+    box-shadow: rgba(85, 91, 100, 0.411) 20px 10px 17px 0px, rgb(99, 111, 119) 20px 8px 20px !important;
+    background: linear-gradient(180deg, #5f5fe73b, #f0505047) !important;
+}
+
+.stDataFrame table {
+    border-collapse: separate !important;
+    background-color: #719fe7 !important;
+    border-spacing: 0 !important;
+    width: 100% !important;
+}
+
+.stDataFrame th {
+    background-color: #E6E7EB !important;
+    color: #31333F !important;
+    font-weight: bold !important;
+    padding: 15px 12px !important;
+    text-align: left !important;
+    border-bottom: 2px solid #D1D9E6 !important;
+}
+
+.stDataFrame td {
+    background-color: #FFFFFF !important;
+    color: #31333F !important;
+    padding: 12px !important;
+    border-bottom: 1px solid #E6E7EB !important;
+}
+
+.stDataFrame tr:last-child td {
+    border-bottom: none !important;
+}
+
+.stDataFrame tr:hover td {
+    background-color: #F8F9FA !important;
+}
+
+/* Estilo para as métricas */
+div[data-testid="stMetricValue"] {
+    background: linear-gradient(145deg, #E6E7EB, #FFFFFF) !important;
+    border: none !important;
+    border-radius: 15px !important;
+    padding: 20px !important;
+    box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF !important;
+    transition: all 0.3s ease !important;
+}
+
+div[data-testid="stMetricValue"]:hover {
+    transform: translateY(-5px) !important;
+    box-shadow: 12px 12px 20px #D1D9E6, -12px -12px 20px #FFFFFF !important;
+}
+
+div[data-testid="stMetricLabel"] {
+    font-size: 16px !important;
+    color: #6C757D !important;
+    margin-bottom: 8px !important;
+}
+
+div[data-testid="stMetricValue"] > div {
+    font-size: 28px !important;
+    font-weight: bold !important;
+    color: #4A90E2 !important;
+}
+
+
+/* Estilo para os botões */
+.stButton button {
+    border: none !important;
+    border-radius: 25px !important;
+    padding: 12px 24px !important;
+    font-weight: bold !important;
+    font-size: 18px !important;
+    transition: all 0.3s ease !important;
+    background: linear-gradient(145deg, #ebeae6, #FFFFFF) !important;
+    color: #31333F !important;
+    box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF !important;
+}
+
+.stCheckbox stCheckbox {
+    margin-left: 1px !important;
+    align-content: normal !important;
+    transform: scale(0.8) !important;
+    color: #2572b6 !important;
+    font-palette: #a77406 !important;
+
+}
+.stButton button:hover {
+    font-size: large !important;
+    font-weight: bolder !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 12px 12px 20px #D1D9E6, -12px -12px 20px #FFFFFF !important;
+    background: linear-gradient(145deg, #E6F3FF, #C5E4FF) !important;
+    color: #7aaad4 !important;
+}
+
+.stButton button:active {
+    transform: translateY(1px) !important;
+    box-shadow: inset 5px 5px 10px #B3D7FF, inset -5px -5px 10px #FFFFFF !important;
+    background: linear-gradient(145deg, #9bc3e5, #E6F3FF) !important;
+}
+
+
+.stSelectbox selectbox {
+    background: linear-gradient(145deg, #e6e7eb, #ffffff) !important;
+    border: none !important;
+    border-radius: 10px !important;
+    padding: 20px !important;
+    color: #31333F !important;
+    box-shadow: 
+        8px 8px 16px #d1d9e6,
+        -8px -8px 16px #ffffff,
+        inset 2px 2px 4px #d1d9e6,
+        inset -2px -2px 4px #ffffff !important;
+    transition: all 0.3s ease !important;
+    font-size: 16px !important;
+    line-height: 1.5 !important;
+}
+
+
+
+
+/* Estilo para inputs e selects */
+.stTextInput input, .stSelectbox select {
+    background: #FFFFFF !important;
+    border: none !important;
+    border-radius: 10px !important;
+    padding: 12px 16px !important;
+    color: #31333F !important;
+    align-content: jusify-content !important;
+    box-shadow: inset 5px 5px 10px #D1D9E6, inset -5px -5px 10px #FFFFFF !important;
+}
+
+.stTextInput input:focus, .stSelectbox select:focus {
+    box-shadow: inset 7px 7px 12px #D1D9E6, inset -7px -7px 12px #FFFFFF !important;
+    outline: none !important;
+}
+
+/* Estilo para o título */
+h1 {
+    color: #9f4707 !important;
+    font-size: 2.5rem !important;
+    margin-bottom: 1.5rem !important;
+    text-shadow: 2px 2px 4px #D1D9E6 !important;
+}
+
+/* Estilo para subheaders */
+h2, h3 {
+    color: #9f4707 !important;
+    margin-top: 2rem !important;
+    margin-bottom: 1rem !important;
+    text-shadow: 2px 2px 6px #e9d3be !important;
+    
+}
+
+h4, h5, h6 {
+    color: #9f4707 !important;
+    margin-top: 2rem !important;
+    margin-bottom: 0rem !important;
+    text-shadow: 2px 2px 6px #e9d3be !important;
+
+}
+
+/* Estilo para links */
+a {
+    color: #e28f4b !important;
+    text-decoration: none !important;
+    transition: color 0.3s ease !important;
+}
+
+p, ol, ul, dl {
+    margin: 0px 0px 1rem;
+    padding: 0px;
+    font-size: 1.1rem;
+    font-weight: 400;
+    color: #9f4707;
+}
+
+
+a:hover {
+    color: #cea022 !important;
+}
+/* Estilo aprimorado para o text box de processamento de texto */
+.stTextArea textarea {
+    background: linear-gradient(145deg, #e6e7eb, #ffffff) !important;
+    border: none !important;
+    border-radius: 10px !important;
+    padding: 20px !important;
+    color: #31333F !important;
+    box-shadow: 
+        8px 8px 16px #d1d9e6,
+        -8px -8px 16px #ffffff,
+        inset 2px 2px 4px #d1d9e6,
+        inset -2px -2px 4px #ffffff !important;
+    transition: all 0.3s ease !important;
+    font-size: 16px !important;
+    line-height: 1.5 !important;
+}
+
+.stTextArea textarea:focus {
+    box-shadow: 
+        12px 12px 20px #d1d9e6,
+        -12px -12px 20px #ffffff,
+        inset 4px 4px 8px #d1d9e6,
+        inset -4px -4px 8px #ffffff !important;
+    outline: none !important;
+    transform: translateY(-2px) !important;
+}
+
+.stTextArea textarea::placeholder {
+    color: #9aa0a8 !important;
+}
+/
+/* Estilo para o container do text box */
+/*.stTextArea > div {
+    border-radius: 22px !important;
+    padding: 2px !important;
+    background: linear-gradient(145deg, #d1d9e6, #ffffff) !important;
+    box-shadow: 
+        10px 10px 20px #b8bfcc,
+        -10px -10px 20px #ffffff !important;
+}
+
+/* Ajuste para o label do text box */
+.stTextArea label {
+    background: transparent !important;
+    color: #4A90E2 !important;
+    font-weight: bold !important;
+    font-size: 18px !important;
+    margin-bottom: 8px !important;
+    text-shadow: 1px 1px 2px #ffffff, -1px -1px 2px #d1d9e6 !important;
+}
+
+/* Estilo para o formulário */
+form {
+    background: linear-gradient(145deg, #E6E7EB, #FFFFFF) !important;
+    border-radius: 20px !important;
+    padding: 25px !important;
+    box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF !important;
+    transition: all 0.3s ease !important;
+}
+
+form:hover {
+    transform: translateY(-5px) !important;
+    box-shadow: 12px 12px 20px #D1D9E6, -12px -12px 20px #FFFFFF !important;
+}
+
+/* Estilo para os inputs dentro do formulário */
+/*form .stTextInput input, form .stTimeInput input, form .stNumberInput input {
+    background: #FFFFFF !important;
+    border: none !important;
+    border-radius: 10px !important;
+    padding: 12px 16px !important;
+    color: #31333F !important;
+    box-shadow: inset 5px 5px 10px #D1D9E6, inset -5px -5px 10px #FFFFFF !important;
+    transition: all 0.3s ease !important;
+}
+
+form .stTextInput input:focus, form .stTimeInput input:focus, form .stNumberInput input:focus {
+    box-shadow: inset 7px 7px 12px #D1D9E6, inset -7px -7px 12px #FFFFFF !important;
+    outline: none !important;
+}
+
+/* Estilo para o botão dentro do formulário */
+form .stButton button {
+    width: 100% !important;
+    margin-top: 15px !important;
+}

styles.html

@@ -0,0 +1,183 @@
+<style>
+    @font-face {
+        font-family: PoiretOne-Regular;
+        src: url(app/static/Quattrocento-Bold.ttf);
+    }
+
+    .title {
+        font-family: Quattrocento-Bold;
+        font-size: 4em;
+    }
+
+    h3 span {
+        font-family: PoiretOne-Regular;
+        font-size: 1.1em;
+        font-weight: 600;
+        margin-top: 1em;
+    }
+
+    div [data-testid="stWidgetLabel"] {
+        font-family: PoiretOne-Regular;
+        font-size: large;
+        font-weight: 400;
+        color: #17d1ff;
+    }
+
+    div [data-testid="stRadio"] {
+        margin-top: 0.5em;
+        padding: 1em;
+        border-radius: 18px;
+        border: 0.5px solid #ffd8b8;
+        box-shadow: 2px 3px 10px rgb(189 222 241 / 90%);
+    }
+    
+    div [data-testid="stCheckbox"] {
+        margin-top: 0.5em;
+        padding: 1em;
+        border-radius: 18px;
+        border: 0.3px solid #ffd8b8;
+        box-shadow: 5px 8px 15px rgb(189 222 241 / 90%);
+    }
+    
+    div [data-testid="stSlider"] {
+        margin-top: 1em;
+        padding: 1em;
+        border-radius: 18px;
+        box-shadow: 2px 3px 10px rgb(189 222 241 / 52%);
+    }
+
+    div [data-testid="stSelectbox"] {
+        margin-top: 1em;
+        padding: 1em;
+        
+        border-radius: 18px;
+        box-shadow: 2px 3px 10px rgb(189 222 241 / 52%);
+    }
+
+
+
+    div [data-testid="stSidebar"] {
+        margin-top: 1em;
+        padding: 1em;
+        border-radius: 18px;
+        box-shadow: 2px 3px 10px rgb(189 222 241 / 52%);
+        background-image: -moz-repeating-linear-gradient(
+            45deg,
+            rgb(209, 207, 178),
+            rgb(218, 213, 146) 10px,
+            rgb(223, 220, 189) 10px,
+            rgb(190, 190, 190) 20px);
+    }
+    
+    div[data-testid="stVerticalBlockBorderWrapper"]:has(.stHtml > .watchlist_card) {
+        padding-bottom: 0em;
+        border-radius: 18px;
+        box-shadow: 2px 3px 10px rgb(189 222 241 / 52%);
+    }
+
+    div[data-testid="element-container"]:has(.iframe) {
+        background-color: #50e758;
+        padding-bottom: 20em;
+        border-radius: 18px;
+        box-shadow: 2px 3px 10px rgb(189 222 241 / 52%);
+    }
+
+    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .watchlist_symbol_name) {
+        & p {
+            color: #174C4F;
+            font-family: PoiretOne-Regular;;
+            font-size: 3em;
+            font-weight: 500;
+            margin-bottom: 0;
+        }
+    }
+
+    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .watchlist_symbol_name) {
+        & p {
+        color: #174c4f;
+        font-family: "Open Sans", sans-serif;
+        font-size: 1em;
+        font-weight: 700;
+        margin-bottom: 0;
+        }
+    }
+
+
+    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .watchlist_ticker) {
+        text-align: right;
+
+        & p {
+            font-size: 0.8em;
+            margin-bottom: 0;
+        }
+    }
+
+    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .watchlist_price_label) {
+        & p {
+            font-size: 0.8em;
+            margin-bottom: 0;
+        }
+    }
+
+    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .watchlist_price_value) {
+        & p {
+            color: #174C4F;
+            font-family: "Open Sans", sans-serif;
+            font-size: 1.2em;
+            margin-bottom: 0;
+        }
+    }
+
+    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .column_plotly) {
+        & .stPlotlyChart {
+            margin-top: 1em;
+            padding: 1em;
+            border-radius: 16px;
+            box-shadow: 0px 0px 10px rgba(81, 85, 195, 0.2);
+        }
+    }
+
+    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .column_indicator) {
+        margin-top: 2.5em;
+        padding-left: 4em;
+    }
+    
+    /* Adapted from https://startbootstrap.com/theme/sb-admin-2 */
+    div[data-testid="stMetric"] {
+        background-color: #35383b;
+        border: 2px solid #3f3b3b;
+        margin-top: 1em;
+        padding: 1.5em 1em;
+        border-radius: 20px;
+        box-shadow: 4px 5px 10px rgb(189 222 241 / 52%);
+    }
+
+    label[data-testid="stMetricLabel"] p {
+        font-family: Quattrocento-Regular;
+        color: rgb(255, 201, 24);
+        font-size: 1.5em;
+    }
+
+    div[data-testid="stMetricValue"] {
+        font-size: 1em;
+        font-weight: 400;
+        color: #50e758;
+    }
+
+    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);
+        }
+    }
+
+    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .bottom_indicator) {
+        margin-top: 0.5em;
+    }
+
+</style>