mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
473 lines
9.3 KiB
CSS
473 lines
9.3 KiB
CSS
.thread {
|
|
clear: both;
|
|
}
|
|
|
|
.hrWrapper hr {
|
|
margin: 0; /* margin bugs Virtuoso scrolling */
|
|
}
|
|
|
|
.postDesktop .hrWrapper {
|
|
padding: 0.5em 0; /* instead of using margin, wrap with padding */
|
|
}
|
|
|
|
.hideButtonWrapper {
|
|
height: 15px;
|
|
width: 18px;
|
|
padding-right: 5px;
|
|
float: left;
|
|
}
|
|
|
|
.postDesktop .hideButton {
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
display: inline-block;
|
|
image-rendering: pixelated;
|
|
cursor: pointer;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.postDesktopBlocked {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* clearfix to contain float elements */
|
|
.postDesktop::after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
.postDesktop .hideThread {
|
|
background-image: var(--post-hide-button-background-image);
|
|
}
|
|
|
|
.postDesktop .unhideThread {
|
|
background-image: var(--post-unhide-button-background-image);
|
|
}
|
|
|
|
.postDesktop .fileText a {
|
|
color: var(--post-link-text-color);
|
|
text-decoration: var(--post-link-text-decoration);
|
|
}
|
|
|
|
.postDesktop .fileText a:hover {
|
|
color: var(--post-link-text-color-hover);
|
|
text-decoration: var(--post-link-text-decoration-hover);
|
|
}
|
|
|
|
.postDesktop .postInfo {
|
|
width: 100%;
|
|
}
|
|
|
|
.postDesktop .subject {
|
|
color: var(--post-subject-text-color);
|
|
font-weight: var(--post-subject-font-weight);
|
|
}
|
|
|
|
.postDesktop .name, .replyDesktop .name {
|
|
color: var(--post-name-text-color);
|
|
font-weight: var(--post-name-font-weight);
|
|
}
|
|
|
|
.postDesktop .postNumLink a, .postDesktop .postNumLink span, .replyDesktop .postNumLink a, .replyDesktop .postNumLink span {
|
|
color: unset;
|
|
text-decoration: unset;
|
|
}
|
|
|
|
.postDesktop .postNumLink a:hover, .postDesktop .postNumLink span:hover, .replyDesktop .postNumLink a:hover, .replyDesktop .postNumLink span:hover {
|
|
color: var(--button-desktop-text-color-hover);
|
|
}
|
|
|
|
.postDesktop .stickyIconWrapper, .replyDesktop .stickyIconWrapper {
|
|
padding-left: 5px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.postDesktop .closedIconWrapper {
|
|
padding-left: 5px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.postDesktop .addPaddingInBetween {
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.stickyIconWrapper img, .closedIconWrapper img {
|
|
position: absolute;
|
|
width: 16px;
|
|
height: 16px;
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
.postDesktop .addPaddingBeforeReply {
|
|
padding-right: 15px;
|
|
}
|
|
|
|
.postDesktop .closeMedia {
|
|
color: var(--button-desktop-text-color);
|
|
text-decoration: underline;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.postDesktop .closeMedia:hover {
|
|
cursor: pointer;
|
|
color: var(--button-desktop-text-color-hover);
|
|
}
|
|
|
|
.postDesktop .replyButton {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.postDesktop .replyButton a {
|
|
color: var(--button-desktop-text-color);
|
|
text-decoration: var(--button-desktop-text-decoration);
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.postDesktop .replyButton a:hover {
|
|
cursor: pointer;
|
|
color: var(--button-desktop-text-color-hover);
|
|
}
|
|
|
|
.postDesktop .spacer {
|
|
width: 100%;
|
|
padding: 5px;
|
|
}
|
|
|
|
.postDesktop .postMessage, .replyDesktop .postMessage {
|
|
padding: 1em 40px;
|
|
}
|
|
|
|
.postDesktop .abbr {
|
|
color: var(--post-mobile-abbr-text-color);
|
|
font-size: var(--post-mobile-abbr-font-size);
|
|
}
|
|
|
|
.postDesktop .abbr a {
|
|
color: var(--post-link-text-color);
|
|
text-decoration: var(--post-content-link-text-decoration);
|
|
}
|
|
|
|
.postDesktop .abbr a:hover {
|
|
color: var(--post-link-text-color-hover);
|
|
text-decoration: var(--post-content-link-text-decoration-hover);
|
|
}
|
|
|
|
.postDesktop .summary {
|
|
padding-top: 10px;
|
|
padding-left: 23px;
|
|
position: relative;
|
|
color: var(--post-mobile-abbr-text-color);
|
|
}
|
|
|
|
.stateString {
|
|
color: var(--post-mobile-abbr-text-color);
|
|
}
|
|
|
|
.postDesktop .summary .expandButtonWrapper {
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 2px;
|
|
}
|
|
|
|
.postDesktop .summary .expandButton {
|
|
background-image: var(--post-replies-expand-button-background-image);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
display: inline-block;
|
|
image-rendering: pixelated;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.postDesktop .summary a {
|
|
color: var(--post-link-text-color);
|
|
text-decoration: var(--post-content-link-text-decoration);
|
|
}
|
|
|
|
.postDesktop .summary a:hover {
|
|
color: var(--post-link-text-color-hover);
|
|
text-decoration: var(--post-content-link-text-decoration-hover);
|
|
}
|
|
|
|
/* clearfix to contain float elements */
|
|
.postMobile .postOp::after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
.postMobile hr {
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
.postMobile .thread {
|
|
border-top: none;
|
|
margin: 0;
|
|
clear: both;
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
.quotePreview {
|
|
padding: 3px;
|
|
}
|
|
|
|
.postMobile .postContainer {
|
|
background-color: var(--post-mobile-background-color);
|
|
}
|
|
|
|
.postMobile .postOp {
|
|
display: inline;
|
|
}
|
|
|
|
.postMobile .postInfo {
|
|
overflow: hidden;
|
|
border-bottom: var(--post-mobile-info-border-bottom);
|
|
border-top: var(--post-mobile-info-border-top);
|
|
background-color: var(--post-mobile-info-background-color);
|
|
color: var(--post-mobile-info-text-color);
|
|
padding: 5px;
|
|
clear: left;
|
|
}
|
|
|
|
.postMobile .nameBlock {
|
|
clear: none;
|
|
}
|
|
|
|
.postMobile .nameBlock .name {
|
|
color: var(--post-mobile-name-text-color);
|
|
font-weight: var(--post-mobile-name-font-weight);
|
|
}
|
|
|
|
.postMobile .stickyIconWrapper {
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.postMobile .closedIconWrapper {
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.postMobile .addPaddingInBetween {
|
|
padding: 0 13px;
|
|
}
|
|
|
|
.postMobile .nameBlock .subject {
|
|
color: var(--post-mobile-subject-text-color);
|
|
font-weight: var(--post-mobile-subject-font-weight);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: block;
|
|
}
|
|
|
|
.postMobile .dateTimePostNum {
|
|
display: block;
|
|
text-align: right;
|
|
}
|
|
|
|
.postMobile .postNumLink a {
|
|
color: unset;
|
|
text-decoration: unset;
|
|
}
|
|
|
|
.postMobile .postMessage {
|
|
padding: 10px;
|
|
font-size: var(--post-mobile-content-font-size);
|
|
}
|
|
|
|
.postMobile .postLink {
|
|
clear: both;
|
|
background-color: var(--post-mobile-link-background-color);
|
|
border-top: var(--post-mobile-link-border-top);
|
|
border-bottom: var(--post-mobile-link-border-bottom);
|
|
padding: 5px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.postMobile .postLink .info {
|
|
color: var(--post-mobile-link-info-text-color);
|
|
}
|
|
|
|
.postMobile .abbr {
|
|
color: var(--post-mobile-abbr-text-color);
|
|
font-size: var(--post-mobile-abbr-font-size);
|
|
}
|
|
|
|
.postMobile .abbr a {
|
|
color: var(--post-link-text-color);
|
|
text-decoration: var(--post-content-link-text-decoration);
|
|
|
|
}
|
|
|
|
.postMobile .abbr a:hover {
|
|
color: var(--post-link-text-color-hover);
|
|
text-decoration: var(--post-content-link-text-decoration-hover);
|
|
}
|
|
|
|
.replyDesktop {
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.replyDesktop .sideArrows {
|
|
color: var(--side-arrows-color);
|
|
float: left;
|
|
padding: 0 2px;
|
|
}
|
|
|
|
.replyDesktop .reply {
|
|
background-color: var(--reply-desktop-background-color);
|
|
border: var(--reply-desktop-border);
|
|
border-left: none;
|
|
border-top: none;
|
|
display: table;
|
|
padding: 0 2px 2px 2px;
|
|
}
|
|
|
|
.replyDesktop .postInfo {
|
|
padding: 3px 3px 0 0;
|
|
}
|
|
|
|
.quoteLink {
|
|
color: var(--post-quotelink-text-color);
|
|
text-decoration: var(--post-quotelink-text-decoration);
|
|
}
|
|
|
|
.quoteLink:hover {
|
|
color: var(--post-quotelink-text-color-hover);
|
|
text-decoration: var(--post-quotelink-text-decoration-hover);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.replyMobile {
|
|
padding-top: 7px;
|
|
}
|
|
|
|
.replyMobile .replyContainer {
|
|
background-color: var(--post-mobile-background-color);
|
|
border-bottom: var(--post-mobile-border-bottom);
|
|
}
|
|
|
|
/* clearfix to contain float elements */
|
|
.replyMobile .replyContainer::after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
.replyMobile .postInfo {
|
|
padding: 5px;
|
|
border-top: var(--post-mobile-info-border-top);
|
|
border-bottom: var(--post-mobile-info-border-bottom);
|
|
background-color: var(--post-mobile-info-background-color);
|
|
color: var(--post-mobile-info-text-color);
|
|
}
|
|
|
|
.replyMobile .nameBlock {
|
|
display: inline;
|
|
float: left;
|
|
}
|
|
|
|
.replyMobile .dateTimePostNum {
|
|
float: right;
|
|
text-align: right;
|
|
}
|
|
|
|
.capcodeMod {
|
|
color: var(--post-capcode-mod-text-color) !important;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.pendingCid {
|
|
color: red !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
.replyToPost {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.removedContent, .deletedContent {
|
|
font-weight: 700;
|
|
color: red;
|
|
}
|
|
|
|
.removedContent {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.backlink, .backlinkHash {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.backlink {
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.backlink, .backlinkHash {
|
|
color: var(--post-backlink-text-color);
|
|
text-decoration: var(--post-backlink-text-decoration);
|
|
}
|
|
|
|
.backlink:hover, .backlinkHash:hover {
|
|
color: var(--post-backlink-text-color-hover);
|
|
text-decoration: var(--post-backlink-text-decoration-hover);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mobileReplyBacklinks {
|
|
padding: 0 0;
|
|
padding-bottom: 3px;
|
|
line-height: 2;
|
|
background-color: var(--reply-backlink-mobile-background-color);
|
|
border-top: var(--reply-backlink-mobile-border-top);
|
|
}
|
|
|
|
.highlight {
|
|
background: var(--reply-highlight-background-color) !important;
|
|
}
|
|
|
|
.replyQuotePreview {
|
|
background: var(--quote-preview-background);
|
|
border: var(--quote-preview-border);
|
|
border-right: var(--quote-preview-border-right);
|
|
border-bottom: var(--quote-preview-border-bottom);
|
|
}
|
|
|
|
.postDesktop .replyQuotePreviewSpacer {
|
|
padding: 1.5px 0;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.replyQuotePreview {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.postDesktop {
|
|
display: none;
|
|
}
|
|
|
|
.replyDesktop {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.replyQuotePreview {
|
|
padding-right: 7px;
|
|
padding-left: 2px;
|
|
}
|
|
|
|
.postMobile {
|
|
display: none;
|
|
}
|
|
|
|
.replyMobile {
|
|
display: none;
|
|
}
|
|
} |