diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index 3b14aac..80a6ca7 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -78,19 +78,19 @@ min-height: 50vh; max-height: 60vh; } - + .template-item { border: 1px solid #e0e0e0; border-radius: 8px; padding: 1rem; transition: box-shadow 0.3s ease; } - + .template-image-container { position: relative; padding-bottom: 56.25%; // 16:9 aspect ratio } - + .template-image { position: absolute; width: 100%; @@ -100,19 +100,19 @@ cursor: pointer; transition: transform 0.3s ease; } - + .template-details { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; } - + .template-name { cursor: pointer; font-weight: 500; } - + .delete-button { padding: 0.25rem 0.5rem; background: #ff4444; @@ -122,14 +122,13 @@ cursor: pointer; transition: opacity 0.3s ease; } - + .no-templates { text-align: center; color: #666; padding: 2rem; grid-column: 1 / -1; } - .widget-left-sideBar { min-height: 50vh; @@ -538,7 +537,6 @@ .floating { width: 100%; - } } @@ -1070,7 +1068,7 @@ .category-name { position: relative; z-index: 3; - font-size: var(--font-size-large); + font-size: var(--font-size-regular); // -webkit-text-fill-color: transparent; // -webkit-text-stroke: 1px black; } @@ -1085,9 +1083,11 @@ top: 50%; right: -10px; transform: translate(0, -50%); - background: linear-gradient(144.19deg, - #f1e7cd 16.62%, - #fffaef 85.81%); + background: linear-gradient( + 144.19deg, + #f1e7cd 16.62%, + #fffaef 85.81% + ); } .category-image { @@ -1114,30 +1114,45 @@ .assets { width: 117px; height: 95px; - border-radius: 3.59px; + border-radius: #{$border-radius-small}; background-color: var(--background-color-gray); - padding: 8px; - padding-top: 12px; font-weight: $medium-weight; position: relative; overflow: hidden; + padding: 0; + &:hover { + .asset-name { + opacity: 1; + } + } .asset-name { - position: relative; + position: absolute; + top: 0; z-index: 3; + padding: 8px; + width: 100%; 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 { height: 100%; width: 100%; - position: absolute; - // top: 50%; - // right: 5px; - // transform: translate(0, -50%); - top: 0; - left: 0; z-index: 2; + object-fit: cover; } } } @@ -1200,4 +1215,4 @@ .assets-wrapper { margin: 0; } -} \ No newline at end of file +} diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index 19cd2b4..a30d9f3 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -765,20 +765,19 @@ .editWidgetOptions { position: absolute; - // top: 50%; - // left: 50%; - // transform: translate(-50%, -50%); background-color: var(--background-color); z-index: 3; display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; + padding: 4px; min-width: 150px; .option { - padding: 8px 10px; + padding: 4px 10px; + border-radius: #{$border-radius-small}; color: var(--text-color); cursor: pointer; @@ -791,7 +790,8 @@ color: #f65648; &:hover { - background-color: #ffe3e0; + background-color: #f65648; + color: white; } } }