mirror of
https://github.com/acedanger/finance.git
synced 2025-12-05 22:50:12 -08:00
Initial commit - Basic bank transactions dashboard structure with Astro and TypeScript
This commit is contained in:
Peter Wood
234
src/styles/global.css
Normal file
234
src/styles/global.css
Normal file
@@ -0,0 +1,234 @@
|
||||
/* Paste the CSS from style-alt3.css here */
|
||||
body {
|
||||
font-family: system-ui, sans-serif;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
background-color: #f0f2f5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.dashboard-layout {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 280px;
|
||||
background-color: #ffffff;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
|
||||
/* Ensure sidebar doesn't shrink */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-header h2 {
|
||||
margin: 0 0 20px 0;
|
||||
color: #0056b3;
|
||||
}
|
||||
.account-nav h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
font-size: 1em;
|
||||
color: #555;
|
||||
}
|
||||
.account-nav select {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 25px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.add-transaction-section {
|
||||
margin-bottom: 25px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.toggle-form-btn {
|
||||
background-color: #f8f9fa;
|
||||
color: #0056b3;
|
||||
border: none;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
padding: 12px 15px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
border-radius: 5px 5px 0 0;
|
||||
font-weight: 500;
|
||||
display: block; /* Ensure it takes full width */
|
||||
}
|
||||
.toggle-form-btn:hover {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
.collapsible-form {
|
||||
padding: 15px;
|
||||
background-color: #fdfdfd;
|
||||
transition: max-height 0.3s ease-out, opacity 0.3s ease-out,
|
||||
padding 0.3s ease-out, border 0.3s ease-out;
|
||||
overflow: hidden;
|
||||
max-height: 500px;
|
||||
opacity: 1;
|
||||
border-top: 1px solid #e0e0e0; /* Start with border */
|
||||
}
|
||||
.collapsible-form.collapsed {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
border-top-color: transparent; /* Hide border when collapsed */
|
||||
}
|
||||
.collapsible-form h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-size: 0.9em;
|
||||
color: #555;
|
||||
}
|
||||
.form-group input[type="date"],
|
||||
.form-group input[type="text"],
|
||||
.form-group input[type="number"] {
|
||||
width: calc(100% - 18px); /* Account for padding */
|
||||
padding: 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
font-size: 0.95em;
|
||||
box-sizing: border-box; /* Include padding in width calculation */
|
||||
}
|
||||
.collapsible-form button[type="submit"] {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
padding: 8px 15px;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.collapsible-form button[type="submit"]:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.account-summary {
|
||||
margin-top: auto;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
.account-summary h4 {
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 1em;
|
||||
color: #555;
|
||||
}
|
||||
.account-summary p {
|
||||
margin: 5px 0;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
#account-balance {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex-grow: 1;
|
||||
padding: 20px 30px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.main-header {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.main-header h1 {
|
||||
margin: 0;
|
||||
font-size: 1.8em;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
#current-account-name {
|
||||
font-style: italic;
|
||||
} /* Example styling */
|
||||
|
||||
.transaction-list {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
th {
|
||||
background-color: #f8f9fa;
|
||||
font-weight: 600;
|
||||
font-size: 0.9em;
|
||||
text-transform: uppercase;
|
||||
color: #555;
|
||||
}
|
||||
tbody tr:hover {
|
||||
background-color: #f1f3f5;
|
||||
}
|
||||
.amount-col {
|
||||
text-align: right;
|
||||
}
|
||||
.amount-positive {
|
||||
color: #198754;
|
||||
font-weight: 500;
|
||||
}
|
||||
.amount-negative {
|
||||
color: #dc3545;
|
||||
font-weight: 500;
|
||||
}
|
||||
.action-btn {
|
||||
padding: 4px 8px;
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
.edit-btn {
|
||||
background-color: #e9ecef;
|
||||
color: #333;
|
||||
}
|
||||
.delete-btn {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
border-color: #f5c6cb;
|
||||
}
|
||||
|
||||
/* Basic Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-layout {
|
||||
flex-direction: column;
|
||||
}
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
max-height: none; /* Allow sidebar to grow */
|
||||
}
|
||||
.account-summary {
|
||||
margin-top: 20px;
|
||||
} /* Adjust spacing */
|
||||
.main-content {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user