Difference between revisions of "MediaWiki:Vector.css"

From Dissent
Jump to navigation Jump to search
(Trying this...)
(TT was not set here; is now.)
 
(19 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
/* CSS placed here will affect users of the Vector skin */
 
/* CSS placed here will affect users of the Vector skin */
  
/* This needs work
 
BODY
 
  {
 
    background-image: linear-gradient(#000 80%, #FFD100 100%);
 
    }
 
 
#mw-page-base
 
  {
 
    background-repeat: none;
 
    background-image: none;
 
    background-color: none;
 
    }
 
*/
 
  
 
/* * * * * * * * * * * * */
 
/* * * * * * * * * * * * */
 
/* CSS placed here from LPedia will affect users of the Vector skin */
 
  
 
/*  
 
/*  
 
Changing link colors to match site branding standards circa April 2017
 
 
Unvisited extant: #002D72 (288C, LPTexas specification for dark blue, as the LNC doesn't presently have a specified dark blue; also used on main page).  Changing to black for Radical Caucus; blue can be visited.
 
 
Unvisited non-extant: ##97272C (7622C, from SIGLIB/LSP specification, as the LNC doesn't presently have a specified red; also used on the vectorized version of the Red Book LPedia logo.)
 
 
 
*/
 
*/
  
/* Normal, extant, unvisited links */
+
/* Normal, extant, unvisited links -- black */
 
A { color: #000000 }
 
A { color: #000000 }
  
/* Unvisited non-extant links */
+
/* Unvisited non-extant links 7622C red */
 
A.new { color: #97272C }
 
A.new { color: #97272C }
  
/* Unvisited Menu items */
+
/* Unvisited Menu items -- black */
 
DIV#mw-panel DIV.portal DIV.body UL LI A { color: #000000 }
 
DIV#mw-panel DIV.portal DIV.body UL LI A { color: #000000 }
  
/* Unvisited menu tabs */
+
/* Unvisited menu tabs -- black */
 
DIV.vectorTabs LI A { color: #000000 }
 
DIV.vectorTabs LI A { color: #000000 }
  
/* Visited items */
+
/* Visited items -- 288C blue */
 
DIV#mw-panel DIV.portal DIV.body UL LI A:visited { color: #002D72 }
 
DIV#mw-panel DIV.portal DIV.body UL LI A:visited { color: #002D72 }
 
DIV.vectorTabs LI A:visited { color: #002D72 }
 
DIV.vectorTabs LI A:visited { color: #002D72 }
Line 48: Line 26:
 
/*
 
/*
  
Attempting a font stack.
+
Basic text font stack.
 
 
Normal sans serif: Roboto 2014 preferred (but has a name collission with Roboto 2011).  Most edge cuts should be horizontal, thus Helvetica-style typefaces are preferred to vertical cut like Segoe, Frutiger, DejaVu Sans, or Open Sans.
 
  
We probably want to install an @font-face for Roboto 2014.
+
Normal sans serif: Roboto 2014 preferred (but has a name collission with Roboto 2012).  Most edge cuts should be horizontal, thus Helvetica-style typefaces are preferred to vertical cut like Segoe, Frutiger, DejaVu Sans, or Open Sans.
  
 
*/
 
*/
  
 
/* This seems to be where the default sans serif is specified, and vector, left to its own devices, will go with just whatever the user's default is */
 
/* This seems to be where the default sans serif is specified, and vector, left to its own devices, will go with just whatever the user's default is */
 +
 
BODY { font-family: Roboto, Univers, "Helvetica Std", HelveticaStd, Helvetica, "Nimbus Sans L", NimbusSansL, "Nimbus Sans", NimbusSans, "Helvetica Neue", HelveticaNeue, "Helvetica Neue Std", HelveticaNeueStd, Arial, "Liberation Sans", LiberationSans, Arimo, Lato, sans-serif }
 
BODY { font-family: Roboto, Univers, "Helvetica Std", HelveticaStd, Helvetica, "Nimbus Sans L", NimbusSansL, "Nimbus Sans", NimbusSans, "Helvetica Neue", HelveticaNeue, "Helvetica Neue Std", HelveticaNeueStd, Arial, "Liberation Sans", LiberationSans, Arimo, Lato, sans-serif }
  
  
  
# Maybe this color needs to be specified here to work.  This is for the '''Remember that you are only previewing this CSS. It has not yet been saved!''' note and anything else covered by this.  Trying to get the correct red.
+
/* This is for the '''Remember that you are only previewing this CSS. It has not yet been saved!''' note and anything else covered by this.  7622C red. */
 
.previewnote, DIV.previewnote { color: #97272C }
 
.previewnote, DIV.previewnote { color: #97272C }
  
  
/* * * * * * * * * * * * * /
+
/* * * * * * * * * * * * */
 +
 
 +
/*
  
retrying replacing the very off-brand Cyan (it's not even my proposed special use cyan, and this isn't the use for that I had in mind)
+
Reference Pantone list; some of which are no longer part of our brand specification, admittedly
  
 
CG1C:#D9D9D6
 
CG1C:#D9D9D6
 +
CG4C:#BBBCBC
 
CG5C:#B1B3B3
 
CG5C:#B1B3B3
 
CG9C:#75787B
 
CG9C:#75787B
 +
CG3C:#C8C9C7
 +
CG4C:#BBBCBC
 +
 +
Half CG1C:#EDEDEB
  
background-image: linear-gradient(#D9D9D6 20%, #D9D9D6 50%, #B1B3B3 100%);
 
background-color: #FFF;
 
  
 
*/
 
*/
  
BODY { background-color:#75787B; background-image:linear-gradient(#B1B3B3 0%, #B1B3B3 20%, #75787B 100%); height:100%; background-repeat:no-repeat; }
+
/*
 +
BODY { background-color:#FFFFFF; background-image:linear-gradient(#FFFFFF  0%, #FFFFFF  20%, #BBBCBC 100%); height:100%; background-repeat:no-repeat; }
 +
*/
 +
 
 +
 
 +
/* White background for pre-CSS3 CSS capable browsers */
 +
BODY { background-color:#FFFFFF; }
 +
 
 +
 
 +
#mw-head-base, #mw-page-base {background-color:#FFFFFF }
  
#mw-head-base, #mw-page-base {background-color: #B1B3B3; background-image: linear-gradient(#D9D9D6 0%, #D9D9D6 50%, #B1B3B3 100%) }
+
#mw-head { background-color:#FFFFFF }
  
  
 +
/* Raise your hand if you know what CSS3 is */
 +
@media  (min-width:1em)
 +
  {
 +
    #mw-head-base, #mw-page-base {background-color:#FFFFFF; background-image:linear-gradient(#FFFFFF 0%, FFFFFF 50%, #BBBCBC  100%) }
 +
    BODY { background-color:#BBBCBC; background-image:linear-gradient(#FFFFFF  0%, #FFFFFF  20%, #BBBCBC 100%); height:100%; background-repeat:no-repeat; }
 +
    }
  
 +
/* Replacing Alegreya stack with Avant Garde stack; might want to install an @font-face here.
  
 
.mw-body H1, .mw-body H2, H1, H2, H3, H4, H5, H6, H7, H8 { font-family: Alegreya, "Bookman", "Century Schoolbook", "Linux Libertine",Georgia,Times,serif; }
 
.mw-body H1, .mw-body H2, H1, H2, H3, H4, H5, H6, H7, H8 { font-family: Alegreya, "Bookman", "Century Schoolbook", "Linux Libertine",Georgia,Times,serif; }
 +
*/
 +
 +
.mw-body H1, .mw-body H2, H1, H2, H3, H4, H5, H6, H7, H8 { font-family: "TeX Gyre Adventor", "Avant Garde", AvantGarde, "Avant Gard", "ITC Avant Garde", ITCAvantGarde, Futura, Futura-Bold, "Futura Bold", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", TwCen, "Twentieth Century", "Futura PT", "Heiti SC", "Heiti TC", "Didact Gothic", Questrial, Muli, Avenir, Sofia, "Gill Sans", GillSans, Kabel, OptiKabel, "Open Sans", "Noto Sans", NotoSans, Noto, "Droid Sans", DroidSans, Droid, "DejaVu Sans", DejaVuSans, "Bitstream Vera", BitstreamVera, Vera, "DejaVu LGC Sans", Geneva, sans-serif; }
 +
  
 
H1, H2, H5, .mw-body H5 { font-weight:700 }
 
H1, H2, H5, .mw-body H5 { font-weight:700 }
Line 93: Line 95:
 
A:hover { color:#002D72 }
 
A:hover { color:#002D72 }
 
A:active { color:#97272C }
 
A:active { color:#97272C }
DIV#mw-panel div.portal H3, DIV#footer UL LI { {  color:#000000 }
+
DIV#mw-panel div.portal H3, DIV#footer UL LI {  color:#000000 }
  
 
DIV#mw-panel DIV.portal DIV.body UL LI A:hover { color:#002D72 }
 
DIV#mw-panel DIV.portal DIV.body UL LI A:hover { color:#002D72 }
 
DIV#mw-panel DIV.portal DIV.body UL LI A:active { color:#97272C }
 
DIV#mw-panel DIV.portal DIV.body UL LI A:active { color:#97272C }
  
/* Make the menu more readible against the middle of the Cool Gray scale */
+
/* Edit Source */
 +
TT, #wpTextbox1
 +
  {
 +
    font-family: "Roboto Mono", RobotoMono, Inconsolata, Consolas, Monaco, "Bitstream Vera Sans", "DejaVu Sans Mono", "Deja Vu Sans Mono", "Liberation Mono", "Nu Sans Mono", "Source Code Pro", "Fira Mono", "Anonymous Pro", "Proggy Clean",  "Andale Mono", Hack, Dina, Crystal, monospace
 +
    }
 +
 
 +
/* An attempt to keep image sizes under control given the engine-imposed limitations on image responsiveness */
  
/* DIV#mw-panel */
+
IMG
DIV.portal, .footer-places { background-color:#D9D9D6 }
+
  {
 +
    max-width: 100%;
 +
    height: auto;
 +
    }

Latest revision as of 12:43, 20 December 2023

/* CSS placed here will affect users of the Vector skin */


/* * * * * * * * * * * * */

/* 
*/

/* Normal, extant, unvisited links -- black */
A { color: #000000 }

/* Unvisited non-extant links 7622C red */
A.new { color: #97272C }

/* Unvisited Menu items -- black */
DIV#mw-panel DIV.portal DIV.body UL LI A { color: #000000 }

/* Unvisited menu tabs -- black */
DIV.vectorTabs LI A { color: #000000 }

/* Visited items -- 288C blue */
DIV#mw-panel DIV.portal DIV.body UL LI A:visited { color: #002D72 }
DIV.vectorTabs LI A:visited { color: #002D72 }
A:visited { color: #002D72 }

/*

Basic text font stack.

Normal sans serif: Roboto 2014 preferred (but has a name collission with Roboto 2012).  Most edge cuts should be horizontal, thus Helvetica-style typefaces are preferred to vertical cut like Segoe, Frutiger, DejaVu Sans, or Open Sans.

*/

/* This seems to be where the default sans serif is specified, and vector, left to its own devices, will go with just whatever the user's default is */

BODY { font-family: Roboto, Univers, "Helvetica Std", HelveticaStd, Helvetica, "Nimbus Sans L", NimbusSansL, "Nimbus Sans", NimbusSans, "Helvetica Neue", HelveticaNeue, "Helvetica Neue Std", HelveticaNeueStd, Arial, "Liberation Sans", LiberationSans, Arimo, Lato, sans-serif }



/* This is for the '''Remember that you are only previewing this CSS. It has not yet been saved!''' note and anything else covered by this.  7622C red. */
.previewnote, DIV.previewnote { color: #97272C }


/* * * * * * * * * * * * */

/*

Reference Pantone list; some of which are no longer part of our brand specification, admittedly

CG1C:#D9D9D6
CG4C:#BBBCBC
CG5C:#B1B3B3
CG9C:#75787B
CG3C:#C8C9C7 
CG4C:#BBBCBC

Half CG1C:#EDEDEB


*/

/*
BODY { background-color:#FFFFFF; background-image:linear-gradient(#FFFFFF  0%, #FFFFFF  20%, #BBBCBC 100%); height:100%; background-repeat:no-repeat; }
*/


/* White background for pre-CSS3 CSS capable browsers */
BODY { background-color:#FFFFFF; }


#mw-head-base, #mw-page-base {background-color:#FFFFFF }

#mw-head { background-color:#FFFFFF }


/* Raise your hand if you know what CSS3 is */
@media  (min-width:1em)
   {
    #mw-head-base, #mw-page-base {background-color:#FFFFFF; background-image:linear-gradient(#FFFFFF 0%, FFFFFF 50%, #BBBCBC  100%) }
    BODY { background-color:#BBBCBC; background-image:linear-gradient(#FFFFFF  0%, #FFFFFF  20%, #BBBCBC 100%); height:100%; background-repeat:no-repeat; }
    }

/* Replacing Alegreya stack with Avant Garde stack; might want to install an @font-face here.

.mw-body H1, .mw-body H2, H1, H2, H3, H4, H5, H6, H7, H8 { font-family: Alegreya, "Bookman", "Century Schoolbook", "Linux Libertine",Georgia,Times,serif; }
*/

.mw-body H1, .mw-body H2, H1, H2, H3, H4, H5, H6, H7, H8 { font-family: "TeX Gyre Adventor", "Avant Garde", AvantGarde, "Avant Gard", "ITC Avant Garde", ITCAvantGarde, Futura, Futura-Bold, "Futura Bold", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", TwCen, "Twentieth Century", "Futura PT", "Heiti SC", "Heiti TC", "Didact Gothic", Questrial, Muli, Avenir, Sofia, "Gill Sans", GillSans, Kabel, OptiKabel, "Open Sans", "Noto Sans", NotoSans, Noto, "Droid Sans", DroidSans, Droid, "DejaVu Sans", DejaVuSans, "Bitstream Vera", BitstreamVera, Vera, "DejaVu LGC Sans", Geneva, sans-serif; }


H1, H2, H5, .mw-body H5 { font-weight:700 }
H3, H4, .mw-body H3, .mw-body H4  { font-weight:900 }
H6, .mw-body H6 { font-weight:400 }
A { text-decoration: underline; }
A:hover { color:#002D72 }
A:active { color:#97272C }
DIV#mw-panel div.portal H3, DIV#footer UL LI {  color:#000000 }

DIV#mw-panel DIV.portal DIV.body UL LI A:hover { color:#002D72 }
DIV#mw-panel DIV.portal DIV.body UL LI A:active { color:#97272C }

/* Edit Source */
TT, #wpTextbox1 
   {
    font-family: "Roboto Mono", RobotoMono, Inconsolata, Consolas, Monaco, "Bitstream Vera Sans", "DejaVu Sans Mono", "Deja Vu Sans Mono", "Liberation Mono", "Nu Sans Mono", "Source Code Pro", "Fira Mono", "Anonymous Pro", "Proggy Clean",   "Andale Mono", Hack, Dina, Crystal, monospace
    }

/* An attempt to keep image sizes under control given the engine-imposed limitations on image responsiveness */

IMG
   {
    max-width: 100%;
    height: auto;
    }