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

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

Template page
More actions
No edit summary
Tag: Reverted
mNo edit summary
 
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
@media (max-width: 800px) {
.profile-iconbox {
  .homesizehide {
  display: none;
  }
}
 
@media (min-width: 800px) {
  .priority {
    display: none;
  }
}
.article {
  grid-area: article;
}
.widgets {
  grid-area: widgets;
}
.main-servernav {
  display: grid;
  grid-template-areas:
    "priority"
    "article"
    "widgets";
}
@media (min-width: 800px) {
  .main-servernav {
    grid-template-columns: 4.059fr 2fr;
    grid-gap: 0.625rem;
    grid-template-areas:
      "article widgets";
  }
}
 
.split-left {
  grid-area: split-left;
}
.split-right {
  grid-area: split-right;
}
.sub-servernav {
  display: grid;
  grid-gap: 0.625rem;
  grid-template-areas:
    "split-left"
    "split-right";
}
@media (min-width: 200px) {
  .sub-servernav {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "split-left split-right";
  }
}
 
 
/* Templates, from Citizen */
.servernav {
display: grid;
grid: auto-flow dense/repeat( auto-fit, minmax( 9.375rem, 1fr ) );
grid-auto-rows: minmax( 4.5rem, auto );
grid-gap: 0.625rem;
}
 
.servernav--col2 {
grid-template-columns: 1fr 1fr;
}
 
.servernav a.external {
background-image: none;
}
 
.home-card {
position: relative;
position: relative;
padding: 15px;
background: #242a31;
background: var( --color-surface-1 );
border-radius: 8px;
border-radius: 8px;
box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 );
box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 );
font-size: 0.875rem;
font-size: 0.875rem;
     margin-bottom: 0.625rem;
overflow: hidden;
    display: inline-block;
     min-width: 170px;
    width: 100%;
    height: 4rem;
}
.profile-iconbox .profile-iconbox__img a {
display: block;
height: 100%;
}
}


.home-card table.timeline {
.profile-iconbox .profile-iconbox__img:after {
margin-top: 0.2rem;
position: absolute;
pointer-events: none;
right: 0;
bottom: 0;
left: 0;
display: block;
    height: 100% !important;
    background: linear-gradient(to right,rgba(0,0,0,0.8),transparent) !important;
border-radius: 0 0 8px 8px;
content: '';
}
}


.home-card--col2 {
.profile-iconbox__img img {
grid-column: span 2;
  transition: transform 250ms cubic-bezier(0.215,0.61,0.355,1);
  height: 4rem;
  width: 100%;
  object-fit: cover;
}
}


.home-card--col4 {
.profile-iconbox__img img:hover {
grid-column: span 4;
  transform: scale(1.1);
  transition: transform 250ms cubic-bezier(0.215,0.61,0.355,1);
  height: 4rem;
  width: 100%;
}
}


.home-card--row3 {
.profile-iconbox__foreground {
grid-row: span 3;
position: absolute;
}
}


.home-card--row4 {
.profile-iconbox__foreground .profile-iconbox__label {
grid-row: span 4;
color: #bababa;
}
}


