Content added Content deleted
mNo edit summary |
No edit summary |
||
(12 intermediate revisions by the same user not shown) | |||
Line 6: | Line 6: | ||
font-family: "Montserrat", sans-serif; |
font-family: "Montserrat", sans-serif; |
||
font-weight: 400; |
font-weight: 400; |
||
} |
|||
.citizen-page-header--sticky .citizen-page-header { |
|||
backdrop-filter: blur(4px); |
|||
} |
} |
||
Line 76: | Line 80: | ||
width: 100%; |
width: 100%; |
||
} |
} |
||
/*.shortBox .boxImg img {*/ |
|||
/* width: 100%;*/ |
|||
/* height: auto;*/ |
|||
/* object-fit:*/ |
|||
/*}*/ |
|||
.boxImg .mw-halign-center .mw-file-description { |
.boxImg .mw-halign-center .mw-file-description { |
||
Line 140: | Line 150: | ||
transition-timing-function: ease-in; |
transition-timing-function: ease-in; |
||
} |
} |
||
.gamemode { |
.gamemode { |
||
width: 100px; |
width: 100px; |
||
height: 100px; |
height: 100px; |
||
border-radius: 1rem; |
|||
background-color: red; |
|||
border-width: 1.5px; |
|||
border-color: var(--pi-border-color); |
|||
background-color: var(--pi-background); |
|||
border-style: solid; |
|||
float: left; |
|||
} |
} |
||
.gamemode img { |
|||
position: inherit; |
|||
height: 100%; |
|||
object-fit: contain; |
|||
} |
|||
.speedometer .speed { |
.speedometer .speed { |
||
Line 194: | Line 212: | ||
.wikitable tr:nth-child(odd) { |
.wikitable tr:nth-child(odd) { |
||
background-color: rgba(0, 0, 0, 0.06); |
background-color: rgba(0, 0, 0, 0.06); |
||
} |
|||
/* Home page header */ |
|||
.home-header { |
|||
position: relative; |
|||
padding-top: var( --space-xl ); |
|||
padding-bottom: var( --space-xl ); |
|||
line-height: var( --line-height-sm ); |
|||
text-align: center; |
|||
} |
|||
.home-header__pretitle { |
|||
margin-bottom: var( --space-xxs ); |
|||
color: var( --color-base--subtle ); |
|||
font-size: var( --font-size-small ); |
|||
letter-spacing: 0.05em; |
|||
} |
|||
.home-header__title { |
|||
margin: 0; |
|||
font-size: 3rem; |
|||
text-transform: uppercase; |
|||
letter-spacing: 0.025em; |
|||
line-height: 1; |
|||
} |
|||
.home-header__subtitle { |
|||
margin-top: var( --space-xxs ); |
|||
font-size: var( --font-size-small ); |
|||
} |
|||
.home-header__search { |
|||
padding: var( --space-md ); |
|||
margin-top: var( --space-lg ); |
|||
margin-bottom: var( --space-md ); |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
border: 1px solid; |
|||
border-color: var( --border-color-interactive ); |
|||
border-radius: var( --border-radius--pill ); |
|||
cursor: pointer; |
|||
font-size: var( --font-size-small ); |
|||
font-weight: var( --font-weight-medium ); |
|||
text-align: center; |
|||
} |
|||
.home-header__search .desktoponly { |
|||
margin-left: var( --space-xs ); |
|||
} |
|||
.home-header__search:hover { |
|||
background-color: var( --background-color-quiet--hover ); |
|||
} |
|||
.home-header__searchIcon img { |
|||
margin-right: var( --space-md ); |
|||
opacity: var( --opacity-icon-base ); |
|||
} |
|||
/* Fix vertical alignment problem */ |
|||
.home-header__search .keyboard-key { |
|||
display: inline; |
|||
padding-top: 0.1em; |
|||
padding-bottom: 0.1em; |
|||
} |
|||
html.skin-citizen-dark .home-header:before, |
|||
html.skin-citizen-dark .home-header__searchIcon img { |
|||
filter: invert( 1 ); |
|||
} |
|||
@media ( hover: none ) { |
|||
.home-header__search .desktoponly { |
|||
display: none; |
|||
} |
|||
} |
} |
Latest revision as of 06:00, 3 June 2024
/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
body {
font-family: "Montserrat", sans-serif;
font-weight: 400;
}
.citizen-page-header--sticky .citizen-page-header {
backdrop-filter: blur(4px);
}
.mw-body h1,
.mw-body-content h1,
.mw-body-content h2 {
font-family: "Montserrat", sans-serif;
font-weight: 600;
}
/**Custom Infobox**/
.portable-infobox {
/*width: 300px; */
border-radius: 1rem;
border-width: 1.5px;
/*border-color: #52555b;*/
border-color: var(--pi-border-color);
border-style: solid;
}
.pi-title {
text-align: center;
}
.pi-secondary-font {
text-align: center;
}
.gradient {
background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.598) 100%);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 7px;
opacity: 0.9;
pointer-events: none;
z-index: 2;
transition: .10s;
transition-timing-function: ease-out;
}
.shortBox:hover > .gradient {
height: 174%;
transition: .10s;
transition-timing-function: ease-in;
opacity: 1;
}
.shortBox {
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background-color: rgba(255, 255, 255, 0.209);
padding: .1rem;
width: 150px;
height: 112.5px;
display:inline-block;
border-radius: 8px;
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.294));
margin: -1px 0;
position: relative;
overflow:hidden;
}
.shortBox .boxImg {
border-radius: 7px;
width: 100%;
}
/*.shortBox .boxImg img {*/
/* width: 100%;*/
/* height: auto;*/
/* object-fit:*/
/*}*/
.boxImg .mw-halign-center .mw-file-description {
border-radius: 7px;
}
.boxImg figure a {
border-radius: 7.2px;
}
.shortBox .icon {
position:fixed;
top: 0;
right: 0;
background-color: rgba(0, 0, 0, 0);
width: 20px;
height: 20px;
margin: 2px 5px;
filter: drop-shadow(0px 0px .85px rgba(0, 0, 0, 0.633));
transition: .10s;
transition-timing-function: ease-out;
opacity: 1;
z-index: 100;
}
.shortBox:hover > .icon {
position:fixed;
top: 0;
right: 0;
background-color: rgba(0, 0, 0, 0);
margin: -20px 5px;
filter: drop-shadow(0px 0px .85px rgba(0, 0, 0, 0.633));
transition: .10s;
transition-timing-function: ease-in;
opacity: 0;
}
.shortBox .name {
position: fixed;
font-weight: 700;
font-size: 20px;
z-index: 99;
color: rgb(255, 255, 255);
filter: drop-shadow(0px 0px .85px rgb(0, 0, 0));
bottom: 0;
left: 0%;
margin: 0 2px 5px 6px;
line-height: 1.05rem;
overflow-wrap: break-word;
pointer-events: none;
/*-webkit-user-select: none;*/
/*-ms-user-select: none;*/
/*user-select: none;*/
transition: .10s;
transition-timing-function: ease-out;
}
.shortBox:hover > .name {
color: rgba(255, 255, 255, 0);
bottom: 0;
left: 0%;
margin: 0 2px -20px 6px;
transition: .10s;
transition-timing-function: ease-in;
}
.gamemode {
width: 100px;
height: 100px;
border-radius: 1rem;
border-width: 1.5px;
border-color: var(--pi-border-color);
background-color: var(--pi-background);
border-style: solid;
float: left;
}
.gamemode img {
position: inherit;
height: 100%;
object-fit: contain;
}
.speedometer .speed {
position: absolute;
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 200px;
z-index: 1;
color: rgb(255, 255, 255);
filter: drop-shadow(0px 0px .85px rgba(0, 0, 0, 0.331));
bottom: 3.5px;
left: 31px;
line-height: 1.05rem;
margin: 0 auto;
background: linear-gradient(180deg, #E6C058 0%, #E69817 100%);
background-clip: border-box;
}
.speedometer {
background-color: rgba(0, 0, 0, 0.531);
width: 76px;
height: 24px;
display: inline-block;
border-radius: 3px;
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.294));
position: relative;
}
.speedometerIcon {
position:fixed;
top: 0;
left: 0;
background-image: url(https://static.miraheze.org/evadewiki/f/f7/Speedometer.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-color: rgba(0, 0, 0, 0.531);
width: 24px;
height: 100%;
display: block;
margin-left: auto;
border-radius: 3px 0 0 3px;
}
.wikitable tr:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.06);
}
/* Home page header */
.home-header {
position: relative;
padding-top: var( --space-xl );
padding-bottom: var( --space-xl );
line-height: var( --line-height-sm );
text-align: center;
}
.home-header__pretitle {
margin-bottom: var( --space-xxs );
color: var( --color-base--subtle );
font-size: var( --font-size-small );
letter-spacing: 0.05em;
}
.home-header__title {
margin: 0;
font-size: 3rem;
text-transform: uppercase;
letter-spacing: 0.025em;
line-height: 1;
}
.home-header__subtitle {
margin-top: var( --space-xxs );
font-size: var( --font-size-small );
}
.home-header__search {
padding: var( --space-md );
margin-top: var( --space-lg );
margin-bottom: var( --space-md );
margin-left: auto;
margin-right: auto;
border: 1px solid;
border-color: var( --border-color-interactive );
border-radius: var( --border-radius--pill );
cursor: pointer;
font-size: var( --font-size-small );
font-weight: var( --font-weight-medium );
text-align: center;
}
.home-header__search .desktoponly {
margin-left: var( --space-xs );
}
.home-header__search:hover {
background-color: var( --background-color-quiet--hover );
}
.home-header__searchIcon img {
margin-right: var( --space-md );
opacity: var( --opacity-icon-base );
}
/* Fix vertical alignment problem */
.home-header__search .keyboard-key {
display: inline;
padding-top: 0.1em;
padding-bottom: 0.1em;
}
html.skin-citizen-dark .home-header:before,
html.skin-citizen-dark .home-header__searchIcon img {
filter: invert( 1 );
}
@media ( hover: none ) {
.home-header__search .desktoponly {
display: none;
}
}