132 lines
2.5 KiB
CSS
132 lines
2.5 KiB
CSS
/* styles.css */
|
||
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
margin: 0;
|
||
padding: 0;
|
||
background-color: #2c3e50; /* Dark background color */
|
||
color: #bdc3c7; /* Dimmer text color */
|
||
}
|
||
|
||
.hidden-info {
|
||
display: none;
|
||
}
|
||
|
||
.title-button {
|
||
background-color: #34495e;
|
||
border: none;
|
||
color: white;
|
||
text-align: center;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
a,
|
||
a:link,
|
||
a:visited {
|
||
color: #3498db; /* Default link color (blue) */
|
||
text-decoration: none;
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
/* Visited links (distinct yet in the same palette) */
|
||
a:visited {
|
||
color: #9b59b6; /* Soft purple */
|
||
}
|
||
|
||
/* Hover state – bright, engaging, and contrasting */
|
||
a:hover {
|
||
color: #1abc9c; /* Turquoise‑green */
|
||
}
|
||
|
||
/* Active state – immediate feedback */
|
||
a:active {
|
||
color: #e74c3c; /* Warm red */
|
||
}
|
||
|
||
table, th, td {
|
||
border: 1px solid black;
|
||
border-collapse: collapse;
|
||
}
|
||
th, td {
|
||
padding: 10px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 950px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
background-color: #34495e; /* Darker background for container */
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Slightly darker shadow */
|
||
margin-top: 20px;
|
||
}
|
||
.container-small {
|
||
max-width: 550px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
background-color: #34495e; /* Darker background for container */
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Slightly darker shadow */
|
||
margin-top: 20px;
|
||
}
|
||
|
||
h1, h2, h3, h4 {
|
||
color: #bdc3c7; /* Dimmer text color */
|
||
}
|
||
|
||
ul {
|
||
list-style-type: none;
|
||
padding: 0;
|
||
}
|
||
|
||
li {
|
||
margin-bottom: 10px;
|
||
color: #bdc3c7; /* Dimmer text color */
|
||
}
|
||
|
||
.group-columns {
|
||
display: flex;
|
||
}
|
||
|
||
.group-rows {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start; /* Left justification */
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.group-column {
|
||
flex: 0 0 calc(33% - 10px); /* Adjust width of each column */
|
||
}
|
||
|
||
.column {
|
||
flex: 1;
|
||
padding: 0 10px; /* Adjust spacing between columns */
|
||
}
|
||
|
||
.subcolumn {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.meter {
|
||
width: calc(90% - 5px);
|
||
max-width: calc(45% - 5px);
|
||
margin-bottom: 5px;
|
||
border: 1px solid #7f8c8d; /* Light border color */
|
||
border-radius: 5px;
|
||
padding: 5px;
|
||
text-align: center;
|
||
background-color: #2c3e50; /* Dark background for meter */
|
||
}
|
||
|