MediaWiki:Vector.css: Difference between revisions

From JamiroWiki
Jump to navigation Jump to search
(Created page with "→‎All CSS here will be loaded for users of the Vector skin: →‎set max width and fix the background: html, body { position: relative; margin-left: auto !important; margin-right: auto !important; max-width: 1280px; background-position: top left; background-repeat: repeat-x; background-size: 100% 5em; background-image: url(/skins/Vector/images/page-fade.png); background-color: #f6f6f6; backgrou...")
 
No edit summary
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* All CSS here will be loaded for users of the Vector skin */
/* All CSS here will be loaded for users of the Vector skin */


  /* set max width and fix the background */
 
    html,
/**
    body {
  * From https://www.mediawiki.org/wiki/Thread:Project:Support_desk/max-width_in_Vector_skin_to_control_site_layout_width/reply
    position: relative;
* Skin Vector Max Width, see skinVectorWidthWrapper::onAfterFinalPageOutput
    margin-left: auto !important;
**/
    margin-right: auto !important;
#skin-vector-maxwidth-wrapper {
    max-width: 1280px;
    position: relative;
        background-position: top left;
    margin-left: auto;
        background-repeat: repeat-x;
    margin-right: auto;
    background-size: 100% 5em;
    max-width: 1460px;
        background-image: url(/skins/Vector/images/page-fade.png);
}
        background-color: #f6f6f6;
 
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(50%,#ffffff),color-stop(100%,#f6f6f6));
html,
        background-image: -webkit-linear-gradient(top,#ffffff 50%,#f6f6f6 100%);
body {
        background-image: -moz-linear-gradient(top,#ffffff 50%,#f6f6f6 100%);
    background-position: top left;
        background-image: linear-gradient(#ffffff 50%,#f6f6f6 100%);
    background-repeat: repeat-x;
    }
    background-size: 100% 5em;
   
    background-image: url(/skins/Vector/images/page-fade.png);
    /* set blue right border */
    background-color: #f6f6f6;
    .mw-body { border-right: 1px solid #A7D7F9; }
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(50%,#ffffff),color-stop(100%,#f6f6f6));
   
    background-image: -webkit-linear-gradient(top,#ffffff 50%,#f6f6f6 100%);
    /** fix the position of:
    background-image: -moz-linear-gradient(top,#ffffff 50%,#f6f6f6 100%);
    personal user menu
    background-image: linear-gradient(#ffffff 50%,#f6f6f6 100%);
    search bar
}
    the pop-up indicator of language selector
 
    search suggestions
@media print {
    **/
#skin-vector-maxwidth-wrapper {
    #p-personal { right: 3pt; }
    position: relative;
    #p-search { margin-right: 3pt; }
    margin-left: 0;
    .imeselector { position: fixed; }
    margin-right: 0;
    .suggestions { right: 3pt !important; }
    max-width: 100%;
}
html,
body {
    background:none;
}
}
 
/**
* Skin Vector Max Width: fix the position of:
*    personal user menu
*    search bar
*    add right blue border
**/
#p-personal { right: 3pt; }
#p-search { margin-right: 3pt; }
.mw-body { border-right: 1px solid #A7D7F9; }

Latest revision as of 15:28, 22 February 2026

/* All CSS here will be loaded for users of the Vector skin */


/**
 * From https://www.mediawiki.org/wiki/Thread:Project:Support_desk/max-width_in_Vector_skin_to_control_site_layout_width/reply
 * Skin Vector Max Width, see skinVectorWidthWrapper::onAfterFinalPageOutput
**/
#skin-vector-maxwidth-wrapper {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 1460px;
}

html,
body {
    background-position: top left;
    background-repeat: repeat-x;
    background-size: 100% 5em;
    background-image: url(/skins/Vector/images/page-fade.png);
    background-color: #f6f6f6;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(50%,#ffffff),color-stop(100%,#f6f6f6));
    background-image: -webkit-linear-gradient(top,#ffffff 50%,#f6f6f6 100%);
    background-image: -moz-linear-gradient(top,#ffffff 50%,#f6f6f6 100%);
    background-image: linear-gradient(#ffffff 50%,#f6f6f6 100%);
}

@media print {
	#skin-vector-maxwidth-wrapper {
	    position: relative;
	    margin-left: 0;
	    margin-right: 0;
	    max-width: 100%;
	}
	
	html,
	body {
	    background:none;
	}
}

/**
 * Skin Vector Max Width: fix the position of:
 *    personal user menu
 *    search bar
 *    add right blue border
**/
#p-personal { right: 3pt; }
#p-search { margin-right: 3pt; }
.mw-body { border-right: 1px solid #A7D7F9; }