MediaWiki:Common.css: Difference between revisions
m
hide margin for responsive layout, change two column layout to 1000px
(add res-img with max of 1000px) |
m (hide margin for responsive layout, change two column layout to 1000px) |
||
| (8 intermediate revisions by the same user not shown) | |||
Line 28:
height:auto;
margin-bottom:0.2em;
border-radius:10px;
}
Line 38 ⟶ 40:
height:auto;
margin-bottom:0.2em;
border-radius:10px;
}
Line 48 ⟶ 52:
height:auto;
margin-bottom:0.2em;
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 246 ⟶ 255:
.mainpage_box h3 {
margin:0.1em 0;
}▼
/******************************▼
******************************/▼
background-color: #f2f2f2;▼
color: #444;▼
margin: 1em 0;▼
border: 1px solid #fff;▼
▲ text-align: left;
}▼
padding: 0.4em;▼
▲ text-align: left;
}▼
background-color: #50ab8a;▼
▲ text-align: center;
padding: 10px 5px;▼
}
Line 296 ⟶ 274:
table.plaintable > * > tr > td {
border: 2px solid #fff;
padding: 0.1em 0.4em 0.1em 0.6em;
text-align: left;
}
Line 310 ⟶ 288:
table.plaintable > caption {
font-weight: bold;
▲}
table.plaintable td:hover {
}
Line 480 ⟶ 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%;
/*padding: 10px;*/▼
▲/* Create four equal columns that sits next to each other - useful for galleries
.column {
flex: 25%; /*1*/
max-width: 25%; /*100%*/
/*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);*/
}
Line 512 ⟶ 489:
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width:
.column {
flex: 50%;
Line 520 ⟶ 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 526 ⟶ 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%;
▲}
▲/* right column */
▲.right-side-infobox {
flex: 50%;
▲ /*padding: 10px;*/
▲ margin: 10px;
▲}
| |||