Create styles.css

static/styles.css

@@ -0,0 +1,339 @@
+/* Estilos gerais */
+body {
+    font-family: 'Roboto', sans-serif;
+    background-color: #7fafcf;
+    color: #31333F;
+}
+
+.stMain, .stAppHeader {
+
+    background-color: #e0e5ec
+}
+
+.stApp {
+    padding: 4rem;
+}
+
+.stIFrame {
+    display: flex;
+    justify-content: start;
+    width: 400px;
+    height: 600px;
+    border: none;
+
+}
+
+.linha-vertical {
+  height: 200px;
+  border-left: 1px solid #000;
+}
+/* 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;
+}
+
+
+.input-field {
+    width: 50%;
+    padding: 12px 20px;
+    margin-left: 50px;
+    border: none;
+    border-radius: 25px;
+    background-color: #e0e5ec;
+    color: #333;
+    font-size: 16px;
+    box-shadow: 
+        inset 5px 5px 10px #a3b1c6,
+        inset -5px -5px 10px #ffffff;
+}
+
+.st-key-icon-wrapper {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 36px;
+    height: 36px;
+    background-color: #e0e5ec;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 
+        5px 5px 10px #a3b1c6,
+        -5px -5px 10px #ffffff;
+}
+.st-key-input-icon {
+    color: #4a4a4a;
+    font-size: 18px;
+}