87 lines
2.2 KiB
CSS
87 lines
2.2 KiB
CSS
/* 1. Reset the LI to ensure no Bootstrap frames/padding interfere */
|
|
li.tw-list-none {
|
|
border: none !important;
|
|
background: transparent !important;
|
|
padding-left: 0 !important; /* Forces alignment control to the Button */
|
|
margin-left: 1.5rem !important; /* This is the 'tw-ml-6' equivalent */
|
|
}
|
|
|
|
/* 2. The Precision Dot */
|
|
.timeline-button {
|
|
position: absolute;
|
|
|
|
/* MATH: The li has ml-6 (1.5rem).
|
|
To center a 0.75rem dot on the line at the edge of that margin:
|
|
We move it left by (1.5rem + half the dot width). */
|
|
left: -1.9rem !important;
|
|
top: 0.25rem;
|
|
|
|
width: 0.75rem;
|
|
height: 0.75rem;
|
|
border-radius: 9999px;
|
|
background: #d1d5db;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
/* This creates the 'gap' around the dot so it looks clean */
|
|
border: 2px solid white !important;
|
|
z-index: 10;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 3. Force the Line to be visible and solid */
|
|
ol.tw-border-l-2 {
|
|
border-left: 2px solid #d1d5db !important;
|
|
border-right: none !important;
|
|
border-top: none !important;
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
/* Ensure the dot stays put when screen shrinks */
|
|
.tw-relative {
|
|
position: relative !important;
|
|
}
|
|
/* hover only when expanded */
|
|
.timeline-button:hover:not(.collapsed) {
|
|
background: #6b7280;
|
|
}
|
|
|
|
/* collapsed state */
|
|
.timeline-button.collapsed {
|
|
background: transparent !important;
|
|
color: #6b7280;
|
|
}
|
|
|
|
/* 4. The Sizing & Expansion Fix */
|
|
li.tw-relative {
|
|
width: 100% !important; /* Forces the item to take up available space */
|
|
display: block !important;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Ensure the text content doesn't wrap too early */
|
|
#Tailscaleipdoesntwork p {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
line-height: 1.6 !important; /* Makes the 'small' text feel more readable */
|
|
}
|
|
|
|
/* Increase the 'hitbox' of the button if it feels too small to click */
|
|
.timeline-button {
|
|
transform: scale(
|
|
1.2
|
|
); /* Physically makes the dot 20% larger without breaking alignment */
|
|
box-shadow: 0 0 0 4px white; /* Cleaner 'gap' than a border */
|
|
}
|
|
|
|
/* 5. Handle Bootstrap's 'Small' Text */
|
|
.tw-text-sm {
|
|
font-size: 0.875rem !important;
|
|
}
|
|
.tw-text-base {
|
|
font-size: 1rem !important;
|
|
}
|