MediaWiki:Common.css: Difference between revisions
From Nasqueron Agora
(.btn a: !important) |
(Variable Grid System. Licensed under GPL and MIT.) |
||
Line 19: | Line 19: | ||
background: #6caacc; | background: #6caacc; | ||
text-decoration: none; | text-decoration: none; | ||
} | |||
/* | |||
Variable Grid System. | |||
Learn more ~ http://www.spry-soft.com/grids/ | |||
Based on 960 Grid System - http://960.gs/ | |||
Licensed under GPL and MIT. | |||
*/ | |||
/* Containers | |||
----------------------------------------------------------------------------------------------------*/ | |||
.container_12 { | |||
margin-left: auto; | |||
margin-right: auto; | |||
width: 960px; | |||
} | |||
/* Grid >> Global | |||
----------------------------------------------------------------------------------------------------*/ | |||
.grid_1, | |||
.grid_2, | |||
.grid_3, | |||
.grid_4, | |||
.grid_5, | |||
.grid_6, | |||
.grid_7, | |||
.grid_8, | |||
.grid_9, | |||
.grid_10, | |||
.grid_11, | |||
.grid_12 { | |||
display:inline; | |||
float: left; | |||
position: relative; | |||
margin-left: 10px; | |||
margin-right: 10px; | |||
} | |||
/* Grid >> Children (Alpha ~ First, Omega ~ Last) | |||
----------------------------------------------------------------------------------------------------*/ | |||
.alpha { | |||
margin-left: 0; | |||
} | |||
.omega { | |||
margin-right: 0; | |||
} | |||
/* Grid >> 12 Columns | |||
----------------------------------------------------------------------------------------------------*/ | |||
.container_12 .grid_1 { | |||
width:60px; | |||
} | |||
.container_12 .grid_2 { | |||
width:140px; | |||
} | |||
.container_12 .grid_3 { | |||
width:220px; | |||
} | |||
.container_12 .grid_4 { | |||
width:300px; | |||
} | |||
.container_12 .grid_5 { | |||
width:380px; | |||
} | |||
.container_12 .grid_6 { | |||
width:460px; | |||
} | |||
.container_12 .grid_7 { | |||
width:540px; | |||
} | |||
.container_12 .grid_8 { | |||
width:620px; | |||
} | |||
.container_12 .grid_9 { | |||
width:700px; | |||
} | |||
.container_12 .grid_10 { | |||
width:780px; | |||
} | |||
.container_12 .grid_11 { | |||
width:860px; | |||
} | |||
.container_12 .grid_12 { | |||
width:940px; | |||
} | |||
/* Prefix Extra Space >> 12 Columns | |||
----------------------------------------------------------------------------------------------------*/ | |||
.container_12 .prefix_1 { | |||
padding-left:80px; | |||
} | |||
.container_12 .prefix_2 { | |||
padding-left:160px; | |||
} | |||
.container_12 .prefix_3 { | |||
padding-left:240px; | |||
} | |||
.container_12 .prefix_4 { | |||
padding-left:320px; | |||
} | |||
.container_12 .prefix_5 { | |||
padding-left:400px; | |||
} | |||
.container_12 .prefix_6 { | |||
padding-left:480px; | |||
} | |||
.container_12 .prefix_7 { | |||
padding-left:560px; | |||
} | |||
.container_12 .prefix_8 { | |||
padding-left:640px; | |||
} | |||
.container_12 .prefix_9 { | |||
padding-left:720px; | |||
} | |||
.container_12 .prefix_10 { | |||
padding-left:800px; | |||
} | |||
.container_12 .prefix_11 { | |||
padding-left:880px; | |||
} | |||
/* Suffix Extra Space >> 12 Columns | |||
----------------------------------------------------------------------------------------------------*/ | |||
.container_12 .suffix_1 { | |||
padding-right:80px; | |||
} | |||
.container_12 .suffix_2 { | |||
padding-right:160px; | |||
} | |||
.container_12 .suffix_3 { | |||
padding-right:240px; | |||
} | |||
.container_12 .suffix_4 { | |||
padding-right:320px; | |||
} | |||
.container_12 .suffix_5 { | |||
padding-right:400px; | |||
} | |||
.container_12 .suffix_6 { | |||
padding-right:480px; | |||
} | |||
.container_12 .suffix_7 { | |||
padding-right:560px; | |||
} | |||
.container_12 .suffix_8 { | |||
padding-right:640px; | |||
} | |||
.container_12 .suffix_9 { | |||
padding-right:720px; | |||
} | |||
.container_12 .suffix_10 { | |||
padding-right:800px; | |||
} | |||
.container_12 .suffix_11 { | |||
padding-right:880px; | |||
} | |||
/* Push Space >> 12 Columns | |||
----------------------------------------------------------------------------------------------------*/ | |||
.container_12 .push_1 { | |||
left:80px; | |||
} | |||
.container_12 .push_2 { | |||
left:160px; | |||
} | |||
.container_12 .push_3 { | |||
left:240px; | |||
} | |||
.container_12 .push_4 { | |||
left:320px; | |||
} | |||
.container_12 .push_5 { | |||
left:400px; | |||
} | |||
.container_12 .push_6 { | |||
left:480px; | |||
} | |||
.container_12 .push_7 { | |||
left:560px; | |||
} | |||
.container_12 .push_8 { | |||
left:640px; | |||
} | |||
.container_12 .push_9 { | |||
left:720px; | |||
} | |||
.container_12 .push_10 { | |||
left:800px; | |||
} | |||
.container_12 .push_11 { | |||
left:880px; | |||
} | |||
/* Pull Space >> 12 Columns | |||
----------------------------------------------------------------------------------------------------*/ | |||
.container_12 .pull_1 { | |||
left:-80px; | |||
} | |||
.container_12 .pull_2 { | |||
left:-160px; | |||
} | |||
.container_12 .pull_3 { | |||
left:-240px; | |||
} | |||
.container_12 .pull_4 { | |||
left:-320px; | |||
} | |||
.container_12 .pull_5 { | |||
left:-400px; | |||
} | |||
.container_12 .pull_6 { | |||
left:-480px; | |||
} | |||
.container_12 .pull_7 { | |||
left:-560px; | |||
} | |||
.container_12 .pull_8 { | |||
left:-640px; | |||
} | |||
.container_12 .pull_9 { | |||
left:-720px; | |||
} | |||
.container_12 .pull_10 { | |||
left:-800px; | |||
} | |||
.container_12 .pull_11 { | |||
left:-880px; | |||
} | |||
/* Clear Floated Elements | |||
----------------------------------------------------------------------------------------------------*/ | |||
/* http://sonspring.com/journal/clearing-floats */ | |||
.clear { | |||
clear: both; | |||
display: block; | |||
overflow: hidden; | |||
visibility: hidden; | |||
width: 0; | |||
height: 0; | |||
} | |||
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */ | |||
.clearfix:after { | |||
clear: both; | |||
content: ' '; | |||
display: block; | |||
font-size: 0; | |||
line-height: 0; | |||
visibility: hidden; | |||
width: 0; | |||
height: 0; | |||
} | |||
.clearfix { | |||
display: inline-block; | |||
} | |||
* html .clearfix { | |||
height: 1%; | |||
} | |||
.clearfix { | |||
display: block; | |||
} | } |
Revision as of 18:15, 5 January 2017
/* Call for actions button */
.btn {
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
color: #ffffff;
font-size: 1.4em;
background: #4d7b94;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.btn a, .btn a:hover, .btn a:visited {
color: white !important;
}
.btn:hover {
background: #6caacc;
text-decoration: none;
}
/*
Variable Grid System.
Learn more ~ http://www.spry-soft.com/grids/
Based on 960 Grid System - http://960.gs/
Licensed under GPL and MIT.
*/
/* Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
margin-left: auto;
margin-right: auto;
width: 960px;
}
/* Grid >> Global
----------------------------------------------------------------------------------------------------*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display:inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
}
/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/
.alpha {
margin-left: 0;
}
.omega {
margin-right: 0;
}
/* Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .grid_1 {
width:60px;
}
.container_12 .grid_2 {
width:140px;
}
.container_12 .grid_3 {
width:220px;
}
.container_12 .grid_4 {
width:300px;
}
.container_12 .grid_5 {
width:380px;
}
.container_12 .grid_6 {
width:460px;
}
.container_12 .grid_7 {
width:540px;
}
.container_12 .grid_8 {
width:620px;
}
.container_12 .grid_9 {
width:700px;
}
.container_12 .grid_10 {
width:780px;
}
.container_12 .grid_11 {
width:860px;
}
.container_12 .grid_12 {
width:940px;
}
/* Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .prefix_1 {
padding-left:80px;
}
.container_12 .prefix_2 {
padding-left:160px;
}
.container_12 .prefix_3 {
padding-left:240px;
}
.container_12 .prefix_4 {
padding-left:320px;
}
.container_12 .prefix_5 {
padding-left:400px;
}
.container_12 .prefix_6 {
padding-left:480px;
}
.container_12 .prefix_7 {
padding-left:560px;
}
.container_12 .prefix_8 {
padding-left:640px;
}
.container_12 .prefix_9 {
padding-left:720px;
}
.container_12 .prefix_10 {
padding-left:800px;
}
.container_12 .prefix_11 {
padding-left:880px;
}
/* Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .suffix_1 {
padding-right:80px;
}
.container_12 .suffix_2 {
padding-right:160px;
}
.container_12 .suffix_3 {
padding-right:240px;
}
.container_12 .suffix_4 {
padding-right:320px;
}
.container_12 .suffix_5 {
padding-right:400px;
}
.container_12 .suffix_6 {
padding-right:480px;
}
.container_12 .suffix_7 {
padding-right:560px;
}
.container_12 .suffix_8 {
padding-right:640px;
}
.container_12 .suffix_9 {
padding-right:720px;
}
.container_12 .suffix_10 {
padding-right:800px;
}
.container_12 .suffix_11 {
padding-right:880px;
}
/* Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .push_1 {
left:80px;
}
.container_12 .push_2 {
left:160px;
}
.container_12 .push_3 {
left:240px;
}
.container_12 .push_4 {
left:320px;
}
.container_12 .push_5 {
left:400px;
}
.container_12 .push_6 {
left:480px;
}
.container_12 .push_7 {
left:560px;
}
.container_12 .push_8 {
left:640px;
}
.container_12 .push_9 {
left:720px;
}
.container_12 .push_10 {
left:800px;
}
.container_12 .push_11 {
left:880px;
}
/* Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .pull_1 {
left:-80px;
}
.container_12 .pull_2 {
left:-160px;
}
.container_12 .pull_3 {
left:-240px;
}
.container_12 .pull_4 {
left:-320px;
}
.container_12 .pull_5 {
left:-400px;
}
.container_12 .pull_6 {
left:-480px;
}
.container_12 .pull_7 {
left:-560px;
}
.container_12 .pull_8 {
left:-640px;
}
.container_12 .pull_9 {
left:-720px;
}
.container_12 .pull_10 {
left:-800px;
}
.container_12 .pull_11 {
left:-880px;
}
/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}