diff --git a/README.md b/README.md index e01ed85..5490447 100644 --- a/README.md +++ b/README.md @@ -12,10 +12,7 @@ cd /home/romkazvo/www/cgi-bin ``` ### Компиляция CGI ```bash -gcc -o index.cgi index.c -gcc -o style.cgi style.c -gcc -o status.cgi status.c -chmod +x *.cgi +sudo sh build.sh ``` ### Конфигурация Nginx Файл конфигурации `/etc/nginx/sites-available/trashbox`:
diff --git a/style.css b/style.css index fb2caf3..3d38e16 100755 --- a/style.css +++ b/style.css @@ -351,6 +351,7 @@ li:hover { height: 100%; background-color: rgba(0,0,0,0.8); backdrop-filter: blur(5px); + overflow: auto; } .preview-content { @@ -358,9 +359,6 @@ li:hover { margin: 2% auto; padding: 0; border-radius: 8px; - width: 90%; - height: 90%; - max-width: 1200px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); display: flex; flex-direction: column; @@ -368,39 +366,6 @@ li:hover { transition: all 0.3s ease; } -/* Размеры для разных типов контента */ -.preview-content.image-type { - max-width: 90%; - max-height: 90%; - width: auto; - height: auto; -} - -.preview-content.text-type { - max-width: 800px; - max-height: 80%; -} - -.preview-content.audio-type { - max-width: 500px; - max-height: 300px; -} - -.preview-content.video-type { - max-width: 90%; - max-height: 90%; -} - -.preview-content.pdf-type { - max-width: 90%; - max-height: 90%; -} - -.preview-content.default-type { - max-width: 90%; - max-height: 90%; -} - .preview-header { display: flex; justify-content: space-between; @@ -453,39 +418,54 @@ li:hover { background: var(--bg-primary); } +/* Стили для контейнера изображения */ +.preview-image-container { + display: flex; + align-items: center; + justify-content: center; + flex-grow: 1; + padding: 10px; + background: var(--bg-primary); + overflow: hidden; + width: 100%; + height: 100%; +} + +.preview-image { + max-width: 100%; + max-height: 100%; + width: auto; + height: auto; + object-fit: contain; + border-radius: 8px; + box-shadow: 0 4px 20px rgba(0,0,0,0.2); + display: block; +} + +/* Улучшаем скроллинг для очень больших изображений */ +.preview-modal::-webkit-scrollbar { + width: 8px; +} + +.preview-modal::-webkit-scrollbar-track { + background: rgba(255,255,255,0.1); +} + +.preview-modal::-webkit-scrollbar-thumb { + background: rgba(255,255,255,0.3); + border-radius: 4px; +} + +.preview-modal::-webkit-scrollbar-thumb:hover { + background: rgba(255,255,255,0.5); +} + /* Адаптивность */ @media (max-width: 768px) { .preview-content { - width: 95%; - height: 95%; margin: 2.5% auto; } - .preview-content.image-type { - max-width: 95%; - max-height: 95%; - } - - .preview-content.text-type { - max-width: 95%; - max-height: 80%; - } - - .preview-content.audio-type { - max-width: 95%; - max-height: 300px; - } - - .preview-content.video-type { - max-width: 95%; - max-height: 95%; - } - - .preview-content.pdf-type { - max-width: 95%; - max-height: 95%; - } - .preview-header { padding: 0.75rem; } @@ -493,6 +473,10 @@ li:hover { .preview-title { font-size: 0.9rem; } + + .preview-image-container { + padding: 5px; + } } @media (max-width: 480px) { @@ -560,27 +544,15 @@ li:hover { font-size: 0.8rem; } .preview-content { - width: 98%; - height: 98%; margin: 1% auto; border-radius: 4px; } - - .preview-content.image-type, - .preview-content.video-type, - .preview-content.pdf-type { - max-width: 98%; - max-height: 98%; + .preview-image-container { + padding: 2px; } - - .preview-content.text-type { - max-width: 98%; - max-height: 80%; - } - - .preview-content.audio-type { - max-width: 98%; - max-height: 250px; + .preview-image { + border-radius: 4px; + box-shadow: 0 2px 10px rgba(0,0,0,0.2); } } @@ -609,8 +581,4 @@ li:hover { .file-link { width: 100%; } - - .preview-content.audio-type { - max-height: 200px; - } } \ No newline at end of file diff --git a/template.html b/template.html index 15b8407..4d49d55 100755 --- a/template.html +++ b/template.html @@ -20,7 +20,7 @@ - +