MediaWiki:Common.css
MediaWiki interface page
More actions
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* CSS placed here will be applied to all skins */
/* Item Layout */
.item-layout {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 2em;
}
.item-main {
flex: 1;
min-width: 0;
}
.item-infobox {
flex: 0 0 100px;
padding: 1em;
}
/* Responsive para item-layout en móviles */
@media (max-width: 768px) {
.item-layout {
flex-direction: column;
gap: 1em;
}
.item-infobox {
flex: 1 1 auto;
width: 100%;
padding: 0.75em;
}
}
/* Recipe Container - Compatible con Citizen Theme */
.recipe-container {
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 8px;
padding: 1.5em;
margin: 1.5em 0;
box-shadow: var(--box-shadow-dialog);
}
.recipe-container .recipe-header {
color: var(--color-progressive);
font-size: 1.3em;
padding-bottom: 0.75em;
border-bottom: 2px solid var(--border-color-base);
margin: 0 0 1.5em 0;
}
.recipe-container .recipe-section-title {
color: var(--color-progressive);
margin-top: 0;
margin-bottom: 1em;
font-size: 1.1em;
}
/* Recipe Grid */
.recipe-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2em;
}
@media (max-width: 768px) {
.recipe-grid {
grid-template-columns: 1fr;
gap: 1.5em;
}
.recipe-container {
padding: 1em;
margin: 1em 0;
}
.recipe-container .recipe-header {
font-size: 1.2em;
padding-bottom: 0.5em;
margin-bottom: 1em;
}
.recipe-container .recipe-section-title {
font-size: 1em;
margin-bottom: 0.75em;
}
}
/* Table Styles */
.recipe-container .recipe-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-radius: 6px;
overflow: hidden;
}
.recipe-container .recipe-table-header {
background: var(--color-surface-2);
border-bottom: 2px solid var(--border-color-base);
}
.recipe-container .recipe-table th {
padding: 10px 8px;
text-align: left;
color: var(--color-progressive);
font-weight: 600;
}
.recipe-container .recipe-table th:last-child {
text-align: center;
width: 70px;
}
.recipe-container .recipe-table th:first-child {
width: 50px;
}
.recipe-container .recipe-table tr:not(.recipe-table-header) {
background: var(--color-surface-0);
transition: background 0.2s ease;
}
.recipe-container .recipe-table tr:not(.recipe-table-header):hover {
background: var(--color-surface-2);
}
.recipe-container .recipe-table td {
padding: 10px 8px;
border-bottom: 1px solid var(--border-color-subtle);
color: var(--color-base);
}
.recipe-container .recipe-table tr:last-child td {
border-bottom: none;
}
.recipe-container .recipe-table td:last-child {
text-align: center;
font-weight: 600;
color: var(--color-emphasized);
}
/* Responsive para tablas en móviles */
@media (max-width: 768px) {
.recipe-container .recipe-table th,
.recipe-container .recipe-table td {
padding: 8px 6px;
font-size: 0.9em;
}
.recipe-container .recipe-table th:first-child {
width: 40px;
}
.recipe-container .recipe-table th:last-child {
width: 60px;
}
}
/* Para tablas muy pequeñas, considera hacerlas scrolleables */
@media (max-width: 480px) {
.recipe-container {
overflow-x: auto;
}
.recipe-container .recipe-table {
min-width: 100%;
}
}
/* Crafting Details */
.crafting-details {
background: var(--color-surface-2);
border-radius: 8px;
padding: 1em;
}
.detail-item {
display: grid;
grid-template-columns: 40px 1fr;
gap: 0.75em;
align-items: center;
margin-bottom: 0.75em;
padding: 0.75em;
background: var(--color-surface-1);
border: 1px solid var(--border-color-subtle);
border-radius: 6px;
transition: border-color 0.2s ease;
}
.detail-item:hover {
border-color: var(--border-color-base);
}
.detail-item:last-child {
margin-bottom: 0;
}
.detail-icon {
width: 40px;
height: 40px;
background: var(--color-surface-0);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2em;
}
.detail-label {
font-size: 0.85em;
color: var(--color-base--subtle);
margin-bottom: 0.25em;
}
.detail-value {
font-weight: bold;
color: var(--color-emphasized);
}
/* Responsive para detalles en móviles */
@media (max-width: 768px) {
.crafting-details {
padding: 0.75em;
}
.detail-item {
padding: 0.6em;
gap: 0.6em;
margin-bottom: 0.6em;
}
.detail-icon {
width: 36px;
height: 36px;
font-size: 1.1em;
}
.detail-label {
font-size: 0.8em;
}
.detail-value {
font-size: 0.95em;
}
}
/* Ajustes adicionales para pantallas muy pequeñas */
@media (max-width: 480px) {
.detail-item {
grid-template-columns: 32px 1fr;
}
.detail-icon {
width: 32px;
height: 32px;
font-size: 1em;
}
}
/* Responsive general */
@media (max-width: 768px) {
.recipe-container > div > div:first-child {
grid-template-columns: 1fr !important;
}
}
/* HERO */
.mp-hero {
background: linear-gradient(135deg, #1e293b, #0f172a);
padding: 60px 20px;
text-align: center;
color: white;
border-radius: 8px;
margin-bottom: 25px;
}
.mp-hero h1 {
font-size: 42px;
margin: 0;
}
.mp-hero p {
font-size: 18px;
opacity: 0.9;
}
/* NOTICE */
.mp-notice {
display: flex;
align-items: center;
background: #fff3cd;
border: 2px solid #ff9800;
padding: 15px;
border-radius: 8px;
margin-bottom: 25px;
}
.mp-notice-icon {
font-size: 32px;
margin-right: 15px;
}
.mp-notice-text {
font-size: 16px;
color: #664d00;
}
/* GRID */
.mp-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
margin-bottom: 25px;
}
/* CARDS */
.mp-card {
background: #f8fafc;
border: 1px solid #cbd5e1;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.mp-card h2 {
margin-top: 0;
font-size: 20px;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 8px;
margin-bottom: 12px;
}
/* STATS */
.mp-stats {
text-align: center;
margin-top: 30px;
font-size: 16px;
color: #475569;
}