/* Custom styles for Git Log Visualizer */
:root {
--text-color: #ffffff;
--icon-color: #acacbe;
--icon-hover-bg: #5b5e71;
--placeholder-color: #dcdcdc;
--outgoing-chat-bg: #343541;
--incoming-chat-bg: #444654;
--outgoing-chat-border: #343541;
--incoming-chat-border: #444654;
}
.light-mode {
--text-color: #343641;
--icon-color: #a9a9bc;
--icon-hover-bg: #fafaf3;
--placeholder-color: #6c6c6c;
--outgoing-chat-bg: #ffffff;
--incoming-chat-bg: #f7f7f8;
--outgoing-chat-border: #ffffff;
--incoming-chat-border: #d9d9e3;
}
body {
background-color: var(--outgoing-chat-bg);
}
#visualization {
background-color: var(--incoming-chat-bg);
}
/* SVG Styles */
.node {
cursor: pointer;
}
.node circle {
stroke-width: 2px;
}
.node text {
font-family: sans-serif;
font-size: 4px;
font-weight: bold;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
.branch-label {
font-family: sans-serif;
font-size: 10px;
font-weight: bold;
pointer-events: none;
}
/* Tooltip */
.tooltip {
position: absolute;
padding: 8px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 4px;
pointer-events: none;
font-size: 12px;
max-width: 300px;
z-index: 10;
}
/* Commit details */
.commit-details {
font-family: monospace;
font-size: 12px;
line-height: 1.5;
}
.commit-details .hash {
color: #f59e0b;
font-weight: bold;
}
.commit-details .author {
color: #3b82f6;
}
.commit-details .date {
color: #6b7280;
}
.commit-details .message {
color: #1f2937;
font-weight: bold;
}
.commit-details .refs {
color: #10b981;
}
.commit-details .parents {
color: #7c3aed;
}
/* Syntax highlighting for git log textarea */
#gitLogInput .hash {
color: #f59e0b;
}
#gitLogInput .author {
color: #3b82f6;
}
/* Animation controls */
#playPauseBtn {
transition: all 0.2s ease;
}
#playPauseBtn:hover {
transform: scale(1.05);
}
#playPauseBtn.animating {
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}
50% {
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
}
100% {
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
main {
flex-direction: column;
}
main > div {
width: 100%;
}
.w-1\/2 {
width: 100%;
}
}
