From f8692177f997335741ea21596720db9e0460e194 Mon Sep 17 00:00:00 2001
From: Fovway <fovway@gmail.com>
Date: Sun, 19 Oct 2025 23:34:50 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D1=8B=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=20?=
 =?UTF-8?q?=D0=B8=D0=B7=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B9=20=D0=B2=20=D0=B7=D0=B0=D0=BC=D0=B5=D1=82=D0=BA=D0=B0?=
 =?UTF-8?q?=D1=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Изменены размеры изображений в заметках на 150x150 пикселей с использованием свойства object-fit для обрезки
- Добавлен эффект тени при наведении на изображения
- Реализован элемент с увеличительным стеклом, который появляется при наведении на изображение для улучшения взаимодействия
---
 public/style.css | 35 +++++++++++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/public/style.css b/public/style.css
index c093e68..19c7900 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1385,8 +1385,9 @@ textarea:focus {
 
 /* Стили для изображений в заметках */
 .note-image {
-  max-width: 100%;
-  height: auto;
+  width: 150px;
+  height: 150px;
+  object-fit: cover;
   border-radius: 6px;
   margin: 10px 0;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
@@ -1396,6 +1397,27 @@ textarea:focus {
 
 .note-image:hover {
   transform: scale(1.02);
+  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+}
+
+.note-image::after {
+  content: "🔍";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(0,0,0,0.7);
+  color: white;
+  padding: 8px;
+  border-radius: 50%;
+  font-size: 16px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
+}
+
+.note-image:hover::after {
+  opacity: 1;
 }
 
 .note-images-container {
@@ -1410,6 +1432,10 @@ textarea:focus {
   display: inline-block;
 }
 
+.note-image-item .note-image {
+  position: relative;
+}
+
 .note-image-item .remove-note-image-btn {
   position: absolute;
   top: 5px;
@@ -1488,4 +1514,9 @@ textarea:focus {
     width: 80px;
     height: 80px;
   }
+  
+  .note-image {
+    width: 120px;
+    height: 120px;
+  }
 }