Diggy's Adventure Wiki
Register
Advertisement

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%);
}
Advertisement