Array

MediaWiki:Common.css: Difference between revisions

No edit summary
No edit summary
 
(156 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* Responsive: Related articles - título arriba, contenido abajo */
 
@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {
/* Removing the numbers and bullet points from table of contents */
.tocnumber {display: none}
/* Solución tipo table-responsive de Bootstrap - scroll solo en las tablas, no en el contenedor */
.tocmarker {display: none}
/* El contenedor padre NO tiene scroll, solo las tablas individuales */
 
.mw-parser-output,
/* Template:TOC limit styles */
.mw-content-text {
.toclimit-2 .toclevel-1 ul,  
width: 100% !important;
.toclimit-3 .toclevel-2 ul,
max-width: 100% !important;
.toclimit-4 .toclevel-3 ul,
overflow-x: visible !important;
.toclimit-5 .toclevel-4 ul,
}
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
/* Las tablas tienen scroll horizontal individual - similar a .table-responsive de Bootstrap */
  display: none;
/* Cada tabla es un contenedor con scroll independiente */
}
/* Usar flexbox para reordenar caption primero, pero mantener estructura para collapse */
 
.mw-parser-output table.wikitable,
/* <source lang="css"> */
.mw-content-text table.wikitable,
 
.mw-parser-output table,
/* {{header}} */
.mw-content-text table {
table.headertemplate {
display: flex !important;
width:100%;
flex-direction: column !important;
text-align:center;
overflow-x: auto !important;
font-size:0.9em;
overflow-y: hidden !important;
}
-webkit-overflow-scrolling: touch !important;
.headertemplate .header_backlink,
width: 100% !important;
.headertemplate .header_forelink {
max-width: 100% !important;
width:20%;
table-layout: auto !important;
font-size:0.9em;
margin: 1em 0 !important;
line-height:normal;
align-items: flex-start !important;
}
}
.header_notes {
width:100%;
/* Caption debe aparecer primero usando order */
font-size:0.9em;
.mw-parser-output table.wikitable caption,
}
.mw-content-text table.wikitable caption,
.headertemplate .header_title { width: 60%; }
.mw-parser-output table caption,
.headertemplate .header_backlink { text-align:left; }
.mw-content-text table caption {
.headertemplate .header_forelink { text-align:right; }
display: block !important;
 
text-align: left !important;
 
width: 100% !important;
/**
order: -1 !important;
* Style for horizontal lists (separator following item).
margin-bottom: 0.5em !important;
* @source https://www.mediawiki.org/wiki/Snippets/Horizontal_lists
flex-shrink: 0 !important;
* @revision 9 (2016-08-10)
}
* @author [[User:Edokter]]
*/
/* El tbody/thead mantiene la estructura de tabla con ancho fijo para activar scroll */
.hlist dl,
/* Mantener como table para que el JavaScript de collapse funcione */
.hlist ol,
/* Usar min-width para activar scroll horizontal en el contenedor flex */
.hlist ul {
.mw-parser-output table.wikitable tbody,
margin: 0;
.mw-content-text table.wikitable tbody,
padding: 0;
.mw-parser-output table tbody,
}
.mw-content-text table tbody,
 
.mw-parser-output table.wikitable thead,
/* Display list items inline */
.mw-content-text table.wikitable thead,
.hlist dd,
.mw-parser-output table thead,
.hlist dt,
.mw-content-text table thead {
.hlist li {
display: table !important;
/* don't trust the note that says margin doesn't work with inline
width: 100% !important;
* removing margin: 0 makes dds have margins again */
min-width: 2000px !important;
margin: 0;
order: 1 !important;
display: inline;
flex-shrink: 0 !important;
}
align-self: stretch !important;
 
}
/* Display nested lists inline */
.hlist.inline,
/* Restaurar estructura de filas y celdas */
.hlist.inline dl,
.mw-parser-output table.wikitable tr,
.hlist.inline ol,
.mw-content-text table.wikitable tr,
.hlist.inline ul,
.mw-parser-output table tr,
.hlist dl dl,
.mw-content-text table tr {
.hlist dl ol,
display: table-row !important;
.hlist dl ul,
}
.hlist ol dl,
.hlist ol ol,
/* Sobrescribir estilos inline de width en las tablas */
.hlist ol ul,
.mw-parser-output table.wikitable[style*="width"],
.hlist ul dl,
.mw-content-text table.wikitable[style*="width"],
.hlist ul ol,
.mw-parser-output table[style*="width"],
.hlist ul ul {
.mw-content-text table[style*="width"] {
display: inline;
display: flex !important;
}
flex-direction: column !important;
 
overflow-x: auto !important;
/* Hide empty list items */
overflow-y: hidden !important;
.hlist .mw-empty-li,
-webkit-overflow-scrolling: touch !important;
.hlist .mw-empty-elt {
width: 100% !important;
display: none;
max-width: 100% !important;
}
}
 
/* Generate interpuncts */
/* Las celdas tienen anchos razonables y permiten que el texto se ajuste normalmente */
.hlist dt:after {
/* Sin max-width excesivo para evitar celdas de 12000px */
content: ": ";
.mw-parser-output table.wikitable th,
}
.mw-content-text table.wikitable th,
 
.mw-parser-output table.wikitable td,
.hlist dd:after,
.mw-content-text table.wikitable td,
.hlist li:after {
.mw-parser-output table th,
content: "  •  ";
.mw-content-text table th,
font-weight: bold;
.mw-parser-output table td,
}
.mw-content-text table td {
 
white-space: normal !important;
.hlist dd:last-child:after,
word-wrap: break-word !important;
.hlist dt:last-child:after,
overflow-wrap: break-word !important;
.hlist li:last-child:after {
width: revert-layer !important;
content: none;
max-width: 100% !important;
}
}
 
/* Add parentheses around nested lists */
/* Excluir tablas dentro de .related-articles-box - revertir estilos */
.hlist dd dd:first-child:before,
.related-articles-box table {
.hlist dd dt:first-child:before,
display: table !important;
.hlist dd li:first-child:before,
overflow-x: visible !important;
.hlist dt dd:first-child:before,
overflow-y: visible !important;
.hlist dt dt:first-child:before,
width: auto !important;
.hlist dt li:first-child:before,
min-width: auto !important;
.hlist li dd:first-child:before,
max-width: 100% !important;
.hlist li dt:first-child:before,
}
.hlist li li:first-child:before {
content: " (";
.related-articles-box table tbody,
font-weight: normal;
.related-articles-box table thead {
}
display: table-row-group !important;
 
min-width: auto !important;
.hlist dd dd:last-child:after,
}
.hlist dd dt:last-child:after,
.hlist dd li:last-child:after,
.related-articles-box table[style*="width"] {
.hlist dt dd:last-child:after,
display: table !important;
.hlist dt dt:last-child:after,
overflow-x: visible !important;
.hlist dt li:last-child:after,
overflow-y: visible !important;
.hlist li dd:last-child:after,
width: auto !important;
.hlist li dt:last-child:after,
min-width: auto !important;
.hlist li li:last-child:after {
max-width: 100% !important;
content: ")";
}
font-weight: normal;
}
.related-articles-box table th,
 
.related-articles-box table td {
/* Put ordinals in front of ordered list items */
width: auto !important;
.hlist ol {
max-width: 100% !important;
counter-reset: listitem;
}
}
 
  }
.hlist ol > li {
counter-increment: listitem;
}
 
.hlist ol > li:before {
content: " " counter(listitem) "\a0";
}
 
.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
content: " (" counter(listitem) "\a0";
}
 