.home-card--row8 {
.profile-iconbox__foreground .profile-iconbox__header {
grid-row: span 8 / auto;
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 {
.home-card__label {
color: var( --color-base--subtle );
color: var( --color-base--subtle );
font-size: 0.8125rem;
font-size: 0.8125rem;
letter-spacing: 0.75px;
letter-spacing: 0.75px;
}
}
 
h3.profile-iconbox__header {
h3.home-card__header {
margin-top: 0;
margin-top: 0;
font-size: 1rem;
font-size: 1rem;
}
}


.home-card__header a {
.profile-iconbox__header a {
display: flex;
display: flex;
align-items: center;
align-items: center;
Line 121: Line 78:
}
}


.home-card__header a:after {
.profile-iconbox__header a:after {
content: '▶';
content: '▶';
font-size: 0.8125rem;
font-size: 0.8125rem;
}
.home-card__background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #242a31;
border-radius: 8px;
}
.home-card__background img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.home-card__foreground {
position: absolute;
}
.home-card__foreground .home-card__label {
color: #bababa;
}
.home-card__foreground .home-card__header {
color: #fff;
}
.home-card p {
margin-top: 0.2rem;
font-size: 0.875rem;
}
.home-card.home-card--button {
overflow: hidden;
padding: 0;
background: #242a31;
}
.home-card--button a {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
padding: 0 15px;
background: transparent;
color: #fff;
font-weight: 500;
}
.home-card--button .home-card__background a {
padding: 0;
}
.home-card--button img {
transition: transform 0.2s ease;
}
.home-card--button:hover img {
transform: scale(1.1);
}
.home-link {
display: grid;
margin-top: 6px;
font-size: 0.875rem;
font-weight: 500;
grid-gap: 6px;
text-align: center;
}
.home-link__button {
display: flex;
    text-align: center;
}
.home-link__button a {
flex-grow: 1;
padding: 0.3rem 0.6rem;
border: 1px solid;
border-color: var( --border-color-base );
background: var( --color-surface-2 );
border-radius: 12px;
color: var( --color-base--emphasized ) !important;
}
.home-link__button a:hover {
background: var( --color-surface-2--hover );
}
.home-link__button a:active {
background: var( --color-surface-2--active );
}
/*no radius top*/
.home-link__button-connecttop {
display: flex;
    text-align: center;
}
.home-link__button-connecttop a {
flex-grow: 1;
padding: 0.3rem 0.6rem;
border: 1px solid;
border-color: var( --border-color-base );
background: var( --color-surface-2 );
border-radius: 0 0 12px 12px;
color: var( --color-base--emphasized ) !important;
}
.home-link__button-connecttop a:hover {
background: var( --color-surface-2--hover );
}
.home-link__button-connecttop a:active {
background: var( --color-surface-2--active );
}
#home-content {
margin-top: 1.6rem;
}
.home-footer {
font-size: 0.8125rem;
font-family: monospace;
text-align: center;
}
.button-container__spacebetween {
  display: flex;
  align-items: end;
  justify-content: space-between;
}
.button-container__right {
  display: flex;
  align-items: center;
  justify-content: end;
}
.up-date {
background: var(--color-surface-3);
border-radius: 100px;
font-size: 0.7125rem;
font-weight: 500;
text-transform: uppercase;
padding: 0 5px;
white-space: nowrap;
}
@media (max-width: 620px) {
  #home-card-prevupdate .up-date {
    display: none;
  }
}
#home-featuredpoll.home-card div.home-server-address__container br {
  display: none;
}
/**/
#home-nav {
margin-top: 1rem;
}
#home-nav .home-card__background:after {
position: absolute;
    pointer-events: none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    background: linear-gradient(to right,rgba(0, 0, 0, 0.8),transparent);
    content: "";
}
#home-nav .home-card__foreground {
pointer-events: none;
height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 15px;
    color: #fff;
    font-weight: bold;
}
.mw-parser-output .servernav-servers {
  display: grid;
  grid: auto-flow dense/repeat(auto-fit,minmax(9.375rem,1fr));
    grid-auto-rows: auto;
  grid-auto-rows: auto;
  grid-auto-rows: minmax(4rem,auto) !important;
  grid-gap: 0.625rem;
}
}

Latest revision as of 05:38, 26 October 2023

.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;
	bottom: 0;
	left: 0;
	display: block;
    height: 100% !important;
    background: linear-gradient(to right,rgba(0,0,0,0.8),transparent) !important;
	border-radius: 0 0 8px 8px;
	content: '';
}

.profile-iconbox__img img {
  transition: transform 250ms cubic-bezier(0.215,0.61,0.355,1);
  height: 4rem;
  width: 100%;
  object-fit: cover;
}

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

.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;
	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;
}
Retrieved from "https://www.prismparty.net/index.php?title=Template:Home/NavigationServers/styles.css&oldid=3644"
Last modified
This page was last edited on 26 October 2023, at 05:38.