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