mirror of
https://github.com/discourse/discourse.git
synced 2025-02-07 20:08:26 +00:00
eb237e634a
Another attempt at fixing https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/88?u=osama. Previous PR (reverted): #16240. The problems with the previous PR were: 1. As you scrolled down a topics list, the first topic of every new batch of topics would receive focus and the indicator would show up. 2. Similar to 1, clicking the `See X new or updated topics` notice would also focus a random topic from the new topics that were just loaded. 3. Topics in the suggested topics list received focus too 4. Our custom focus indicator appeared on mobile, but it shouldn't. This commit should have none of these problems.
429 lines
7.3 KiB
SCSS
429 lines
7.3 KiB
SCSS
// Topic list navigation & controls
|
|
|
|
.list-controls {
|
|
a.badge-category {
|
|
padding: 3px 12px;
|
|
font-size: $font-up-1;
|
|
}
|
|
|
|
.combo-box .combo-box-header {
|
|
background: var(--secondary);
|
|
color: var(--primary);
|
|
border: 1px solid var(--primary-medium);
|
|
font-size: $font-0;
|
|
transition: none;
|
|
height: 100%;
|
|
&:focus {
|
|
border-color: var(--tertiary);
|
|
}
|
|
}
|
|
.select-kit {
|
|
.select-kit-collection {
|
|
max-height: 40vh;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navigation-container {
|
|
width: 100%;
|
|
--nav-space: 0.75em;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.category-breadcrumb {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--nav-space) 0; // used if the breadcrumb dropdowns wrap
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0 0 var(--nav-space) 0;
|
|
> li {
|
|
// only target the top-level li, not dropdowns
|
|
display: flex;
|
|
margin-right: 0.5em;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
#navigation-bar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 0;
|
|
margin-bottom: var(--nav-space);
|
|
margin-right: auto;
|
|
}
|
|
|
|
.navigation-controls {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: stretch;
|
|
margin-bottom: var(--nav-space);
|
|
gap: var(--nav-space) 0; // used if the buttons wrap
|
|
> * {
|
|
white-space: nowrap;
|
|
&:not(:last-child) {
|
|
margin-right: 0.5em;
|
|
}
|
|
}
|
|
.select-kit-header {
|
|
height: 100%;
|
|
}
|
|
@include breakpoint(mobile-large) {
|
|
.edit-category {
|
|
.d-button-label {
|
|
display: none;
|
|
}
|
|
.d-icon {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.show-more {
|
|
width: 100%;
|
|
z-index: z("base");
|
|
&.has-topics {
|
|
position: absolute;
|
|
top: 7px;
|
|
}
|
|
}
|
|
|
|
.category-heading {
|
|
max-width: 100%;
|
|
p {
|
|
margin-top: 0;
|
|
line-height: $line-height-large;
|
|
font-size: $font-up-3;
|
|
}
|
|
}
|
|
|
|
.category-logo.aspect-image {
|
|
width: auto;
|
|
max-height: 150px;
|
|
}
|
|
|
|
@supports (--custom: property) {
|
|
.category-logo.aspect-image {
|
|
--max-height: 150px;
|
|
max-height: var(--max-height);
|
|
width: calc(var(--max-height) * var(--aspect-ratio));
|
|
max-width: 100%;
|
|
height: auto;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: inherit;
|
|
max-width: initial;
|
|
max-height: initial;
|
|
}
|
|
}
|
|
}
|
|
|
|
.topic-list.shared-drafts {
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
// Topic list body
|
|
|
|
.topic-list-item.visited .topic-list-data,
|
|
.latest-topic-list-item.visited,
|
|
.category-topic-link.visited {
|
|
a.title:not(.badge-notification) {
|
|
color: var(--primary-medium);
|
|
}
|
|
span.badge-category {
|
|
color: var(--primary-medium);
|
|
}
|
|
a.discourse-tag {
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
|
|
.topic-list-item {
|
|
.post-excerpt {
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
font-size: $font-down-2;
|
|
word-break: break-word;
|
|
}
|
|
}
|
|
|
|
.topic-list-main-link {
|
|
font-size: $font-up-1;
|
|
a.title {
|
|
padding: 15px 0;
|
|
word-break: break-word;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.anon & {
|
|
a.title:visited:not(.badge-notification) {
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
|
|
a.title.visited:not(.badge-notification) {
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
|
|
.sticky-header .topic-list-header {
|
|
@include sticky;
|
|
top: var(--header-offset, 60px);
|
|
background: var(--secondary);
|
|
z-index: 2;
|
|
}
|
|
|
|
.topic-list {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
|
|
> .topic-list-body > .topic-list-item {
|
|
&.has-excerpt .star {
|
|
vertical-align: top;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
&.last-visit {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.topic-list-separator {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.topic-list-item-separator {
|
|
border: none;
|
|
|
|
.topic-list-data {
|
|
border-top: 1px solid var(--danger-medium);
|
|
line-height: 0em;
|
|
padding: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.topic-list-data span {
|
|
position: relative; // Chrome needs this, otherwise the line is above the text
|
|
background-color: var(--secondary);
|
|
color: var(--danger-medium);
|
|
padding: 0 8px;
|
|
font-size: $font-down-1;
|
|
}
|
|
}
|
|
|
|
.topic-list-data {
|
|
line-height: $line-height-large;
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
}
|
|
.btn-flat .d-icon {
|
|
color: currentColor;
|
|
}
|
|
|
|
td {
|
|
color: var(--primary-medium);
|
|
font-size: $font-0;
|
|
}
|
|
|
|
.main-link {
|
|
@extend .topic-list-main-link;
|
|
|
|
.raw-topic-link > * {
|
|
pointer-events: none;
|
|
}
|
|
|
|
&.focused {
|
|
box-shadow: inset 3px 0 0 var(--tertiary);
|
|
}
|
|
/* we have a custom focus indicator so we can remove the native one */
|
|
.title:focus {
|
|
outline: none;
|
|
}
|
|
.title:focus-visible {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.unread-indicator {
|
|
&.read {
|
|
display: none;
|
|
}
|
|
.d-icon {
|
|
vertical-align: middle;
|
|
font-size: $font-down-5;
|
|
}
|
|
}
|
|
|
|
.link-bottom-line {
|
|
font-size: $font-down-1;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
.discourse-tags {
|
|
flex-wrap: wrap;
|
|
}
|
|
a.badge-wrapper.box,
|
|
a.discourse-tag.box {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
.discourse-tag.simple:after,
|
|
.discourse-tag.box {
|
|
margin-right: 0.25em;
|
|
}
|
|
}
|
|
|
|
.topic-featured-link {
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.topic-excerpt {
|
|
display: block;
|
|
font-size: $font-down-1;
|
|
margin-top: 0.33em;
|
|
color: var(--primary-high);
|
|
word-wrap: break-word;
|
|
line-height: $line-height-large;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.num {
|
|
text-align: center;
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
.badge-posts {
|
|
font-weight: 700;
|
|
color: inherit;
|
|
padding: 15px 5px;
|
|
}
|
|
}
|
|
|
|
.num.posts {
|
|
a {
|
|
padding: 15px 5px;
|
|
}
|
|
}
|
|
|
|
.num.activity {
|
|
a {
|
|
padding: 15px 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.heatmap-high,
|
|
.heatmap-high a,
|
|
.heatmap-high .d-icon,
|
|
.heatmap-high .d-button-label {
|
|
color: #fe7a15 !important;
|
|
}
|
|
|
|
.heatmap-med,
|
|
.heatmap-med a,
|
|
.heatmap-med .d-icon,
|
|
.heatmap-med .d-button-label {
|
|
color: #cf7721 !important;
|
|
}
|
|
|
|
.heatmap-low,
|
|
.heatmap-low a,
|
|
.heatmap-low .d-icon,
|
|
.heatmap-low .d-button-label {
|
|
color: #9b764f !important;
|
|
}
|
|
|
|
.topic-list .heatmap-high {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.loading .topic-list {
|
|
border: 0;
|
|
box-shadow: none;
|
|
.topic-list-item {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
#list-area {
|
|
margin-bottom: 100px;
|
|
.empty-topic-list {
|
|
padding: 10px;
|
|
}
|
|
.unseen {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
border: 0;
|
|
color: var(--danger-medium);
|
|
font-size: $font-0;
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
.topic-list {
|
|
.alert {
|
|
margin-bottom: 0;
|
|
font-size: $font-0;
|
|
}
|
|
.spinner {
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
|
|
.d-icon-thumbtack.unpinned {
|
|
@include fa-rotate(180deg, 1);
|
|
}
|
|
|
|
.top-title-buttons {
|
|
display: flex;
|
|
margin: 0.5em 0;
|
|
flex-wrap: wrap;
|
|
font-size: var(--font-0-rem);
|
|
|
|
button {
|
|
margin-right: 0.5em;
|
|
}
|
|
}
|
|
|
|
div.education {
|
|
color: var(--primary);
|
|
padding: 1em 2.5em 1em 1em;
|
|
margin-bottom: 2em;
|
|
border-top: 3px solid var(--primary-low);
|
|
border-bottom: 1px solid var(--primary-low);
|
|
|
|
.badge-notification.unread-posts {
|
|
vertical-align: text-bottom;
|
|
}
|
|
}
|
|
|
|
.list-cell {
|
|
padding: 12px 5px;
|
|
color: var(--primary-med-or-secondary-high);
|
|
}
|
|
|
|
.table-heading {
|
|
@extend .list-cell;
|
|
border-bottom: 3px solid var(--primary-low);
|
|
}
|
|
|
|
// This is not what we want:
|
|
//
|
|
// This is an overly-long topic title that would break just right
|
|
// *
|
|
//
|
|
// Instead, we want the line to break like this:
|
|
//
|
|
// This is an overly-long topic title that would break just
|
|
// right *
|
|
.topic-post-badges {
|
|
white-space: nowrap;
|
|
align-self: center;
|
|
line-height: $line-height-medium;
|
|
}
|