Flamengo / static /style.css
drguilhermeapolinario's picture
Update static/style.css
237d5f3 verified
/* 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;
}