/* BUNDLE: ui-bundle | Generated: 2026-03-07 19:52:56 | Sources: 8 */ /* --- File: glightbox.min.css --- */ .glightbox-container{width:100%;height:100%;position:fixed;top:0;left:0;z-index:999999!important;overflow:hidden;-ms-touch-action:none;touch-action:none;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;outline:0}.glightbox-container.inactive{display:none}.glightbox-container .gcontainer{position:relative;width:100%;height:100%;z-index:9999;overflow:hidden}.glightbox-container .gslider{-webkit-transition:-webkit-transform .4s ease;transition:-webkit-transform .4s ease;transition:transform .4s ease;transition:transform .4s ease,-webkit-transform .4s ease;height:100%;left:0;top:0;width:100%;position:relative;overflow:hidden;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.glightbox-container .gslide{width:100%;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;opacity:0}.glightbox-container .gslide.current{opacity:1;z-index:99999;position:relative}.glightbox-container .gslide.prev{opacity:1;z-index:9999}.glightbox-container .gslide-inner-content{width:100%}.glightbox-container .ginner-container{position:relative;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:100%;margin:auto;height:100vh}.glightbox-container .ginner-container.gvideo-container{width:100%}.glightbox-container .ginner-container.desc-bottom,.glightbox-container .ginner-container.desc-top{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.glightbox-container .ginner-container.desc-left,.glightbox-container .ginner-container.desc-right{max-width:100%!important}.gslide iframe,.gslide video{outline:0!important;border:none;min-height:165px;-webkit-overflow-scrolling:touch;-ms-touch-action:auto;touch-action:auto}.gslide:not(.current){pointer-events:none}.gslide-image{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.gslide-image img{max-height:100vh;display:block;padding:0;float:none;outline:0;border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:100vw;width:auto;height:auto;-o-object-fit:cover;object-fit:cover;-ms-touch-action:none;touch-action:none;margin:auto;min-width:200px}.desc-bottom .gslide-image img,.desc-top .gslide-image img{width:auto}.desc-left .gslide-image img,.desc-right .gslide-image img{width:auto;max-width:100%}.gslide-image img.zoomable{position:relative}.gslide-image img.dragging{cursor:-webkit-grabbing!important;cursor:grabbing!important;-webkit-transition:none;transition:none}.gslide-video{position:relative;max-width:100vh;width:100%!important}.gslide-video .plyr__poster-enabled.plyr--loading .plyr__poster{display:none}.gslide-video .gvideo-wrapper{width:100%;margin:auto}.gslide-video::before{content:'';position:absolute;width:100%;height:100%;background:rgba(255,0,0,.34);display:none}.gslide-video.playing::before{display:none}.gslide-video.fullscreen{max-width:100%!important;min-width:100%;height:75vh}.gslide-video.fullscreen video{max-width:100%!important;width:100%!important}.gslide-inline{background:#fff;text-align:left;max-height:calc(100vh - 40px);overflow:auto;max-width:100%;margin:auto}.gslide-inline .ginlined-content{padding:20px;width:100%}.gslide-inline .dragging{cursor:-webkit-grabbing!important;cursor:grabbing!important;-webkit-transition:none;transition:none}.ginlined-content{overflow:auto;display:block!important;opacity:1}.gslide-external{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;min-width:100%;background:#fff;padding:0;overflow:auto;max-height:75vh;height:100%}.gslide-media{display:-webkit-box;display:-ms-flexbox;display:flex;width:auto}.zoomed .gslide-media{-webkit-box-shadow:none!important;box-shadow:none!important}.desc-bottom .gslide-media,.desc-top .gslide-media{margin:0 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.gslide-description{position:relative;-webkit-box-flex:1;-ms-flex:1 0 100%;flex:1 0 100%}.gslide-description.description-left,.gslide-description.description-right{max-width:100%}.gslide-description.description-bottom,.gslide-description.description-top{margin:0 auto;width:100%}.gslide-description p{margin-bottom:12px}.gslide-description p:last-child{margin-bottom:0}.zoomed .gslide-description{display:none}.glightbox-button-hidden{display:none}.glightbox-mobile .glightbox-container .gslide-description{height:auto!important;width:100%;/*position:absolute;*/bottom:0;padding:19px 11px;max-width:100vw!important;-webkit-box-ordinal-group:3!important;-ms-flex-order:2!important;order:2!important;max-height:78vh;overflow:auto!important;background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.75)));background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.75) 100%);-webkit-transition:opacity .3s linear;transition:opacity .3s linear;padding-bottom:50px}.glightbox-mobile .glightbox-container .gslide-title{color:#fff;font-size:1em}.glightbox-mobile .glightbox-container .gslide-desc{color:#a1a1a1}.glightbox-mobile .glightbox-container .gslide-desc a{color:#fff;font-weight:700}.glightbox-mobile .glightbox-container .gslide-desc *{color:inherit}.glightbox-mobile .glightbox-container .gslide-desc .desc-more{color:#fff;opacity:.4}.gdesc-open .gslide-media{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:.4}.gdesc-open .gdesc-inner{padding-bottom:30px}.gdesc-closed .gslide-media{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:1}.greset{-webkit-transition:all .3s ease;transition:all .3s ease}.gabsolute{position:absolute}.grelative{position:relative}.glightbox-desc{display:none!important}.glightbox-open{overflow:hidden}.gloader{height:25px;width:25px;-webkit-animation:lightboxLoader .8s infinite linear;animation:lightboxLoader .8s infinite linear;border:2px solid #fff;border-right-color:transparent;border-radius:50%;position:absolute;display:block;z-index:9999;left:0;right:0;margin:0 auto;top:47%}.goverlay{width:100%;height:calc(100vh + 1px);position:fixed;top:-1px;left:0;background:#000;will-change:opacity}.glightbox-mobile .goverlay{background:#000}.gclose,.gnext,.gprev{z-index:99999;cursor:pointer;width:26px;height:44px;border:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.gclose svg,.gnext svg,.gprev svg{display:block;width:25px;height:auto;margin:0;padding:0}.gclose.disabled,.gnext.disabled,.gprev.disabled{opacity:.1}.gclose .garrow,.gnext .garrow,.gprev .garrow{stroke:#fff}.gbtn.focused{outline:2px solid #0f3d81}iframe.wait-autoplay{opacity:0}.glightbox-closing .gclose,.glightbox-closing .gnext,.glightbox-closing .gprev{opacity:0!important}.glightbox-clean .gslide-description{background:#fff}.glightbox-clean .gdesc-inner{padding:12px 10px}.glightbox-clean .gslide-title{font-size:1em;font-weight:400;font-family:arial;color:#000;margin-bottom:19px;line-height:1.4em}.glightbox-clean .gslide-desc{font-size:.86em;margin-bottom:0;font-family:arial;line-height:1.4em}.glightbox-clean .gslide-video{background:#000}.glightbox-clean .gclose,.glightbox-clean .gnext,.glightbox-clean .gprev{background-color:rgba(0,0,0,.75);border-radius:4px}.glightbox-clean .gclose path,.glightbox-clean .gnext path,.glightbox-clean .gprev path{fill:#fff}.glightbox-clean .gprev{position:absolute;top:-100%;left:30px;width:40px;height:50px}.glightbox-clean .gnext{position:absolute;top:-100%;right:30px;width:40px;height:50px}.glightbox-clean .gclose{width:35px;height:35px;top:10px;right:10px;position:absolute}.glightbox-clean .gclose svg{width:18px;height:auto}.glightbox-clean .gclose:hover{opacity:1}.gfadeIn{-webkit-animation:gfadeIn .5s ease;animation:gfadeIn .5s ease}.gfadeOut{-webkit-animation:gfadeOut .5s ease;animation:gfadeOut .5s ease}.gslideOutLeft{-webkit-animation:gslideOutLeft .3s ease;animation:gslideOutLeft .3s ease}.gslideInLeft{-webkit-animation:gslideInLeft .3s ease;animation:gslideInLeft .3s ease}.gslideOutRight{-webkit-animation:gslideOutRight .3s ease;animation:gslideOutRight .3s ease}.gslideInRight{-webkit-animation:gslideInRight .3s ease;animation:gslideInRight .3s ease}.gzoomIn{-webkit-animation:gzoomIn .5s ease;animation:gzoomIn .5s ease}.gzoomOut{-webkit-animation:gzoomOut .5s ease;animation:gzoomOut .5s ease}@-webkit-keyframes lightboxLoader{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes lightboxLoader{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes gfadeIn{from{opacity:0}to{opacity:1}}@keyframes gfadeIn{from{opacity:0}to{opacity:1}}@-webkit-keyframes gfadeOut{from{opacity:1}to{opacity:0}}@keyframes gfadeOut{from{opacity:1}to{opacity:0}}@-webkit-keyframes gslideInLeft{from{opacity:0;-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0)}to{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes gslideInLeft{from{opacity:0;-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0)}to{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes gslideOutLeft{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0);opacity:0;visibility:hidden}}@keyframes gslideOutLeft{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0);opacity:0;visibility:hidden}}@-webkit-keyframes gslideInRight{from{opacity:0;visibility:visible;-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes gslideInRight{from{opacity:0;visibility:visible;-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes gslideOutRight{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0);opacity:0}}@keyframes gslideOutRight{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0);opacity:0}}@-webkit-keyframes gzoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:1}}@keyframes gzoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:1}}@-webkit-keyframes gzoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes gzoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@media (min-width:768px){.glightbox-container .ginner-container{width:auto;height:auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.glightbox-container .ginner-container.desc-top .gslide-description{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.glightbox-container .ginner-container.desc-top .gslide-image,.glightbox-container .ginner-container.desc-top .gslide-image img{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.glightbox-container .ginner-container.desc-left .gslide-description{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.glightbox-container .ginner-container.desc-left .gslide-image{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.gslide-image img{max-height:97vh;max-width:100%}.gslide-image img.zoomable{cursor:-webkit-zoom-in;cursor:zoom-in}.zoomed .gslide-image img.zoomable{cursor:-webkit-grab;cursor:grab}.gslide-inline{max-height:95vh}.gslide-external{max-height:100vh}.gslide-description.description-left,.gslide-description.description-right{max-width:275px}.glightbox-open{height:auto}.goverlay{background:rgba(0,0,0,.92)}.glightbox-clean .gslide-media{-webkit-box-shadow:1px 2px 9px 0 rgba(0,0,0,.65);box-shadow:1px 2px 9px 0 rgba(0,0,0,.65)}.glightbox-clean .description-left .gdesc-inner,.glightbox-clean .description-right .gdesc-inner{position:absolute;height:100%;overflow-y:auto}.glightbox-clean .gclose,.glightbox-clean .gnext,.glightbox-clean .gprev{background-color:rgba(0,0,0,.32)}.glightbox-clean .gclose:hover,.glightbox-clean .gnext:hover,.glightbox-clean .gprev:hover{background-color:rgba(0,0,0,.7)}.glightbox-clean .gprev{top:45%}.glightbox-clean .gnext{top:45%}}@media (min-width:992px){.glightbox-clean .gclose{opacity:.7;right:20px}}@media screen and (max-height:420px){.goverlay{background:#000}} /* --- File: modal-viewer.css --- */ /* Стили для модального окна просмотра изображений */ .modal-image-viewer { display: none; position: fixed; z-index: 2100; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); overflow: auto; opacity: 0; transition: opacity 0.3s ease; /* Важно для анимации: display меняется JS, opacity - CSS */ } .modal-image-viewer.active { opacity: 1; } /* Когда display: flex установлен JS, класс active добавляется асинхронно для запуска перехода */ .modal-image-viewer.show-flex { display: flex; align-items: center; justify-content: center; } .modal-content { position: relative; max-height: 90vh; max-width: 500px; /* margin: auto убран, так как центрирование делает родитель через flexbox */ } .modal-image { display: block; max-width: 100%; max-height: 100%; /* Ограничиваем высоту изображения */ object-fit: contain; /* Сохраняем пропорции изображения */ border: none; } .modal-close { position: absolute; top: 10px; right: 10px; color: #f1f1f1; font-size: 38px; font-weight: bold; cursor: pointer; width: 30px; height: 30px; text-align: center; line-height: 30px; background-color: rgba(0, 0, 0, 0.5); border-radius: 50%; z-index: 1001; /* Убедимся, что кнопка закрытия всегда видна */ } .modal-close:hover { background-color: rgba(255, 255, 255, 0.2); } /* Добавление курсора "увеличительное стекло" к кликабельным изображениям */ .zoomable { cursor: zoom-in; transition: transform 0.2s; } /* Стили для модального окна */ .modal { position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; overflow: auto; } .close { position: absolute; top: 10px; right: 15px; color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; } .close:hover { color: black; } .moderation-stats { background-color: #f8f9fa; border-left: 3px solid #17a2b8; padding: 10px 15px; margin-bottom: 20px; } @media (max-width: 768px) { .modal-content { /* top: 65px; bottom: 60px; */ padding: 8px; } .form-actions { flex-direction: row; gap: 8px; } } /* --- File: tags.css --- */ /* Общий контейнер тегов */ .tags-wrapper { width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; } /* Шапка с заголовком и кнопками сортировки */ .tags-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; border-bottom: 1px solid #eee; flex-wrap: wrap; } .tags-title h3 { border-radius: 4px; color: #1e293b; margin: 0 0 8px 0; } .tags-subtitle { color: #64748b; font-size: 14px; } .sort-controls { display: flex; gap: 10px; } .sort-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 4px; padding: 10px 16px; border: 1px solid #e2e8f0; border-radius: 4px; background: #fff; color: #64748b; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; } .sort-btn:hover { border-color: #6366f1; color: #6366f1; background: #f8fafc; } .sort-btn.active { background: #6366f1; border-color: #6366f1; color: #fff; } /* Сетка тегов */ .tags-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; width: 100%; box-sizing: border-box; margin: 0; padding: 0; } /* Карточка тега */ .tag-card { position: relative; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 4px; padding: 16px; width: 100%; box-sizing: border-box; margin: 0; overflow: hidden; } .tag-card::before { position: absolute; inset: 0; border-radius: 4px; padding: 2px; background: linear-gradient(135deg, #6366f1, #8b5cf6); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); border-radius: 4px; ite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s; } .tag-card:hover { transform: translateY(0); box-shadow: 0 12px 24px -8px rgba(99, 102, 241, 0.15); } .tag-card:hover::before { opacity: 1; } /* Заголовок карточки */ .tag-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin: 5px 0; flex-wrap: wrap; } .tag-name { font-size: 18px; font-weight: 600; color: #1e293b; text-decoration: none; display: flex; align-items: center; gap: 6px; } .tag-hash { color: #6366f1; } .usage-count { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: #f8fafc; border-radius: 20px; font-size: 14px; color: #64748b; } /* Контент карточки */ .tag-content { /* width: 100%; */ max-width: 100%; overflow: hidden; } .recent-articles h4 { font-size: 14px; color: #64748b; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; } .articles-list { width: 100%; max-width: 100%; overflow: hidden; list-style: none; padding: 0; margin: 0; } .articles-list li { width: 100%; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px; border-bottom: 1px dashed #e2e8f0; color: #475569; font-size: 14px; transition: all 0.2s; } .articles-list li:last-child { border-bottom: none; } .articles-list li:hover { background: #f1f5f9; border-radius: 4px; padding-left: 16px; } /* Подвал карточки */ .tag-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding-top: 10px; border-top: 1px solid #f1f5f9; } .last-used { display: flex; align-items: center; gap: 6px; color: #94a3b8; font-size: 13px; } .view-all { display: flex; align-items: center; gap: 6px; color: #6366f1; font-size: 14px; text-decoration: none; transition: transform 0.2s; } .view-all:hover { transform: translateX(4px); } /* Адаптивность */ @media (max-width: 768px) { .tags-wrapper { padding: 0; margin: 0; border-radius: 0; width: 100%; } .tags-header { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 16px; } .sort-controls { width: 100%; } .sort-btn { padding: 8px; font-size: 13px; } .tags-grid { grid-template-columns: 1fr; gap: 10px !important; } .tag-card { width: 100%; margin: 0; padding: 8px !important; } .tag-card-header { flex-direction: column; gap: 8px; } .usage-count { width: 100%; justify-content: center; margin-top: 4px; } .tag-content { margin: 8px 0; padding: 0; } .articles-list li { padding: 6px 8px; } } /* Добавляем стили для очень маленьких экранов */ @media (max-width: 360px) { .sort-btn { font-size: 12px; padding: 6px; } .tag-name { font-size: 16px; } .articles-list { font-size: 13px; } } /* ===== СТИЛИ ДЛЯ СТРАНИЦ ТЕГОВ ===== */ .tags-filters>.filters-form>.filters-group>.button-primary { padding: 8px 8px; } .tag-actions>a.button-secondary.button-small { width: auto; } /* Основные стили страницы тегов */ .tags-page { max-width: 1200px; margin: 0 auto; padding: 20px; } .page-header { margin-bottom: 30px; text-align: center; } .page-header h1 { font-size: 1.8rem; color: #1f2937; margin-bottom: 10px; } .page-description { color: #6b7280; font-size: 1.1rem; } /* Фильтры и поиск */ .tags-filters { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; margin-bottom: 30px; } .filters-form { display: flex; justify-content: center; } .filters-group { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; } .search-wrapper { position: relative; display: flex; align-items: center; } .search-input { padding: 12px 45px 12px 15px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; width: 300px; transition: border-color 0.2s; } .search-input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); } .search-button { position: absolute; right: 5px; padding: 8px; background: none; border: none; color: #6b7280; cursor: pointer; border-radius: 4px; transition: color 0.2s; } .search-button:hover { color: #374151; } .sort-wrapper { display: flex; gap: 10px; } .sort-select { padding: 12px 15px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; background: white; cursor: pointer; } .sort-select:focus { outline: none; border-color: #6366f1; } /* Сетка тегов (Index Page) */ .tags-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 25px; } /* Карточка тега - Компактный дизайн */ .tag-card { background: #ffffff; border: 1px solid #eef1f5; border-radius: 8px; padding: 6px 10px; transition: all 0.2s ease; position: relative; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02); } .tag-card-body { display: flex; flex-direction: column; } .tag-card:hover { border-color: #3498db; box-shadow: 0 4px 8px rgba(52, 152, 219, 0.06); transform: translateY(-1px); } .tag-name-wrapper { display: flex; align-items: center; gap: 5px; margin-bottom: 0; } .tag-name-wrapper .tag-hash { color: #3498db; font-weight: 700; font-size: 1rem; opacity: 0.6; } .tag-name { font-size: 1.05rem; font-weight: 600; color: #1e293b; margin: 0; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tag-stats { display: flex; align-items: baseline; flex-direction: row; gap: 30px; margin-top: -3px; } .articles-count-badge { background: #f1f5f9; color: #475569; padding: 1px 7px; border-radius: 5px; font-size: 0.72rem; font-weight: 600; } .tag-actions { display: flex; align-items: center; } .tag-view-btn { font-size: 0.75rem; color: #94a3b8; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; transition: all 0.2s; } .tag-view-btn:hover { color: #3498db; } /* Фильтры */ .tags-filters { background: #fff; border: 1px solid #eef1f5; border-radius: 12px; padding: 16px; margin-bottom: 30px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); } .filters-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .search-wrapper { position: relative; flex: 1; min-width: 200px; } .search-input { width: 100%; padding: 10px 40px 10px 16px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 0.95rem; transition: all 0.2s; } .search-input:focus { border-color: #3498db; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); outline: none; } .search-button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #94a3b8; cursor: pointer; padding: 4px; } .sort-wrapper { display: flex; gap: 8px; } .sort-select { padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 0.9rem; background: #fff; cursor: pointer; color: #475569; } /* Пустое состояние */ .empty-state { text-align: center; padding: 60px 20px; background: #fff; border: 1px dashed #e2e8f0; border-radius: 16px; } .empty-icon { font-size: 3rem; margin-bottom: 16px; opacity: 0.5; } /* Страница отдельного тега */ .tag-page { max-width: 1200px; margin: 0 auto; padding: 20px; } .tag-page .page-header { text-align: left; margin-bottom: 30px; } /* Хлебные крошки */ .breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 14px; } .breadcrumb a { color: #6366f1; text-decoration: none; transition: color 0.2s; } .breadcrumb a:hover { color: #4f46e5; text-decoration: underline; } .separator { color: #cbd5e1; margin: 0 4px; } .current { color: #94a3b8; font-weight: 400; } /* Информация о теге - Classic Style */ .tag-info-block { background: #ffffff; border: 1px solid #eef1f5; border-radius: 12px; padding: 24px 30px; margin-bottom: 35px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); } .tag-header-content { display: flex; flex-direction: column; gap: 15px; } .tag-title-row { display: flex; align-items: center; gap: 15px; padding-bottom: 15px; border-bottom: 1px solid #f1f5f9; } .tag-main-icon { font-size: 24px; color: #6366f1; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } .tag-title { font-size: 2rem; font-weight: 700; color: #1e293b; margin: 0; } .tag-meta-row { display: flex; justify-content: space-between; align-items: center; } .tag-stats { display: flex; gap: 20px; } .stat-item { display: flex; align-items: center; gap: 8px; color: #64748b; font-size: 0.95rem; } .stat-item i { color: #94a3b8; } .stat-item strong { color: #1e293b; } .button-primary-classic { background: #6366f1; color: #fafafa; padding: 10px 20px; border-radius: 8px; font-weight: 500; font-size: 0.95rem; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s ease; border: none; cursor: pointer; } .button-primary-classic:hover { background: #4f46e5; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2); color: #ffffff; } .button-primary-classic i { font-size: 0.9rem; } @media (max-width: 768px) { .tag-info-block { padding: 20px; margin-bottom: 25px; } .tag-title { font-size: 1.5rem; } .tag-main-icon { width: 40px; height: 40px; font-size: 20px; } .tag-meta-row { /* flex-direction: column; align-items: flex-start; gap: 15px; */ } .tag-stats { flex-direction: column; gap: 8px; } .button-primary-classic { width: 100%; justify-content: center; } } /* Предварительный просмотр статей */ .tag-articles-preview { margin-bottom: 40px; } .tag-articles-preview h2 { font-size: 1.8rem; color: #1f2937; margin-bottom: 25px; } /* Связанные теги */ .related-tags { background: #f9fafb; border-radius: 8px; padding: 25px; margin-top: 40px; } .related-tags h2 { font-size: 1.5rem; color: #1f2937; margin-bottom: 20px; } .tags-list { display: flex; flex-wrap: wrap; gap: 10px; } .tag-item { display: inline-flex; align-items: center; gap: 8px; background: white; border: 1px solid #d1d5db; border-radius: 20px; padding: 8px 16px; text-decoration: none; color: #374151; font-size: 14px; transition: all 0.2s; } .tag-item:hover { border-color: #6366f1; background: #f0f9ff; color: #1e40af; } .tag-count { background: #e5e7eb; color: #6b7280; border-radius: 10px; padding: 2px 8px; font-size: 12px; font-weight: 500; } .tag-item:hover .tag-count { background: #dbeafe; color: #1e40af; } /* Предварительный просмотр статей (Tag View Page) */ .tv-articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-bottom: 40px; } .tv-article-card { background: #ffffff; border: 1px solid #eef1f5; border-radius: 12px; padding: 20px; transition: all 0.3s ease; display: flex; flex-direction: column; } .tv-article-card:hover { border-color: #3498db; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.05); transform: translateY(-2px); } .tv-article-header { margin-bottom: 12px; } .tv-article-title { font-size: 1.25rem; font-weight: 600; color: #1e293b; margin: 0 0 8px 0; line-height: 1.4; } .tv-article-title a { color: inherit; text-decoration: none; transition: color 0.2s; } .tv-article-title a:hover { color: #3498db; } .tv-article-meta { display: flex; gap: 12px; font-size: 0.85rem; color: #64748b; } .tv-article-excerpt { font-size: 0.95rem; line-height: 1.6; color: #475569; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-clamp: 3; overflow: hidden; } .tv-article-stats { display: flex; align-items: center; gap: 15px; margin-top: auto; padding-top: 15px; border-top: 1px solid #f1f5f9; } .tv-stat { display: inline-flex; align-items: center; gap: 6px; color: #94a3b8; font-size: 0.85rem; } .tv-stat svg, .tv-stat i { opacity: 0.7; } /* Показать больше */ .show-more { text-align: center; margin-top: 30px; } /* Пустое состояние */ .empty-state { text-align: center; padding: 60px 20px; color: #6b7280; } .empty-icon { font-size: 4rem; margin-bottom: 20px; } .empty-state h3 { font-size: 1.5rem; color: #374151; margin-bottom: 10px; } .empty-state p { font-size: 1.1rem; margin-bottom: 20px; } @media (max-width: 768px) { .show-more { text-align: center; margin-top: 10px; } .tag-articles-preview { margin-bottom: 10px; } .related-tags>.tags-list { display: flex; flex-wrap: wrap; gap: 5px; } .show-more>a.button-primary { width: auto; } .related-tags { background: #f9fafb; padding: 10px; margin-top: 10px; } .tag-articles-preview h2 { font-size: 1rem; color: #1f2937; margin-bottom: 15px; } .tag-articles-preview>.tv-articles-grid>article.tv-article-card>.tv-article-header>.tv-article-meta { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; } .tag-articles-preview>.tv-articles-grid>article.tv-article-card>.tv-article-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 5px; margin-bottom: 12px; flex-wrap: wrap; } .tag-page { max-width: 1200px; margin: 0 auto; padding: 0px; } .tag-articles-preview>.tv-articles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); gap: 10px; margin-bottom: 20px; } .tag-articles-preview>.tv-articles-grid>.tv-article-card { padding: 10px; } .tag-link { margin-bottom: 0px; } .tags-page { padding: 0; } .tags-grid { gap: 5px; } .page-header h1 { font-size: 1.4rem !important; margin-bottom: 10px; } /* Мобильные стили для фильтров */ .tags-filters { padding: 15px; margin-bottom: 20px; } .filters-form { display: block; } .filters-group { flex-direction: column; gap: 15px; align-items: stretch; } .search-wrapper { width: auto; } .search-input { width: 100%; box-sizing: border-box; font-size: 16px; /* Предотвращает zoom на iOS */ } .sort-wrapper { flex-direction: row; gap: 10px; width: 100%; flex-wrap: nowrap; } .sort-wrapper, .status-filter-wrapper { min-width: 0; } .sort-select { width: 100%; box-sizing: border-box; font-size: 16px; /* Предотвращает zoom на iOS */ } .button-primary, .button-secondary { width: auto; text-align: center; justify-content: center; /* font-size: 16px; */ } } @media (max-width: 480px) { .tags-filters { padding: 10px; margin-bottom: 15px; } .filters-group { gap: 12px; flex-wrap: wrap; align-items: baseline; } .search-input, .sort-select { padding: 10px 12px; font-size: 16px; } .search-input { padding-right: 40px; } .search-button { right: 8px; padding: 6px; } } /* --- File: wiki-label.css --- */ /* Стили для ярлыка Wiki */ .wiki-label { display: inline-block; padding: 0 8px; font-size: 12px; font-weight: bold; color: #fff; background-color: #1c7ec2; border-radius: 12px; /* margin-left: 8px; */ vertical-align: middle; } .wiki-label:hover { background-color: #0056b3; } /* --- File: comments.css --- */ /* Стили для аватаров в комментариях */ .comment-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-right: 10px; border: 1px solid #e1e1e1; } /* Стили для аватаров в ответах (можно сделать меньше) */ .comment.reply .comment-avatar { width: 32px; height: 32px; } /* Обертка для автора комментария и аватара */ .comment-author { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; } /* Стили для имени автора */ .author-name { font-weight: bold; color: #2a5885; text-decoration: none; } .author-name:hover { text-decoration: underline; } .author-badge { display: inline-block; padding: 2px 6px; font-size: 11px; border-radius: 10px; background-color: #fff3cd; /* мягкий желтый */ color: #8a6d3b; border: 1px solid #ffeeba; } /* CSS маски для иконок комментариев */ .comment-icon-thumbs-up { width: 16px; height: 16px; background: currentColor; mask: url('data:image/svg+xml,') no-repeat center; -webkit-mask: url('data:image/svg+xml,') no-repeat center; } /* Скрываем блок действий при быстром редактировании */ .comment[data-editing="true"] .comment-actions { display: none !important; } /* Ограничение вложенности: скрываем кнопку ответа на 3-м уровне */ .comment.reply-3 .reply-btn { display: none !important; } /* Стили для Font Awesome иконок в комментариях */ .comment-rating .action-btn i, .comment-actions .action-btn i, .reply-btn i, .edit-btn i, .delete-btn i, .copy-btn i, .vote-up i, .vote-down i { /* font-size: 14px; transition: all 0.2s ease; */ } /* Цвета для разных типов действий */ .vote-up i { color: #28a745; } .vote-up:hover i { color: #1e7e34; transform: scale(1.1); } /* Активное состояние кнопки "Нравится" */ .vote-up.active { background: linear-gradient(135deg, #28a745, #20c997); color: white; border-color: #28a745; box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3); } .vote-up.active i { color: white; transform: scale(1.1); } .vote-up.active:hover { background: linear-gradient(135deg, #1e7e34, #1a9e8c); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4); } .vote-down i { color: #dc3545; } .vote-down:hover i { color: #c82333; transform: scale(1.1); } /* Активное состояние кнопки "Не нравится" */ .vote-down.active { background: linear-gradient(135deg, #dc3545, #e74c3c); color: white; border-color: #dc3545; box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3); } .vote-down.active i { color: white; transform: scale(1.1); } .vote-down.active:hover { background: linear-gradient(135deg, #c82333, #d63031); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4); } /* Курсор для рейтинга */ .comment-rating-value { cursor: pointer; } /* Стили для гостей - кнопки голосования неактивны */ .comment-rating .action-btn:not(.report-btn) { cursor: pointer; } .comment-rating .action-btn:not(.report-btn):not(:hover) { opacity: 0.7; } .comment-rating .action-btn:not(.report-btn):hover { opacity: 1; } .comment-rating-value:hover { background: #f8f9fa; color: #3498db; text-decoration: underline; } /* Стили для индикатора сохранения черновика */ #draft-saved-indicator i { color: #2196f3 !important; font-size: 16px !important; animation: pulse 2s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } /* Адаптивность для мобильных устройств */ @media (max-width: 768px) { .comment-rating .action-btn i, .comment-actions .action-btn i { font-size: 12px; } #draft-saved-indicator i { font-size: 14px !important; } #rating-modal { padding: 10px; } .rating-modal-content { width: 95%; max-height: calc(90vh - 20px); } } @media (max-height: 600px) { .rating-modal-content { max-height: calc(95vh - 20px); } } /* Дополнительная фиксация центрирования для старых браузеров */ @supports not (display: flex) { #rating-modal { display: table; table-layout: fixed; } .rating-modal-content { display: table-cell; vertical-align: middle; text-align: center; } } /* Состояния активности для кнопок рейтинга */ .action-btn.voted i { transform: scale(1.2); font-weight: bold; } .vote-up.voted i { color: #1e7e34; } .vote-down.voted i { color: #c82333; } /* Улучшенные стили кнопок действий */ .action-btn { border: none; background: transparent; padding: 6px 8px; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; } .action-btn:hover { /* background: rgba(0, 0, 0, 0.05); */ transform: translateY(0); } .action-btn:active { transform: translateY(0); } /* Стили для компактного режима */ .compact .action-btn { padding: 4px 6px; } .compact .action-btn i { font-size: 12px; } /* Стили для модального окна статистики рейтинга комментариев */ #rating-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 10000; margin: 0; padding: 0; box-sizing: border-box; } .rating-modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px); z-index: 10000; } .rating-modal-content { background: white; border-radius: 8px; max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10001; margin: 0; } /* Принудительное центрирование для всех браузеров */ #rating-modal .rating-modal-content { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 10001 !important; } /* Отладочные стили для проверки центрирования */ #rating-modal { display: block !important; } /* Убираем возможные конфликты */ .rating-modal-content * { box-sizing: border-box; } .rating-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #e9ecef; } .rating-modal-header h3 { margin: 0; color: #333; } .rating-modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #999; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; } .rating-modal-close:hover { color: #333; } .rating-modal-body { padding: 20px; } .rating-summary { display: grid; gap: 10px; margin-bottom: 20px; } .rating-summary-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; background: #f8f9fa; } .rating-summary-item.rating-likes { background: #d4edda; color: #155724; } .rating-summary-item.rating-dislikes { background: #f8d7da; color: #721c24; } .rating-summary-item.rating-total { background: #e2e3e5; color: #495057; font-weight: bold; } .user-vote-info { display: flex; align-items: center; gap: 8px; padding: 12px; background: #e3f2fd; border-radius: 6px; margin-bottom: 20px; border-left: 4px solid #2196f3; } .user-vote-info small { color: #666; margin-left: 4px; } .votes-list h4 { margin: 0 0 10px 0; color: #333; } .votes-items { max-height: 200px; overflow-y: auto; } .vote-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; margin-bottom: 4px; } .vote-item.vote-like { background: #d4edda; color: #155724; } .vote-item.vote-dislike { background: #f8d7da; color: #721c24; } .vote-nickname.current-user { font-weight: bold; color: #2196f3; } .vote-date { margin-left: auto; color: #666; font-size: 11px; } /* Медиа-запросы для улучшения центрирования модального окна */ @media (max-width: 768px) { .comment-form { margin-top: 5px; padding: 12px; margin-bottom: 5px; } .comment { padding: 5px; margin: 5px 0; border-radius: 4px; background: #fff; } .rating-modal-content { width: 95%; max-width: 95vw; } } @media (max-height: 600px) { .rating-modal-content { max-height: 90vh; } } /* Дополнительная фиксация центрирования для старых браузеров */ @supports not (display: flex) { #rating-modal { display: table; table-layout: fixed; } .rating-modal-content { display: table-cell; vertical-align: middle; text-align: center; } } /* Стили для формы комментариев в стиле чата */ .chat-style-form { padding: 10px; margin-bottom: 20px; border-radius: 20px; } .chat-input-row { display: flex; align-items: center; /* Выравнивание по центру */ gap: 10px; } .chat-btn, .chat-send-btn, .chat-add-btn { width: 48px; height: 48px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } .chat-add-btn { background-color: #f1f5f9; color: #475569; } .chat-add-btn:hover { background-color: #e2e8f0; color: #1e293b; } .chat-add-btn i { font-size: 18px; } /* Обертка поля ввода */ .chat-textarea-wrapper { flex-grow: 1; position: relative; background-color: #f1f5f9; /* Светло-серый фон всей "пилюли" */ border-radius: 15px; padding: 8px 16px; display: flex; align-items: center; min-height: 48px; border: 1px solid transparent; /* Для плавного перехода рамки при фокусе */ transition: all 0.2s ease; } .chat-textarea-wrapper:focus-within { background-color: #fff; border-color: #cbd5e1; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } /* Поле ввода */ .chat-textarea { width: 100%; border: none !important; /* Важно перебить глобальные стили */ background: transparent !important; font-size: 15px; color: #334155; resize: none !important; /* Убираем уголок */ outline: none !important; padding: 0 !important; /* Вертикальные отступы для текста */ margin: 0; line-height: 1.5; max-height: 150px; padding-right: 28px !important; /* Место для иконки картинки */ overflow-y: hidden; font-family: inherit; box-shadow: none !important; appearance: none; height: 42px; /* Фиксируем начальную высоту */ /* display: flex; align-items: center; - не работает для textarea */ } .chat-textarea::placeholder { color: #94a3b8; opacity: 1; } /* Кнопка "Изображение" внутри поля */ .chat-image-btn { position: absolute; right: 12px; /* top: 50%; transform: translateY(-50%); */ bottom: 10px; /* Прижимаем к низу, если поле растягивается */ background: none; border: none; cursor: pointer; padding: 6px; color: #64748b; display: flex; align-items: center; justify-content: center; transition: color 0.2s; border-radius: 50%; } .chat-image-btn:hover { color: #0f172a; background-color: rgba(0,0,0,0.05); } /* Колонка с кнопками справа */ .chat-actions-column { display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: flex-end; /* Кнопки прижаты к низу */ } .chat-actions-column .chat-add-btn { width: 36px; height: 36px; background: transparent; color: #64748b; border: 1px solid transparent; } .chat-actions-column .chat-add-btn:hover { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; } /* При вертикальном расположении кнопок, поле ввода должно иметь минимальную высоту, чтобы соответствовать кнопкам? Нет, поле ввода растет само по себе. Если кнопок две по 48px, то высота блока справа ~100px. Поле ввода будет по центру или сверху? */ .chat-input-row { align-items: center; /* Выравнивание по нижнему краю */ } .chat-image-btn i { font-size: 18px; } /* Кнопка "Отправить" */ .chat-send-btn { background-color: #28a745; /* Бирюзовый */ color: white; box-shadow: 0 4px 12px rgba(42, 157, 143, 0.3); } .chat-send-btn:hover { background-color: #029524; box-shadow: 0 6px 16px rgba(42, 157, 143, 0.4); color: #ffffff; } .chat-send-btn:active { transform: translateY(0); } .chat-send-btn i { font-size: 18px; margin-left: -2px; /* Коррекция центра */ } /* Футер формы (счетчик) */ .form-footer { display: flex; justify-content: flex-end; margin-top: 4px; font-size: 11px; color: #94a3b8; padding-right: 10px; display: none; /* Скроем пока, чтобы было чище как на макете */ } /* Адаптивность для формы */ @media (max-width: 480px) { .chat-btn, .chat-send-btn, .chat-add-btn { width: 40px; height: 40px; } .chat-textarea-wrapper { min-height: 40px; padding: 6px 12px; } .chat-textarea { font-size: 14px; } } /* === New Modal Comment Form Styles === */ /* Скрытие старой формы (временное решение) */ .chat-input-row, .form-footer { display: none !important; } /* Триггер (фейковое поле ввода) */ .comment-input-trigger { display: flex; align-items: center; gap: 12px; background: #ffffff; border-radius: 10px; padding: 8px 16px; cursor: text; margin-bottom: 20px; border: 2px solid #e2e8f0; /* width: 100%; */ z-index: 998; } /* Стили для прилипающего триггера (превращается в кнопку) */ .comment-input-trigger.sticky { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); width: max-content; margin: 0; /* Стили кнопки */ background: #f8fbff; color: #ffffff; border: none; border-radius: 0 0 5px 5px; padding: 2px 10px; box-shadow: 0 2px 4px #bcbcbc; z-index: 998; } @media (max-width: 600px) { .comment-input-trigger.sticky { width: 100% !important; left: 0 !important; transform: none !important; top: 60px !important; border-radius: 0 !important; } } /* Скрываем лишние элементы в режиме кнопки */ .comment-input-trigger.sticky .trigger-avatar, .comment-input-trigger.sticky .trigger-icons { display: none; } /* Стилизация текста в кнопке */ .comment-input-trigger.sticky .trigger-fake-input { font-weight: 600; text-align: center; font-size: 12px; } /* Добавляем иконку карандаша перед текстом */ .comment-input-trigger.sticky .trigger-fake-input::before { content: '\f303'; /* fa-pencil-alt */ font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 8px; } .comment-input-trigger.sticky:hover { border-color: transparent; box-shadow: 0 2px 4px rgba(52, 152, 219, 0.4); cursor: pointer; } .trigger-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .trigger-fake-input { flex-grow: 1; color: #65676b; font-size: 15px; } .trigger-icons { display: flex; gap: 12px; color: #65676b; } .trigger-icons i { font-size: 18px; cursor: pointer; } /* Модальное окно */ .comment-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); /* Темный фон */ backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; /* Чтобы клики проходили сквозь скрытый оверлей */ } .comment-modal-overlay.active { opacity: 1; pointer-events: auto; } .comment-modal-window { background: #fff; width: 100%; max-width: 600px; border-radius: 12px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2); overflow: hidden; transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); margin: 20px; padding: 0; position: relative; display: flex; flex-direction: column; } .comment-modal-overlay.active .comment-modal-window { transform: scale(1); } /* Заголовок */ .comment-modal-header { padding: 16px 20px; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: center; position: relative; } .comment-modal-header h3 { margin: 0; font-size: 20px; font-weight: 700; color: #050505; } .modal-close-btn { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: #e4e6eb; border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 24px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #606770; transition: background 0.2s; } .modal-close-btn:hover { background: #d8dadf; } /* Форма */ .comment-form-modal { padding: 16px; display: flex; flex-direction: column; gap: 16px; } /* Пользователь */ .modal-user-info { display: flex; align-items: center; gap: 12px; } .modal-user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .modal-user-details { display: flex; flex-direction: column; } .modal-user-name { font-weight: 600; font-size: 15px; color: #050505; } .modal-privacy { font-size: 12px; color: #65676b; background: #e4e6eb; padding: 2px 6px; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: 2px; } /* Поле ввода */ .modal-textarea-wrapper { min-height: 100px; } .modal-textarea { width: 100%; border: none; outline: none; font-size: 20px; /* Крупный шрифт как на скрине */ resize: none; font-family: inherit; color: #050505; padding: 0; min-height: 100px; max-height: 200px; overflow-y: auto; box-sizing: border-box; line-height: 1.4; } .modal-textarea::placeholder { color: #65676b; } /* Панель вложений */ .modal-attachments-panel { border: 1px solid #ddd; border-radius: 8px; padding: 12px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } .attachments-label { font-weight: 500; font-size: 14px; color: #050505; } .attachments-icons { display: flex; gap: 12px; } .attachment-icon { font-size: 20px; cursor: pointer; background: none; border: none; padding: 4px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; } .attachment-icon:hover { transform: scale(1.1); } .icon-gallery { color: #45bd62; } /* Icon colors from screenshot */ .icon-user { color: #1877f2; } .icon-emoji { color: #f7b928; } /* Emoji Picker */ #emoji-picker-container { background: #f0f2f5; border-radius: 12px; padding: 8px; display: flex; flex-wrap: wrap; gap: 8px; border: 1px solid #ddd; animation: slideInBottom 0.2s ease-out; } .emoji-item { font-size: 24px; cursor: pointer; padding: 4px; border-radius: 6px; transition: background 0.2s, transform 0.1s; user-select: none; line-height: 1; } .emoji-item:hover { background: #e4e6eb; transform: scale(1.2); } .emoji-item:active { transform: scale(0.9); } @keyframes slideInBottom { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Футер */ .modal-footer { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; flex-direction: row-reverse; } .char-counter-modal { text-align: right; font-size: 13px; color: #65676b; white-space: nowrap; } .btn-submit-modal { width: auto; padding: 8px 24px; border-radius: 6px; border: none; font-weight: 600; font-size: 15px; cursor: not-allowed; background: #e4e6eb; color: #bcc0c4; transition: all 0.2s; } .btn-submit-modal.active { background: #1877f2; color: #fff; cursor: pointer; } .btn-submit-modal.active:hover { background: #166fe5; } /* Адаптив */ @media (max-width: 600px) { .comment-modal-window { /* height: 100%; */ margin: 0; border-radius: 0; max-width: none; } .modal-close-btn { right: 10px; } .modal-textarea { font-size: 16px; } } /* === Стили для страниц управления комментариями (Редактирование/Удаление) === */ .management-page-container { max-width: 900px; margin: 40px auto; padding: 0; } .management-card { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 20px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05); padding: 40px; overflow: hidden; position: relative; } .management-header { margin-bottom: 30px; } .management-title { font-size: 28px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; background: linear-gradient(135deg, #2a5885, #3498db); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .current-comment-info { background: #f8fafc; border-radius: 15px; padding: 20px; margin-bottom: 30px; border: 1px dashed #cbd5e1; } .current-comment-info h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: #64748b; margin: 0 0 15px 0; } /* Кастомное поле загрузки файла */ .custom-file-upload { position: relative; display: block; width: 100%; } .file-upload-wrapper { display: flex; align-items: center; gap: 15px; padding: 20px; background: #f1f5f9; border: 2px dashed #cbd5e1; border-radius: 15px; cursor: pointer; transition: all 0.3s ease; } .file-upload-wrapper:hover { background: #e2e8f0; border-color: #3498db; } .file-upload-icon { width: 50px; height: 50px; background: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #3498db; box-shadow: 0 4px 6px rgba(0,0,0,0.05); } .file-upload-text { flex: 1; } .file-upload-name { display: block; font-weight: 600; color: #334155; word-break: break-all; } .file-upload-hint { font-size: 12px; color: #64748b; } .hidden-file-input { position: absolute; width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; z-index: -1; } /* Превью и управление текущим изображением */ .image-management { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-bottom: 15px; align-items: start; } .current-image-preview-wrapper { position: relative; width: 120px; height: 120px; } .current-image-preview { width: 100%; height: 100%; border-radius: 15px; object-fit: cover; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .image-actions { display: flex; flex-direction: column; gap: 12px; } .delete-image-checkbox { display: none; } .delete-image-label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; background: #fee2e2; color: #dc2626; border-radius: 10px; cursor: pointer; font-weight: 600; transition: all 0.2s ease; user-select: none; font-size: 14px; width: fit-content; } .delete-image-label:hover { background: #fecaca; } .delete-image-checkbox:checked + .delete-image-label { background: #dc2626; color: #fff; } .delete-image-checkbox:checked + .delete-image-label i { transform: rotate(45deg); } .edit-form-textarea { width: 100%; min-height: 180px; padding: 10px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 16px; line-height: 1.6; resize: vertical; transition: all 0.3s ease; background: #fff; box-sizing: border-box; margin-bottom: 0; } .edit-form-textarea:focus { outline: none; border-color: #3498db; box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1); } .char-counter-wrapper { text-align: right; margin-bottom: 25px; } .char-counter-text { font-size: 13px; color: #64748b; font-weight: 500; } .management-buttons { display: flex; gap: 10px; margin-top: 10px; border-top: 1px solid #f1f5f9; padding-top: 20px; } .btn-premium { padding: 14px 28px; border-radius: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: none; font-size: 15px; text-decoration: none; line-height: 1; } .btn-premium-primary { background: linear-gradient(135deg, #3498db, #2980b9); color: white !important; } .btn-premium-primary:hover { transform: none; box-shadow: 0 2px 10px rgba(52, 152, 219, 0.4); } .btn-premium-secondary { background: #f1f5f9; color: #475569 !important; } .btn-premium-secondary:hover { background: #e2e8f0; color: #1e293b !important; } /* Специфичные стили для кнопок жалоб (копия premium стилей) */ .btn-report { padding: 8px; border-radius: 6px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: none; font-size: 14px; text-decoration: none; line-height: 1; } .btn-report-primary { background: linear-gradient(135deg, #3498db, #2980b9); color: white !important; } .btn-report-primary:hover { transform: none; box-shadow: 0 2px 10px rgba(52, 152, 219, 0.4); } .btn-report-secondary { background: #f1f5f9; color: #475569 !important; } .btn-report-secondary:hover { background: #e2e8f0; color: #1e293b !important; } /* Стили для кнопок быстрого редактирования (QE) */ .btn-qe { padding: 8px 16px; border-radius: 6px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; font-size: 13px; text-decoration: none; line-height: 1; } .btn-qe-primary { background: #3498db; color: white !important; } .btn-qe-primary:hover { background: #2980b9; } .btn-qe-secondary { background: #f1f5f9; color: #475569 !important; } .btn-qe-secondary:hover { background: #e2e8f0; } @media (max-width: 640px) { .management-card { padding: 30px 20px; } .image-management { grid-template-columns: 1fr; justify-items: center; text-align: center; } .image-actions { align-items: center; } .current-image-preview-wrapper { width: 100%; max-width: 200px; height: 200px; } .management-buttons { flex-direction: row; } .btn-premium { /* width: 100%; */ min-width: 44px; padding: 10px; } .btn-premium span { display: none; } .btn-premium i { margin: 0 !important; font-size: 18px; } .btn-qe { background: transparent !important; border: none !important; box-shadow: none !important; padding: 8px !important; } .btn-qe span { display: none !important; } .btn-qe i { margin: 0 !important; font-size: 12px; } .btn-qe-primary { color: #3498db !important; } .btn-qe-secondary { color: #64748b !important; } .quick-edit-hint { display: none !important; } .quick-edit-actions { justify-content: flex-start; width: 100%; } /* Скрываем текст кнопки "Отправить" в модальном окне комментария */ .btn-submit-modal { min-width: 44px; padding: 5px 12px; font-size: 0; display: flex; align-items: center; justify-content: center; } .btn-submit-modal::after { content: '\f1d8'; /* fas fa-paper-plane */ font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 16px; } } @media (max-width: 768px) { .image-management { display: flex; flex-direction: row; gap: 20px; } .current-image-preview { width: 100%; height: auto; min-width: 120px; } .current-image-preview-wrapper { width: 100%; height: auto; min-width: 120px; } .management-buttons { gap: 10px; border-top: 0 solid #f1f5f9; margin-top: 0; padding-top: 0; } .edit-form-group { margin-bottom: 10px; } } @media (max-width: 468px) { .image-management { gap: 10px; } } /* Breadcrumbs */ .breadcrumbs { margin-bottom: 20px; font-size: 14px; color: #64748b; } .breadcrumbs a { color: #3498db; text-decoration: none; } .breadcrumbs a:hover { text-decoration: underline; } .breadcrumbs span { color: #64748b; } /* Management Page Styles */ .management-subtitle { color: #64748b; font-size: 15px; } .success-message { background: rgba(16, 185, 129, 0.1); border: 1px solid #10b981; padding: 25px; border-radius: 15px; color: #065f46; text-align: center; } .success-message-icon { font-size: 54px; margin-bottom: 20px; color: #10b981; display: block; } .success-message-title { margin-bottom: 10px; } .success-message-actions { margin-top: 20px; display: flex; gap: 10px; justify-content: center; } .error-message { background: rgba(239, 68, 68, 0.1); border: 1px solid #ef4444; padding: 15px; border-radius: 12px; color: #b91c1c; margin-bottom: 25px; } .error-message p { margin: 5px 0; } .edit-form-group { margin-bottom: 20px; } .edit-form-label { display: block; font-weight: 600; color: #334155; margin-bottom: 10px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; } .new-image-preview-wrapper { margin-top: 15px; } .new-image-preview { max-width: 100%; max-height: 250px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } /* === Modern Reply Form === */ .reply-form { background: #f8fafc; border-radius: 6px; border: 1px solid #e2e8f0; } .reply-form-container { display: flex; gap: 12px; align-items: flex-start; } .reply-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .reply-content-wrapper { flex-grow: 1; } .reply-textarea { width: 100%; min-height: 80px; padding: 12px; border: 1px solid #cbd5e1; border-radius: 12px; font-size: 14px; line-height: 1.5; resize: vertical; margin-bottom: 5px; transition: all 0.2s; background: #fff; } .reply-textarea:focus { outline: none; /* border-color: #3498db; */ box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.1); } .reply-form-actions { display: flex; gap: 10px; justify-content: start; padding: 8px; } .reply-form{ padding: 0; } /* Переключатель режима загрузки комментариев */ .loading-mode-toggle { display: flex; align-items: center; gap: 12px; padding: 6px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 13px; color: #475569; user-select: none; transition: all 0.2s ease; } .loading-mode-toggle:hover { border-color: #cbd5e1; background: #f1f5f9; } .loading-mode-label { font-weight: 500; } .loading-switch { position: relative; display: inline-block; width: 36px; height: 20px; } .loading-switch input { opacity: 0; width: 0; height: 0; } .loading-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .3s; border-radius: 20px; } .loading-slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } input:checked + .loading-slider { background-color: #3b82f6; } input:focus + .loading-slider { box-shadow: 0 0 1px #3b82f6; } input:checked + .loading-slider:before { transform: translateX(16px); } .loading-controls { display: flex; align-items: center; gap: 15px; /* Отступ между переключателями */ } /* Стили для кнопки настроек (шестеренка) */ .comments-settings { position: relative; display: flex; align-items: center; } .comments-settings-btn { display: none; /* Скрыто на десктопе, так как контролы видны сразу */ align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: #f8f9fa; border: 1px solid #eef0f2; color: #64748b; cursor: pointer; transition: all 0.2s ease; font-size: 16px; } .comments-settings-btn:hover { background: #edf2f7; color: #2d3748; } @media (max-width: 768px) { .comments-settings-btn { display: flex; /* Показываем на мобильных */ } .comments-settings .loading-controls { display: none; /* Скрываем на мобильных по умолчанию */ position: absolute; top: calc(100% + 10px); right: 0; background: #ffffff; padding: 15px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); border: 1px solid #e2e8f0; z-index: 1001; flex-direction: column; align-items: flex-start; gap: 15px; min-width: 250px; max-width: calc(100vw - 20px); /* Чтобы не выходило за границы */ box-sizing: border-box; animation: commentsSettingsFadeIn 0.2s ease-out; } .comments-settings.open-up .loading-controls { animation: commentsSettingsFadeInUp 0.2s ease-out; } .comments-settings.open .loading-controls { display: flex; } } @keyframes commentsSettingsFadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes commentsSettingsFadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .loading-mode-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; transition: opacity 0.2s; } .loading-mode-toggle:hover { opacity: 0.8; } .loading-mode-text { color: #334155; text-align: left; } /* Стили для панели инструментов комментариев */ .comments-toolbar { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 20px 0; } /* Стили для контейнера кнопки подгрузки */ .comments-load-more-container, .comments-load-more-top-container { display: none; /* Скрыто по умолчанию, управляется JS */ justify-content: center; flex-wrap: wrap; } .comments-load-more-top-container { margin-bottom: 20px; } .comments-load-more-container { margin-top: 20px; } .comments-load-more-container.hidden { display: none; } .hidden-from-top, .hidden-from-bottom { display: none !important; } /* Стили для кнопок подгрузки (сверху и снизу) */ #load-more-comments-btn, #load-more-top-btn { padding: 8px 12px; border-radius: 30px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.3s ease; cursor: pointer; border: 1px solid #e2e8f0; background: #f1f5f9; } #load-more-comments-btn:hover, #load-more-top-btn:hover { background: #e2e8f0; } .load-more-text { display: inline-flex; align-items: center; } .load-more-short { display: none; } @media (max-width: 640px) { .comments-load-more-container { width: 100%; } /* Форсируем стили кнопки, перебивая системные !important из .btn-qe */ #load-more-comments-btn, #load-more-top-btn { width: 100% !important; justify-content: center !important; background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; border-radius: 30px !important; padding: 12px 24px !important; } /* Форсируем показ текста, перебивая системный display: none !important из .btn-qe span */ #load-more-comments-btn span, #load-more-top-btn span { display: inline-flex !important; } /* Прячем полную версию текста на мобильных */ #load-more-comments-btn .load-more-full, #load-more-top-btn .load-more-full { display: none !important; } /* Показываем сокращенную версию текста на мобильных */ #load-more-comments-btn .load-more-short, #load-more-top-btn .load-more-short { display: inline-block !important; margin-left: 5px; } .loading-mode-toggle { display: flex; align-items: center; gap: 5px; padding: 6px 8px; } } /* Стили для интерактивной даты комментариев */ .comment-date { display: flex; align-items: center; gap: 8px; color: #888; font-size: 13px; position: relative; /* Для позиционирования выпадашки */ } .date-trigger { cursor: pointer; color: #3498db; transition: color 0.2s, transform 0.2s; font-size: 14px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #f8f9fa; border: 1px solid #eef0f2; } .date-trigger:hover { color: #2980b9; background-color: #e3f2fd; } .comment-date-text { white-space: normal; } .edited-mark { font-size: 11px; color: #e67e22; font-weight: bold; } /* Десктопная версия: всегда показываем дату без иконки */ .date-trigger { display: none !important; } .comment-date-text { display: inline-block !important; color: #888; font-size: 13px; } .comment-date-text .edited-mark { display: inline-block !important; margin-left: 6px; color: #999; font-weight: normal; } /* Мобильная версия: скрываем дату за иконкой-выпадашкой */ @media (max-width: 768px) { .comment-date-text { display: none !important; white-space: normal; min-width: 120px; z-index: 100; } .comment-date-text.show { display: flex !important; position: absolute; bottom: 100%; right: 0; margin-bottom: 8px; background: #fff; padding: 8px 12px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); border: 1px solid #eee; color: #333; font-weight: 500; animation: commentDatePopup 0.2s ease-out; flex-wrap: wrap; flex-direction: column; align-content: center; } .comment-date-text .edited-mark { display: block !important; border-top: 1px solid #eee; margin-top: 4px; padding-top: 4px; margin-left: 0 !important; } .date-trigger { display: flex !important; } /* Треугольник внизу выпадашки */ .comment-date-text.show::after { content: ''; position: absolute; top: 100%; right: 8px; border-width: 6px; border-style: solid; border-color: #fff transparent transparent transparent; } } @keyframes commentDatePopup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* --- File: image-comments.css --- */ /* * Image Comments Sidebar for GLightbox */ .gslide-comments-sidebar { width: 350px; min-width: 350px; height: 100%; background: #1a1a1a; border-left: 1px solid #333; display: flex; flex-direction: column; color: #fff; font-family: 'Roboto', sans-serif; position: relative; z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .gslide-comments-sidebar.visible { opacity: 1; visibility: visible; } .gcomments-header { padding: 15px 20px; border-bottom: 1px solid #333; display: flex; justify-content: start; align-items: center; gap: 12px; } .gcomments-header h3 { margin: 0; font-size: 16px; font-weight: 500; color: #666; } .gdownload-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: rgba(255, 255, 255, 0.05); border-radius: 50%; color: #9f9f9f; text-decoration: none; transition: all 0.2s ease; } .gdownload-btn:hover { background: #535353; color: #ffffff; transform: translateY(-1px); } .gcomments-list { flex: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 15px; } /* Custom Scrollbar */ .gcomments-list::-webkit-scrollbar { width: 6px; } .gcomments-list::-webkit-scrollbar-track { background: transparent; } .gcomments-list::-webkit-scrollbar-thumb { background: #444; border-radius: 10px; } .gcomment-item { display: flex; gap: 12px; } .gcomment-avatar img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } .gcomment-body { flex: 1; min-width: 0; } .gcomment-user { font-weight: 500; font-size: 14px; color: #3498db; margin-bottom: 2px; display: block; } .gcomment-text { font-size: 14px; line-height: 1.4; color: #ddd; word-wrap: break-word; } .gcomment-date { font-size: 11px; color: #666; margin-top: 4px; } .gcomments-footer { padding: 15px; border-top: 1px solid #333; background: #1a1a1a; } .gcomments-input-wrapper { display: flex; flex-direction: column; gap: 10px; } .gcomments-textarea { width: 100%; background: #2a2a2a; border: 1px solid #444; border-radius: 8px; color: #fff; padding: 10px; font-size: 14px; resize: none; min-height: 60px; transition: border-color 0.2s; } .gcomments-textarea:focus { outline: none; border-color: #3498db; } .gcomments-submit-btn { align-self: flex-end; display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.1); color: #fff; border: none; padding: 6px 16px; border-radius: 20px; font-size: 11px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; text-transform: lowercase; } .gcomments-submit-btn:hover { background: rgba(52, 152, 219, 0.3); color: #3498db; transform: translateY(-1px); } .gcomments-submit-btn:active { transform: scale(0.98); } .gcomments-submit-btn:disabled { background: rgba(255, 255, 255, 0.05); color: #666; cursor: not-allowed; } .gcomments-empty { text-align: center; color: #666; margin-top: 50px; font-size: 14px; } /* Skeleton Loading */ .gcomment-skeleton { display: flex; gap: 12px; padding: 5px 0; animation: gshimmer 1.5s infinite linear; } .gcomment-skeleton .avatar { width: 36px; height: 36px; border-radius: 50%; background: #333; } .gcomment-skeleton .lines { flex: 1; } .gcomment-skeleton .line { height: 10px; background: #333; margin-bottom: 8px; border-radius: 4px; } .gcomment-skeleton .line.short { width: 40%; } .gcomment-skeleton .line.medium { width: 70%; } @keyframes gshimmer { 0% { opacity: 0.5; } 50% { opacity: 0.3; } 100% { opacity: 0.5; } } .gcomment-actions { display: flex; gap: 8px; margin-top: 5px; opacity: 0; transition: opacity 0.2s; } .gcomment-item:hover .gcomment-actions { opacity: 1; } .gcomment-btn { display: flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, 0.1); border: none; color: #ffffff; font-size: 10px; font-weight: 500; cursor: pointer; padding: 3px 8px; border-radius: 4px; transition: all 0.2s ease; text-transform: lowercase; } .gcomment-btn:hover { background: rgba(52, 152, 219, 0.3); color: #3498db; } .gcomment-btn.delete:hover { background: rgba(231, 76, 60, 0.3); color: #e74c3c; } .gcomment-edit-area { width: 100%; background: #2a2a2a; border: 1px solid #444; border-radius: 4px; color: #fff; padding: 8px; font-size: 13px; margin: 5px 0; min-height: 40px; max-height: 100px; display: block; overflow-y: auto; box-sizing: border-box; line-height: 1.4; resize: none; } .gcomment-edit-buttons { display: flex; gap: 5px; } .gcomment-save-btn, .gcomment-cancel-btn { display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, 0.1); border: none; color: #ffffff; font-size: 10px; font-weight: 500; cursor: pointer; padding: 3px 8px; border-radius: 4px; transition: all 0.2s ease; text-transform: lowercase; } .gcomment-save-btn:hover { background: rgba(52, 152, 219, 0.3); color: #3498db; } .gcomment-cancel-btn:hover { background: rgba(255, 255, 255, 0.2); color: #ffffff; } .gcomments-guest-notice { font-size: 13px; color: #888; text-align: center; } .gcomments-guest-notice a { color: #3498db; text-decoration: none; } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /* Integration with GLightbox */ .glightbox-container .gcontainer { display: flex; flex-direction: row; position: relative; height: 100vh !important; } /* Перенос стрелки навигации "Вперед" влево, когда сайдбар открыт */ @media (min-width: 768px) { .glightbox-container .gcontainer.sidebar-expanded ~ .gnext, .glightbox-container .gcontainer.sidebar-expanded .gnext { right: 370px !important; z-index: 10002 !important; opacity: 1 !important; } /* Для старых версий или если кнопка внутри контейнера */ .glightbox-container .sidebar-expanded .gnext { right: 370px !important; z-index: 10002 !important; } } /* Hide standard GLightbox description when sidebar is expanded */ .glightbox-container .gcontainer.sidebar-expanded .gslide-description { display: none !important; } .glightbox-container .ginner-container { flex: 1; width: auto !important; } /* Sidebar Edge Toggle */ .gsidebar-edge-toggle { position: absolute; top: 65% !important; right: 350px; /* Ширина сайдбара */ transform: translateY(-50%) !important; width: 24px; height: 60px; background: #373737; border: 1px solid #000000; border-right: none; border-radius: 8px 0 0 8px; color: #9f9f9f; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10001; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); padding: 0; outline: none; } .gsidebar-edge-toggle:hover { background: #535353; color: #ffffff; } .gsidebar-edge-toggle.collapsed { right: 0; border-right: 0 solid #333; margin-right: 5px; } .gsidebar-edge-toggle i { font-size: 14px; transition: transform 0.3s; } /* Скрываем/Сворачиваем на десктопе в узкую полоску */ @media (min-width: 768px) { .gslide-comments-sidebar.collapsed { display: flex !important; width: 0 !important; min-width: 0 !important; border-right: 5px solid #333; /* Вертикальная полоска-индикатор */ background: transparent; overflow: hidden; } } /* На мобильных устройствах блок комментариев отображается снизу */ @media (max-width: 767px) { .gcomments-list { max-height: 400px; } .glightbox-container .gslider { height: auto !important; } .gslide-comments-sidebar { width: 100%; height: auto; min-height: 300px; border-left: none; border-top: 1px solid #333; flex: none; /* Убираем жесткий flex-grow */ } .glightbox-container .gcontainer { overflow-y: auto !important; /* Разрешаем скролл всего контейнера */ height: 100% !important; padding-bottom: 60px; /* Добавляем отступ снизу для прокрутки */ } /* Когда сайдбар раскрыт - используем блочную модель для прокрутки комментариев ниже фото */ .glightbox-container .gcontainer.sidebar-expanded { display: block !important; } /* Если сайдбар скрыт - делаем контейнер на весь экран и центрируем картинку */ .glightbox-container .gcontainer.sidebar-collapsed { display: flex !important; flex-direction: column; justify-content: center; overflow: hidden !important; padding-bottom: 0 !important; } .glightbox-container .gcontainer.sidebar-collapsed .ginner-container { height: 100% !important; flex: 1; } .gcomments-footer { padding-bottom: 40px; /* Чтобы кнопка не прилипала к самому краю экрана */ } .gsidebar-edge-toggle { display: flex !important; position: fixed !important; top: 10px !important; bottom: 20px; left: 10px !important; transform: none !important; width: 32px; height: 32px; border-radius: 50%; background: #495057; border: 1px solid #fff; color: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.4); margin: 0 !important; } .gsidebar-edge-toggle i.fa-chevron-right { transform: rotate(90deg); /* Поворачиваем стрелку: > становится V */ font-size: 18px; } .gsidebar-edge-toggle i.fa-comments { transform: none; /* Иконку комментов не вращаем */ font-size: 18px; } .gsidebar-edge-toggle.collapsed { right: 20px; margin-right: 0; border-right: 1px solid #fff; /* Reset desktop border override */ } /* Когда сайдбар виден, контейнер может скроллиться */ .glightbox-container .gcontainer.sidebar-expanded .ginner-container { height: auto !important; min-height: 50vh; flex-shrink: 0; } /* Скрываем сайдбар, если свернут */ .gslide-comments-sidebar.collapsed { display: none !important; } } /* Стили для ответов на комментарии */ .gcomment-thread { position: relative; margin-bottom: 15px; } /* Скрываем вертикальную линию, если нет дочерних комментариев */ .gcomment-thread:not(:has(.gcomment-children .gcomment-item))::before { display: none; } /* Вертикальная линия от родителя вниз */ .gcomment-thread::before { content: ''; position: absolute; left: 17px; /* Центр аватарки (36px / 2 - 1) */ top: 36px; bottom: 25px; /* Заканчивается на уровне аватара последнего ответа */ width: 2px; background: #444; z-index: 0; } .gcomment-children { margin-top: 5px; } .gcomment-reply { margin-top: 12px !important; margin-left: 35px !important; position: relative; z-index: 1; } /* Горизонтальное ответвление к дочернему комменту */ .gcomment-reply::before { content: ''; position: absolute; left: -18px; top: 18px; /* Центр аватарки дочернего */ width: 15px; height: 2px; background: #444; } .gcomment-reply-form { margin-top: 10px; width: 100%; } .gcomment-edit-buttons { display: flex; gap: 5px; } .gcomment-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .reply-mode { border: 1px solid #3498db66; padding: 10px; border-radius: 8px; background: rgba(52, 152, 219, 0.05); } .gcomment-item { transition: background 0.2s; } .gcomment-item:hover { background: rgba(255, 255, 255, 0.02); } /* --- File: create-article-button.css --- */ .create-article-btn-round { display: flex; align-items: center; justify-content: center; height: 26px; /* Высота кнопки */ border-radius: 50%; /* Делаем кнопку круглой */ /* background-color: #28a745; */ background: #f4f6f9; /* Зеленый цвет фона */ color: rgb(0, 0, 0); /* Цвет иконки */ font-size: 18px; /* Размер иконки */ text-decoration: none; transition: background-color 0.3s ease, transform 0.3s ease; /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); */ padding: 4px 8px; } .create-article-btn-round:hover { /* background: #218838; */ background: #f4f6f9; color: #218838; transform: scale(1.0); } .create-article-btn-round i { margin: 0; /* Убираем отступы у иконки */ } .button-create-articles{ display: inline-block; padding: 8px 8px; border-radius: 4px; text-decoration: none; font-size: 14px; font-weight: 500; transition: background-color 0.2s, color 0.2s; background-color: #28a745; } .button-create-articles:hover{ background: #218838; } /* --- File: ui-components.css --- */ :root { --ui-primary: var(--primary-color, #3498db); --ui-primary-dark: var(--primary-dark, #2980b9); --ui-border: #d1d5db; --ui-bg: #fff; --ui-text: #374151; --ui-text-muted: #6b7280; --ui-focus-ring: rgba(52, 152, 219, 0.25); --ui-radius: 6px; --ui-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* === UI Custom Checkbox === */ .ui-checkbox { display: inline-flex; align-items: center; cursor: pointer; position: relative; font-size: 1rem; user-select: none; margin-bottom: 0; /* Override default label margins */ } .ui-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .ui-checkbox-mark { position: relative; display: inline-flex; /* Changed to inline-flex for centering */ align-items: center; justify-content: center; width: 1.35rem; /* Slightly larger */ height: 1.35rem; background-color: var(--ui-bg); border: 2px solid var(--ui-border); border-radius: var(--ui-radius); transition: var(--ui-transition); margin-right: 0.65rem; flex-shrink: 0; } /* Hover state */ .ui-checkbox:hover input ~ .ui-checkbox-mark { border-color: var(--ui-primary); background-color: #f8fafc; } /* Checked state */ .ui-checkbox input:checked ~ .ui-checkbox-mark { background-color: var(--ui-primary); border-color: var(--ui-primary); } /* Checkmark icon */ .ui-checkbox-mark::after { content: ""; position: absolute; display: none; /* Hidden by default */ width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -2px; /* Visual correction */ } .ui-checkbox input:checked ~ .ui-checkbox-mark::after { display: block; } /* Focus state for accessibility */ .ui-checkbox input:focus-visible ~ .ui-checkbox-mark { box-shadow: 0 0 0 3px var(--ui-focus-ring); } /* === UI Toggle Switch (Slider) === */ .ui-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; user-select: none; } .ui-toggle input { opacity: 0; width: 0; height: 0; position: absolute; } .ui-toggle-slider { position: relative; display: inline-block; width: 3rem; height: 1.6rem; background-color: #cbd5e1; border-radius: 9999px; transition: var(--ui-transition); margin-right: 0.75rem; flex-shrink: 0; border: 2px solid transparent; /* Keeps sizing consistent */ } .ui-toggle-slider::before { content: ""; position: absolute; height: 1.25rem; width: 1.25rem; left: 0.15rem; bottom: 0.15rem; background-color: white; border-radius: 50%; transition: var(--ui-transition); box-shadow: 0 1px 3px rgba(0,0,0,0.15); } /* Checked state */ .ui-toggle input:checked + .ui-toggle-slider { background-color: var(--ui-primary); } .ui-toggle input:checked + .ui-toggle-slider::before { transform: translateX(1.4rem); } /* Hover & Focus */ .ui-toggle:hover .ui-toggle-slider { filter: brightness(0.95); } .ui-toggle input:focus-visible + .ui-toggle-slider { box-shadow: 0 0 0 3px var(--ui-focus-ring); } /* === UI Custom Radio === */ .ui-radio { display: inline-flex; align-items: center; cursor: pointer; position: relative; font-size: 1rem; user-select: none; } .ui-radio input { position: absolute; opacity: 0; width: 0; height: 0; } .ui-radio-mark { position: relative; display: inline-block; width: 1.35rem; height: 1.35rem; background-color: var(--ui-bg); border: 2px solid var(--ui-border); border-radius: 50%; transition: var(--ui-transition); margin-right: 0.65rem; flex-shrink: 0; } .ui-radio:hover input ~ .ui-radio-mark { border-color: var(--ui-primary); background-color: #f8fafc; } .ui-radio input:checked ~ .ui-radio-mark { border-color: var(--ui-primary); background-color: var(--ui-bg); } .ui-radio-mark::after { content: ""; position: absolute; display: none; /* top: 50%; left: 50%; */ transform: translate(-50%, -50%); width: 0.75rem; height: 0.75rem; border-radius: 50%; background-color: var(--ui-primary); } .ui-radio input:checked ~ .ui-radio-mark::after { display: block; } /* Label text helpers */ .ui-label { color: var(--ui-text); font-weight: 500; } .ui-label-sm { font-size: 0.875rem; } /* === Universal Pagination (Rendered by renderUniversalPagination) === */ .pagination { display: flex; justify-content: center; align-items: center; margin: 20px 0; gap: 4px; flex-wrap: wrap; font-size: 12px; } .pagination a, .pagination button, .pagination span, .pagination-btn, .pagination-info { padding: 4px 8px; border-radius: 4px; border: 1px solid #e3e6f0; background-color: #fff; color: #4e73df; text-decoration: none; font-weight: 500; font-size: 12px; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 0; height: 32px; } .pagination-info, .pagination-current, .pagination span.current, .page-link.current { background-color: #4e73df !important; color: white !important; border-color: #4e73df !important; cursor: default; } .pagination a:hover:not(.current):not(.pagination-info), .pagination-btn:hover { background-color: #eaecf4; color: #2e59d9; border-color: #dddfeb; } .pagination-goto-form { display: flex; align-items: center; margin: 0 5px; padding: 0; } .pagination-goto-input { width: 50px !important; max-width: 50px !important; padding: 0 !important; border: 1px solid #e3e6f0 !important; border-radius: 4px 0 0 4px !important; outline: none !important; text-align: center !important; font-size: 12px !important; color: #6e707e !important; height: 32px !important; background-color: #fff !important; box-shadow: none !important; } .pagination-goto-input:focus { border-color: #4e73df !important; box-shadow: 0 0 0 2px rgba(78, 115, 223, 0.25) !important; } .pagination-goto-button { padding: 4px 8px !important; background-color: #4e73df !important; color: white !important; border: 1px solid #4e73df !important; border-left: none !important; border-radius: 0 4px 4px 0 !important; cursor: pointer !important; font-size: 12px !important; font-weight: 500 !important; transition: all 0.2s ease !important; height: 32px !important; margin: 0 !important; } .pagination-goto-button:hover { background-color: #2e59d9 !important; border-color: #2e59d9 !important; } @media (max-width: 768px) { .pagination { gap: 5px; margin: 20px 0; } .pagination a, .pagination button, .pagination span, .pagination-btn, .pagination-info { padding: 4px 8px; font-size: 12px; border-radius: 4px; } .pagination-goto-input, .pagination-goto-button { height: 32px !important; font-size: 12px !important; } .pagination-goto-input { width: 50px !important; max-width: 50px !important; } }