Difference between revisions of "MediaWiki:Common.css"

From Sapiens Wiki
Jump to navigation Jump to search
(Created page with "→‎Import the Sapiens fonts from the offical website: @font-face { font-family: 'SapiensLight'; src: url("https://playsapiens.com/fonts/sapienslight-webfont.woff2") format("woff2"), url("https://playsapiens.com/fonts/sapienslight-webfont.woff") format("woff"), url("https://playsapiens.com/fonts/sapienslight-webfont.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Sapiens';...")
 
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Import the Sapiens fonts from the offical website */
/* Common.css for wiki.playsapiens.com
/* Author: ChillGenXer
 
/* Import the Sapiens fonts from the official website */
@font-face {
@font-face {
     font-family: 'SapiensLight';  
     font-family: 'SapiensLight';
     src: url("https://playsapiens.com/fonts/sapienslight-webfont.woff2") format("woff2"),  
     src: url("https://playsapiens.com/fonts/sapienslight-webfont.woff2") format("woff2"),
         url("https://playsapiens.com/fonts/sapienslight-webfont.woff") format("woff"),  
         url("https://playsapiens.com/fonts/sapienslight-webfont.woff") format("woff"),
         url("https://playsapiens.com/fonts/sapienslight-webfont.ttf") format("truetype");  
         url("https://playsapiens.com/fonts/sapienslight-webfont.ttf") format("truetype");
     font-weight: normal;  
     font-weight: normal;
     font-style: normal;  
     font-style: normal;
}
}
 
@font-face {
@font-face {  
     font-family: 'Sapiens';
     font-family: 'Sapiens';  
     src: url("https://playsapiens.com/fonts/sapiens-webfont.woff2") format("woff2"),
     src: url("https://playsapiens.com/fonts/sapiens-webfont.woff2") format("woff2"),  
         url("https://playsapiens.com/fonts/sapiens-webfont.woff") format("woff"),
         url("https://playsapiens.com/fonts/sapiens-webfont.woff") format("woff"),  
         url("https://playsapiens.com/fonts/sapiens-webfont.ttf") format("truetype");
         url("https://playsapiens.com/fonts/sapiens-webfont.ttf") format("truetype");  
     font-weight: normal;
     font-weight: normal;  
     font-style: normal;
     font-style: normal;
}
 
/* General properties */
body, div, span, table, td, th {
    background-color: #353535;
    color: white;
    border-color: #353535;
    font-family: SapiensLight;
    font-size: 1em;
}
 
/* Vector skin specific properties */
.vector-body, .vector-menu-content, .vector-menu-portal, .vector-menu-tabs li a, .vector-menu-dropdown .menu a {
    background-color: #353535;
    color: white;
    border-color: #353535;
    font-family: SapiensLight;
    font-size: 1em;
}
}


/* Wiki specific properties */
:root {
#content, #bodyContent, #mw-head-base, #p-logo, #p-navigation, #p-tb, #p-tb-label, #p-tb .body, #footer {
    /* Dark mode on/off (true for dark mode, false for light mode) */
     background-color: #353535;
     --dark-mode: true;
    color: white;
    border-color: #353535;
    font-family: SapiensLight;
    font-size: 1em;
}


/* Table of Contents specific properties */
    /*********************************************\
.toc {
    *              Dark Mode Colors            *
     background-color: #353535;
    \*********************************************/
     color: white;
     --dark-main-color: #E3E3E3;
    border-color: #353535;
     --dark-background-color: #242424;
     font-family: SapiensLight;
     --dark-header-color: #FF8815;
    font-size: 1em;
}


/* Wikitable specific properties */
    --unvisited-link-color: #51B6DC;
table.wikitable, table.wikitable td, table.wikitable th {
    --visited-link-color: #51B6DC;
     background-color: #353535;
     --mouseover-link-color: #51B6DC;
     color: white;
     --selected-link-color: #51B6DC;
     border-color: #353535;
     --header-background-color: #353535;
     font-family: SapiensLight;
     --code-color: #33CC33;
     font-size: 1em;
     --ext-link-color: #51B6DC;
}
    --ext-link-visited-color: #51B6DC;


/* Color properties */
    /*********************************************\
#content .mw-body-content, .postedit .postedit-content, .vector-menu-tabs li a, .vector-menu-dropdown .menu a,
    *              Light Mode Colors            *
.vector-menu-content, .toc .tocnumber, table.wikitable, table.wikitable td, table.wikitable th {
    \*********************************************/
    color: white !important;
    --light-main-color: #000000;
}
    --light-background-color: #FFFFFF;
    --light-header-color: #000000;


/* Heading properties */
   
#content h1 {
    /* Default color settings (current dark mode colors) */
     color: #6AD8FF !important;
     --main-color: var(--dark-main-color);
    font-size: 2em !important;
     --background-color: var(--dark-background-color);
}
     --header-color: var(--dark-header-color);
 
 
#content h2 {
     /* Fonts */
    color: white !important;  
     --main-font-size: 1.1em;
     font-size: 1.8em !important;
     --main-font: "Inter var experimental", "Inter var", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica", "Arial", "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
     --header-font: 'Sapiens';
 
     --sub-header-font: 'SapiensLight';
#content h3 {
    --code-font-family: "Consolas", "Courier New", "monospace";
    color: white !important;
   
    font-size: 1.6em !important;
                    /* Colours */
}
                    --main-bg-color: #242424;
 
                    --main-font-color: #E3E3E3;
