Minor CSS fixes

This commit is contained in:
Ignacio Rivero 2025-06-23 20:32:03 -03:00
parent ea49e6c93b
commit 557cf4ca34

22
app.py
View File

@ -136,6 +136,8 @@ HTML_FORM = '''
}
.preview-card {
display: flex;
flex-direction: column;
background: #23282d;
padding: 2em 1.4em 1em 1.4em;
border-radius: 1.5em;
@ -145,6 +147,7 @@ HTML_FORM = '''
text-align: center;
box-sizing: border-box;
margin-left: 0;
align-items: center;
}
img {
margin-top: 1em;
@ -200,10 +203,10 @@ HTML_FORM = '''
.print-frame {
position: relative;
background: #fff;
padding: 10px 15px;
padding: 10px 0 10px 0;
margin-top: 1em;
overflow: hidden;
max-width: 384px;
}
.print-frame::before,
@ -211,28 +214,29 @@ HTML_FORM = '''
content: "";
position: absolute;
left: 0;
width: 101%;
width: 100%;
height: 10px;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQuMjMzMyA0LjIzMzMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS1vcGFjaXR5PSIuOTc2NDciPgo8cmVjdCB4PSItNS41NTExZS0xNyIgd2lkdGg9IjQuMjMzMyIgaGVpZ2h0PSI0LjIzMzMiIGZpbGw9IiMyMjI4MmMiIHN0cm9rZS13aWR0aD0iLjE5MjI2Ii8+CjxwYXRoIHRyYW5zZm9ybT0ibWF0cml4KC4wMzYxMzUgMCAwIC4wNDE3MjUgMS4xNTY4IDEuMTI4OSkiIGQ9Im04NS4xNDEgNzQuNDAzLTExNy4xNS0xZS02IDU4LjU3Ny0xMDEuNDZ6IiBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9Ii4yNjQ1OCIvPgo8L2c+Cjwvc3ZnPgo=') repeat-x left;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQuMjMzMyA0LjIzMzMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIHRyYW5zZm9ybT0ibWF0cml4KC4wMzYxMzUgMCAwIC4wNDE3MjUgMS4xNTY4IDEuMTI4OSkiIGQ9Im04NS4xNDEgNzQuNDAzLTExNy4xNS0xZS02IDU4LjU3Ny0xMDEuNDZ6IiBmaWxsPSIjZmZmIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2Utb3BhY2l0eT0iLjk3NjQ3IiBzdHJva2Utd2lkdGg9Ii4yNjQ1OCIvPgo8L3N2Zz4K') repeat-x left;
background-size: 10px 384px;
z-index: 1;
}
.print-frame::before {
top: 0;
top: 1px;
}
.print-frame::after {
bottom: 0;
bottom: 1px;
transform: rotate(180deg);
}
.print-frame img {
display: block;
margin: 0 auto;
border-radius: 0;
box-shadow: none;
position: relative;
width: 100%
max-width: 384px;
z-index: 2;
}
@ -242,7 +246,7 @@ HTML_FORM = '''
min-height: 12em;
}
@media (max-width: 1000px) {
@media (max-width: 1000px) {
body {
font-size: 1.28em !important; /* Big bump */
}
@ -314,7 +318,7 @@ HTML_FORM = '''
</div>
<div class="preview-card">
{% if img %}
<h3 style="margin-top:0.1em;margin-bottom:0.6em;">Vista previa</h3>
<h2 style="margin-top:0.1em; margin-bottom:0;">Vista previa</h2>
<div class="print-frame">
<img src="data:image/png;base64,{{ img }}">
</div>