/* ================================================================= ФИНАЛЬНЫЙ ТАКТИЧЕСКИЙ HUD-ПРИЦЕЛ ДЛЯ САЙТА 1SMERCH1.RU (VSE) ================================================================= */ /* Перестраиваем вашу родную кнопку под невидимый контейнер прицела */ .scroll-btn { height: 44px !important; /* Оптимальный размер под прицел */ width: 44px !important; border: none !important; /* Начисто стираем старую черную рамку */ border-radius: 0px !important; /* Убираем круглую форму */ background-color: transparent !important; /* Убираем черный фон */ position: fixed; bottom: 45px; right: 15px; opacity: 0.8 !important; /* Сразу делаем кнопку чуть сочнее */ z-index: 9999; display: none; /* Оставляем display:none, его включает скрипт при скролле */ cursor: pointer; box-sizing: border-box !important; /* ИСПРАВЛЕНИЕ: Плавность теперь применяется только к прозрачности opacity */ transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Убираем стандартное серое выделение при тапе на iOS и Android */ -webkit-tap-highlight-color: transparent !important; } /* ОТРИСОВЫВАЕМ ТАКТИЧЕСКИЙ КАНТИК (Четыре уголка прицела) */ .scroll-btn::after { content: "" !important; position: absolute !important; top: 0px !important; left: 0px !important; right: 0px !important; bottom: 0px !important; /* Рисуем уголки */ border: 2px solid #5b6d54 !important; clip-path: polygon( 0 0, 30% 0, 30% 10%, 10% 10%, 10% 30%, 0 30%, 0 70%, 10% 70%, 10% 90%, 30% 90%, 30% 100%, 0 100%, 70% 100%, 70% 90%, 90% 90%, 90% 70%, 100% 70%, 100% 100%, 100% 30%, 90% 30%, 90% 10%, 70% 10%, 70% 0, 100% 0 ) !important; opacity: 0.8 !important; pointer-events: none !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ПЕРЕДЕЛАВАЕМ СТАРЫЙ УГОЛОК В ТУ САМУЮ СТРЕЛКУ-ТРЕУГОЛЬНИК */ .scroll-btn .scroll-btn-arrow { height: 0 !important; width: 0 !important; /* Рисуем идеальный треугольник на чистом CSS */ border-left: 7px solid transparent !important; border-right: 7px solid transparent !important; border-bottom: 11px solid #7a9471 !important; /* Наш сталкерский болотный цвет */ border-top: none !important; border-radius: 0px !important; background: none !important; /* Сбрасываем старые повороты и отступы, которые ломали форму */ -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; transform: none !important; /* Ровно центрируем стрелку внутри кантика */ margin: 0 !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -60%) !important; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)) !important; transition: all 0.3s ease !important; } /* ================================================================= ЭФФЕКТ НАВЕДЕНИЯ МЫШИ (ДЛЯ НАСТОЛЬНЫХ ПК) И НАЖАТИЯ (ДЛЯ СМАРТФОНОВ) ================================================================= */ .notouch .scroll-btn:hover, .scroll-btn:hover, .scroll-btn:active { opacity: 1 !important; /* ИСПРАВЛЕНИЕ: Убрали translateY и scale отсюда, чтобы невидимый каркас кнопки не прыгал, не расширялся и не терял курсор мыши на границах! */ transform: none !important; } /* Кантик сужается и вспыхивает оранжевым */ .scroll-btn:hover::after, .scroll-btn:active::after { border-color: #ffaa00 !important; /* ИСПРАВЛЕНИЕ: Сужаем уголки внутрь на 4 пикселя. Благодаря стабильной базе, нижняя граница кантика больше никогда не спровоцирует дёрганье! */ top: 4px !important; left: 4px !important; right: 4px !important; bottom: 4px !important; opacity: 1 !important; filter: drop-shadow(0 0 4px #ffaa00) !important; } /* Стрелка-треугольник сочно вспыхивает оранжевым неоном */ .scroll-btn:hover .scroll-btn-arrow, .scroll-btn:active .scroll-btn-arrow { border-bottom-color: #ffaa00 !important; filter: drop-shadow(0 0 5px #ffaa00) !important; } /* ================================================================= ИСПРАВЛЕННАЯ МОБИЛЬНАЯ АДАПТИВНОСТЬ (РАЗМЕРЫ И ОТСТУПЫ) ================================================================= */ @media only screen and (max-width: 700px), only screen and (max-device-width: 700px) { .scroll-btn { bottom: 16px !important; /* Идеальный отступ снизу */ right: 16px !important; /* Идеальный отступ левее от края */ height: 38px !important; width: 38px !important; } .scroll-btn .scroll-btn-arrow { border-left-width: 6px !important; border-right-width: 6px !important; border-bottom-width: 9px !important; } .scroll-btn:hover::after, .scroll-btn:active::after { top: 3px !important; left: 3px !important; right: 3px !important; bottom: 3px !important; } } /* ================================================================= ТАКТИЧЕСКАЯ КНОПКА «ПРОЧИТАТЬ ЦЕЛИКОМ» ДЛЯ ПОРТАЛА 1SMERCH1.RU ================================================================= */ .portal-read-all-link { display: inline-block !important; padding: 8px 18px !important; font-family: 'Segoe UI', Roboto, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: bold !important; text-transform: uppercase !important; /* Автоматические КРУПНЫЕ буквы */ letter-spacing: 1.5px !important; /* Расстояние между буквами для стиля */ text-decoration: none !important; /* Убирает заводское подчеркивание ссылки */ color: #7a9471 !important; /* Сталкерский болотный цвет в покое */ position: relative !important; transition: all 0.3s ease !important; margin: 10px 0 !important; -webkit-tap-highlight-color: transparent !important; /* Убирает мобильный серый блик */ } /* СТРОИМ ЧЕТЫРЕ УГОЛКА ТАКТИЧЕСКОГО ПРИЦЕЛА ВОКРУГ ТЕКСТА */ .portal-read-all-link::after { content: "" !important; position: absolute !important; top: 0px !important; left: 0px !important; right: 0px !important; bottom: 0px !important; border: 1px solid #5b6d54 !important; /* Тонкая рамка в покое */ /* Технология маски: вырезаем из рамки только углы прицела */ clip-path: polygon( 0 0, 20% 0, 20% 8%, 8% 8%, 8% 25%, 0 25%, 0 75%, 8% 75%, 8% 92%, 20% 92%, 20% 100%, 0 100%, 80% 100%, 80% 92%, 92% 92%, 92% 75%, 100% 75%, 100% 100%, 100% 25%, 92% 25%, 92% 8%, 80% 8%, 80% 0, 100% 0 ) !important; opacity: 0.7 !important; pointer-events: none !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================================= ЭФФЕКТ НАВЕДЕНИЯ МЫШИ (ДЛЯ ПК) И ТАПА ПАЛЬЦЕМ (ДЛЯ СМАРТФОНОВ) ================================================================= */ .notouch .portal-read-all-link:hover, .portal-read-all-link:hover, .portal-read-all-link:active { color: #ffaa00 !important; /* Текст загорается оранжевым */ transform: scale(1.02) !important; } /* Рамка прицела плавно сужается к тексту и вспыхивает оранжевым неоном */ .portal-read-all-link:hover::after, .portal-read-all-link:active::after { border-color: #ffaa00 !important; top: 3px !important; left: 4px !important; right: 4px !important; bottom: 3px !important; opacity: 1 !important; filter: drop-shadow(0 0 4px #ffaa00) !important; /* Оранжевый неон */ } /* МОБИЛЬНАЯ АДАПТИВНОСТЬ ДЛЯ ПОРТАЛА */ @media only screen and (max-width: 700px), only screen and (max-device-width: 700px) { .portal-read-all-link { padding: 6px 14px !important; font-size: 11px !important; } } /* ================================================================= 4. ИСПРАВЛЕНИЕ ШРИФТОВ + ОБРЕЗКА СНИЗУ (БОКА И ВЕРХ НЕ ТРОГАТЬ) ================================================================= */ /* Контейнер новости (Намертво защищает и сглаживает ТЕКСТ САЙТА вокруг картинки) */ .news_noncompact_image { position: relative !important; /* Ультимативная защита шрифтов сайта: буквы округлые, сочные и чёткие в Chrome */ -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; text-rendering: optimizeLegibility !important; /* Идеальная читаемость мелкого шрифта сайта */ /* Полная изоляция от аппаратных сдвигов видеокарты, убирающая любое микро-мыло с букв */ transform: translateZ(0) !important; backface-visibility: hidden !important; perspective: 1000px !important; } /* Настройки идеальной обрезки строго снизу без сжатия и трогания боков */ .news_noncompact_image .portal-image, .news_noncompact_image img { max-width: 100% !important; height: auto !important; display: inline-block !important; /* Родное и ровное обтекание текста темы Ubuntu */ aspect-ratio: 16 / 9 !important; /* Задаёт красивый прямоугольный формат */ /* ТОТ САМЫЙ РАБОЧИЙ ВАРИАНТ: Заполнение кадра без сплющивания и скукоживания */ object-fit: cover !important; /* ТОТ САМЫЙ РАБОЧИЙ ВАРИАНТ: Намертво держит верх и бока, срезая излишки только СНИЗУ! */ object-position: top center !important; /* Мягкий аппаратный контраст для убирания мыла со скриншотов в Google Chrome и Яндекс */ image-rendering: -webkit-optimize-contrast !important; transition: filter 0.4s ease !important; } /* Создаем слой тусклого янтарного света (в покое он полностью прозрачен) */ .news_noncompact_image::before { content: "" !important; position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient( ellipse at bottom center, rgba(255, 140, 0, 0.18) 0%, /* Ультра-тусклый оранжевый центр лампочки (всего 18% плотности) */ rgba(204, 119, 0, 0.06) 45%, /* Едва заметный дымчатый отблеск по бокам */ rgba(255, 140, 0, 0) 75% /* Полное растворение к верхним краям */ ) !important; opacity: 0 !important; /* Скрыт, пока не навели мышь */ z-index: 2 !important; pointer-events: none !important; transition: opacity 0.4s ease-in-out !important; } /* ЗАПУСК И МЯГКОЕ "ДЫХАНИЕ" ПОДСВЕТКИ ПРИ НАВЕДЕНИИ (ПК) И ТАПЕ (МОБИЛКИ) */ .notouch .news_noncompact_image:hover::before, .news_noncompact_image:hover::before, .news_noncompact_image:active::before { opacity: 1 !important; /* Плавно включаем лампочку строго при наведении курсора */ animation: stalker-lamp-glow-final-clean 3s ease-in-out infinite alternate !important; } /* Математика плавного колыхания света */ @keyframes stalker-lamp-glow-final-clean { 0% { filter: drop-shadow(0 0 4px rgba(255, 140, 0, 0.15)); } 100% { filter: drop-shadow(0 -4px 10px rgba(255, 140, 0, 0.35)); } }