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

Refactor styles: update backdrop-filter values for improved UI consistency; clean up code formatting in various components.

This commit is contained in:
Vishnu 2025-05-03 11:17:20 +05:30
parent b4e4bf7fb3
commit b4e3d3ef73
4 changed files with 86 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/src/styles/components/form.scss
View File

@ -0,0 +1,26 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
.rename-tool-tip {
position: absolute;
background: var(--background-color);
padding: 10px 16px;
width: 260px;
border-radius: #{$border-radius-large};
outline: 1px solid var(--border-color);
z-index: 100;
.header {
@include flex-center;
gap: 8px;
.icon {
@include flex-center;
}
.name {
color: var(--text-color);
}
input {
width: 100%;
margin-top: 6px;
}
}
}

89
app/src/styles/components/simulation/simulation.scss
View File

@ -3,7 +3,7 @@
.simulation-player-wrapper {
position: fixed;
bottom: 12px;
bottom: 32px;
left: 50%;
z-index: 2;
transform: translate(-50%, 0);
@ -35,11 +35,11 @@
@include flex-space-between;
gap: 12px;
justify-content: space-between;
.header{
.header {
@include flex-center;
gap: 6px;
padding: 0 8px;
svg{
svg {
scale: 1.3;
}
}
@ -299,6 +299,37 @@
}
}
}
.open {
.start-displayer,
.end-displayer {
display: none;
}
.timmer {
display: none;
}
.progresser-wrapper {
padding-top: 4px;
}
.time-displayer {
height: 0;
opacity: 0;
pointer-events: none;
display: none;
}
.processDisplayer {
padding: 0 8px;
background: transparent;
.process-player {
width: 0;
display: none !important;
}
}
}
}
.processDisplayer {
@ -314,22 +345,6 @@
font-size: var(--font-size-tiny);
}
.timmer {
width: auto;
position: absolute;
bottom: 0;
font-size: var(--font-size-tiny);
}
.start-displayer {
left: 8px;
}
.end-displayer {
width: auto;
right: 8px;
}
.start-displayer {
bottom: 4px;
left: 16px;
@ -351,12 +366,12 @@
border-width: 1px;
background: var(--background-color-accent, #6f42c1);
}
.process-wrapper{
.process-wrapper {
.process-container {
position: relative;
display: flex;
width: 100%;
.process {
height: 5px;
border-radius: 4px;
@ -368,35 +383,3 @@
}
}
}
.simulation-player-container.open {
.start-displayer,
.end-displayer {
display: none;
}
.timmer {
display: none;
}
.progresser-wrapper {
padding-top: 4px;
}
.time-displayer {
height: 0;
opacity: 0;
pointer-events: none;
display: none;
}
.processDisplayer {
padding: 0 8px;
background: transparent;
.process-player {
width: 0;
display: none !important;
}
}
}

33
app/src/styles/components/tools.scss
View File

@ -14,7 +14,7 @@
width: fit-content;
transition: width 0.2s;
background: var(--background-color);
backdrop-filter: blur(8px);
backdrop-filter: blur(20px);
z-index: 2;
outline: 1px solid var(--border-color);
outline-offset: -1px;
@ -31,6 +31,7 @@
.activeDropicon {
@include flex-center;
gap: 2px;
// stylelint-disable-next-line
interpolate-size: allow-keywords;
width: 0;
opacity: 0;
@ -44,9 +45,11 @@
border-radius: #{$border-radius-medium};
&:hover {
background: color-mix(in srgb,
var(--highlight-accent-color) 60%,
transparent);
background: color-mix(
in srgb,
var(--highlight-accent-color) 60%,
transparent
);
}
}
@ -70,9 +73,11 @@
position: relative;
&:hover {
background: color-mix(in srgb,
var(--highlight-accent-color) 60%,
transparent);
background: color-mix(
in srgb,
var(--highlight-accent-color) 60%,
transparent
);
}
.drop-down-container {
@ -179,11 +184,11 @@
font-weight: 500;
background: var(--accent-color);
color: var(--highlight-accent-color);
&::after{
&::after {
animation: pulse 1s ease-out infinite;
}
}
&::after{
&::after {
content: "";
position: absolute;
height: 100%;
@ -195,14 +200,14 @@
}
@keyframes pulse {
0%{
0% {
opacity: 0;
scale: .5;
scale: 0.5;
}
50%{
50% {
opacity: 1;
}
100%{
100% {
opacity: 0;
scale: 2;
}
@ -218,4 +223,4 @@
width: fit-content;
opacity: 1;
}
}
}

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

@ -7,7 +7,7 @@
top: 32px;
left: 8px;
background: var(--background-color);
backdrop-filter: blur(15px);
backdrop-filter: blur(20px);
border-radius: #{$border-radius-extra-large};
outline: 1px solid var(--border-color);
box-shadow: #{$box-shadow-medium};
@ -250,7 +250,7 @@
top: 32px;
right: 8px;
background: var(--background-color);
backdrop-filter: blur(15px);
backdrop-filter: blur(20px);
border-radius: #{$border-radius-extra-large};
outline: 1px solid var(--border-color);
box-shadow: #{$box-shadow-medium};
@ -363,7 +363,7 @@
height: 34px;
width: 34px;
border-radius: #{$border-radius-circle};
background: var(--background-color-secondary);
background: var(--background-color-solid-gradient);
backdrop-filter: blur(12px);
outline: 1px solid var(--border-color);
outline-offset: -1px;
@ -416,7 +416,7 @@
outline: none;
path {
stroke: var(--text-button-color);
strokeWidth: 1.3;
stroke-width: 1.3;
}
}
}
@ -682,7 +682,7 @@
path {
stroke: var(--accent-color);
strokeWidth: 1.5px;
stroke-width: 1.5px;
}
&:hover {