MediaWiki:Common.css: Difference between revisions

Latest revision as of 11:11, 10 July 2024

/* CSS placed here will be applied to all skins */

/* Import fonts */

@font-face {
    font-family: 'Degular';
    src: url('https://static.cdn.everywhere.game/wiki/Degular-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Degular';
    src: url('https://static.cdn.everywhere.game/wiki/Degular-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Degular Display';
    src: url('https://static.cdn.everywhere.game/wiki/DegularDisplay-Bold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

/* EV Colours:
Melon: #ff9966
Coral: #ff7d4c
Sunset: #ff6a14
Magma: #ff441d
White: #ffffff
Electric: #7d7df0
Violet: #473ba7
Dusk: #1f1c66
Night: #050522
Black: #000000
*/

/* change background color and text of the pages */
#content { background-color: #050522; color: #ffffff; font-family: Degular; }

/*change color of tools menu background */
#p-tb { background-color: #ff9966; }
/* hide the tools navigation box 
#p-tb { display: none } */

/*change color of square around the logo background */
#p-logo { background-color: transparent; }

/* change background color of the wiki for vector legacy only */
body { background-color: transparent; }
body {
    font-family: 'Degular';
}

/* change background color of the top ribbon above message / discussion */
#mw-head-base { background-image: url('https://wiki.everywhere.game/images/9/9b/Background_Pattern_4K.png'); }
#mw-head-base { background-color: #1f1c66; }
/* change top ribbon dimensions and alignment */
#mw-head-base {
	margin-left: auto;
	margin-right: auto;
  max-width: 50000px }

/* change background color of the left side navigation for vector legacy only */
#mw-panel { background-image: url('https://wiki.everywhere.game/images/9/9b/Background_Pattern_4K.png'); }

#mw-panel h3 { border: 1px solid #7d7df0; margin-top: -4px; } /* border around headers on the left side navigation plus fix top margin to align with the panel border at the top*/
/* change the section headers of the left side navigation panel */
#mw-panel h3 { color: #ffffff; background-color: #473ba7; max-width: 140px ; margin-left: auto; margin-right: auto; text-align: center; }


/* change color of paragraph text on pages */
#content p { font-size: 20px; color: #ffffff; font-family: 'Degular'}

/* change the bullet points */
#content ul {
  list-style: "• ";
  font-size: 20px; color: #ffffff; font-family: 'Degular' }

/* change color of page titles */
#content h1 { font-weight: bold; color: #7d7df0; font-family: 'Degular'}

/* change color of level 2 subheadings */
#content h2 { font-weight: bold; color: #7d7df0; font-family: 'Degular'; border-bottom: 1px solid #473ba7;}

/* change color of level 3 subheadings */
#content h3 { font-size: 20px; font-weight: bold; color: #7d7df0; font-family: 'Degular'; }

/* change color of level 4 subheadings */
#content h4 { font-size: 20px; font-weight: bold; color: #7d7df0; font-family: 'Degular'; }

/* 7d7df0 change font size and font family background color for left side panel works with vector legacy */
#mw-panel .portal { background-color: #050522; font-size: 19px; font-family: 'Degular'; } 
/* #mw-panel .portal { border: 1px solid #7d7df0; } */ /* border around the left hand side panel */
#mw-panel a:link { color: #ffffff; }
#mw-panel a:visited { color: #ffffff; }
#mw-panel a:hover { color: #ff441d; }


/* change font color, size and font family for the Tools header works with vector legacy 
#mw-panel #p-tb h3 { color: #ffffff; font-size: 18px; font-family: 'Degular'; } */


/* Increase the width of the side panel in the Vector skin */
#mw-panel {
    width: 168px; /* Adjust the width as needed */
}

.vector-legacy #mw-panel {
    width: 168px; /* Adjust the width as needed for legacy Vector skin */
}

/* Adjust the position of the content area to accommodate the wider side panel */
#mw-content-wrapper {
    margin-left: 168px; /* Adjust this value based on the new width of #mw-panel */
}

.vector-legacy #mw-content-wrapper {
    margin-left: 168px; /* Adjust this value based on the new width of #mw-panel for legacy Vector skin */
}


/* changes main page and discussion tabs at the top */
#left-navigation { font-size: 16px; font-family: 'Degular'; } 

