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-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- | --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- | 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- | box-shadow: var(--shadow-inset); | ||
/* margin-top: 12px;*/ | /* margin-top: 12px;*/ | ||
} | } | ||
| Line 62: | Line 63: | ||
#mw-content { | #mw-content { | ||
box-shadow: var(--shadow- | 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- | 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- | box-shadow: var(--shadow-outset); | ||
} | } | ||
#mw-related-navigation .sidebar-chunk { | #mw-related-navigation .sidebar-chunk { | ||
box-shadow: var(--shadow- | 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 */
}