working beautifully
This commit is contained in:
GuilhermeStrice
402
style.css
402
style.css
@ -1,14 +1,43 @@
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
margin: 20px;
|
||||
background-color: #f4f4f4;
|
||||
color: #333;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
margin: 0; /* Remove default margin */
|
||||
padding: 0; /* Ensure no default padding */
|
||||
background-color: #f8f9fa; /* Lighter grey background */
|
||||
color: #212529; /* Darker text for better contrast */
|
||||
line-height: 1.6;
|
||||
font-size: 16px; /* Base font size */
|
||||
}
|
||||
|
||||
h1, h2, h3 { /* Consistent heading styling */
|
||||
color: #343a40; /* Dark grey for headings */
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #333;
|
||||
font-size: 2.25rem; /* Larger H1 */
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
max-width: 1140px; /* Common max-width for containers */
|
||||
margin: 0 auto; /* Center the container */
|
||||
padding: 20px;
|
||||
background-color: #ffffff; /* White background for content area */
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.05); /* Subtle shadow for depth */
|
||||
border-radius: 8px; /* Slightly rounded corners for the container */
|
||||
margin-top: 20px; /* Space from top of viewport */
|
||||
margin-bottom: 20px; /* Space from bottom of viewport */
|
||||
}
|
||||
|
||||
|
||||
input[type="file"] {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@ -25,36 +54,43 @@ input[type="file"] {
|
||||
|
||||
#contactsTable {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 20px;
|
||||
table-layout: fixed; /* Helps with column width control */
|
||||
border-collapse: collapse; /* Keep collapsed borders */
|
||||
margin-top: 25px; /* Consistent margin */
|
||||
table-layout: fixed;
|
||||
font-size: 0.9rem; /* Slightly smaller font for table data */
|
||||
background-color: #fff; /* Ensure table background is white if container has different color */
|
||||
border: 1px solid #dee2e6; /* Outer border for the table */
|
||||
border-radius: 0.25rem; /* Rounded corners for the table itself */
|
||||
overflow: hidden; /* To make border-radius clip tbody/thead */
|
||||
}
|
||||
|
||||
#contactsTable th, #contactsTable td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
border: 1px solid #e9ecef; /* Lighter internal borders */
|
||||
padding: 12px 15px; /* Increased padding */
|
||||
text-align: left;
|
||||
word-wrap: break-word; /* Break long words to prevent overflow */
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* Style for the "Other Properties" column to ensure pre-wrap is effective */
|
||||
#contactsTable td:last-child {
|
||||
/* Style for the "Other Properties" column to ensure pre-wrap is effective - No longer exists in main table */
|
||||
/* #contactsTable td:last-child {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
} */
|
||||
|
||||
|
||||
#contactsTable th {
|
||||
background-color: #e9e9e9;
|
||||
color: #333;
|
||||
background-color: #f8f9fa; /* Very light grey for headers */
|
||||
color: #495057; /* Darker text for header contrast */
|
||||
font-weight: 600; /* Bolder headers */
|
||||
border-bottom: 2px solid #dee2e6; /* Stronger bottom border for headers */
|
||||
}
|
||||
|
||||
#contactsTable tr:nth-child(even) {
|
||||
background-color: #f9f9f9;
|
||||
#contactsTable tr:nth-child(even) td { /* Target td for striping background */
|
||||
background-color: #f8f9fa; /* Light stripe for even rows */
|
||||
}
|
||||
|
||||
#contactsTable tr:hover {
|
||||
background-color: #f1f1f1; /* Highlight row on hover */
|
||||
cursor: pointer; /* Indicate clickable */
|
||||
#contactsTable tr:hover td { /* Target td for hover background */
|
||||
background-color: #e9ecef; /* Slightly darker hover for better feedback */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@ -96,50 +132,316 @@ input[type="file"] {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
opacity: 1; /* From previous .close-button:hover, ensure it's here too */
|
||||
}
|
||||
|
||||
.modal h2, .modal h3 {
|
||||
margin-top: 0;
|
||||
color: #333;
|
||||
/* Refined Modal Content Styles */
|
||||
.modal-content h2 { /* Main modal title */
|
||||
font-size: 1.75rem; /* Was 1.75rem */
|
||||
color: #007bff; /* Accent color for modal title */
|
||||
margin-bottom: 20px; /* Was 0.5em, now more explicit */
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #eee; /* Keep this border */
|
||||
margin-top: 0; /* Ensure no top margin for main title */
|
||||
}
|
||||
|
||||
.modal h3 {
|
||||
margin-top: 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 5px;
|
||||
.modal-content h3 { /* Section titles within modal */
|
||||
font-size: 1.15rem; /* Was 1.25rem, slightly smaller for sub-sections */
|
||||
color: #343a40; /* Consistent with other h3s */
|
||||
margin-top: 25px; /* Increased space above section titles */
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px dashed #ced4da; /* Dashed line for section separation */
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.modal ul {
|
||||
.modal-content p { /* Paragraphs in modal */
|
||||
margin-bottom: 8px; /* Slightly more space */
|
||||
line-height: 1.5; /* Improved readability */
|
||||
}
|
||||
.modal-content p strong { /* Bold text within paragraphs, e.g., "Family Name:" */
|
||||
color: #495057; /* Softer, consistent color */
|
||||
margin-right: 5px; /* Space after the label */
|
||||
display: inline-block; /* Allows min-width if needed later */
|
||||
/* min-width: 120px; */ /* Optional: if alignment is desired */
|
||||
}
|
||||
|
||||
.modal-content ul {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
margin-bottom: 15px; /* Space after lists */
|
||||
}
|
||||
|
||||
.modal ul li {
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #eee;
|
||||
padding: 8px;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 4px;
|
||||
.modal-content ul li {
|
||||
background-color: #fff; /* Cleaner background for list items */
|
||||
border: 1px solid #e9ecef; /* Lighter border, consistent with table */
|
||||
padding: 10px 12px; /* Consistent padding */
|
||||
margin-bottom: 8px;
|
||||
border-radius: 0.25rem; /* Standard radius */
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.modal p {
|
||||
margin-bottom: 5px;
|
||||
.modal-content ul li div { /* For nested divs within li, like formatted ADR */
|
||||
padding: 3px 0; /* Small padding for structure */
|
||||
}
|
||||
|
||||
.modal ul li div { /* For nested divs within li, like formatted ADR */
|
||||
padding: 2px 0;
|
||||
}
|
||||
.modal ul li div strong { /* For labels within formatted ADR */
|
||||
.modal-content ul li div strong { /* For labels within formatted ADR, e.g., "Street:" */
|
||||
display: inline-block;
|
||||
min-width: 120px; /* Adjust as needed for alignment */
|
||||
margin-right: 5px;
|
||||
min-width: 100px; /* Adjust as needed */
|
||||
color: #495057;
|
||||
margin-right: 8px;
|
||||
font-weight: 500; /* Less strong than section headers */
|
||||
}
|
||||
|
||||
#modalNote { /* Ensure note paragraph respects newlines from VCard */
|
||||
#modalNote {
|
||||
white-space: pre-wrap;
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #eee;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
min-height: 50px; /* Give it some space */
|
||||
background-color: #f8f9fa; /* Consistent light background */
|
||||
border: 1px solid #dee2e6; /* Consistent border */
|
||||
padding: 12px;
|
||||
border-radius: 0.25rem;
|
||||
min-height: 60px;
|
||||
line-height: 1.5;
|
||||
color: #212529; /* Ensure text color is set */
|
||||
font-size: 0.95rem; /* Slightly smaller for notes */
|
||||
}
|
||||
|
||||
/* Tab Navigation Styles */
|
||||
.tab-navigation {
|
||||
border-bottom: 2px solid #dee2e6; /* Slightly thicker border */
|
||||
margin-bottom: 25px; /* Increased margin */
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
background-color: transparent; /* Make inactive tabs blend more */
|
||||
border: none; /* Remove default border */
|
||||
border-bottom: 2px solid transparent; /* Placeholder for active state */
|
||||
padding: 12px 18px; /* Adjusted padding */
|
||||
cursor: pointer;
|
||||
font-size: 1rem; /* Use rem for font size */
|
||||
margin-right: 8px;
|
||||
border-radius: 0; /* Sharp corners for a more modern tab look */
|
||||
outline: none;
|
||||
transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
|
||||
color: #495057; /* Softer text color for inactive tabs */
|
||||
}
|
||||
|
||||
.tab-button:hover {
|
||||
color: #007bff; /* Accent color on hover */
|
||||
border-bottom-color: #cfe2ff; /* Light blue bottom border on hover */
|
||||
}
|
||||
|
||||
.tab-button.active-tab-button {
|
||||
color: #007bff; /* Active tab text color */
|
||||
border-bottom-color: #007bff; /* Active tab underline */
|
||||
font-weight: 600; /* Slightly bolder for active tab */
|
||||
}
|
||||
|
||||
/* Tab Pane Styles */
|
||||
.tab-pane {
|
||||
display: none; /* Hidden by default */
|
||||
padding: 10px;
|
||||
/* border: 1px solid #ccc; */ /* Optional: border around content */
|
||||
/* border-top: none; */ /* Optional: if tab-navigation has bottom border */
|
||||
}
|
||||
|
||||
.tab-pane.active-pane {
|
||||
display: block; /* Shown when active */
|
||||
}
|
||||
|
||||
.tab-description {
|
||||
background-color: #e9ecef; /* Light grey background, distinct from main content area */
|
||||
padding: 15px;
|
||||
margin-top: 0; /* Align with top if h1 has margin-top */
|
||||
margin-bottom: 25px; /* Space before the main content of the tab */
|
||||
border-radius: 0.25rem; /* Consistent border-radius */
|
||||
font-size: 0.95rem; /* Slightly smaller font for descriptive text */
|
||||
line-height: 1.6;
|
||||
color: #495057; /* Softer text color */
|
||||
}
|
||||
|
||||
.tab-description p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px; /* Space between paragraphs within the description */
|
||||
}
|
||||
|
||||
.tab-description p:last-child {
|
||||
margin-bottom: 0; /* No bottom margin for the last paragraph */
|
||||
}
|
||||
|
||||
|
||||
/* VCard Generator Form Styles */
|
||||
#vcardGeneratorForm fieldset {
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #ddd;
|
||||
padding: 15px;
|
||||
border-radius: 8px; /* Consistent with main-container */
|
||||
background-color: #fdfdfd; /* Slightly off-white for fieldset */
|
||||
}
|
||||
|
||||
#vcardGeneratorForm legend {
|
||||
font-weight: 600; /* Bolder legend */
|
||||
color: #007bff; /* Accent color for legend */
|
||||
padding: 0 10px; /* More padding around legend text */
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
#vcardGeneratorForm div { /* Container for label + input */
|
||||
margin-bottom: 15px; /* Increased spacing */
|
||||
}
|
||||
|
||||
#vcardGeneratorForm label {
|
||||
display: block;
|
||||
margin-bottom: 5px; /* Increased space below label */
|
||||
font-weight: 500;
|
||||
color: #495057; /* Slightly softer label color */
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
#vcardGeneratorForm input[type="text"],
|
||||
#vcardGeneratorForm input[type="tel"],
|
||||
#vcardGeneratorForm input[type="email"],
|
||||
#vcardGeneratorForm input[type="url"],
|
||||
#vcardGeneratorForm select,
|
||||
#vcardGeneratorForm textarea {
|
||||
width: 100%; /* Let box-sizing handle padding/border */
|
||||
padding: 10px 12px; /* Increased padding */
|
||||
border: 1px solid #ced4da; /* Standard Bootstrap-like border color */
|
||||
border-radius: 0.25rem; /* Standard border-radius */
|
||||
box-sizing: border-box;
|
||||
font-size: 1rem; /* Consistent font size */
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
#vcardGeneratorForm input[type="text"]:focus,
|
||||
#vcardGeneratorForm input[type="tel"]:focus,
|
||||
#vcardGeneratorForm input[type="email"]:focus,
|
||||
#vcardGeneratorForm input[type="url"]:focus,
|
||||
#vcardGeneratorForm select:focus,
|
||||
#vcardGeneratorForm textarea:focus {
|
||||
border-color: #80bdff; /* Bootstrap focus color */
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Bootstrap focus shadow */
|
||||
}
|
||||
|
||||
|
||||
#vcardGeneratorForm textarea {
|
||||
resize: vertical;
|
||||
min-height: 80px; /* Minimum height for textareas */
|
||||
}
|
||||
|
||||
|
||||
#vcardGeneratorForm button[type="button"] {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
#vcardGeneratorForm button[type="button"]:hover {
|
||||
transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
|
||||
/* General button styling - primary actions */
|
||||
}
|
||||
|
||||
#vcardGeneratorForm button[type="button"]:hover {
|
||||
background-color: #0056b3;
|
||||
border-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Download button specific styling (can override general if needed, or be a class) */
|
||||
#downloadVcfButton {
|
||||
background-color: #28a745;
|
||||
border-color: #28a745;
|
||||
}
|
||||
#downloadVcfButton:hover {
|
||||
background-color: #1e7e34;
|
||||
border-color: #1e7e34;
|
||||
}
|
||||
|
||||
/* File Input Styling - common trick using a label */
|
||||
input[type="file"] {
|
||||
display: none; /* Hide the actual file input */
|
||||
}
|
||||
.file-upload-label {
|
||||
display: inline-block;
|
||||
background-color: #6c757d; /* Secondary button color */
|
||||
color: white;
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
margin-bottom: 20px; /* Keep existing margin */
|
||||
}
|
||||
.file-upload-label:hover {
|
||||
background-color: #5a6268;
|
||||
}
|
||||
|
||||
|
||||
/* Modal Close Button - already has some styling, let's refine slightly */
|
||||
.close-button {
|
||||
color: #6c757d; /* Softer color */
|
||||
float: right;
|
||||
font-size: 1.75rem; /* Slightly larger */
|
||||
font-weight: bold;
|
||||
line-height: 1; /* Ensure it aligns well */
|
||||
opacity: 0.75;
|
||||
transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.close-button:hover,
|
||||
.close-button:focus {
|
||||
color: #343a40; /* Darker on hover/focus */
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/* Specific layout for grouped inline elements if any (e.g. phone + type) */
|
||||
/* For now, using display:block on labels makes them stack nicely */
|
||||
|
||||
/* Style for the generated VCard display area */
|
||||
#generatedVCardArea h3 {
|
||||
margin-top: 10px; /* Add some space above this heading */
|
||||
}
|
||||
|
||||
/* Privacy Policy Tab Specific Styles */
|
||||
#privacyView .privacy-content {
|
||||
padding: 10px 0; /* Padding for top/bottom, horizontal handled by .main-container or .tab-pane */
|
||||
line-height: 1.7;
|
||||
font-size: 0.95rem;
|
||||
color: #343a40; /* Slightly darker than tab-description for more formal text */
|
||||
}
|
||||
|
||||
#privacyView .privacy-content h1 { /* Already styled globally, but ensure it's distinct if needed */
|
||||
margin-bottom: 25px; /* More space after main Privacy Policy title */
|
||||
}
|
||||
|
||||
|
||||
#privacyView .privacy-content h2 {
|
||||
font-size: 1.3rem;
|
||||
color: #007bff;
|
||||
margin-top: 30px; /* More space before each section */
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
#privacyView .privacy-content p {
|
||||
margin-bottom: 15px; /* Space between paragraphs */
|
||||
}
|
||||
|
||||
|
||||
#privacyView .privacy-content ul {
|
||||
list-style-type: disc;
|
||||
padding-left: 25px; /* Indent list items further */
|
||||
margin-bottom: 20px; /* Space after lists */
|
||||
}
|
||||
|
||||
#privacyView .privacy-content li {
|
||||
margin-bottom: 10px; /* Space between list items */
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user