feat: tweak theme, move discord link #2

Merged
naomi merged 3 commits from fix/theme into main 2026-02-03 12:53:17 -08:00
Showing only changes of commit efb29c01c8 - Show all commits
+172 -8
View File
@@ -223,14 +223,14 @@
/* Main Content - with margins for fixed nav/footer */
body {
padding-top: 52px !important;
padding-bottom: 75px !important;
padding-bottom: 120px !important; /* Extra padding for footer clearance */
}
.page-content, .full.height {
background: transparent !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
min-height: calc(100vh - 145px) !important;
margin-bottom: 150px !important; /* Clear the footer with extra space */
min-height: calc(100vh - 127px) !important; /* 52px top + 75px footer */
}
/* Home page with custom hero section */
@@ -238,8 +238,8 @@
background: rgba(255, 255, 255, 0.85) !important;
backdrop-filter: blur(10px) !important;
border-radius: 15px !important;
margin: 20px !important;
padding: 30px !important;
margin: 20px 20px 150px 20px !important; /* Large bottom margin to clear footer */
padding: 30px 30px 30px 30px !important; /* No bottom padding extension */
box-shadow: 0 0 50px rgba(168, 87, 126, 0.15) !important;
}
@@ -247,6 +247,13 @@
.page-content.home .tw-mb-8,
.page-content.home > div:first-child {
background: transparent !important;
margin-bottom: 30px !important;
}
/* Ensure last element in home page has spacing */
.page-content.home > div:last-child,
.page-content.home .tw-px-8:last-child {
margin-bottom: 60px !important;
}
/* Dashboard page wrapper */
@@ -255,8 +262,8 @@
background: rgba(255, 255, 255, 0.85) !important;
backdrop-filter: blur(10px) !important;
border-radius: 15px !important;
margin: 20px !important;
padding: 30px !important;
margin: 20px 20px 150px 20px !important; /* Large bottom margin to clear footer */
padding: 30px 30px 30px 30px !important; /* No bottom padding extension */
box-shadow: 0 0 50px rgba(168, 87, 126, 0.15) !important;
}
@@ -267,9 +274,14 @@
border-radius: 10px !important;
padding: 20px !important;
margin-top: 10px !important;
margin-bottom: 10px !important;
margin-bottom: 30px !important; /* Increased bottom margin */
box-shadow: 0 0 40px rgba(168, 87, 126, 0.15) !important;
}
/* Last container on page needs extra space */
.ui.container:last-child {
margin-bottom: 50px !important;
}
/* Grid columns should be transparent */
.ui.grid > .column, .ui.grid > .row > .column {
@@ -1089,4 +1101,156 @@
.page-content.home h1,
.page-content.home h2 {
color: var(--witch-purple) !important;
}
/* Home page content wrapper needs bottom spacing */
.page-content.home .tw-mb-8 {
margin-bottom: 60px !important;
}
.page-content.home .center {
margin-bottom: 40px !important;
}
.page-content.home .hero {
margin-bottom: 40px !important;
}
/* Ensure home page has minimum height and proper spacing */
.page-content.home {
min-height: calc(100vh - 127px) !important;
margin-bottom: 150px !important; /* Clear footer without internal padding */
}
/* Universal bottom spacing for all page content */
.page-content > *:last-child {
margin-bottom: 40px !important;
}
/* Ensure no content is hidden behind footer */
.page-content {
margin-bottom: 150px !important;
}
/* Home page specific list spacing */
.page-content.home ul {
margin-bottom: 30px !important;
}
.page-content.home ul:last-child {
margin-bottom: 60px !important;
}
/* Force bottom clearance with pseudo-element */
.page-content::after {
content: "";
display: block;
height: 100px;
clear: both;
}
.page-content.home::after,
.page-content.dashboard::after {
height: 120px;
}
/* Tooltips and Hover Text */
.tooltip, .ui.tooltip, .ui.popup,
[data-tooltip]::after,
[data-tooltip]::before,
.tippy-box {
background: rgba(43, 27, 61, 0.95) !important;
color: var(--witch-moon) !important;
border: 1px solid var(--witch-mauve) !important;
box-shadow: 0 4px 20px rgba(168, 87, 126, 0.3) !important;
}
/* Tooltip arrows */
.tooltip::before, .ui.tooltip::before,
.ui.popup::before,
.tippy-arrow {
background: rgba(43, 27, 61, 0.95) !important;
border-color: var(--witch-mauve) !important;
}
/* Ensure tooltip text is visible */
.tooltip *, .ui.tooltip *,
.ui.popup *, .tippy-content,
[data-tooltip]::after {
color: var(--witch-moon) !important;
}
/* Hover states for elements with tooltips */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
background: rgba(43, 27, 61, 0.95) !important;
color: var(--witch-moon) !important;
}
/* Title attributes on hover */
[title]:hover::after {
background: rgba(43, 27, 61, 0.95) !important;
color: var(--witch-moon) !important;
padding: 6px 10px !important;
border-radius: 6px !important;
border: 1px solid var(--witch-mauve) !important;
}
/* Semantic UI specific tooltip */
.ui.inverted.popup,
.ui.inverted.tooltip {
background: rgba(43, 27, 61, 0.98) !important;
color: var(--witch-moon) !important;
box-shadow: 0 6px 25px rgba(168, 87, 126, 0.4) !important;
}
.ui.inverted.popup::before {
background: rgba(43, 27, 61, 0.98) !important;
}
/* Dropdown hover items should also be readable */
.ui.dropdown .menu .item:hover {
background: var(--witch-lavender) !important;
color: var(--witch-purple) !important;
}
/* Hover cards and info boxes */
.hover-card, .hover-box,
.user-card, .repo-card,
.hover-info, .info-popup {
background: rgba(255, 255, 255, 0.98) !important;
color: var(--witch-purple) !important;
border: 2px solid var(--witch-mauve) !important;
box-shadow: 0 8px 30px rgba(168, 87, 126, 0.3) !important;
}
.hover-card *, .hover-box *,
.user-card *, .repo-card * {
color: var(--witch-purple) !important;
}
.hover-card a, .hover-box a,
.user-card a, .repo-card a {
color: var(--witch-rose) !important;
}
/* Gitea specific tooltips */
.tippy-box[data-theme="tooltip"] {
background: rgba(43, 27, 61, 0.95) !important;
color: var(--witch-moon) !important;
}
.tippy-box[data-theme="tooltip"] .tippy-content {
color: var(--witch-moon) !important;
}
/* Activity heatmap tooltips */
.activity-heatmap .tooltip,
.heatmap .tooltip,
.contribution-tooltip {
background: rgba(43, 27, 61, 0.95) !important;
color: var(--witch-moon) !important;
border: 1px solid var(--witch-rose) !important;
padding: 8px 12px !important;
border-radius: 6px !important;
}