Minor CSS fixes
This commit is contained in:
parent
ea49e6c93b
commit
557cf4ca34
22
app.py
22
app.py
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user