Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: Refine edit widget options layout and hover effects

This commit is contained in:
Vishnu 2025-04-10 13:15:24 +05:30
parent 378d5d7a42
commit b2bd092db3
2 changed files with 44 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
app/src/styles/layout/sidebar.scss
View File

@ -130,7 +130,6 @@
grid-column: 1 / -1; grid-column: 1 / -1;
} }
.widget-left-sideBar { .widget-left-sideBar {
min-height: 50vh; min-height: 50vh;
max-height: 60vh; max-height: 60vh;
@ -538,7 +537,6 @@
.floating { .floating {
width: 100%; width: 100%;
} }
} }
@ -1070,7 +1068,7 @@
.category-name { .category-name {
position: relative; position: relative;
z-index: 3; z-index: 3;
font-size: var(--font-size-large); font-size: var(--font-size-regular);
// -webkit-text-fill-color: transparent; // -webkit-text-fill-color: transparent;
// -webkit-text-stroke: 1px black; // -webkit-text-stroke: 1px black;
} }
@ -1085,9 +1083,11 @@
top: 50%; top: 50%;
right: -10px; right: -10px;
transform: translate(0, -50%); transform: translate(0, -50%);
background: linear-gradient(144.19deg, background: linear-gradient(
144.19deg,
#f1e7cd 16.62%, #f1e7cd 16.62%,
#fffaef 85.81%); #fffaef 85.81%
);
} }
.category-image { .category-image {
@ -1114,30 +1114,45 @@
.assets { .assets {
width: 117px; width: 117px;
height: 95px; height: 95px;
border-radius: 3.59px; border-radius: #{$border-radius-small};
background-color: var(--background-color-gray); background-color: var(--background-color-gray);
padding: 8px;
padding-top: 12px;
font-weight: $medium-weight; font-weight: $medium-weight;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
padding: 0;
&:hover {
.asset-name {
opacity: 1;
}
}
.asset-name { .asset-name {
position: relative; position: absolute;
top: 0;
z-index: 3; z-index: 3;
padding: 8px;
width: 100%;
font-size: var(--font-size-regular); font-size: var(--font-size-regular);
background: color-mix(in srgb,
var(--background-color) 40%,
transparent);
backdrop-filter: blur(5px);
opacity: 0;
transition: opacity 0.3s ease;
/* Added properties for ellipsis */
display: -webkit-box; /* Necessary for multiline truncation */
-webkit-line-clamp: 2; /* Number of lines to show */
-webkit-box-orient: vertical; /* Box orientation for the ellipsis */
overflow: hidden; /* Hide overflowing content */
text-overflow: ellipsis; /* Add ellipsis for truncated content */
} }
.asset-image { .asset-image {
height: 100%; height: 100%;
width: 100%; width: 100%;
position: absolute;
// top: 50%;
// right: 5px;
// transform: translate(0, -50%);
top: 0;
left: 0;
z-index: 2; z-index: 2;
object-fit: cover;
} }
} }
} }

10
app/src/styles/pages/realTimeViz.scss
View File

@ -765,20 +765,19 @@
.editWidgetOptions { .editWidgetOptions {
position: absolute; position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
background-color: var(--background-color); background-color: var(--background-color);
z-index: 3; z-index: 3;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden;
padding: 4px;
min-width: 150px; min-width: 150px;
.option { .option {
padding: 8px 10px; padding: 4px 10px;
border-radius: #{$border-radius-small};
color: var(--text-color); color: var(--text-color);
cursor: pointer; cursor: pointer;
@ -791,7 +790,8 @@
color: #f65648; color: #f65648;
&:hover { &:hover {
background-color: #ffe3e0; background-color: #f65648;
color: white;
} }
} }
} }