:root { --cma-reddit-accent: #ff4500;
--cma-reddit-accent-hover: #ff5722;
--cma-reddit-upvote: #ff4500;
--cma-reddit-downvote: #7193ff;
--cma-reddit-gold: #ffd700;
--cma-reddit-silver: #c0c0c0;
--cma-reddit-platinum: #e5e4e2; --cma-bg-primary: #dae0e6;
--cma-bg-secondary: #ffffff;
--cma-bg-tertiary: #f6f7f8;
--cma-text-primary: #1c1c1c;
--cma-text-secondary: #787c7e;
--cma-text-muted: #a5a5a5;
--cma-border-color: #ccc;
--cma-border-light: #edeff1;
--cma-link-color: #0079d3;
--cma-card-shadow: 0 1px 3px rgba(0,0,0,0.1);
--cma-card-shadow-hover: 0 4px 12px rgba(0,0,0,0.15); --cma-spacing-xs: 4px;
--cma-spacing-sm: 8px;
--cma-spacing-md: 12px;
--cma-spacing-lg: 16px;
--cma-spacing-xl: 24px; --cma-radius-sm: 4px;
--cma-radius-md: 8px;
--cma-radius-lg: 12px; --cma-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--cma-font-size-xs: 10px;
--cma-font-size-sm: 12px;
--cma-font-size-md: 14px;
--cma-font-size-lg: 16px;
--cma-font-size-xl: 18px;
--cma-font-size-xxl: 24px;
} .cma-reddit-theme .cma-content {
background: var(--cma-bg-primary);
padding: var(--cma-spacing-xl);
font-family: var(--cma-font-family);
min-height: 100vh;
}
.cma-reddit-theme .cma-content * {
box-sizing: border-box;
}
.cma-reddit-theme .cma-main {
max-width: 1200px;
margin: 0 auto;
display: flex;
gap: var(--cma-spacing-xl);
}
.cma-reddit-theme .cma-wrapper {
flex: 1;
min-width: 0;
} .cma-reddit-theme .entry-header {
background: var(--cma-bg-secondary);
border-radius: var(--cma-radius-md);
padding: var(--cma-spacing-lg);
margin-bottom: var(--cma-spacing-lg);
border: 1px solid var(--cma-border-light);
}
.cma-reddit-theme .entry-title {
font-size: var(--cma-font-size-xxl);
font-weight: 700;
color: var(--cma-text-primary);
margin: 0;
display: flex;
align-items: center;
gap: var(--cma-spacing-md);
}
.cma-reddit-theme .entry-title::before {
content: '';
display: inline-block;
width: 24px;
height: 24px;
background: var(--cma-reddit-accent);
border-radius: 50%;
flex-shrink: 0;
}
.cma-reddit-theme .cma-backlink {
font-size: var(--cma-font-size-sm);
font-weight: 400;
color: var(--cma-link-color);
margin-left: auto;
text-decoration: none;
}
.cma-reddit-theme .cma-backlink:hover {
text-decoration: underline;
} .cma-reddit-theme .cma-thread-orderby,
.cma-reddit-theme .cma-answers-orderby {
display: flex;
list-style: none;
padding: 0;
margin: 0 0 var(--cma-spacing-lg) 0;
background: var(--cma-bg-secondary);
border-radius: var(--cma-radius-md);
border: 1px solid var(--cma-border-light);
overflow: hidden;
}
.cma-reddit-theme .cma-thread-orderby li,
.cma-reddit-theme .cma-answers-orderby li {
margin: 0;
}
.cma-reddit-theme .cma-thread-orderby li a,
.cma-reddit-theme .cma-answers-orderby li a {
display: flex;
align-items: center;
gap: var(--cma-spacing-sm);
padding: var(--cma-spacing-md) var(--cma-spacing-lg);
color: var(--cma-text-secondary);
text-decoration: none;
font-size: var(--cma-font-size-md);
font-weight: 700;
text-transform: capitalize;
border-radius: var(--cma-radius-lg);
margin: var(--cma-spacing-xs);
transition: all 0.2s ease;
}
.cma-reddit-theme .cma-thread-orderby li a:hover,
.cma-reddit-theme .cma-answers-orderby li a:hover {
background: var(--cma-bg-tertiary);
color: var(--cma-text-primary);
}
.cma-reddit-theme .cma-thread-orderby li.cma-current-sort a,
.cma-reddit-theme .cma-answers-orderby li.cma-current-sort a {
background: var(--cma-bg-tertiary);
color: var(--cma-text-primary);
} .cma-reddit-theme .cma-thread-orderby li a::before,
.cma-reddit-theme .cma-answers-orderby li a::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
opacity: 0.7;
} .cma-reddit-theme .cma-thread-list {
border-collapse: separate;
border-spacing: 0 var(--cma-spacing-md);
width: 100%;
}
.cma-reddit-theme .cma-thread-list tr {
background: var(--cma-bg-secondary);
border-radius: var(--cma-radius-md);
box-shadow: var(--cma-card-shadow);
transition: all 0.2s ease;
display: flex;
align-items: stretch;
overflow: hidden;
border: 1px solid var(--cma-border-light);
}
.cma-reddit-theme .cma-thread-list tr:hover {
box-shadow: var(--cma-card-shadow-hover);
border-color: var(--cma-border-color);
} .cma-reddit-theme .cma-thread-list .cma-thread-meta {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--cma-spacing-md);
background: var(--cma-bg-tertiary);
min-width: 60px;
border-right: 1px solid var(--cma-border-light);
}
.cma-reddit-theme .cma-thread-numbers {
text-align: center;
}
.cma-reddit-theme .cma-thread-numbers-count {
font-size: var(--cma-font-size-lg);
font-weight: 700;
color: var(--cma-text-primary);
line-height: 1.2;
}
.cma-reddit-theme .cma-thread-numbers-caption {
font-size: var(--cma-font-size-xs);
color: var(--cma-text-muted);
text-transform: lowercase;
} .cma-reddit-theme .cma-thread-list .cma-thread-summary {
flex: 1;
padding: var(--cma-spacing-md) var(--cma-spacing-lg);
display: flex;
flex-direction: column;
justify-content: center;
}
.cma-reddit-theme .cma-thread-title {
margin-bottom: var(--cma-spacing-xs);
}
.cma-reddit-theme .cma-thread-title a {
font-size: var(--cma-font-size-lg);
font-weight: 600;
color: var(--cma-text-primary);
text-decoration: none;
line-height: 1.4;
display: block;
}
.cma-reddit-theme .cma-thread-title a:hover {
color: var(--cma-link-color);
}
.cma-reddit-theme .cma-thread-updated {
font-size: var(--cma-font-size-sm);
color: var(--cma-text-secondary);
display: flex;
align-items: center;
gap: var(--cma-spacing-sm);
}
.cma-reddit-theme .cma-thread-updated::before {
content: '•';
color: var(--cma-text-muted);
}
.cma-reddit-theme .cma-thread-content {
font-size: var(--cma-font-size-md);
color: var(--cma-text-secondary);
margin-top: var(--cma-spacing-sm);
line-height: 1.5;
max-height: 60px;
overflow: hidden;
text-overflow: ellipsis;
} .cma-reddit-theme .cma-question-table {
width: 100%;
background: var(--cma-bg-secondary);
border-radius: var(--cma-radius-md);
border: 1px solid var(--cma-border-light);
margin-bottom: var(--cma-spacing-lg);
overflow: hidden;
}
.cma-reddit-theme .cma-question-content {
padding: var(--cma-spacing-lg);
}
.cma-reddit-theme .cma-question-body {
font-size: var(--cma-font-size-md);
line-height: 1.6;
color: var(--cma-text-primary);
margin-bottom: var(--cma-spacing-lg);
}
.cma-reddit-theme .cma-question-meta {
display: flex;
align-items: center;
gap: var(--cma-spacing-lg);
padding-top: var(--cma-spacing-md);
border-top: 1px solid var(--cma-border-light);
font-size: var(--cma-font-size-sm);
color: var(--cma-text-secondary);
}
.cma-reddit-theme .cma-question-author,
.cma-reddit-theme .cma-question-date {
display: flex;
align-items: center;
gap: var(--cma-spacing-sm);
}
.cma-reddit-theme .cma-question-author img {
border-radius: 50%;
width: 24px;
height: 24px;
} .cma-reddit-theme .cma-answers-list {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin-bottom: var(--cma-spacing-md);
}
.cma-reddit-theme .cma-answers-list tr {
background: var(--cma-bg-secondary);
display: flex;
border-radius: var(--cma-radius-md);
border: 1px solid var(--cma-border-light);
overflow: hidden;
transition: all 0.2s ease;
}
.cma-reddit-theme .cma-answers-list tr:hover {
border-color: var(--cma-border-color);
} .cma-reddit-theme .cma-answer-rating {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--cma-spacing-md);
background: var(--cma-bg-tertiary);
min-width: 50px;
gap: 2px;
}
.cma-reddit-theme .cma-thumbs-up,
.cma-reddit-theme .cma-thumbs-down {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--cma-radius-sm);
text-decoration: none;
font-size: 16px;
transition: all 0.15s ease;
color: var(--cma-text-muted);
background: transparent;
}
.cma-reddit-theme .cma-thumbs-up:hover {
background: rgba(255, 69, 0, 0.1);
color: var(--cma-reddit-upvote);
transform: scale(1.1);
}
.cma-reddit-theme .cma-thumbs-down:hover {
background: rgba(113, 147, 255, 0.1);
color: var(--cma-reddit-downvote);
transform: scale(1.1);
}
.cma-reddit-theme .cma-thumbs-up.voted {
color: var(--cma-reddit-upvote);
}
.cma-reddit-theme .cma-thumbs-down.voted {
color: var(--cma-reddit-downvote);
}
.cma-reddit-theme .cma-answer-rating-count {
font-size: var(--cma-font-size-sm);
font-weight: 700;
color: var(--cma-text-primary);
padding: 2px 0;
min-width: 24px;
text-align: center;
}
.cma-reddit-theme .cma-answer-rating-loading {
display: none;
width: 16px;
height: 16px;
border: 2px solid var(--cma-border-light);
border-top-color: var(--cma-reddit-accent);
border-radius: 50%;
animation: cma-spin 0.8s linear infinite;
}
@keyframes cma-spin {
to { transform: rotate(360deg); }
} .cma-reddit-theme .cma-answer-content {
flex: 1;
padding: var(--cma-spacing-lg);
display: flex;
flex-direction: column;
}
.cma-reddit-theme .cma-answer-body {
font-size: var(--cma-font-size-md);
line-height: 1.6;
color: var(--cma-text-primary);
flex: 1;
}
.cma-reddit-theme .cma-answer-body p {
margin: 0 0 var(--cma-spacing-md) 0;
}
.cma-reddit-theme .cma-answer-body p:last-child {
margin-bottom: 0;
} .cma-reddit-theme .cma-answer-meta {
display: flex;
align-items: center;
gap: var(--cma-spacing-lg);
margin-top: var(--cma-spacing-md);
padding-top: var(--cma-spacing-md);
border-top: 1px solid var(--cma-border-light);
font-size: var(--cma-font-size-sm);
color: var(--cma-text-secondary);
}
.cma-reddit-theme .cma-answer-author,
.cma-reddit-theme .cma-answer-date {
display: flex;
align-items: center;
gap: var(--cma-spacing-sm);
}
.cma-reddit-theme .cma-answer-author img {
border-radius: 50%;
width: 20px;
height: 20px;
} .cma-reddit-theme .cma-award-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 6px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
}
.cma-reddit-theme .cma-award-gold {
background: rgba(255, 215, 0, 0.2);
color: #b8860b;
}
.cma-reddit-theme .cma-award-silver {
background: rgba(192, 192, 192, 0.2);
color: #808080;
} .cma-reddit-theme .cma-form-container {
background: var(--cma-bg-secondary);
border-radius: var(--cma-radius-md);
border: 1px solid var(--cma-border-light);
padding: var(--cma-spacing-lg);
margin-top: var(--cma-spacing-lg);
}
.cma-reddit-theme .cma-form-container h3 {
font-size: var(--cma-font-size-lg);
font-weight: 600;
color: var(--cma-text-primary);
margin: 0 0 var(--cma-spacing-lg) 0;
padding-bottom: var(--cma-spacing-md);
border-bottom: 1px solid var(--cma-border-light);
}
.cma-reddit-theme .cma-thread-add input[type="text"],
.cma-reddit-theme .cma-thread-add textarea,
.cma-reddit-theme .cma-form-container input[type="text"],
.cma-reddit-theme .cma-form-container textarea {
width: 100%;
padding: var(--cma-spacing-md);
border: 1px solid var(--cma-border-color);
border-radius: var(--cma-radius-sm);
font-family: var(--cma-font-family);
font-size: var(--cma-font-size-md);
background: var(--cma-bg-tertiary);
color: var(--cma-text-primary);
transition: all 0.2s ease;
margin-bottom: var(--cma-spacing-md);
}
.cma-reddit-theme .cma-thread-add input[type="text"]:focus,
.cma-reddit-theme .cma-thread-add textarea:focus,
.cma-reddit-theme .cma-form-container input[type="text"]:focus,
.cma-reddit-theme .cma-form-container textarea:focus {
outline: none;
border-color: var(--cma-reddit-accent);
background: var(--cma-bg-secondary);
box-shadow: 0 0 0 2px rgba(255, 69, 0, 0.1);
}
.cma-reddit-theme .cma-thread-add textarea,
.cma-reddit-theme .cma-form-container textarea {
min-height: 120px;
resize: vertical;
}
.cma-reddit-theme .cma-thread-add input[type="submit"],
.cma-reddit-theme .cma-form-container input[type="submit"] {
background: var(--cma-reddit-accent);
color: white;
border: none;
padding: var(--cma-spacing-md) var(--cma-spacing-xl);
border-radius: 9999px;
font-size: var(--cma-font-size-md);
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
}
.cma-reddit-theme .cma-thread-add input[type="submit"]:hover,
.cma-reddit-theme .cma-form-container input[type="submit"]:hover {
background: var(--cma-reddit-accent-hover);
transform: translateY(-1px);
} .cma-reddit-theme .cma-thread-add label,
.cma-reddit-theme .cma-form-container label {
display: flex;
align-items: center;
gap: var(--cma-spacing-sm);
font-size: var(--cma-font-size-md);
color: var(--cma-text-secondary);
cursor: pointer;
}
.cma-reddit-theme .cma-thread-add input[type="checkbox"],
.cma-reddit-theme .cma-form-container input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--cma-reddit-accent);
} .cma-reddit-theme .cma-form-notes {
background: var(--cma-bg-tertiary);
border-radius: var(--cma-radius-sm);
padding: var(--cma-spacing-md);
margin-bottom: var(--cma-spacing-md);
list-style: none;
font-size: var(--cma-font-size-sm);
color: var(--cma-text-muted);
}
.cma-reddit-theme .cma-form-notes li {
margin: var(--cma-spacing-xs) 0;
} .cma-reddit-theme .cma-pagination {
display: flex;
justify-content: center;
gap: var(--cma-spacing-sm);
padding: var(--cma-spacing-lg);
background: var(--cma-bg-secondary);
border-radius: var(--cma-radius-md);
border: 1px solid var(--cma-border-light);
margin-top: var(--cma-spacing-lg);
}
.cma-reddit-theme .cma-pagination a,
.cma-reddit-theme .cma-pagination span {
display: flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 var(--cma-spacing-md);
border-radius: var(--cma-radius-sm);
font-size: var(--cma-font-size-md);
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
}
.cma-reddit-theme .cma-pagination a {
background: var(--cma-bg-tertiary);
color: var(--cma-text-secondary);
}
.cma-reddit-theme .cma-pagination a:hover {
background: var(--cma-border-color);
color: var(--cma-text-primary);
}
.cma-reddit-theme .cma-pagination span.current {
background: var(--cma-reddit-accent);
color: white;
} .cma-reddit-theme .cma-sidebar {
width: 312px;
flex-shrink: 0;
}
.cma-reddit-theme .cma-sidebar .widget {
background: var(--cma-bg-secondary);
border-radius: var(--cma-radius-md);
border: 1px solid var(--cma-border-light);
padding: var(--cma-spacing-lg);
margin-bottom: var(--cma-spacing-lg);
}
.cma-reddit-theme .cma-sidebar .widget-title {
font-size: var(--cma-font-size-md);
font-weight: 700;
color: var(--cma-text-primary);
margin: 0 0 var(--cma-spacing-md) 0;
padding-bottom: var(--cma-spacing-md);
border-bottom: 1px solid var(--cma-border-light);
} .cma-reddit-dark-toggle {
position: fixed;
bottom: 24px;
right: 24px;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--cma-bg-secondary);
border: 1px solid var(--cma-border-color);
box-shadow: var(--cma-card-shadow);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 9999;
transition: all 0.3s ease;
}
.cma-reddit-dark-toggle:hover {
transform: scale(1.1);
box-shadow: var(--cma-card-shadow-hover);
}
.cma-reddit-dark-toggle svg {
color: var(--cma-text-primary);
transition: all 0.3s ease;
}
.cma-reddit-dark-toggle .moon-icon {
display: none;
} .cma-reddit-compact .cma-thread-list tr {
padding: var(--cma-spacing-sm);
}
.cma-reddit-compact .cma-thread-title a {
font-size: var(--cma-font-size-md);
}
.cma-reddit-compact .cma-answer-content {
padding: var(--cma-spacing-md);
} @media (max-width: 1024px) {
.cma-reddit-theme .cma-main {
flex-direction: column;
}
.cma-reddit-theme .cma-sidebar {
width: 100%;
}
}
@media (max-width: 768px) {
.cma-reddit-theme .cma-content {
padding: var(--cma-spacing-md);
}
.cma-reddit-theme .cma-thread-list tr {
flex-wrap: wrap;
}
.cma-reddit-theme .cma-thread-list .cma-thread-meta {
flex-direction: row;
width: 100%;
justify-content: flex-start;
gap: var(--cma-spacing-lg);
border-right: none;
border-bottom: 1px solid var(--cma-border-light);
}
.cma-reddit-theme .cma-thread-list .cma-thread-summary {
width: 100%;
}
.cma-reddit-theme .cma-thread-orderby {
flex-wrap: wrap;
}
.cma-reddit-theme .cma-question-meta,
.cma-reddit-theme .cma-answer-meta {
flex-direction: column;
align-items: flex-start;
gap: var(--cma-spacing-sm);
}
}
@media (max-width: 480px) {
.cma-reddit-theme .entry-title {
font-size: var(--cma-font-size-xl);
}
.cma-reddit-theme .cma-thread-title a {
font-size: var(--cma-font-size-md);
}
.cma-reddit-theme .cma-answer-rating {
min-width: 40px;
padding: var(--cma-spacing-sm);
}
} .cma-reddit-theme .cma-thread-list tr {
animation: fadeInUp 0.3s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .cma-vote-animate {
animation: votePopup 0.3s ease;
}
@keyframes votePopup {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
} .cma-reddit-theme .cma-clear {
clear: both;
}
.cma-reddit-theme .cma-hidden {
display: none !important;
}body.cma-dark-mode { --cma-bg-primary: #030303;
--cma-bg-secondary: #1a1a1b;
--cma-bg-tertiary: #272729;
--cma-text-primary: #d7dadc;
--cma-text-secondary: #818384;
--cma-text-muted: #6a6a6b;
--cma-border-color: #474748;
--cma-border-light: #343536;
--cma-link-color: #4fbcff;
--cma-card-shadow: 0 2px 4px rgba(0,0,0,0.4);
--cma-card-shadow-hover: 0 4px 12px rgba(0,0,0,0.6);
} body.cma-dark-mode .cma-reddit-theme .cma-content {
background: var(--cma-bg-primary);
}
body.cma-dark-mode .cma-reddit-dark-toggle {
background: var(--cma-bg-tertiary);
border-color: var(--cma-border-color);
}
body.cma-dark-mode .cma-reddit-dark-toggle .sun-icon {
display: none;
}
body.cma-dark-mode .cma-reddit-dark-toggle .moon-icon {
display: block;
} body.cma-dark-mode .cma-reddit-theme input[type="text"],
body.cma-dark-mode .cma-reddit-theme textarea {
background: var(--cma-bg-tertiary);
border-color: var(--cma-border-color);
color: var(--cma-text-primary);
}
body.cma-dark-mode .cma-reddit-theme input[type="text"]:focus,
body.cma-dark-mode .cma-reddit-theme textarea:focus {
background: var(--cma-bg-secondary);
}
body.cma-dark-mode .cma-reddit-theme input[type="text"]::placeholder,
body.cma-dark-mode .cma-reddit-theme textarea::placeholder {
color: var(--cma-text-muted);
} body.cma-dark-mode .cma-reddit-theme a {
color: var(--cma-link-color);
}
body.cma-dark-mode .cma-reddit-theme .cma-thread-title a {
color: var(--cma-text-primary);
}
body.cma-dark-mode .cma-reddit-theme .cma-thread-title a:hover {
color: var(--cma-link-color);
} body.cma-dark-mode .cma-reddit-theme .cma-thumbs-up:hover {
background: rgba(255, 69, 0, 0.2);
}
body.cma-dark-mode .cma-reddit-theme .cma-thumbs-down:hover {
background: rgba(113, 147, 255, 0.2);
} body.cma-dark-mode .cma-reddit-theme .cma-award-gold {
background: rgba(255, 215, 0, 0.15);
color: #ffd700;
}
body.cma-dark-mode .cma-reddit-theme .cma-award-silver {
background: rgba(192, 192, 192, 0.15);
color: #c0c0c0;
} body.cma-dark-mode ::-webkit-scrollbar {
width: 12px;
height: 12px;
}
body.cma-dark-mode ::-webkit-scrollbar-track {
background: var(--cma-bg-primary);
}
body.cma-dark-mode ::-webkit-scrollbar-thumb {
background: var(--cma-border-color);
border-radius: 6px;
border: 3px solid var(--cma-bg-primary);
}
body.cma-dark-mode ::-webkit-scrollbar-thumb:hover {
background: var(--cma-text-muted);
} body.cma-dark-mode ::selection {
background: rgba(255, 69, 0, 0.3);
color: white;
} body.cma-reddit-theme,
body.cma-reddit-theme * {
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
} body.cma-reddit-theme.no-transition,
body.cma-reddit-theme.no-transition * {
transition: none !important;
}