tr.hue-photo-right { display: flex; flex-direction: row-reverse; } .hue-mobile-only, .hue-sheet-head { display: none; } @media (max-width: 1000px) and (min-width: 701px) { #sidebar-cell { width: 150px !important; } #topbar-table > tbody > tr > td:first-child { width: 1% !important; } #ap-controls > table { width: 100% !important; } #topbar-user { white-space: normal; } #topbar-user form { display: none !important; } .hue-stack-tablet, .hue-stack-tablet > tbody, .hue-stack-tablet > tbody > tr { display: block; width: 100% !important; } .hue-stack-tablet > tbody > tr > td { display: block; width: auto !important; padding: 0 0 8px 0 !important; } } @media (max-width: 700px) { body { -webkit-text-size-adjust: 100%; margin: 0; } #huevo-layout, #huevo-layout > tbody, #huevo-layout > tbody > tr { display: block; width: 100%; } #huevo-layout > tbody > tr > td { display: block; width: auto !important; padding: 8px 8px !important; } #sidebar-cell { display: none !important; } #sidebar-cell.menu-open { display: block !important; position: fixed; top: var(--hue-top, 48px); left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom)); z-index: 640; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #FFFFFF; padding: 0 0 12px 0 !important; box-sizing: border-box; } html.hue-menu-open, html.hue-menu-open body { overflow: hidden; } .hue-sheet-head { display: flex !important; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #E6E6E6; font-size: 16px; position: sticky; top: 0; background: #FFFFFF; z-index: 1; } .hue-sheet-head a { font-size: 26px; line-height: 1; text-decoration: none; color: #555555; padding: 0 4px; } #sidebar-nav { display: block; width: 100%; } #sidebar-nav tbody { display: block; } #sidebar-nav tr { display: block; } #sidebar-nav td { display: block; padding: 0 !important; } #sidebar-nav td > a { display: flex; align-items: center; gap: 14px; padding: 12px 18px; font-size: 15px; text-decoration: none; color: #222222; border-bottom: 1px solid #F0F0F0; } #sidebar-nav td > a .hue-ico { display: inline-block !important; color: #6E737A; } #sidebar-nav td > a.active { background: #F2F2F2; } #sidebar-nav hr { display: none; } #sidebar-nav tr:has(hr) { display: block; height: 8px; background: #F4F4F4; } #ap-header-wrap { position: fixed !important; top: 0; left: 0; right: 0; z-index: 650; } body { padding-top: var(--hue-top, 48px); padding-bottom: calc(64px + env(safe-area-inset-bottom)); } html { scroll-padding-top: calc(var(--hue-top, 48px) + 8px); } #topbar-table, #topbar-table > tbody { display: block; width: 100%; } #topbar-table > tbody > tr { display: flex; align-items: center; } #topbar-table > tbody > tr > td { display: block; width: auto !important; padding: 6px 8px !important; } #topbar-table > tbody > tr > td:first-child { flex: 0 0 auto; } #topbar-user { display: none !important; } #ap-controls { flex: 1 1 0; min-width: 0; } #ap-controls > table { width: 100% !important; } #ap-controls .ap-vol-cell, #ap-controls .ap-time-cell, #ap-controls .ap-modes-cell { display: none; } #ap-controls .ap-seek-row td { padding-top: 3px !important; } #ap-controls .ap-buttons a { display: inline-block; min-width: 26px; text-align: center; font-size: 16px; } #ap-panel { position: fixed !important; top: var(--hue-top, 48px) !important; left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; border-left: none !important; border-right: none !important; max-height: calc(100vh - var(--hue-top, 48px) - 64px); overflow-y: auto; } #ap-panel table, #ap-panel tbody, #ap-panel > table > tbody > tr { display: block; width: 100%; } #ap-panel > table > tbody > tr > td { display: block; width: auto !important; border-left: none !important; } #ap-list-wrap { max-height: 45vh; } #ap-seek { width: 100% !important; } #hue-tabbar { display: flex !important; } #hue-popups { bottom: calc(70px + env(safe-area-inset-bottom)); } #main-content input[type="submit"], #main-content input[type="button"], #main-content button { min-height: 34px; } #main-content td[width], #main-content th[width] { width: auto !important; } #main-content table { table-layout: auto; word-break: break-word; } #main-content table[border="1"] { width: 100% !important; } #main-content tr.post-row { display: block; } #main-content tr.post-row > td { display: block; width: auto !important; border-right: none !important; padding-left: 10px !important; } #main-content tr.post-row > td:first-child { display: flow-root; padding-top: 6px !important; padding-bottom: 6px !important; border-bottom: 1px solid #EEEEEE; } #main-content tr.post-row > td:first-child > img { float: left; width: 40px !important; height: 40px !important; margin: 0 8px 0 0; } #main-content tr.post-row > td:first-child > img + br { display: none; } #main-content img { max-width: 100%; height: auto; } img.hue-av-main { width: 160px !important; display: block; margin: 0 auto; } #chat-box { height: calc(100vh - 330px) !important; max-height: none !important; min-height: 300px; } #main-content textarea, #main-content input[type="text"], #main-content input[type="password"] { width: 100% !important; box-sizing: border-box; } #audio-picker > table, #video-picker > table, #poll-voters-modal > table, #graffiti-modal > table { width: 96% !important; margin: auto !important; } #emoji-panel { width: 92% !important; } #admin-modal > table { width: 92% !important; } .hue-stack, .hue-stack > tbody, .hue-stack > tbody > tr { display: block; width: 100% !important; } .hue-stack > tbody > tr > td { display: block; width: auto !important; } .hue-stack[border="0"] > tbody > tr > td { padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 8px; } .hue-rows > tbody > tr { display: flex; flex-wrap: wrap; } .hue-rows > tbody > tr > td { width: auto !important; } .hue-rows > tbody > tr > td:last-child { flex: 1 1 100%; padding-left: 25px; padding-top: 0; } .hue-cells > tbody > tr { display: flex; flex-wrap: wrap; } .hue-cells > tbody > tr > td { flex: 1 1 30%; width: auto !important; border-right: none !important; border-bottom: 1px solid #E6E6E6; box-sizing: border-box; } .hue-grid, .hue-grid > tbody { display: block; } .hue-grid > tbody > tr { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; } .hue-grid > tbody > tr > td { flex: 1 1 40%; width: auto !important; box-sizing: border-box; } .hue-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .hue-scroll > table { min-width: 560px; } table.hue-wide { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100% !important; } table.hue-wide th, table.hue-wide td { white-space: nowrap; overflow-wrap: normal !important; } .hue-cards, .hue-cards > tbody { display: block; width: 100% !important; } .hue-cards > tbody > tr { display: block; border-bottom: 1px solid #DDDDDD; padding: 4px 0; } .hue-cards > tbody > tr:first-child { display: none; } .hue-cards > tbody > tr:only-child { display: block; } .hue-cards > tbody > tr > td { display: inline-block; width: auto !important; border: none !important; padding: 2px 6px !important; vertical-align: top; } .hue-cards > tbody > tr > td:last-child { display: block; } .hue-form, .hue-form > tbody, .hue-form > tbody > tr { display: block; width: 100% !important; box-sizing: border-box; } .hue-form > tbody > tr > td { display: block; width: auto !important; text-align: left !important; padding-top: 2px !important; } .hue-form > tbody > tr > td:first-child { padding-top: 8px !important; } .hue-hide-mobile { display: none !important; } .hue-mobile-only { display: block; } #builder-layout div[style*="sticky"] { position: static !important; } #builder-layout .builder-frame { height: 75vh !important; } #main-content select { max-width: 100%; } } .hue-vmark { position: relative; display: inline-block; width: 14px; height: 14px; line-height: 14px; margin-left: 3px; border-radius: 50%; background: #3A3A3A; color: #FFFFFF !important; font: bold 10px/14px Arial, Helvetica, sans-serif; text-align: center; text-decoration: none !important; vertical-align: middle; cursor: pointer; } .hue-vmark.big { width: 18px; height: 18px; font-size: 12px; line-height: 18px; } .hue-vmark.light { background: #FFFFFF; color: #3A3A3A !important; } .hue-vmark::after { content: attr(data-tip); position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); width: 210px; padding: 5px 8px; background: #3A3A3A; color: #FFFFFF; font: normal 11px/1.35 Tahoma, Verdana, Arial, sans-serif; text-align: left; white-space: normal; overflow-wrap: normal; box-shadow: 0 2px 6px rgba(0,0,0,0.3); display: none; pointer-events: none; z-index: 950; } .hue-vmark::before { content: ''; position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top: none; border-bottom-color: #3A3A3A; display: none; z-index: 951; } .hue-vmark.light::before { border-bottom-color: #FFFFFF; } .hue-vmark.light::after { background: #FFFFFF; color: #3A3A3A; border: 1px solid #3A3A3A; } .hue-vmark.tip-left::after { left: auto; right: -6px; transform: none; } .hue-vmark:hover::after, .hue-vmark:hover::before, .hue-vmark:focus-visible::after, .hue-vmark:focus-visible::before { display: block; } [data-row-href] { cursor: pointer; } [data-row-href]:hover { background-color: #F2F2F2; } #main-content td, #main-content th, #topbar-user, #sidebar-nav td { overflow-wrap: anywhere; } #main-content table { max-width: 100%; } input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: #3A3A3A; } #topbar-table input[type="range"] { accent-color: #D0D0D0; } @keyframes hue-spin { to { transform: rotate(360deg); } } #hue-loader-spinner { width: 36px; height: 36px; margin: 0 auto; border: 3px solid rgba(255,255,255,0.25); border-top-color: #FFFFFF; border-radius: 50%; animation: hue-spin 0.8s linear infinite; } #hue-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: #B01E1E; z-index: 3500; opacity: 0; pointer-events: none; box-shadow: 0 0 6px rgba(176, 30, 30, 0.7); transition: width 0.2s ease, opacity 0.25s ease; } #hue-progress.on { opacity: 1; } #hue-loading-note { display: none; position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 3501; padding: 4px 14px; background: #3A3A3A; color: #FFFFFF; border: 1px solid #5A5A5A; font: 12px Tahoma, Verdana, Arial, sans-serif; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); pointer-events: none; } html.hue-busy body { cursor: progress; } #hue-popups { position: fixed; left: 16px; bottom: 16px; z-index: 1300; width: 300px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; gap: 6px; pointer-events: none; } .hue-popup { pointer-events: auto; display: flex; align-items: flex-start; gap: 8px; padding: 8px 26px 8px 8px; background: rgba(0, 0, 0, 0.8); color: #FFFFFF; font-size: 12px; line-height: 1.35; cursor: pointer; position: relative; border: 1px solid rgba(255, 255, 255, 0.08); box-sizing: border-box; animation: huePopIn .18s ease-out; } .hue-popup:hover { background: rgba(0, 0, 0, 0.88); } .hue-popup-av { width: 40px; height: 40px; flex-shrink: 0; object-fit: cover; background: #555555; border: 1px solid #666666; } .hue-popup-body { min-width: 0; flex: 1; } .hue-popup-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hue-popup-title b { color: #FFFFFF; } .hue-popup-where { color: #BDBDBD; } .hue-popup-text { color: #E6E6E6; margin-top: 2px; word-wrap: break-word; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .hue-popup-x { position: absolute; top: 3px; right: 7px; color: #BDBDBD !important; text-decoration: none; font-size: 15px; } .hue-popup-x:hover { color: #FFFFFF !important; } @keyframes huePopIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .hue-link-card { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; max-width: 460px; padding: 6px 8px 6px 10px; border-left: 3px solid #B01E1E; background: #F7F7F7; text-decoration: none !important; color: #222222 !important; box-sizing: border-box; overflow: hidden; } .hue-link-card img { width: 90px; height: 64px; object-fit: cover; flex-shrink: 0; background: #E6E6E6; } .hue-link-card-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 1.35; } .hue-link-site { color: #888888; font-size: 11px; } .hue-link-title { font-weight: bold; color: #3A3A3A; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hue-link-desc { color: #555555; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hue-link-card:hover .hue-link-title { text-decoration: underline; } .hue-ico { display: inline-block; width: 20px; height: 20px; flex: 0 0 20px; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; vertical-align: middle; } .hue-ico-home { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); } .hue-ico-news { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M7 8h10M7 12h10M7 16h6'/%3E%3C/svg%3E"); } .hue-ico-msg { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 21l1.9-5.1A8 8 0 1 1 21 12z'/%3E%3C/svg%3E"); } .hue-ico-friends { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E"); } .hue-ico-phone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); } .hue-ico-bell { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E"); } .hue-ico-groups { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2 20c0-3.6 3.1-6 7-6s7 2.4 7 6'/%3E%3Ccircle cx='17.5' cy='9' r='2.5'/%3E%3Cpath d='M17 14c2.9.2 5 2.2 5 5'/%3E%3C/svg%3E"); } .hue-ico-music { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E"); } .hue-ico-video { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='15' height='14' rx='2'/%3E%3Cpath d='m22 7-5 4 5 4z'/%3E%3C/svg%3E"); } .hue-ico-star { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E"); } .hue-ico-gift { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M5 12v9h14v-9M7.5 8a2.5 2.5 0 1 1 0-5C11 3 12 8 12 8s1-5 4.5-5a2.5 2.5 0 1 1 0 5'/%3E%3C/svg%3E"); } .hue-ico-coin { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9.5c-.5-1-1.6-1.5-3-1.5-1.7 0-3 .9-3 2s1.3 1.7 3 2 3 .9 3 2-1.3 2-3 2c-1.4 0-2.5-.5-3-1.5M12 6v2M12 16v2'/%3E%3C/svg%3E"); } .hue-ico-search { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); } .hue-ico-help { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01'/%3E%3C/svg%3E"); } .hue-ico-settings { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E"); } .hue-ico-shield { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); } .hue-ico-ticket { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3a2 2 0 0 0 0-4z'/%3E%3Cpath d='M13 5v14'/%3E%3C/svg%3E"); } .hue-ico-flag { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22V4M4 4h13l-2 4 2 4H4'/%3E%3C/svg%3E"); } .hue-ico-logout { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E"); } .hue-ico-menu { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E"); } .theme-legacy #sidebar-nav .hue-ico { display: none; } #sidebar-nav td > a > span { vertical-align: middle; } .hue-badge { color: #E00000; font-weight: bold; } .hue-badge::before { content: '('; } .hue-badge::after { content: ')'; } .hue-badge.plus::before { content: '(+'; } img.hue-av { aspect-ratio: 1 / 1; height: auto !important; object-fit: contain !important; background: #EDEDED; } img.hue-av-main { aspect-ratio: 1 / 1; height: auto !important; max-width: 100%; max-height: 360px; object-fit: cover !important; object-position: center 20%; background: transparent; } #hue-tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 660; height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #FFFFFF; border-top: 1px solid #D9D9D9; box-sizing: border-box; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06); } #hue-tabbar a { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; position: relative; color: #7A7F86; text-decoration: none; font: 10px/1.1 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; -webkit-tap-highlight-color: transparent; min-width: 0; } #hue-tabbar a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } #hue-tabbar a .hue-ico { width: 24px; height: 24px; flex-basis: 24px; } #hue-tabbar a.active { color: #B01E1E; } #hue-tabbar .tab-badge { position: absolute; top: 5px; left: 50%; margin-left: 6px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: #E0262B; color: #FFFFFF; font: bold 10px/16px Arial, sans-serif; text-align: center; } #hue-tabbar .tab-badge:empty { display: none; } .hue-ico-camera { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E"); } .hue-ico-pen { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); } .hue-ico-smile { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01'/%3E%3C/svg%3E"); } .hue-ico-poll { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 20V10M12 20V4M6 20v-6'/%3E%3C/svg%3E"); } .hue-ico-heart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E"); } .hue-ico-share { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8M16 6l-4-4-4 4M12 2v13'/%3E%3C/svg%3E"); } .hue-ico-comment { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); } .hue-ico-heart-fill { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E"); } .vk-like.liked .hue-ico-heart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E"); } #main-content table[data-post-card] { content-visibility: auto; contain-intrinsic-size: auto 360px; } #chat-box [id^="msg-"] { cursor: default; } #chat-box [id^="msg-"].hue-msg-selected { background-color: #E4E6EA !important; } #chat-box [id^="msg-"].hue-msg-flash { box-shadow: 0 0 0 2px #E6C34A; } #hue-msg-bar { display: none; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; padding: 6px 10px; background: #3A3A3A; color: #FFFFFF; border-radius: 6px; font-size: 13px; position: sticky; top: var(--hue-top, 0); z-index: 5; } #hue-msg-bar a { color: #FFFFFF !important; text-decoration: none; padding: 4px 10px; border-radius: 4px; } #hue-msg-bar a:hover { background: rgba(255, 255, 255, 0.12); } #hue-msg-bar .hue-msg-bar-info { color: #BDBDBD; margin-right: auto; padding-right: 6px; } #hue-msg-bar .hue-msg-bar-x { font-size: 18px; line-height: 1; } .hue-quote { display: block; margin: 4px 0 4px 0; padding: 2px 0 2px 10px; border-left: 2px solid #B01E1E; font-size: 12.5px; line-height: 1.4; cursor: pointer; max-width: 520px; } .hue-quote b { display: block; color: #3A3A3A; } .hue-quote span { display: block; color: #666666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hue-fwd { font-size: 12px; color: #888888; margin: 2px 0; } .hue-fwd a { color: #3A3A3A; font-weight: bold; } #hue-reply-preview { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 4px 8px; background: #F4F4F4; border-radius: 6px; } #hue-reply-preview .hue-quote { flex: 1; min-width: 0; margin: 0; cursor: default; } #hue-reply-preview .hue-reply-x { font-size: 20px; text-decoration: none; color: #888888; } #hue-fwd-modal { display: none; position: fixed; inset: 0; z-index: 1450; background: rgba(0, 0, 0, 0.5); align-items: center; justify-content: center; } #hue-fwd-modal .hue-fwd-box { width: 420px; max-width: 94vw; max-height: 80vh; display: flex; flex-direction: column; background: #FFFFFF; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); font: 13px Tahoma, Verdana, Arial, sans-serif; } #hue-fwd-modal .hue-fwd-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #3A3A3A; color: #FFFFFF; } #hue-fwd-modal .hue-fwd-head a { color: #FFFFFF; text-decoration: none; font-size: 20px; line-height: 1; } #hue-fwd-modal .hue-fwd-quote { padding: 8px 14px 0 14px; } #hue-fwd-modal input[type="text"] { margin: 8px 14px 0 14px; width: calc(100% - 28px); box-sizing: border-box; padding: 6px 8px; } #hue-fwd-modal .hue-fwd-list { overflow-y: auto; padding: 8px 6px 10px 6px; margin-top: 6px; border-top: 1px solid #EEEEEE; } #hue-fwd-modal .hue-fwd-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; color: #222222; text-decoration: none; } #hue-fwd-modal .hue-fwd-item:hover { background: #F2F2F2; } #hue-fwd-modal .hue-fwd-item img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #E4E6E9; } #hue-fwd-modal .hue-fwd-item small { color: #888888; } .theme-modern #hue-msg-bar { background: #2F3033; border-radius: 8px; top: 56px; } .theme-modern .hue-quote b { color: var(--link); } .theme-modern #hue-fwd-modal .hue-fwd-box { font-family: var(--font); } .theme-modern #hue-fwd-modal .hue-fwd-head { background: #2F3033; } .hue-ico-send { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V5'/%3E%3Cpath d='M5.5 11.5 12 5l6.5 6.5'/%3E%3C/svg%3E"); } #pinned-box { position: relative; background: #FFFFFF !important; border: 1px solid #E3E4E8 !important; border-left: 3px solid #3A3A3A !important; border-radius: 6px; padding: 7px 12px 7px 34px !important; color: #333333; } #pinned-box::before { content: ''; position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); background-color: #8A9099; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M9 3h6l-1 6 4 4v2H6v-2l4-4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M9 3h6l-1 6 4 4v2H6v-2l4-4z'/%3E%3C/svg%3E") center / contain no-repeat; } #pinned-box a[data-goto-pinned] { color: #333333 !important; } .theme-modern #pinned-box { border-left-color: var(--accent) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } @media (max-width: 700px) { input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], input:not([type]), textarea, select { font-size: 16px !important; } } @media (max-width: 700px) { html { touch-action: manipulation; } } @media (max-width: 700px) { html, body { overscroll-behavior: none; overflow-x: clip; max-width: 100%; } #chat-box, #ap-panel, #ap-list-wrap, #sidebar-cell.menu-open, #mh-notif-list, #emoji-panel, #emoji-grid, #hue-fwd-modal .hue-fwd-list, #audio-picker, #video-picker, #poll-voters-modal, #pvm-list, #members-modal, #new-chat-modal, .vk-right .vk-subnav { overscroll-behavior: contain; } #chat-box { -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; } html.hue-chat-page, html.hue-chat-page body { overflow: hidden; height: 100%; } html.hue-chat-page body { padding-bottom: 0 !important; } html.hue-chat-page #mobile-ad { display: none !important; } #main-content img, #main-content video, #main-content iframe, #main-content table { max-width: 100% !important; } #main-content pre, #main-content code { white-space: pre-wrap; word-break: break-word; } } .hue-gbadge { display: inline-block; vertical-align: -3px; margin-left: 4px; line-height: 0; text-decoration: none !important; } .hue-gbadge img { width: 16px !important; height: 16px !important; object-fit: contain; border: 0 !important; border-radius: 0 !important; } .hue-gbadge-ico { font-size: 13px; line-height: 16px; } .hue-vmark + .hue-gbadge { margin-left: 3px; } .hue-vmark.big ~ .hue-gbadge img, .vk-page-name .hue-gbadge img { width: 22px !important; height: 22px !important; } .vk-page-name .hue-gbadge { vertical-align: -4px; } #topbar-user .hue-gbadge img { width: 15px !important; height: 15px !important; } @media (max-width: 700px) { #topbar-user .hue-gbadge { display: none !important; } } .hue-poll-pick { list-style: none; display: inline-flex !important; align-items: center; gap: 4px; } .hue-poll-pick::-webkit-details-marker { display: none; } .hue-poll-pick .hue-ico { width: 16px; height: 16px; flex: 0 0 16px; color: #7A8088; vertical-align: -3px; } .hue-poll-pick:hover .hue-ico { color: #3A3A3A; } .hue-tipped { position: relative; } .hue-tipped::after { content: attr(data-tip); position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); width: 210px; padding: 5px 8px; background: #3A3A3A; color: #FFFFFF; font: normal 11px/1.35 Tahoma, Verdana, Arial, sans-serif; text-align: left; letter-spacing: 0; white-space: normal; overflow-wrap: normal; box-shadow: 0 2px 6px rgba(0,0,0,0.3); display: none; pointer-events: none; z-index: 950; text-transform: none; } .hue-tipped::before { content: ''; position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top: none; border-bottom-color: #3A3A3A; display: none; z-index: 951; } .hue-tipped:hover::after, .hue-tipped:hover::before, .hue-tipped:focus::after, .hue-tipped:focus::before { display: block; } .hue-gbadge.hue-tipped::after { line-height: 1.35; } .hue-cbadge { display: inline-flex; align-items: center; justify-content: center; vertical-align: -3px; margin-left: 3px; height: 16px; min-width: 16px; line-height: 16px; cursor: default; outline: none; } .hue-cbadge img { width: 16px !important; height: 16px !important; object-fit: cover; border: 0 !important; border-radius: 50% !important; display: block; } .hue-cbadge-sym { border-radius: 8px; font-size: 10px; overflow: visible; } .hue-cbadge-sym:not(.hue-cbadge-text) { width: 16px; font-size: 10px; } .hue-cbadge-text { padding: 0; width: 16px; font: bold 9px/16px Arial, Helvetica, sans-serif; letter-spacing: 0; white-space: nowrap; overflow: hidden; } .hue-cbadge { width: 16px; overflow: hidden; vertical-align: middle; } .hue-cbadge-sym, .hue-cbadge-text { font-size: 9px; line-height: 16px; } .vk-page-name .hue-cbadge, .hue-vmark.big ~ .hue-cbadge { width: 18px; min-width: 18px; height: 18px; line-height: 18px; font-size: 11px; margin-left: 4px; vertical-align: middle; } .vk-page-name .hue-cbadge img, .hue-vmark.big ~ .hue-cbadge img { width: 18px !important; height: 18px !important; } @media (max-width: 700px) { #topbar-user .hue-cbadge { display: none !important; } } .hue-tipped.hue-tip-open::after, .hue-tipped.hue-tip-open::before { display: block; } #hue-who-pop { display: none; position: absolute; z-index: 960; background: #3A3A3A; color: #FFFFFF; border-radius: 8px; padding: 8px 10px 10px 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); max-width: 330px; box-sizing: border-box; } #hue-who-pop::after { content: ''; position: absolute; left: var(--arrow, 50%); bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-bottom: 0; border-top-color: #3A3A3A; } #hue-who-pop.below::after { bottom: auto; top: -6px; border-top: 0; border-bottom: 6px solid #3A3A3A; } #hue-who-pop .hue-who-head { display: block; font: 600 12.5px/1.3 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #FFFFFF !important; margin-bottom: 8px; text-decoration: none !important; white-space: nowrap; } #hue-who-pop a.hue-who-head:hover { text-decoration: underline !important; } #hue-who-pop .hue-who-row { display: flex; gap: 6px; flex-wrap: nowrap; } #hue-who-pop .hue-who-row a { display: block; line-height: 0; border-radius: 50%; } #hue-who-pop .hue-who-row img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; background: #55565B; } #hue-who-pop .hue-who-row a:hover img { box-shadow: 0 0 0 2px #FFFFFF; } #hue-share-modal { display: none; position: fixed; inset: 0; z-index: 1260; background: rgba(0, 0, 0, 0.55); align-items: flex-start; justify-content: center; padding: 70px 12px 20px 12px; box-sizing: border-box; overflow-y: auto; } #hue-share-modal .hs-box { width: 480px; max-width: 100%; background: #FFFFFF; border-radius: 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #1F2023; } #hue-share-modal .hs-tabs { display: flex; align-items: center; border-bottom: 1px solid #E7E8EC; padding: 0 20px; height: 54px; } #hue-share-modal .hs-tab { font-size: 14px; font-weight: 500; height: 54px; line-height: 54px; border-bottom: 2px solid #B01E1E; } #hue-share-modal .hs-x { margin-left: auto; font-size: 24px; color: #A3A9B1 !important; text-decoration: none !important; line-height: 1; } #hue-share-modal .hs-x:hover { color: #1F2023 !important; } #hue-share-modal .hs-body { padding: 16px 20px 6px 20px; } #hue-share-modal .hs-label { font-weight: 600; margin: 0 0 10px 0; } #hue-share-modal .hs-label-c { margin-top: 16px; } #hue-share-modal .hs-opt { display: flex; align-items: center; gap: 8px; margin: 0 0 10px 0; cursor: pointer; } #hue-share-modal .hs-opt.off { color: #A3A9B1; cursor: default; } #hue-share-modal .hs-opt input { accent-color: #B01E1E; margin: 0; } #hue-share-modal .hs-hint { color: #818C99; font-size: 12px; } #hue-share-modal .hs-sub { display: none; margin: -2px 0 12px 22px; } #hue-share-modal .hs-select, #hue-share-modal .hs-input { width: 100%; box-sizing: border-box; height: 34px; border: 1px solid #DCE1E6; border-radius: 6px; padding: 0 10px; background: #FFFFFF; font: inherit; color: inherit; } #hue-share-modal .hs-list { max-height: 190px; overflow-y: auto; margin-top: 6px; border: 1px solid #E7E8EC; border-radius: 6px; overscroll-behavior: contain; } #hue-share-modal .hs-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; color: #1F2023 !important; text-decoration: none !important; } #hue-share-modal .hs-row:hover { background: #F0F2F5; } #hue-share-modal .hs-row.on { background: #F6E9E9; } #hue-share-modal .hs-row img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } #hue-share-modal .hs-row small { color: #818C99; } #hue-share-modal .hs-empty { padding: 12px; color: #818C99; text-align: center; } #hue-share-modal .hs-ta-wrap { position: relative; } #hue-share-modal textarea { width: 100%; box-sizing: border-box; min-height: 84px; resize: vertical; border: 1px solid #DCE1E6; border-radius: 6px; padding: 8px 34px 8px 10px; font: inherit; } #hue-share-modal .hs-emoji { position: absolute; right: 8px; top: 7px; color: #A3A9B1 !important; } #hue-share-modal .hs-emoji .hue-ico { width: 20px; height: 20px; } #hue-share-modal .hs-foot { display: flex; align-items: center; gap: 12px; padding: 12px 20px 16px 20px; } #hue-share-modal .hs-err { color: #B01E1E; font-size: 12.5px; flex: 1; } #hue-share-modal .hs-send { margin-left: auto; height: 34px; padding: 0 18px; border: 0; border-radius: 8px; background: #3A3A3A; color: #FFFFFF; font: 500 13px var(--font, Arial); cursor: pointer; } #hue-share-modal .hs-send:hover { background: #B01E1E; } #hue-share-modal .hs-send:disabled { opacity: 0.6; cursor: default; } #vk-photo-view .pv-likes { padding: 10px 16px; border-bottom: 1px solid #E7E8EC; } #vk-photo-view .pv-like { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 16px; background: #F2F3F5; color: #626D7A !important; text-decoration: none !important; font-weight: 500; } #vk-photo-view .pv-like .hue-ico { width: 18px; height: 18px; } #vk-photo-view .pv-like:hover { background: #E9EBEE; } #vk-photo-view .pv-like.liked { color: #E0262B !important; background: #FCEBEC; } #vk-photo-view .pv-side { min-height: 420px; max-height: calc(100vh - 60px); } #vk-photo-view .pv-acts-row { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid #E7E8EC; } #vk-photo-view .pv-act { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px; background: #F2F3F5; color: #626D7A !important; text-decoration: none !important; font-weight: 500; } #vk-photo-view .pv-act:hover { background: #E9EBEE; } #vk-photo-view .pv-act .hue-ico { width: 18px; height: 18px; flex: 0 0 18px; } #vk-photo-view .pv-act .pv-n:empty { display: none; } #vk-photo-view .pv-like.liked { color: #E0262B !important; background: #FCEBEC; } #vk-photo-view .pv-cmts { flex: 1; overflow-y: auto; padding: 4px 0; overscroll-behavior: contain; min-height: 120px; } #vk-photo-view .pv-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; height: 100%; min-height: 160px; box-sizing: border-box; } #vk-photo-view .pv-empty .hue-ico { width: 46px; height: 46px; color: #C4C8CD; } #vk-photo-view .pv-c { display: flex; gap: 10px; padding: 8px 16px; } #vk-photo-view .pv-c:hover { background: #F7F8FA; } #vk-photo-view .pv-c-av img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; } #vk-photo-view .pv-c-main { flex: 1; min-width: 0; } #vk-photo-view .pv-c-head { display: flex; align-items: center; } #vk-photo-view .pv-c-head a { color: #2E3136 !important; font-weight: 600; text-decoration: none !important; } #vk-photo-view .pv-c-head .pv-c-del { margin-left: auto; color: #A0A6AD !important; font-weight: 400; font-size: 16px; line-height: 1; opacity: 0; } #vk-photo-view .pv-c:hover .pv-c-del { opacity: 1; } #vk-photo-view .pv-c-text { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; line-height: 1.4; } #vk-photo-view .pv-c-time { color: #818C99; font-size: 12px; margin-top: 2px; } #vk-photo-view .pv-write { display: flex; align-items: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid #E7E8EC; margin: 0; } #vk-photo-view .pv-write img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; margin-bottom: 3px; } #vk-photo-view .pv-write textarea { flex: 1; min-height: 34px; max-height: 120px; resize: none; border: 1px solid #DCE1E6; border-radius: 17px; padding: 7px 12px; box-sizing: border-box; font: inherit; outline: none; } #vk-photo-view .pv-write textarea:focus { border-color: #B9BEC5; } #vk-photo-view .pv-write button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #3A3A3A; color: #FFFFFF; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } #vk-photo-view .pv-write button .hue-ico { width: 16px; height: 16px; } #vk-photo-view .pv-bar-acts { display: inline-flex; gap: 14px; } @media (max-width: 700px) { #vk-photo-view .pv-side { min-height: 0; max-height: none; flex: 1; } #vk-photo-view .pv-write textarea { font-size: 16px; } } .hue-fwd-more { color: #818C99; font-size: 12px; margin: 2px 0 0 10px; } #hue-fwd-modal .hue-fwd-quote .hue-quote + .hue-quote { margin-top: 4px; } .hue-ico-saved { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); } .hue-ico-zvuk { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10v4M7 6v12M11 3v18M15 7v10M19 10v4'/%3E%3C/svg%3E"); } #vk-photo-view .pv-bar { flex-wrap: wrap; } #vk-photo-view .pv-bar-acts a { margin-left: 0; } #vk-photo-view .pv-bar-acts > a + a::before, #vk-photo-view .pv-bar-acts > .pv-more::before { content: '·'; color: #6E737A; margin: 0 8px 0 -6px; } #vk-photo-view .pv-more { position: relative; display: inline-block; } #vk-photo-view .pv-more-list { display: none; position: absolute; right: 0; bottom: calc(100% + 8px); background: #2A2B2E; border-radius: 8px; padding: 6px 0; min-width: 190px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); z-index: 5; } #vk-photo-view .pv-more.open .pv-more-list { display: block; } #vk-photo-view .pv-more-list a { display: block; padding: 8px 14px; color: #E1E3E6 !important; white-space: nowrap; } #vk-photo-view .pv-more-list a:hover { background: #3A3B3F; } #vk-photo-view .pv-who small a { color: #818C99 !important; font-weight: 400; } .hue-saved { background: #FFFFFF; border-radius: 10px; box-shadow: 0 0 0 1px #DCE1E6; padding: 16px 18px; } .hue-saved-head { margin-bottom: 14px; } .hue-saved-head b { font-size: 16px; font-weight: 600; } .hue-saved-count { color: #818C99; margin-left: 4px; } .hue-saved-note { display: block; color: #818C99; font-size: 12.5px; margin-top: 4px; } .hue-saved-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; } .hue-saved-item { position: relative; aspect-ratio: 1 / 1; background: #F2F3F5; border-radius: 6px; overflow: hidden; } .hue-saved-item img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; } .hue-saved-del { position: absolute; top: 6px; right: 6px; margin: 0; opacity: 0; transition: opacity 0.15s; } .hue-saved-item:hover .hue-saved-del { opacity: 1; } .hue-saved-del button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.6); color: #FFFFFF; font-size: 16px; cursor: pointer; line-height: 1; } .hue-saved-empty { color: #818C99; text-align: center; padding: 40px 10px; } @media (hover: none) { .hue-saved-del { opacity: 1; } } #hue-saved-modal { display: none; position: fixed; inset: 0; z-index: 1260; background: rgba(0, 0, 0, 0.55); align-items: flex-start; justify-content: center; padding: 70px 12px 20px 12px; box-sizing: border-box; } #hue-saved-modal .hsm-box { width: 560px; max-width: 100%; background: #FFFFFF; border-radius: 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); overflow: hidden; } #hue-saved-modal .hsm-head { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid #E7E8EC; } #hue-saved-modal .hsm-x { margin-left: auto; font-size: 24px; color: #A3A9B1 !important; text-decoration: none !important; line-height: 1; } #hue-saved-modal .hsm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; padding: 12px; max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; } #hue-saved-modal .hsm-grid a { display: block; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: #F2F3F5; } #hue-saved-modal .hsm-grid a:hover { box-shadow: 0 0 0 2px #B01E1E; } #hue-saved-modal .hsm-grid img { width: 100%; height: 100%; object-fit: cover; display: block; } #hue-saved-modal .hsm-empty { grid-column: 1 / -1; color: #818C99; text-align: center; padding: 30px 10px; } .hue-saved-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #626D7A; background: #F2F3F5; border-radius: 12px; padding: 2px 8px 2px 2px; margin: 4px 6px 0 0; } .hue-saved-chip img { width: 22px; height: 22px; border-radius: 10px; object-fit: cover; } .hue-saved-chip a { color: #A0A6AD !important; text-decoration: none !important; font-size: 15px; line-height: 1; } .hue-gif-btn { font: bold 10px/1 Tahoma, Verdana, Arial, sans-serif !important; letter-spacing: 0.5px; color: #828A99 !important; text-decoration: none !important; border: 1.5px solid currentColor; padding: 2px 3px; align-self: center; flex: none; } .hue-gif-btn.vk-tool { width: auto !important; min-width: 0; height: auto !important; margin: 0 4px; } .hue-gif-btn:hover { color: #B01E1E !important; } #hue-gif-modal { display: none; position: fixed; inset: 0; z-index: 1270; background: rgba(0, 0, 0, 0.55); align-items: flex-start; justify-content: center; padding: 60px 12px 20px 12px; box-sizing: border-box; } #hue-gif-modal .hgm-box { width: 560px; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; background: #FFFFFF; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); overflow: hidden; } #hue-gif-modal .hgm-head { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid #E7E8EC; } #hue-gif-modal .hgm-x { margin-left: auto; font-size: 24px; color: #A3A9B1 !important; text-decoration: none !important; line-height: 1; } #hue-gif-modal .hgm-search { padding: 10px 12px 0 12px; } #hue-gif-modal .hgm-search input { width: 100%; box-sizing: border-box; padding: 7px 10px; font-size: 16px; border: 1px solid #C5D0DB; } #hue-gif-modal .hgm-note { margin: 8px 12px 0 12px; font-size: 12px; color: #818C99; } #hue-gif-modal .hgm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-auto-rows: 110px; gap: 6px; padding: 10px 12px; height: 60vh; overflow-y: auto; overscroll-behavior: contain; align-content: start; } #hue-gif-modal .hgm-grid a { display: block; background: #F2F3F5; overflow: hidden; } #hue-gif-modal .hgm-grid a:hover { outline: 2px solid #B01E1E; outline-offset: -2px; } #hue-gif-modal .hgm-grid a.hgm-busy { opacity: 0.4; } #hue-gif-modal .hgm-grid img { width: 100%; height: 100%; object-fit: cover; display: block; } #hue-gif-modal .hgm-empty { color: #818C99; text-align: center; padding: 30px 10px; grid-column: 1 / -1; } #hue-gif-modal .hgm-foot { display: flex; align-items: center; padding: 8px 12px; border-top: 1px solid #E7E8EC; font-size: 12px; } #hue-gif-modal .hgm-own { color: #2A5885; cursor: pointer; } #hue-gif-modal .hgm-own:hover { text-decoration: underline; } #hue-gif-modal .hgm-by { margin-left: auto; color: #A3A9B1; } @media (max-width: 600px) { #hue-gif-modal { padding: 0; align-items: stretch; } #hue-gif-modal .hgm-box { width: 100%; } #hue-gif-modal .hgm-grid { grid-template-columns: 1fr 1fr; height: auto; flex: 1; } } html.hue-gif-open { overflow: hidden; } html.hue-js-tips .hue-vmark::after, html.hue-js-tips .hue-vmark::before, html.hue-js-tips .hue-tipped::after, html.hue-js-tips .hue-tipped::before { display: none !important; } html.hue-js-tips .hue-tipped.hue-tip-open::after, html.hue-js-tips .hue-tipped.hue-tip-open::before { display: block !important; } #hue-tip { display: none; position: fixed; z-index: 2000; max-width: 240px; padding: 6px 9px; background: #3A3A3A; color: #FFFFFF; border-radius: 6px; font: 12px/1.35 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); pointer-events: none; } #hue-tip::before { content: ''; position: absolute; left: var(--arrow, 50%); top: -6px; transform: translateX(-50%); border: 6px solid transparent; border-top: 0; border-bottom-color: #3A3A3A; } #hue-tip.up::before { top: auto; bottom: -6px; border-bottom: 0; border-top: 6px solid #3A3A3A; } #hue-tip.light { background: #FFFFFF; color: #3A3A3A; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); } #hue-tip.light::before { border-bottom-color: #FFFFFF; } #hue-tip.light.up::before { border-top-color: #FFFFFF; } #hue-msg-bar { position: absolute !important; margin: 0 !important; z-index: 20; box-sizing: border-box; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); } @media (max-width: 700px) { html.hue-kb #hue-tabbar, html.hue-kb #ap-mini, html.hue-kb #ap-mini.on { display: none !important; } html.hue-kb body { padding-bottom: 0 !important; } } .hue-ico-eye { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); } .hue-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .hue-reacts:empty { display: none; } .hue-react { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 12px; border: 0; cursor: pointer; background: #EEF0F3; color: #3A3A3A; font: 13px/1 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } .hue-react b { font-weight: 600; font-size: 12px; } .hue-react:hover { background: #E3E6EA; } .hue-react.mine { background: #B01E1E; color: #FFFFFF; } .hue-react.mine:hover { background: #9A1919; } #hue-react-btn { display: none; position: fixed; z-index: 30; width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer; background: #FFFFFF; color: #818C99; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); align-items: center; justify-content: center; padding: 0; } #hue-react-btn:hover { color: #B01E1E; } #hue-react-btn .hue-ico { width: 16px; height: 16px; } #hue-react-pick { display: none; position: fixed; z-index: 31; gap: 2px; padding: 4px 6px; background: #FFFFFF; border-radius: 20px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } #hue-react-pick button { width: 32px; height: 32px; border: 0; background: none; border-radius: 50%; font-size: 19px; cursor: pointer; transition: transform 0.12s; padding: 0; } #hue-react-pick button:hover { transform: scale(1.25); background: #F2F3F5; } .hue-bar-reacts { display: inline-flex; gap: 0; margin-right: 6px; } #hue-msg-bar .hue-bar-reacts a { padding: 2px 5px; font-size: 17px; line-height: 1; } @media (max-width: 700px) { .hue-bar-reacts { width: 100%; justify-content: space-between; margin: 0 0 4px 0; } } #chat-box .hue-msg-row > img.hue-av, #chat-box .hue-msg-row > .hue-ava-ring > img.hue-av, #ticket-box img.hue-av { cursor: pointer; } .hue-ico-mic { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 10a7 7 0 0 0 14 0'/%3E%3Cpath d='M12 17v4'/%3E%3C/svg%3E"); } .hue-ico-speaker { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M19 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E"); } #chat-form .vk-mic { display: none !important; } #chat-form.hue-can-voice .vk-mic { display: inline-flex !important; } #chat-form.hue-can-voice .vk-send:not(.vk-mic):not(.hue-rec-send) { display: none !important; } #chat-form .vk-chat-row { position: relative; } .hue-rec-bar { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; background: #FFFFFF; border-radius: 19px; padding: 0 0 0 10px; z-index: 3; } .hue-rec-x { font-size: 22px; color: #A0A6AD !important; text-decoration: none !important; line-height: 1; } .hue-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #E0262B; animation: hueRecBlink 1s infinite; } .hue-rec-time { font-variant-numeric: tabular-nums; font-weight: 600; color: #1F2023; } .hue-rec-hint { flex: 1; color: #818C99; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hue-rec-send { display: inline-flex !important; } @keyframes hueRecBlink { 50% { opacity: 0.25; } } .hue-voice { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; padding: 6px 12px 6px 6px; border-radius: 22px; background: #F2F3F5; max-width: 100%; box-sizing: border-box; } .hue-voice-play { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #3A3A3A; cursor: pointer; flex-shrink: 0; position: relative; padding: 0; } .hue-voice-play span { position: absolute; left: 13px; top: 10px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #FFFFFF; } .hue-voice.playing .hue-voice-play span { left: 11px; top: 11px; width: 4px; height: 12px; border: 0; border-left: 4px solid #FFFFFF; border-right: 4px solid #FFFFFF; box-sizing: content-box; width: 4px; } .hue-voice-play:hover { background: #B01E1E; } .hue-voice-wave { display: inline-flex; align-items: center; gap: 2px; height: 30px; cursor: pointer; min-width: 120px; } .hue-voice-wave i { display: block; width: 3px; border-radius: 2px; background: #C4C8CD; } .hue-voice-wave i.on { background: #B01E1E; } .hue-voice-time { font-size: 12px; color: #626D7A; font-variant-numeric: tabular-nums; min-width: 30px; } @media (max-width: 700px) { .hue-voice-wave { min-width: 90px; } .hue-voice-wave i:nth-child(2n) { display: none; } } #hue-mention { display: none; position: fixed; z-index: 1400; width: 280px; max-height: 280px; overflow-y: auto; background: #FFFFFF; border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22); padding: 4px 0; font: 13px/1.3 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; overscroll-behavior: contain; } #hue-mention .hm-item { display: flex; align-items: center; gap: 9px; padding: 6px 12px; cursor: pointer; } #hue-mention .hm-item.on, #hue-mention .hm-item:hover { background: #F0F2F5; } #hue-mention img, #hue-mention .hm-all { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } html.hue-sq #hue-mention img { border-radius: 0; } #hue-mention .hm-all { display: inline-flex; align-items: center; justify-content: center; background: #B01E1E; color: #FFFFFF; font-weight: 700; } #hue-mention .hm-name { font-weight: 600; color: #1F2023; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #hue-mention .hm-user { color: #818C99; font-size: 12px; margin-left: auto; white-space: nowrap; } .hue-fp-btn { display: inline-block; margin: 4px 0 0 6px; font-size: 12.5px; color: #B01E1E !important; text-decoration: none !important; } .hue-fp-btn:hover { text-decoration: underline !important; } #hue-fp-modal { display: none; position: fixed; inset: 0; z-index: 1260; background: rgba(0, 0, 0, 0.55); align-items: flex-start; justify-content: center; padding: 70px 12px 20px 12px; box-sizing: border-box; } #hue-fp-modal .hfp-box { width: 420px; max-width: 100%; background: #FFFFFF; border-radius: 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); overflow: hidden; font: 13px/1.4 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } #hue-fp-modal .hfp-head { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid #E7E8EC; } #hue-fp-modal .hfp-x { margin-left: auto; font-size: 24px; color: #A3A9B1 !important; text-decoration: none !important; line-height: 1; } #hue-fp-modal .hfp-search { display: block; width: calc(100% - 36px); margin: 12px 18px 6px 18px; box-sizing: border-box; height: 34px; border: 1px solid #DCE1E6; border-radius: 6px; padding: 0 10px; font: inherit; } #hue-fp-modal .hfp-list { max-height: 55vh; overflow-y: auto; padding: 4px 0 10px 0; overscroll-behavior: contain; } #hue-fp-modal .hfp-row { display: flex; align-items: center; gap: 10px; padding: 7px 18px; color: #1F2023 !important; text-decoration: none !important; } #hue-fp-modal .hfp-row:hover { background: #F0F2F5; } #hue-fp-modal .hfp-row img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } html.hue-sq #hue-fp-modal .hfp-row img { border-radius: 0; } #hue-fp-modal .hfp-row span { display: flex; flex-direction: column; } #hue-fp-modal .hfp-row small { color: #818C99; } #hue-fp-modal .hfp-empty { padding: 20px; text-align: center; color: #818C99; } .theme-modern .mg-coins-send { margin: 0 0 12px 0; border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; } .theme-modern .mg-coins-send summary { cursor: pointer; font-weight: 600; } .theme-modern .mg-coins-send .mg-form { margin-top: 10px; } .lg-coins-box { margin: 0 0 10px 0; border: 1px solid #DDDDDD; background: #FFFFFF; } .lg-coins-box > summary { padding: 0 10px; height: 34px; cursor: pointer; font: bold 13px/34px Arial, sans-serif; color: #3A3A3A; overflow: hidden; white-space: nowrap; } .lg-coins-box[open] > summary { border-bottom: 1px solid #EEEEEE; } .lg-coins-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 10px; } .lg-coins-form input[type="text"] { flex: 1 1 150px; min-width: 0; height: 28px; margin: 0; box-sizing: border-box; } .lg-coins-form input[type="submit"] { flex: none; height: 28px; margin: 0; box-sizing: border-box; } .lg-coins-form .hue-fp-btn { flex: none; margin: 0 4px 0 0; } .lg-key-form input[name="key"] { font-family: Consolas, Menlo, monospace; letter-spacing: 0.5px; } @media (max-width: 700px) { .lg-coins-form input[type="text"] { flex: 1 1 100%; height: 36px; } .lg-key-form input[name="key"] { flex: 1 1 0; } .lg-coins-form input[type="submit"] { height: 36px; } .lg-coins-form:not(.lg-key-form) input[type="submit"] { flex: 1 1 100%; } } .hue-ico-muted { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5z'/%3E%3Cpath d='M23 9l-6 6M17 9l6 6'/%3E%3C/svg%3E"); } .theme-modern .vk-muted-ico { width: 14px; height: 14px; color: #A0A6AD; vertical-align: -2px; margin-left: 4px; } .theme-modern .vk-dlg.unread .vk-muted-ico ~ * {} html.theme-modern img.hue-av, html.theme-modern img.mh-user-av, html.theme-modern img.vk-dlg-av, html.theme-modern img.vk-dlg-mini, html.theme-modern img.vk-compose-av, html.theme-modern .vk-notif-who img, html.theme-modern .vk-cmt-av img, html.theme-modern .vk-post-av img, html.theme-modern .vk-person-av img, html.theme-modern .vk-face img, html.theme-modern .mh-notif-av, html.theme-modern .pv-who img, html.theme-modern .pv-c-av img, html.theme-modern .pv-write img, html.theme-modern #hue-who-pop img, html.theme-modern .hs-row img, html.theme-modern .hue-fwd-item img, html.theme-modern .hue-post-card-head img, html.theme-modern .vk-chat-head-av img, html.theme-modern .vk-pick img, html.theme-modern .hfp-row img, html.theme-modern #hue-mention img, html.theme-modern .hue-msg-row > img { aspect-ratio: 1 / 1; object-fit: cover !important; height: auto; } .theme-modern .vk-notif-who img { width: 44px !important; height: 44px !important; } @media (max-width: 700px) { html.hue-kb-chat #ap-header-wrap, html.hue-kb-chat .gc-callbar, html.hue-kb-chat #pinned-box, html.hue-kb-chat #mobile-ad, html.hue-kb-chat #hue-tabbar, html.hue-kb-chat #ap-mini { display: none !important; } html.hue-kb-chat body { padding-top: 0 !important; padding-bottom: 0 !important; } } #chat-box { overflow-x: hidden !important; overscroll-behavior-x: none; } #chat-box .hue-msg-row, #chat-box [id^="msg-"] { min-width: 0; max-width: 100%; box-sizing: border-box; } #chat-box [id^="msg-"] { overflow-wrap: anywhere; word-break: break-word; } #chat-box img, #chat-box video, #chat-box iframe, #chat-box table, #chat-box .hue-link-card, #chat-box .hue-gift-card { max-width: 100% !important; } #hue-share-modal .hs-row span, #hue-fwd-modal .hue-fwd-item span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #hue-share-modal .hs-list { overflow-x: hidden; } .hue-artist-mark { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 3px; line-height: 0; text-decoration: none !important; } .hue-artist-mark svg { display: block; } .vk-page-name .hue-artist-mark svg { width: 18px; height: 18px; } @media (max-width: 700px) { #topbar-user .hue-artist-mark { display: none !important; } } [style*="word-wrap: break-word"], [style*="word-wrap:break-word"] { overflow-wrap: anywhere !important; } .theme-legacy #main-content h1, .theme-legacy #main-content h2, .theme-legacy #main-content h3, #status_display { overflow-wrap: anywhere; } #hue-fp-modal .hfp-list { overflow-x: hidden; } #hue-fp-modal .hfp-row img { flex-shrink: 0; } #hue-fp-modal .hfp-row > span { flex: 1 1 auto; min-width: 0; } #hue-fp-modal .hfp-row > span > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #main-content table.hue-form > tbody > tr > td:first-child { overflow-wrap: normal; } .theme-legacy #main-content { overflow-wrap: break-word; } .hue-ico-clip { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.4 11.1 12.2 20.3a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5'/%3E%3C/svg%3E"); } #ap-mini.dismissed { display: none !important; } body.ap-mini-off.ap-has-track { padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important; } html.hue-chat-page #ap-mini { display: none !important; } #ap-mini .ap-mini-close { background: none; border: 0; color: #A0A6AD; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex-shrink: 0; } #ap-mini .ap-mini-close svg { width: 18px; height: 18px; } #hue-ring { position: fixed; left: calc(var(--vv-l, 0px) + var(--vv-w, 100vw) / 2); bottom: calc(24px + var(--vv-b, 0px)); transform: translateX(-50%); z-index: 1400; display: flex; align-items: center; gap: 12px; max-height: calc(var(--vv-h, 100vh) - 32px); overflow: auto; width: min(440px, calc(var(--vv-w, 100vw) - 24px)); box-sizing: border-box; padding: 12px 14px; background: #2B2B2B; color: #FFFFFF; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); font-size: 14px; line-height: 1.35; animation: hue-ring-in .25s ease-out; } #hue-ring .hue-ring-ico { flex: 0 0 40px; height: 40px; border-radius: 50%; background: #43A047; display: flex; align-items: center; justify-content: center; animation: hue-ring-shake 1.2s ease-in-out infinite; } #hue-ring .hue-ring-ico .hue-ico { background-color: #FFFFFF; } #hue-ring .hue-ring-text { flex: 1; min-width: 0; overflow-wrap: anywhere; } #hue-ring .hue-ring-text span { color: #BDBDBD; font-size: 13px; } #hue-ring .hue-ring-acts { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; } #hue-ring button { border: 0; border-radius: 8px; padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer; } #hue-ring .hue-ring-join { background: #43A047; color: #FFFFFF; font-weight: 600; } #hue-ring .hue-ring-no { background: #444444; color: #DDDDDD; } @keyframes hue-ring-in { from { opacity: 0; transform: translate(-50%, 20px); } } @keyframes hue-ring-shake { 0%, 60%, 100% { transform: rotate(0); } 10%, 30%, 50% { transform: rotate(-14deg); } 20%, 40% { transform: rotate(14deg); } } @media (max-width: 700px) { #hue-ring { bottom: calc(84px + env(safe-area-inset-bottom) + var(--vv-b, 0px)); } } html #hue-ring .hue-ring-ico:not(#hq1):not(#hq2):not(#hq3):not(#hq4) { border-radius: 0 !important; } .gcw-vol { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #555; margin-top: 2px; } .gcw-vol .hue-ico { width: 14px; height: 14px; flex: 0 0 14px; } .gcw-vol input[type=range] { flex: 1; min-width: 60px; } .gcw-vol span:last-child { min-width: 34px; text-align: right; } .gcw-tile.is-speaking { position: relative; } .gcw-tile.is-speaking::after { content: ''; position: absolute; inset: 0; border: 3px solid #43B581; pointer-events: none; z-index: 4; } .hue-chat-box { background: #FFFFFF; border: 1px solid #CCCCCC; padding: 15px; margin-bottom: 5px; height: 400px; overflow-y: scroll; touch-action: manipulation; } .hue-msg-row { display: flex; align-items: flex-start; margin-bottom: 10px; } .hue-msg-row > img.hue-av { width: 40px; height: 40px; object-fit: cover; border: 1px solid #CCCCCC; margin-right: 8px; flex-shrink: 0; } .hue-msg-row > .hue-ava-ring { margin-right: 8px; flex-shrink: 0; } .hue-msg-row > .hue-ava-ring > img.hue-av { width: 100%; height: 100%; margin: 0; } .hue-msg { flex: 1; min-width: 0; padding: 8px; border-radius: 0; overflow-wrap: anywhere; word-break: break-word; transition: background-color .4s; } .hue-msg-unread { background-color: #E6E6E6; } .hue-msg-new { background-color: #F0F0F0; } .hue-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; } .hue-msg-acts { float: right; } .hue-msg-acts a { color: #888888; font-size: 11px; } .hue-msg-deleted { color: #999999; margin-top: 2px; } .hue-msg-sys { text-align: center; margin: 6px 0 10px; font-size: 11px; color: #808080; } .hue-msg-older { text-align: center; margin: 0 0 10px; font-size: 13px; } .hue-msg-loading { display: flex; justify-content: center; align-items: center; gap: 6px; height: 20px; margin: 0 0 10px; opacity: 0; transition: opacity .15s; pointer-events: none; color: #999999; } .hue-msg-loading.on { opacity: 1; } .hue-msg-loading i { display: block; width: 6px; height: 6px; background: currentColor; border-radius: 0; } .hue-msg-loading.on i { animation: hue-older-dot .9s infinite ease-in-out; } .hue-msg-loading.on i:nth-child(2) { animation-delay: .15s; } .hue-msg-loading.on i:nth-child(3) { animation-delay: .3s; } @keyframes hue-older-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } } .hue-msg-empty { color: #808080; } .hue-chat-closed { text-align: center; color: #808080; font-size: 13px; padding: 12px; background: #F7F7F7; border: 1px solid #DDDDDD; margin-bottom: 8px; } #pinned-box[hidden] { display: none !important; } #pinned-box { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13px; } #pinned-box .hue-pinned-text { flex: 1 1 auto; min-width: 0; display: block !important; text-decoration: none; text-align: left; line-height: 1.35; } #pinned-box .hue-pinned-h, #pinned-box .hue-pinned-m { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #pinned-box .hue-pinned-h { font-size: 12px; font-weight: 600; color: var(--accent, #B01E1E); } #pinned-box .hue-pinned-m { font-size: 13px; } #pinned-box a.hue-pinned-text, #pinned-box a.hue-pinned-text:hover, #pinned-box a.hue-pinned-text:focus, #pinned-box a.hue-pinned-text span { text-decoration: none !important; cursor: pointer; } #pinned-box a.hue-pinned-text:hover .hue-pinned-m { opacity: .8; } #pinned-box .hue-pinned-m b { font-weight: 600; } #pinned-box .hue-pinned-x { flex-shrink: 0; color: #888888 !important; font-size: 11px; } .hue-msg-liked::after { content: '❤️'; position: absolute; left: 50%; top: 50%; font-size: 34px; pointer-events: none; transform: translate(-50%, -50%) scale(.4); animation: hue-like-pop .7s ease-out forwards; } .hue-msg-liked { position: relative; } @keyframes hue-like-pop { 40% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -60%) scale(1); opacity: 0; } } #chat-form { position: relative; } .hue-typing { position: absolute; left: 14px; right: 14px; top: -20px; height: 18px; display: flex; align-items: center; gap: 6px; font: 11px tahoma, verdana, arial, sans-serif; color: #777777; white-space: nowrap; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .2s; } .hue-typing.on { opacity: 1; } .hue-typing i { font-style: normal; overflow: hidden; text-overflow: ellipsis; } .hue-pencil { flex: 0 0 13px; width: 13px; height: 13px; background-color: #8A8F96; transform-origin: 20% 80%; animation: hue-pencil-write .9s ease-in-out infinite; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.8 9.94l-3.75-3.75L3 17.25zm17.7-10.2a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.8 9.94l-3.75-3.75L3 17.25zm17.7-10.2a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") center / contain no-repeat; } @keyframes hue-pencil-write { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(2px) rotate(-8deg); } 50% { transform: translateX(4px) rotate(0); } 75% { transform: translateX(2px) rotate(8deg); } } .hue-dots b { font-weight: normal; animation: hue-dot 1.2s infinite; opacity: 0; } .hue-dots b:nth-child(2) { animation-delay: .2s; } .hue-dots b:nth-child(3) { animation-delay: .4s; } @keyframes hue-dot { 0%, 20% { opacity: 0; } 40%, 100% { opacity: 1; } } html:not(.theme-modern) .hue-typing { position: static; margin-bottom: 4px; } .gt-league, .gt-badge { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 11px; font-weight: 600; line-height: 16px; color: #FFFFFF !important; background: #8A939C; white-space: nowrap; vertical-align: middle; text-decoration: none !important; } .gt-badge { margin-top: 4px; padding: 2px 9px; font-size: 11.5px; } .gt-badge:hover { filter: brightness(1.08); } .gt-l-bronze { background: #A0643C; } .gt-l-silver { background: #8A939C; } .gt-l-gold { background: #C49A1A; } .gt-l-diamond { background: #2F94B8; } .gt-l-legend { background: linear-gradient(90deg, #B01E1E, #D2552A); } .gt-change { font-weight: 600; white-space: nowrap; } .gt-up { color: #2E7D32; } .gt-down { color: #C62828; } .gt-flat { color: #9AA0A8; } #ap-title.apm-name-link { cursor: pointer; } #ap-title.apm-name-link:hover { text-decoration: underline; } .hue-ico-contract { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h10a2 2 0 0 0 2-2v-1H10v1a2 2 0 0 1-4 0V5a2 2 0 0 0-2-2h12a2 2 0 0 1 2 2v13'/%3E%3Cpath d='M10 8h5M10 12h4'/%3E%3C/svg%3E"); } #sidebar-nav a.dv-nav-link .hue-ico, .vk-subnav > a.dv-subnav-link, .theme-modern .vk-subnav > a.dv-subnav-link { color: #8E1616 !important; } .dv-seal { display: inline-block; margin-left: 4px; line-height: 0; vertical-align: middle; cursor: default; } .dv-shop-note { color: #8E1616 !important; } .dv-ck-skull { font-size: 64px; line-height: 1; color: #8E1616; margin-bottom: 10px; } .dv-ck-more { margin-top: 14px; } .dv-fx { position: fixed; pointer-events: none; } .dv-out { opacity: 0 !important; transition: opacity 0.4s; } html.dv-scary { filter: invert(0.92) grayscale(1) contrast(1.3) sepia(1) hue-rotate(-50deg) saturate(6) brightness(0.9); } html.dv-scary.dv-locked { filter: none; } body.dv-scary::before { content: ''; position: fixed; left: 0; right: 0; top: 0; height: 130px; z-index: 2147482000; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cpath fill='%23707070' d='M0 0h240v10c-8 0-10 4-12 14-1 6-6 6-7 0-2-9-6-12-14-12s-9 30-10 48c-.5 9-9 9-9 0 0-22-4-46-12-46s-12 10-13 22c-1 7-8 7-8 0 0-12-6-20-14-20s-10 6-11 18c-1 8-8 8-8 0-1-14-6-20-16-20S80 40 79 70c-.5 12-10 12-10 0 0-34-5-58-14-58s-11 8-12 16c-1 6-7 6-7 0-1-10-6-16-14-16S10 18 9 30c-.5 6-7 6-7 0C2 18 1 12 0 12z'/%3E%3C/svg%3E") repeat-x 0 0 / 240px 60px; animation: dv-drip 9s ease-in forwards; opacity: 0.92; } body.dv-scary::after { content: ''; position: fixed; inset: 0; z-index: 2147481999; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.45) 82%, rgba(255, 255, 255, 0.85) 100%); animation: dv-breathe 4s ease-in-out infinite; } body.dv-scary #huevo-layout { animation: dv-jitter 5s steps(1) infinite; } .dv-scary #main-content, .dv-scary #sidebar-nav { font-family: "Times New Roman", Georgia, serif !important; letter-spacing: 0.3px; } .dv-scary #main-content h1, .dv-scary #main-content h2, .dv-scary #main-content b, .dv-scary .vk-card-title { text-shadow: 1px 0 rgba(255, 0, 0, 0.55), -1px 1px rgba(0, 0, 0, 0.55); } .dv-scary #main-content h1, .dv-scary #main-content h2, .dv-scary .vk-card-title { transform: skewX(-6deg); } @keyframes dv-drip { from { background-size: 240px 50px; } to { background-size: 240px 130px; } } @keyframes dv-breathe { 50% { opacity: 0.7; } } @keyframes dv-jitter { 0% { transform: none; } 91% { transform: translate(-3px, 1px) skewX(1.5deg); } 93% { transform: translate(4px, -2px); } 95% { transform: translate(-2px, 2px) skewX(-1deg); } 97% { transform: none; } } .dv-scream { inset: 0; display: flex; align-items: center; justify-content: center; background: #000; overflow: hidden; pointer-events: auto; animation: dv-flash 0.12s steps(1) 6; } .dv-scream-face { width: min(94vw, 76vh); height: auto; animation: dv-lunge 1.4s cubic-bezier(0.2, 1.8, 0.4, 1) forwards, dv-shake 0.07s infinite; } @keyframes dv-flash { 0% { background: #000; } 33% { background: #4A0000; } 66% { background: #E8E8E8; } } @keyframes dv-lunge { from { transform: scale(0.35); } 25% { transform: scale(1.25); } to { transform: scale(1.4); } } @keyframes dv-shake { 0% { translate: 0 0; } 25% { translate: -6px 4px; } 50% { translate: 5px -5px; } 75% { translate: -4px -3px; } } html.dv-locked, html.dv-locked body { overflow: hidden !important; } .dv-fakeban { inset: 0; overflow: auto; pointer-events: auto; background: #EEEEEE; padding: 60px 0 30px 0; box-sizing: border-box; font: 13px/1.4 Tahoma, Verdana, Arial, sans-serif; color: #000000; text-align: left; } .dv-fb-card { width: 460px; max-width: 94%; margin: 0 auto; border: 1px solid #CCCCCC; background: #FFFFFF; } .dv-fb-head { background: #3A3A3A; padding: 6px 12px; line-height: 1; } .dv-fb-head b { color: #FFFFFF; display: block; } .dv-fb-head i { display: block; margin: -1px 0 0 22px; font: italic bold 10px Georgia, "Times New Roman", serif; letter-spacing: 1px; color: #B01E1E; } .dv-fb-body { padding: 22px 26px; } .dv-fb-title { font-size: 18px; font-weight: bold; margin-bottom: 14px; } .dv-fb-tbl { width: 100%; background: #F7F7F7; border: 1px solid #DDDDDD; border-collapse: collapse; margin: 6px 0 12px 0; } .dv-fb-tbl td { padding: 4px; vertical-align: top; font-size: 13px; } .dv-fb-tbl td:first-child { width: 130px; color: gray; } .dv-fb-note { font-size: 11px; color: gray; } .dv-fakeban hr { border: none; border-top: 1px solid #E8E8E8; margin: 16px 0; } .dv-fakeban a { color: #3A3A3A !important; } .dv-whisper { left: 16px; bottom: 16px; width: 300px; max-width: calc(100vw - 32px); box-sizing: border-box; display: flex; gap: 10px; padding: 12px 14px; background: #0B0B0B; border: 1px solid #5A0000; border-radius: 8px; color: #D6D6D6; font: 13px/1.4 Georgia, "Times New Roman", serif; box-shadow: 0 0 24px rgba(176, 30, 30, 0.45); animation: dv-wh-in 0.7s ease-out, dv-wh-flicker 3.2s 0.7s infinite; } .dv-wh-av { flex: 0 0 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 1px #3A0000; background: radial-gradient(circle at 36% 46%, #FF2A2A 0 2.5px, transparent 3.5px), radial-gradient(circle at 64% 46%, #FF2A2A 0 2.5px, transparent 3.5px), radial-gradient(circle at 50% 40%, #1C1C1C, #000000 70%); } .dv-wh-body { min-width: 0; } .dv-wh-body b { color: #E04040; } .dv-wh-body small { color: #777777; margin-left: 6px; font-size: 11px; } .dv-wh-text { display: block; margin-top: 3px; min-height: 18px; overflow-wrap: anywhere; } @keyframes dv-wh-in { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } } @keyframes dv-wh-flicker { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: 0.35; } 50% { opacity: 1; } 52% { opacity: 0.6; } 53% { opacity: 1; } } .dv-eyes { display: flex; gap: 14px; padding: 18px 22px; border-radius: 50%; transition: opacity 0.25s; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.88) 30%, rgba(0, 0, 0, 0) 72%); } .dv-c-br { right: 4px; bottom: 70px; } .dv-c-bl { left: 4px; bottom: 70px; } .dv-c-tr { right: 4px; top: 70px; } .dv-c-tl { left: 4px; top: 70px; } .dv-eye { position: relative; width: 34px; height: 18px; border-radius: 50% / 60%; overflow: hidden; transition: transform 0.12s; background: radial-gradient(ellipse at center, #F1EAD8 30%, #C9A79A 75%, #7A2A2A 100%); box-shadow: 0 0 8px rgba(255, 40, 40, 0.35); } .dv-eye i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; transition: transform 0.15s; background: radial-gradient(circle, #000000 0 3px, #6A0000 4px 5px, #1A0000 6px); } .dv-blink .dv-eye { transform: scaleY(0.08); } .dv-eyes.dv-hide { opacity: 0; } .dv-ghost { left: 0; top: 0; opacity: 0.85; filter: drop-shadow(0 0 4px rgba(176, 30, 30, 0.8)); will-change: transform; } html.dv-flipping body { transition: transform 1.2s cubic-bezier(0.6, -0.3, 0.4, 1.3); } html.dv-flip body { transform: rotate(180deg); } .dv-glitching { text-shadow: 2px 0 rgba(255, 0, 0, 0.85), -2px 0 rgba(0, 220, 255, 0.6) !important; animation: dv-glitch 0.16s steps(2) infinite; } @keyframes dv-glitch { 50% { opacity: 0.55; filter: blur(0.5px); } } .dv-heart-glow { inset: 0; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(130, 0, 0, 0.4) 100%); animation: dv-pulse 1.05s infinite; } @keyframes dv-pulse { 0% { opacity: 0; } 6% { opacity: 1; } 18% { opacity: 0.2; } 28% { opacity: 0.8; } 45%, 100% { opacity: 0; } } .dv-blackout { inset: 0; display: flex; align-items: center; justify-content: center; background: #000000; pointer-events: auto; } .dv-bo-face { width: min(70vw, 55vh); height: auto; opacity: 0; transition: opacity 1.2s; filter: blur(1px); } @media (max-width: 700px) { .dv-eye { width: 26px; height: 14px; } .dv-eye i { width: 10px; height: 10px; margin: -5px 0 0 -5px; } .dv-eyes { gap: 10px; padding: 14px 16px; } } @media (prefers-reduced-motion: reduce) { .dv-scream { animation: none; } body.dv-scary #huevo-layout { animation: none; } } html { -webkit-tap-highlight-color: transparent; } @media (pointer: coarse) { #chat-box .hue-msg, #chat-box .hue-msg-row { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } } @media (max-width: 700px) { #hue-toast { left: 12px !important; right: 12px !important; bottom: calc(76px + env(safe-area-inset-bottom)) !important; text-align: center; } body.ap-has-track:not(.ap-mini-off) #hue-toast { bottom: calc(140px + env(safe-area-inset-bottom)) !important; } html.hue-kb #hue-toast { bottom: 12px !important; } html.hue-kb-chat #site-announcement { display: none !important; } } .vk-attach-item .hue-gif-btn { width: 20px; box-sizing: border-box; text-align: center; font-size: 8px !important; padding: 2px 0; color: #818C99 !important; } .vk-slug-hint.vk-slug-ok, .vk-slug-hint.vk-slug-ok:not(#hq1) { color: #2E6B30 !important; } .vk-slug-hint.vk-slug-bad, .vk-slug-hint.vk-slug-bad:not(#hq1) { color: #A94442 !important; } .gcm-modal { position: fixed; inset: 0; z-index: 1250; background: rgba(0, 0, 0, 0.55); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 12px; box-sizing: border-box; } .gcm-modal[hidden] { display: none; } .gcm-box { width: 520px; max-width: 100%; background: #FFFFFF; border: 1px solid #CFCFCF; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); font-size: 13px; color: #1F2023; } .gcm-head { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; background: #3A3A3A; color: #FFFFFF; font-size: 14px; } .gcm-head .gcm-count { color: #BDBDBD; font-size: 12px; } .gcm-x { margin-left: auto; color: #FFFFFF !important; font-size: 24px; line-height: 1; text-decoration: none !important; } .gcm-err { padding: 8px 16px; background: #FDECEC; color: #B01E1E; border-bottom: 1px solid #F3C9C9; } .gcm-list { max-height: min(62vh, 560px); overflow-y: auto; } .gcm-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid #EDEDED; margin: 0; } .gcm-row.open { background: #F5F5F5; } .gcm-av { flex: 0 0 40px; line-height: 0; } .gcm-av img { width: 40px; height: 40px; object-fit: cover; } .gcm-who { flex: 1 1 auto; min-width: 0; } .gcm-name { font-weight: 600; overflow-wrap: anywhere; } .gcm-name a { color: #1F2023 !important; } .gcm-sub { color: #818C99; font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; } .gcm-role { display: inline-block; margin-left: 4px; padding: 1px 6px; background: #EDEEF0; color: #3A3A3A; font-size: 11px; font-weight: 500; vertical-align: 1px; } .gcm-role-creator { background: #3A3A3A; color: #FFFFFF; } .gcm-you { color: #818C99; font-weight: 400; font-size: 12px; margin-left: 4px; } .gcm-tag { display: inline-block; padding: 0 5px; border: 1px solid #DCDCDC; color: #5F6670; font-size: 11px; margin-left: 2px; } .gcm-tag-mute { border-color: #E3B5B5; color: #B01E1E; } .gcm-box .gcm-more { flex: 0 0 34px; height: 34px; border: 1px solid #DCDCDC; background: #FFFFFF; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 0; } .gcm-box .gcm-more i { width: 4px; height: 4px; background: #5F6670; display: block; } .gcm-box .gcm-more:hover, .gcm-box .gcm-more[aria-expanded="true"] { background: #3A3A3A; border-color: #3A3A3A; } .gcm-box .gcm-more:hover i, .gcm-box .gcm-more[aria-expanded="true"] i { background: #FFFFFF; } .gcm-menu { margin: 0; padding: 4px 16px 10px 66px; background: #F5F5F5; border-bottom: 1px solid #E2E2E2; } .gcm-menu[hidden] { display: none; } .gcm-sec { padding: 8px 0; border-top: 1px solid #E4E4E4; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .gcm-sec:first-of-type { border-top: 0; } .gcm-label { flex: 1 0 100%; color: #5F6670; font-size: 12px; } .gcm-now { color: #B01E1E; font-weight: 500; margin-left: 4px; } .gcm-terms { display: flex; flex-wrap: wrap; gap: 6px; } .gcm-switch { flex: 1 0 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .gcm-box .gcm-btn { height: 30px; padding: 0 12px; border: 1px solid #CFCFCF; background: #FFFFFF; color: #1F2023; font: inherit; font-size: 12.5px; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; } .gcm-box .gcm-btn:hover { background: #EDEEF0; } .gcm-box .gcm-btn-on { background: #3A3A3A; border-color: #3A3A3A; color: #FFFFFF; } .gcm-box .gcm-btn-on:hover { background: #4D4D4D; } .gcm-box .gcm-btn-danger { border-color: #B01E1E; color: #B01E1E; } .gcm-box .gcm-btn-danger:hover { background: #B01E1E; color: #FFFFFF; } .gcm-blocked-title { padding: 10px 16px 6px 16px; font-weight: 600; background: #FAFAFA; border-bottom: 1px solid #EDEDED; } .gcm-blocked-title .gcm-count { color: #818C99; font-weight: 400; } .gcm-row-blocked .gcm-av img { filter: grayscale(1); opacity: 0.7; } .gcm-foot { padding: 10px 16px; background: #F7F7F7; border-top: 1px solid #DDDDDD; } .gcm-foot form { margin: 0; } .gcm-note { display: block; color: #818C99; font-size: 11.5px; margin-top: 2px; } @media (max-width: 700px) { .gcm-modal { padding: 0; align-items: stretch; } .gcm-box { width: 100%; min-height: 100%; border: 0; display: flex; flex-direction: column; } .gcm-list { max-height: none; flex: 1 1 auto; } .gcm-menu { padding-left: 16px; } .gcm-box .gcm-btn { height: 34px; } } .gc-mute-bar { display: flex; align-items: center; justify-content: center; gap: 8px; color: #5F6670; font-size: 13px; } .gc-mute-bar[hidden] { display: none; } .gc-mute-bar .hue-ico { width: 18px; height: 18px; color: #B01E1E; flex: 0 0 18px; } .gc-no-media .vk-attach-item:not([data-poll-open]), .gc-no-media input[name="media"], .gc-no-media [data-ap-pick], .gc-no-media [data-vp-pick], .gc-no-media [data-saved-pick], .gc-no-media .hue-gif-btn, .gc-no-voice [data-voice-rec], .gc-no-voice #chat-form.hue-can-voice .vk-mic { display: none !important; } .gc-limit-note { color: #818C99; font-size: 12px; padding: 4px 2px 0 2px; } .gc-limit-note[hidden] { display: none; } .gc-no-voice #chat-form.hue-can-voice .vk-send:not(.vk-mic):not(.hue-rec-send) { display: inline-flex !important; } .hue-ico-pin { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M5 17h14v-1.8a2 2 0 0 0-1.1-1.8l-1.8-.9A2 2 0 0 1 15 10.8V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.8a2 2 0 0 1-1.1 1.8l-1.8.9A2 2 0 0 0 5 15.2z'/%3E%3C/svg%3E"); } .hue-ico-bell-off { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.7 3A6 6 0 0 1 18 8a21 21 0 0 0 .6 5'/%3E%3Cpath d='M17 17H3s3-2 3-9a4.7 4.7 0 0 1 .3-1.7'/%3E%3Cpath d='M10.3 21a2 2 0 0 0 3.4 0'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E"); } .hue-pin-tag { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 0 5px; font-size: 11px; line-height: 16px; color: #818C99; background: #F0F2F5; white-space: nowrap; vertical-align: 1px; } .hue-pin-tag .hue-ico { width: 11px; height: 11px; flex: 0 0 11px; } .hue-to-wall { white-space: normal; } .hue-to-wall a { font-weight: 600; } .hue-to-arrow { color: #A0A6AD; font-size: 0.9em; margin: 0 1px; } .hue-reply-to { color: #818C99 !important; text-decoration: none; } .hue-reply-to:hover { text-decoration: underline; } .hue-cmt-flash { animation: hue-cmt-flash 1.6s ease-out; } @keyframes hue-cmt-flash { 0%, 30% { background-color: #FFF4C2; } 100% { background-color: transparent; } } .hue-more-text { display: inline-block; margin-top: 2px; font-size: 13px; cursor: pointer; text-decoration: none; } .hue-more-text:hover { text-decoration: underline; } .hue-cmt-media > br:first-child { display: none; } #main-content .hue-cmt-media img, #main-content .hue-cmt-media video { display: block; width: auto !important; height: auto !important; max-width: min(260px, 100%) !important; max-height: 260px !important; margin-top: 6px; cursor: zoom-in; } @media (max-width: 700px) { #main-content .hue-cmt-media img, #main-content .hue-cmt-media video { max-width: 60% !important; } } .hue-as-group-legacy { font-size: 11px; color: #555555; white-space: nowrap; cursor: pointer; } a.hue-link, a.hue-link:visited, a.hue-mention, a.hue-mention:visited { color: #2A5885 !important; text-decoration: none; } a.hue-link:hover, a.hue-mention:hover { text-decoration: underline !important; } .hue-aat { position: relative; display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; max-width: 480px; min-height: 40px; margin: 6px 0 0 0; padding: 4px 8px 4px 4px; font-size: 13px; line-height: 1.3; text-align: left; background: transparent; transition: background-color 0.12s; } .hue-aat:hover, .hue-aat.ap-cur { background: rgba(0, 0, 0, 0.045); } .hue-aat-play { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #3A3A3A; color: #FFFFFF !important; text-decoration: none !important; cursor: pointer; -webkit-tap-highlight-color: transparent; } .hue-aat-play:hover { background: #222222; } .hue-aat.ap-cur .hue-aat-play { background: #B01E1E; } .hue-aat.ap-cur .hue-aat-play:hover { background: #961A1A; } .hue-aat-play svg { display: block; width: 14px; height: 14px; fill: currentColor; } .hue-aat-play .i-play { margin-left: 2px; } .hue-aat-play .i-pause, .hue-aat-play.is-playing .i-play { display: none; } .hue-aat-play.is-playing .i-pause { display: block; } .hue-aat-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #000000 !important; text-decoration: none !important; } .hue-aat-artist { font-weight: bold; color: #3A3A3A; } .hue-aat-name:hover .hue-aat-artist, .hue-aat-name:hover .hue-aat-title { text-decoration: underline; } .hue-aat.ap-cur .hue-aat-artist { color: #B01E1E; } .hue-aat-dur { flex: 0 0 auto; min-width: 30px; text-align: right; color: #808080; font-size: 12px; font-variant-numeric: tabular-nums; } .hue-aat-prog { display: none; position: absolute; left: 44px; right: 8px; bottom: 5px; height: 9px; cursor: pointer; } .hue-aat.ap-cur { padding-bottom: 12px; } .hue-aat.ap-cur .hue-aat-name, .hue-aat.ap-cur .hue-aat-dur { transform: translateY(-2px); } .hue-aat-prog::before { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px; background: rgba(0, 0, 0, 0.14); } .hue-aat-prog i { position: absolute; left: 0; bottom: 3px; height: 2px; width: 0; background: #B01E1E; pointer-events: none; } .hue-aat-prog:hover::before, .hue-aat-prog:hover i { height: 4px; bottom: 2px; } .hue-aat.ap-cur .hue-aat-prog { display: block; } .hue-aat.hue-aat-in-list { margin: 0; max-width: none; } .hue-aat-attach { flex: 0 0 auto; font-size: 12px; color: #3A3A3A; cursor: pointer; text-decoration: underline; } .hue-aat-play.hue-aat-play-sm { width: 24px; height: 24px; } .hue-aat-play.hue-aat-play-sm svg { width: 11px; height: 11px; } tr.ap-cur .hue-aat-play { background: #B01E1E; } html .hue-aat-play:not(#hq1):not(#hq2):not(#hq3) { border-radius: 50% !important; } @media (max-width: 700px) { .hue-aat { max-width: 100%; min-height: 44px; } .hue-aat-play { width: 34px; height: 34px; } .hue-aat-prog { left: 48px; } } .apm-more { padding: 10px 8px 12px; text-align: center; font-size: 12px; color: #808080; } .apm-more-spin { display: inline-block; width: 11px; height: 11px; margin: 0 7px -1px 0; border: 2px solid rgba(0, 0, 0, 0.15); border-top-color: #808080; border-radius: 50%; animation: hue-more-spin 0.7s linear infinite; } html .apm-more-spin:not(#hq1):not(#hq2):not(#hq3) { border-radius: 50% !important; } @keyframes hue-more-spin { to { transform: rotate(360deg); } } .hue-crop { display: none; position: fixed; inset: 0; z-index: 2100; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); padding: 12px; box-sizing: border-box; } html.hue-crop-open, html.hue-crop-open body { overflow: hidden; } .hue-crop-box { width: 460px; max-width: 100%; max-height: 100%; overflow-y: auto; background: #FFFFFF; border: 1px solid #B9B9B9; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.35); font: 13px/1.4 Tahoma, Verdana, Arial, sans-serif; color: #000000; box-sizing: border-box; } .hue-crop-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: #3A3A3A; color: #FFFFFF; } #hue-crop .hue-crop-x { border: 0; background: transparent; color: #FFFFFF; font: 22px/1 Arial, sans-serif; cursor: pointer; padding: 0 2px; box-shadow: none; } .hue-crop-stage { position: relative; width: calc(100% - 28px); max-width: 420px; aspect-ratio: 1 / 1; margin: 14px auto 0; overflow: hidden; background: #1E1E1E; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; } .hue-crop-stage.dragging { cursor: grabbing; } .hue-crop-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none !important; max-height: none !important; pointer-events: none; -webkit-user-drag: none; image-orientation: from-image; } .hue-crop-frame { position: absolute; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55); pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25)), linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25)), linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25)), linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25)); background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px; background-position: 33.33% 0, 66.66% 0, 0 33.33%, 0 66.66%; background-repeat: no-repeat; } .hue-crop-frame.is-round { border-radius: 50%; background-image: none; } html .hue-crop-frame.is-round:not(#hq1):not(#hq2):not(#hq3) { border-radius: 50% !important; } .hue-crop-zoom { display: flex; align-items: center; gap: 8px; width: calc(100% - 28px); max-width: 420px; margin: 10px auto 0; } .hue-crop-range { flex: 1 1 auto; min-width: 0; margin: 0; accent-color: #B01E1E; height: 26px; } #hue-crop .hue-crop-zb { flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid #C8C8C8; background: #F4F4F4; color: #333333; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; } #hue-crop .hue-crop-zb:hover { background: #EAEAEA; } .hue-crop-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 14px 14px; } #hue-crop .hue-crop-btn { min-width: 96px; height: 32px; padding: 0 14px; border: 1px solid #A8A8A8; background: #F4F4F4; color: #000000; font: inherit; cursor: pointer; } #hue-crop .hue-crop-btn:hover { background: #EAEAEA; } #hue-crop .hue-crop-save { background: #3A3A3A; border-color: #3A3A3A; color: #FFFFFF; font-weight: bold; } #hue-crop .hue-crop-save:hover { background: #222222; } #hue-crop .hue-crop-save:disabled { opacity: 0.6; cursor: default; } .hue-crop-err { margin: 4px 0; color: #A94442; font-size: 12px; font-weight: bold; } img.hue-crop-preview { display: inline-block; width: 50px; height: 50px; object-fit: cover; margin: 4px 0 0 8px; vertical-align: middle; border: 1px solid #CCCCCC; } html img.hue-crop-preview.is-round:not(#hq1):not(#hq2):not(#hq3) { border-radius: 50% !important; } @media (max-width: 700px) { .hue-crop { padding: 0; align-items: stretch; } .hue-crop-box { width: 100%; max-height: none; height: 100%; display: flex; flex-direction: column; border: 0; } .hue-crop-stage { width: calc(100% - 20px); max-width: min(100%, 62vh); } .hue-crop-foot { margin-top: auto; padding-bottom: calc(14px + env(safe-area-inset-bottom)); } #hue-crop .hue-crop-btn { flex: 1 1 0; height: 40px; } } .hc-photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .hc-photo { display: block; width: 96px; height: 96px; border: 1px solid #D0D0D0; background: #F2F2F2 center / cover no-repeat; cursor: zoom-in; padding: 0; overflow: hidden; } .hc-photo img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; } .hc-attach-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .hc-clip { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: #3A3A3A; font-size: 12px; } .hc-clip input[type=file] { display: none; } .hc-clip-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .hc-picked { display: flex; flex-wrap: wrap; gap: 6px; } .hc-picked-item { position: relative; width: 56px; height: 56px; border: 1px solid #CCCCCC; background: #EEEEEE center / cover no-repeat; } .hc-picked .hc-picked-item button { position: absolute; top: -7px; right: -7px; width: 18px !important; height: 18px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border: 0; background: #3A3A3A !important; color: #FFFFFF !important; font: 13px/18px Arial, sans-serif !important; cursor: pointer; } .hc-picked-note { font-size: 11px; color: #808080; } @media (max-width: 700px) { .hc-photo { width: 76px; height: 76px; } } .hue-sugg { position: absolute; top: calc(100% + 4px); right: 0; width: 320px; max-width: calc(100vw - 16px); max-height: 70vh; overflow-y: auto; background: #FFFFFF; border: 1px solid #BBBBBB; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); z-index: 720; text-align: left; white-space: normal; font-family: Tahoma, Verdana, Arial, sans-serif; } .hue-sugg[hidden] { display: none; } .hue-sugg-head { padding: 6px 10px 3px 10px; font-size: 11px; color: #777777; text-transform: uppercase; letter-spacing: 0.3px; } a.hue-sugg-row { display: flex; align-items: center; gap: 8px; padding: 5px 10px; color: #222222; text-decoration: none; font-size: 12px; } a.hue-sugg-row:hover, a.hue-sugg-row.on { background: #EEEEEE; } .hue-sugg-av { width: 32px; height: 32px; flex: 0 0 32px; object-fit: cover; background: #E0E0E0; } .hue-sugg-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .hue-sugg-text b { font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hue-sugg-text small { color: #777777; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.hue-sugg-all { justify-content: center; border-top: 1px solid #E6E6E6; padding: 8px 10px; font-weight: bold; } .hue-sugg-empty { padding: 10px; font-size: 12px; color: #777777; } .zv-lsearch { position: relative; } .zv-lsearch .hue-sugg-zv { left: 0; right: auto; width: 60%; min-width: 300px; } @media (max-width: 700px) { .zv-lsearch .hue-sugg-zv { width: 100%; min-width: 0; } } .hue-sugg-zv .zv-badge { margin-left: 3px; } .zv-lsr-h { margin: 14px 0 6px 0; } .zv-lsr-list { margin: 0 0 10px 0; padding-left: 20px; } .zv-lsr-list li { margin: 3px 0; } .hue-top-lupa { display: none; } .hue-top-lupa a { display: inline-flex; color: #FFFFFF; } @media (max-width: 700px) { #topbar-table > tbody > tr > td.hue-top-lupa { display: block; flex: 0 0 auto; padding: 6px 10px 6px 4px !important; } } .hue-ms-box { position: relative; margin: 0 0 10px 0; } .hue-ms-box .hue-ico { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: #888888; } .hue-ms-box input { width: 100%; box-sizing: border-box; padding: 6px 30px 6px 30px; font-size: 13px; -webkit-appearance: none; appearance: none; } .hue-ms-box input::-webkit-search-cancel-button { display: none; } .hue-ms-box button { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); border: 0; background: none; font-size: 18px; line-height: 1; padding: 4px 8px; cursor: pointer; color: #888888; } .hue-ms-box button[hidden] { display: none; } .hue-ms-res { margin: 0 0 14px 0; background: #FFFFFF; border: 1px solid #DDDDDD; } .hue-ms-res[hidden], .hue-ms-empty[hidden] { display: none; } .hue-ms-head { padding: 7px 10px; font-size: 12px; font-weight: bold; background: #F4F4F4; border-bottom: 1px solid #E6E6E6; } .hue-ms-head span { color: #888888; font-weight: normal; } a.hue-ms-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #EEEEEE; color: #222222; text-decoration: none; } a.hue-ms-row:hover { background: #F6F6F6; } .hue-ms-av { width: 40px; height: 40px; flex: 0 0 40px; object-fit: cover; } .hue-ms-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .hue-ms-top { display: flex; justify-content: space-between; gap: 8px; } .hue-ms-name { font-weight: bold; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hue-ms-time { color: #888888; font-size: 11px; flex-shrink: 0; } .hue-ms-text { font-size: 12.5px; color: #333333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hue-ms-text mark, mark.hue-hl { background: #FFE58A; color: inherit; padding: 0 1px; } .hue-ms-empty { padding: 10px; font-size: 13px; color: #777777; } .hue-msg-newer { margin: 10px 0 0 0; } .hue-ico-gif { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='square'%3E%3Crect x='2' y='4.5' width='20' height='15'/%3E%3Cpath d='M10 9.5H7v5h3v-2.2H8.8'/%3E%3Cpath d='M12.6 9.5v5'/%3E%3Cpath d='M15.2 14.5v-5h3.2M15.2 12h2.6'/%3E%3C/svg%3E"); } #hue-msg-bar .hue-bar-reacts a.mine, #hue-react-pick button.mine { background: #F2D3D3; } #emoji-panel { max-width: calc(100vw - 8px); box-sizing: border-box; } #hue-msg-shade { display: none; position: fixed; inset: 0; z-index: 1290; background: transparent; } #hue-msg-menu { display: none; position: fixed; z-index: 1300; width: 250px; max-width: calc(100vw - 16px); box-sizing: border-box; background: #FFFFFF; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); font-size: 14px; } #hue-msg-menu .hmm-reacts { display: flex; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid #E7E8EC; padding: 4px; } #hue-msg-menu .hmm-reacts::-webkit-scrollbar { display: none; } #hue-msg-menu .hmm-reacts a { flex: 0 0 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 20px; text-decoration: none; } #hue-msg-menu .hmm-reacts a:hover { background: #F2F3F5; } #hue-msg-menu .hmm-reacts a.mine { background: #F2D3D3; } #hue-msg-menu .hmm-list a { display: flex; align-items: center; gap: 12px; padding: 0 14px; height: 40px; color: #2C2D2E !important; text-decoration: none !important; } #hue-msg-menu .hmm-list a:hover { background: #F2F3F5; } #hue-msg-menu .hmm-list .hue-ico { width: 20px; height: 20px; flex: 0 0 20px; color: #818C99; } #hue-msg-menu .hmm-list a.hmm-danger, #hue-msg-menu .hmm-list a.hmm-danger .hue-ico { color: #C62828 !important; } html.hue-msg-menu-open #chat-box .hue-msg-selected { position: relative; z-index: 1; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.18); } .hue-ico-reply { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M9 5 3 11l6 6'/%3E%3Cpath d='M3 11h11a7 7 0 0 1 7 7v1'/%3E%3C/svg%3E"); } .hue-ico-copy { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='8' y='8' width='13' height='13'/%3E%3Cpath d='M16 8V3H3v13h5'/%3E%3C/svg%3E"); } .hue-ico-pin { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M9 3h6M10 3v6l-4 5h12l-4-5V3M12 14v7'/%3E%3C/svg%3E"); } .hue-ico-trash { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M3 6h18M8 6V3h8v3M5 6l1 15h12l1-15M10 11v6M14 11v6'/%3E%3C/svg%3E"); } .hue-ico-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'%3E%3Crect x='3' y='3' width='18' height='18'/%3E%3Cpath d='m7.5 12 3 3 6-6'/%3E%3C/svg%3E"); } .hue-feed-loading { padding: 16px; text-align: center; color: #808080; font-size: 13px; } #vk-photo-view .pv-close { position: fixed !important; top: calc(env(safe-area-inset-top, 0px) + 10px) !important; right: 10px !important; z-index: 5; display: flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(0, 0, 0, 0.6) !important; color: #FFFFFF !important; font-size: 28px !important; line-height: 1 !important; text-decoration: none !important; opacity: 1 !important; } #vk-photo-view .pv-close:hover { background: rgba(0, 0, 0, 0.85) !important; } #vk-photo-view .pv-box .pv-img { min-width: 0; flex: 1 1 auto; overflow: hidden; } #vk-photo-view .pv-box .pv-side { flex: 0 0 300px; } #vk-photo-view .pv-box .pv-img img { max-width: min(900px, calc(100vw - 420px)); } @media (max-width: 700px) { #vk-photo-view .pv-box .pv-side { flex: 1 1 auto; } #vk-photo-view .pv-box .pv-img { flex: 0 0 auto; } #vk-photo-view .pv-box .pv-img img { max-width: 100vw; } } #vk-photo-view .pv-img.hue-img-loading { min-height: 200px; } .hue-img-loading::before { content: ''; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #FFFFFF; box-sizing: border-box; animation: hue-img-spin .8s linear infinite; pointer-events: none; z-index: 1; } @keyframes hue-img-spin { to { transform: rotate(360deg); } } #hue-share-modal, #hue-saved-modal { z-index: 2150; } #custom-modal { z-index: 2160 !important; } #hue-mention, #emoji-panel, #hue-who-pop { z-index: 2170 !important; } #hue-tip { z-index: 2180; } .hue-aat-vol { display: none; align-items: center; gap: 4px; flex: 0 0 auto; color: #808080; } .hue-aat.ap-cur .hue-aat-vol { display: inline-flex; } .hue-aat-spk { display: inline-flex; width: 18px; height: 18px; } .hue-aat-spk svg { width: 18px; height: 18px; } .hue-aat-vol input.apm-range { width: 80px; } @media (max-width: 700px) { .hue-aat-vol input.apm-range { width: 56px; } } .hue-ico-media { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E"); } #hue-cm-modal { display: none; position: fixed; inset: 0; z-index: 1270; background: rgba(0, 0, 0, 0.55); align-items: flex-start; justify-content: center; padding: 50px 12px 20px 12px; box-sizing: border-box; } #hue-cm-modal.open { display: flex; } #hue-cm-modal .cm-box { width: 640px; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; background: #FFFFFF; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); } #hue-cm-modal .cm-head { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid #E7E8EC; } #hue-cm-modal .cm-x { margin-left: auto; font-size: 26px; line-height: 1; color: #A3A9B1 !important; text-decoration: none !important; } #hue-cm-modal .cm-tabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid #E7E8EC; overflow-x: auto; scrollbar-width: none; } #hue-cm-modal .cm-tabs a { padding: 10px 12px; color: #626D7A !important; text-decoration: none !important; white-space: nowrap; border-bottom: 2px solid transparent; } #hue-cm-modal .cm-tabs a.on { color: #222 !important; border-bottom-color: #B01E1E; } #hue-cm-modal .cm-body { flex: 1 1 auto; min-height: 240px; max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px; } #hue-cm-modal .cm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 4px; } #hue-cm-modal .cm-grid a { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #F2F3F5; } #hue-cm-modal .cm-grid img { width: 100%; height: 100%; object-fit: cover; display: block; } #hue-cm-modal .cm-row { padding: 6px 0; border-bottom: 1px solid #F0F1F3; } #hue-cm-modal .cm-row:last-child { border-bottom: 0; } #hue-cm-modal .cm-list > .cm-row.cm-audio { padding: 0; border-bottom: 0; } #hue-cm-modal .cm-audio .hue-aat { margin: 0; max-width: none; } #hue-cm-modal .cm-meta { font-size: 11.5px; color: #8A9099; margin-top: 2px; } #hue-cm-modal .cm-row video { max-width: 100%; max-height: 260px; display: block; background: #000; } #hue-cm-modal .cm-row audio { width: 100%; } #hue-cm-modal .cm-link { word-break: break-all; color: #2A5885 !important; } #hue-cm-modal .cm-empty { color: #8A9099; text-align: center; padding: 40px 10px; } #hue-cm-modal .cm-more { text-align: center; padding: 10px; color: #8A9099; } @media (max-width: 700px) { #hue-cm-modal { padding: 0; align-items: stretch; } #hue-cm-modal .cm-box { width: 100%; } #hue-cm-modal .cm-body { max-height: none; } #hue-cm-modal .cm-grid { grid-template-columns: repeat(3, 1fr); } } html.hue-cm-open { overflow: hidden; } #hue-cm-modal .cm-head, #hue-cm-modal .cm-tabs { flex: 0 0 auto; } #hue-cm-modal .cm-body { min-height: 0; } #ap-add-track.ap-add { text-decoration: none; font-size: 14px; line-height: 1; padding: 0 2px; } #ap-add-track.ap-add.done { cursor: default; } #ap-add-track.ap-add.busy { opacity: 0.5; } .theme-legacy #call-window.cw-peer-talking #call-remote-video { outline: 3px solid #2F9A52; outline-offset: -3px; } #emoji-panel { position: absolute; z-index: 1300; width: 320px; max-width: calc(100vw - 8px); box-sizing: border-box; padding: 6px; background: #FFFFFF; color: #222222; border: 1px solid #C9CDD3; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); } #emoji-grid { max-height: 180px; overflow-y: auto; line-height: 1.6; overscroll-behavior: contain; } #emoji-panel .emoji-foot { margin-top: 4px; padding-top: 4px; border-top: 1px solid #E3E4E8; text-align: right; font-size: 12px; } #emoji-panel .emoji-foot a { color: #818C99; text-decoration: none; } html.hue-dark #emoji-panel { background: #222326; color: #E6E6E6; border-color: #3A3C40; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); } html.hue-dark #emoji-panel .emoji-foot { border-top-color: #34363A; } html.hue-dark #emoji-panel .emoji-foot a { color: #9AA0A6; } .hue-ucard { position: absolute; z-index: 1400; width: 320px; box-sizing: border-box; padding: 12px; background: #FFFFFF; color: #222222; border: 1px solid #C5D0DB; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16); font-size: 13px; line-height: 1.4; } .hue-ucard[hidden] { display: none; } .hue-ucard .huc-top { display: flex; gap: 12px; align-items: flex-start; } .hue-ucard .huc-av { flex: 0 0 80px; width: 80px; height: 80px; display: block; } .hue-ucard .huc-av img { width: 80px; height: 80px; object-fit: cover; display: block; } .hue-ucard .huc-av .hue-ava-ring { width: 80px; height: 80px; } .hue-ucard .huc-av .hue-ava-ring img { width: 100%; height: 100%; } .hue-ucard .huc-av .hue-ava-ring, .hue-ucard .huc-av .hue-ava-ring img { border-radius: 0; } .hue-ucard .huc-main { flex: 1 1 auto; min-width: 0; } .hue-ucard .huc-name { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; } .hue-ucard .huc-name a { color: inherit; text-decoration: none; } .hue-ucard .huc-name a:hover { text-decoration: underline; } .hue-ucard .huc-seen { margin-top: 2px; font-size: 12px; color: #818C99; } .hue-ucard .huc-seen.huc-online { color: #4BB34B; } .hue-ucard .huc-status { margin-top: 6px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .hue-ucard .huc-city { margin-top: 4px; font-size: 12px; color: #818C99; } .hue-ucard .huc-btns { display: flex; gap: 8px; margin-top: 12px; } .hue-ucard .huc-btn { flex: 1 1 0; min-width: 0; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; border: 0; background: #E5EBF1; color: #2A3D52 !important; font-family: inherit; font-weight: 600; font-size: 12.5px; line-height: 1; text-decoration: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border-radius: 0; } .hue-ucard .huc-btn:hover { background: #DAE2EA; } .hue-ucard .huc-btn-primary { background: #3A3A3A; color: #FFFFFF !important; } .hue-ucard .huc-btn-primary:hover { background: #4D4D4D; } .hue-ucard .huc-btn-off { cursor: default; opacity: 0.7; } .hue-ucard .huc-btn-off:hover { background: #E5EBF1; } html.hue-dark .hue-ucard { background: #222326; color: #E6E6E6; border-color: #3A3C40; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); } html.hue-dark .hue-ucard .huc-btn { background: #2F3135; color: #E6E6E6 !important; } html.hue-dark .hue-ucard .huc-btn:hover, html.hue-dark .hue-ucard .huc-btn-off:hover { background: #383A3F; } html.hue-dark .hue-ucard .huc-btn-primary { background: #4A4D53; color: #FFFFFF !important; } html.hue-dark .hue-ucard .huc-seen, html.hue-dark .hue-ucard .huc-city { color: #9AA0A6; } .hue-ucard .huc-name .hue-adult-tag { margin-left: 6px; position: relative; top: -1px; } .hue-ucard .huc-desc { margin-top: 6px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hue-ucard .huc-noav { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: #E5EBF1; color: #8FA1B4; } .hue-ucard .huc-noav .hue-ico { width: 32px; height: 32px; flex: 0 0 32px; } html.hue-dark .hue-ucard .huc-noav { background: #2F3135; color: #7E848C; } html.hue-dark .hue-ucard .huc-seen.huc-online { color: #6CC36C; } .hue-vmark, .hue-artist-mark, .hue-cbadge, .hue-gbadge { vertical-align: middle !important; top: auto; } .hue-vmark.big, .vk-page-name .hue-artist-mark svg, .vk-page-name .hue-cbadge { width: 18px; height: 18px; } .hue-cbadge { width: 14px !important; min-width: 14px !important; height: 14px !important; line-height: 14px !important; font-size: 8px !important; } .hue-cbadge img { width: 14px !important; height: 14px !important; } .hue-artist-mark svg { width: 14px; height: 14px; } .vk-page-name .hue-cbadge, .hue-vmark.big ~ .hue-cbadge { width: 18px !important; min-width: 18px !important; height: 18px !important; line-height: 18px !important; font-size: 10px !important; } .vk-page-name .hue-cbadge img, .hue-vmark.big ~ .hue-cbadge img { width: 18px !important; height: 18px !important; } .vk-page-name .hue-artist-mark svg { width: 18px; height: 18px; } .hue-gbadge img { width: 14px !important; height: 14px !important; } .hue-gbadge-ico { font-size: 12px; line-height: 14px; } .vk-page-name .hue-gbadge img { width: 18px !important; height: 18px !important; } .hue-vmark, .hue-artist-mark, .hue-cbadge, .hue-gbadge, .hue-vmark + .hue-gbadge { margin-left: 4px !important; margin-right: 0 !important; } .hue-msg-head > .hue-vmark, .hue-msg-head > .hue-artist-mark, .hue-msg-head > .hue-cbadge, .hue-msg-head > .hue-gbadge { margin-left: 2px !important; } .mg-sold-more { margin: 0; } .mg-sold-more > summary { display: block; list-style: none; text-align: center; cursor: pointer; box-sizing: border-box; height: 30px; line-height: 28px; margin: 0 6px 10px 6px; padding: 0 12px; background: #F4F4F4; border: 1px solid #E6E6E6; color: #3A3A3A; font-size: 13px; font-weight: bold; } .mg-sold-more > summary::-webkit-details-marker { display: none; } html body .mg-sold-more[open] > summary.vk-btn { display: none; } html.hue-dark body:not(.theme-modern) .mg-sold-more > summary { background: #2A2B2E; border-color: #3A3C40; color: #E6E6E6; } .theme-modern .mg-sold-more > summary.vk-btn { display: block; width: auto; text-align: center; height: 32px; line-height: 32px; margin: 0 20px 20px 20px; border: 0; } @media (max-width: 700px) { .theme-modern .mg-sold-more > summary.vk-btn { margin: 0 14px 16px 14px; } } .theme-modern .mg-sold-more .mg-ggrid-sold { padding-top: 0; } .hue-modal-skip { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -6px 0 18px 0; font-size: 13px; color: #555; cursor: pointer; user-select: none; } .hue-modal-skip input { margin: 0; width: 15px; height: 15px; flex: 0 0 15px; } html.hue-dark .hue-modal-skip { color: #B8BCC2; } .hue-mail-form[data-p="resend"] .hue-mail-smtp, .hue-mail-form[data-p="smtp"] .hue-mail-resend { display: none !important; } .hue-ucard { opacity: 0; transform: translateY(6px); transition: opacity 0.14s ease-out, transform 0.14s ease-out; will-change: opacity, transform; } .hue-ucard.huc-on { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .hue-ucard { transition: none; transform: none; } } .hue-more-end { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 12px 0; box-sizing: border-box; clear: both; width: 100%; } .hue-more-spin { display: block; width: 8px; height: 8px; background: #A0A0A0; box-shadow: -14px 0 0 #A0A0A0, 14px 0 0 #A0A0A0; animation: hue-more-pulse 0.9s ease-in-out infinite; } @keyframes hue-more-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } .hue-more-nojs { display: block; padding: 10px; text-align: center; font-size: 13px; } .hue-cmt-older.is-loading a { opacity: 0.5; pointer-events: none; } html.hue-dark .hue-more-spin { background: #6E7278; box-shadow: -14px 0 0 #6E7278, 14px 0 0 #6E7278; } .theme-modern #main-content > .ac-single-head ~ table.vk-post .hue-more-comments.hue-cmt-older { display: block !important; } .hue-np { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; color: #777; font-size: 13px; line-height: 18px; } .hue-np > .hue-ico { width: 14px; height: 14px; flex: 0 0 14px; } .hue-np-t { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; } a.hue-np-t, a.hue-np-t:visited { color: inherit; text-decoration: none; } a.hue-np-t:hover { text-decoration: underline; } .hue-np-self { cursor: pointer; } .hue-np .vk-status-pen { flex: 0 0 auto; } .hue-np-opt { display: flex; align-items: center; gap: 6px; margin: 6px 0 0 0; font-size: 12px; color: #666; cursor: pointer; user-select: none; line-height: 16px; } .hue-np-opt input { margin: 0; flex: 0 0 auto; } .hue-np-lg { margin-bottom: 0; } #status_form .hue-np-opt { flex: 0 0 100%; } html.hue-dark .hue-np { color: #969CA5; } html.hue-dark .hue-np-opt { color: #969CA5; } .hue-limit-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 8px; padding: 9px 12px; border: 1px solid #E6C98F; background: #FFF7E6; color: #7A5300; font-size: 13px; line-height: 1.4; box-sizing: border-box; } .hue-limit-note b { font-weight: bold; } .hue-limit-src { color: #9A7A3A; } .hue-limit-why { flex: 1 1 100%; min-width: 0; color: #5F4A1F; overflow-wrap: anywhere; } .hue-cfrom { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; vertical-align: middle; } .hue-cfrom-btn { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; line-height: 0; color: #818C99; } .hue-cfrom .hue-cfrom-btn, .hue-cfrom .hue-cfrom-btn:hover { min-height: 0 !important; height: auto; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .hue-cfrom-btn:hover .hue-cfrom-av { opacity: .88; } .hue-cfrom-name .hue-vmark { margin-left: 4px; pointer-events: none; } .hue-cfrom-btn:focus-visible { outline: 2px solid #B01E1E; outline-offset: 2px; } .hue-cfrom-av { display: block; width: 30px !important; height: 30px !important; object-fit: cover; } .hue-cfrom-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .12s; } .hue-cfrom.open .hue-cfrom-caret { transform: rotate(180deg); } .hue-cfrom-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 70; display: block; min-width: 220px; max-width: min(300px, calc(100vw - 24px)); max-height: 320px; overflow-y: auto; padding: 6px 0; background: #FFFFFF; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2); box-sizing: border-box; line-height: normal; } .hue-cfrom.hue-up .hue-cfrom-menu { top: auto; bottom: calc(100% + 6px); } .hue-cfrom-item { display: flex; align-items: center; gap: 10px; padding: 7px 14px; color: #1F2023 !important; text-decoration: none !important; font-size: 13px; white-space: nowrap; outline: 0; } .hue-cfrom-item:hover, .hue-cfrom-item:focus { background: #F0F2F5; } .hue-cfrom-item img { width: 28px !important; height: 28px !important; flex: 0 0 28px; object-fit: cover; display: block; } .hue-cfrom-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .hue-cfrom-name .hue-adult-tag { margin-left: 4px; } .hue-cfrom-tick { flex: 0 0 14px; width: 14px; height: 14px; position: relative; visibility: hidden; } .hue-cfrom-tick::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #B01E1E; border-width: 0 2px 2px 0; transform: rotate(45deg); } .hue-cfrom-item.is-on .hue-cfrom-tick { visibility: visible; } .hue-cfrom-item.is-on .hue-cfrom-name { font-weight: bold; } .hue-cfrom-line { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; } .hue-cfrom-legacy .hue-cfrom-av { width: 22px !important; height: 22px !important; border: 1px solid #CCCCCC; } .hue-cfrom-legacy .hue-cfrom-menu { min-width: 200px; padding: 2px 0; border: 1px solid #ADB5BD; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } .hue-cfrom-legacy .hue-cfrom-item { gap: 8px; padding: 4px 8px; font-size: 12px; } .hue-cfrom-legacy .hue-cfrom-item:hover, .hue-cfrom-legacy .hue-cfrom-item:focus { background: #E9EDF1; } .hue-cfrom-legacy .hue-cfrom-item img { width: 22px !important; height: 22px !important; flex-basis: 22px; } .hue-block-img { display: block; max-width: 100%; height: auto; max-height: 300px; object-fit: contain; margin: 0 auto; box-sizing: border-box; } .hue-ava-ring { display: inline-block; box-sizing: border-box; line-height: 0; padding: 0; background: transparent; position: relative; overflow: hidden; } .hue-ava-ring.is-on { padding: var(--ring, 5px) !important; background: var(--ring-bg, #B01E1E) !important; } .hue-ava-ring.is-on.is-image, .hue-ava-ring.is-on[style*="--ring-zoom"] { background: transparent !important; } .hue-ava-ring.is-on.is-image::before, .hue-ava-ring.is-on[style*="--ring-zoom"]::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: var(--ring-bg); background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(var(--ring-zoom, 1)); transform-origin: center; } .hue-ava-ring.is-on > * { position: relative; z-index: 1; } .hue-ava-ring.is-round { border-radius: 50%; } .hue-ava-ring.is-round img { border-radius: 50%; } .hue-ava-ring img { display: block; max-width: 100%; box-sizing: border-box; background: #FFFFFF; } /* Размер задаёт --ava; без него работают width/height самой картинки. */ .hue-ava-ring.hue-ava-inline { width: var(--ava, auto); height: var(--ava, auto); flex: 0 0 auto; vertical-align: middle; } .hue-ava-ring.hue-ava-inline > img { width: var(--ava, auto); height: var(--ava, auto); object-fit: cover; } .hue-ava-ring.hue-ava-inline.is-on > img { width: 100% !important; height: 100% !important; } /* Анимированные рамки: hover на карточке/аватаре или .is-live (шапка чата, профиль). Нельзя вешать на голый tr:hover — #huevo-layout сам table/tr, и тогда анимация включается на всю середину страницы, пока курсор не уйдёт в «ушки». */ .hue-ava-ring.is-on.is-image.is-anim.is-live::before, .hue-ava-ring.is-on.is-image.is-anim:hover::before, .hue-ava-ring.is-on.is-image.is-anim:focus-within::before, .vk-person-av:hover .hue-ava-ring.is-on.is-image.is-anim::before, .vk-person:has(> .vk-person-info:hover) .hue-ava-ring.is-on.is-image.is-anim::before, .vk-dlg:hover .hue-ava-ring.is-on.is-image.is-anim::before, table:not(#huevo-layout) > tr:hover .hue-ava-ring.is-on.is-image.is-anim::before, table:not(#huevo-layout) > tbody > tr:hover .hue-ava-ring.is-on.is-image.is-anim::before { background-image: var(--ring-bg-live, var(--ring-bg)); } /* Сообщения внутри диалога — всегда статичный кадр. */ #chat-box .hue-ava-ring.is-on.is-image.is-anim:not(.is-live)::before { background-image: var(--ring-bg) !important; } @media (hover: none) { .hue-ava-ring.is-on.is-image.is-anim:not(.is-live)::before { background-image: var(--ring-bg) !important; } }