MediaWiki:Mobile.css: Difference between revisions
(New Page: "→CSS placed here will affect users of the mobile site: →* center table columns styles *: table.center-col-1 td:first-child, table.center-col-2 td:first-child + td, table.center-...") |
No edit summary |
||
Line 30: | Line 30: | ||
width: 25em; | width: 25em; | ||
} | } | ||
/* FIX WIDTH ON MOBILE */ | |||
body { | |||
width: 100%; | |||
margin:0; | |||
} | |||
/* PREVENT FLOATS */ | |||
div.tright, div.floatright, table.floatright { | |||
float: none; | |||
} | |||
/* FLEX */ | |||
.flex-container { | |||
display: flex; | |||
flex-direction: row; | |||
align-items: center; | |||
justify-content: center; | |||
flex-wrap: wrap; | |||
} | |||
/* Responsive layout - makes a one column layout instead of a two-column layout */ | |||
@media (max-width: 800px) { | |||
.flex-container { | |||
flex-direction: column; | |||
} | |||
} | |||
.flex-container div { | |||
border: none; | |||
background-color: white; | |||
margin: 5px; | |||
} | |||
.flex-container div span a, .flex-container div span a.new { | |||
color: #333333; | |||
padding: 1px 3px 1px 3px; | |||
text-align: center; | |||
font-weight: bold; | |||
margin: auto; | |||
display: block; | |||
width: 100%; | |||
text-decoration: none; | |||
} | |||
.flex-container div span a.new { | |||
color: darkred; | |||
} | |||
.flex-container div:hover, .flex-container div:hover div { | |||
background-color: red; | |||
} | |||
.flex-container div:hover span a, .flex-container div span a:hover { | |||
color: white; | |||
text-decoration:none; | |||
} | |||
.flex-container img { | |||
object-fit: contain; | |||
width: 100px; | |||
height: 50px; | |||
} | |||
.nofit img { object-fit: contain; } |
Latest revision as of 16:59, 16 February 2021
/* CSS placed here will affect users of the mobile site */ /** center table columns styles **/ table.center-col-1 td:first-child, table.center-col-2 td:first-child + td, table.center-col-3 td:first-child + td + td, table.center-col-4 td:first-child + td + td + td { text-align: center; } /** character maps styles for GXT article **/ table.charmap { text-align: center; } table.charmap td, table.charmap th { width: 2em; height: 2em; } table.charmap td { font-family: monospace; font-size: 150%; background-color: #f9f9f9; border: 1px solid #ddd; } /** styles for Menu article **/ table.menu tr:target { background-color: lightblue; } table.menu td:first-child td:first-child + td { width: 25em; } /* FIX WIDTH ON MOBILE */ body { width: 100%; margin:0; } /* PREVENT FLOATS */ div.tright, div.floatright, table.floatright { float: none; } /* FLEX */ .flex-container { display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; } /* Responsive layout - makes a one column layout instead of a two-column layout */ @media (max-width: 800px) { .flex-container { flex-direction: column; } } .flex-container div { border: none; background-color: white; margin: 5px; } .flex-container div span a, .flex-container div span a.new { color: #333333; padding: 1px 3px 1px 3px; text-align: center; font-weight: bold; margin: auto; display: block; width: 100%; text-decoration: none; } .flex-container div span a.new { color: darkred; } .flex-container div:hover, .flex-container div:hover div { background-color: red; } .flex-container div:hover span a, .flex-container div span a:hover { color: white; text-decoration:none; } .flex-container img { object-fit: contain; width: 100px; height: 50px; } .nofit img { object-fit: contain; }