Update static/style.css

static/style.css

@@ -1,103 +1,339 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
-
-:root {
-    --background: #CCCCCC;
-    --foreground: #0A0A0C;
-    --card: #FFFFFF;
-    --card-foreground: #0A0A0C;
-    --popover: #FFFFFF;
-    --popover-foreground: #0A0A0C;
-    --primary: #191919;
-    --primary-foreground: #FAFAFA;
-    --secondary: #F4F4F5;
-    --secondary-foreground: #191919;
-    --muted: #F4F4F5;
-    --muted-foreground: #737373;
-    --accent: #F4F4F5;
-    --accent-foreground: #191919;
-    --destructive: #E11D48;
-    --destructive-foreground: #FAFAFA;
-    --border: #E5E5E6;
-    --input: #E5E5E6;
-    --ring: #0A0A0C;
-    --chart-1: #1F9D85;
-    --chart-2: #E85D3F;
-    --chart-3: #1E4E5F;
-    --chart-4: #E5B22D;
-    --chart-5: #F2701D;
-}
-
 /* Estilos gerais */
 body {
     font-family: 'Roboto', sans-serif;
-    background-color: hsl(var(--background));
-    color: hsl(var(--foreground));
+    background-color: #7fafcf;
+    color: #31333F;
+}
+
+.stMain, .stAppHeader {
+
+    background-color: #e0e5ec
 }
 
 .stApp {
-    padding: 20px;
+    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;
+.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;
 }
 
-div[data-testid="stMetric"]:hover {
-    transform: translateY(-5px);
-    box-shadow: 12px 12px 20px hsl(var(--muted)), -12px -12px 20px hsl(var(--background));
+.stDataFrame table {
+    border-collapse: separate !important;
+    background-color: #719fe7 !important;
+    border-spacing: 0 !important;
+    width: 100% !important;
 }
 
-div[data-testid="stMetricLabel"] p {
-    color: hsl(var(--primary));
-    font-size: 1.3em;
+.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"] {
-    font-size: 1.3em;
+    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: hsl(var(--primary-foreground));
+    color: #9f4707;
 }
 
-/* Outros elementos neuromórficos */
-.stButton button,
-.stTextInput input,
-.stSelectbox select {
-    border-radius: 25px;
-    padding: 1em 2em;
-    background: hsl(var(--card));
-    box-shadow: 5px 5px 10px hsl(var(--muted)), -5px -5px 10px hsl(var(--background));
-    transition: all 0.3s ease;
-    border: none;
-    color: hsl(var(--foreground));
+
+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;
 }
 
-.stButton button:hover,
-.stTextInput input:focus,
-.stSelectbox select:focus {
-    box-shadow: 8px 8px 15px hsl(var(--muted)), -8px -8px 15px hsl(var(--background));
+/* 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;
 }
 
-.stButton button:active,
-.stTextInput input:active,
-.stSelectbox select:active {
-    box-shadow: inset 3px 3px 7px hsl(var(--muted)), inset -3px -3px 7px hsl(var(--background));
+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;
 }
 
-/* Ajustes para títulos e subtítulos */
-.title {
-    color: hsl(var(--primary));
-    font-size: 4em;
-    text-shadow: 2px 2px 4px hsl(var(--border));
+/* Estilo para o botão dentro do formulário */
+form .stButton button {
+    width: 100% !important;
+    margin-top: 15px !important;
 }
 
-h3 span {
-    font-size: 1.1em;
-    font-weight: 600;
-    margin-top: 1em;
-    color: hsl(var(--foreground));
+
+.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;
 }