mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-07-08 15:03:14 +02:00
88f68850b5
The elements were hidden on small screens to preserve space and the icons still conveyed the meaning for users with intact eye vision. However, the names were no longer exposed to screen readers, and their users usually cannot obtain the meaning from the icons. Adding aria-labels to the affected templates results in certain complexity due to the DOM, so instead I decided to use some accessible CSS tricks to move the content off the screen instead of hiding it. It should remain accessible for most screen readers.
108 lines
2.2 KiB
CSS
108 lines
2.2 KiB
CSS
.fork-flag {
|
|
margin-top: 0.5rem;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.repo-header {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.repo-header .flex-item {
|
|
padding: 0;
|
|
}
|
|
|
|
.repo-header .btn.interact-bg:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.repo-header .flex-item-main {
|
|
flex-basis: unset;
|
|
}
|
|
|
|
.repo-header .flex-item-trailing {
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.repo-header .flex-item-trailing .repo-icon {
|
|
display: none;
|
|
}
|
|
|
|
.repo-buttons {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
word-break: keep-all;
|
|
gap: 0.25em;
|
|
}
|
|
|
|
.repo-buttons .ui.labeled.button > .label:hover {
|
|
color: var(--color-primary-light-2);
|
|
background: var(--color-light);
|
|
}
|
|
|
|
.repo-buttons button[disabled] ~ .label {
|
|
opacity: var(--opacity-disabled);
|
|
color: var(--color-text-dark);
|
|
background: var(--color-light-mimic-enabled) !important;
|
|
}
|
|
|
|
.repo-buttons button[disabled] ~ .label:hover {
|
|
color: var(--color-primary-dark-1);
|
|
}
|
|
|
|
.repo-buttons .ui.labeled.button.disabled {
|
|
pointer-events: inherit !important;
|
|
}
|
|
|
|
.repo-buttons .ui.labeled.button.disabled > .label {
|
|
color: var(--color-text-dark);
|
|
background: var(--color-light-mimic-enabled) !important;
|
|
}
|
|
|
|
.repo-buttons .ui.labeled.button.disabled > .label:hover {
|
|
color: var(--color-primary-dark-1);
|
|
}
|
|
|
|
.repo-buttons .ui.labeled.button.disabled > .button {
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
.repository .header-wrapper {
|
|
background-color: var(--color-header-wrapper);
|
|
}
|
|
|
|
.repository .header-wrapper .new-menu {
|
|
padding-top: 0 !important;
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.repository .header-wrapper .new-menu .item {
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.repo-header .flex-item {
|
|
flex-grow: 1;
|
|
}
|
|
.repo-buttons .ui.labeled.button .text,
|
|
.repo-header .flex-item-trailing .label {
|
|
/* the elements are hidden from users with intact eye vision,
|
|
* because SVG icons convey the meaning.
|
|
* However, they should remain accessible to screen readers */
|
|
position: absolute;
|
|
left: -1000vw;
|
|
top: auto;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
}
|
|
.repo-header .flex-item-trailing .repo-icon {
|
|
display: initial;
|
|
}
|
|
}
|