From cf14678b6f1c7cfd48aed56f2e5c35c55fef2d1d Mon Sep 17 00:00:00 2001 From: PlxEV Date: Fri, 6 Jun 2025 11:24:47 +0100 Subject: [PATCH] Improve UI styles --- index.html | 1 + src/index.css | 164 ++++++++++++++++++++++++++++++-------------------- 2 files changed, 101 insertions(+), 64 deletions(-) diff --git a/index.html b/index.html index 0c589ec..786e1cf 100755 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + Vite + React diff --git a/src/index.css b/src/index.css index 6fb0879..c6cbdf5 100755 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,26 @@ /* 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 */ * { margin: 0; @@ -9,11 +30,11 @@ /* Fonte padrão para o projeto */ body { - font-family: 'Arial', sans-serif; - background-color: #f4f4f9; - color: #333; + font-family: var(--font-base); + background: linear-gradient(var(--color-background), var(--color-background-dark)); + color: var(--color-dark); 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 */ @@ -27,57 +48,64 @@ body { a { text-decoration: none; color: inherit; /* Cor do link será herdada do texto */ + transition: color var(--transition-fast); } /* Estilos para os títulos */ h1, h2, h3 { font-weight: bold; - color: #333; + color: var(--color-dark); } /* Estilo básico de botões */ button { - background-color: #4CAF50; - color: white; + background-color: var(--color-primary); + color: var(--color-light); border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; - border-radius: 5px; + border-radius: var(--border-radius); + transition: background-color var(--transition-fast), transform var(--transition-fast); } button:hover { - background-color: #45a049; + background-color: var(--color-primary-dark); + transform: translateY(-2px); } /* Tabelas */ table { width: 100%; border-collapse: collapse; + background-color: var(--color-surface); + border-radius: var(--border-radius); + overflow: hidden; } th, td { padding: 12px; text-align: left; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid var(--color-border); } th { - background-color: #f2f2f2; + background-color: var(--color-table-header); + color: var(--color-dark); } /* Estilo de caixas de alerta */ .alert { - background-color: #f44336; + background-color: var(--color-alert); color: white; padding: 10px; margin-top: 20px; - border-radius: 5px; + border-radius: var(--border-radius); } /* Estilos para o Dashboard */ .dashboard-container { - background-color: #fff; + background-color: var(--color-surface); padding: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } @@ -92,9 +120,9 @@ th { /* Estilos para Settings */ .settings-container { - background-color: #ffffff; + background-color: var(--color-surface); padding: 20px; - border-radius: 5px; + border-radius: var(--border-radius); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); max-width: 600px; margin: 0 auto; @@ -127,8 +155,8 @@ th { padding: 5px; font-size: 16px; margin-left: 10px; - border-radius: 5px; - border: 1px solid #ddd; + border-radius: var(--border-radius); + border: 1px solid var(--color-border); } /* Estilo do container do slider */ @@ -140,24 +168,24 @@ th { .slider-container span { font-size: 16px; - color: #333; + color: var(--color-dark); } /* Botão de salvar */ button.save-button { - background-color: #4CAF50; + background-color: var(--color-primary); color: white; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; - border-radius: 5px; + border-radius: var(--border-radius); width: 100%; margin-top: 20px; } button.save-button:hover { - background-color: #45a049; + background-color: var(--color-primary-dark); } /* Responsividade para telas pequenas */ @@ -185,7 +213,7 @@ button.save-button:hover { font-weight: bold; margin-bottom: 30px; text-align: center; /* Centralizado */ - color: #333; + color: var(--color-dark); text-transform: uppercase; /* Texto em maiúsculo para chamar atenção */ } @@ -199,12 +227,13 @@ button.save-button:hover { /* Navbar Estilo */ .navbar { - background-color: #333; /* Fundo escuro para contraste */ - color: white; + background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary)); + color: var(--color-light); padding: 15px 20px; /* Mais espaçamento para uma navegação mais confortável */ display: flex; justify-content: space-between; align-items: center; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .navbar-container { @@ -217,7 +246,7 @@ button.save-button:hover { .navbar-logo h2 { font-size: 24px; font-weight: bold; - color: #fff; + color: var(--color-light); } .navbar-links { @@ -231,21 +260,22 @@ button.save-button:hover { } .navbar-links a { - color: white; + color: var(--color-light); text-decoration: none; font-size: 18px; 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 { - background-color: #4CAF50; - color: white; + background-color: var(--color-primary); + color: var(--color-light); } .navbar-links a.active { - background-color: #45a049; - color: white; + background-color: var(--color-primary-dark); + color: var(--color-light); } /* Ícone do menu hamburguer para telas pequenas */ @@ -290,9 +320,9 @@ button.save-button:hover { /* Estilos para a Página de Segurança */ .security-container { - background-color: #fff; + background-color: var(--color-light); padding: 20px; - border-radius: 5px; + border-radius: var(--border-radius); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); max-width: 600px; margin: 0 auto; @@ -303,7 +333,7 @@ button.save-button:hover { font-weight: bold; margin-bottom: 30px; text-align: center; - color: #333; + color: var(--color-dark); } .security-item { @@ -334,30 +364,30 @@ button.save-button:hover { margin-left: 10px; padding: 5px; font-size: 16px; - border-radius: 5px; - border: 1px solid #ddd; + border-radius: var(--border-radius); + border: 1px solid var(--color-border); } button { - background-color: #4CAF50; + background-color: var(--color-primary); color: white; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; - border-radius: 5px; + border-radius: var(--border-radius); } button:hover { - background-color: #45a049; + background-color: var(--color-primary-dark); } /* Estilos para a Página de Segurança */ .security-container { - background-color: #fff; + background-color: var(--color-light); padding: 20px; - border-radius: 5px; + border-radius: var(--border-radius); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); max-width: 600px; margin: 0 auto; @@ -368,7 +398,7 @@ button:hover { font-weight: bold; margin-bottom: 30px; text-align: center; - color: #333; + color: var(--color-dark); } .security-item { @@ -394,30 +424,30 @@ button:hover { margin-left: 10px; padding: 5px; font-size: 16px; - border-radius: 5px; - border: 1px solid #ddd; + border-radius: var(--border-radius); + border: 1px solid var(--color-border); } button { - background-color: #4CAF50; + background-color: var(--color-primary); color: white; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; - border-radius: 5px; + border-radius: var(--border-radius); } button:hover { - background-color: #45a049; + background-color: var(--color-primary-dark); } .add-user button { - background-color: #2196F3; /* Cor azul para adicionar */ + background-color: var(--color-info); /* Cor azul para adicionar */ } .add-user button:hover { - background-color: #1e88e5; + background-color: var(--color-info-dark); } /* Estilos para a lista de usuários */ @@ -432,24 +462,24 @@ button:hover { } .security-item button { - background-color: #f44336; /* Cor vermelha para remover */ + background-color: var(--color-alert); /* Cor vermelha para remover */ padding: 5px 10px; font-size: 14px; cursor: pointer; - border-radius: 5px; + border-radius: var(--border-radius); margin-left: 10px; } .security-item button:hover { - background-color: #e53935; + background-color: var(--color-alert-dark); } /* Estilos para o Dashboard */ .dashboard-container { - background-color: #fff; + background-color: var(--color-light); padding: 20px; - border-radius: 5px; + border-radius: var(--border-radius); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); max-width: 1200px; margin: 20px auto; @@ -460,7 +490,7 @@ button:hover { font-weight: bold; margin-bottom: 30px; text-align: center; - color: #333; + color: var(--color-dark); } .dashboard-summary { @@ -471,23 +501,29 @@ button:hover { } .card { - background-color: #fff; + background-color: var(--color-surface); padding: 20px; - border-radius: 5px; + border-radius: var(--border-radius); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 30%; 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 { font-size: 20px; - color: #333; + color: var(--color-dark); margin-bottom: 10px; } .card p { font-size: 18px; - color: #555; + color: var(--color-text-muted); } .alerts { @@ -502,11 +538,11 @@ button:hover { .alert-item { font-size: 16px; - background-color: #f44336; + background-color: var(--color-alert); color: white; padding: 10px; margin: 10px 0; - border-radius: 5px; + border-radius: var(--border-radius); } .chargers-table { @@ -527,11 +563,11 @@ table { th, td { padding: 12px; text-align: left; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid var(--color-border); } th { - background-color: #f2f2f2; + background-color: var(--color-table-header); } @media (max-width: 768px) {