/* Restore classic float alignment for images in Parsoid */
figure.mw-halign-right {
    float: right;
    clear: right;
    margin: 0.5em 0 1em 1em;
}
 
figure.mw-halign-left {
    float: left;
    clear: left;
    margin: 0.5em 1em 1em 0;
}
 
figure.mw-halign-center {
    margin-left: auto;
    margin-right: auto;
    display: table;
}
 
/* Prevent text overlapping */
figure.mw-halign-right,
figure.mw-halign-left {
    max-width: 100%;
}
 
/* </source> */
 
/* Hide page title ONLY on normal view pages */
body.action-view #firstHeading {
    display: none;
}
 
/* COLLAPSE HEADERS */
.collapsible-header {
    cursor: pointer;
    user-select: none;
    padding: 0.5em 0;
    border-bottom: 1px solid #a2a9b1;
    display: flex;
    align-items: center;
    line-height: 1.3;
}
.collapsible-header > * {
    display: inline;
    margin: 0 !important;
    padding: 0;
    border: none;
}
.collapse-toggle {
    font-size: 0.75em;
    color: #54595d;
    display: inline-flex;
    align-items: center;
    transition: none;
    margin-right: 12px;
    font-weight: normal;
    line-height: 1;
    flex-shrink: 0;
    align-self: center;
}
.collapsible-header.open .collapse-toggle {
    transform: none;
}
.collapsible-content {
    padding: 0 !important;
    margin: 0.5em 0 1em 0;
    border-bottom: none;
    font-size: 0.875em;
    line-height: 1.6;
    font-family: sans-serif;
    color: #202122;
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-indent: 0 !important;
}
.collapsible-content *,
.collapsible-content pre,
.collapsible-content code {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
}
.collapsible-content p {
    margin: 0.5em 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
}
.collapsible-content p:first-child {
    margin-top: 0.5em !important;
}
.collapsible-content a {
    color: #0645ad;
    text-decoration: none;
}
.collapsible-content a:visited {
    color: #0b0080;
}
.collapsible-content a:hover {
    text-decoration: underline;
}