/* changes the read, edit, view history font settings at the top */
#right-navigation { font-size: 16px; font-family: 'Degular'; } 

/* changes the create account, preferences, talk contributions text */
#p-personal { font-size: 18px; font-family: 'Degular'; } 
/* hide user links on top right corner 
#p-personal { display: none; } */

/* changes the footer font settings plus the privacy policy, about BARB links */
#footer ul li { color: #7d7df0; font-size: 15px; font-family: 'Degular'; } 

/* change the color of the hyperlinked text footer */
#footer a:link { color: #7d7df0; }
#footer a:visited { color: #7d7df0; }
#footer a:hover { color: #ff441d; }

/* change search box dimensions, works with vector legacy
div#simpleSearch { width: 240px; height: 25px; } */

.mw-body-content a:link { color: #7d7df0; } /* normal unvisited links TOC & Body */
.mw-body-content a:visited { color: #7d7df0; } /* visited links in TOC */
#content a:visited { color: #7d7df0; } /* visited links in body */

/* TOC background color settings */
#toc { background-color: #1f1c66; font-size: 15px; font-family: 'Degular'; font-color: #ffffff; }

/* remove bullet points from TOC */
#toc ul {
  list-style: none; font-size: 15px; font-family: 'Degular';
}

/* change color of TOC numbers */
.tocnumber { color: #7d7df0; }


/* align "content2 [hide]" to the left in the TOC */
.tocless #toc #toctitle, .toc #toctitle, #toc .toctitle, .toc .toctitle {
	text-align: left; }

/* Hide TOC items for headings other than level 1 */
#toc ul ul {
    display: none;
}

/* hides the discuss tab from pages */
#ca-talk { display:none!important; }

/* hides the delete tab from pages 
#ca-delete { display:none!important; } */

/* other tabs IDs for reference:
#ca-nstab-main - Page tab
#ca-nstab-user - User page tab (the Page tab on personal user pages)
#ca-talk - Discussion tab
#ca-view - Read tab (from the prepackaged skins this tab is available only in the Vector skin)
#ca-edit - Edit tab
#ca-history - View history/History tab
#ca-watch - the Watch tab for adding the page to the watchlist
#ca-unwatch - the Unwatch tab for removing the page from the watchlist
#ca-delete - Delete tab (in the Vector skins it's displayed with the More drop-down menu)
#ca-move - Move tab (in the Vector skin it's part of the More drop-down menu)
#ca-protect - Protect tab (as the previous two, with the Vector skin it's in the More drop-down menu) */

/* hides my talk link for logged in users */
#pt-mytalk { display: none!important; }


/* change the background color of main tab when clicked, not clicked */
#ca-nstab-main { background-image: none } 
#ca-nstab-main { border: 1px solid #7d7df0; } /* border and colour */
#ca-nstab-main { background-color: #050522}
#ca-nstab-main a:visited { color: #7d7df0; } /* change text colour / hyperlink colour for tab */
#ca-nstab-main a:link { color: #7d7df0; } /* change text colour / hyperlink colour for tab */
/* History tab */
#ca-nstab-main a {
    padding: 10px 20px; /* Adjust padding to increase or decrease size */
    /* You can also adjust width and height directly */
    /* width: 20px;  */
    /* height: 20px;  */
}

/* change the background color of edit tab when clicked, not clicked */
#ca-edit { background-image: none }
#ca-edit { border: 1px solid #7d7df0; } /* border and colour */
#ca-edit { background-color: #050522}
#ca-edit a:visited { color: #7d7df0; } /* change text colour / hyperlink colour for tab */
#ca-edit a:link { color: #7d7df0; } /* change text colour / hyperlink colour for tab */
/* Edit tab */
#ca-edit a {
    padding: 10px 20px; /* Adjust padding to increase or decrease size */
    /* You can also adjust width and height directly */
    /* width: 20px;  */
    /* height: 20px;  */
}

/* change the background color of history tab when clicked, not clicked */
#ca-history { background-image: none }
#ca-history { border: 1px solid #7d7df0; } /* border and colour */
#ca-history { background-color: #050522}
#ca-history a:visited { color: #7d7df0; } /* change text colour / hyperlink colour for tab */
#ca-history a:link { color: #7d7df0; } /* change text colour / hyperlink colour for tab */
/* History tab */
#ca-history a {
    padding: 10px 20px; /* Adjust padding to increase or decrease size */
    /* You can also adjust width and height directly */
    /* width: 20px;  */
    /* height: 20px;  */
}

