forgejo/web_src/less/_organization.less
HesterG 9ebf6424ee
Remove dashes between organization member avatars on hover ()
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

201 lines
3.1 KiB
Plaintext

.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;
}
}
}