Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* Getting code out of pages */
/* Currently Desktop only */
/* Some temporary - Merged/simplifed through time*/
[class*="-grid"]{
display:grid;
justify-items:end;
grid-gap:0 0.2em;
}
.mat-grid {
grid-template-columns:repeat(auto-fill, minmax(5em, 1fr));
}
.pillar-xp-grid {
grid-template-columns:repeat(4, minmax(7em, 1fr));
}
.rare-grid {
grid-template-columns:repeat(2, minmax(max-content, 1fr));
}
/* Styles [TESTS] */
/* 'Commons' ------> 'Fdesktop' Global if/when Fandom... */
/* ....simplify css files structure */
.theme-fandomdesktop-dark {
--emb-background:#2d3238;
--emb-background-hover:rgba(100, 100, 255, 0.3);
--emb-box-shadow:#0d0f12;
--emb-box-shadow-insert:#07080a;
--emb-border:#2f3070;
}
.theme-fandomdesktop-light {
--emb-background:none;
--emb-background-hover:rgba(0, 100, 100, 0.2);
--emb-box-shadow:DimGray;
--emb-box-shadow-insert:SlateGray;
--emb-border:#2f3070;
}
/* -------------------------------------------*/
[class*="-emb-button"] {
background:var(--emb-background);
cursor:pointer;
font-weight:bold;
border:0.05em solid var(--emb-border);
border-radius:2em;
box-shadow:-0.2em -0.2em 0.8em 0.1em var(--emb-box-shadow-insert) inset, 0.3em 0.3em 0.5em var(--emb-box-shadow);
position:relative;
margin-bottom:0.6em;
transition: all 300ms ease;
margin-left:0.5em;
}
[class*="-emb-button"]:hover {
transform: scaleX(1.05);
background-color:var(--emb-background-hover);
}
[class*="-emb-button"]:hover img {
filter: brightness(1.3);
}
.event-emb-button {
width:10.5em;
height:3em;
}
/* -------------------------------------------*/
/* Duplication can be condensed later */
.event-list {
background:var(--emb-background);
border:0.05em solid var(--emb-border);
border-radius:1em;
padding:0.5em 0 0.5em 1em;
box-shadow:-0.2em -0.2em 0.8em 0.1em var(--emb-box-shadow-insert) inset, 0.2em 0.2em 0.3em var(--emb-box-shadow);
}
.event-filter {
display:grid;
grid-column-gap:0.4em;
grid-auto-rows:1fr;
grid-template-columns:2fr max-content 2.2fr 1.2fr;
background:var(--emb-background);
border:0.05em solid var(--emb-border);
white-space:nowrap;
border-radius:1em;
box-shadow:-0.2em -0.2em 0.5em 0.1em var(--emb-box-shadow-insert) inset, 0.2em 0.2em 0.3em var(--emb-box-shadow);
padding:0.7em;
width:18.5em;
font-weight:bold;
margin-bottom:1em;
}
/* -------------------------------------------*/
.event-banner {
max-width:60rem;
min-width:45rem;
display:flex;
flex-wrap:nowrap;
align-items:center;
background:var(--emb-background);
overflow:hidden;
border-radius:1.2rem;
border:0.05em solid var(--emb-border);
box-shadow:0 0 1.3rem 0.1rem var(--emb-box-shadow-insert) inset, 0.4rem 0.4rem 0.5rem var(--emb-box-shadow);
margin-bottom:1rem;
}
/*
.event-banner-image
{
flex-basis:250px;
flex-grow:0;
flex-shrink:0;
}
*/
.event-banner-image img
{
width:100%;
height:100%;
object-fit:cover;
}
.event-banner img
{
flex:1 32%;
min-width:11.8rem;
align-self:center;
}
.event-banner-text
{
box-sizing:border-box;
padding:0.5rem 1rem 0.5rem 1rem;
flex:1 68%;
}
/* -------------------------------------------*/
/* Basic Effect Classes (combine to build your own effect) */
.shiny:hover{
filter: brightness(1.3);
}
.grow{
transition:all 200ms ease;
position:relative;
}
.grow:hover{
transform:scale(1.1);
z-index:1;
}
.bw{
filter:grayscale(100%);
transition:all 500ms ease-in;
}
.bw:hover{
filter:grayscale(0%);
}