daniel-gitea/cgr-next-js
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Add prettier and plugin for tailwind; Adapted global css for light and dark theme

Browse Source
This commit is contained in:
Eduard Schulteis
2026-01-28 10:43:42 +01:00
parent 30228bf6b1
commit 66e3f5a3d1
8 changed files with 335 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

255
app/globals.css
View File

@@ -118,263 +118,349 @@
--color-gray-900: #050505;
--color-gray-800: #141414;
--color-gray-700: #212328;
--color-gray-600: #30333A;
--color-gray-500: #9095A1;
--color-gray-400: #CCDADC;
--color-gray-600: #30333a;
--color-gray-500: #9095a1;
--color-gray-400: #ccdadc;
--color-gray-100: #fafafa;
/* Vibrant Colors */
--color-blue-600: #5862FF;
--color-yellow-400: #FDD458;
--color-yellow-500: #E8BA40;
--color-teal-400: #0FEDBE;
--color-red-500: #FF495B;
--color-orange-500: #FF8243;
--color-purple-500: #D13BFF;
--color-blue-600: #5862ff;
--color-yellow-400: #fdd458;
--color-yellow-500: #e8ba40;
--color-teal-400: #0fedbe;
--color-red-500: #ff495b;
--color-orange-500: #ff8243;
--color-purple-500: #d13bff;
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-gray-900 text-foreground;
@apply text-foreground bg-gray-900;
}
}
@layer utilities {
.dashboard {
@apply min-h-screen bg-gray-100 dark:bg-gray-900;
}
.container {
@apply mx-auto max-w-screen-2xl px-4 md:px-6 lg:px-8;
}
.yellow-btn {
@apply h-12 cursor-pointer bg-gradient-to-b from-yellow-400 to-yellow-500 hover:from-yellow-500 hover:to-yellow-400 text-gray-950 font-medium text-base rounded-lg shadow-lg disabled:opacity-50;
@apply h-12 cursor-pointer rounded-lg bg-gradient-to-b from-yellow-400 to-yellow-500 text-base font-medium text-gray-950 shadow-lg hover:from-yellow-500 hover:to-yellow-400 disabled:opacity-50;
}
.home-wrapper {
@apply text-gray-400 flex-col gap-4 md:gap-10 items-center sm:items-start;
@apply flex-col items-center gap-4 text-gray-400 sm:items-start md:gap-10;
}
.home-section {
@apply w-full gap-8 grid-cols-1 md:grid-cols-2 xl:grid-cols-3;
@apply w-full grid-cols-1 gap-8 md:grid-cols-2 xl:grid-cols-3;
}
.header {
@apply z-50 w-full h-[70px] bg-gray-800;
@apply z-50 bg-white dark:bg-gray-800;
}
.side-bar {
@apply z-50 bg-white dark:bg-gray-800;
}
.header-wrapper {
@apply flex justify-between items-center px-6 py-4 text-gray-500;
@apply flex items-center justify-between px-6 py-4 text-gray-500;
}
.auth-layout {
@apply flex flex-col justify-between lg:flex-row h-screen bg-gray-900 relative overflow-hidden;
@apply relative flex h-screen flex-col justify-between overflow-hidden bg-gray-900 lg:flex-row;
}
.auth-logo {
@apply pt-6 lg:pt-8 mb-8 lg:mb-12;
@apply mb-8 pt-6 lg:mb-12 lg:pt-8;
}
.auth-left-section {
@apply w-full lg:w-[45%] lg:h-screen px-6 lg:px-16 flex flex-col overflow-y-auto;
@apply flex w-full flex-col overflow-y-auto px-6 lg:h-screen lg:w-[45%] lg:px-16;
}
.auth-right-section {
@apply w-full max-lg:border-t max-lg:border-gray-600 lg:w-[55%] lg:h-screen bg-gray-800 px-6 py-4 md:p-6 lg:py-12 lg:px-18 flex flex-col justify-start;
@apply flex w-full flex-col justify-start bg-gray-800 px-6 py-4 max-lg:border-t max-lg:border-gray-600 md:p-6 lg:h-screen lg:w-[55%] lg:px-18 lg:py-12;
}
.auth-blockquote {
@apply text-sm md:text-xl lg:text-2xl font-medium text-gray-400 mb-1 md:mb-6 lg:mb-8;
@apply mb-1 text-sm font-medium text-gray-400 md:mb-6 md:text-xl lg:mb-8 lg:text-2xl;
}
.auth-testimonial-author {
@apply text-xs md:text-lg font-bold text-gray-400 not-italic;
@apply text-xs font-bold text-gray-400 not-italic md:text-lg;
}
.auth-dashboard-preview {
@apply border-6 border-gray-800 left-0 hidden w-[1024px] h-auto max-w-none lg:block rounded-xl shadow-2xl;
@apply left-0 hidden h-auto w-[1024px] max-w-none rounded-xl border-6 border-gray-800 shadow-2xl lg:block;
}
.form-title {
@apply text-4xl font-bold text-gray-400 mb-10;
@apply mb-10 text-4xl font-bold text-gray-400;
}
.form-label {
@apply text-sm font-medium text-gray-400;
}
.form-input {
@apply h-12 px-3 py-3 text-white text-base placeholder:text-gray-500 border-gray-600 bg-gray-800 rounded-lg focus:!border-yellow-500 focus:ring-0;
@apply rounded-lg !border-yellow-500 border-gray-600 bg-gray-800 px-3 py-3 text-base text-white placeholder:text-gray-500 focus:h-12 focus:ring-0;
}
.select-trigger {
@apply w-full !h-12 px-3 py-3 text-base border-gray-600 bg-gray-800 text-white rounded-lg focus:!border-yellow-500 focus:ring-0;
@apply w-full rounded-lg !border-yellow-500 border-gray-600 bg-gray-800 px-3 py-3 text-base text-white focus:!h-12 focus:ring-0;
}
.country-select-trigger {
@apply h-12 px-3 py-3 text-base w-full justify-between font-normal border-gray-600 bg-gray-800 text-gray-400 rounded-lg focus:!border-yellow-500 focus:ring-0;
@apply w-full justify-between rounded-lg !border-yellow-500 border-gray-600 bg-gray-800 px-3 py-3 text-base font-normal text-gray-400 focus:h-12 focus:ring-0;
}
.country-select-input {
@apply !bg-gray-800 text-gray-400 border-0 border-b border-gray-600 rounded-none focus:ring-0 placeholder:text-gray-500;
@apply rounded-none border-0 border-b border-gray-600 !bg-gray-800 text-gray-400 placeholder:text-gray-500 focus:ring-0;
}
.country-select-empty {
@apply text-gray-500 py-6 text-center !bg-gray-800;
@apply !bg-gray-800 py-6 text-center text-gray-500;
}
.country-select-item {
@apply text-white cursor-pointer px-3 py-2 rounded-sm bg-gray-800 hover:!bg-gray-600;
@apply rounded-sm !bg-gray-600 bg-gray-800 px-3 py-2 text-white hover:cursor-pointer;
}
.footer-link {
@apply text-gray-400 font-medium hover:text-yellow-400 hover:underline transition-colors;
@apply font-medium text-gray-400 transition-colors hover:text-yellow-400 hover:underline;
}
.search-text {
@apply cursor-pointer hover:text-yellow-500;
}
.search-btn {
@apply cursor-pointer px-4 py-2 w-fit flex items-center gap-2 text-sm md:text-base bg-yellow-500 hover:bg-yellow-500 text-black font-medium rounded;
@apply flex w-fit cursor-pointer items-center gap-2 rounded bg-yellow-500 px-4 py-2 text-sm font-medium text-black hover:bg-yellow-500 md:text-base;
}
.search-dialog {
@apply !bg-gray-800 lg:min-w-[800px] border-gray-600 fixed top-10 left-1/2 -translate-x-1/2 translate-y-10;
@apply fixed top-10 left-1/2 -translate-x-1/2 translate-y-10 border-gray-600 !bg-gray-800 lg:min-w-[800px];
}
.search-field {
@apply !bg-gray-800 border-b border-gray-600 relative;
@apply relative border-b border-gray-600 !bg-gray-800;
}
.search-list {
@apply !bg-gray-800 max-h-[400px];
@apply max-h-[400px] !bg-gray-800;
}
.search-list-indicator {
@apply px-5 py-2
@apply px-5 py-2;
}
.search-list-empty {
@apply py-6 !bg-transparent text-center text-gray-500;
@apply !bg-transparent py-6 text-center text-gray-500;
}
.search-input {
@apply !bg-gray-800 border-0 text-gray-400 placeholder:text-gray-500 focus:ring-0 text-base h-14 pr-10;
@apply h-14 border-0 !bg-gray-800 pr-10 text-base text-gray-400 placeholder:text-gray-500 focus:ring-0;
}
.search-loader {
@apply absolute right-12 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500 animate-spin;
@apply absolute top-1/2 right-12 h-4 w-4 -translate-y-1/2 animate-spin text-gray-500;
}
.search-count {
@apply py-2 px-4 text-sm font-medium text-gray-400 bg-gray-700 border-b border-gray-700;
@apply border-b border-gray-700 bg-gray-700 px-4 py-2 text-sm font-medium text-gray-400;
}
.search-item {
@apply rounded-none my-3 px-1 w-full data-[selected=true]:bg-gray-600;
@apply my-3 w-full rounded-none px-1 data-[selected=true]:bg-gray-600;
}
.search-item-link {
@apply px-2 w-full cursor-pointer border-b border-gray-600 last:border-b-0 transition-colors flex items-center gap-3;
@apply flex w-full cursor-pointer items-center gap-3 border-b border-gray-600 px-2 transition-colors last:border-b-0;
}
.search-item-name {
@apply font-medium text-base text-gray-400;
@apply text-base font-medium text-gray-400;
}
.nav-list {
@apply flex flex-col sm:flex-row p-2 gap-3 sm:gap-10 font-medium;
@apply flex flex-col gap-3 p-2 font-medium sm:flex-row sm:gap-10;
}
.stock-details-container {
@apply w-full grid-cols-1 gap-6 xl:grid-cols-3 space-y-6 sm:space-y-8;
@apply w-full grid-cols-1 gap-6 space-y-6 sm:space-y-8 xl:grid-cols-3;
}
.watchlist-btn {
@apply bg-yellow-500 text-base hover:bg-yellow-500 text-gray-900 w-full rounded h-11 font-semibold cursor-pointer;
@apply h-11 w-full cursor-pointer rounded bg-yellow-500 text-base font-semibold text-gray-900 hover:bg-yellow-500;
}
.watchlist-remove {
@apply bg-red-500! hover:bg-red-500! text-gray-900!
@apply bg-red-500! text-gray-900! hover:bg-red-500!;
}
.watchlist-empty-container {
@apply container gap-8 flex-col items-center md:mt-10 p-6 text-center;
@apply container flex-col items-center gap-8 p-6 text-center md:mt-10;
}
.watchlist-empty {
@apply flex flex-col items-center justify-center text-center;
}
.watchlist-star {
@apply h-16 w-16 text-gray-500 mb-4;
@apply mb-4 h-16 w-16 text-gray-500;
}
.empty-title {
@apply text-xl font-semibold text-gray-400 mb-2;
@apply mb-2 text-xl font-semibold text-gray-400;
}
.empty-description {
@apply text-gray-500 mb-6 max-w-md;
@apply mb-6 max-w-md text-gray-500;
}
.watchlist-container {
@apply flex flex-col-reverse lg:grid lg:grid-cols-3 gap-8;
@apply flex flex-col-reverse gap-8 lg:grid lg:grid-cols-3;
}
.watchlist {
@apply lg:col-span-2 space-y-8;
@apply space-y-8 lg:col-span-2;
}
.watchlist-alerts {
@apply items-start gap-6 h-full flex-col w-full lg:col-span-1;
@apply h-full w-full flex-col items-start gap-6 lg:col-span-1;
}
.watchlist-icon-btn {
@apply w-fit cursor-pointer hover:bg-transparent! text-gray-400 hover:text-yellow-500;
@apply w-fit cursor-pointer text-gray-400 hover:bg-transparent! hover:text-yellow-500;
}
.watchlist-icon-added {
@apply !text-yellow-500 hover:!text-yellow-600;
@apply !text-yellow-600 hover:!text-yellow-500;
}
.watchlist-icon {
@apply w-8 h-8 rounded-full flex items-center justify-center bg-gray-700/50;
@apply flex h-8 w-8 items-center justify-center rounded-full bg-gray-700/50;
}
.trash-icon {
@apply h-4 w-4 text-gray-400 hover:text-red-400;
}
.star-icon {
@apply h-4 w-4;
}
.watchlist-title {
@apply text-xl md:text-2xl font-bold text-gray-100;
@apply text-xl font-bold text-gray-100 md:text-2xl;
}
.watchlist-table {
@apply !relative overflow-hidden !w-full bg-gray-800 border !border-gray-600 !rounded-lg;
@apply !relative !w-full overflow-hidden !rounded-lg border !border-gray-600 bg-gray-800;
}
.table-header-row {
@apply text-gray-400 font-medium bg-gray-700 border-b border-gray-600 hover:bg-gray-700;
@apply border-b border-gray-600 bg-gray-700 font-medium text-gray-400 hover:bg-gray-700;
}
.table-header:first-child {
@apply pl-4;
}
.table-row {
@apply border-b cursor-pointer text-gray-100 border-gray-600 hover:bg-gray-700/50 transition-colors;
@apply cursor-pointer border-b border-gray-600 text-gray-100 transition-colors hover:bg-gray-700/50;
}
.table-cell {
@apply font-medium text-base
@apply text-base font-medium;
}
.add-alert {
@apply flex text-sm items-center whitespace-nowrap gap-1.5 px-3 w-fit py-2 text-yellow-600 border border-yellow-600/20 rounded font-medium bg-transparent hover:bg-transparent cursor-pointer transition-colors;
@apply flex w-fit cursor-pointer items-center gap-1.5 rounded border border-yellow-600/20 bg-transparent px-3 py-2 text-sm font-medium whitespace-nowrap text-yellow-600 transition-colors hover:bg-transparent;
}
.watchlist-news {
@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
@apply grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3;
}
.news-item {
@apply bg-gray-800 rounded-lg border w-full border-gray-600 p-4 duration-200 hover:border-gray-600 cursor-pointer;
@apply w-full cursor-pointer rounded-lg border border-gray-600 bg-gray-800 p-4 duration-200 hover:border-gray-600;
}
.news-tag {
@apply inline-block w-fit px-2 py-1 mb-5 rounded bg-gray-600/60 text-green-500 text-sm font-mono font-medium;
@apply mb-5 inline-block w-fit rounded bg-gray-600/60 px-2 py-1 font-mono text-sm font-medium text-green-500;
}
.news-title {
@apply text-lg font-semibold text-gray-100 leading-tight mb-3 line-clamp-2;
@apply mb-3 line-clamp-2 text-lg leading-tight font-semibold text-gray-100;
}
.news-meta {
@apply flex items-center text-sm text-gray-500 mb-1;
@apply mb-1 flex items-center text-sm text-gray-500;
}
.news-summary {
@apply text-gray-400 flex-1 text-base leading-relaxed mb-3 line-clamp-3;
@apply mb-3 line-clamp-3 flex-1 text-base leading-relaxed text-gray-400;
}
.news-cta {
@apply text-sm align-bottom text-yellow-500 hover:text-gray-400;
@apply align-bottom text-sm text-yellow-500 hover:text-gray-400;
}
.alert-dialog {
@apply bg-gray-800 border-gray-600 text-gray-400 max-w-md;
@apply max-w-md border-gray-600 bg-gray-800 text-gray-400;
}
.alert-title {
@apply text-xl font-semibold text-gray-100;
}
.alert-list {
@apply overflow-y-auto w-full max-h-[911px] rounded-lg flex border border-gray-600 flex-col gap-4 bg-gray-800 p-3 flex-1;
@apply flex max-h-[911px] w-full flex-1 flex-col gap-4 overflow-y-auto rounded-lg border border-gray-600 bg-gray-800 p-3;
}
.alert-empty {
@apply px-6 py-8 text-center text-gray-500/50;
}
.alert-item {
@apply p-4 rounded-lg bg-gray-700 border border-gray-600;
@apply rounded-lg border border-gray-600 bg-gray-700 p-4;
}
.alert-name {
@apply mb-2 text-lg text-yellow-500 font-semibold;
@apply mb-2 text-lg font-semibold text-yellow-500;
}
.alert-details {
@apply flex border-b pb-3 items-center justify-between gap-3 mb-2;
@apply mb-2 flex items-center justify-between gap-3 border-b pb-3;
}
.alert-company {
@apply text-gray-400 text-base;
@apply text-base text-gray-400;
}
.alert-price {
@apply text-gray-100 font-bold;
@apply font-bold text-gray-100;
}
.alert-actions {
@apply flex items-end justify-between;
}
.alert-update-btn {
@apply text-gray-400 rounded-full bg-transparent hover:bg-green-500/15 cursor-pointer;
@apply cursor-pointer rounded-full bg-transparent text-gray-400 hover:bg-green-500/15;
}
.alert-delete-btn {
@apply text-gray-400 rounded-full hover:bg-red-600/15 bg-transparent cursor-pointer transition-colors;
@apply cursor-pointer rounded-full bg-transparent text-gray-400 transition-colors hover:bg-red-600/15;
}
}
@@ -403,7 +489,6 @@
.tradingview-widget-container__widget {
background-color: #141414 !important;
height: 100% !important;
}
.widget-stock-heatmap-container .screenerMapWrapper-BBVfGP0b {
@@ -451,7 +536,7 @@
}
.custom-chart.tradingview-widget-container iframe {
border: 1px solid #30333A;
border: 1px solid #30333a;
border-radius: 8px !important;
overflow: hidden !important;
}
@@ -477,13 +562,13 @@
}
.scrollbar-hide-default:hover {
scrollbar-color: #30333A transparent;
scrollbar-color: #30333a transparent;
}
.scrollbar-hide-default:hover::-webkit-scrollbar-thumb {
background-color: #30333A;
background-color: #30333a;
}
.scrollbar-hide-default::-webkit-scrollbar-thumb:hover {
background-color: #9095A1;
}
background-color: #9095a1;
}