MediaWiki:Citizen.css

/* All CSS here will be loaded for users of the Citizen skin */ /******************************************************  Allow text, tables and images to sit side by side .citizen-table-wrapper { overflow-x: initial; }

/************************************************** * Styling for responsive flex boxes *************************************************/ /* * { box-sizing: border-box; } */

.flex-container { display: flex; flex-direction: row; }

.flex-item-1 { background-color:var(--color-surface-1); border:1px solid var(--border-color-base); color:var(--color-base-emphasized); border-radius: 8px; box-shadow: 0 3px 6px rgba(0,0,0,0.04),0 3px 6px rgba(0,0,0,0.0575); padding: 10px; margin: 5px; flex: 33.3%; box-sizing: border-box; }

.flex-item-2 { background-color:var(--color-surface-1); border:1px solid var(--border-color-base); color:var(--color-base-emphasized); border-radius: 8px; box-shadow: 0 3px 6px rgba(0,0,0,0.04),0 3px 6px rgba(0,0,0,0.0575); padding: 10px; margin: 5px; flex: 33.3%; box-sizing: border-box; }

.flex-item-3 { background-color:var(--color-surface-1); border:1px solid var(--border-color-base); color:var(--color-base-emphasized); border-radius: 8px; box-shadow: 0 3px 6px rgba(0,0,0,0.04),0 3px 6px rgba(0,0,0,0.0575); padding: 10px; margin: 5px; flex: 33.3%; box-sizing: border-box; }

/* Responsive layout - makes a one column-layout instead of two-column layout */ @media (max-width: 900px) { .flex-container { flex-direction: column; } }

/********************************************************* * Styling for a responsive image gallery with 4 coloumns *********************************************************/ .row { display: flex; flex-wrap: wrap; padding: 0 5px; }

/* Create four equal columns that sits next to each other */ .column { flex: 25%; max-width: 23%; padding: 0 5px; }

.column img { margin-top: 8px; vertical-align: middle; }

/* Responsive layout - makes a two column-layout instead of four columns */ @media (max-width: 800px) { .column { flex: 50%; max-width: 48%; } }

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media (max-width: 600px) { .column { flex: 100%; max-width: 100%; } }

/************************************************************ * citizen-basictable of plain white for clean look general use *******************************************************/ table.citizen-basictable { background-color: var(--color-surface-1); color: var(--color-base-emphasized); margin: 0; border: 1px solid var(--border-color-base); text-align: left; }

table.citizen-basictable > tr > th, table.citizen-basictable > tr > td, table.citizen-basictable > * > tr > th, table.citizen-basictable > * > tr > td { background-color: var(--color-surface-1); border: 1px solid var(--border-color-base); padding: 0.2em 0.4em; text-align: left; }

table.citizen-basictable > tr > th, table.citizen-basictable > * > tr > th { background-color: var(--color-surface-1); text-align: center; }

table.citizen-basictable > caption { font-weight: bold; }