MediaWiki:Common.css: Difference between revisions

From FamilySearch Wiki
(Fixed search box and 'Go' button on main page so Go button is on the same line as box.)
(Adding column spacing)
Line 27: Line 27:
#newHeading {
#newHeading {
margin-top:0;}
margin-top:0;}
/* Define spacing and # of columns based on screen size */
@media screen and (min-width: 1400px) {
.column-spacing-fullscreen{
  column-count: 6;
padding-right: 9% !important;
}}
@media screen and (min-width: 1200px) and (max-width: 1399px) {
.column-spacing-fullscreen{
  column-count: 5;
}}
@media screen and (min-width: 900px) and (max-width:1199px) {
.column-spacing-fullscreen{
  column-count: 4;
}}
@media screen and (min-width: 600px) and (max-width:899px) {
.column-spacing-fullscreen{
  column-count: 3;
}}
@media screen and (max-width:745px) {
.column-spacing-fullscreen{
  column-count: 2;
}}
@media screen and (max-width:500px) {
.column-spacing-fullscreen{
  column-count: 1;
}}
/* Define spacing and # of columns based on screen size - however,
/* this section assumes that only half the screen is available for
/* the columns.  Even though the screen size may be 1400px, the
/* available space for the columns is half that, or 700px. */
@media screen and (min-width: 1400px) {
.column-spacing-halfscreen{
  column-count: 3;
}}
@media screen and (min-width: 1200px) and (max-width: 1399px) {
.column-spacing-halfscreen{
  column-count: 2;
}}
@media screen and (min-width: 900px) and (max-width:1199px) {
.column-spacing-halfscreen{
  column-count: 1;
}}
.column-spacing-halfscreen li, .column-spacing-fullscreen li {padding-right:5px;}

Revision as of 21:15, 13 September 2019

/* Set width of search box to 70%, so 'go' button stays inline. */
#bodySearchInputHomePageSearchBox {
    width: 70%;
}

/* change the box around the code feature */
code {
    color: #000;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}
pre, code, tt, kbd, samp, .mw-code {
    font-family: monospace,Courier;
}

/* make sure missing pages remain colored correctly after visiting */
a.new:visited, #p-personal a.new:visited {
    color: #a55858 !important;
}

/* change border on input forms to be 1pm, instead of 2px, and grey instead of black */
form input {
/*    border: 1px solid !important;*/
    border-color: darkgrey !important;
}

#newHeading {
margin-top:0;}

/* Define spacing and # of columns based on screen size */
@media screen and (min-width: 1400px) {
 .column-spacing-fullscreen{
   column-count: 6;
	padding-right: 9% !important;
}}	
@media screen and (min-width: 1200px) and (max-width: 1399px) {
 .column-spacing-fullscreen{
   column-count: 5;
}}
@media screen and (min-width: 900px) and (max-width:1199px) {
 .column-spacing-fullscreen{
   column-count: 4;
}}
@media screen and (min-width: 600px) and (max-width:899px) {
 .column-spacing-fullscreen{
   column-count: 3;
 }}
@media screen and (max-width:745px) {
 .column-spacing-fullscreen{
   column-count: 2;
}}
@media screen and (max-width:500px) {
 .column-spacing-fullscreen{
   column-count: 1;
}}

/* Define spacing and # of columns based on screen size - however, 
/* this section assumes that only half the screen is available for 
/* the columns.  Even though the screen size may be 1400px, the 
/* available space for the columns is half that, or 700px. */

@media screen and (min-width: 1400px) {
 .column-spacing-halfscreen{
   column-count: 3;
}}	
@media screen and (min-width: 1200px) and (max-width: 1399px) {
 .column-spacing-halfscreen{
   column-count: 2;
}}
@media screen and (min-width: 900px) and (max-width:1199px) {
 .column-spacing-halfscreen{
   column-count: 1;
}}
.column-spacing-halfscreen li, .column-spacing-fullscreen li {padding-right:5px;}