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

Add new images and update styles for visualization components

Browse Source
This commit is contained in:
Nalvazhuthi
2025-03-29 17:56:50 +05:30
parent 893d01ee4e
commit ad7f4bbfd6
19 changed files with 1178 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
app/src/styles/components/menu/menu.scss Normal file
View File

@@ -0,0 +1,129 @@
.menu-bar {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
background-color: var(--background-color);
color: var(--text-color);
box-shadow: var(--box-shadow-light);
border-radius: 8px;
.menu-buttons {
display: flex;
flex-direction: column;
height: 100%;
padding: 8px 4px;
min-width: 178px;
.menu-button-container {
position: relative;
height: 100%;
padding: 8px;
.menu-button {
width: 100%;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.dropdown-icon {
margin-left: 5px;
font-size: var(--font-size-small);
color: #666666;
}
}
.dropdown-menu {
position: absolute;
top: 0;
left: 100%;
background-color: var(--background-color);
min-width: 220px;
border-radius: 4px;
box-shadow: var(--box-shadow-light);
border: 1px solid var(--background-color);
z-index: 100;
padding: 5px 0;
.menu-item-container {
position: relative;
.menu-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 20px;
cursor: pointer;
white-space: nowrap;
color: var(--text-color);
&:hover {
background-color: var(--highlight-accent-color);
color: var(--highlight-accent-color);
}
.menu-item-right {
display: flex;
align-items: center;
gap: 15px;
.shortcut {
color: var(--text-color);
font-size: var(--font-size-small);
}
.icon {
font-size: var(--font-size-small);
color: var(--text-color);
}
}
}
.submenu {
position: absolute;
left: 100%;
top: 0;
background-color: var(--background-color);
min-width: 200px;
border-radius: 0 4px 4px 4px;
box-shadow: var(--box-shadow-light);
border: 1px solid var(--background-color);
z-index: 101;
.submenu-item {
padding: 8px 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
color: var(--text-color);
&:hover {
background-color: var(--background-color-gray);
color: var(--highlight-accent-color);
}
.shortcut {
color: var(--text-color);
}
}
}
}
}
&:hover {
background-color: var(--highlight-accent-color);
color: var(--highlight-accent-color);
}
}
}
}
.split {
width: 100%;
height: 1px;
background-color: #E0DFFF;
}