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

refactor: update loading styles and introduce faint gradient variables

Browse Source
This commit is contained in:
Vishnu
2025-03-29 19:02:02 +05:30
parent a327044b8b
commit 6cb8e1076e
8 changed files with 165 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/src/styles/abstracts/variables.scss
View File

@@ -58,6 +58,9 @@ $acent-gradient: linear-gradient(
#925df3 100%
); // Light mode accent gradient
$faint-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%);
$faint-gradient-dark: radial-gradient(circle, #31373b 0%, #48494b 46%, #52415c 100%);
// ========================================================================
// Typography
// ========================================================================

5
app/src/styles/base/base.scss
View File

@@ -12,6 +12,7 @@
--accent-color: #{$accent-color}; // Primary accent color for light theme
--highlight-accent-color: #{$highlight-accent-color}; // Highlight color for light theme
--accent-gradient-color: #{$acent-gradient}; // Primary accent color for light theme
--faint-gradient-color: #{$faint-gradient};
// Background colors
--background-color: #{$background-color}; // Main background color
@@ -46,6 +47,7 @@
--accent-color: #{$accent-color-dark}; // Primary accent color for dark theme
--highlight-accent-color: #{$highlight-accent-color-dark}; // Highlight color for dark theme
--accent-gradient-color: #{$acent-gradient-dark}; // Primary accent color for light theme
--faint-gradient-color: #{$faint-gradient-dark};
// Background colors
--background-color: #{$background-color-dark}; // Main background color
@@ -84,7 +86,6 @@
}
body {
background: var(--background-color);
/* Font Sizes */
@@ -134,4 +135,4 @@ body {
::-webkit-scrollbar-corner {
background: transparent;
/* Remove corner styling for scrollable containers */
}
}

230
app/src/styles/components/menu/menu.scss
View File

@@ -1,129 +1,127 @@
.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;
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-buttons {
.menu-button-container {
position: relative;
height: 100%;
padding: 8px;
.menu-button {
width: 100%;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
height: 100%;
padding: 8px 4px;
min-width: 178px;
align-items: center;
justify-content: space-between;
position: relative;
.menu-button-container {
position: relative;
height: 100%;
padding: 8px;
.dropdown-icon {
margin-left: 5px;
font-size: var(--font-size-small);
color: #666666;
}
}
.menu-button {
width: 100%;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.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;
.dropdown-icon {
margin-left: 5px;
font-size: var(--font-size-small);
color: #666666;
}
}
.menu-item-container {
position: relative;
.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);
}
}
}
}
}
.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);
background-color: var(--highlight-accent-color);
color: var(--highlight-accent-color);
}
}
}
}
.split {
.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;
}
background-color: #e0dfff;
}
}

7
app/src/styles/layout/loading.scss
View File

@@ -18,12 +18,7 @@
&::after {
content: "";
position: absolute;
background: radial-gradient(
circle,
#bfe0f8 0%,
#e9ebff 46%,
#e2acff 100%
);
background: var(--faint-gradient-color);
height: 50vh;
width: 50vw;
top: 0;

8
app/src/styles/pages/userAuth.scss
View File

@@ -10,7 +10,6 @@
color: var(--text-color);
height: 100vh;
background-color: var(--background-color);
background-color: #fcfdfd;
position: relative;
z-index: 1;
.logo-icon {
@@ -168,12 +167,7 @@
&::after {
content: "";
position: absolute;
background: radial-gradient(
circle,
#bfe0f8 0%,
#e9ebff 46%,
#e2acff 100%
);
background: var(--faint-gradient-color);
height: 50vh;
width: 50vw;
top: 0;