169 lines
3.0 KiB
CSS
169 lines
3.0 KiB
CSS
: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;
|
|
}
|
|
} |