Toggle menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:Home/FeaturedAlert/styles.css: Difference between revisions

Template page
(Created page with ".profile-iconbox { position: relative; background: #242a31; 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; display: inline-block; min-width: 170px; width: 100%; height: 4rem; } .profile-iconbox .profile-iconbox__img a { display: block; height: 100%; } .profile-iconbox .profile-iconbox__img:after { position: absolute; pointer-events: none; right: 0; bot...")
 
m (fix)
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
.profile-iconbox {
.home-event .home-card {
position: relative;
height: 5rem;
background: #242a31;
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;
    display: inline-block;
    min-width: 170px;
    width: 100%;
    height: 4rem;
}
.profile-iconbox .profile-iconbox__img a {
display: block;
height: 100%;
}
}


.profile-iconbox .profile-iconbox__img:after {
.home-event .home-card__foreground {
position: absolute;
  position: absolute;
pointer-events: none;
  top: 0;
right: 0;
  bottom: 0;
bottom: 0;
  left: 0;
left: 0;
  right: 0;
display: block;
  padding: var(--space-md);
    height: 100%;
  display: flex;
    background: linear-gradient(to right,rgba(0,0,0,0.8),transparent);
  flex-direction: column;
border-radius: 0 0 8px 8px;
  justify-content: center;
content: '';
  gap: var(--space-xxs);
  color: #fff;
  line-height: var(--line-height-xs);
  pointer-events: none;
}
}
 
.home-card__header {
.profile-iconbox__img img {
   color: var(--color-base--emphasized);
   transition: transform 250ms cubic-bezier(0.215,0.61,0.355,1);
   font-size: 1rem;
   height: 4rem;
   font-weight: var(--font-weight-semibold);
   width: 100%;
   line-height: var(--line-height-xs);
   object-fit: cover;
}
}
 
.home-event .home-card__background::after {
.profile-iconbox__img img:hover {
  position: absolute;
  transform: scale(1.1);
  pointer-events: none;
  transition: transform 250ms cubic-bezier(0.215,0.61,0.355,1);
  top: 0;
  height: 4rem;
  bottom: 0;
  width: 100%;
  left: 0;
}
  right: 0;
 
  display: block;
.profile-iconbox__foreground {
  background: linear-gradient(to right,#000,transparent);
position: absolute;
  content: "";
}
 
.profile-iconbox__foreground .profile-iconbox__label {
color: #bababa;
}
 
.profile-iconbox__foreground .profile-iconbox__header {
color: #fff;
}
.profile-iconbox .profile-iconbox__foreground {
pointer-events: none;
bottom: 27%;
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;
}
}

Latest revision as of 22:32, 28 October 2023

.home-event .home-card {
	height: 5rem;
}

.home-event .home-card__foreground {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-xxs);
  color: #fff;
  line-height: var(--line-height-xs);
  pointer-events: none;
}
.home-card__header {
  color: var(--color-base--emphasized);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xs);
}
.home-event .home-card__background::after {
  position: absolute;
  pointer-events: none;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  background: linear-gradient(to right,#000,transparent);
  content: "";
}