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; } }