Difference between revisions of "MediaWiki:Darkvector.css"

From Captain of Industry Wiki
Jump to: navigation, search
(Re-color links to match the official in-game orange color. Accessibility (contrast) improvements site-wide for the visually impaired.)
(attempt to swap out class mw-body-content for id mw-content-text to fix mobile font issues)
 
(21 intermediate revisions by the same user not shown)
Line 3: Line 3:
/* Restore font size from 0.875em to full size */
/* Restore font size from 0.875em to full size */


.mw-body-content {
#mw-content-text {
   font-size: 1em;
   font-size: 1em;
}
}
Line 12: Line 12:


body { background-color: #222222; }
body { background-color: #222222; }
#mw-head { background-color: #222222; }
.mw-body { background-color: #2c2c2c; }
.mw-body { background-color: #2c2c2c; }
.editOptions { background-color: #2c2c2c; }
.editOptions { background-color: #2c2c2c; }
Line 21: Line 23:
/*    Contrast ratio: 6.34 : 1 (before), 7.03 : 1 (after)                      */
/*    Contrast ratio: 6.34 : 1 (before), 7.03 : 1 (after)                      */


a { color: #fea416; }
a { color: #fea416 !important; }
a:visited { color: #fea416; }
div.darkvectorMenu li a { color: #fea416; }
div.darkvectorTabs li a { color: #fea416; }
div#mw-panel div.portal div.body ul li a { color: #fea416; }
#mw-panel .portal .body ul li a { color: #fea416; }
#preftoc li > a { color: #fea416; }
 


/* Prevent darkening of visited links for accessibility (contrast) reasons */
/* Prevent darkening of visited links for accessibility (contrast) reasons */
/*    Contrast ratio: 3.71 : 1 (before), 7.03 : 1 (after)                  */
/*    Contrast ratio: 3.71 : 1 (before), 7.03 : 1 (after)                  */


#left-navigation div.darkvectorTabs li.selected a,#right-navigation div.darkvectorTabs li.selected a,#left-navigation div.darkvectorTabs li.selected a:visited,#right-navigation div.darkvectorTabs li.selected a:visited { color: #fea416;}
a:visited { color: #fea416 !important; }
div.darkvectorMenu li.selected a,div.darkvectorMenu li.selected a:visited { color: #fea416; }
#mw-panel .portal .body ul li a:visited { color: #fea416; }
div#mw-panel div.portal div.body ul li a:visited { color: #fea416; }
 


/* Re-color "redlinks" for accessibility (contrast) reasons */
/* Re-color "redlinks" for accessibility (contrast) reasons */
Line 43: Line 34:


a.new { color: #ff7070 !important; }
a.new { color: #ff7070 !important; }
.ace-tm .ace_constant { color: #ff7070 !important; }
#left-navigation div.darkvectorTabs li.new a,#right-navigation div.darkvectorTabs li.new a,#left-navigation div.darkvectorTabs li.new a:visited,#right-navigation div.darkvectorTabs li.new a:visited { color: #ff7070; }




/* Re-color left nav menu headers for accessibility (contrast) reasons */
/* Re-color left nav menu headers for accessibility (contrast) reasons */
/*    Contrast ratio: 3.44 : 1 (before), 7.00 : 1 (after)              */
/*    Contrast ratio: 3.35 : 1 (before), 7.04 : 1 (after)              */


div#mw-panel div.portal h3 { color: #b5b5b5; }
div#mw-panel div.portal h3 { color: #b8b8b8; }




/* Re-color search box for accessibility (contrast) reasons */
/* Re-color search box and form buttons for accessibility (contrast) reasons */
/*    Contrast ratio: 4.77 : 1 (before), 5.41 : 1 (after)   */
/*    Contrast ratio: 4.77 : 1 (before), 7.03 : 1 (after)                   */


div#simpleSearch #searchButton { background-color: rgba(255,164,22,.75) !important; }
div#simpleSearch #searchButton { background-color: rgba(255,164,22,.75) !important; }
.oo-ui-textInputWidget input, .oo-ui-textInputWidget textarea, .oo-ui-tagMultiselectWidget-handle, div#simpleSearch #searchInput {
.oo-ui-textInputWidget input, .oo-ui-textInputWidget textarea, .oo-ui-tagMultiselectWidget-handle, div#simpleSearch #searchInput {
     background-color: #44444 !important;
     background-color: #444444 !important;
     color: #C1C1C1 !important;
     color: #DBDBDB !important;
}
}
.oo-ui-buttonElement-button, .mw-ui-button {
    color: #ffffff !important;
    background-color: #ffa416 !important;
    border-color: #ffa416 !important;
}
a[role=button] { color: #2b2b2b !important; }
/* Re-color footer legal text for accessibility (contrast) reasons */
/*    Contrast ratio: 3.35 : 1 (before), 7.04 : 1 (after)          */
#footer ul li { color: #b8b8b8 !important; }
/* De-color self-links because why did they design this skin to do this?! */
a.mw-selflink { color: inherit !important; }





Latest revision as of 10:18, 28 January 2022

/* CSS placed here will affect users of the DarkVector skin ONLY */

/* Restore font size from 0.875em to full size */

#mw-content-text {
  font-size: 1em;
}


/* Darken background color slightly (almost imperceptibly for a normally-sighted person) */
/*   to make it possible to meet W3 WCAGC AAA standards                                  */

body { background-color: #222222; }
#mw-head { background-color: #222222; }

.mw-body { background-color: #2c2c2c; }
.editOptions { background-color: #2c2c2c; }
#mw-page-base { background-color: #2c2c2c; }
#left-navigation div.darkvectorTabs li.selected,#right-navigation div.darkvectorTabs li.selected { background-color: #2c2c2c; }


/* Re-color links from default Darkvector orange to the official in-game orange */
/*    Contrast ratio: 6.34 : 1 (before), 7.03 : 1 (after)                       */

a { color: #fea416 !important; }

/* Prevent darkening of visited links for accessibility (contrast) reasons */
/*    Contrast ratio: 3.71 : 1 (before), 7.03 : 1 (after)                  */

a:visited { color: #fea416 !important; }

/* Re-color "redlinks" for accessibility (contrast) reasons */
/*    Contrast ratio: 3.00 : 1 (before), 5.19 : 1 (after)   */

a.new { color: #ff7070 !important; }


/* Re-color left nav menu headers for accessibility (contrast) reasons */
/*    Contrast ratio: 3.35 : 1 (before), 7.04 : 1 (after)              */

div#mw-panel div.portal h3 { color: #b8b8b8; }


/* Re-color search box and form buttons for accessibility (contrast) reasons */
/*    Contrast ratio: 4.77 : 1 (before), 7.03 : 1 (after)                    */

div#simpleSearch #searchButton { background-color: rgba(255,164,22,.75) !important; }
.oo-ui-textInputWidget input, .oo-ui-textInputWidget textarea, .oo-ui-tagMultiselectWidget-handle, div#simpleSearch #searchInput {
    background-color: #444444 !important;
    color: #DBDBDB !important;
}
.oo-ui-buttonElement-button, .mw-ui-button {
    color: #ffffff !important;
    background-color: #ffa416 !important;
    border-color: #ffa416 !important;
}
a[role=button] { color: #2b2b2b !important; }


/* Re-color footer legal text for accessibility (contrast) reasons */
/*    Contrast ratio: 3.35 : 1 (before), 7.04 : 1 (after)          */

#footer ul li { color: #b8b8b8 !important; }


/* De-color self-links because why did they design this skin to do this?! */

a.mw-selflink { color: inherit !important; }


/* Style <code> blocks */

code {
    width: auto;
    height: auto;
    padding: .2em;
    margin: -.2em 0;
    border: none;
    border-radius: 5px;
    font-family: Consolas, Andale Mono WT, DejaVu Sans Mono, Ubuntu Monospace, Courier New, monospace;
    text-indent: 0;
    white-space: pre-wrap;
    background-color: rgba(128,128,128,0.25);
}