Template:LinkIcon/styles.css

Template page
Revision as of 22:29, 25 February 2024 by Mausterio (talk | contribs) (Created page with ".profile-iconbox { position: relative; background: var( --color-surface-1 ); border-radius: 8px; box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 ); font-size: 0.875rem; overflow: hidden; width: fit-content; display: inline-block; margin: 0.312rem; min-width: 225px; } .profile-iconbox .profile-iconbox__img a { display: block; height: 100%; } .profile-iconbox .profile-iconbox__img:after { position: absolute; pointer-e...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
.profile-iconbox {
	position: relative;
	background: var( --color-surface-1 );
	border-radius: 8px;
	box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 );
	font-size: 0.875rem;
	overflow: hidden;
    width: fit-content;
    display: inline-block;
    margin: 0.312rem;
    min-width: 225px;
}
.profile-iconbox .profile-iconbox__img a {
	display: block;
	height: 100%;
}

.profile-iconbox .profile-iconbox__img:after {
	position: absolute;
	pointer-events: none;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	height: 60%;
	background: linear-gradient( to top, #000, transparent );
	border-radius: 0 0 8px 8px;
	content: '';
}

.profile-iconbox__img img {
  transition: transform 250ms cubic-bezier(0.215,0.61,0.355,1);
}

.profile-iconbox__img img:hover {
  transform: scale(1.1);
  transition: transform 250ms cubic-bezier(0.215,0.61,0.355,1);
}

.profile-iconbox__foreground {
	position: absolute;
}

.profile-iconbox__foreground .profile-iconbox__label {
	color: #bababa;
}

.profile-iconbox__foreground .profile-iconbox__header {
	color: #fff;
}
.profile-iconbox .profile-iconbox__foreground {
	pointer-events: none;
	right: 15px;
	bottom: 15px;
	left: 15px;
}
.home-card__foreground .profile-iconbox__label {
	color: #bababa;
}
.profile-iconbox__label {
	color: var( --color-base--subtle );
	font-size: 0.8125rem;
	letter-spacing: 0.75px;
}
h3.profile-iconbox__header {
	margin-top: 0;
	font-size: 1rem;
}

.profile-iconbox__header a {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.profile-iconbox__header a:after {
	content: '▶';
	font-size: 0.8125rem;
}