Template:ProjectCard/styles.css - Revision history

Anthony: Removed badges, refactored to Template:ProjectBadges/styles.css

2026-04-03T00:14:30Z

Removed badges, refactored to Template:ProjectBadges/styles.css

@@ Line 173: / Line 173: @@
      position: relative;
      z-index: 20; /* Sit above the card link */
+}

Anthony at 03:04, 2 April 2026

2026-04-02T03:04:38Z

← Older revision		Revision as of 03:04, 2 April 2026
Line 96:		Line 96:
	margin-left: auto;		margin-left: auto;
	position: relative;		position: relative;
	z-index: 20; /* ~~Keeps button clickable over title overlay~~ */		z-index: 30; /* Higher than the 10 of the card link */
	}		}

Line 129:		Line 129:
	height: 100%;		height: 100%;
	background-color: var(--color-surface-2);		background-color: var(--color-surface-2);
	border-bottom: 1px ~~dashed~~;		border-bottom: 1px solid;
	border-bottom-color: var(--border-color-base);		border-bottom-color: var(--border-color-base);
	}		}
Line 151:		Line 151:
	}		}

			/* This creates the full-card clickable area */
	.project-card-title a::after {		.project-card-title a::after {
	content: '';		content: '';
Line 171:		Line 172:
	margin-bottom: 7px;		margin-bottom: 7px;
	position: relative;		position: relative;
	z-index: 1;		z-index: 20; /* Sit above the card link */
	}		}

Line 209:		Line 210:
	color: var(--color-base--subtle);		color: var(--color-base--subtle);
	position: relative;		position: relative;
	z-index: 1;		z-index: 20;
	}		}

Line 220:		Line 221:
	margin-bottom: 3px;		margin-bottom: 3px;
	position: relative;		position: relative;
	z-index: 1;		z-index: 20;
	}		}

Line 232:		Line 233:
	margin-bottom: 6px;		margin-bottom: 6px;
	position: relative;		position: relative;
	z-index: 1;		z-index: 20;
	}		}

Line 256:		Line 257:
	color: var(--color-base--subtle);		color: var(--color-base--subtle);
	position: relative;		position: relative;
	z-index: 1;		z-index: 20; /* Ensures buttons/text in footer are clickable */
	}		}

Anthony at 02:59, 2 April 2026

2026-04-02T02:59:48Z

Show changes

Anthony at 08:58, 23 March 2026

2026-03-23T08:58:12Z

← Older revision		Revision as of 08:58, 23 March 2026
Line 35:		Line 35:
	.project-card-image {		.project-card-image {
	width: 100%;		width: 100%;
	height: ~~180px~~;		height: 300px;
	display: flex;		display: flex;
	align-items: center;		align-items: center;

Anthony at 01:10, 18 March 2026

2026-03-18T01:10:04Z

New page

/* Template:ProjectCard/styles.css */
.project-card-wrap {
display: inline-block;
vertical-align: top;
margin: 10px;
}

.project-card {
width: 300px;
background-color: var(--color-surface-1);
border: 1px solid;
border-top-color: var(--border-color-base);
border-right-color: var(--border-color-base);
border-bottom-color: var(--border-color-base);
border-left-color: var(--border-color-base);
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.07);
overflow: hidden;
box-sizing: border-box;
position: relative;
cursor: pointer;
text-align: left;
transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}

.project-card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
border-top-color: var(--wiki-primary);
border-right-color: var(--wiki-primary);
border-bottom-color: var(--wiki-primary);
border-left-color: var(--wiki-primary);
transform: translateY(-2px);
}

.project-card-image {
width: 100%;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-surface-2);
overflow: hidden;
position: relative;
z-index: 0;
}

.project-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.project-card-image-fallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: var(--color-surface-2);
border-bottom: 1px dashed;
border-bottom-color: var(--border-color-base);
}

.project-card-body {
padding: 12px 14px 14px;
}

.project-card-title {
font-weight: bold;
font-size: 1em;
line-height: 1.3;
margin-bottom: 7px;
display: block;
}

.project-card-title a {
color: var(--color-base);
text-decoration: none;
display: block;
}

.project-card-title a::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}

.project-card:hover .project-card-title a {
color: var(--wiki-primary);
}