#content h4 {
                    --header-font-color: #FF8815;
    color: white !important;  
                    --code-font-color: #33CC33;
     font-size: 1.4em !important;
                    --main-border-color: #353535;
}
                    --non-existent-link-color: #954D26;
 
                    --content-block-title-bkg-color: #353535;
#content h5 {
    color: white !important;
    font-size: 1.2em !important;  
}
 
#content h6 {
     color: white !important;
     font-size: 1.1em !important;  
}
 
/* Change color of article titles and hide link in Table of Contents */
#firstHeading, .toc .toctoggle a {
     color: #6AD8FF !important;
}
 
/* All links color */
a {
    color: #6AD8FF !important;
}
 
/* Links to non-existent pages color */
a.new {
    color: red !important;
}
 
/* Tables */
table,  
table.wikitable,  
table.wikitable td,  
table.wikitable th,
td,  
th {
    border: 1px solid white !important;
}
 
/* Table of Contents */
.toc {
     background-color: #353535 !important;
     border: 1px solid white !important;
    color: white !important;
}
 
.toc .toctitle h2 {
    font-family: 'SapiensLight';
}
 
/* Section edit links font size */
.mw-editsection a {
    font-size: 0.7em; /* Adjust this value to your preference */
}
 
/* Post-save confirmation page text color */
.postedit .postedit-content,
.postedit .postedit-content a {
    color: white !important;
}
 
/* Increase font size of sidebar links */
#mw-panel .portal .body ul li a {
    font-size: 1.2em !important;
}
 
/* Change font size and color of navigation links in the sidebar */
#p-navigation .vector-menu-content-list a span,
#p-navigation .vector-menu-content-list a:visited span {
    font-size: 1.2em !important;
    font-family: 'SapiensLight' !important;
    color: #6AD8FF !important;
}
 
/* Change font size and color of toolbox links in the sidebar */
#p-tb .vector-menu-content-list a span,
#p-tb .vector-menu-content-list a:visited span {
    font-size: 1.2em !important;
    font-family: 'SapiensLight' !important;
    color: #6AD8FF !important;
}


/* Main Page Formatting */
                    /* Game-related reference colors */
body.page-Main_Page h1.firstHeading {
                    --game-menu-bg-color: #545454;
    display: none;  
                    --game-menu-button-blue: #51B6DC;
                    --game-good-green: #05FF05;
                    --game-bad-red: #FF2121;
                    --game-bad-major: #FF8603;
                    --game-wrong-role: #FFCB0B;
                    --game-timecontrol-sun-yellow: #FFFF51;
                    --game-icon-hand-bg-color: #FF8815;
                    --old-orange-link-color: #EC9448;
}
}

Latest revision as of 05:41, 9 July 2023

/* Common.css for wiki.playsapiens.com
/* Author: ChillGenXer

/* Import the Sapiens fonts from the official website */
@font-face {
    font-family: 'SapiensLight';
    src: url("https://playsapiens.com/fonts/sapienslight-webfont.woff2") format("woff2"),
         url("https://playsapiens.com/fonts/sapienslight-webfont.woff") format("woff"),
         url("https://playsapiens.com/fonts/sapienslight-webfont.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Sapiens';
    src: url("https://playsapiens.com/fonts/sapiens-webfont.woff2") format("woff2"),
         url("https://playsapiens.com/fonts/sapiens-webfont.woff") format("woff"),
         url("https://playsapiens.com/fonts/sapiens-webfont.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

:root {
    /* Dark mode on/off (true for dark mode, false for light mode) */
    --dark-mode: true;

    /*********************************************\
    *               Dark Mode Colors             *
    \*********************************************/
    --dark-main-color: #E3E3E3;
    --dark-background-color: #242424;
    --dark-header-color: #FF8815;

    --unvisited-link-color: #51B6DC;
    --visited-link-color: #51B6DC;
    --mouseover-link-color: #51B6DC;
    --selected-link-color: #51B6DC;
    --header-background-color: #353535;
    --code-color: #33CC33;
    --ext-link-color: #51B6DC;
    --ext-link-visited-color: #51B6DC;

    /*********************************************\
    *               Light Mode Colors             *
    \*********************************************/
    --light-main-color: #000000;
    --light-background-color: #FFFFFF;
    --light-header-color: #000000;

    
    /* Default color settings (current dark mode colors) */
    --main-color: var(--dark-main-color);
    --background-color: var(--dark-background-color);
    --header-color: var(--dark-header-color);
  
    /* Fonts */
    --main-font-size: 1.1em;
    --main-font: "Inter var experimental", "Inter var", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica", "Arial", "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --header-font: 'Sapiens';
    --sub-header-font: 'SapiensLight';
    --code-font-family: "Consolas", "Courier New", "monospace";
    
                    /* Colours */
                    --main-bg-color: #242424;
                    --main-font-color: #E3E3E3;
                    --header-font-color: #FF8815;
                    --code-font-color: #33CC33;
                    --main-border-color: #353535;
                    --non-existent-link-color: #954D26;
                    --content-block-title-bkg-color: #353535;

                    /* Game-related reference colors */
                    --game-menu-bg-color: #545454;
                    --game-menu-button-blue: #51B6DC;
                    --game-good-green: #05FF05;
                    --game-bad-red: #FF2121;
                    --game-bad-major: #FF8603;
                    --game-wrong-role: #FFCB0B;
                    --game-timecontrol-sun-yellow: #FFFF51;
                    --game-icon-hand-bg-color: #FF8815;
                    --old-orange-link-color: #EC9448;
}
Retrieved from "http://wiki.playsapiens.com/index.php?title=MediaWiki:Common.css&oldid=27306"