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)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/*Welcome to the Dovedale Wiki CSS Page. Please note that any changes here reflect on every single page where applied. Exercise caution when editing this page.
*/
/* List of items NOT ported over from the fandom wiki:
- Tabber CSS
- Template Theme Colours
*/
/* Smooth HTML Scrolling */
html {
scroll-behavior: smooth;
}
/* ScrollBar Enhance */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: #304671;
}
::-webkit-scrollbar-track {
background: #3368cc;
}
::-webkit-scrollbar-thumb:hover {
background: #202f4b;
}
/* dove-button class*/
html.skin-citizen-dark .dove-button {
background: #2e202a;
border: 2px solid #1e0c1b;
color: #FFF;
}
html.skin-citizen-light .dove-button {
background: #C3B1E1;
border: 2px solid rgba(65, 31, 145, .8);
color: #000;
}
.dove-button span {
display: inline-block;
position: relative;
transition: .2s;
}
.dove-button:hover span {
padding-right: 1.5em;
}
.dove-button span::after {
content: "➜";
position: absolute;
opacity: 0;
right: -20px;
transition: .2s;
}
.dove-button:hover span::after {
opacity: 1;
right: 0;
}
.dove-button {
display: inline-block;
background: rgba(65, 31, 145,0.2);
border: 1px solid #6e6290;
padding: 5px 10px;
border-radius: 12px;
}
/* ImageMap upgrades */
.responsive-imagemap img {
width: 100%;
height: auto;
}
figure:has(> .mw-ext-imagemap-inner) {
overflow: scroll;
}
/* Cool Logo Effects */
.citizen-header__logo {
transition: all .75s;
}
.fcitizen-header__logo:hover {
transform: scale(1.05);
filter: drop-shadow(0 0 8px #000);
}
/* Lighten the icon in dark mode */
body.dovedale-theme-light .mw-logo-icon {
filter: invert(1) hue-rotate(180deg);
}
/* Sidebar Label */
.citizen-drawer__menu [id^="n-sidebar-label-"] a {
pointer-events: none;
margin-left: var( --space-xs );
padding-left: var( --space-md );
padding-right: var( --space-xs );
border-left: 1px solid var( --border-color-base );
border-radius: 0;
letter-spacing: 0.05em;
font-weight: var( --font-weight-normal );
color: var( --color-subtle ) !important;
}
/* Sidebar Icons */
.citizen-drawer__menu [id^="n-sidebar-icon-"] a {
font-size: 0;
}
.citizen-drawer__menu [id^="n-sidebar-icon-"] a:before {
display: block;
content: "";
width: var( --size-icon );
height: var( --size-icon );
background: transparent center/contain no-repeat;
opacity: var( --opacity-icon-base );
filter: var( --filter-invert );
}
#n-sidebar-icon-discord a:before {
background-image: url( https://dovedale.wiki/images/1/17/Discord-icon.svg )
}
#n-sidebar-icon-roblox a:before {
background-image: url( https://dovedale.wiki/images/7/70/Roblox-icon.svg )
}
#n-sidebar-icon-kofi a:before {
background-image: url( https://dovedale.wiki/images/8/87/Kofi-icon.svg )
}
/* Template:Main_page/header Styles */
home-header {
position: relative;
margin-bottom: 2rem;
padding-top: 1rem;
line-height: var( --line-height-xx-small );
}
/* Home Header */
#content:has(.home-header) {
position: relative;
}
#content:has(.home-header):before {
content: " ";
display: block;
position: absolute;
width: 100%;
height: 100%;
opacity: 0.2;
background: linear-gradient(180deg, rgba(0,0,0,0) 1039px, var(--color-surface-0) 1139px), url("https://dovedale.wiki/images/9/94/Main_Page_Background.webp");
background-repeat: no-repeat;
background-size: cover;
pointer-events: none;
}
.home-header__pretitle {
margin-bottom: var(--space-xs);
color: var(--color-subtle);
font-size: 0.875rem;
text-transform: uppercase;
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-xs );
font-size: 0.875rem;
}
.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: 0.875rem;
font-weight: var( --font-weight-medium );
text-align: center;
}
.home-header__search:hover {
background-color: var( --background-color-button-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 ) {
.desktoponly {
display: none;
}
}
/*error at line 156 as the editor doesn't understand variables, it should be fine */
/*Light Dark Mode separators*/
/* Hide elements with light/dark classes depending on the theme */
.dovedale-theme-dark .light {
display: none;
}
.dovedale-theme-light .dark {
display: none;
}
/* Disable the annoying little info icon on image maps on the main page*/
.page-Main_Page.ns-0 .mw-ext-imagemap-desc-link {
display: none;
}
/*FlexPages CSS*/
.main-page-layout-container {
display: flex;
flex-direction: row;
gap: 10px;
}
@media (max-width: 768px) {
.main-page-layout-container {
flex-direction: column;
}
}
/*IMAGE MAP WIDTH*/
.imagemap img {
max-width: 100%;
height: auto;
overflow: scroll;
}
.imagemap img::-webkit-scrollbar {
display: none;
}
/* British Rail Double Arrow Wordmark */
.mw-logo-wordmark {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.mw-logo-wordmark:after {
width: 2em;
height: 2em;
display: block;
content: url(https://dovedale.wiki/images/6/65/British_Rail_Double_Arrow.svg);
top: .4em;
position: relative;
}
.dovedale-theme-dark .mw-logo-wordmark:after {
filter: brightness(0) invert(1);
}
/*About Me BUTTONS*/
.about-buttons {
justify-content: center; /* Center content horizontally */
align-items: center; /* Center content vertically */
border-radius: 10px; /* Rounded corners */
box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Subtle shadow */
}
/*
Temporarily added styles for Module:InfoboxNeue
These should be added back to Module:InfoboxNeue/common.css
*/
/* the tabber is the infobox gallery */
/* infobox images inside a gallery tabber are excluded from the rule */
.infobox__image:not(.infobox__content .tabber .infobox__image),
.infobox__content > .tabber {
position: relative;
margin-bottom: -2rem;
}
.infobox__image:not(.infobox__content .tabber .infobox__image)::after,
.infobox__content > .tabber::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50%;
background: linear-gradient(
to top,
var(--color-surface-2) 0%,
hsla(220, 25%, 15%, 0) 100%
);
pointer-events: none;
}
/* also select tabbers to make the hover effect work on them */
.infobox__image::after,
.infobox__image ~ .infobox__indicator,
.infobox__image ~ .infobox__header,
.infobox__content > .tabber::after,
.infobox__content > .tabber ~ .infobox__indicator,
.infobox__content > .tabber ~ .infobox__header {
transition: var(--transition-hover);
transition-property: opacity;
}
/* also select tabbers to make the hover effect work on them */
/* .infobox__image elements inside gallery tabbers are not excluded here because
they do not have a ::after pseudo-element anyways */
.infobox__image:hover::after,
.infobox__image:hover ~ .infobox__indicator,
.infobox__image:hover ~ .infobox__header,
.infobox__content > .tabber:hover::after,
.infobox__content > .tabber:hover ~ .infobox__indicator,
.infobox__content > .tabber:hover ~ .infobox__header {
opacity: 0;
}
/* Move indicators down if a gallery tabber is present instead of an image */
.tabber + .infobox__indicator {
margin-top: calc(2.5 * var(--space-unit)) !important; /* TODO remove !important after moving this */
}
/*
End of the styles for Module:InfoboxNeue
*/
/*
Styles for Module:Mbox - added here temporarily until TemplateStyles allow
using these kind of selectors
*/
/* Invert icons in dark mode */
body.dovedale-theme-dark .mbox-icon:not(:is(.mbox-colour-icon *)) img {
filter: invert(1);
}
/*
End of styles for Module:Mbox
*/
/* Disable subtitle on Main Page*/
body.page-Main_Page #siteSub {
display: none;
}
/* Guide sections: Add a border radius to the first and
last guide section element in an article section*/
section .citizen-overflow-wrapper:has(.guide-section):first-of-type > .citizen-overflow-content > .guide-section {
border-top-left-radius: var(--border-radius-medium) !important;
border-top-right-radius: var(--border-radius-medium) !important;
}
section .citizen-overflow-wrapper:has(.guide-section):last-of-type > .citizen-overflow-content > .guide-section {
border-bottom-left-radius: var(--border-radius-medium) !important;
border-bottom-right-radius: var(--border-radius-medium) !important;
}
/* Fix collapsed guide section tables not taking up the full width and having too much margin */
/* These styles need to be here because the outer citizen-overflow-wrapper have
to be changed in order to style guide sections properly */
.citizen-overflow-wrapper:has(.guide-section) {
max-width: 100%;
margin: 0 !important;
}
/* Transparent bg for drawer card/sitemenu */
.citizen-drawer__card {
backdrop-filter: blur(30px);
background: rgba(39, 53, 69, 0.5);
}
/* Fix white theme flashing on page load */
.async-hide { opacity: 1 !important; }
/* User page V2 */
.profile-user-group {
color: #f7f7f7;
background-color: #5d67ab;
}