MediaWiki:Common.css: Difference between revisions
Content deleted Content added
m background colour, not colour of hover element |
m hide margin for responsive layout, change two column layout to 1000px |
||
(4 intermediate revisions by the same user not shown) | |||
Line 29:
margin-bottom:0.2em;
text-align:center;
border-radius:10px;
}
Line 40 ⟶ 41:
margin-bottom:0.2em;
text-align:center;
border-radius:10px;
}
Line 51 ⟶ 53:
margin-bottom:0.2em;
text-align:center;
border-radius:10px;
}
Line 62 ⟶ 65:
margin-bottom:0.2em;
text-align:center;
border-radius:10px;
}
Line 117 ⟶ 121:
font-weight:300;
}
/*.mw-body {
font-size:115%;
}*/
/******************************
* Hide category header 3
Line 183 ⟶ 187:
position: relative;
overflow: hidden;
max-width:
height: auto;
margin-bottom: 0;
Line 190 ⟶ 194:
max-width: 100%;
height: auto;
/*width: auto\9;*/
border-radius:10px;
}
.banner-box-wide {
Line 457 ⟶ 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 489:
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width:
.column {
flex: 50%;
Line 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 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;
}
|