Latest revision as of 15:00, 29 January 2026

/* Responsive: Related articles - título arriba, contenido abajo */
@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {
 	
	/* Solución tipo table-responsive de Bootstrap - scroll solo en las tablas, no en el contenedor */
	/* El contenedor padre NO tiene scroll, solo las tablas individuales */
	.mw-parser-output,
	.mw-content-text {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: visible !important;
	}
	
	/* Las tablas tienen scroll horizontal individual - similar a .table-responsive de Bootstrap */
	/* Cada tabla es un contenedor con scroll independiente */
	/* Usar flexbox para reordenar caption primero, pero mantener estructura para collapse */
	.mw-parser-output table.wikitable,
	.mw-content-text table.wikitable,
	.mw-parser-output table,
	.mw-content-text table {
		display: flex !important;
		flex-direction: column !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		width: 100% !important;
		max-width: 100% !important;
		table-layout: auto !important;
		margin: 1em 0 !important;
		align-items: flex-start !important;
	}
	
	/* Caption debe aparecer primero usando order */
	.mw-parser-output table.wikitable caption,
	.mw-content-text table.wikitable caption,
	.mw-parser-output table caption,
	.mw-content-text table caption {
		display: block !important;
		text-align: left !important;
		width: 100% !important;
		order: -1 !important;
		margin-bottom: 0.5em !important;
		flex-shrink: 0 !important;
	}
	
	/* El tbody/thead mantiene la estructura de tabla con ancho fijo para activar scroll */
	/* Mantener como table para que el JavaScript de collapse funcione */
	/* Usar min-width para activar scroll horizontal en el contenedor flex */
	.mw-parser-output table.wikitable tbody,
	.mw-content-text table.wikitable tbody,
	.mw-parser-output table tbody,
	.mw-content-text table tbody,
	.mw-parser-output table.wikitable thead,
	.mw-content-text table.wikitable thead,
	.mw-parser-output table thead,
	.mw-content-text table thead {
		display: table !important;
		width: 100% !important;
		min-width: 2000px !important;
		order: 1 !important;
		flex-shrink: 0 !important;
		align-self: stretch !important;
	}
	
	/* Restaurar estructura de filas y celdas */
	.mw-parser-output table.wikitable tr,
	.mw-content-text table.wikitable tr,
	.mw-parser-output table tr,
	.mw-content-text table tr {
		display: table-row !important;
	}
	
	/* Sobrescribir estilos inline de width en las tablas */
	.mw-parser-output table.wikitable[style*="width"],
	.mw-content-text table.wikitable[style*="width"],
	.mw-parser-output table[style*="width"],
	.mw-content-text table[style*="width"] {
		display: flex !important;
		flex-direction: column !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	
	/* Las celdas tienen anchos razonables y permiten que el texto se ajuste normalmente */
	/* Sin max-width excesivo para evitar celdas de 12000px */
	.mw-parser-output table.wikitable th,
	.mw-content-text table.wikitable th,
	.mw-parser-output table.wikitable td,
	.mw-content-text table.wikitable td,
	.mw-parser-output table th,
	.mw-content-text table th,
	.mw-parser-output table td,
	.mw-content-text table td {
		white-space: normal !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		width: revert-layer !important;
		max-width: 100% !important;
	}
	
	/* Excluir tablas dentro de .related-articles-box - revertir estilos */
	.related-articles-box table {
		display: table !important;
		overflow-x: visible !important;
		overflow-y: visible !important;
		width: auto !important;
		min-width: auto !important;
		max-width: 100% !important;
	}
	
	.related-articles-box table tbody,
	.related-articles-box table thead {
		display: table-row-group !important;
		min-width: auto !important;
	}
	
	.related-articles-box table[style*="width"] {
		display: table !important;
		overflow-x: visible !important;
		overflow-y: visible !important;
		width: auto !important;
		min-width: auto !important;
		max-width: 100% !important;
	}
	
	.related-articles-box table th,
	.related-articles-box table td {
		width: auto !important;
		max-width: 100% !important;
	}
	
  }
Retrieved from "https://www.fairlatterdaysaints.org/answers/index.php?title=MediaWiki:Common.css&oldid=265280"