.project-card-badges {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 7px;
position: relative;
z-index: 1;
}

.project-badge-status {
display: inline-block;
font-size: 0.72em;
font-weight: bold;
padding: 2px 8px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.03em;
}

.project-badge-status--active { background-color: rgba(40, 167, 69, 0.15); color: #28a745; }
.project-badge-status--hiatus { background-color: rgba(255, 193, 7, 0.20); color: #b8860b; }
.project-badge-status--completed { background-color: var(--wiki-primary-subtle); color: var(--wiki-primary); }
.project-badge-status--abandoned { background-color: rgba(108, 117, 125, 0.15); color: #6c757d; }

.project-badge-license {
display: inline-block;
font-size: 0.72em;
font-weight: bold;
padding: 2px 8px;
border-radius: 3px;
background-color: var(--color-surface-2);
border: 1px solid;
border-top-color: var(--border-color-base);
border-right-color: var(--border-color-base);
border-bottom-color: var(--border-color-base);
border-left-color: var(--border-color-base);
color: var(--color-base--subtle);
}

.project-card-creator,
.project-card-label {
font-size: 0.82em;
color: var(--color-base--subtle);
position: relative;
z-index: 1;
}

.project-card-creator { margin-bottom: 6px; }

.project-card-extra {
font-size: 0.8em;
color: var(--color-base--subtle);
line-height: 1.4;
margin-bottom: 3px;
position: relative;
z-index: 1;
}

.project-card-extra strong { color: var(--color-base); }

.project-card-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 8px;
margin-bottom: 6px;
position: relative;
z-index: 1;
}

.project-card-tag {
display: inline-block;
background-color: var(--wiki-primary-subtle);
color: var(--wiki-primary);
font-size: 0.72em;
font-weight: bold;
padding: 2px 7px;
border-radius: 3px;
white-space: nowrap;
}

.project-card-footer {
display: flex;
gap: 10px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid;
border-top-color: var(--border-color-base);
font-size: 0.75em;
color: var(--color-base--subtle);
position: relative;
z-index: 1;
}

.project-card-meta-item::before { content: '⏳'; font-size: 0.85em; margin-right: 3px; opacity: 0.5; }
.project-card-contributors.loaded::before { content: '👤'; }
.project-card-updated.loaded::before { content: '🕐'; }

.project-card-description {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--wiki-primary-overlay);
color: #fff;
font-size: 0.88em;
line-height: 1.6;
padding: 20px 16px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 4px;
opacity: 0;
z-index: 6;
transition: opacity 0.2s ease;
}

.project-card:hover .project-card-description {
opacity: 1;
}

.project-hub-filters {
background-color: var(--color-surface-2);
border: 1px solid;
border-top-color: var(--border-color-base);
border-right-color: var(--border-color-base);
border-bottom-color: var(--border-color-base);
border-left-color: var(--border-color-base);
border-radius: 4px;
padding: 12px 16px;
margin-bottom: 16px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}

.project-hub-search,
.project-hub-select {
padding: 6px 10px;
border: 1px solid;
border-top-color: var(--border-color-base);
border-right-color: var(--border-color-base);
border-bottom-color: var(--border-color-base);
border-left-color: var(--border-color-base);
border-radius: 3px;
font-size: 0.88em;
color: var(--color-base);
background-color: var(--color-surface-1);
outline: none;
transition: border-color 0.15s;
}

.project-hub-search {
flex: 1;
min-width: 200px;
font-size: 0.9em;
}

.project-hub-select { cursor: pointer; }

.project-hub-search:focus,
.project-hub-select:focus {
border-top-color: var(--wiki-primary);
border-right-color: var(--wiki-primary);
border-bottom-color: var(--wiki-primary);
border-left-color: var(--wiki-primary);
}

.project-hub-count {
font-size: 0.82em;
color: var(--color-base--subtle);
margin-left: auto;
white-space: nowrap;
}

.project-hub-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 0;
}

.project-hub-grid .project-card-wrap { font-size: 1rem; }

.project-hub-empty {
display: none;
width: 100%;
text-align: center;
padding: 40px 20px;
color: var(--color-base--subtle);
font-size: 0.95em;
}