/* change the background color of view tab when clicked, not clicked */
#ca-view { background-image: none }
#ca-view { border: 1px solid #7d7df0; } /* border and colour */
#ca-view { background-color: #050522}
#ca-view a:visited { color: #7d7df0; } /* change text colour / hyperlink colour for tab */
#ca-view a:link { color: #7d7df0; } /* change text colour / hyperlink colour for tab */
/* View tab */
#ca-view a {
    padding: 10px 20px; /* Adjust padding to increase or decrease size */
    /* You can also adjust width and height directly */
    /* width: 20px;  */
    /* height: 20px;  */
}

#ca-viewsource { background-image: none }
#ca-viewsource { border: 1px solid #7d7df0; }
#ca-viewsource { background-color: #050522}
#ca-viewsource a:visited { color: #7d7df0; }
#ca-viewsource a:link { color: #7d7df0; }
#ca-viewsource a {
    padding: 10px 20px; /* Adjust padding to increase or decrease size */
    /* You can also adjust width and height directly */
    /* width: 20px;  */
    /* height: 20px;  */
}

/* change the background color of watch tab when clicked, not clicked */
#ca-watch { background-image: none }
#ca-watch { border: 1px solid #7d7df0; } /* border and colour */
#ca-watch { background-color: #050522}
#ca-watch a:visited { color: #7d7df0; } /* change text colour / hyperlink colour for tab */
#ca-watch a:link { color: #7d7df0; } /* change text colour / hyperlink colour for tab */


/* change the background color of unwatch tab when clicked, not clicked */
#ca-unwatch { background-image: none }
#ca-unwatch { border: 1px solid #7d7df0; } /* border and colour */
#ca-unwatch { background-color: #050522}
#ca-unwatch a:visited { color: #7d7df0; } /* change text colour / hyperlink colour for tab */
#ca-unwatch a:link{ color: #7d7df0; } /* change text colour / hyperlink colour for tab */

/* hides the watch tab from pages */
#ca-watch { display:none!important; } 
/* hides the unwatch tab from pages */
#ca-unwatch { display:none!important; } 



/* Change color of the log out link */
#pt-logout a {
    color: #7d7df0; /* Replace with your desired color */
}
#pt-logout a:hover { color: #ff441d; }


/* Change color of the preferences link */
#pt-preferences a {
    color: #7d7df0; /* Replace with your desired color */
}

/* Change color of the contributions link */
#pt-mycontris a {
    color: #7d7df0; /* Replace with your desired color */
}

/* Change color of the contributions link */
#pt-watchlist a {
    color: #7d7df0; /* Replace with your desired color */
}



/* change body border color and thickness */
.mw-body { border: 2px solid #7d7df0; }


/* Custom CSS to change the logo */
.mw-wiki-logo {
    background-image: url('https://wiki.everywhere.game/images/a/a6/ARCADIA_LOGO_ELECTRIC2.png'); /* Replace 'path/to/your/logo.png' with the URL or path to your custom logo image */
    /* Optionally, adjust the width and height of the logo */
    width: 90px; /* Adjust to your desired width */
    height: 100px; /* Adjust to your desired height */
    /* Hide the default text-based logo */
    text-indent: -9999px;
    overflow: hidden;
}

/* Custom CSS to make the logo background transparent */
.mw-wiki-logo {
    background-color: transparent;
}

/* Custom CSS to set the background image */
body {
    background-image: url('https://wiki.everywhere.game/images/9/9b/Background_Pattern_4K.png'); /* Replace 'path/to/your/background-image.jpg' with the URL or path to your background image */
    /* Optionally, adjust other background properties */
    background-size: cover; /* Adjust to your desired background size */
    background-position: center; /* Adjust to your desired background position */
    background-repeat: repeat; /* Ensure the background image doesn't repeat */
}

.mw-body,
#mw-panel .portal
 {
    position: relative;
    z-index: 1; /* Ensure the elements are positioned above the background */
}

.mw-body {
    margin-top: 0; /* Reset the default margin to ensure the background extends to the top */
}

/*
#mw-panel .portal {
    background-color: transparent; /* Make the background of the ribbon and navigation panel transparent */
} */

