181 lines
3.6 KiB
CSS
181 lines
3.6 KiB
CSS
h1, a, p, label {
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
}
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
nav {
|
|
background-color: rgb(32, 32, 90);
|
|
width: calc(100% - 8px);
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 4px;
|
|
border-radius: 0px 0px 4px 4px;
|
|
}
|
|
|
|
a.title, a.title:active {
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-items {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.content {
|
|
margin: 8px;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.slider {
|
|
display: flex;
|
|
gap: 8px;
|
|
height: 100%;
|
|
flex-shrink: 0;
|
|
gap: 4px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.slider-item {
|
|
border-radius: 4px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 256px;
|
|
height: 256px;
|
|
border: 1px solid gray;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.grid {
|
|
display: flex;
|
|
gap: 8px;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
justify-content: center;
|
|
}
|
|
|
|
.grid-item {
|
|
border-radius: 4px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 128px;
|
|
height: 64px;
|
|
border: 1px solid gray;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.grid-item:hover, .slider-item:hover, .disabled {
|
|
background-color: rgb(128, 128, 128);
|
|
}
|
|
|
|
.form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
background-color: #e0e0e0;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
border: 1px solid #e1e1e1;
|
|
}
|
|
|
|
input[type=text] {
|
|
padding: 8px;
|
|
font-size: 24px;
|
|
border-radius: 8px;
|
|
border: 0px
|
|
}
|
|
|
|
.form-element {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.form-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.button {
|
|
padding: 8px;
|
|
font-size: 16px;
|
|
border-radius: 8px;
|
|
border: 0px;
|
|
background-color: #c0c0c0;
|
|
}
|
|
|
|
.form-submit {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
|
|
.info {
|
|
padding: 8px;
|
|
background-color: #bbccff;
|
|
border-radius: 8px;
|
|
border: 2px solid #99aaff;
|
|
margin: 8px;
|
|
}
|
|
|
|
table {
|
|
/* Box Model & Layout */
|
|
width: 100%; /* Make the table take up the full width of its container */
|
|
border-collapse: collapse; /* Essential: Merges the borders of adjacent cells into a single line */
|
|
font-family: Arial, sans-serif; /* A clean, readable font */
|
|
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
|
|
}
|
|
|
|
/* Styling the Table Header */
|
|
th {
|
|
background-color: #007bff; /* Primary color background for the header */
|
|
color: white; /* White text for contrast */
|
|
text-align: left; /* Align text to the left */
|
|
padding: 12px 15px; /* Comfortable padding */
|
|
}
|
|
|
|
/* Styling the Table Cells (Data and Headers) */
|
|
td, th {
|
|
border: 1px solid #dddddd; /* Light gray border for all cells */
|
|
padding: 10px 15px; /* Consistent padding */
|
|
}
|
|
|
|
/* Styling the Table Rows */
|
|
tr:nth-child(even) {
|
|
background-color: #f3f3f3; /* Zebra striping: light gray background for even rows */
|
|
}
|
|
|
|
tr:hover {
|
|
background-color: #e0e0e0; /* Highlight the row when the user hovers over it */
|
|
cursor: pointer; /* Change cursor to pointer to indicate interactivity */
|
|
}
|
|
|
|
/* Optional: Styling the Table Footer (if you use a <tfoot> element) */
|
|
tfoot td {
|
|
font-weight: bold;
|
|
background-color: #cccccc;
|
|
}
|
|
|
|
a {
|
|
color: blue
|
|
} |