mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
plebeius
fa4ec6da40
- Update excerpt format to show both title and content (title: content) - Add Type and Image columns to compact view (desktop and mobile) - Show parent post above replies in feed view - Add approve/reject buttons to post page for pending posts when user is mod - Translate pending approval string across all languages - Reorder columns: No., Excerpt, Submitted, Type, Image, Actions - Right-align Type and Image columns in desktop view
541 lines
9.7 KiB
CSS
541 lines
9.7 KiB
CSS
.container {
|
|
padding: 10px;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.header {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.title {
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.controls {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.controlsLeft {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.controlsRight {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.alertThresholdSetting {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.alertThresholdSetting label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.alertThresholdInput {
|
|
width: 50px;
|
|
}
|
|
|
|
|
|
|
|
.tableWrapper {
|
|
border: var(--mod-queue-table-border);
|
|
}
|
|
|
|
.tableHeader {
|
|
display: flex;
|
|
gap: 1px;
|
|
font-weight: bold;
|
|
font-size: 9pt;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.numberHeader,
|
|
.excerptHeader,
|
|
.timeHeader,
|
|
.typeHeader,
|
|
.imageHeader,
|
|
.actionsHeader {
|
|
background: var(--mod-queue-header-background-color);
|
|
padding: 5px;
|
|
}
|
|
|
|
.numberHeader {
|
|
min-width: 60px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.excerptHeader {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.typeHeader {
|
|
width: 70px;
|
|
flex-shrink: 0;
|
|
text-align: right;
|
|
}
|
|
|
|
.imageHeader {
|
|
width: 60px;
|
|
flex-shrink: 0;
|
|
text-align: right;
|
|
}
|
|
|
|
.timeHeader {
|
|
width: 210px;
|
|
text-align: right;
|
|
flex-shrink: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.actionsHeader {
|
|
width: 150px;
|
|
flex-shrink: 0;
|
|
text-align: right;
|
|
}
|
|
|
|
.empty {
|
|
padding: 20px;
|
|
text-align: center;
|
|
color: var(--mod-queue-time-color);
|
|
}
|
|
|
|
.footer {
|
|
padding: 10px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.error {
|
|
padding: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ModQueueRow styles */
|
|
.row {
|
|
display: flex;
|
|
border: none;
|
|
align-items: center;
|
|
gap: 1px;
|
|
margin-top: 1px;
|
|
color: var(--body-font-color);
|
|
font-size: 9pt;
|
|
}
|
|
|
|
.number,
|
|
.excerpt,
|
|
.time,
|
|
.type,
|
|
.image,
|
|
.actions {
|
|
padding: 2px 5px;
|
|
}
|
|
|
|
/* Odd rows - standalone class needed for CSS Modules export */
|
|
.rowOdd {}
|
|
|
|
/* Odd rows - theme-specific background colors applied to cells */
|
|
:global(body.yotsuba) .rowOdd .number,
|
|
:global(body.yotsuba) .rowOdd .excerpt,
|
|
:global(body.yotsuba) .rowOdd .time,
|
|
:global(body.yotsuba) .rowOdd .type,
|
|
:global(body.yotsuba) .rowOdd .image,
|
|
:global(body.yotsuba) .rowOdd .actions {
|
|
background-color: #ede2d4;
|
|
}
|
|
|
|
:global(body.yotsuba-b) .rowOdd .number,
|
|
:global(body.yotsuba-b) .rowOdd .excerpt,
|
|
:global(body.yotsuba-b) .rowOdd .time,
|
|
:global(body.yotsuba-b) .rowOdd .type,
|
|
:global(body.yotsuba-b) .rowOdd .image,
|
|
:global(body.yotsuba-b) .rowOdd .actions {
|
|
background-color: #e0e5f6;
|
|
}
|
|
|
|
:global(body.futaba) .rowOdd .number,
|
|
:global(body.futaba) .rowOdd .excerpt,
|
|
:global(body.futaba) .rowOdd .time,
|
|
:global(body.futaba) .rowOdd .type,
|
|
:global(body.futaba) .rowOdd .image,
|
|
:global(body.futaba) .rowOdd .actions {
|
|
background-color: #ede2d4;
|
|
}
|
|
|
|
:global(body.burichan) .rowOdd .number,
|
|
:global(body.burichan) .rowOdd .excerpt,
|
|
:global(body.burichan) .rowOdd .time,
|
|
:global(body.burichan) .rowOdd .type,
|
|
:global(body.burichan) .rowOdd .image,
|
|
:global(body.burichan) .rowOdd .actions {
|
|
background-color: #e0e5f6;
|
|
}
|
|
|
|
:global(body.tomorrow) .rowOdd .number,
|
|
:global(body.tomorrow) .rowOdd .excerpt,
|
|
:global(body.tomorrow) .rowOdd .time,
|
|
:global(body.tomorrow) .rowOdd .type,
|
|
:global(body.tomorrow) .rowOdd .image,
|
|
:global(body.tomorrow) .rowOdd .actions {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
:global(body.photon) .rowOdd .number,
|
|
:global(body.photon) .rowOdd .excerpt,
|
|
:global(body.photon) .rowOdd .time,
|
|
:global(body.photon) .rowOdd .type,
|
|
:global(body.photon) .rowOdd .image,
|
|
:global(body.photon) .rowOdd .actions {
|
|
background-color: #888;
|
|
}
|
|
|
|
.number {
|
|
min-width: 60px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.excerpt {
|
|
flex-grow: 1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
min-width: 0;
|
|
}
|
|
|
|
.type {
|
|
width: 70px;
|
|
flex-shrink: 0;
|
|
text-align: right;
|
|
}
|
|
|
|
.image {
|
|
width: 60px;
|
|
flex-shrink: 0;
|
|
text-align: right;
|
|
}
|
|
|
|
.excerpt a {
|
|
text-decoration: var(--post-link-text-decoration);
|
|
color: var(--post-link-text-color);
|
|
}
|
|
|
|
.excerpt a:hover {
|
|
text-decoration: var(--post-link-text-decoration-hover);
|
|
color: var(--post-link-text-color-hover);
|
|
}
|
|
|
|
.time {
|
|
width: 210px;
|
|
flex-shrink: 0;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.alert {
|
|
color: var(--mod-queue-alert-color);
|
|
font-weight: bold;
|
|
animation: blink 2s infinite;
|
|
}
|
|
|
|
.alertWrapper {
|
|
/* Container for the time ago indicator with parentheses, hidden on mobile */
|
|
}
|
|
|
|
@keyframes blink {
|
|
0% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
.actions {
|
|
width: 150px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
gap: 4px;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
|
|
.actionButtons {
|
|
display: inline;
|
|
}
|
|
|
|
.mobileCard {
|
|
border: var(--mod-queue-table-border);
|
|
background: var(--post-mobile-background-color, transparent);
|
|
padding: 8px;
|
|
margin: 6px 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.cardHeader {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 9pt;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.cardNumber {
|
|
color: var(--body-font-color);
|
|
}
|
|
|
|
.cardTime {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cardContent {
|
|
font-size: 9pt;
|
|
color: var(--body-font-color);
|
|
}
|
|
|
|
.cardContent a {
|
|
text-decoration: var(--post-link-text-decoration);
|
|
color: var(--post-link-text-color);
|
|
}
|
|
|
|
.cardContent a:hover {
|
|
text-decoration: var(--post-link-text-decoration-hover);
|
|
color: var(--post-link-text-color-hover);
|
|
}
|
|
|
|
.cardActions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Desktop: buttons styled as text links (same as board buttons) */
|
|
@media (min-width: 640px) {
|
|
.actions {
|
|
display: block;
|
|
text-align: right;
|
|
}
|
|
|
|
.button {
|
|
all: unset;
|
|
cursor: pointer;
|
|
text-transform: capitalize;
|
|
color: var(--button-desktop-text-color);
|
|
text-decoration: var(--button-text-decoration);
|
|
display: inline;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.button:hover {
|
|
color: var(--button-desktop-text-color-hover);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
/* Status indicators (spans only) - bold, green/red, no underline */
|
|
span.approve {
|
|
color: green;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
}
|
|
|
|
span.approve:hover {
|
|
color: green;
|
|
}
|
|
|
|
span.reject {
|
|
color: red;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
}
|
|
|
|
span.reject:hover {
|
|
color: red;
|
|
}
|
|
|
|
/* ModQueueBoardFilter styles */
|
|
.filterContainer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
|
|
/* ModQueueButton styles */
|
|
.modQueueButtonCount {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Number blinking, changing color to red */
|
|
.modQueueButtonCountAlert {
|
|
animation: blinkColor 2s infinite;
|
|
}
|
|
|
|
@keyframes blinkColor {
|
|
0% {
|
|
color: inherit;
|
|
}
|
|
50% {
|
|
color: var(--mod-queue-alert-color);
|
|
}
|
|
100% {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
/* Mobile Layout - keeps table structure like desktop, just narrower columns */
|
|
@media (max-width: 639px) {
|
|
.container {
|
|
padding: 5px;
|
|
}
|
|
|
|
.header {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.controls {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.tableHeader {
|
|
font-size: 8pt;
|
|
}
|
|
|
|
.numberHeader {
|
|
min-width: 28px;
|
|
}
|
|
|
|
.timeHeader {
|
|
width: 90px;
|
|
}
|
|
|
|
.actionsHeader {
|
|
width: 80px;
|
|
}
|
|
|
|
.row {
|
|
font-size: 8pt;
|
|
}
|
|
|
|
/* Remove background colors for rows on mobile */
|
|
:global(body.yotsuba) .rowOdd .number,
|
|
:global(body.yotsuba) .rowOdd .excerpt,
|
|
:global(body.yotsuba) .rowOdd .time,
|
|
:global(body.yotsuba) .rowOdd .type,
|
|
:global(body.yotsuba) .rowOdd .image,
|
|
:global(body.yotsuba) .rowOdd .actions,
|
|
:global(body.yotsuba-b) .rowOdd .number,
|
|
:global(body.yotsuba-b) .rowOdd .excerpt,
|
|
:global(body.yotsuba-b) .rowOdd .time,
|
|
:global(body.yotsuba-b) .rowOdd .type,
|
|
:global(body.yotsuba-b) .rowOdd .image,
|
|
:global(body.yotsuba-b) .rowOdd .actions,
|
|
:global(body.futaba) .rowOdd .number,
|
|
:global(body.futaba) .rowOdd .excerpt,
|
|
:global(body.futaba) .rowOdd .time,
|
|
:global(body.futaba) .rowOdd .type,
|
|
:global(body.futaba) .rowOdd .image,
|
|
:global(body.futaba) .rowOdd .actions,
|
|
:global(body.burichan) .rowOdd .number,
|
|
:global(body.burichan) .rowOdd .excerpt,
|
|
:global(body.burichan) .rowOdd .time,
|
|
:global(body.burichan) .rowOdd .type,
|
|
:global(body.burichan) .rowOdd .image,
|
|
:global(body.burichan) .rowOdd .actions,
|
|
:global(body.tomorrow) .rowOdd .number,
|
|
:global(body.tomorrow) .rowOdd .excerpt,
|
|
:global(body.tomorrow) .rowOdd .time,
|
|
:global(body.tomorrow) .rowOdd .type,
|
|
:global(body.tomorrow) .rowOdd .image,
|
|
:global(body.tomorrow) .rowOdd .actions,
|
|
:global(body.photon) .rowOdd .number,
|
|
:global(body.photon) .rowOdd .excerpt,
|
|
:global(body.photon) .rowOdd .time,
|
|
:global(body.photon) .rowOdd .type,
|
|
:global(body.photon) .rowOdd .image,
|
|
:global(body.photon) .rowOdd .actions {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.number {
|
|
min-width: 28px;
|
|
}
|
|
|
|
.excerpt {
|
|
white-space: normal;
|
|
overflow: visible;
|
|
text-overflow: clip;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.time {
|
|
width: 90px;
|
|
white-space: normal;
|
|
overflow: visible;
|
|
text-overflow: clip;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
/* Hide the time ago indicator (including parentheses) on mobile to save space */
|
|
.alertWrapper {
|
|
display: none;
|
|
}
|
|
|
|
.actions {
|
|
width: 80px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 2px;
|
|
}
|
|
|
|
.actionButtons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 2px;
|
|
}
|
|
|
|
.buttonWrapper {
|
|
display: inline;
|
|
}
|
|
|
|
/* Keep desktop-style text buttons on mobile */
|
|
.button {
|
|
all: unset;
|
|
cursor: pointer;
|
|
text-transform: capitalize;
|
|
color: var(--button-desktop-text-color);
|
|
text-decoration: var(--button-text-decoration);
|
|
display: inline;
|
|
font-family: inherit;
|
|
font-size: 8pt;
|
|
}
|
|
|
|
.button:hover {
|
|
color: var(--button-desktop-text-color-hover);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|