diff --git a/public/css/main.css b/public/css/main.css index fc9ed7b..5faa16e 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -954,29 +954,47 @@ a.fab--secondary:visited { outline-offset: 2px; } -/* ── PDF download button: loading state ── */ -.btn__spinner { +/* ── PDF download FAB ── */ +.fab-primary__ico--pdf { + mask-image: url("../assets/shared/icons/cv.svg"); + -webkit-mask-image: url("../assets/shared/icons/cv.svg"); +} + +.fab--label { + width: auto; + padding: 0.65rem 1.1rem; + gap: 0.5rem; +} + +.fab__label { + font-size: 0.85rem; + font-weight: 600; + line-height: 1; + white-space: nowrap; +} + +.fab__spinner { display: none; width: 1rem; height: 1rem; border: 2px solid color-mix(in hsl, var(--on-accent) 25%, transparent); border-top-color: var(--on-accent); border-radius: 50%; - animation: btn-spin 0.6s linear infinite; + animation: fab-spin 0.6s linear infinite; flex-shrink: 0; } -@keyframes btn-spin { +@keyframes fab-spin { to { transform: rotate(360deg); } } -[data-resume-pdf-btn][data-loading="true"] .btn__icon { +[data-resume-pdf-btn][data-loading="true"] .fab-primary__ico--pdf { opacity: 0; width: 0; overflow: hidden; } -[data-resume-pdf-btn][data-loading="true"] .btn__spinner { +[data-resume-pdf-btn][data-loading="true"] .fab__spinner { display: block; } diff --git a/public/resume-5.html b/public/resume-5.html index 9868cf7..4516276 100644 --- a/public/resume-5.html +++ b/public/resume-5.html @@ -293,10 +293,10 @@