johannes-hernehult
4145cec102
* Extract inline guide frames into a reusable Frame component * Update step elements to use proper ordered lists (<ol> and <li>) * Move related image and list styling to Frame.css
56 lines
1,010 B
CSS
56 lines
1,010 B
CSS
main:has(.guide) {
|
|
padding: var(--size-md) 7rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.guide__frames {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-xl);
|
|
}
|
|
|
|
.guide {
|
|
max-width: 600px;
|
|
.delete-button {
|
|
position: absolute;
|
|
bottom: var(--size-md);
|
|
right: var(--size-md);
|
|
}
|
|
|
|
.edit-button {
|
|
position: absolute;
|
|
top: var(--size-md);
|
|
right: 8rem;
|
|
}
|
|
|
|
.export-button {
|
|
position: absolute;
|
|
top: var(--size-md);
|
|
right: var(--size-md);
|
|
}
|
|
|
|
}
|
|
@media print {
|
|
main:has(.guide) {
|
|
padding: 0rem;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.guide__frames {
|
|
display: block;
|
|
}
|
|
|
|
.guide__frame {
|
|
position: relative;
|
|
break-inside: avoid;
|
|
page-break-inside: avoid;
|
|
background-color: var(--color-bg-panel);
|
|
margin: var(--size-lg) 0;
|
|
}
|
|
|
|
.guide__frame img {
|
|
max-width: 100%;
|
|
max-height: 100px;
|
|
}
|
|
}
|