benji/gantt
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

💄 fix the background colors

Browse source
This commit is contained in:
Markus Benjamin Tabler 2026-06-26 22:01:22 +02:00
parent 12a13f171f
commit 69893958ca
4 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projektvisualisierung.bybenji.de</title> <title>gantt.bybenji.de</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

10
src/components/gantt.vue
View file

@ -325,7 +325,7 @@ const isDecember = (date) => date.getMonth() === 11;
<style scoped> <style scoped>
/* Behalte deine bisherigen Styles bei und füge diese Erweiterungen hinzu: */ /* Behalte deine bisherigen Styles bei und füge diese Erweiterungen hinzu: */
.app-wrapper { font-family: 'Inter', system-ui, sans-serif; background-color: #fbe7ee; min-height: 100vh; padding: 40px 20px; } .app-wrapper { font-family: 'Inter', system-ui, sans-serif; background-color: #ffffff; min-height: 100vh; padding: 40px 20px; }
.main-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; max-width: 1400px; margin-left: auto; margin-right: auto; } .main-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; max-width: 1400px; margin-left: auto; margin-right: auto; }
.logo-area { display: flex; align-items: center; gap: 25px; } .logo-area { display: flex; align-items: center; gap: 25px; }
.logo-area h1 { font-size: 1.8rem; color: #0f2d59; font-weight: 800; margin: 0; } .logo-area h1 { font-size: 1.8rem; color: #0f2d59; font-weight: 800; margin: 0; }
@ -335,14 +335,14 @@ const isDecember = (date) => date.getMonth() === 11;
.btn { padding: 10px 20px; margin-left: 12px; border: 2px solid #222; border-radius: 10px; background: white; font-weight: 700; cursor: pointer; } .btn { padding: 10px 20px; margin-left: 12px; border: 2px solid #222; border-radius: 10px; background: white; font-weight: 700; cursor: pointer; }
.btn-primary { background: #0f2d59; color: white; border: none; } .btn-primary { background: #0f2d59; color: white; border: none; }
.btn-io { background: #e3f2fd; color: #0f2d59; } .btn-io { background: #e3f2fd; color: #0f2d59; }
.divider-space { margin: 0 15px; font-weight: bold; color: #be9ba2; } .divider-space { margin: 0 15px; font-weight: bold; color: #ffffff; }
.timeline-card { background: #f2c9cf; border: 2px solid #333; border-radius: 16px; overflow: hidden; max-width: 1400px; margin: 0 auto; } .timeline-card { background: #ffffff; border: 2px solid #333; border-radius: 16px; overflow: hidden; max-width: 1400px; margin: 0 auto; }
.timeline-header-row, .project-row { display: grid; grid-template-columns: 300px 1fr; } .timeline-header-row, .project-row { display: grid; grid-template-columns: 300px 1fr; }
.sidebar-label, .project-info { padding: 15px 20px; border-right: 2px solid #333; background: #f9f9f9; display: flex; align-items: center; } .sidebar-label, .project-info { padding: 15px 20px; border-right: 2px solid #333; background: #f9f9f9; display: flex; align-items: center; }
.sidebar-label.headline { font-weight: 700; font-size: 1.1rem; background: #f3f3f3; border-bottom: 2px solid #333; } .sidebar-label.headline { font-weight: 700; font-size: 1.1rem; background: #f3f3f3; border-bottom: 2px solid #333; }
.p-name { font-weight: 700; font-size: 1rem; color: #000; } .p-name { font-weight: 700; font-size: 1rem; color: #000; }
.topic-header { background: #e5cbd0; padding: 10px 20px; font-weight: 800; font-size: 0.9rem; color: #333; border-bottom: 2px solid #333; border-top: 2px solid #333; } .topic-header { background: #ffffff; padding: 10px 20px; font-weight: 800; font-size: 0.9rem; color: #333; border-bottom: 2px solid #333; border-top: 2px solid #333; }
.time-scale { display: flex; flex-direction: column; background: #e5cbd0; border-bottom: 2px solid #333;} .time-scale { display: flex; flex-direction: column; background: #ffffff; border-bottom: 2px solid #333;}
.years-grid { display: grid; border-bottom: 1px solid #333; text-align: center;} .years-grid { display: grid; border-bottom: 1px solid #333; text-align: center;}
.year-block { font-weight: 800; padding: 6px 0; font-size: 0.95rem; color: #0f2d59; border-right: 2px solid #333; } .year-block { font-weight: 800; padding: 6px 0; font-size: 0.95rem; color: #0f2d59; border-right: 2px solid #333; }
.year-block:last-child { border-right: none; } .year-block:last-child { border-right: none; }

2
src/components/manageProject.vue
View file

@ -180,7 +180,7 @@ const triggerSave = () => {
.modal-scroller { padding: 30px 30px 15px 30px; overflow-y: auto; flex: 1; } .modal-scroller { padding: 30px 30px 15px 30px; overflow-y: auto; flex: 1; }
.close-top-btn { position: absolute; top: 15px; right: 20px; border: none; background: none; cursor: pointer; font-size: 1.2rem; } .close-top-btn { position: absolute; top: 15px; right: 20px; border: none; background: none; cursor: pointer; font-size: 1.2rem; }
.modal-content { display: flex; flex-direction: column; gap: 40px; } .modal-content { display: flex; flex-direction: column; gap: 40px; }
.topic-group-wrapper { display: flex; flex-direction: column; gap: 15px; border-left: 4px solid #f2c9cf; padding-left: 20px; } .topic-group-wrapper { display: flex; flex-direction: column; gap: 15px; border-left: 4px solid #ffffff; padding-left: 20px; }
.topic-label { align-self: flex-start; background: #f3f3f3; border: 2px solid #222; border-radius: 12px; padding: 5px 20px; font-weight: 800; font-size: 0.85rem; } .topic-label { align-self: flex-start; background: #f3f3f3; border: 2px solid #222; border-radius: 12px; padding: 5px 20px; font-weight: 800; font-size: 0.85rem; }
.projects-in-topic { display: flex; flex-direction: column; gap: 20px; } .projects-in-topic { display: flex; flex-direction: column; gap: 20px; }
.project-config-card { border: 2px solid #222; border-radius: 16px; padding: 20px; background: #fff; } .project-config-card { border: 2px solid #222; border-radius: 16px; padding: 20px; background: #fff; }

4
vite.config.ts
View file

@ -12,8 +12,8 @@ export default defineConfig({
name: 'Project Roadmap Timeline', name: 'Project Roadmap Timeline',
short_name: 'Roadmap', short_name: 'Roadmap',
description: 'Offline-fähige interaktive Projekt-Roadmap', description: 'Offline-fähige interaktive Projekt-Roadmap',
theme_color: '#fbe7ee', theme_color: '#ffffff',
background_color: '#fbe7ee', background_color: '#ffffff',
display: 'standalone', display: 'standalone',
icons: [ icons: [
{ {