init
This commit is contained in:
Steffen Probst
169
static/css/main.css
Normal file
169
static/css/main.css
Normal file
@ -0,0 +1,169 @@
|
||||
:root {
|
||||
--background-body: #f5f5f5;
|
||||
--background: #e0e0e0;
|
||||
--text-main: #363636;
|
||||
--text-bright: #000;
|
||||
--links: #0076d1;
|
||||
--focus: rgba(0,150,191,0.67);
|
||||
--border: #dbdbdb;
|
||||
--code: #000;
|
||||
--animation-duration: 0.1s;
|
||||
--button-hover: #9b9b9b;
|
||||
--scrollbar-thumb: #aaa;
|
||||
--form-placeholder: #949494;
|
||||
--form-text: #1d1d1d;
|
||||
--table-header: #d0d0d0;
|
||||
--table-row-odd: #e8e8e8;
|
||||
--table-row-even: #f0f0f0;
|
||||
--sort-arrow: #666;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
line-height: 1.4;
|
||||
max-width: 80%;
|
||||
margin: 0 auto;
|
||||
padding: 0 10%;
|
||||
color: var(--text-main);
|
||||
background: var(--background-body);
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: var(--table-header);
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-right: 20px; /* Space for sort indicator */
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: var(--table-row-odd);
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: var(--table-row-even);
|
||||
}
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
flex-grow: 1;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
#searchInput {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Sort indicators */
|
||||
th::after {
|
||||
content: '\25B2'; /* Upward triangle */
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
opacity: 0.3;
|
||||
color: var(--sort-arrow);
|
||||
}
|
||||
|
||||
th.asc::after {
|
||||
content: '\25B2'; /* Upward triangle */
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
th.desc::after {
|
||||
content: '\25BC'; /* Downward triangle */
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
th:hover::after {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 20px;
|
||||
padding: 10px 0;
|
||||
background-color: var(--background);
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
a[href^="tel:"]:before {
|
||||
content: "📞 ";
|
||||
}
|
||||
|
||||
a[href^="mailto:"]:before {
|
||||
content: "📧 ";
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
max-width: 95%;
|
||||
padding: 0 2.5%;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility improvements */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
107
static/css/print.css
Normal file
107
static/css/print.css
Normal file
@ -0,0 +1,107 @@
|
||||
@media print {
|
||||
@page {
|
||||
size: A4 landscape;
|
||||
margin: 0.8cm;
|
||||
@bottom-right {
|
||||
content: "Seite " counter(page) " von " counter(pages);
|
||||
font-size: 8pt;
|
||||
margin-right: -0.5cm;
|
||||
margin-bottom: -0.5cm;
|
||||
}
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 9pt;
|
||||
line-height: 1.3;
|
||||
background: none;
|
||||
color: #000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.dynamic-table-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.5cm;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
max-width: 29.7cm; /* A4 landscape width minus margins */
|
||||
border-collapse: collapse;
|
||||
page-break-inside: auto;
|
||||
}
|
||||
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
tbody {
|
||||
display: table-row-group;
|
||||
}
|
||||
|
||||
tr {
|
||||
page-break-inside: avoid;
|
||||
page-break-after: auto;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 0.1cm;
|
||||
border: 1px solid #000;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f0f0f0 !important;
|
||||
-webkit-print-color-adjust: exact;
|
||||
color-adjust: exact;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* Hide elements not needed for print */
|
||||
#searchInput, .sort-icon::after, .header-container, footer, .print-date {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Column widths */
|
||||
th:nth-child(1), td:nth-child(1),
|
||||
th:nth-child(2), td:nth-child(2) {
|
||||
width: 15%;
|
||||
}
|
||||
th:nth-child(3), td:nth-child(3) {
|
||||
width: 20%;
|
||||
}
|
||||
th:nth-child(4), td:nth-child(4) {
|
||||
width: 10%;
|
||||
}
|
||||
th:nth-child(5), td:nth-child(5) {
|
||||
width: 25%;
|
||||
}
|
||||
th:nth-child(6), td:nth-child(6) {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
/* Remove top margin for the first page */
|
||||
.dynamic-table-container:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Ensure content on subsequent pages starts at the top */
|
||||
@page :not(:first) {
|
||||
margin-top: 0.8cm;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user