mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
Tommaso Casaburi
62cff4e207
Show centered Nothing Found for catalog searches with no matches, mirror search results labels at the bottom footer, split nav from the style row, and drop the desktop catalog footer top margin.
249 lines
4.4 KiB
CSS
249 lines
4.4 KiB
CSS
/* Page footer (desktop) */
|
|
.footer {
|
|
margin-top: 16px;
|
|
padding-bottom: 24px;
|
|
}
|
|
|
|
.footerCatalog {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.firstRow {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.styleRow {
|
|
padding: 8px 0 0;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.styleRowContent {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.boardsBarRow {
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.legalMeta {
|
|
padding: 12px 0 0;
|
|
font-size: 10px;
|
|
color: var(--body-font-color);
|
|
text-align: center;
|
|
}
|
|
|
|
.legalMeta a {
|
|
color: var(--post-link-text-color);
|
|
text-decoration: var(--boardsbar-desktop-link-text-decoration);
|
|
}
|
|
|
|
.legalMeta a:hover {
|
|
color: var(--post-link-text-color-hover);
|
|
text-decoration: var(--boardsbar-desktop-link-text-decoration-hover);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Shared footer first-row layout (catalog, board pagination footer mode) */
|
|
.footerRow {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* When only footerRight is shown (e.g. multiboards), align it right */
|
|
.footerRowRightOnly {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.footerLeft {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.footerRight {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.styleLabel {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
/* Thread footer first row */
|
|
.threadRow {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
align-items: center;
|
|
gap: 12px;
|
|
width: 100%;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.threadLeft {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
flex-wrap: wrap;
|
|
justify-self: start;
|
|
}
|
|
|
|
.threadCenter {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-self: center;
|
|
}
|
|
|
|
.threadRight {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
justify-self: end;
|
|
}
|
|
|
|
/* Buttons and links in footer first row (catalog, thread): same text-link styling */
|
|
.threadRow button,
|
|
.threadRow .button,
|
|
.threadLeft a,
|
|
.footerRow button,
|
|
.footerRow .button,
|
|
.footerLeft a,
|
|
.button {
|
|
all: unset;
|
|
font: inherit;
|
|
text-transform: capitalize;
|
|
color: var(--button-desktop-text-color);
|
|
text-decoration: var(--button-text-decoration);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.threadRow button:hover:not(:disabled),
|
|
.threadRow .button:hover:not(:disabled),
|
|
.threadLeft a:hover,
|
|
.footerRow button:hover:not(:disabled),
|
|
.footerRow .button:hover:not(:disabled),
|
|
.footerLeft a:hover,
|
|
.button:hover:not(:disabled) {
|
|
color: var(--button-desktop-text-color-hover);
|
|
}
|
|
|
|
.threadRow button:disabled,
|
|
.threadRow .button:disabled,
|
|
.footerRow button:disabled,
|
|
.footerRow .button:disabled,
|
|
.button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.footer {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Mobile page footer — hidden on desktop, shown on mobile */
|
|
.mobileFooter {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.mobileFooter {
|
|
display: block;
|
|
text-align: center;
|
|
padding: 0 0 16px;
|
|
}
|
|
}
|
|
|
|
.mobileFooterButtons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 8px;
|
|
}
|
|
|
|
.mobileFooterButtons a:not([class~='button']) {
|
|
all: unset;
|
|
}
|
|
|
|
.mobileFooterButtons input[type='checkbox'] {
|
|
margin: 0 3px 0 0;
|
|
position: relative;
|
|
top: -2px;
|
|
border-radius: 0;
|
|
height: 10px;
|
|
width: 10px;
|
|
}
|
|
|
|
.mobileFooterPagination {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 4px 8px;
|
|
font-size: 16px;
|
|
color: var(--boardsbar-desktop-link-text-color);
|
|
}
|
|
|
|
.mobileFooterPagination a {
|
|
text-decoration: none;
|
|
color: var(--boardsbar-desktop-link-text-color);
|
|
}
|
|
|
|
.mobileFooterPaginationCurrent {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.mobileFooterLinks {
|
|
padding: 12px 8px 4px;
|
|
font-size: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.mobileFooterLinks a {
|
|
color: var(--post-link-text-color);
|
|
text-decoration: var(--boardsbar-desktop-link-text-decoration);
|
|
}
|
|
|
|
.mobileFooterLinks a:hover {
|
|
color: var(--post-link-text-color-hover);
|
|
text-decoration: var(--boardsbar-desktop-link-text-decoration-hover);
|
|
}
|
|
|
|
.mobileFooterStats {
|
|
padding: 4px 8px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
}
|
|
|
|
.threadMobileFooterContent .mobileFooterButtons {
|
|
padding-top: 0;
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
.threadMobileFooterContent .mobileFooterButtons:first-child {
|
|
padding-top: 25px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.threadMobileFooterContent .mobileFooterStats {
|
|
padding-top: 15px;
|
|
}
|