🎨 Обновлены стили изображений в заметках
- Изменены размеры изображений в заметках на 150x150 пикселей с использованием свойства object-fit для обрезки - Добавлен эффект тени при наведении на изображения - Реализован элемент с увеличительным стеклом, который появляется при наведении на изображение для улучшения взаимодействия
This commit is contained in:
parent
62d9b6c7ce
commit
f8692177f9
@ -1385,8 +1385,9 @@ textarea:focus {
|
|||||||
|
|
||||||
/* Стили для изображений в заметках */
|
/* Стили для изображений в заметках */
|
||||||
.note-image {
|
.note-image {
|
||||||
max-width: 100%;
|
width: 150px;
|
||||||
height: auto;
|
height: 150px;
|
||||||
|
object-fit: cover;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
@ -1396,6 +1397,27 @@ textarea:focus {
|
|||||||
|
|
||||||
.note-image:hover {
|
.note-image:hover {
|
||||||
transform: scale(1.02);
|
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 {
|
.note-images-container {
|
||||||
@ -1410,6 +1432,10 @@ textarea:focus {
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.note-image-item .note-image {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
.note-image-item .remove-note-image-btn {
|
.note-image-item .remove-note-image-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
@ -1488,4 +1514,9 @@ textarea:focus {
|
|||||||
width: 80px;
|
width: 80px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.note-image {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user