Kumi
2acf8501b4
Improved the UI's informative elements by introducing accessible tooltips and clearer button hierarchy in the CSS. Specifically, focused on enhancing keyboard navigation accessibility by outlining `abbr` elements when focused, and adjusted the `.card-block > .btn` selector for better specificity, ensuring button styles apply more reliably. In the HTML template, added an abbreviation (abbr) element with a tooltip to explain the resolution input field, aiding user understanding and interaction without cluttering the UI. These changes aim to make the platform more inclusive and user-friendly, particularly for users relying on keyboard navigation, and provide clearer, immediate guidance on the resolution setting process without overwhelming them with text.
91 lines
1.1 KiB
CSS
91 lines
1.1 KiB
CSS
body {
|
|
background-color: #f8f9fa;
|
|
font-family: "Arial", sans-serif;
|
|
}
|
|
|
|
.container {
|
|
max-width: 800px;
|
|
}
|
|
|
|
h1,
|
|
h2 {
|
|
text-align: center;
|
|
color: #333;
|
|
}
|
|
|
|
h2 a {
|
|
text-decoration: none;
|
|
color: #007bff;
|
|
}
|
|
|
|
h2 a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
form {
|
|
background-color: #fff;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.form-group label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.form-control {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.btn {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#options {
|
|
display: none;
|
|
}
|
|
|
|
#cards {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.modal-dialog {
|
|
max-width: 90%;
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: #fff;
|
|
}
|
|
|
|
#panorama {
|
|
height: 500px;
|
|
}
|
|
|
|
.card-block > .btn {
|
|
width: 100%;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.info-symbol {
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
cursor: help;
|
|
color: #17a2b8;
|
|
}
|
|
|
|
.info-symbol:hover {
|
|
color: #1397a3;
|
|
}
|
|
|
|
abbr[title] {
|
|
border-bottom: none;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Accessibility for keyboard navigation */
|
|
abbr[title]:focus {
|
|
outline: 2px dashed #17a2b8;
|
|
outline-offset: 2px;
|
|
} |