Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature update: Enhanced viewport handling and scrollbar styling. #1378

Closed
wants to merge 7 commits into from
Closed

Feature update: Enhanced viewport handling and scrollbar styling. #1378

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
559c247
Update index.css
PentesterPriyanshu Oct 25, 2024
154ff86
Merge branch 'arc53:main' into patch-3
PentesterPriyanshu Oct 25, 2024
72a3ccf
Update index.css
PentesterPriyanshu Oct 25, 2024
eb8dd72
Update index.css
PentesterPriyanshu Oct 25, 2024
fa798f6
Update index.css
PentesterPriyanshu Oct 25, 2024
f8a4dbf
Update index.css
PentesterPriyanshu Oct 26, 2024
36b6a79
Update index.css
PentesterPriyanshu Oct 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 22 additions & 7 deletions frontend/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@
@tailwind components;
@tailwind utilities;

/* Fallback for browsers that don't support dvh */
:root {
--viewport-height: 100vh;
--viewport-height: 100vh; /* Fallback for older browsers */
}

@supports (height: 100dvh) {
Expand All @@ -15,6 +16,8 @@
body.dark {
background-color: #202124; /* raisin-black */
}

/* Webkit-based scrollbar styling */
::-webkit-scrollbar {
width: 8px;
}
Expand All @@ -32,11 +35,17 @@ body.dark {
background: #555;
}
.dark ::-webkit-scrollbar-thumb:hover {
background: #b1afaf;
background: #777; /* Darker gray for better contrast */
}

/* Firefox-compatible scrollbar styling */
.dark {
scrollbar-color: #888 #2f3036; /* Thumb and track color */
scrollbar-width: thin; /* Consistent thinner scrollbar */
}

/* No scrollbar utility */
@layer utilities {
/* Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
Expand All @@ -48,29 +57,35 @@ body.dark {
}

@layer components {
/* Table default styling */
.table-default {
@apply block w-max table-auto content-center justify-center rounded-xl border border-silver dark:border-silver/40 text-center dark:text-bright-gray;
}

/* Table header styling */
.table-default th {
@apply p-4 w-[244px] font-normal text-gray-400; /* Remove border-r */
@apply p-4 w-[244px] font-normal text-gray-400;
}

/* Last table header width adjustment */
.table-default th:last-child {
@apply w-[auto];
}

/* Table data cell styling */
.table-default td {
@apply border-t border-silver dark:border-silver/40 px-4 py-2; /* Remove border-r */
@apply border-t border-silver dark:border-silver/40 px-4 py-2;
}

/* Remove right border for last column in table */
.table-default td:last-child {
@apply border-r-0; /* Ensure no right border on the last column */
@apply border-r-0;
}

}




/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
Expand Down
Loading