173 lines
3.1 KiB
CSS
173 lines
3.1 KiB
CSS
/**
|
|
* Resume Builder Component Styles
|
|
* Professional Angular Resume Builder - Interactive Resume Creation Interface
|
|
*
|
|
* @author David Valera Melendez <david@valera-melendez.de>
|
|
* @created 2025-08-08
|
|
* @location Made in Germany 🇩🇪
|
|
* @description Main resume building interface with form sections, drag-and-drop, and real-time preview
|
|
*/
|
|
|
|
/* ==========================================================================
|
|
Builder Container & Layout
|
|
========================================================================== */
|
|
|
|
.builder-container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Builder Header
|
|
========================================================================== */
|
|
|
|
.builder-header {
|
|
text-align: center;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.builder-header h1 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
font-size: 2rem;
|
|
font-weight: 300;
|
|
color: var(--color-text-primary);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.builder-header p {
|
|
color: var(--color-text-secondary);
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.stepper-card {
|
|
padding: 32px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.resume-stepper {
|
|
background: transparent;
|
|
}
|
|
|
|
.step-form {
|
|
padding: 24px 0;
|
|
max-width: 800px;
|
|
}
|
|
|
|
.step-form h3 {
|
|
color: var(--color-text-primary);
|
|
font-weight: 400;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.full-width {
|
|
width: 100%;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
mat-form-field {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.step-actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 32px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
.step-actions button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.experience-item,
|
|
.education-item,
|
|
.skill-item {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.skill-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.skill-info h4 {
|
|
margin: 0 0 4px 0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.skill-category {
|
|
font-size: 0.875rem;
|
|
color: var(--color-text-secondary);
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.skill-level {
|
|
font-size: 0.875rem;
|
|
color: var(--color-primary);
|
|
font-weight: 500;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.add-button {
|
|
width: 100%;
|
|
padding: 16px;
|
|
margin: 16px 0;
|
|
border: 2px dashed var(--color-border);
|
|
background: transparent;
|
|
}
|
|
|
|
.add-button:hover {
|
|
border-color: var(--color-primary);
|
|
background: var(--color-primary-bg);
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.stepper-card {
|
|
padding: 16px;
|
|
}
|
|
|
|
.form-row {
|
|
grid-template-columns: 1fr;
|
|
gap: 0;
|
|
}
|
|
|
|
.step-actions {
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.step-actions button {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* Material Stepper Custom Styles */
|
|
::ng-deep .mat-stepper-horizontal {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
::ng-deep .mat-step-header .mat-step-icon {
|
|
background-color: var(--color-primary);
|
|
}
|
|
|
|
::ng-deep .mat-step-header .mat-step-icon-selected {
|
|
background-color: var(--color-primary);
|
|
}
|