style: cores

This commit is contained in:
2025-01-21 17:29:43 -03:00
parent 88373b4570
commit 891f23ec2e
8 changed files with 18 additions and 226 deletions

View File

@@ -28,7 +28,7 @@ Clientes
<th style="text-align: left;">Cliente</th>
<th style="text-align: left;width: 20%;">Débito</th>
<th class="hide-on-mobile" style="text-align: left;">Contato</th>
<th style="text-align: left;width: 20%;">Ações</th>
<th class="hide-on-mobile" style="text-align: left;width: 20%;">Ações</th>
</tr>
{% for client in clients %}
@@ -39,7 +39,7 @@ Clientes
<td class="hide-on-mobile" id="contact-{{client.id}}" >{{client.contact}}</td>
<td hidden id="active-{{client.id}}" >{{client.active}}</td>
<td>
<div class="grid-buttons">
<div class="grid-buttons hide-on-mobile">
<img
src="{% static 'midia/icons/edit.svg' %}"
@@ -77,18 +77,17 @@ Clientes
<form action="{% url 'createClient' %}" id="clientForm" method="post" >
{% csrf_token %}
<h2>Cadastro Cliente</h2>
<h2 id="title-window">Cadastro Cliente</h2>
<input type="text" id="clientId" name="clientId" hidden >
<input type="text" id="clientName" name="name" required placeholder="Nome">
<input type="number" step="0.01" id="clientDebt" name="debt" required placeholder="Débito">
<input type="checkbox" id="active" name="active" placeholder="Ativo">Ativo
<input type="text" id="clientContact" name="contact" placeholder="Contato"></input>
<footer class="grid-buttons">
<button id="save" type="submit">Salvar</button>
<button onclick="closeModal()" type="button" id="edit" hx-post="{% url 'editClient' %}" hx-trigger="click" hx-swap="none" >Alterar</button>
<button type="button" onclick="closeModal()" style="background-color:red;">Fechar</button>
<button onclick="closeModal()" type="button" id="edit" hx-post="{% url 'editClient' %}" hx-trigger="click" hx-swap="none" style="width: 100%;">Alterar</button>
<button type="button" onclick="closeModal()" style="background-color:red;">Cancelar</button>
</footer>
</form>

Binary file not shown.

View File

@@ -1,40 +1,4 @@
button {
background-color: #007BFF;
color: white;
padding: 10px 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.modal {
display: none;
position: fixed;
padding: 20px;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
transform: translate(-50%, -50%);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
border-radius: 10px;
width: 90%;
max-width: 500px;
}
form {
display: flex;
@@ -51,14 +15,10 @@ input, textarea {
border: 1px solid #ccc;
}
* dialog {
transform: scale(1);
}
.grid-buttons {
grid-template-columns: 1fr 1fr;
display: flex;
gap: 10px;
}
@@ -76,27 +36,6 @@ input, textarea {
width: 100%;
}
.card {
width: 100%;
height: 120px;
background-color: #f2f2f2;
border-radius: 15px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 120px;
font-size: 20px;
font-weight: bold;
color: #333;
transition: transform 0.2s;
}
.card:hover {
transform: scale(1.05);
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
.hide-on-mobile {

View File

@@ -32,8 +32,10 @@ function editclient(id) {
openModal();
var buttonSave = document.getElementById('save');
var buttonEdit = document.getElementById('edit');
var titleWindow = document.getElementById('title-window')
buttonSave.style.display = 'none';
buttonEdit.style.display = 'block';
titleWindow.innerText = 'Editar '
var clientId = document.getElementById('clientId');
var clientName = document.getElementById('clientName');
var clientContact = document.getElementById('clientContact');

View File

@@ -1,5 +1,4 @@
.grid-container {
display: grid;
grid-template-columns: repeat(2, 2fr);
@@ -24,59 +23,18 @@
.card-product:hover {
transform: scale(1.05);
box-shadow: 3px 3px 10px rgba(185, 185, 185, 0.678);
box-shadow: 0px 0px 10px rgba(86, 187, 255, 0.815);
}
table td th {
text-align: center;
table td th {
text-align: center;
}
button {
background-color: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.modal {
display: none;
position: fixed;
padding: 20px;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
transform: translate(-50%, -50%);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
border-radius: 10px;
width: 90%;
height: 90%;
max-width: 500px;
}
form {
display: flex;
flex-direction: column;
gap: 10px;
}
}
input, textarea {
width: 95%;
@@ -85,4 +43,4 @@ input, textarea {
margin-top: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
}

View File

@@ -24,52 +24,13 @@
.card-product:hover {
transform: scale(1.05);
box-shadow: 2px 2px 10px rgba(185, 185, 185, 0.678);
box-shadow: 0px 0px 10px rgba(86, 187, 255, 0.815);
}
table td th {
text-align: center;
}
/* button {
background-color: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
} */
.modal {
display: none;
position: fixed;
padding: 20px;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
transform: translate(-50%, -50%);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
border-radius: 10px;
width: 90%;
height: 90%;
max-width: 500px;
}
form {
display: flex;
flex-direction: column;

View File

@@ -31,7 +31,7 @@
.card:hover {
transform: translateY(-10px);
box-shadow: 0 4px 8px rgba(199, 199, 199, 0.25);
box-shadow: 0px 0px 8px rgba(86, 187, 255, 0.815);
}
.card-resumo {
@@ -53,7 +53,7 @@
.card-resumo:hover {
box-shadow: 0 4px 15px rgba(175, 175, 175, 0.295);
box-shadow: 0px 0px 15px rgba(86, 187, 255, 0.815);
text-align: left;
line-height: 20px;
padding: 15px 30px 15px 30px;

View File

@@ -1,40 +1,4 @@
button {
background-color: #007BFF;
color: white;
padding: 10px 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.modal {
display: none;
position: fixed;
padding: 20px;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
transform: translate(-50%, -50%);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
border-radius: 10px;
width: 90%;
max-width: 500px;
}
form {
display: flex;
@@ -51,21 +15,11 @@ input, textarea {
border: 1px solid #ccc;
}
* dialog {
transform: scale(1);
/* display: flexbox;
max-width: 200;
max-height: 400; */
}
.grid-buttons {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
max-width: 500px; /* Define a largura máxima do grid */
/* margin: 0 auto; */
max-width: 500px;
}
.grid-container {
@@ -81,27 +35,6 @@ input, textarea {
width: 100%;
}
.card {
width: 100%;
height: 120px;
background-color: #f2f2f2;
border-radius: 15px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 120px; /* Centraliza o texto verticalmente */
font-size: 20px;
font-weight: bold;
color: #333;
transition: transform 0.2s;
}
.card:hover {
transform: scale(1.05);
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
.hide-on-mobile {