CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[WEB-317] Fix: Resolve CSS style issues in profile layout

Browse Source
This commit is contained in:
shubhamsharma9199
2025-09-18 18:48:18 +05:30
parent e845a45e76
commit 5145e7be2b
3 changed files with 155 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/profile/profile.component.scss
+42 -8
View File
@@ -6,8 +6,12 @@
margin-bottom: 1rem;
padding: 1.5rem;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
border: 1px solid #ddd;
border: 1px solid var(--border-color, #ddd);
border-radius: 6px;
background-color: var(--card-background, #fff);
transition:
background-color 0.3s ease,
border-color 0.3s ease;
.layout-row-wrap {
display: grid;
@@ -18,14 +22,16 @@
display: flex;
flex-direction: column;
padding: 0.75rem;
border: 1px solid #ddd;
border: 1px solid var(--border-color, #ddd);
border-radius: 6px;
background-color: #fff;
background-color: var(--info-box-background, #fff);
transition: background-color 0.3s ease;
.header {
font-weight: 600;
margin-bottom: 0.5rem;
font-size: 1.1rem;
color: var(--header-color, inherit);
}
}
}
@@ -35,11 +41,13 @@
div {
margin: 1rem 0;
word-wrap: break-word;
color: var(--text-color, inherit);
&.header {
font-weight: 600;
margin-bottom: 0.5rem;
font-size: 1.1rem;
color: var(--header-color, inherit);
}
}
}
@@ -52,31 +60,57 @@
th {
font-weight: 600;
text-align: left;
color: var(--table-header-color, inherit);
background-color: var(--table-header-bg, transparent);
}
td {
padding: 0.75rem;
border: 1px solid #ddd;
border: 1px solid var(--border-color, #ddd);
color: var(--text-color, inherit);
}
tr:hover {
background-color: #f9f9f9;
background-color: var(--table-hover-bg, #f9f9f9);
}
}
}
.container table th,
.container table td {
border-top: 1px solid rgb(0 0 0 / 12%);
border-top: 1px solid var(--border-color, rgb(0 0 0 / 12%));
}
th.mat-header-cell:not(:first-of-type),
td.mat-cell:not(:first-of-type) {
border-left: 1px solid rgb(0 0 0 / 12%);
border-left: 1px solid var(--border-color, rgb(0 0 0 / 12%));
}
.mat-elevation-z1 {
margin: 0.5rem 0;
box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
box-shadow: 0 1px 3px var(--elevation-shadow, rgb(0 0 0 / 12%));
border-radius: 6px;
}
// Dark mode styles
:host-context(.dark-theme) {
--border-color: #444;
--card-background: #2d2d2d;
--info-box-background: #383838;
--header-color: #e0e0e0;
--text-color: #d0d0d0;
--table-header-bg: #333;
--table-header-color: #e0e0e0;
--table-hover-bg: #3a3a3a;
--elevation-shadow: rgb(0 0 0 / 30%);
.container {
mat-card {
box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
}
table {
box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
}
}
}