448 lines
13 KiB
CSS
448 lines
13 KiB
CSS
body {
|
|
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 {
|
|
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;
|
|
}
|
|
|
|
/* #vcardRawContent {
|
|
background-color: #eee;
|
|
border: 1px solid #ccc;
|
|
padding: 10px;
|
|
margin-top: 20px;
|
|
min-height: 50px;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
} */
|
|
|
|
#contactsTable {
|
|
width: 100%;
|
|
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 #e9ecef; /* Lighter internal borders */
|
|
padding: 12px 15px; /* Increased padding */
|
|
text-align: left;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
/* 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: #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) td { /* Target td for striping background */
|
|
background-color: #f8f9fa; /* Light stripe for even rows */
|
|
}
|
|
|
|
#contactsTable tr:hover td { /* Target td for hover background */
|
|
background-color: #e9ecef; /* Slightly darker hover for better feedback */
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
/* Modal Styles */
|
|
.modal {
|
|
display: none; /* Hidden by default */
|
|
position: fixed; /* Stay in place */
|
|
z-index: 1000; /* Sit on top */
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%; /* Full width */
|
|
height: 100%; /* Full height */
|
|
overflow: auto; /* Enable scroll if needed */
|
|
background-color: rgb(0,0,0); /* Fallback color */
|
|
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
|
|
padding-top: 60px;
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: #fefefe;
|
|
margin: 5% auto; /* 5% from the top and centered */
|
|
padding: 20px;
|
|
border: 1px solid #888;
|
|
width: 80%; /* Could be more or less, depending on screen size */
|
|
max-width: 700px;
|
|
border-radius: 8px;
|
|
position: relative;
|
|
}
|
|
|
|
.close-button {
|
|
color: #aaa;
|
|
float: right;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.close-button:hover,
|
|
.close-button:focus {
|
|
color: black;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
opacity: 1; /* From previous .close-button:hover, ensure it's here too */
|
|
}
|
|
|
|
/* 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-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-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-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-content ul li div { /* For nested divs within li, like formatted ADR */
|
|
padding: 3px 0; /* Small padding for structure */
|
|
}
|
|
.modal-content ul li div strong { /* For labels within formatted ADR, e.g., "Street:" */
|
|
display: inline-block;
|
|
min-width: 100px; /* Adjust as needed */
|
|
color: #495057;
|
|
margin-right: 8px;
|
|
font-weight: 500; /* Less strong than section headers */
|
|
}
|
|
|
|
#modalNote {
|
|
white-space: pre-wrap;
|
|
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 */
|
|
}
|