/* ========================================================================== VIBE UI - new design for the "main" theme Layout, collapsible sidebar, video cards, typography, dark + light palettes. Loaded after all theme styles by app/functions/functions.darkskin.php. classes: vd-dark (dark palette) vs-js vs-open (menu expanded) vs-drawer-open (menu as drawer on phones / video page) ========================================================================== */ /* ---------------------------------------------------------------- palette */ :root { --hdr: 64px; --sb-mini: 76px; --sb-open: 240px; --radius: 14px; --radius-sm: 10px; --font: "Inter", "Roboto", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --bg: #f6f6f8; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #f0f0f4; --surface-3: #e5e5eb; --border: rgba(15, 15, 30, .09); --text: #111118; --text-2: #585866; --text-3: #8a8a96; --accent: #ff2d55; --accent-2: #ff6a3d; --grad: linear-gradient(135deg, #ff2d55 0%, #ff6a3d 100%); --link: #2563eb; --shadow: 0 10px 30px rgba(20, 20, 40, .10); --glass: rgba(255, 255, 255, .86); } html.vd-dark { --bg: #0b0b0f; --bg-2: #101016; --surface: #15151c; --surface-2: #1d1d26; --surface-3: #282833; --border: rgba(255, 255, 255, .08); --text: #f4f4f7; --text-2: #a9a9b6; --text-3: #6f6f7c; --link: #7fa8ff; --shadow: 0 12px 34px rgba(0, 0, 0, .55); --glass: rgba(11, 11, 15, .82); color-scheme: dark; } /* ---------------------------------------------------------------- base & type */ html, body { background: var(--bg) !important; color: var(--text) !important; } body, button, input, select, textarea, .btn, .sidebar-nav a, h1, h2, h3, h4, h5, h6 { font-family: var(--font) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-size: 14px; line-height: 1.5; letter-spacing: -.005em; } h1, h2, h3, h4, h5, h6 { color: var(--text) !important; letter-spacing: -.02em; } a { color: var(--text); transition: color .15s ease; } a:hover, a:focus { color: var(--accent); text-decoration: none; } .text-muted, .help-block { color: var(--text-2) !important; } hr { border-color: var(--border) !important; } ::selection { background: var(--accent); color: #fff; } * { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; border: 2px solid var(--bg); } ::-webkit-scrollbar-track { background: transparent; } /* ---------------------------------------------------------------- header */ .fixed-top { height: var(--hdr) !important; background: var(--glass) !important; backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border) !important; box-shadow: none !important; color: var(--text) !important; } .logo-wrapper, .user-quick, #show-sidebar { height: var(--hdr) !important; line-height: var(--hdr) !important; } a#show-sidebar, #show-sidebar { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px !important; line-height: 44px !important; margin: 10px 8px 0 14px; padding: 0 !important; border-radius: 50%; transition: background .15s; } #show-sidebar:hover { background: var(--surface-2); } #show-sidebar i { color: var(--text) !important; padding: 0 !important; font-size: 24px !important; } a.logo, .logo, .logo a, .logo span { color: var(--text) !important; font-weight: 800 !important; letter-spacing: -.04em; font-size: 22px; } .logo img { max-height: 34px; width: auto; } .top-link, a.top-link, .top-link i, .top-info > a > i { color: var(--text) !important; } .top-link:hover, .top-link:hover i { color: var(--accent) !important; } a.top-link:before, .aaa > a:before { background-color: var(--surface-2) !important; } .top-link svg { width: 20px; height: 20px; } .user-quick .uav img { width: 34px !important; height: 34px !important; border-radius: 50%; margin: 0 !important; box-shadow: 0 0 0 2px var(--surface-3); } #uplBtn, .btn-upload-now { background: var(--grad) !important; color: #fff !important; border-radius: 22px !important; width: 40px; height: 40px; display: inline-flex !important; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(255, 45, 85, .35); } #uplBtn i { color: #fff !important; } /* search */ .searchWidget .form-control, .searchWidget input { background: var(--surface-2) !important; border: 1px solid transparent !important; color: var(--text) !important; border-radius: 24px !important; height: 42px !important; padding-left: 18px !important; font-size: 15px !important; font-weight: 400 !important; } .searchWidget .form-control:focus { background: var(--bg-2) !important; border-color: var(--link) !important; } .searchWidget .search-button { border: 0 !important; height: 42px !important; border-radius: 0 24px 24px 0 !important; overflow: hidden; } .searchWidget .search-button button { background: transparent !important; color: var(--text-2) !important; line-height: 42px !important; } #suggest-results ul { background: var(--surface) !important; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--border); } #suggest-results ul li { border-color: var(--border) !important; } #suggest-results ul li a { color: var(--text) !important; } #suggest-results ul li a:hover { background: var(--surface-2) !important; } /* ---------------------------------------------------------------- page layout */ html.vs-js #wrapper { transition: margin-left .22s ease; } @media (min-width: 1024px) { html.vs-js body:not(.body-video):not(.body-image):not(.body-conversation) #wrapper { margin-left: var(--sb-mini) !important; margin-right: 0 !important; width: auto !important; max-width: none !important; padding: 0 28px !important; } html.vs-js.vs-open body:not(.body-video):not(.body-image):not(.body-conversation) #wrapper { margin-left: var(--sb-open) !important; } } /* ---------------------------------------------------------------- sidebar */ html.vs-js #sidebar { position: fixed !important; top: var(--hdr) !important; bottom: 0; left: 0; padding: 8px 6px 0 !important; background: var(--bg) !important; border-right: 1px solid transparent; box-shadow: none !important; overflow-y: auto; overflow-x: hidden; z-index: 1030; color: var(--text) !important; transition: width .22s ease, transform .25s ease; } html.vs-js #sidebar .sidescroll { overflow: visible !important; height: auto !important; } html.vs-js #sidebar .sidebar-nav { width: 100% !important; margin: 0 0 6px !important; padding: 0 0 6px; border-bottom: 1px solid var(--border); } html.vs-js #sidebar .sidebar-nav:last-of-type { border-bottom: 0; } html.vs-js #sidebar .sidebar-nav ul { margin: 0; padding: 0; } html.vs-js #sidebar .sidebar-nav li { margin: 1px 0 !important; padding: 0 !important; border: 0 !important; border-radius: var(--radius-sm); font-size: 14px !important; background: transparent !important; } html.vs-js #sidebar .sidebar-nav li:hover { background: var(--surface-2) !important; } html.vs-js #sidebar .sidebar-nav li.active { background: var(--surface-2) !important; } html.vs-js #sidebar .sidebar-nav li.active > a, html.vs-js #sidebar .sidebar-nav li.active i { color: var(--text) !important; font-weight: 600; } html.vs-js #sidebar .sidebar-nav li.active i { color: var(--accent) !important; } html.vs-js #sidebar .sidebar-nav a { display: flex !important; align-items: center; gap: 18px; height: 42px; padding: 0 12px !important; color: var(--text) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.2 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.vs-js #sidebar .sidebar-nav a i, html.vs-js #sidebar .sidebar-nav .iconed i { font-size: 22px !important; width: 24px; text-align: center; color: var(--text-2) !important; flex: 0 0 24px; margin: 0 !important; } html.vs-js #sidebar .sidebar-nav .iconed { display: inline-flex; flex: 0 0 24px; width: 24px; margin: 0 !important; } html.vs-js #sidebar .sidebar-nav li.mm-upload a { color: var(--accent) !important; } html.vs-js #sidebar .sidebar-nav li.mm-upload i { color: var(--accent) !important; } html.vs-js #sidebar .li-heading, html.vs-js #sidebar .user-profile-link-side { margin: 8px 6px !important; padding: 0 !important; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3) !important; background: none !important; } html.vs-js #sidebar .user-profile-link-side a { background: var(--surface-2) !important; color: var(--text) !important; border-radius: var(--radius-sm); padding: 8px 12px !important; font-size: 14px; text-transform: none; letter-spacing: 0; } html.vs-js #sidebar .sidebar-nav .dropdown-menu { position: static !important; float: none !important; box-shadow: none !important; background: var(--surface) !important; border-radius: var(--radius-sm) !important; margin: 4px 0 !important; } /* desktop: icons only (default) */ @media (min-width: 1024px) { html.vs-js body:not(.body-video):not(.body-image):not(.body-conversation) #sidebar { display: block !important; width: var(--sb-mini) !important; transform: none !important; } html.vs-js.vs-open body:not(.body-video):not(.body-image):not(.body-conversation) #sidebar { width: var(--sb-open) !important; padding: 8px 12px 0 !important; } /* mini: only the main menu, as big icons with a small label */ html.vs-js:not(.vs-open) body:not(.body-video):not(.body-image):not(.body-conversation) #sidebar .sidebar-nav:not(.main-menu), html.vs-js:not(.vs-open) body:not(.body-video):not(.body-image):not(.body-conversation) #sidebar .sidebar-specials, html.vs-js:not(.vs-open) body:not(.body-video):not(.body-image):not(.body-conversation) #sidebar .li-heading, html.vs-js:not(.vs-open) body:not(.body-video):not(.body-image):not(.body-conversation) #sidebar .load-cats, html.vs-js:not(.vs-open) body:not(.body-video):not(.body-image):not(.body-conversation) #sidebar .blc[style], html.vs-js:not(.vs-open) body:not(.body-video):not(.body-image):not(.body-conversation) #sidebar .sidescroll > :not(.sidebar-nav):not(.sidebar-specials) { display: none !important; } html.vs-js:not(.vs-open) body:not(.body-video):not(.body-image):not(.body-conversation) #sidebar .main-menu { border-bottom: 0; } html.vs-js:not(.vs-open) body:not(.body-video):not(.body-image):not(.body-conversation) #sidebar .main-menu a { flex-direction: column; justify-content: center; gap: 6px; height: 72px; padding: 0 2px !important; font-size: 10px !important; font-weight: 500 !important; text-align: center; white-space: nowrap; } html.vs-js:not(.vs-open) body:not(.body-video):not(.body-image):not(.body-conversation) #sidebar .main-menu a i { font-size: 24px !important; } html.vs-js:not(.vs-open) body:not(.body-video):not(.body-image):not(.body-conversation) #sidebar .main-menu .mm-label { display: block; max-width: 66px; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; } html.vs-js:not(.vs-open) body:not(.body-video):not(.body-image):not(.body-conversation) #sidebar .main-menu li.active { background: transparent !important; } html.vs-js:not(.vs-open) body:not(.body-video):not(.body-image):not(.body-conversation) #sidebar .main-menu li:hover { background: var(--surface-2) !important; } } /* drawer: phones, tablets and the video / picture / chat pages */ html.vs-js .vs-backdrop { position: fixed; top: var(--hdr); left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .55); z-index: 1029; opacity: 0; pointer-events: none; transition: opacity .2s; } html.vs-js.vs-drawer-open .vs-backdrop { opacity: 1; pointer-events: auto; } @media (max-width: 1023px) { html.vs-js #sidebar { width: 260px !important; transform: translateX(-102%); display: block !important; background: var(--bg-2) !important; box-shadow: var(--shadow) !important; padding: 8px 12px 0 !important; } html.vs-js:not(.vs-drawer-open) #sidebar.hide { display: none !important; } html.vs-js.vs-drawer-open #sidebar { transform: none; } html.vs-js #wrapper { margin-left: auto !important; width: auto !important; } } @media (min-width: 1024px) { html.vs-js body.body-video #sidebar, html.vs-js body.body-image #sidebar, html.vs-js body.body-conversation #sidebar { width: 260px !important; transform: translateX(-102%); background: var(--bg-2) !important; box-shadow: var(--shadow) !important; padding: 8px 12px 0 !important; } html.vs-js:not(.vs-drawer-open) body.body-video #sidebar.hide, html.vs-js:not(.vs-drawer-open) body.body-image #sidebar.hide, html.vs-js:not(.vs-drawer-open) body.body-conversation #sidebar.hide { display: none !important; } html.vs-js.vs-drawer-open body.body-video #sidebar, html.vs-js.vs-drawer-open body.body-image #sidebar, html.vs-js.vs-drawer-open body.body-conversation #sidebar { display: block !important; transform: none; } } /* ---------------------------------------------------------------- section headings */ .loop-heading, h1.loop-heading, .p-home .loop-heading { display: flex !important; align-items: center; gap: 12px; margin: 30px 0 16px !important; padding: 0 !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.2 !important; text-transform: none !important; letter-spacing: -.02em; color: var(--text) !important; border: 0 !important; background: none !important; } .loop-heading > span { display: inline-flex; align-items: center; color: var(--text) !important; background: none !important; border: 0 !important; padding: 0 !important; } .loop-heading > span:before { content: ""; display: inline-block; width: 4px; height: 20px; border-radius: 3px; background: var(--grad); margin-right: 12px; } .loop-heading a, a.home-seeall { margin-left: auto; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0; color: var(--text) !important; background: var(--surface-2); padding: 7px 14px; border-radius: 20px; text-transform: none; transition: background .15s; } .loop-heading a:hover, a.home-seeall:hover { background: var(--surface-3); color: var(--text) !important; } /* ---------------------------------------------------------------- video card grid */ html body .vgrid:not(.hide) { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 30px 18px; margin: 0 0 12px !important; text-align: left !important; width: 100% !important; } html body .vgrid:after { display: none !important; } html body .vgrid > :not(.video) { grid-column: 1 / -1; } html body .vgrid > .video { float: none !important; width: auto !important; min-width: 0; margin: 0 !important; padding: 0 !important; aspect-ratio: auto !important; height: auto !important; background: transparent !important; border: 0 !important; } html body .vgrid .video-thumb { position: relative !important; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9; border-radius: var(--radius) !important; overflow: hidden; background: var(--surface-2) !important; transition: border-radius .2s ease, box-shadow .2s ease; } html body .vgrid .video:hover .video-thumb { box-shadow: var(--shadow); } html body .vgrid .video-thumb .clip-link, html body .vgrid .video-thumb .clip { position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; display: block; } /* the "tiny thumbnail on first load": the image now always fills the 16:9 box */ html body .vgrid .video-thumb img { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; min-height: 0 !important; max-width: none !important; object-fit: cover; display: block; transition: transform .35s ease; } html body .vgrid .video:hover .video-thumb img { transform: scale(1.035); } html body .vgrid .video-thumb .vertical-align, html body .vgrid .video-thumb .overlay { display: none !important; } html body .vgrid .video-thumb .timer { position: absolute; right: 8px; bottom: 8px; z-index: 3; background: rgba(0, 0, 0, .78) !important; color: #fff !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; padding: 4px 6px !important; border-radius: 6px; letter-spacing: .02em; } html body .vgrid .video-thumb .laterit { position: absolute; top: 8px; right: 8px; z-index: 4; opacity: 0; transition: opacity .15s; background: rgba(0, 0, 0, .7); border-radius: 8px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: #fff !important; } html body .vgrid .video:hover .laterit { opacity: 1; } html body .vgrid .video-thumb .laterit i { font-size: 20px !important; width: auto; height: auto; } html body .vgrid .video-data { height: auto !important; padding: 12px 2px 0 !important; overflow: visible !important; } html body .vgrid .video h4, html body .vgrid .video-title { margin: 0 0 6px !important; padding: 0 !important; max-height: none !important; height: auto !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px !important; line-height: 1.38 !important; } html body .vgrid .video h4 a, html body .vgrid .video-title a { font-family: var(--font) !important; font-size: 15px !important; font-weight: 600 !important; color: var(--text) !important; padding: 0 !important; height: auto !important; letter-spacing: -.01em; } html body .vgrid .video h4 a:hover { color: var(--accent) !important; } html body .vgrid .video ul.stats { display: flex; flex-wrap: wrap; align-items: center; margin: 0 !important; padding: 0 !important; } html body .vgrid .video ul.stats > li { display: inline-flex !important; align-items: center; width: auto !important; margin: 0 !important; padding: 0 !important; font-size: 13px !important; line-height: 1.5 !important; font-weight: 400 !important; color: var(--text-2) !important; } html body .vgrid .video ul.stats > li + li:not(.uploaderlink):before { content: "\2022"; margin: 0 6px; color: var(--text-3); } html body .vgrid .video ul.stats > li.uploaderlink { flex: 0 0 100%; margin-bottom: 1px !important; } html body .vgrid .video ul.stats > li.uploaderlink + li:before { display: none; } html body .vgrid .video .uploaderlink a { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2) !important; font-weight: 500 !important; opacity: 1 !important; margin: 0 !important; font-size: 13px !important; line-height: 1.5 !important; } html body .vgrid .video .uploaderlink a:hover { color: var(--text) !important; } html body .vgrid .video .vg-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; } html body .vgrid .vSeen { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent); z-index: 3; } html body .vgrid .vSeen:after { display: none; } @media (max-width: 600px) { html body .vgrid:not(.hide) { grid-template-columns: 1fr; gap: 22px; } html body .vgrid .video-thumb { border-radius: 12px !important; } } /* hover preview layer */ .vp-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; background: #000; opacity: 0; transition: opacity .3s ease; pointer-events: none; } .vp-layer.is-on { opacity: 1; } .vp-layer video, .vp-layer iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; object-fit: cover; pointer-events: none; } .vp-layer iframe { transform: scale(1.02); } .vp-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--accent); z-index: 3; } .vp-bar.go { width: 100%; transition: width 8s linear; } .vp-playing .timer { opacity: 0; } /* ---------------------------------------------------------------- homepage blocks */ #home-content .loop-content { border: 0 !important; } .home-user-block { margin: 34px 0 10px; padding: 18px 18px 8px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); position: relative; overflow: hidden; } .home-user-block:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad); } .home-user-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .home-user-head .hu-link { display: flex; align-items: center; gap: 12px; color: var(--text) !important; min-width: 0; } .home-user-head img, .hu-noav { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 46px; } .hu-noav { display: inline-flex; align-items: center; justify-content: center; background: var(--grad); color: #fff; font-weight: 800; font-size: 18px; text-transform: uppercase; } .hu-txt { display: flex; flex-direction: column; min-width: 0; } .hu-txt small { font-size: 12px; color: var(--text-2) !important; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } .hu-txt strong { font-size: 19px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-user-head .home-seeall { margin-left: auto; } .home-user-block .vgrid:not(.hide) { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } p.empty-content { background: var(--surface) !important; border: 1px dashed var(--border) !important; color: var(--text-2) !important; border-radius: var(--radius); padding: 24px !important; text-align: center; } .homeLoader { display: none; } /* skeletons */ .vpreload > span, .prelist > span, .prelist-right > span, .prelist-left > span { background: var(--surface-2) !important; background-image: linear-gradient(90deg, var(--surface-2) 8%, var(--surface-3) 18%, var(--surface-2) 33%) !important; background-size: 800px 104px !important; border-radius: 8px; } /* ---------------------------------------------------------------- shorts shelf */ .shorts-shelf .loop-heading > span:before { background: var(--grad); } .short-card .short-thumb { border-radius: 14px !important; box-shadow: none; transition: box-shadow .2s; } .short-card:hover .short-thumb { box-shadow: var(--shadow); } .short-card .short-title { color: var(--text); font-size: 14px; font-weight: 600; } .short-card .short-views { color: var(--text-2); opacity: 1; } .short-card .short-badge { background: var(--grad) !important; font-weight: 700; letter-spacing: .02em; } /* ---------------------------------------------------------------- boxes & panels */ .isBoxed, .oboxed.isBoxed, .panel, .widget, .well, .p-profile .widget-header, .p-profile .widget-footer, .page-aside, .page-aside .page-aside-inner, .page-aside-switch, .chat-box, .app-message-chats, .app-message-input, .emoji-holder, .list-header, .blog-image, .alertable, .p-image .playlistvibe, .black-slider, .vTrends, .cats, .img-inner { background-color: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } .isBoxed, .panel, .widget, .well { border-radius: var(--radius) !important; box-shadow: none !important; border: 1px solid var(--border) !important; } .panel-heading, .panel-footer, .panel-body { background: transparent !important; border-color: var(--border) !important; } .BoxedFooter, .item-in-list, .img-owner, .playlist-head, .red-nav, .red-nav li, .p-manager h1, .user-container, .app-message-chats .conv-user-header, .body-channels #ChannelResults .video, #media-info, .user-media-actions, a#revealDesc, a#revealRelated { border-color: var(--border) !important; } .red-nav li a { color: var(--text-2) !important; } .red-nav li.active a, .red-nav li a:hover { color: var(--text) !important; } /* ---------------------------------------------------------------- forms */ .form-control, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], textarea, select, .minict_wrapper, .tagsinput, .emoj, .emoj.form-control, .emoj .emoj-editor, .withtags { background-color: var(--bg-2) !important; border: 1px solid var(--border) !important; color: var(--text) !important; box-shadow: none !important; border-radius: var(--radius-sm) !important; } .form-control { min-height: 42px; } .form-control:focus, textarea:focus, input:focus, select:focus { border-color: var(--link) !important; outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15) !important; } .form-control::placeholder, textarea::placeholder, input::placeholder { color: var(--text-3) !important; } .input-group-addon { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-2) !important; } .control-label, label { color: var(--text) !important; font-weight: 600; } select option { background: var(--surface); color: var(--text); } .minict_wrapper ul, .minict_wrapper ul li, .minict_wrapper ul li.minict_empty, .minict_wrapper ul li.disabled { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } .minict_wrapper ul li:hover, .minict_wrapper ul li.selected, .minict_wrapper ul li.highlighted { background: var(--surface-2) !important; color: var(--text) !important; } .minict_wrapper ul li.minict_group { background: var(--surface-2) !important; color: var(--text-2) !important; } .minict_wrapper:after, .minict_wrapper .minict_reset { color: var(--text-2) !important; } .tagsinput span.tag { background: var(--surface-2) !important; color: var(--text) !important; border: 0 !important; border-radius: 14px !important; } #dropzoned, .dropzoned { border: 2px dashed var(--surface-3) !important; background: var(--surface) !important; border-radius: 20px !important; padding: 30px !important; transition: border-color .2s; } #dropzoned:hover { border-color: var(--accent) !important; } .uploading { background-color: var(--surface-2) !important; border-radius: 10px; overflow: hidden; } .uploading .upload-bar { background: var(--grad) !important; } .ckbx-switch label:before, .ckbx-switch input[type="checkbox"]:checked + label:before { background: var(--surface-3) !important; } .shorts-upload-box { border: 1px solid var(--border) !important; background: var(--surface) !important; border-radius: var(--radius) !important; padding: 14px 16px !important; } /* share / upload tabs */ .share-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; width: fit-content; max-width: 100%; margin: 6px 0 18px; } .share-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 13px; color: var(--text-2) !important; font-weight: 600; font-size: 14px; transition: background .15s, color .15s; } .share-tab i { font-size: 20px; } .share-tab:hover { background: var(--surface-2); color: var(--text) !important; } .share-tab.is-active { background: var(--grad); color: #fff !important; box-shadow: 0 6px 18px rgba(255, 45, 85, .3); } .share-tab.is-active i { color: #fff; } /* ---------------------------------------------------------------- buttons */ .btn { border-radius: 22px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; padding: 8px 18px; transition: background .15s, transform .1s, box-shadow .15s; } .btn:active { transform: scale(.97); } .btn-default, .btn-default:focus, .button, .btn-outline.btn-default { background: var(--surface-2) !important; border: 1px solid transparent !important; color: var(--text) !important; } .btn-default:hover, .button:hover, .btn-outline.btn-default:hover, .btn-default.active { background: var(--surface-3) !important; color: var(--text) !important; } .btn-primary, .btn-primary:focus { background: var(--grad) !important; border: 0 !important; color: #fff !important; box-shadow: 0 6px 16px rgba(255, 45, 85, .28); } .btn-primary:hover, .btn-primary:active { filter: brightness(1.08); color: #fff !important; } .btn-primary[disabled] { opacity: .5; box-shadow: none; } .btn-danger { background: #dc2626 !important; border-color: #dc2626 !important; } .btn-success { background: #16a34a !important; border-color: #16a34a !important; } /* ---------------------------------------------------------------- menus, modals, tabs, tables, alerts */ .dropdown-menu, .popover, .emoj .emoj-picker, .dropdown-menu.textcomplete-dropdown[data-strategy="emoj"], .emoj .emoj-picker .emoj-scroll-area .emoj-category-title { background-color: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text) !important; box-shadow: var(--shadow) !important; } .dropdown-menu { border-radius: var(--radius) !important; padding: 6px !important; overflow: hidden; } .dropdown-menu > .drop-head, .dropdown-menu > .drop-footer { background: transparent !important; border-color: var(--border) !important; } .dropdown-menu > li > a, .dropdown-menu li a { color: var(--text) !important; border: 0 !important; border-radius: 8px; padding: 8px 12px !important; letter-spacing: 0 !important; font-weight: 500; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--surface-2) !important; color: var(--text) !important; } .dropdown-menu .divider { background: var(--border) !important; margin: 6px 0 !important; } .emoj .emoj-picker .emoj-filters { background: var(--surface-2) !important; } .emoj .emoj-picker .emoj-filters .emoj-filter.active, .emoj .emoj-picker .emoj-scroll-area .emojibtn:hover { background: var(--surface-3) !important; } .modal-content { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: 20px !important; box-shadow: var(--shadow) !important; } .modal-header, .modal-footer { border-color: var(--border) !important; } .modal-backdrop.in { opacity: .7 !important; } .close { color: var(--text) !important; text-shadow: none !important; opacity: .6; } .nav-tabs { border-color: var(--border) !important; } .nav-tabs > li > a { color: var(--text-2) !important; border: 0 !important; border-bottom: 2px solid transparent !important; background: transparent !important; font-weight: 600; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li > a:hover { color: var(--text) !important; border-bottom-color: var(--accent) !important; background: transparent !important; } .p-dashboard #DashSidebar .nav-tabs-vertical .nav-tabs, .p-manager #DashSidebar .nav-tabs-vertical .nav-tabs { border-color: var(--border) !important; background: var(--surface) !important; border-radius: var(--radius); } .table, .table > thead > tr > th, .table > tbody > tr > td { border-color: var(--border) !important; color: var(--text) !important; } .table-striped > tbody > tr:nth-of-type(odd) { background: var(--surface-2) !important; } .list-group-item { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } .app-message-list .list-group .list-group-item:hover, .app-message-list .list-group .list-group-item.active { background: var(--surface-2) !important; } .pagination > li > a, .pagination > li > span { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } .pagination > .active > a, .pagination > .active > span { background: var(--grad) !important; border-color: transparent !important; color: #fff !important; } .tooltip-inner { background: var(--text) !important; color: var(--bg) !important; border-radius: 6px; font-weight: 500; } .badge, .label-default { background: var(--surface-3) !important; color: var(--text) !important; } .msg-info, .msg-win, .msg-warning, .alert { border-radius: var(--radius) !important; border: 1px solid var(--border) !important; padding: 14px 16px !important; } .msg-info, .alert-info { background: rgba(37, 99, 235, .12) !important; color: var(--text) !important; } .msg-win, .alert-success { background: rgba(22, 163, 74, .14) !important; color: var(--text) !important; } .msg-warning, .alert-warning, .alert-danger { background: rgba(220, 38, 38, .13) !important; color: var(--text) !important; } #toast-container > div { border-radius: var(--radius) !important; box-shadow: var(--shadow) !important; opacity: 1 !important; } /* ---------------------------------------------------------------- video page */ body.body-video.isdevice.noheader #video-content, .video-holder.gofullscreen { background: #000 !important; } .video-holder, #video-content .video-player { border-radius: 16px; overflow: hidden; } .video-under h1, #media-info h1 { color: var(--text) !important; font-size: 21px !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: -.02em; } .user-media-actions a, .user-media-actions a i, .like-views, .statistics > li > span, .cctotal { color: var(--text) !important; } .likes-bar, .achip, .likes-holder, .vibe-interactions .aaa > a { background: var(--surface-2) !important; border: 0 !important; color: var(--text) !important; border-radius: 22px !important; } .likes-bar .likes-success { background: var(--text) !important; } .likes-danger { background-color: var(--text-3) !important; } .isLiked i, i.isActive { color: var(--accent) !important; } .user-box h3, .user-box h3 a, .user-box-txt a { color: var(--text) !important; font-weight: 700; } .user-box-numbers, .user-box-txt p { color: var(--text-2) !important; } .video-description, #media-description { background: var(--surface-2) !important; color: var(--text) !important; border-radius: var(--radius) !important; padding: 14px 16px; line-height: 1.6; } #media-description a { color: var(--link) !important; } .thetags a { display: inline-block; background: var(--surface-2); color: var(--link) !important; border-radius: 14px; padding: 3px 11px; margin: 0 4px 6px 0; font-size: 13px; } .share-body li a { color: var(--text) !important; } .video-under-right, .rur, .related, .video-related, .related-with-list { background: transparent !important; border-color: transparent !important; } .video-related > ul > li, .video-related > ul > li:first-child { border-color: transparent !important; } .video-related li, .video-related .item-post { border-radius: 12px; transition: background .15s; } .video-related li:hover { background: var(--surface) !important; } .video-related .data .title a, .video-related li a, .video-player-sidebar .data .title a { color: var(--text) !important; font-weight: 600 !important; font-size: 14px !important; line-height: 1.35 !important; } .video-related .usermeta, .video-related .usermeta a, .video-related .usermeta p, .video-player-sidebar .data .usermeta a { color: var(--text-2) !important; font-size: 12px !important; } .video-related .thumb, .video-related .clip, .video-related .thumb img { border-radius: 10px !important; overflow: hidden; } .video-related .thumb { position: relative; } .PlayUP { background: transparent !important; color: var(--text) !important; border-color: var(--border) !important; } .video-player-sidebar, .player-in-list, .playlistvibe { background: var(--surface) !important; border-radius: var(--radius); } .video-player-sidebar li.playingNow, .video-player-sidebar li:hover, .playlist-page-videos li:hover { background: var(--surface-2) !important; } .playlist-page-videos ol li { border-color: var(--border) !important; } .vside-title .material-icons { color: var(--accent) !important; } .vside-title a:not(.vside-owner) { background: var(--surface-2); padding: 5px 12px; border-radius: 16px; color: var(--text) !important; font-size: 12px; } /* comments */ .comments li .name, .comments li .name a { color: var(--text) !important; font-weight: 600; } .comments li .message .body { color: var(--text) !important; line-height: 1.55; } .comments .msg-footer a, .comments .msg-footer i, .reply .addEmComment { color: var(--text-2) !important; } .comments img.avatar { border: 0 !important; border-radius: 50%; } li.indanger { background: rgba(220, 38, 38, .1) !important; } /* profile / channels */ .p-profile .profile-user, .profile-hero .cute h1 { color: var(--text) !important; } .user-timeline .user-timeline-time, .user-timeline:before { background-color: var(--surface-3) !important; color: var(--text) !important; } .user-timeline .user-timeline-icon:after, .user-timeline .t-item:before { background: var(--bg) !important; } .user-small-list img, .cats img { border-color: var(--border) !important; } #ChannelResults .video-inner { background: var(--surface) !important; border-radius: var(--radius); } /* ---------------------------------------------------------------- misc + footer */ .video-thumb .timer, .thumb .timer { background: rgba(0, 0, 0, .78) !important; color: #fff !important; border-radius: 6px; } .backtotop { background: var(--surface-2) !important; border-radius: 50%; } .backtotop i { color: var(--text) !important; } .infinite-scroll-error { background: var(--surface) !important; color: var(--text-2) !important; border-radius: var(--radius); } .loadspinner:after, .cp-spinner, .cp-flip { background: var(--accent) !important; } #footer, #footer .footer-holder, .footer-holder, .footer-inner { background: var(--bg) !important; border-top: 1px solid var(--border) !important; color: var(--text-2) !important; } #footer a { color: var(--text-2) !important; } #footer a:hover { color: var(--text) !important; } /* ========================================================================== Update 4 ========================================================================== */ /* ---------- light / dark switch icon (shows the mode you can switch TO) */ .vibe-theme-toggle { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; margin: 0 6px !important; transition: background .15s; } .vibe-theme-toggle:hover { background: var(--surface-2); } .vibe-theme-toggle .vt-ico { width: 19px; height: 19px; } html.vd-dark .vibe-theme-toggle .vt-moon, html:not(.vd-dark) .vibe-theme-toggle .vt-sun { display: none; } /* ---------- homepage uses the full width (old theme limited it to 1640px) */ #home-content, .p-home #home-content, .page.p-home { max-width: none !important; width: 100% !important; float: none; } #home-content.main-holder { padding-left: 0 !important; padding-right: 0 !important; } html.vs-js .page { width: 100%; } /* ---------- upload pages: Shorts gets the same centred box as Video / Music / Picture */ .page.p-addshort { max-width: 900px; margin: 25px auto; } .page.p-addvideo, .page.p-share, .page.p-addmusic, .page.p-addimage, .page.p-addshort { max-width: 900px !important; margin-left: auto !important; margin-right: auto !important; } /* ---------- grid extras used by profile lists */ html body .vgrid > br, html body .vgrid .clearfix { display: none !important; } html body .vgrid .video-inner { background: transparent !important; padding: 0 !important; border: 0 !important; } html body .vgrid .video-data p.small { display: none !important; } html body .vgrid .video-thumb .heartit { display: none !important; } html body .vgrid .vSeen { font-size: 0 !important; color: transparent !important; } /* ---------- profile / channel page */ .page.p-profile { max-width: 1400px !important; margin: 24px auto 40px !important; width: 100%; } #profile-body { margin: 0 !important; } #profile-body #playlist-content.isBoxed { position: relative; overflow: hidden; border-radius: 22px !important; padding: 0 !important; margin: 0 0 18px !important; background: var(--surface) !important; border: 1px solid var(--border) !important; } #profile-body #playlist-content.isBoxed:before { content: ""; display: block; height: 120px; background: var(--grad); opacity: .9; } #profile-body .playlist-listing-head { display: flex !important; align-items: flex-end; gap: 24px; padding: 0 28px 24px !important; margin-top: -64px !important; flex-wrap: wrap; } #profile-body .playlist-listing-media-left { flex: 0 0 auto; float: none !important; width: auto !important; margin: 0 !important; } #profile-body .playlist-listing-image { width: 132px !important; height: 132px !important; border-radius: 50% !important; object-fit: cover; border: 5px solid var(--surface) !important; box-shadow: var(--shadow); background: var(--surface-2); } #profile-body .playlist-listing-media-body { flex: 1 1 320px; min-width: 0; float: none !important; width: auto !important; padding: 0 !important; } #profile-body .playlist-listing-media-body > p { color: var(--text-2) !important; margin: 0 0 2px !important; font-weight: 500; } #profile-body h1.playlist-listing-title { font-size: 30px !important; font-weight: 800 !important; letter-spacing: -.03em; margin: 0 0 8px !important; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: var(--text) !important; } #profile-body h1.playlist-listing-title .pull-right { float: none !important; margin-left: auto !important; display: flex; align-items: center; gap: 10px; } #profile-body h1.playlist-listing-title .pull-right a { margin: 0 !important; } #profile-body .playlist-listing-description { color: var(--text-2) !important; font-size: 14px; max-width: 760px; margin-bottom: 12px; } #profile-body .playlist-listing-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; } #profile-body .playlist-listing-btns > a, #profile-body .playlist-listing-btns > span, #profile-body .playlist-listing-btns > div { display: inline-flex !important; align-items: center; gap: 6px; float: none !important; margin: 0 !important; background: var(--surface-2); color: var(--text) !important; border-radius: 20px; padding: 6px 12px !important; font-size: 13px; font-weight: 600; } #profile-body .playlist-listing-btns i { font-size: 18px !important; color: var(--text-2) !important; margin: 0 !important; } #profile-body .playlist-listing-btns .playlist-listing-play { background: var(--grad) !important; color: #fff !important; } #profile-body .playlist-listing-btns .playlist-listing-play i { color: #fff !important; } #profile-body .profile-content { background: transparent !important; } #profile-body .profile-hero { min-height: 0 !important; height: auto !important; padding: 0 !important; background: none !important; } #profile-body .profile-social a { color: var(--text-2) !important; margin-left: 10px; } #profile-nav.red-nav { border: 0 !important; margin: 4px 0 14px !important; background: transparent !important; } #profile-nav.red-nav ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border-bottom: 1px solid var(--border); } #profile-nav.red-nav li { float: none !important; border: 0 !important; margin: 0 !important; background: transparent !important; } #profile-nav.red-nav li a { display: block; padding: 12px 16px !important; font-weight: 600; font-size: 14px; color: var(--text-2) !important; border-bottom: 2px solid transparent; } #profile-nav.red-nav li.active a { color: var(--text) !important; border-bottom-color: var(--accent); } #profile-nav.red-nav li a:hover { color: var(--text) !important; } #profile-body .panel { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; } #profile-body .loop-heading .btn { margin-left: auto; float: none !important; } #profile-body #videolist-content.usered { width: 100%; } @media (max-width: 700px) { #profile-body .playlist-listing-head { padding: 0 16px 18px !important; gap: 14px; } #profile-body .playlist-listing-image { width: 96px !important; height: 96px !important; } #profile-body h1.playlist-listing-title { font-size: 22px !important; } } /* ---------- dashboard / media studio */ .page.p-dashboard, .page.p-manager { max-width: 1400px; margin: 20px auto 40px !important; } #theHolder { display: flex; flex-direction: column; gap: 16px; margin: 0 !important; } #theHolder > #DashSidebar, #theHolder > #DashContent { float: none !important; width: 100% !important; max-width: 100%; padding: 0; } #DashSidebar.tab-pane, #DashContent.tab-pane { display: block !important; } .dash-nav-wrap { background: var(--surface) !important; border: 1px solid var(--border); border-radius: 20px; padding: 18px 18px 12px !important; } .dash-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; } .dash-me { display: flex; align-items: center; gap: 12px; color: var(--text) !important; min-width: 0; } .dash-me img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--surface-2); } .dash-me span { display: flex; flex-direction: column; min-width: 0; } .dash-me small { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2) !important; font-weight: 600; } .dash-me strong { font-size: 20px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-upload { margin-left: auto; display: inline-flex !important; align-items: center; gap: 6px; } .dash-nav { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .dash-nav::-webkit-scrollbar { display: none; } .dash-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 12px; color: var(--text-2) !important; font-weight: 600; font-size: 14px; white-space: nowrap; transition: background .15s, color .15s; } .dash-tab i { font-size: 19px; } .dash-tab:hover { background: var(--surface-2); color: var(--text) !important; } .dash-tab.is-active { background: var(--surface-2); color: var(--text) !important; box-shadow: inset 0 -2px 0 var(--accent); } .dash-tab.is-active i { color: var(--accent); } #DashContent.isBoxed { border-radius: 20px !important; padding: 22px !important; background: var(--surface) !important; border: 1px solid var(--border) !important; } #DashContent > .row, #DashContent .odet { margin: 0 !important; } #DashContent h2, #DashContent h1 { font-size: 20px !important; font-weight: 700 !important; letter-spacing: -.02em; margin: 22px 0 12px !important; } #DashContent h2:first-child { margin-top: 0 !important; } #DashContent .msg-content { border-radius: 14px !important; margin-bottom: 14px; } #DashContent .table > tbody > tr > td, #DashContent .table > thead > tr > th { vertical-align: middle !important; padding: 12px 10px !important; } #DashContent .table img { border-radius: 8px; } #DashContent .list-header { border-radius: 12px; padding: 10px 12px !important; } /* carousel rows (dashboard "watch again", homepage carousels) */ .owl-carousel .video { width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; aspect-ratio: auto !important; } .owl-carousel .video-thumb { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9; border-radius: 12px !important; overflow: hidden; background: var(--surface-2) !important; } .owl-carousel .video-thumb .clip-link, .owl-carousel .video-thumb .clip { position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; } .owl-carousel .video-thumb img { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; min-height: 0 !important; object-fit: cover; } .owl-carousel .video-thumb .overlay, .owl-carousel .video-thumb .vertical-align { display: none !important; } .owl-carousel .video-data { height: auto !important; padding: 10px 2px 0 !important; } .owl-carousel .video h4, .owl-carousel .video-title { margin: 0 0 4px !important; max-height: none !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .owl-carousel .video h4 a { font-family: var(--font) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--text) !important; } .owl-carousel .video ul.stats { margin: 0 !important; padding: 0 !important; } .owl-carousel .video ul.stats > li { font-size: 12px !important; color: var(--text-2) !important; font-weight: 400 !important; } .owl-carousel .video .uploaderlink a { color: var(--text-2) !important; font-size: 12px !important; } .owl-theme .owl-nav [class*="owl-"], .owl-nav button { background: var(--surface-2) !important; color: var(--text) !important; border-radius: 50% !important; } .owl-theme .owl-dots .owl-dot span { background: var(--surface-3) !important; } .owl-theme .owl-dots .owl-dot.active span { background: var(--accent) !important; }