.meta-boxx { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; width: 100%; min-width: 0; margin-bottom: 12px; } .meta-boxx-thumb { flex-shrink: 0; border-radius: 8px; overflow: hidden; background: rgba(0, 0, 0, 0.2); position: relative; aspect-ratio: 2 / 3; width: 182px; } .meta-boxx-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; vertical-align: middle; } .meta-boxx-stats { display: flex; flex-direction: column; gap: 6px; width: 100%; } .meta-boxx-views, .meta-boxx-duration, .meta-boxx-likes, .meta-boxx-stats>.new-tags:not(.new-tags-scroll-row) { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); padding: 8px 12px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; transition: all var(--transition-fast); } .meta-boxx-views:hover, .meta-boxx-duration:hover, .meta-boxx-likes:hover, .meta-boxx-stats>.new-tags:not(.new-tags-scroll-row):hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); } .meta-boxx-views i, .meta-boxx-duration i, .meta-boxx-likes i, .meta-boxx-views svg, .meta-boxx-duration svg, .meta-boxx-likes svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.5; color: #fff; } .meta-boxx-views span, .meta-boxx-duration span, .meta-boxx-likes span, .meta-boxx-likes a span { font-size: 13px; font-weight: 600; color: #fff; font-family: 'Roboto', sans-serif; } .meta-boxx-likes a { display: flex; align-items: center; gap: 8px; width: 100%; justify-content: space-between; text-decoration: none !important; } .meta-boxx-likes a:hover { text-decoration: none; } .meta-boxx-views::before { content: 'Views'; font-size: 10px; text-transform: uppercase; color: var(--color-text-dim); order: 2; flex-grow: 1; margin-left: 10px; opacity: 0.6; letter-spacing: 0.05em; font-weight: 500; } .meta-boxx-duration::before { content: 'Duration'; font-size: 10px; text-transform: uppercase; color: var(--color-text-dim); order: 2; flex-grow: 1; margin-left: 10px; opacity: 0.6; letter-spacing: 0.05em; font-weight: 500; } .meta-boxx-likes::before { content: 'Likes'; font-size: 10px; text-transform: uppercase; color: var(--color-text-dim); order: 2; flex-grow: 1; margin-left: 10px; opacity: 0.6; letter-spacing: 0.05em; font-weight: 500; } .meta-boxx-studio::before { content: 'Studio'; font-size: 10px; text-transform: uppercase; color: var(--color-text-dim); order: 2; flex-grow: 1; margin-left: 10px; opacity: 0.6; letter-spacing: 0.05em; font-weight: 500; } .meta-boxx-date::before { content: 'Release Date'; font-size: 10px; text-transform: uppercase; color: var(--color-text-dim); order: 2; flex-grow: 1; margin-left: 10px; opacity: 0.6; letter-spacing: 0.05em; font-weight: 500; } .meta-boxx-likes a { order: 1; display: flex; align-items: center; width: 100%; gap: 8px; } .meta-boxx-likes a i, .meta-boxx-likes a svg { order: 1; } .meta-boxx-likes a span { order: 3; margin-left: auto; } .meta-boxx-views span, .meta-boxx-duration span, .meta-boxx-likes span, .meta-boxx-studio, .meta-boxx-date { order: 3; } .meta-boxx-views svg, .meta-boxx-duration svg, .meta-boxx-likes svg, .meta-boxx-views i, .meta-boxx-duration i, .meta-boxx-likes i, .meta-boxx-studio span, .meta-boxx-date span { order: 1; } .meta-boxx-studio span, .meta-boxx-date span { display: flex; align-items: center; } .meta-boxx-studio span i, .meta-boxx-date span i, .meta-boxx-studio span svg, .meta-boxx-date span svg { width: 14px; height: 14px; opacity: 0.5; } .new-tags { margin: 4px 0 !important; width: 100%; font-size: 13px; color: var(--color-text-dim); } .new-tags a { color: var(--color-text-muted); text-decoration: none; transition: color var(--transition-fast); } .new-tags a:hover { color: #fff; } .new-tags-scroll-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; margin-top: 6px; } .new-tags-icon { flex: 0 0 auto; margin-top: 2px; color: var(--color-text-dim); opacity: 0.6; } .new-tags-scroller { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; max-height: 61px; overflow-y: auto; width: 100%; padding-bottom: 4px; } .tag-pill { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--color-text-muted) !important; padding: 3px 10px; border-radius: 4px; font-size: 12px; transition: all var(--transition-fast); white-space: nowrap; } .tag-pill:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: #fff !important; transform: translateY(-1px); } .new-tags-scroller::-webkit-scrollbar { width: 4px; } .new-tags-scroller::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); } .new-tags-scroller::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; } .meta-boxx-likes a { color: #c4c4c4; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s ease; } .meta-boxx-likes a:hover { color: #e0e0e0; } .meta-boxx-duration { color: rgba(255, 255, 255, 0.7); } @media (max-width: 560px) { .meta-boxx-thumb { width: 150px; } .meta-boxx { width: 100%; } .menu-wrap-content { padding: 0 !important; } } @media (max-width: 360px) { .new-tags { width: 50%; } } .postMeta div { float: left; } .postMeta a { color: rgba(234, 0, 55, 0.75); -webkit-transition: color 0.3s; transition: color 0.3s; } .postMeta a:hover { color: rgba(234, 0, 55, 1); } .videoSideAds { float: left; margin: 0; padding: 0px; } .videoAd300 { background-color: #1b1b1b; padding: 12px; margin-bottom: 10px; float: left; width: 324px; height: 270px; } .videoSideAds div.videoAd300:last-child { min-height: 250px; } a#showCommentsLink { width: 150px; height: 25px; float: left; padding: 5px 20px 0 30px; text-decoration: none; float: left; margin: 0; font-weight: normal; -webkit-transition: background-color 0.4s; transition: background-color 0.4s; background-repeat: no-repeat; background-position: 10px -351px; } a#showCommentsLink:hover { color: rgb(255, 255, 255); background-repeat: no-repeat; background-position: 10px 11px; }