114 lines
2.2 KiB
CSS
114 lines
2.2 KiB
CSS
:root {
|
|
--bg: #f9fafb;
|
|
--card-bg: #fff;
|
|
--border: #e5e7eb;
|
|
--primary: #2563eb;
|
|
--primary-hover: #1d4ed8;
|
|
--secondary: #6b7280;
|
|
--radius: 12px;
|
|
--shadow: 0 4px 8px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
body {
|
|
font-family: system-ui, sans-serif;
|
|
background: var(--bg);
|
|
color: #111;
|
|
max-width: 1200px;
|
|
margin: 2rem auto;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
header { text-align:center; margin-bottom:2rem; }
|
|
header h1 { margin:0; font-size:2rem; }
|
|
header .subtitle { color:#555; margin-top:.25rem; }
|
|
|
|
.card {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
padding: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
h2 { margin-top:0; font-size:1.3rem; }
|
|
|
|
textarea {
|
|
flex:1;
|
|
padding:.6rem;
|
|
border-radius: var(--radius);
|
|
border:1px solid var(--border);
|
|
font-family: monospace;
|
|
resize: vertical;
|
|
min-height:100px;
|
|
}
|
|
|
|
.row { display:flex; gap:.5rem; margin-bottom:1rem; align-items:flex-start; }
|
|
.link-row { display:flex; gap:.5rem; margin:.4rem 0; }
|
|
|
|
button {
|
|
border:none;
|
|
border-radius: var(--radius);
|
|
padding:.6rem 1rem;
|
|
cursor:pointer;
|
|
font-weight:500;
|
|
transition: background .2s;
|
|
}
|
|
|
|
button.primary {
|
|
background: var(--primary);
|
|
color:#fff;
|
|
}
|
|
button.primary:hover { background: var(--primary-hover); }
|
|
|
|
button.secondary {
|
|
background: #f3f4f6;
|
|
color: var(--secondary);
|
|
}
|
|
button.secondary:hover { background: #e5e7eb; }
|
|
|
|
.result { margin-top:1rem; }
|
|
|
|
.note { font-size:.85rem; color:#666; margin-top:.3rem; }
|
|
|
|
#toast {
|
|
position:fixed; bottom:16px; left:50%; transform:translateX(-50%);
|
|
background:#111; color:#fff;
|
|
padding:.6rem 1rem; border-radius:var(--radius);
|
|
opacity:0; transition:opacity .25s;
|
|
pointer-events:none;
|
|
}
|
|
#toast.show { opacity:1; }
|
|
|
|
/* Responsivita pro mobily */
|
|
@media (max-width: 640px) {
|
|
body { padding: 0 .5rem; }
|
|
.row, .link-row {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
textarea { min-height: 140px; }
|
|
button { width: 100%; }
|
|
}
|
|
|
|
/* Grid layout pro široké obrazovky */
|
|
.grid {
|
|
display: block;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1.5rem;
|
|
align-items: start;
|
|
}
|
|
.left-col, .right-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
}
|
|
|
|
|