Difference between revisions of "MediaWiki:Common.css"

From Venlo Samenwerkingswijzer
(Created page with "→‎CSS placed here will be applied to all skins: →‎* Search box search symbol to the right: .left-inner-addon { position: relative; } .left-inner-addon input { pa...")
 
Line 25: Line 25:
 
     padding: 10px 12px;
 
     padding: 10px 12px;
 
     pointer-events: none;
 
     pointer-events: none;
 +
}
 +
 +
 +
/** Navbar **/
 +
 +
.navbar-default {
 +
background-color:#efefef;
 +
border-color:#efefef;
 +
}
 +
 +
.navbar-nav > li > a {
 +
    color: #fff !Important;
 +
}
 +
 +
.navbar {
 +
border-radius: 0px;
 +
}
 +
 +
.p-tb .navbar-nav > li > a {
 +
padding: 10px 15px;
 +
}
 +
 +
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
 +
margin-right: 0px;
 +
margin-left: 0px;
 +
}
 +
 +
@media screen and (min-width: 992px) {
 +
.table-in-three-columns {
 +
    display:inline-table;width:49%;
 +
}
 +
}
 +
@media screen and (min-width: 1200px) {
 +
.table-in-three-columns {
 +
    display:inline-table;width:33%;
 +
}
 +
}
 +
 +
.columns {
 +
    -webkit-column-count: auto; /* Chrome, Safari, Opera */
 +
    -moz-column-count: auto; /* Firefox */
 +
    column-count: auto;
 +
}
 +
@media screen and (min-width: 992px) {
 +
.three-columns {
 +
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
 +
    -moz-column-count: 2; /* Firefox */
 +
    column-count: 2;
 +
}
 +
}
 +
@media screen and (min-width: 1200px) {
 +
.three-columns {
 +
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
 +
    -moz-column-count: 3; /* Firefox */
 +
    column-count: 3;
 +
}
 +
}
 +
 +
@media screen and (min-width: 992px) {
 +
.four-columns {
 +
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
 +
    -moz-column-count: 2; /* Firefox */
 +
    column-count: 2;
 +
}
 +
}
 +
@media screen and (min-width: 1200px) {
 +
.four-columns {
 +
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
 +
    -moz-column-count: 4; /* Firefox */
 +
    column-count: 4;
 +
}
 +
}
 +
 +
#wikiPreview > div.mw-content-ltr > div > div > div {
 +
clear: both;
 +
}
 +
 +
.sidebar-nav {
 +
    padding: 9px 0;
 +
}
 +
 +
/** menu dropdown voorheen uitgecommentarieerd */
 +
@media screen and (min-width: 992px) {
 +
.dropdown-menu .sub-menu {
 +
    left: 100%;
 +
    position: absolute;
 +
    top: 0;
 +
    visibility: hidden;
 +
    margin-top: -1px;
 +
}
 +
 +
.dropdown-menu li:hover .sub-menu {
 +
    visibility: visible;
 +
}
 +
 +
.dropdown:hover .dropdown-menu {
 +
    display: block;
 +
}
 +
 +
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
 +
    margin-top: 0;
 +
}
 +
 +
.nav-tabs > li > a {
 +
  border:1px solid grey;
 +
}
 +
.nav-tabs > li.active > a {
 +
  background-color:#CCC;
 +
}
 +
 +
.navbar .sub-menu:before {
 +
    border-bottom: 7px solid transparent;
 +
    border-left: none;
 +
    border-right: 7px solid rgba(0, 0, 0, 0.2);
 +
    border-top: 7px solid transparent;
 +
    left: -7px;
 +
    top: 10px;
 +
}
 +
.navbar .sub-menu:after {
 +
    border-top: 6px solid transparent;
 +
    border-left: none;
 +
    border-right: 6px solid #fff;
 +
    border-bottom: 6px solid transparent;
 +
    left: 10px;
 +
    top: 11px;
 +
    left: -6px;
 +
}
 
}
 
}

Revision as of 15:08, 26 October 2016

/* CSS placed here will be applied to all skins */

/** Search box search symbol to the right */
.left-inner-addon {
    position: relative;
}
.left-inner-addon input {
    padding-left: 30px;    
}
.left-inner-addon i {
    position: absolute;
    padding: 10px 12px;
    pointer-events: none;
}
 
.right-inner-addon {
    position: relative;
}
.right-inner-addon input {
    padding-right: 30px;    
}
.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 10px 12px;
    pointer-events: none;
}


/** Navbar **/

.navbar-default {
	background-color:#efefef;
	border-color:#efefef;
}

.navbar-nav > li > a {
    color: #fff !Important;
}

.navbar {
border-radius: 0px;
}

.p-tb .navbar-nav > li > a {
padding: 10px 15px;
}

.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
margin-right: 0px;
margin-left: 0px;
}

@media screen and (min-width: 992px) {
.table-in-three-columns {
    display:inline-table;width:49%;
}
}
@media screen and (min-width: 1200px) {
.table-in-three-columns {
    display:inline-table;width:33%;
}
}

.columns {
    -webkit-column-count: auto; /* Chrome, Safari, Opera */
    -moz-column-count: auto; /* Firefox */
    column-count: auto;
}
@media screen and (min-width: 992px) {
.three-columns {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}
}
@media screen and (min-width: 1200px) {
.three-columns {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
}

@media screen and (min-width: 992px) {
.four-columns {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}
}
@media screen and (min-width: 1200px) {
.four-columns {
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
}
}

#wikiPreview > div.mw-content-ltr > div > div > div {
clear: both;
}

.sidebar-nav {
    padding: 9px 0;
}

/** menu dropdown voorheen uitgecommentarieerd */
@media screen and (min-width: 992px) {
.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}

.nav-tabs > li > a {
   border:1px solid grey;
}
.nav-tabs > li.active > a {
   background-color:#CCC;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}
}