1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-11-22 08:42:32 -05:00
forgejo/web_src/less/_organization.less
HesterG 9ebf6424ee
Remove dashes between organization member avatars on hover (#23034)
On the home page of an organization, there are unexpected dashes between
the avatars of the members when hovering over the avatars, as shown in
below:

![hover including title](https://user-images.githubusercontent.com/17645053/220271470-4f49e16f-87eb-4ffa-b38e-23feae1ff92d.png)

![hover without title](https://user-images.githubusercontent.com/17645053/220271512-e4a67685-6b72-4742-a34f-e01ed248c1de.png)

This is because in `fomantic/build/semantic.css` there is a
rule `text-decoration: underline;` when hovering over the `<a>` tag.
Here, the `<a>` tag has width and height because of the avatar image inside,
leading to the unexpected underlines.

This PR overrides the `a:hover` rule so the underline does not exist anymore.

Co-authored-by: delvh <leon@kske.dev>
2023-02-21 12:28:31 +01:00

200 lines
3.1 KiB
Text

.organization {
.head {
.ui.header {
.text {
vertical-align: middle;
font-size: 1.6rem;
margin-left: 15px;
}
.org-visibility .label {
margin-left: 5px;
margin-top: 5px;
}
.ui.right {
margin-top: 5px;
}
}
}
.ui.secondary.stackable.pointing.menu {
flex-wrap: wrap;
margin-top: 5px;
margin-bottom: 10px;
}
&.new.org {
#create-page-form();
form {
.header {
padding-left: 0 !important;
text-align: center;
}
}
}
&.options {
input {
min-width: 300px;
}
}
&.profile {
.org-avatar {
width: 100px;
height: 100px;
margin-right: 15px;
}
#org-info {
overflow-wrap: anywhere;
.ui.header {
display: flex;
align-items: center;
font-size: 36px;
margin-bottom: 0;
.org-visibility .label {
margin-left: 5px;
margin-top: 2px;
}
}
.desc {
font-size: 16px;
margin-bottom: 10px;
}
.meta {
.item {
display: inline-block;
margin-right: 10px;
.icon {
margin-right: 5px;
}
}
}
}
.ui.top.header {
.ui.right {
margin-top: 0;
}
}
.teams {
.item {
padding: 10px 15px;
}
}
}
&.teams,
&.profile {
.members {
a:hover {
text-decoration: none;
}
.ui.avatar {
width: 48px;
height: 48px;
margin-right: 5px;
margin-bottom: 5px;
}
}
}
&.invite {
#invite-box {
margin: 50px auto auto;
width: 500px !important;
#search-user-box {
input {
margin-left: 0;
width: 300px;
}
}
.ui.button {
margin-left: 5px;
margin-top: -3px;
}
}
.ui.avatar {
width: 100%;
height: 100%;
}
}
&.members {
.list {
.item {
margin-left: 0;
margin-right: 0;
border-bottom: 1px solid var(--color-secondary);
.ui.avatar {
width: 48px;
height: auto;
margin-right: 1rem;
align-self: flex-start;
}
.meta {
line-height: 24px;
word-break: break-word;
min-width: 2em;
}
}
}
}
&.teams {
.detail {
.item {
padding: 10px 15px;
&:not(:last-child) {
border-bottom: 1px solid var(--color-secondary);
}
}
}
.repositories,
.members {
.item {
padding: 10px 20px;
line-height: 32px;
&:not(:last-child) {
border-bottom: 1px solid var(--color-secondary);
}
.button {
padding: 9px 10px;
}
}
}
#add-repo-form,
#repo-multiple-form,
#add-member-form {
input {
margin-left: 0;
}
.ui.button {
margin-left: 5px;
margin-top: -3px;
}
}
#repo-top-segment {
height: 60px;
}
}
}