:root {
--bg-color: #FFFFFF;
--bg-soft-color: #f9f9f9;
--bg-mute-color: #f0f2f5;
--text-primary-color: #0f0f0f;
--text-secondary-color: #606060;
--border-color: #e0e0e0;
--hover-bg-color: #e9e9e9;
--shadow-color: rgba(0, 0, 0, 0.1);
--vote-btn-bg: #f0f0f0;
--vote-btn-hover-bg: #e0e0e0;
--top-bar-bg: #cc0000;
--top-bar-text: #ffffff;
}
body.dark-theme {
--bg-color: #181818;
--bg-soft-color: #212121;
--bg-mute-color: #272727;
--text-primary-color: #f1f1f1;
--text-secondary-color: #aaa;
--border-color: #383838;
--hover-bg-color: #3a3a3a;
--shadow-color: rgba(0, 0, 0, 0.4);
--vote-btn-bg: #3a3a3a;
--vote-btn-hover-bg: #4d4d4d;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
font-size: 15px;
line-height: 1.6;
background-color: var(--bg-soft-color);
color: var(--text-primary-color);
}
.tdm-top-bar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--top-bar-bg);
color: var(--top-bar-text);
padding: 8px 24px;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.tdm-top-bar-item {
font-size: 14px;
font-weight: 500;
flex: 1 1 33.33%;
}
.tdm-top-bar-item:nth-child(3) {
text-align: right;
}
.tdm-top-bar-links {
flex: 1 1 33.33%;
text-align: center;
display: flex;
justify-content: center;
gap: 15px;
}
.tdm-top-bar-button {
color: var(--top-bar-text);
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 8px 16px;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
font-size: 14px;
white-space: nowrap;
transition: background-color 0.2s;
}
.tdm-top-bar-button:hover,
.tdm-top-bar-button.active {
background-color: rgba(255, 255, 255, 0.2);
}
.tdm-search-form {
display: inline-flex;
}
.tdm-search-input {
background-color: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
color: var(--top-bar-text);
padding: 6px 12px;
border-radius: 15px 0 0 15px;
min-width: 200px;
}
.tdm-search-button {
background-color: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
border-left: none;
color: var(--top-bar-text);
padding: 6px 12px;
border-radius: 0 15px 15px 0;
cursor: pointer;
}
.tdm-info-ticker {
display: flex;
align-items: center;
background-color: var(--bg-mute-color);
color: var(--text-secondary-color);
padding: 0;
border-bottom: 1px solid var(--border-color);
overflow: hidden;
white-space: nowrap;
}
.ticker-label {
background-color: var(--top-bar-bg);
color: var(--top-bar-text);
padding: 10px 15px;
font-weight: 500;
font-size: 14px;
flex-shrink: 0;
}
.ticker-total {
padding: 10px 15px;
font-size: 14px;
flex-shrink: 0;
border-left: 1px solid var(--border-color);
}
.ticker-wrap {
flex-grow: 1;
overflow: hidden;
}
.ticker-move {
display: inline-block;
padding-left: 100%;
animation: marquee 30s linear infinite;
}
.ticker-item {
display: inline-block;
padding: 10px 0;
font-size: 14px;
color: var(--text-secondary-color);
text-decoration: none;
}
.ticker-item:hover {
color: var(--text-primary-color);
text-decoration: underline;
}
.ticker-separator {
margin: 0 20px;
font-weight: bold;
color: var(--top-bar-bg);
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.tdm-portal-container {
width: 100%;
max-width: 1320px;
margin: 30px auto;
padding: 0 24px;
box-sizing: border-box;
}
.tdm-theme-toggle {
background: var(--bg-mute-color);
color: var(--text-secondary-color);
border: 1px solid var(--border-color);
font-size: 20px;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
margin-left: auto;
}
.tdm-gallery-wrapper {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.tdm-main-video-area {
flex: 1 1 68%;
min-width: 320px;
}
.tdm-playlist-area {
flex: 1 1 28%;
min-width: 300px;
}
.video-player-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
background: #000;
width: 100%;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 25px var(--shadow-color);
}
.video-player-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.tdm-infobar {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 15px;
background-color: var(--bg-mute-color);
border-radius: 10px;
margin-top: 15px;
border: 1px solid var(--border-color);
}
.tdm-infobar-left {
flex: 1 1 50%;
min-width: 300px;
}
.tdm-infobar-right {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 15px;
}
.video-title {
font-size: 22px !important;
font-weight: 600;
margin: 0 0 5px 0;
line-height: 1.3;
color: var(--text-primary-color);
}
.video-meta {
font-size: 14px;
color: var(--text-secondary-color);
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.tdm-action-btn {
display: flex;
align-items: center;
gap: 8px;
background-color: var(--vote-btn-bg);
border: none;
border-radius: 20px;
padding: 8px 16px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: var(--text-primary-color);
}
.tdm-vote-actions {
display: flex;
background-color: var(--vote-btn-bg);
border-radius: 20px;
}
.tdm-vote-btn {
background: none;
padding: 8px 12px;
border: none;
color: var(--text-primary-color);
cursor: pointer;
}
.tdm-playlist-area h3 {
margin-top: 0;
font-size: 18px;
font-weight: 600;
padding-bottom: 15px;
margin-bottom: 15px;
color: var(--text-primary-color);
}
a.tdm-playlist-item-link {
text-decoration: none;
color: inherit;
display: block;
margin-bottom: 12px;
}
.tdm-playlist-item {
display: flex;
gap: 12px;
align-items: flex-start;
transition: background-color 0.2s ease;
padding: 10px;
border-radius: 8px;
}
a.tdm-playlist-item-link:hover .tdm-playlist-item {
background-color: var(--hover-bg-color);
}
.playlist-thumbnail {
flex-shrink: 0;
width: 120px;
height: 68px;
object-fit: cover;
border-radius: 6px;
background-color: #ddd;
}
.playlist-title {
font-size: 14px;
font-weight: 500;
line-height: 1.4;
margin: 0 0 4px 0;
color: var(--text-primary-color);
}
.playlist-meta {
font-size: 13px;
color: var(--text-secondary-color);
}
.tdm-more-videos-section {
width: 100%;
position: relative;
}
.tdm-videos-grid {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scroll-behavior: smooth;
gap: 20px;
padding: 10px 5px 20px 5px;
-ms-overflow-style: none;
scrollbar-width: none;
}
.tdm-videos-grid::-webkit-scrollbar {
display: none;
}
.tdm-slider-arrow {
position: absolute;
top: calc(50% + 10px);
transform: translateY(-50%);
z-index: 10;
background-color: rgba(255, 255, 255, 0.9);
color: #000;
border: 1px solid #ddd;
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 24px;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.tdm-slider-arrow.prev {
left: -20px;
}
.tdm-slider-arrow.next {
right: -20px;
}
.tdm-more-videos-section:hover .tdm-slider-arrow {
display: flex;
}
.tdm-slider-arrow.disabled {
opacity: 0.3;
cursor: not-allowed;
}
body.dark-theme .tdm-slider-arrow {
background-color: rgba(40, 40, 40, 0.9);
color: #fff;
border-color: #555;
}
a.tdm-grid-item-link {
text-decoration: none;
color: inherit;
flex: 0 0 280px;
}
.tdm-grid-item .grid-thumbnail {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 10px;
margin-bottom: 12px;
background-color: #ddd;
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
a.tdm-grid-item-link:hover .grid-thumbnail {
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.grid-title {
font-size: 16px;
font-weight: 500;
line-height: 1.4;
margin: 0 0 5px 0;
color: var(--text-primary-color);
}
.grid-meta {
font-size: 14px;
color: var(--text-secondary-color);
}
.search-title,
.category-archive-title {
font-size: 28px;
margin-bottom: 20px;
font-weight: 600;
border-bottom: 2px solid var(--border-color);
padding-bottom: 15px;
}
.tdm-videos-grid.is-search-result {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
flex-wrap: wrap;
}
.tdm-category-shelf-section {
margin-top: 40px;
background-color: var(--bg-mute-color);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 20px;
}
.category-shelf-title-link {
text-decoration: none;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.category-shelf-title {
font-size: 22px;
font-weight: 600;
margin: 0;
padding: 0;
color: var(--text-primary-color);
}
.see-all-link {
font-size: 15px;
font-weight: 500;
color: var(--text-secondary-color);
white-space: nowrap;
transition: color 0.2s;
}
a.category-shelf-title-link:hover .see-all-link {
color: var(--text-primary-color);
}
.tdm-category-shelf-section:nth-of-type(1) {
background-color: #eef5fa;
}
.tdm-category-shelf-section:nth-of-type(2) {
background-color: #fef4ee;
}
.tdm-category-shelf-section:nth-of-type(3) {
background-color: #eff6e8;
}
.tdm-category-shelf-section:nth-of-type(4) {
background-color: #f6eef9;
}
.tdm-category-shelf-section:nth-of-type(5) {
background-color: #fdeeee;
}
.tdm-category-shelf-section:nth-of-type(6) {
background-color: #f0f2f5;
}
body.dark-theme .tdm-category-shelf-section {
border-color: #444;
}
body.dark-theme .tdm-category-shelf-section:nth-of-type(1) {
background-color: #2a3a4d;
}
body.dark-theme .tdm-category-shelf-section:nth-of-type(2) {
background-color: #4d3a2a;
}
body.dark-theme .tdm-category-shelf-section:nth-of-type(3) {
background-color: #2a4d2c;
}
body.dark-theme .tdm-category-shelf-section:nth-of-type(4) {
background-color: #4a2a4d;
}
body.dark-theme .tdm-category-shelf-section:nth-of-type(5) {
background-color: #4d2a2a;
}
body.dark-theme .tdm-category-shelf-section:nth-of-type(6) {
background-color: #272727;
}
.tdm-autoplay-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.tdm-autoplay-overlay.visible {
opacity: 1;
pointer-events: auto;
}
.autoplay-content p {
margin: 0 0 10px 0;
font-size: 16px;
font-weight: 500;
}
.autoplay-countdown {
font-size: 48px;
font-weight: bold;
line-height: 1;
}
.autoplay-cancel-btn {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.4);
color: #fff;
padding: 8px 20px;
border-radius: 20px;
cursor: pointer;
margin-top: 15px;
font-weight: 500;
}
.autoplay-cancel-btn:hover {
background: rgba(255, 255, 255, 0.3);
}
.shorts-page-body .tdm-main-video-area {
flex: 0 1 400px;
margin: 0 auto;
}
.shorts-page-body .tdm-playlist-area {
flex: 1 1 320px;
max-width: 400px;
}
.shorts-page-body .video-player-container {
padding-bottom: 177.77%;
}
.shorts-page-body .playlist-thumbnail {
width: 70px !important;
height: 124px !important;
object-fit: cover;
}
.shorts-page-body .video-title {
font-size: 18px !important;
}
@media (max-width: 992px) {
.tdm-portal-container {
padding: 0 15px;
margin-top: 20px;
}
.tdm-main-video-area,
.tdm-playlist-area {
flex-basis: 100%;
}
.tdm-top-bar {
flex-wrap: wrap;
gap: 10px;
padding: 10px 15px;
}
.tdm-top-bar-item:nth-child(1) {
flex-basis: 100%;
text-align: center;
order: 3;
font-size: 12px;
}
.tdm-top-bar-links {
flex-basis: 100%;
justify-content: center;
order: 1;
}
.tdm-top-bar-item:nth-child(3) {
flex-basis: 100%;
order: 2;
}
.tdm-search-form {
width: 100%;
}
.tdm-search-input {
width: 100%;
}
.video-title {
font-size: 19px !important;
}
.playlist-title {
font-size: 14px;
}
.tdm-slider-arrow {
display: none !important;
}
.tdm-videos-grid {
overflow-x: auto;
}
.tdm-infobar-left {
min-width: 0;
}
.tdm-infobar {
gap: 10px;
}
.tdm-infobar-right {
margin-left: auto;
}
}   .tdm-upload-form-wrapper {
padding: 10px;
}
.tdm-upload-form p {
margin-bottom: 20px;
}
.tdm-upload-form label {
font-weight: 500;
font-size: 15px;
display: block;
margin-bottom: 8px;
color: var(--text-primary-color);
} .tdm-upload-form input[type="text"],
.tdm-upload-form textarea,
.tdm-upload-form select.tdm-select-input {
width: 100%;
background-color: var(--bg-soft-color);
border: 1px solid var(--border-color);
color: var(--text-primary-color);
padding: 12px 15px;
border-radius: 8px;
font-size: 15px;
box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s;
}
.tdm-upload-form textarea {
min-height: 120px;
resize: vertical;
}
.tdm-upload-form input[type="text"]:focus,
.tdm-upload-form textarea:focus,
.tdm-upload-form select.tdm-select-input:focus {
outline: none;
border-color: var(--top-bar-bg);
box-shadow: 0 0 0 2px rgba(204, 0, 0, 0.2);
}
.tdm-upload-form input[type="file"].tdm-file-input {
background-color: var(--bg-soft-color);
border: 1px solid var(--border-color);
color: var(--text-secondary-color);
padding: 10px;
border-radius: 8px;
width: 100%;
box-sizing: border-box;
}
.tdm-upload-form input[type="file"].tdm-file-input::file-selector-button {
background-color: var(--vote-btn-bg);
color: var(--text-primary-color);
border: none;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
margin-right: 10px;
font-weight: 500;
}
.tdm-upload-form hr {
border: none;
border-top: 1px solid var(--border-color);
margin: 25px 0;
}
.form-row {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.form-col {
flex: 1;
min-width: 250px;
}
.tdm-submit-button {
background-color: var(--top-bar-bg);
color: var(--top-bar-text);
border: none;
padding: 12px 25px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: background-color 0.2s;
width: 100%;
max-width: 400px;
display: block;
margin: 10px auto 0 auto;
}
.tdm-submit-button:hover {
background-color: #a00000; }
.form-submit-p {
text-align: center;
}
.tdm-upload-form small {
font-size: 13px;
color: var(--text-secondary-color);
margin-top: 5px;
display: block;
}
.portal-success-message {
background-color: #e0f8e0;
border: 1px solid #a0d8a0;
color: #206020;
padding: 15px 20px;
border-radius: 8px;
margin-bottom: 20px;
font-weight: 500;
}
.portal-error-message {
background-color: #f8e0e0;
border: 1px solid #d8a0a0;
color: #602020;
padding: 15px 20px;
border-radius: 8px;
margin-bottom: 20px;
font-weight: 500;
}
body.dark-theme .portal-success-message {
background-color: #2a4d2c;
border-color: #5a8d5c;
color: #c0e0c0;
}
body.dark-theme .portal-error-message {
background-color: #4d2a2a;
border-color: #8d5a5a;
color: #e0c0c0;
}    .tdm-top-bar-button.tdm-upload-button {
background-color: #f0c14b; color: #111;
font-weight: 600;
border-color: rgba(0, 0, 0, 0.1);
}
.tdm-top-bar-button.tdm-upload-button:hover {
background-color: #e0b13a;
}
body.dark-theme .tdm-top-bar-button.tdm-upload-button {
background-color: #f0c14b;
color: #111;
} .tdm-portal-footer {
background-color: var(--bg-mute-color);
color: var(--text-secondary-color);
border-top: 1px solid var(--border-color);
padding: 30px 0;
margin-top: 40px;
font-size: 13px;
text-align: center;
line-height: 1.7;
}
.tdm-portal-footer p {
margin: 10px 0;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.tdm-portal-footer a {
color: var(--text-primary-color);
font-weight: 500;
text-decoration: none;
}
.tdm-portal-footer a:hover {
text-decoration: underline;
}