admin/web-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1 from PlxEV/codex/melhorar-css-para-ui-sofisticada

Browse Source 
Improve EVSE UI styles
This commit is contained in:
PlxEV
2025-06-06 12:36:26 +01:00
committed by GitHub
parent cf2ac9caca cf14678b6f
commit c58cbfb05f
2 changed files with 101 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<title>Vite + React</title> <title>Vite + React</title>
</head> </head>
<body> <body>

164
src/index.css
View File

@@ -1,5 +1,26 @@
/* index.css */ /* index.css */
/* Paleta de cores e variáveis globais */
:root {
--color-primary: #4CAF50;
--color-primary-dark: #45a049;
--color-dark: #333333;
--color-light: #ffffff;
--color-background: #f4f4f9;
--color-background-dark: #e8e8ef;
--color-surface: #ffffff;
--color-table-header: #f2f2f2;
--color-border: #dddddd;
--color-info: #2196F3;
--color-info-dark: #1e88e5;
--color-alert: #f44336;
--color-alert-dark: #e53935;
--color-text-muted: #555555;
--font-base: 'Roboto', Arial, sans-serif;
--border-radius: 5px;
--transition-fast: 0.2s ease-in-out;
}
/* Resetando margens e padding */ /* Resetando margens e padding */
* { * {
margin: 0; margin: 0;
@@ -9,11 +30,11 @@
/* Fonte padrão para o projeto */ /* Fonte padrão para o projeto */
body { body {
font-family: 'Arial', sans-serif; font-family: var(--font-base);
background-color: #f4f4f9; background: linear-gradient(var(--color-background), var(--color-background-dark));
color: #333; color: var(--color-dark);
line-height: 1.6; line-height: 1.6;
font-size: 16px; /* Garantindo um tamanho de fonte confortável */ font-size: 16px; /* Tamanho de fonte confortável */
} }
/* Definindo um fundo geral para o layout */ /* Definindo um fundo geral para o layout */
@@ -27,57 +48,64 @@ body {
a { a {
text-decoration: none; text-decoration: none;
color: inherit; /* Cor do link será herdada do texto */ color: inherit; /* Cor do link será herdada do texto */
transition: color var(--transition-fast);
} }
/* Estilos para os títulos */ /* Estilos para os títulos */
h1, h2, h3 { h1, h2, h3 {
font-weight: bold; font-weight: bold;
color: #333; color: var(--color-dark);
} }
/* Estilo básico de botões */ /* Estilo básico de botões */
button { button {
background-color: #4CAF50; background-color: var(--color-primary);
color: white; color: var(--color-light);
border: none; border: none;
padding: 10px 20px; padding: 10px 20px;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: var(--border-radius);
transition: background-color var(--transition-fast), transform var(--transition-fast);
} }
button:hover { button:hover {
background-color: #45a049; background-color: var(--color-primary-dark);
transform: translateY(-2px);
} }
/* Tabelas */ /* Tabelas */
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
background-color: var(--color-surface);
border-radius: var(--border-radius);
overflow: hidden;
} }
th, td { th, td {
padding: 12px; padding: 12px;
text-align: left; text-align: left;
border-bottom: 1px solid #ddd; border-bottom: 1px solid var(--color-border);
} }
th { th {
background-color: #f2f2f2; background-color: var(--color-table-header);
color: var(--color-dark);
} }
/* Estilo de caixas de alerta */ /* Estilo de caixas de alerta */
.alert { .alert {
background-color: #f44336; background-color: var(--color-alert);
color: white; color: white;
padding: 10px; padding: 10px;
margin-top: 20px; margin-top: 20px;
border-radius: 5px; border-radius: var(--border-radius);
} }
/* Estilos para o Dashboard */ /* Estilos para o Dashboard */
.dashboard-container { .dashboard-container {
background-color: #fff; background-color: var(--color-surface);
padding: 20px; padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} }
@@ -92,9 +120,9 @@ th {
/* Estilos para Settings */ /* Estilos para Settings */
.settings-container { .settings-container {
background-color: #ffffff; background-color: var(--color-surface);
padding: 20px; padding: 20px;
border-radius: 5px; border-radius: var(--border-radius);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
@@ -127,8 +155,8 @@ th {
padding: 5px; padding: 5px;
font-size: 16px; font-size: 16px;
margin-left: 10px; margin-left: 10px;
border-radius: 5px; border-radius: var(--border-radius);
border: 1px solid #ddd; border: 1px solid var(--color-border);
} }
/* Estilo do container do slider */ /* Estilo do container do slider */
@@ -140,24 +168,24 @@ th {
.slider-container span { .slider-container span {
font-size: 16px; font-size: 16px;
color: #333; color: var(--color-dark);
} }
/* Botão de salvar */ /* Botão de salvar */
button.save-button { button.save-button {
background-color: #4CAF50; background-color: var(--color-primary);
color: white; color: white;
border: none; border: none;
padding: 10px 20px; padding: 10px 20px;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: var(--border-radius);
width: 100%; width: 100%;
margin-top: 20px; margin-top: 20px;
} }
button.save-button:hover { button.save-button:hover {
background-color: #45a049; background-color: var(--color-primary-dark);
} }
/* Responsividade para telas pequenas */ /* Responsividade para telas pequenas */
@@ -185,7 +213,7 @@ button.save-button:hover {
font-weight: bold; font-weight: bold;
margin-bottom: 30px; margin-bottom: 30px;
text-align: center; /* Centralizado */ text-align: center; /* Centralizado */
color: #333; color: var(--color-dark);
text-transform: uppercase; /* Texto em maiúsculo para chamar atenção */ text-transform: uppercase; /* Texto em maiúsculo para chamar atenção */
} }
@@ -199,12 +227,13 @@ button.save-button:hover {
/* Navbar Estilo */ /* Navbar Estilo */
.navbar { .navbar {
background-color: #333; /* Fundo escuro para contraste */ background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary));
color: white; color: var(--color-light);
padding: 15px 20px; /* Mais espaçamento para uma navegação mais confortável */ padding: 15px 20px; /* Mais espaçamento para uma navegação mais confortável */
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
.navbar-container { .navbar-container {
@@ -217,7 +246,7 @@ button.save-button:hover {
.navbar-logo h2 { .navbar-logo h2 {
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
color: #fff; color: var(--color-light);
} }
.navbar-links { .navbar-links {
@@ -231,21 +260,22 @@ button.save-button:hover {
} }
.navbar-links a { .navbar-links a {
color: white; color: var(--color-light);
text-decoration: none; text-decoration: none;
font-size: 18px; font-size: 18px;
padding: 8px 15px; padding: 8px 15px;
border-radius: 5px; border-radius: var(--border-radius);
transition: background-color var(--transition-fast), color var(--transition-fast);
} }
.navbar-links a:hover { .navbar-links a:hover {
background-color: #4CAF50; background-color: var(--color-primary);
color: white; color: var(--color-light);
} }
.navbar-links a.active { .navbar-links a.active {
background-color: #45a049; background-color: var(--color-primary-dark);
color: white; color: var(--color-light);
} }
/* Ícone do menu hamburguer para telas pequenas */ /* Ícone do menu hamburguer para telas pequenas */
@@ -290,9 +320,9 @@ button.save-button:hover {
/* Estilos para a Página de Segurança */ /* Estilos para a Página de Segurança */
.security-container { .security-container {
background-color: #fff; background-color: var(--color-light);
padding: 20px; padding: 20px;
border-radius: 5px; border-radius: var(--border-radius);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
@@ -303,7 +333,7 @@ button.save-button:hover {
font-weight: bold; font-weight: bold;
margin-bottom: 30px; margin-bottom: 30px;
text-align: center; text-align: center;
color: #333; color: var(--color-dark);
} }
.security-item { .security-item {
@@ -334,30 +364,30 @@ button.save-button:hover {
margin-left: 10px; margin-left: 10px;
padding: 5px; padding: 5px;
font-size: 16px; font-size: 16px;
border-radius: 5px; border-radius: var(--border-radius);
border: 1px solid #ddd; border: 1px solid var(--color-border);
} }
button { button {
background-color: #4CAF50; background-color: var(--color-primary);
color: white; color: white;
border: none; border: none;
padding: 10px 20px; padding: 10px 20px;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: var(--border-radius);
} }
button:hover { button:hover {
background-color: #45a049; background-color: var(--color-primary-dark);
} }
/* Estilos para a Página de Segurança */ /* Estilos para a Página de Segurança */
.security-container { .security-container {
background-color: #fff; background-color: var(--color-light);
padding: 20px; padding: 20px;
border-radius: 5px; border-radius: var(--border-radius);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
@@ -368,7 +398,7 @@ button:hover {
font-weight: bold; font-weight: bold;
margin-bottom: 30px; margin-bottom: 30px;
text-align: center; text-align: center;
color: #333; color: var(--color-dark);
} }
.security-item { .security-item {
@@ -394,30 +424,30 @@ button:hover {
margin-left: 10px; margin-left: 10px;
padding: 5px; padding: 5px;
font-size: 16px; font-size: 16px;
border-radius: 5px; border-radius: var(--border-radius);
border: 1px solid #ddd; border: 1px solid var(--color-border);
} }
button { button {
background-color: #4CAF50; background-color: var(--color-primary);
color: white; color: white;
border: none; border: none;
padding: 10px 20px; padding: 10px 20px;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: var(--border-radius);
} }
button:hover { button:hover {
background-color: #45a049; background-color: var(--color-primary-dark);
} }
.add-user button { .add-user button {
background-color: #2196F3; /* Cor azul para adicionar */ background-color: var(--color-info); /* Cor azul para adicionar */
} }
.add-user button:hover { .add-user button:hover {
background-color: #1e88e5; background-color: var(--color-info-dark);
} }
/* Estilos para a lista de usuários */ /* Estilos para a lista de usuários */
@@ -432,24 +462,24 @@ button:hover {
} }
.security-item button { .security-item button {
background-color: #f44336; /* Cor vermelha para remover */ background-color: var(--color-alert); /* Cor vermelha para remover */
padding: 5px 10px; padding: 5px 10px;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: var(--border-radius);
margin-left: 10px; margin-left: 10px;
} }
.security-item button:hover { .security-item button:hover {
background-color: #e53935; background-color: var(--color-alert-dark);
} }
/* Estilos para o Dashboard */ /* Estilos para o Dashboard */
.dashboard-container { .dashboard-container {
background-color: #fff; background-color: var(--color-light);
padding: 20px; padding: 20px;
border-radius: 5px; border-radius: var(--border-radius);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 1200px; max-width: 1200px;
margin: 20px auto; margin: 20px auto;
@@ -460,7 +490,7 @@ button:hover {
font-weight: bold; font-weight: bold;
margin-bottom: 30px; margin-bottom: 30px;
text-align: center; text-align: center;
color: #333; color: var(--color-dark);
} }
.dashboard-summary { .dashboard-summary {
@@ -471,23 +501,29 @@ button:hover {
} }
.card { .card {
background-color: #fff; background-color: var(--color-surface);
padding: 20px; padding: 20px;
border-radius: 5px; border-radius: var(--border-radius);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 30%; width: 30%;
text-align: center; text-align: center;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
} }
.card h3 { .card h3 {
font-size: 20px; font-size: 20px;
color: #333; color: var(--color-dark);
margin-bottom: 10px; margin-bottom: 10px;
} }
.card p { .card p {
font-size: 18px; font-size: 18px;
color: #555; color: var(--color-text-muted);
} }
.alerts { .alerts {
@@ -502,11 +538,11 @@ button:hover {
.alert-item { .alert-item {
font-size: 16px; font-size: 16px;
background-color: #f44336; background-color: var(--color-alert);
color: white; color: white;
padding: 10px; padding: 10px;
margin: 10px 0; margin: 10px 0;
border-radius: 5px; border-radius: var(--border-radius);
} }
.chargers-table { .chargers-table {
@@ -527,11 +563,11 @@ table {
th, td { th, td {
padding: 12px; padding: 12px;
text-align: left; text-align: left;
border-bottom: 1px solid #ddd; border-bottom: 1px solid var(--color-border);
} }
th { th {
background-color: #f2f2f2; background-color: var(--color-table-header);
} }
@media (max-width: 768px) { @media (max-width: 768px) {