🎨 Обновлены стили изображений в заметках
- Изменены размеры изображений в заметках на 150x150 пикселей с использованием свойства object-fit для обрезки - Добавлен эффект тени при наведении на изображения - Реализован элемент с увеличительным стеклом, который появляется при наведении на изображение для улучшения взаимодействия
This commit is contained in:
parent
62d9b6c7ce
commit
f8692177f9
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user