https://unfinishedprojects.net/index.php?action=history&feed=atom&title=Template%3AGuideStep%2Fstyles.css 2026-04-06T00:51:34Z Revision history for this page on the wiki MediaWiki 1.45.3 https://unfinishedprojects.net/index.php?title=Template:GuideStep/styles.css&diff=926&oldid=prev 2026-03-16T08:44:00Z

<p></p> <p><b>New page</b></p><div>/* Guide Step — inline step-by-step block for Quick Start and Tutorial pages */<br /> /* NOTE: Do NOT add .mw-parser-output prefix — TemplateStyles adds it automatically */<br /> <br /> .guide-step {<br /> margin: 0 0 16px 0;<br /> border-width: 1px;<br /> border-style: solid;<br /> border-top-color: var(--border-color-base);<br /> border-right-color: var(--border-color-base);<br /> border-bottom-color: var(--border-color-base);<br /> border-left-color: var(--border-color-base);<br /> border-radius: 4px;<br /> overflow: hidden;<br /> background: var(--color-surface-1);<br /> }<br /> <br /> .guide-step-header {<br /> display: flex;<br /> align-items: center;<br /> gap: 12px;<br /> padding: 12px 16px;<br /> background: var(--color-surface-2);<br /> border-bottom-width: 1px;<br /> border-bottom-style: solid;<br /> border-bottom-color: var(--border-color-base);<br /> }<br /> <br /> .guide-step-number {<br /> display: inline-flex;<br /> align-items: center;<br /> justify-content: center;<br /> width: 28px;<br /> height: 28px;<br /> background: var(--wiki-primary);<br /> color: #fff;<br /> font-size: 0.82em;<br /> font-weight: 900;<br /> border-radius: 50%;<br /> flex-shrink: 0;<br /> line-height: 1;<br /> }<br /> <br /> .guide-step-title {<br /> font-weight: 700;<br /> font-size: 0.95em;<br /> color: var(--color-base);<br /> flex: 1;<br /> }<br /> <br /> .guide-step-badge {<br /> font-size: 0.72em;<br /> font-weight: 700;<br /> padding: 2px 8px;<br /> border-radius: 3px;<br /> background: var(--wiki-primary-subtle);<br /> color: var(--wiki-primary);<br /> text-transform: uppercase;<br /> letter-spacing: 0.04em;<br /> flex-shrink: 0;<br /> }<br /> <br /> .guide-step-body {<br /> padding: 16px;<br /> display: flex;<br /> flex-direction: column;<br /> gap: 12px;<br /> }<br /> <br /> .guide-step-text {<br /> font-size: 0.95em;<br /> line-height: 1.65;<br /> color: var(--color-base);<br /> }<br /> <br /> .guide-step-note {<br /> padding: 10px 14px;<br /> background: rgba(228, 100, 25, 0.08);<br /> border-left-width: 3px;<br /> border-left-style: solid;<br /> border-left-color: var(--wiki-primary);<br /> border-radius: 0 3px 3px 0;<br /> font-size: 0.88em;<br /> color: var(--color-base);<br /> line-height: 1.5;<br /> }<br /> <br /> .guide-step-warning {<br /> padding: 10px 14px;<br /> background: rgba(220, 53, 69, 0.08);<br /> border-left-width: 3px;<br /> border-left-style: solid;<br /> border-left-color: #dc3545;<br /> border-radius: 0 3px 3px 0;<br /> font-size: 0.88em;<br /> color: var(--color-base);<br /> line-height: 1.5;<br /> }<br /> <br /> .guide-step-screenshot {<br /> border-radius: 4px;<br /> overflow: hidden;<br /> border-width: 1px;<br /> border-style: solid;<br /> border-top-color: var(--border-color-base);<br /> border-right-color: var(--border-color-base);<br /> border-bottom-color: var(--border-color-base);<br /> border-left-color: var(--border-color-base);<br /> }<br /> <br /> .guide-step-screenshot img {<br /> display: block;<br /> width: 100%;<br /> height: auto;<br /> }<br /> <br /> .guide-step-screenshot--empty {<br /> background: var(--color-surface-2);<br /> border-width: 2px;<br /> border-style: dashed;<br /> border-top-color: var(--border-color-base);<br /> border-right-color: var(--border-color-base);<br /> border-bottom-color: var(--border-color-base);<br /> border-left-color: var(--border-color-base);<br /> }<br /> <br /> .guide-screenshot-placeholder {<br /> padding: 28px;<br /> text-align: center;<br /> font-size: 0.88em;<br /> color: var(--color-base--subtle);<br /> font-style: italic;<br /> }<br /> <br /> /* Guide tabs */<br /> <br /> .guide-tabs {<br /> margin-bottom: 24px;<br /> }<br /> <br /> .guide-tabs-nav {<br /> display: flex;<br /> gap: 0;<br /> border-bottom-width: 2px;<br /> border-bottom-style: solid;<br /> border-bottom-color: var(--border-color-base);<br /> margin-bottom: 20px;<br /> flex-wrap: wrap;<br /> }<br /> <br /> .guide-tab-nav-item {<br /> padding: 9px 18px;<br /> font-size: 0.85em;<br /> font-weight: 700;<br /> text-transform: uppercase;<br /> letter-spacing: 0.04em;<br /> color: var(--color-base--subtle);<br /> border-top-width: 0;<br /> border-right-width: 0;<br /> border-left-width: 0;<br /> border-bottom-width: 2px;<br /> border-bottom-style: solid;<br /> border-bottom-color: transparent;<br /> background: none;<br /> cursor: pointer;<br /> margin-bottom: -2px;<br /> transition: color 0.15s;<br /> white-space: nowrap;<br /> display: inline-block;<br /> user-select: none;<br /> }<br /> <br /> .guide-tab-nav-item:hover {<br /> color: var(--wiki-primary);<br /> }<br /> <br /> .guide-tab-nav-item.is-active {<br /> color: var(--wiki-primary);<br /> border-bottom-width: 2px;<br /> border-bottom-style: solid;<br /> border-bottom-color: var(--wiki-primary);<br /> }<br /> <br /> .guide-tab-panel {<br /> display: none;<br /> }<br /> <br /> .guide-tab-panel.is-active {<br /> display: block;<br /> }<br /> <br /> /* Progress indicators */<br /> <br /> .guide-progress {<br /> display: flex;<br /> gap: 6px;<br /> align-items: center;<br /> margin-bottom: 20px;<br /> flex-wrap: wrap;<br /> }<br /> <br /> .guide-progress-step {<br /> display: flex;<br /> align-items: center;<br /> gap: 6px;<br /> font-size: 0.78em;<br /> font-weight: 700;<br /> color: var(--color-base--subtle);<br /> text-transform: uppercase;<br /> letter-spacing: 0.03em;<br /> }<br /> <br /> .guide-progress-step.is-current {<br /> color: var(--wiki-primary);<br /> }<br /> <br /> .guide-progress-step.is-done {<br /> color: #28a745;<br /> }<br /> <br /> .guide-progress-dot {<br /> width: 8px;<br /> height: 8px;<br /> border-radius: 50%;<br /> background: var(--color-base--subtle);<br /> flex-shrink: 0;<br /> }<br /> <br /> .guide-progress-step.is-current .guide-progress-dot {<br /> background: var(--wiki-primary);<br /> }<br /> <br /> .guide-progress-step.is-done .guide-progress-dot {<br /> background: #28a745;<br /> }<br /> <br /> .guide-progress-sep {<br /> font-size: 0.7em;<br /> color: var(--color-base--subtle);<br /> }<br /> <br /> /* Next/prev navigation */<br /> <br /> .guide-nav {<br /> display: flex;<br /> justify-content: space-between;<br /> align-items: center;<br /> margin-top: 28px;<br /> padding-top: 20px;<br /> border-top-width: 1px;<br /> border-top-style: solid;<br /> border-top-color: var(--border-color-base);<br /> flex-wrap: wrap;<br /> gap: 10px;<br /> }<br /> <br /> .guide-nav-btn {<br /> display: inline-flex;<br /> align-items: center;<br /> gap: 6px;<br /> padding: 8px 18px;<br /> border-radius: 3px;<br /> font-size: 0.88em;<br /> font-weight: 700;<br /> text-decoration: none;<br /> cursor: pointer;<br /> user-select: none;<br /> }<br /> <br /> .guide-nav-btn--next {<br /> background: var(--wiki-primary);<br /> color: #fff !important;<br /> }<br /> <br /> .guide-nav-btn--next:hover {<br /> opacity: 0.85;<br /> }<br /> <br /> .guide-nav-btn--prev {<br /> background: var(--color-surface-2);<br /> color: var(--color-base) !important;<br /> border-width: 1px;<br /> border-style: solid;<br /> border-top-color: var(--border-color-base);<br /> border-right-color: var(--border-color-base);<br /> border-bottom-color: var(--border-color-base);<br /> border-left-color: var(--border-color-base);<br /> }<br /> <br /> .guide-nav-btn--prev:hover {<br /> border-top-color: var(--wiki-primary);<br /> border-right-color: var(--wiki-primary);<br /> border-bottom-color: var(--wiki-primary);<br /> border-left-color: var(--wiki-primary);<br /> color: var(--wiki-primary) !important;<br /> }<br /> <br /> .guide-nav-center {<br /> font-size: 0.82em;<br /> color: var(--color-base--subtle);<br /> }<br /> <br /> /* Layout variants */<br /> <br /> .guide-step-body {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 12px;<br /> }<br /> <br /> .guide-step-content {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 12px;<br /> flex: 1;<br /> }<br /> <br /> /* Default: below (column, screenshot after content) */<br /> .guide-step--img-below .guide-step-body {<br /> flex-direction: column;<br /> }<br /> <br /> /* Above: screenshot before content */<br /> .guide-step--img-above .guide-step-body {<br /> flex-direction: column-reverse;<br /> }<br /> <br /> /* Left: screenshot to the left of content */<br /> .guide-step--img-left .guide-step-body {<br /> flex-direction: row;<br /> align-items: flex-start;<br /> }<br /> <br /> .guide-step--img-left .guide-step-screenshot {<br /> width: 40%;<br /> flex-shrink: 0;<br /> order: -1;<br /> }<br /> <br /> .guide-step--img-left .guide-step-content {<br /> flex: 1;<br /> }<br /> <br /> /* Right: screenshot to the right of content */<br /> .guide-step--img-right .guide-step-body {<br /> flex-direction: row;<br /> align-items: flex-start;<br /> }<br /> <br /> .guide-step--img-right .guide-step-screenshot {<br /> width: 40%;<br /> flex-shrink: 0;<br /> order: 1;<br /> }<br /> <br /> .guide-step--img-right .guide-step-content {<br /> flex: 1;<br /> }<br /> <br /> /* Mobile: left/right collapse to column */<br /> @media ( max-width: 720px ) {<br /> .guide-step--img-left .guide-step-body,<br /> .guide-step--img-right .guide-step-body {<br /> flex-direction: column;<br /> }<br /> <br /> .guide-step--img-left .guide-step-screenshot,<br /> .guide-step--img-right .guide-step-screenshot {<br /> width: 100%;<br /> order: 0;<br /> }<br /> }</div>

Anthony