MediaWiki:Common.css: Difference between revisions
m
hide margin for responsive layout, change two column layout to 1000px
(removed cleantable, adjusted padding for plaintable) |
m (hide margin for responsive layout, change two column layout to 1000px) |
||
| (7 intermediate revisions by the same user not shown) | |||
Line 28:
height:auto;
margin-bottom:0.2em;
text-align:center;
border-radius:10px;
}
Line 38 ⟶ 40:
height:auto;
margin-bottom:0.2em;
text-align:center;
border-radius:10px;
}
Line 48 ⟶ 52:
height:auto;
margin-bottom:0.2em;
text-align:center;
border-radius:10px;
}
Line 58 ⟶ 64:
height:auto;
margin-bottom:0.2em;
text-align:center;
border-radius:10px;
}
Line 113 ⟶ 121:
font-weight:300;
}
/*.mw-body {
font-size:115%;
}*/
/******************************
* Hide category header 3
Line 179 ⟶ 187:
position: relative;
overflow: hidden;
max-width:
height: auto;
margin-bottom: 0;
Line 186 ⟶ 194:
max-width: 100%;
height: auto;
/*width: auto\9;*/
border-radius:10px;
}
.banner-box-wide {
Line 279 ⟶ 288:
table.plaintable > caption {
font-weight: bold;
}▼
table.plaintable td:hover {
}
Line 449 ⟶ 462:
}
* Styling for a responsive image gallery with 4 coloumns
* FLEX FOR HORIZONTAL INFOBOXES▼
*********************************************************/
.row {
/* Create two unequal columns that sits next to each other */▼
display: flex;
/* left column */▼
.left-side-infobox {▼
▲ background-color: #fff;
/*padding: 10px;*/▼
margin: 10px;▼
}
/* Create four equal columns that sits next to each other */
/* right column */▼
.right-side-infobox {▼
▲ flex: 50%;
background-color: #fff;▼
/*padding: 10px;*/▼
margin: 10px;▼
▲}
▲/* Create four equal columns that sits next to each other - useful for galleries
.column {
flex: 25%; /*1*/
max-width: 25%; /*100%*/
/*background-color:var(--color-surface-1);*/
padding: 0 4px;▼
/*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);*/
/*margin: 5px;*/
}
Line 481 ⟶ 489:
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width:
.column {
flex: 50%;
Line 489 ⟶ 497:
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.column {
Line 495 ⟶ 503:
max-width: 100%;
}
}
/******************************
▲ * FLEX FOR HORIZONTAL INFOBOXES
******************************/
▲/* Create two unequal columns that sits next to each other */
▲/* left column */
▲.left-side-infobox {
flex: 50%;
▲ background-color: #fff;
▲ /*padding: 10px;*/
▲ margin: 10px;
}
▲/* right column */
▲.right-side-infobox {
flex: 50%;
background-color: #fff;
▲ /*padding: 10px;*/
▲ margin: 10px;
}
| |||