generated from nhcarrigan/template
naomi
9eb2dcc482
Security Scan and Upload / Security & DefectDojo Upload (push) Successful in 1m52s
### Explanation _No response_ ### Issue Closes #1 ### Attestations - [ ] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/) - [ ] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/). - [ ] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/). ### Dependencies - [ ] I have pinned the dependencies to a specific patch version. ### Style - [ ] I have run the linter and resolved any errors. - [ ] My pull request uses an appropriate title, matching the conventional commit standards. - [ ] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request. ### Tests - [ ] My contribution adds new code, and I have added tests to cover it. - [ ] My contribution modifies existing code, and I have updated the tests to reflect these changes. - [ ] All new and existing tests pass locally with my changes. - [ ] Code coverage remains at or above the configured threshold. ### Documentation _No response_ ### Versioning _No response_ Reviewed-on: #2 Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
1286 lines
41 KiB
CSS
1286 lines
41 KiB
CSS
/* Witchy Purple Rose - A mystical theme for Gitea */
|
|
|
|
@font-face {
|
|
font-family: 'Vampyr';
|
|
src: url('https://cdn.nhcarrigan.com/fonts/vampyr.ttf') format('truetype');
|
|
}
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Creepster&family=Griffy&family=Henny+Penny&display=swap');
|
|
|
|
:root {
|
|
--is-dark-theme: false;
|
|
--fonts-regular: "Kalam", cursive !important;
|
|
--fonts-proportional: "Griffy", cursive !important;
|
|
--fonts-monospace: "Courier New", monospace !important;
|
|
--fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji" !important;
|
|
|
|
/* Witchy Purple Rose Palette */
|
|
--witch-purple: #2B1B3D;
|
|
--witch-plum: #44275A;
|
|
--witch-rose: #A8577E;
|
|
--witch-mauve: #D4A5C7;
|
|
--witch-lavender: #E8D5E8;
|
|
--witch-black: #0A0009;
|
|
--witch-silver: #C0C0C0;
|
|
--witch-moon: #F5F5F5;
|
|
--witch-shadow: rgba(10, 0, 9, 0.7);
|
|
|
|
/* Primary (roses) */
|
|
--color-primary: #A8577E;
|
|
--color-primary-dark: #8B4567;
|
|
--color-primary-light: #D4A5C7;
|
|
--color-primary-very-light: #F0E0EC;
|
|
|
|
/* Main Text & Background */
|
|
--color-text: #2B1B3D;
|
|
--color-text-light: #44275A;
|
|
--color-text-dark: #0A0009;
|
|
--color-body: #F5F5F5;
|
|
|
|
/* UI (mystical purples) */
|
|
--color-secondary: #44275A;
|
|
--color-secondary-dark: #2B1B3D;
|
|
--color-secondary-light: #6B4C7A;
|
|
|
|
/* State Colors */
|
|
--color-success: #5D7A5C;
|
|
--color-success-dark: #4A614A;
|
|
--color-success-light: #7A9779;
|
|
--color-danger: #8B3A3A;
|
|
--color-danger-dark: #6B2C2C;
|
|
--color-danger-light: #A85555;
|
|
--color-warning: #8B6914;
|
|
--color-warning-dark: #6B5010;
|
|
--color-warning-light: #B8902B;
|
|
--color-info: #4C5B8B;
|
|
--color-info-dark: #3A4669;
|
|
--color-info-light: #6B7AA8;
|
|
|
|
/* Other UI Elements */
|
|
--color-menu: #FBF9FC;
|
|
--color-card: #FFFFFF;
|
|
--color-markup-table-row: #F8F5FA;
|
|
--color-markup-code-block: #FCF8FB;
|
|
--color-button: #A8577E;
|
|
--color-border: #E8D5E8;
|
|
--color-input-border: #D4A5C7;
|
|
--color-input-background: #FFFFFF;
|
|
--color-small-accent: #D4A5C7;
|
|
|
|
/* Diff Colors (rose/plum tints) */
|
|
--color-diff-add-line: #E8F0E8;
|
|
--color-diff-add-word: #D0E0D0;
|
|
--color-diff-del-line: #F8E8F0;
|
|
--color-diff-del-word: #F0D0E0;
|
|
--color-diff-section: #F0E8F8;
|
|
|
|
/* Code Syntax Highlighting */
|
|
--color-code-keyword: #44275A;
|
|
--color-code-function: #A8577E;
|
|
--color-code-string: #8B4567;
|
|
--color-code-number: #6B4C7A;
|
|
--color-code-comment: #8A6B78;
|
|
--color-code-type: #5B4A6B;
|
|
|
|
--vscode-editor-background: #FCF9FB;
|
|
--color-footer: #2B1B3D;
|
|
--color-nav-bg: #44275A;
|
|
|
|
/* Editor selection colors - this is what Gitea uses */
|
|
--color-editor-line-highlight: var(--witch-lavender);
|
|
--color-code-bg: #FDF9FC;
|
|
}
|
|
|
|
/* Custom Cursors */
|
|
html {
|
|
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><g transform="translate(12 12) rotate(-45 12 12)"><circle cx="12" cy="6" r="5" fill="%232B1B3D"/><circle cx="6" cy="12" r="5" fill="%232B1B3D"/><circle cx="18" cy="12" r="5" fill="%232B1B3D"/><circle cx="12" cy="18" r="5" fill="%232B1B3D"/><circle cx="12" cy="12" r="3.5" fill="%23A8577E"/><path d="M12 18 L12 36" stroke="%232B1B3D" stroke-width="2.5"/><path d="M10 34 L8 38" stroke="%232B1B3D" stroke-width="2"/><path d="M14 34 L16 38" stroke="%232B1B3D" stroke-width="2"/></g><circle cx="3" cy="3" r="1.5" fill="%23D4A5C7" opacity="0.8"/></svg>') 0 0, auto;
|
|
font-family: "Kalam", cursive;
|
|
}
|
|
|
|
a, button, .button, .dropdown, .ui.button, .ui.dropdown {
|
|
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><defs><filter id="glow"><feGaussianBlur stdDeviation="3" result="coloredBlur"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g transform="translate(12 12) rotate(-45 12 12)" filter="url(%23glow)"><circle cx="12" cy="6" r="5.5" fill="%23A8577E"/><circle cx="6" cy="12" r="5.5" fill="%23A8577E"/><circle cx="18" cy="12" r="5.5" fill="%23A8577E"/><circle cx="12" cy="18" r="5.5" fill="%23A8577E"/><circle cx="12" cy="12" r="4" fill="%23D4A5C7"/><path d="M12 18 L12 36" stroke="%232B1B3D" stroke-width="2.5"/><path d="M10 34 L8 38" stroke="%232B1B3D" stroke-width="2"/><path d="M14 34 L16 38" stroke="%232B1B3D" stroke-width="2"/></g><circle cx="3" cy="3" r="2" fill="%23D4A5C7" opacity="0.9"/></svg>') 0 0, pointer !important;
|
|
}
|
|
|
|
input[type="text"], input[type="email"], input[type="password"], textarea {
|
|
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><line x1="12" y1="6" x2="12" y2="42" stroke="%232B1B3D" stroke-width="2"/><line x1="8" y1="6" x2="16" y2="6" stroke="%232B1B3D" stroke-width="2"/><line x1="8" y1="42" x2="16" y2="42" stroke="%232B1B3D" stroke-width="2"/><circle cx="12" cy="24" r="3" fill="%23A8577E" opacity="0.5"/></svg>') 12 24, text !important;
|
|
}
|
|
|
|
/* Body base styling - color NOT set here to preserve syntax highlighting */
|
|
body {
|
|
font-family: "Kalam", cursive !important;
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Set default text color on specific containers, not body/code */
|
|
.ui.container:not(.file-view):not(.code-view),
|
|
.ui.segment:not(.file-view):not(.code-view),
|
|
.ui.card,
|
|
.ui.message,
|
|
.repository-summary,
|
|
.activity-container,
|
|
.home,
|
|
.dashboard,
|
|
.user.dashboard,
|
|
.user.home,
|
|
.dashboard-navbar,
|
|
.feeds,
|
|
.feed,
|
|
.news,
|
|
.activity,
|
|
.heatmap {
|
|
color: var(--witch-purple);
|
|
}
|
|
|
|
/* Typography */
|
|
h1, h2, h3, h4, h5, h6, .ui.header {
|
|
font-family: "Griffy", cursive !important;
|
|
font-weight: 400 !important;
|
|
letter-spacing: 1px !important;
|
|
color: var(--witch-plum) !important;
|
|
}
|
|
|
|
/* Ensure all text is readable - but NOT code syntax highlighting */
|
|
p, li, label {
|
|
color: var(--witch-purple);
|
|
}
|
|
|
|
/* Dashboard and Home specific elements */
|
|
.dashboard .ui.header,
|
|
.home .ui.header,
|
|
.dashboard .description,
|
|
.home .description,
|
|
.dashboard-repos .name,
|
|
.dashboard-orgs .name,
|
|
.feeds .title,
|
|
.feeds .content,
|
|
.activity-bar-graph,
|
|
.activity-bar-graph text,
|
|
.activity-bar-graph .activity-bar-graph-label,
|
|
.contribution-calendar text,
|
|
.heatmap-day,
|
|
.milestone-list .content,
|
|
.issue-list .title,
|
|
.issue-list .desc {
|
|
color: var(--witch-purple) !important;
|
|
}
|
|
|
|
/* Table cells - but not in code views */
|
|
td:not(.lines-code td):not(.lines-num td),
|
|
th:not(.lines-code th) {
|
|
color: var(--witch-purple);
|
|
}
|
|
|
|
a {
|
|
color: var(--witch-rose) !important;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--witch-plum) !important;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
h1, .ui.huge.header {
|
|
text-shadow: 2px 2px 0px var(--witch-rose),
|
|
3px 3px 6px rgba(168, 87, 126, 0.3);
|
|
}
|
|
|
|
/* Background Effects */
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: url(https://cdn.nhcarrigan.com/background.png);
|
|
background-size: cover;
|
|
background-position: center;
|
|
z-index: -2;
|
|
pointer-events: none;
|
|
}
|
|
|
|
body::after {
|
|
content: "";
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background:
|
|
radial-gradient(circle at 20% 50%, rgba(168, 87, 126, 0.15) 0%, transparent 60%),
|
|
radial-gradient(circle at 80% 80%, rgba(68, 39, 90, 0.15) 0%, transparent 60%),
|
|
linear-gradient(180deg,
|
|
rgba(10, 0, 9, 0.3) 0%,
|
|
rgba(43, 27, 61, 0.1) 50%,
|
|
rgba(43, 27, 61, 0.2) 100%
|
|
);
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Main Content - with margins for fixed nav/footer */
|
|
body {
|
|
padding-top: 52px !important;
|
|
padding-bottom: 120px !important; /* Extra padding for footer clearance */
|
|
}
|
|
|
|
.page-content, .full.height {
|
|
background: transparent !important;
|
|
padding-top: 10px !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 */
|
|
.page-content.home {
|
|
background: rgba(255, 255, 255, 0.85) !important;
|
|
backdrop-filter: blur(10px) !important;
|
|
border-radius: 15px !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;
|
|
}
|
|
|
|
/* Home page inner content wrapper */
|
|
.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 */
|
|
.page-content.dashboard,
|
|
.page-content.user.dashboard {
|
|
background: rgba(255, 255, 255, 0.85) !important;
|
|
backdrop-filter: blur(10px) !important;
|
|
border-radius: 15px !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;
|
|
}
|
|
|
|
/* Main container backgrounds - TRANSLUCENT so background shows */
|
|
.ui.container {
|
|
background: rgba(255, 255, 255, 0.75) !important;
|
|
backdrop-filter: blur(8px) !important;
|
|
border-radius: 10px !important;
|
|
padding: 20px !important;
|
|
margin-top: 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 {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Dashboard and Home specific background fixes */
|
|
.dashboard .ui.container,
|
|
.home .ui.container,
|
|
.user.dashboard .ui.container {
|
|
background: rgba(255, 255, 255, 0.85) !important;
|
|
backdrop-filter: blur(10px) !important;
|
|
}
|
|
|
|
/* Dashboard main content area */
|
|
.user.dashboard .ui.container,
|
|
.user.dashboard > .ui.container > .ui.stackable.grid {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Dashboard content wrapper that needs background */
|
|
.user.dashboard .ui.container .column {
|
|
background: rgba(255, 255, 255, 0.9) !important;
|
|
backdrop-filter: blur(8px) !important;
|
|
border-radius: 10px !important;
|
|
padding: 20px !important;
|
|
margin: 5px !important;
|
|
}
|
|
|
|
/* Dashboard feed and activity sections */
|
|
.dashboard .feeds,
|
|
.home .news,
|
|
.dashboard .ui.segment,
|
|
.home .ui.segment,
|
|
.activity-feed-box {
|
|
background: rgba(255, 255, 255, 0.9) !important;
|
|
backdrop-filter: blur(8px) !important;
|
|
border-radius: 10px !important;
|
|
padding: 15px !important;
|
|
margin: 10px 0 !important;
|
|
box-shadow: 0 0 20px rgba(168, 87, 126, 0.1) !important;
|
|
}
|
|
|
|
/* Repository/user pages */
|
|
.repository, .user {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Dashboard and Home main wrappers need backgrounds */
|
|
.dashboard, .home,
|
|
.user.dashboard > .ui.container,
|
|
.dashboard > .ui.container {
|
|
position: relative;
|
|
}
|
|
|
|
/* Create background containers for dashboard/home */
|
|
.dashboard > .ui.container > .ui.grid,
|
|
.home > .ui.container > .ui.grid,
|
|
.dashboard .column.fluid,
|
|
.home .column.fluid {
|
|
background: rgba(255, 255, 255, 0.85) !important;
|
|
backdrop-filter: blur(10px) !important;
|
|
border-radius: 10px !important;
|
|
padding: 20px !important;
|
|
box-shadow: 0 0 30px rgba(168, 87, 126, 0.12) !important;
|
|
}
|
|
|
|
/* Header/Navigation - FIXED at top */
|
|
#navbar, .ui.top.secondary.menu.navbar {
|
|
position: fixed !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
z-index: 1000 !important;
|
|
height: 52px !important;
|
|
background: linear-gradient(135deg, var(--witch-plum) 0%, var(--witch-purple) 100%) !important;
|
|
box-shadow: 0 5px 20px var(--witch-shadow) !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* Nav items - LIGHT text on dark background */
|
|
#navbar .item, #navbar a.item, .ui.secondary.menu .item, .navbar .item {
|
|
color: var(--witch-moon) !important;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
#navbar .item:hover, #navbar a.item:hover, .ui.secondary.menu .item:hover {
|
|
background-color: rgba(212, 165, 199, 0.3) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
#navbar .active.item, .ui.secondary.menu .active.item {
|
|
background-color: rgba(212, 165, 199, 0.4) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
/* Icons in navbar should also be light */
|
|
#navbar .item i, #navbar .item svg, #navbar .item .icon {
|
|
color: var(--witch-moon) !important;
|
|
}
|
|
|
|
/* Special styling for Discord link in nav */
|
|
#navbar .discord-link,
|
|
#navbar a[href*="discord"],
|
|
#navbar a[href*="chat.nhcarrigan.com"] {
|
|
background: rgba(212, 165, 199, 0.2) !important;
|
|
border-radius: 8px !important;
|
|
padding: 8px 16px !important;
|
|
margin: 0 5px !important;
|
|
transition: all 0.3s ease !important;
|
|
}
|
|
|
|
#navbar .discord-link:hover,
|
|
#navbar a[href*="discord"]:hover,
|
|
#navbar a[href*="chat.nhcarrigan.com"]:hover {
|
|
background: rgba(212, 165, 199, 0.5) !important;
|
|
transform: translateY(-1px) !important;
|
|
box-shadow: 0 2px 10px rgba(168, 87, 126, 0.3) !important;
|
|
}
|
|
|
|
/* Discord icon if you use one */
|
|
#navbar .discord-link i,
|
|
#navbar a[href*="discord"] i,
|
|
#navbar a[href*="chat.nhcarrigan.com"] i {
|
|
color: var(--witch-lavender) !important;
|
|
margin-right: 5px !important;
|
|
}
|
|
|
|
/* Repository header */
|
|
.repository.header {
|
|
background: linear-gradient(to right,
|
|
var(--color-menu) 0%,
|
|
rgba(232, 213, 232, 0.5) 100%);
|
|
border-bottom: 2px solid var(--witch-mauve);
|
|
}
|
|
|
|
/* Buttons */
|
|
.ui.primary.button, .ui.green.button {
|
|
background: linear-gradient(135deg,
|
|
var(--witch-plum) 0%,
|
|
var(--witch-purple) 100%) !important;
|
|
color: var(--witch-moon) !important;
|
|
border: none !important;
|
|
font-family: "Griffy", cursive !important;
|
|
letter-spacing: 1px;
|
|
transition: all 0.3s ease !important;
|
|
box-shadow: 0 4px 15px rgba(68, 39, 90, 0.3);
|
|
}
|
|
|
|
.ui.primary.button:hover, .ui.green.button:hover {
|
|
transform: translateY(-2px) scale(1.05) !important;
|
|
box-shadow: 0 6px 20px rgba(68, 39, 90, 0.4),
|
|
0 0 25px rgba(168, 87, 126, 0.3) !important;
|
|
}
|
|
|
|
.ui.basic.button {
|
|
border: 2px solid var(--witch-plum) !important;
|
|
color: var(--witch-plum) !important;
|
|
background: transparent !important;
|
|
transition: all 0.3s ease !important;
|
|
}
|
|
|
|
.ui.basic.button:hover {
|
|
background: var(--witch-lavender) !important;
|
|
color: var(--witch-purple) !important;
|
|
border-color: var(--witch-rose) !important;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Cards & Panels */
|
|
.ui.card, .ui.segment, .dashboard-card {
|
|
background: rgba(255, 255, 255, 0.95) !important;
|
|
border: 1px solid var(--witch-mauve) !important;
|
|
box-shadow: 0 4px 20px rgba(168, 87, 126, 0.1),
|
|
0 0 40px rgba(68, 39, 90, 0.05) !important;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* Dashboard specific cards and boxes */
|
|
.dashboard .ui.repository.list,
|
|
.dashboard .ui.user.list,
|
|
.dashboard .box,
|
|
.home .ui.repository.list,
|
|
.activity.tab,
|
|
.repositories.tab {
|
|
background: rgba(255, 255, 255, 0.9) !important;
|
|
backdrop-filter: blur(8px) !important;
|
|
border-radius: 8px !important;
|
|
padding: 15px !important;
|
|
margin: 10px 0 !important;
|
|
}
|
|
|
|
.ui.card:hover, .dashboard-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 25px rgba(168, 87, 126, 0.15),
|
|
0 0 50px rgba(68, 39, 90, 0.08) !important;
|
|
}
|
|
|
|
/* Tabs - NOT the main nav styling */
|
|
.ui.tabular.menu {
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.ui.tabular.menu .item {
|
|
color: var(--witch-plum) !important;
|
|
background: transparent !important;
|
|
font-family: "Kalam", cursive !important;
|
|
font-weight: 700;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.ui.tabular.menu .item:hover {
|
|
background: rgba(232, 213, 232, 0.3) !important;
|
|
color: var(--witch-purple) !important;
|
|
}
|
|
|
|
.ui.tabular.menu .active.item {
|
|
background: rgba(255, 255, 255, 0.8) !important;
|
|
color: var(--witch-purple) !important;
|
|
border-color: var(--witch-rose) !important;
|
|
border-bottom: 3px solid var(--witch-rose) !important;
|
|
}
|
|
|
|
/* Vertical menu should not be dark either */
|
|
.ui.vertical.menu {
|
|
background: rgba(255, 255, 255, 0.85) !important;
|
|
}
|
|
|
|
.ui.vertical.menu .item {
|
|
color: var(--witch-purple) !important;
|
|
}
|
|
|
|
/* Forms */
|
|
.ui.input input, .ui.form input, .ui.form textarea {
|
|
background: rgba(255, 255, 255, 0.95) !important;
|
|
border: 2px solid var(--witch-mauve) !important;
|
|
color: var(--witch-purple) !important;
|
|
font-family: "Kalam", cursive !important;
|
|
border-radius: 10px !important;
|
|
transition: all 0.3s ease !important;
|
|
}
|
|
|
|
.ui.input input:focus, .ui.form input:focus, .ui.form textarea:focus {
|
|
border-color: var(--witch-rose) !important;
|
|
box-shadow: 0 0 0 3px rgba(168, 87, 126, 0.2) !important;
|
|
background: white !important;
|
|
}
|
|
|
|
/* Labels & Tags */
|
|
.ui.label {
|
|
background: linear-gradient(135deg,
|
|
var(--witch-mauve) 0%,
|
|
var(--witch-lavender) 100%) !important;
|
|
color: var(--witch-purple) !important;
|
|
font-family: "Kalam", cursive !important;
|
|
font-weight: 700;
|
|
border: 1px solid var(--witch-rose);
|
|
}
|
|
|
|
/* Status Colors */
|
|
.ui.green.label {
|
|
background: linear-gradient(135deg, #7A9779 0%, #5D7A5C 100%) !important;
|
|
color: white !important;
|
|
border: 1px solid #5D7A5C;
|
|
}
|
|
|
|
.ui.red.label {
|
|
background: linear-gradient(135deg, #A85555 0%, #8B3A3A 100%) !important;
|
|
color: white !important;
|
|
border: 1px solid #8B3A3A;
|
|
}
|
|
|
|
/* Code Blocks - preserve syntax highlighting */
|
|
|
|
/* IMPORTANT: Do NOT set color on code elements - let Chroma/Monaco handle it */
|
|
.code-view, .file-view, .lines-code, .code-inner {
|
|
color: unset !important;
|
|
}
|
|
|
|
/* Gitea's code syntax CSS variables */
|
|
:root {
|
|
/* Code highlighting colors (witchy theme) */
|
|
--color-code-bg: #FDF9FC;
|
|
--color-code-fg: #2B1B3D;
|
|
--color-code-keyword: #44275A;
|
|
--color-code-constant: #4C5B8B;
|
|
--color-code-string: #5D7A5C;
|
|
--color-code-comment: #8A6B78;
|
|
--color-code-number: #4C5B8B;
|
|
--color-code-tag: #A8577E;
|
|
--color-code-attribute: #6B4C7A;
|
|
--color-code-symbol: #8B4567;
|
|
--color-code-class: #8B4567;
|
|
--color-code-function: #A8577E;
|
|
--color-code-variable: #6B4C7A;
|
|
--color-code-operator: #44275A;
|
|
--color-code-builtin: #A8577E;
|
|
--color-code-inserted: #5D7A5C;
|
|
--color-code-deleted: #8B3A3A;
|
|
}
|
|
|
|
/* Monaco editor (code editing) - light background */
|
|
.monaco-editor,
|
|
.monaco-diff-editor,
|
|
.monaco-component,
|
|
.monaco-editor .monaco-editor-background,
|
|
.monaco-editor .margin,
|
|
.monaco-editor .inputarea.ime-input,
|
|
.monaco-editor .overflow-guard,
|
|
.monaco-editor .lines-content,
|
|
.monaco-editor .view-lines,
|
|
.monaco-editor .minimap,
|
|
.monaco-editor .minimap-slider {
|
|
background: #FDF9FC !important;
|
|
background-color: #FDF9FC !important;
|
|
}
|
|
|
|
/* Monaco editor text - do NOT set color, let Monaco handle syntax */
|
|
.monaco-editor .view-line {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Monaco editor CSS variables for syntax highlighting */
|
|
.monaco-editor {
|
|
--vscode-editor-background: #FDF9FC !important;
|
|
--vscode-editor-foreground: #2B1B3D !important;
|
|
--vscode-editorLineNumber-foreground: #8A6B78 !important;
|
|
--vscode-editorLineNumber-activeForeground: #44275A !important;
|
|
--vscode-editor-selectionBackground: rgba(168, 87, 126, 0.5) !important;
|
|
--vscode-editor-inactiveSelectionBackground: rgba(168, 87, 126, 0.3) !important;
|
|
--vscode-editor-lineHighlightBackground: rgba(232, 213, 232, 0.4) !important;
|
|
--vscode-editorGutter-background: #FDF9FC !important;
|
|
}
|
|
|
|
/* ========================================
|
|
CODE EDITOR SELECTION STYLES
|
|
Gitea uses CodeMirror, not Monaco!
|
|
======================================== */
|
|
|
|
/* CodeMirror selection - this is what Gitea actually uses */
|
|
.CodeMirror-selected,
|
|
.CodeMirror-focused .CodeMirror-selected,
|
|
.CodeMirror-line::selection,
|
|
.CodeMirror-line > span::selection,
|
|
.CodeMirror-line > span > span::selection {
|
|
background: #A8577E !important;
|
|
color: #FFFFFF !important;
|
|
}
|
|
|
|
/* CodeMirror cursor */
|
|
.CodeMirror-cursor {
|
|
border-left-color: var(--witch-purple) !important;
|
|
}
|
|
|
|
/* CodeMirror active line */
|
|
.CodeMirror-activeline-background {
|
|
background: var(--witch-lavender) !important;
|
|
}
|
|
|
|
/* CodeMirror gutter */
|
|
.CodeMirror-gutters {
|
|
background: #FDF9FC !important;
|
|
border-right-color: var(--witch-mauve) !important;
|
|
}
|
|
|
|
.CodeMirror-linenumber {
|
|
color: var(--witch-rose) !important;
|
|
}
|
|
|
|
/* Monaco editor fallback (in case some views use it) */
|
|
.monaco-editor {
|
|
--vscode-editor-selectionBackground: #A8577E !important;
|
|
--vscode-editor-inactiveSelectionBackground: rgba(168, 87, 126, 0.5) !important;
|
|
--vscode-editor-selectionForeground: #FFFFFF !important;
|
|
--vscode-editor-selectionHighlightBackground: rgba(168, 87, 126, 0.4) !important;
|
|
}
|
|
|
|
/* Monaco selection overlay */
|
|
.monaco-editor .view-overlays .selected-text,
|
|
.monaco-editor .selected-text {
|
|
background-color: #A8577E !important;
|
|
background: #A8577E !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Native selection fallback for all editors */
|
|
.monaco-editor *::selection,
|
|
.CodeMirror *::selection,
|
|
.code-editor *::selection {
|
|
background-color: #A8577E !important;
|
|
color: #FFFFFF !important;
|
|
}
|
|
|
|
/* Fix current line highlight in the main content area */
|
|
.monaco-editor .view-overlays .current-line,
|
|
.monaco-editor .current-line {
|
|
background-color: rgba(232, 213, 232, 0.4) !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* Fix margin/gutter area - prevent black background on selected line */
|
|
.monaco-editor .margin,
|
|
.monaco-editor .margin-view-overlays {
|
|
background-color: #FDF9FC !important;
|
|
}
|
|
|
|
.monaco-editor .margin-view-overlays .current-line-margin,
|
|
.monaco-editor .current-line-margin {
|
|
background-color: rgba(232, 213, 232, 0.4) !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* Active line number row background */
|
|
.monaco-editor .margin-view-overlays .line-numbers.active-line-number {
|
|
background-color: rgba(232, 213, 232, 0.4) !important;
|
|
}
|
|
|
|
/* Monaco syntax token colors */
|
|
.monaco-editor .mtk1 { color: #2B1B3D !important; } /* Default text */
|
|
.monaco-editor .mtk2 { color: #8A6B78 !important; } /* Comments */
|
|
.monaco-editor .mtk3 { color: #5D7A5C !important; } /* Strings */
|
|
.monaco-editor .mtk4 { color: #4C5B8B !important; } /* Numbers */
|
|
.monaco-editor .mtk5 { color: #44275A !important; } /* Keywords */
|
|
.monaco-editor .mtk6 { color: #A8577E !important; } /* Functions */
|
|
.monaco-editor .mtk7 { color: #6B4C7A !important; } /* Variables */
|
|
.monaco-editor .mtk8 { color: #8B4567 !important; } /* Types/Classes */
|
|
.monaco-editor .mtk9 { color: #44275A !important; } /* Operators */
|
|
.monaco-editor .mtk10 { color: #A8577E !important; } /* Built-ins */
|
|
.monaco-editor .mtk11 { color: #6B4C7A !important; } /* Attributes */
|
|
.monaco-editor .mtk12 { color: #5D7A5C !important; } /* String escape */
|
|
|
|
/* Monaco editor gutter/margin */
|
|
.monaco-editor .margin-view-overlays .line-numbers {
|
|
color: #8A6B78 !important;
|
|
}
|
|
|
|
.monaco-editor .current-line ~ .line-numbers {
|
|
color: #44275A !important;
|
|
}
|
|
|
|
/* Only style inline code in markdown, not code blocks */
|
|
.markup code,
|
|
.markdown code {
|
|
background: rgba(232, 213, 232, 0.3) !important;
|
|
color: var(--witch-purple) !important;
|
|
font-family: 'Courier New', monospace !important;
|
|
border: 1px solid var(--witch-lavender);
|
|
border-radius: 5px;
|
|
padding: 2px 6px;
|
|
}
|
|
|
|
/* Code view container - add bottom margin for fixed footer */
|
|
.code-view, .file-view {
|
|
background: rgba(255, 255, 255, 0.95) !important;
|
|
margin-bottom: 80px !important;
|
|
padding-bottom: 20px !important;
|
|
}
|
|
|
|
/* File content wrapper needs space too */
|
|
.file-content, .view-raw {
|
|
padding-bottom: 100px !important;
|
|
}
|
|
|
|
/* ========================================
|
|
CHROMA SYNTAX HIGHLIGHTING (Gitea uses this)
|
|
Witchy purple/rose theme
|
|
======================================== */
|
|
|
|
/* Code block container - let child elements have their own colors */
|
|
.chroma {
|
|
background: rgba(252, 248, 251, 0.95) !important;
|
|
}
|
|
|
|
/* Lines of code container */
|
|
.lines-code, .lines-num, .code-inner, .file-view .code {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Individual code cells */
|
|
.lines-code td, .code-inner code {
|
|
color: inherit !important;
|
|
}
|
|
|
|
/* Error */
|
|
.chroma .err { color: #8B3A3A !important; }
|
|
|
|
/* Line link, line highlight, line numbers, line table */
|
|
.chroma .lnlinks { outline: none; text-decoration: none; color: inherit; }
|
|
.chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
|
|
.chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
|
|
.chroma .hl { background-color: rgba(212, 165, 199, 0.3) !important; }
|
|
.chroma .ln, .chroma .lnt { color: #8A6B78 !important; padding: 0 8px; }
|
|
|
|
/* Keyword */
|
|
.chroma .k { color: #44275A !important; font-weight: bold; }
|
|
.chroma .kc { color: #44275A !important; font-weight: bold; } /* Keyword.Constant */
|
|
.chroma .kd { color: #44275A !important; font-weight: bold; } /* Keyword.Declaration */
|
|
.chroma .kn { color: #44275A !important; font-weight: bold; } /* Keyword.Namespace */
|
|
.chroma .kp { color: #44275A !important; } /* Keyword.Pseudo */
|
|
.chroma .kr { color: #44275A !important; font-weight: bold; } /* Keyword.Reserved */
|
|
.chroma .kt { color: #5B4A6B !important; } /* Keyword.Type */
|
|
|
|
/* Name */
|
|
.chroma .n { color: var(--witch-purple) !important; }
|
|
.chroma .na { color: #6B4C7A !important; } /* Name.Attribute */
|
|
.chroma .nb { color: #A8577E !important; } /* Name.Builtin */
|
|
.chroma .nc { color: #8B4567 !important; font-weight: bold; } /* Name.Class */
|
|
.chroma .no { color: #6B4C7A !important; } /* Name.Constant */
|
|
.chroma .nd { color: #A8577E !important; } /* Name.Decorator */
|
|
.chroma .ni { color: var(--witch-purple) !important; font-weight: bold; } /* Name.Entity */
|
|
.chroma .ne { color: #8B3A3A !important; font-weight: bold; } /* Name.Exception */
|
|
.chroma .nf { color: #A8577E !important; } /* Name.Function */
|
|
.chroma .nl { color: var(--witch-purple) !important; } /* Name.Label */
|
|
.chroma .nn { color: #44275A !important; } /* Name.Namespace */
|
|
.chroma .nt { color: #44275A !important; font-weight: bold; } /* Name.Tag */
|
|
.chroma .nv { color: #6B4C7A !important; } /* Name.Variable */
|
|
.chroma .bp { color: #A8577E !important; } /* Name.Builtin.Pseudo */
|
|
.chroma .vc { color: #6B4C7A !important; } /* Name.Variable.Class */
|
|
.chroma .vg { color: #6B4C7A !important; } /* Name.Variable.Global */
|
|
.chroma .vi { color: #6B4C7A !important; } /* Name.Variable.Instance */
|
|
.chroma .vm { color: #6B4C7A !important; } /* Name.Variable.Magic */
|
|
|
|
/* Literal */
|
|
.chroma .l { color: #8B4567 !important; }
|
|
.chroma .ld { color: #5D7A5C !important; } /* Literal.Date */
|
|
.chroma .s { color: #5D7A5C !important; } /* String */
|
|
.chroma .sa { color: #5D7A5C !important; } /* String.Affix */
|
|
.chroma .sb { color: #5D7A5C !important; } /* String.Backtick */
|
|
.chroma .sc { color: #5D7A5C !important; } /* String.Char */
|
|
.chroma .dl { color: #5D7A5C !important; } /* String.Delimiter */
|
|
.chroma .sd { color: #5D7A5C !important; font-style: italic; } /* String.Doc */
|
|
.chroma .s2 { color: #5D7A5C !important; } /* String.Double */
|
|
.chroma .se { color: #8B4567 !important; font-weight: bold; } /* String.Escape */
|
|
.chroma .sh { color: #5D7A5C !important; } /* String.Heredoc */
|
|
.chroma .si { color: #8B4567 !important; } /* String.Interpol */
|
|
.chroma .sx { color: #5D7A5C !important; } /* String.Other */
|
|
.chroma .sr { color: #A8577E !important; } /* String.Regex */
|
|
.chroma .s1 { color: #5D7A5C !important; } /* String.Single */
|
|
.chroma .ss { color: #A8577E !important; } /* String.Symbol */
|
|
|
|
/* Number */
|
|
.chroma .m { color: #4C5B8B !important; } /* Number */
|
|
.chroma .mb { color: #4C5B8B !important; } /* Number.Bin */
|
|
.chroma .mf { color: #4C5B8B !important; } /* Number.Float */
|
|
.chroma .mh { color: #4C5B8B !important; } /* Number.Hex */
|
|
.chroma .mi { color: #4C5B8B !important; } /* Number.Integer */
|
|
.chroma .il { color: #4C5B8B !important; } /* Number.Integer.Long */
|
|
.chroma .mo { color: #4C5B8B !important; } /* Number.Oct */
|
|
|
|
/* Operator */
|
|
.chroma .o { color: #44275A !important; } /* Operator */
|
|
.chroma .ow { color: #44275A !important; font-weight: bold; } /* Operator.Word */
|
|
|
|
/* Punctuation */
|
|
.chroma .p { color: var(--witch-purple) !important; }
|
|
|
|
/* Comment */
|
|
.chroma .c { color: #8A6B78 !important; font-style: italic; }
|
|
.chroma .ch { color: #8A6B78 !important; font-style: italic; } /* Comment.Hashbang */
|
|
.chroma .cm { color: #8A6B78 !important; font-style: italic; } /* Comment.Multiline */
|
|
.chroma .cp { color: #6B4C7A !important; } /* Comment.Preproc */
|
|
.chroma .cpf { color: #8A6B78 !important; font-style: italic; } /* Comment.PreprocFile */
|
|
.chroma .c1 { color: #8A6B78 !important; font-style: italic; } /* Comment.Single */
|
|
.chroma .cs { color: #8A6B78 !important; font-style: italic; font-weight: bold; } /* Comment.Special */
|
|
|
|
/* Generic */
|
|
.chroma .gd { color: #8B3A3A !important; background-color: rgba(255, 200, 200, 0.3); } /* Generic.Deleted */
|
|
.chroma .ge { font-style: italic; } /* Generic.Emph */
|
|
.chroma .gr { color: #8B3A3A !important; } /* Generic.Error */
|
|
.chroma .gh { color: #44275A !important; font-weight: bold; } /* Generic.Heading */
|
|
.chroma .gi { color: #5D7A5C !important; background-color: rgba(200, 255, 200, 0.3); } /* Generic.Inserted */
|
|
.chroma .go { color: #8A6B78 !important; } /* Generic.Output */
|
|
.chroma .gp { color: #A8577E !important; font-weight: bold; } /* Generic.Prompt */
|
|
.chroma .gs { font-weight: bold; } /* Generic.Strong */
|
|
.chroma .gu { color: #6B4C7A !important; font-weight: bold; } /* Generic.Subheading */
|
|
.chroma .gt { color: #8B3A3A !important; } /* Generic.Traceback */
|
|
.chroma .gl { text-decoration: underline; } /* Generic.Underline */
|
|
|
|
/* Also style highlight.js classes in case Gitea uses those */
|
|
.hljs { background: rgba(252, 248, 251, 0.95) !important; }
|
|
.hljs-keyword, .hljs-selector-tag, .hljs-literal { color: #44275A !important; font-weight: bold; }
|
|
.hljs-string, .hljs-doctag { color: #5D7A5C !important; }
|
|
.hljs-number, .hljs-literal { color: #4C5B8B !important; }
|
|
.hljs-comment { color: #8A6B78 !important; font-style: italic; }
|
|
.hljs-function, .hljs-title { color: #A8577E !important; }
|
|
.hljs-class, .hljs-type { color: #8B4567 !important; font-weight: bold; }
|
|
.hljs-variable, .hljs-attr { color: #6B4C7A !important; }
|
|
.hljs-built_in, .hljs-builtin-name { color: #A8577E !important; }
|
|
|
|
/* Gitea's code-lines styling */
|
|
.code-line {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Make sure span elements INSIDE code views inherit color from parent */
|
|
.code-view span,
|
|
.file-view span,
|
|
.lines-code span,
|
|
.chroma span,
|
|
.hljs span {
|
|
color: inherit;
|
|
}
|
|
|
|
/* Tables */
|
|
.ui.table {
|
|
border: 1px solid var(--witch-mauve) !important;
|
|
}
|
|
|
|
.ui.table thead th {
|
|
background: linear-gradient(to right,
|
|
var(--witch-lavender) 0%,
|
|
rgba(232, 213, 232, 0.7) 100%) !important;
|
|
color: var(--witch-purple) !important;
|
|
font-family: "Griffy", cursive !important;
|
|
font-weight: 400;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.ui.table tbody tr:hover {
|
|
background: rgba(212, 165, 199, 0.1) !important;
|
|
}
|
|
|
|
/* Scrollbars */
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--witch-lavender);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(to bottom,
|
|
var(--witch-rose) 0%,
|
|
var(--witch-plum) 100%);
|
|
border-radius: 6px;
|
|
border: 2px solid var(--witch-lavender);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--witch-purple);
|
|
}
|
|
|
|
/* Selection */
|
|
::selection {
|
|
background: var(--witch-rose) !important;
|
|
color: var(--witch-moon) !important;
|
|
}
|
|
|
|
/* Footer - FIXED at bottom */
|
|
footer, .page-footer {
|
|
position: fixed !important;
|
|
bottom: 0 !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
z-index: 1000 !important;
|
|
height: 75px !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: space-between !important;
|
|
padding: 0 20px !important;
|
|
background: linear-gradient(135deg, var(--witch-purple) 0%, var(--witch-plum) 100%) !important;
|
|
color: var(--witch-moon) !important;
|
|
border-top: 2px solid var(--witch-mauve) !important;
|
|
box-shadow: 0 -5px 20px rgba(168, 87, 126, 0.3) !important;
|
|
}
|
|
|
|
footer *, .page-footer * {
|
|
color: var(--witch-moon) !important;
|
|
}
|
|
|
|
|
|
footer a, .page-footer a {
|
|
color: var(--witch-mauve) !important;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
footer a:hover, .page-footer a:hover {
|
|
color: white !important;
|
|
text-shadow: 0 0 10px rgba(212, 165, 199, 0.5);
|
|
}
|
|
|
|
/* Footer links container */
|
|
footer .ui.container, .page-footer .ui.container {
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: space-between !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
/* Fun animations */
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
|
|
.repository .icon {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
/* Special hover effects */
|
|
.ui.menu .item::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 2px;
|
|
background: var(--witch-rose);
|
|
transition: all 0.3s ease;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.ui.menu .item:hover::after {
|
|
width: 80%;
|
|
}
|
|
|
|
/* Modal overlays */
|
|
.ui.modal {
|
|
background: rgba(255, 255, 255, 0.98) !important;
|
|
border: 2px solid var(--witch-mauve) !important;
|
|
box-shadow: 0 0 60px rgba(168, 87, 126, 0.4),
|
|
0 20px 40px rgba(68, 39, 90, 0.3) !important;
|
|
}
|
|
|
|
.ui.dimmer {
|
|
background: rgba(10, 0, 9, 0.8) !important;
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
/* Sidebar/Vertical Menu - already styled above, just active state */
|
|
.ui.vertical.menu .active.item {
|
|
background: var(--witch-lavender) !important;
|
|
color: var(--witch-plum) !important;
|
|
border-left: 3px solid var(--witch-rose) !important;
|
|
}
|
|
|
|
/* Dropdown menus - INCLUDING navbar dropdowns */
|
|
.ui.dropdown .menu,
|
|
#navbar .ui.dropdown .menu,
|
|
.ui.top.secondary.menu .ui.dropdown .menu {
|
|
background: rgba(255, 255, 255, 0.98) !important;
|
|
border: 1px solid var(--witch-mauve) !important;
|
|
box-shadow: 0 4px 20px rgba(168, 87, 126, 0.2) !important;
|
|
}
|
|
|
|
.ui.dropdown .menu .item,
|
|
#navbar .ui.dropdown .menu .item,
|
|
.ui.top.secondary.menu .ui.dropdown .menu .item {
|
|
color: var(--witch-purple) !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.ui.dropdown .menu .item:hover,
|
|
#navbar .ui.dropdown .menu .item:hover,
|
|
.ui.top.secondary.menu .ui.dropdown .menu .item:hover {
|
|
background: var(--witch-lavender) !important;
|
|
color: var(--witch-plum) !important;
|
|
}
|
|
|
|
/* Dropdown menu text must be dark */
|
|
.ui.dropdown .menu .item *,
|
|
#navbar .ui.dropdown .menu .item * {
|
|
color: var(--witch-purple) !important;
|
|
}
|
|
|
|
.ui.dropdown .menu .item:hover *,
|
|
#navbar .ui.dropdown .menu .item:hover * {
|
|
color: var(--witch-plum) !important;
|
|
}
|
|
|
|
/* Message/alert boxes */
|
|
.ui.message {
|
|
background: rgba(255, 255, 255, 0.95) !important;
|
|
border: 1px solid var(--witch-mauve) !important;
|
|
color: var(--witch-purple) !important;
|
|
}
|
|
|
|
.ui.info.message {
|
|
background: rgba(232, 213, 232, 0.5) !important;
|
|
border-color: var(--witch-rose) !important;
|
|
}
|
|
|
|
.ui.warning.message {
|
|
background: rgba(255, 243, 205, 0.8) !important;
|
|
border-color: var(--color-warning) !important;
|
|
}
|
|
|
|
.ui.error.message, .ui.negative.message {
|
|
background: rgba(255, 230, 230, 0.8) !important;
|
|
border-color: var(--color-danger) !important;
|
|
}
|
|
|
|
.ui.success.message, .ui.positive.message {
|
|
background: rgba(230, 255, 230, 0.8) !important;
|
|
border-color: var(--color-success) !important;
|
|
}
|
|
|
|
/* List items */
|
|
.ui.list .item, .ui.list .item .content {
|
|
color: var(--witch-purple) !important;
|
|
}
|
|
|
|
/* Breadcrumbs */
|
|
.ui.breadcrumb {
|
|
color: var(--witch-plum) !important;
|
|
}
|
|
|
|
.ui.breadcrumb a {
|
|
color: var(--witch-rose) !important;
|
|
}
|
|
|
|
.ui.breadcrumb .divider {
|
|
color: var(--witch-mauve) !important;
|
|
}
|
|
|
|
/* Home page hero section */
|
|
.page-content.home .center,
|
|
.page-content.home .hero {
|
|
color: var(--witch-purple) !important;
|
|
}
|
|
|
|
.page-content.home .hero h1,
|
|
.page-content.home .hero h2 {
|
|
color: var(--witch-plum) !important;
|
|
}
|
|
|
|
.page-content.home .hero p,
|
|
.page-content.home .hero li {
|
|
color: var(--witch-purple) !important;
|
|
}
|
|
|
|
/* Ensure all home page text is visible */
|
|
.page-content.home p,
|
|
.page-content.home ul,
|
|
.page-content.home li,
|
|
.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;
|
|
}
|
|
|
|
/* Footer dropdown styling removed - no longer needed */ |