/* Custom CSS for table colors */
.wikitable.custom-table {
    background-color: #050522; /* Background color */
border: 1px solid #1f1c66; border-collapse: collapse; /* borders */
} 

/* Custom CSS for table1 text color */
.wikitable.custom-table1,
.wikitable.custom-table1 td,
.wikitable.custom-table1 th {
    color: #7d7df0; /* Text color */
    font-size: 18px; /* Change font size */
    background-color: #050522; /* Header background color */
border: 0px solid #1f1c66; border-collapse: collapse; /* cell borders */
}

/* Custom CSS for table colors */
.wikitable.custom-table1 {
    background-color: #050522; /* Background color */
border: 0px solid #1f1c66; border-collapse: collapse; /* borders */
} 

/* Custom CSS for table text color */
.wikitable.custom-table,
.wikitable.custom-table td,
.wikitable.custom-table th {
    color: #7d7df0; /* Text color */
    font-size: 18px; /* Change font size */
    background-color: #050522; /* Header background color */
border: 1px solid #1f1c66; border-collapse: collapse; /* cell borders */
}


/* welcome to wiki section on home page */
.welcome-section {
    display: flex; /* Use Flexbox for layout */
    align-items: flex-start; /* Align items at the start of the flex container */
}

.video-container {
   
    flex: 1; /* Take up remaining space */
    margin-right: 50px; /* Add some spacing between the video and subsections */
    
}
/* YT Video container background colour */
pre {
    background-color: #050522; /* Your desired background color */
    border: none; /* Remove the border */
}

.subsections {
    flex: 0.5; /* Take up remaining space */
    display: flex; /* Use Flexbox for layout */
    flex-direction: column; /* Arrange subsections vertically */
    padding: 0 25px; /* Add some spacing around each category */
}

.subsection {
    margin-bottom: 20px; /* Add some spacing between subsections */
}

/* games section on the wiki home page */
.games-section {
    display: flex;
    justify-content: space-between; /* Align items with space between them */
}

.category {
    flex: 0 1 30%; /* Each category takes up 30% of the available space */
    padding: 10px; /* Add some spacing around each category */
    border: 0px solid #ddd; /* Add a border for visual separation (optional) */
}

/* Additional styling for the headers */
.category h2 {
    font-size: 20px;
    margin-bottom: 10px;
}

/* Additional styling for the descriptions */
.category p {
    font-size: 16px;
    line-height: 1.5;
}


.category h2 {
    border-bottom: 0px solid #473ba7;
}

.subsections h2 { border-bottom: 0px solid #ff441d; }

#content h1 {
    border-bottom: 2px solid #473ba7; }


    /* Define styles for code elements */
    code {
        background-color: #000000; /* Set background color */
        color: #ffffff; /* Set text color */
        padding: 2px 4px; /* Add padding for spacing */
        border-radius: 4px; /* Add rounded corners */
        font-family: Degular, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; /* Set font family */
    }

/* Hide the Talk and Contribute tabs */
#ca-talk, #ca-contributions {
    display: none;
}


/* Custom styles for the search bar */
#searchInput {
    background-color: #fff !important; /* Set a solid background color */
    opacity: 1 !important; /* Ensure the background is fully opaque */
    border: 1px solid #ccc; /* Add a border for better visibility */
    color: #000; /* Set text color */
    padding: 5px; /* Add padding for better spacing */
}

#searchButton, #searchButton:hover, #searchButton:active {
    background-color: #ff6a14 !important; /* Button background color */
    color: #fff !important; /* Button text color */
    border: 1px solid #ff6a14 !important; /* Button border color */
    opacity: 1 !important; /* Ensure the button is fully opaque */
}


.steps-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 1%px;
}

.steps {
    flex: 1;
    margin-right: 1%;
}

.step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1%;
}

.step-number {
    font-size: 24px;
    font-weight: bold;
    color: #7d7df0;
    background-color: #050522;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    font-family: Degular, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; /* Set font family */
}

.step-content {
    background-color: #151535;
    padding: 1%;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    flex: 1;
}