mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
704 lines
13 KiB
CSS
704 lines
13 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);
|
|
}
|
|
|
|
.emptyTableRow {
|
|
margin-top: 1px;
|
|
background: var(--mod-queue-row-background-color);
|
|
border-bottom: var(--mod-queue-row-border-bottom);
|
|
}
|
|
|
|
.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 .board,
|
|
: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 .board,
|
|
: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 .board,
|
|
: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 .board,
|
|
: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 .board,
|
|
: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.spooky) .rowOdd .number,
|
|
:global(body.spooky) .rowOdd .board,
|
|
:global(body.spooky) .rowOdd .excerpt,
|
|
:global(body.spooky) .rowOdd .time,
|
|
:global(body.spooky) .rowOdd .type,
|
|
:global(body.spooky) .rowOdd .image,
|
|
:global(body.spooky) .rowOdd .actions {
|
|
background-color: #1b1024;
|
|
}
|
|
|
|
:global(body.photon) .rowOdd .number,
|
|
:global(body.photon) .rowOdd .board,
|
|
: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;
|
|
align-items: baseline;
|
|
font-size: 9pt;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.cardHeaderLeft {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.cardNumber {
|
|
color: var(--body-font-color);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.cardBoardSeparator {
|
|
color: var(--body-font-color);
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.cardTime {
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Mobile compact view: match feed view approve/reject button styling */
|
|
.cardApproveButton {
|
|
background-color: #3fa96b;
|
|
color: #fff;
|
|
}
|
|
|
|
.cardRejectButton {
|
|
background-color: #d9534f;
|
|
color: #fff;
|
|
}
|
|
|
|
.cardRemoveButtonWrapper {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.cardRemoveButton {
|
|
all: unset;
|
|
cursor: pointer;
|
|
text-transform: capitalize;
|
|
color: var(--button-desktop-text-color);
|
|
text-decoration: var(--button-text-decoration);
|
|
display: inline;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.cardRemoveButton:hover {
|
|
color: var(--button-desktop-text-color-hover);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cardRemoveButton:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* ModQueueBoardSummary styles - match boardsbar "/ dir / dir / dir /" format */
|
|
.boardSummary {
|
|
font-size: var(--boardsbar-font-size);
|
|
color: var(--boardsbar-separator-color);
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.boardSummary {
|
|
font-size: var(--body-font-size);
|
|
}
|
|
|
|
.boardSummary .boardSummaryLink {
|
|
padding: 0 0.12em;
|
|
}
|
|
}
|
|
|
|
.boardSummaryLink {
|
|
all: unset;
|
|
cursor: pointer;
|
|
color: var(--boardsbar-desktop-link-text-color);
|
|
text-decoration: var(--boardsbar-desktop-link-text-decoration);
|
|
}
|
|
|
|
.boardSummaryLink:hover {
|
|
color: var(--boardsbar-desktop-link-text-color-hover);
|
|
text-decoration: var(--boardsbar-desktop-link-text-decoration-hover);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.boardSummaryLinkSelected {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Board column in table */
|
|
.boardHeader {
|
|
width: 80px;
|
|
min-width: 80px;
|
|
flex-shrink: 0;
|
|
background: var(--mod-queue-header-background-color);
|
|
padding: 5px;
|
|
}
|
|
|
|
.board {
|
|
width: 80px;
|
|
min-width: 80px;
|
|
flex-shrink: 0;
|
|
padding: 2px 5px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.board a {
|
|
text-decoration: var(--post-link-text-decoration);
|
|
color: var(--post-link-text-color);
|
|
}
|
|
|
|
.board a:hover {
|
|
text-decoration: var(--post-link-text-decoration-hover);
|
|
color: var(--post-link-text-color-hover);
|
|
}
|
|
|
|
.cardBoard {
|
|
font-size: 8pt;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.cardBoard a {
|
|
text-decoration: var(--post-link-text-decoration);
|
|
color: var(--post-link-text-color);
|
|
}
|
|
|
|
.cardBoard a:hover {
|
|
text-decoration: var(--post-link-text-decoration-hover);
|
|
color: var(--post-link-text-color-hover);
|
|
}
|
|
|
|
/* ModQueueBoardFilter styles (legacy, kept for reference) */
|
|
.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 .board,
|
|
: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 .board,
|
|
: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 .board,
|
|
: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 .board,
|
|
: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 .board,
|
|
: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.spooky) .rowOdd .number,
|
|
:global(body.spooky) .rowOdd .board,
|
|
:global(body.spooky) .rowOdd .excerpt,
|
|
:global(body.spooky) .rowOdd .time,
|
|
:global(body.spooky) .rowOdd .type,
|
|
:global(body.spooky) .rowOdd .image,
|
|
:global(body.spooky) .rowOdd .actions,
|
|
:global(body.photon) .rowOdd .number,
|
|
:global(body.photon) .rowOdd .board,
|
|
: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: var(--button-font-size-mobile);
|
|
}
|
|
|
|
.button:hover {
|
|
color: var(--button-desktop-text-color-hover);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|