mirror of
https://codeberg.org/forgejo/forgejo
synced 2024-11-30 22:06:11 +01:00
9e74063498
Various fixes to pages or elements which were looking ugly on mobile. <details> <summary>Screenshots</summary>          </details> Co-authored by @silverwind --------- Co-authored-by: silverwind <me@silverwind.io>
59 lines
1.1 KiB
CSS
59 lines
1.1 KiB
CSS
.list-header {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: .5rem;
|
|
}
|
|
|
|
.list-header-sort {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.list-header-search {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
min-width: 200px; /* to enable flexbox wrapping on mobile */
|
|
}
|
|
|
|
.list-header-search .input {
|
|
flex: 1;
|
|
}
|
|
|
|
.small-menu-items {
|
|
min-height: 35.4px !important; /* match .small.button in height */
|
|
background: none !important; /* fomantic sets a color here which does not play well with active transparent color on the item, so unset and set the colors on the item */
|
|
}
|
|
|
|
.small-menu-items .item {
|
|
background: var(--color-menu) !important;
|
|
padding-top: 6px !important;
|
|
padding-bottom: 6px !important;
|
|
}
|
|
|
|
.small-menu-items .item:hover {
|
|
background: var(--color-hover) !important;
|
|
}
|
|
|
|
.small-menu-items .item.active {
|
|
background: var(--color-active) !important;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.list-header-search {
|
|
order: 0;
|
|
}
|
|
.list-header-toggle {
|
|
order: 1;
|
|
}
|
|
.list-header-sort {
|
|
order: 2;
|
|
margin-left: auto;
|
|
}
|
|
}
|