MediaWiki:Timeless.css: Difference between revisions

From Research Realm
screen width issue
I'm sure this can be cleaned up more
Line 3: Line 3:
:root {
:root {
--brand-primary: #ffe10f;
--brand-primary: #ffe10f;
--brand-midgrey: #c8ccd1;


--brand-red-logo: #ed1c24;
--brand-red-logo: #ed1c24;
Line 14: Line 13:
--brand-ylw-rr: #f8f400;
--brand-ylw-rr: #f8f400;
--brand-teal-rr: #00a4a8;
--brand-teal-rr: #00a4a8;
--brand-silver-base: #c8ccd1; /* Timeless default */
--shadow-inset: 2px 2px 5px 0 rgb(0, 0, 0, 0.4), 1px -1px 5px 0 rgb(0, 0, 0, 0.2) inset;
--shadow-inset: 2px 2px 5px 0 rgb(0, 0, 0, 0.4), 1px -1px 5px 0 rgb(0, 0, 0, 0.2) inset;
--shadow-inset2: 0 3px 3px 2px rgba(0, 0, 0, 0.075), 0 0 2px rgba(0, 0, 0, 0.2), 1px -1px 5px 0 rgb(0, 0, 0, 0.2) inset;
--shadow-inset2: 0 3px 3px 2px rgba(0, 0, 0, 0.075), 0 0 2px rgba(0, 0, 0, 0.2), 1px -1px 5px 0 rgb(0, 0, 0, 0.2) inset;
--shadow-outset: 2px 2px 5px 0 rgb(0, 0, 0, 0.4);
--shadow-outset: 2px 2px 5px 0 rgb(0, 0, 0, 0.4);
--shadow-timeless: 0 3px 3px 2px rgba(0, 0, 0, 0.075), 0 0 2px rgba(0, 0, 0, 0.2);
--shadow-base: 0 3px 3px 2px rgba(0, 0, 0, 0.075), 0 0 2px rgba(0, 0, 0, 0.2); /* Timeless default */
}
}


Line 42: Line 43:


#mw-header-hack {
#mw-header-hack {
box-shadow: var(--shadow-timeless);
box-shadow: var(--shadow-outset);
}
}


Line 52: Line 53:
border: 3px solid #bbb;
border: 3px solid #bbb;
display: inline-block;
display: inline-block;
box-shadow: var(--shadow-inset2);
box-shadow: var(--shadow-inset);
/* margin-top: 12px;*/
/* margin-top: 12px;*/
}
}
Line 62: Line 63:


#mw-content {
#mw-content {
box-shadow: var(--shadow-timeless);
box-shadow: var(--shadow-outset);
}
}
Line 71: Line 72:
.mw-body h1.firstHeading {
.mw-body h1.firstHeading {
border-bottom: solid 2px;
border-bottom: solid 2px;
border-bottom-color: var(--brand-midgrey);
border-bottom-color: var(--brand-silver-base);
}
}


Line 81: Line 82:
#mw-site-navigation .sidebar-chunk {
#mw-site-navigation .sidebar-chunk {
/*  border-radius: 0.5rem; */
/*  border-radius: 0.5rem; */
box-shadow: var(--shadow-timeless);
box-shadow: var(--shadow-outset);
}
}


#mw-related-navigation .sidebar-chunk {
#mw-related-navigation .sidebar-chunk {
box-shadow: var(--shadow-timeless);
box-shadow: var(--shadow-outset);
} /* these shouldn't be separate but it won't work otherwise */
} /* these shouldn't be separate but it won't work otherwise */
}
}

Revision as of 02:34, 15 October 2025

/* All CSS here will be loaded for users of the Timeless skin */

:root {
	--brand-primary: #ffe10f;

	--brand-red-logo: #ed1c24;
	--brand-blu-logo: #007ed9;
	--brand-grn-logo: #39b54a;
	
	--brand-ylw-front: #ebc404;
	--brand-teal-front: #3e9781;
	
	--brand-ylw-rr: #f8f400;
	--brand-teal-rr: #00a4a8;
	
	--brand-silver-base: #c8ccd1; /* Timeless default */
	
	--shadow-inset: 2px 2px 5px 0 rgb(0, 0, 0, 0.4), 1px -1px 5px 0 rgb(0, 0, 0, 0.2) inset;
	--shadow-inset2: 0 3px 3px 2px rgba(0, 0, 0, 0.075), 0 0 2px rgba(0, 0, 0, 0.2), 1px -1px 5px 0 rgb(0, 0, 0, 0.2) inset;
	--shadow-outset: 2px 2px 5px 0 rgb(0, 0, 0, 0.4);
	--shadow-base: 0 3px 3px 2px rgba(0, 0, 0, 0.075), 0 0 2px rgba(0, 0, 0, 0.2); /* Timeless default */
}

#mw-content-container {
	background: var(--brand-teal-rr);
	border-bottom: solid 4px;
	border-bottom-color: var(--brand-primary);
/*	background-image: url(https://frontpage.researchrealm.net/images/tiled-studs.png);
    background-repeat: repeat; */
}

.color-middle {
	background: var(--brand-primary);
}

.color-left {
	background: var(--brand-primary);
}

.color-right {
	background: var(--brand-primary);
}

#mw-header-hack {
	box-shadow: var(--shadow-outset);
}

.mw-wiki-logo.timeless-logo {
	height: 162px;
	width: 162px;
	background-color: #eee;
	border-radius: 50%;
	border: 3px solid #bbb;
	display: inline-block;
	box-shadow: var(--shadow-inset);
/*	margin-top: 12px;*/
}

.mw-wiki-logo.timeless-logo img {
/*    margin-top: 1.00em;*/
    margin-left: 10px;
}

#mw-content {
	box-shadow: var(--shadow-outset);
}
	
.mw-body .firstHeading {
	/**/
}

.mw-body h1.firstHeading {
	border-bottom: solid 2px;
	border-bottom-color: var(--brand-silver-base);
}

.tools-inline li.selected {
    border-bottom-color: var(--brand-red-logo);
}

@media screen and (min-width: 1100px) {
	#mw-site-navigation .sidebar-chunk {
/*  	border-radius: 0.5rem; */
		box-shadow: var(--shadow-outset);
	}

	#mw-related-navigation .sidebar-chunk {
		box-shadow: var(--shadow-outset);
	} /* these shouldn't be separate but it won't work otherwise */
}