MediaWiki:Common.css
Aus Joachim Camerarius (1500-1574)
Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Internet Explorer/Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
- Opera: Strg+F5
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Montserrat');= Forschungsliteratur (alphabetisch) =
#footer-places-about { display: none; }
#sfForm .select2-container-multi .select2-choices {
min-height: 60px;
}
/* Tests */
.testPage{
font-family: 'Roboto', sans-serif;
}
.pseudoheading2 {
font-weight: bold;
font-size: 150%;
}
.pseudoheading3 {
font-weight: bold;
font-size: 125%;
}
/**************************************************/
/************* Change media breakpoint ************/
/**************************************************/
@media (max-width: 1279px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
/**************************************************/
/*************** Font and spacing *****************/
/**************************************************/
body{
line-height: 1.6;
font-size: 170%;
}
/**************************************************/
/*************** Title fade in *******************/
/**************************************************/
#fadein {
display:inline-block; color: white;
margin-top: 0px;
text-align: left;
-webkit-animation: text-blur-out 1.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) alternate-reverse both;
animation: text-blur-out 1.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) alternate-reverse both;
}
@-webkit-keyframes text-blur-out {
0% {
-webkit-filter: blur(0.01);
filter: blur(0.01);
}
100% {
-webkit-filter: blur(12px) opacity(0%);
filter: blur(12px) opacity(0%);
}
}
@keyframes text-blur-out {
0% {
-webkit-filter: blur(0.01);
filter: blur(0.01);
}
100% {
-webkit-filter: blur(12px) opacity(0%);
filter: blur(12px) opacity(0%);
}
}
@keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
/**************************************************/
/************ Drilldown custom style **************/
/**************************************************/
/* Hide category header (temporary fix! should be fixed using hook) */
#drilldown-categories-tabs-wrapper{
display: none;
}
div.drilldown-filter{
border-radius: 2px;
padding: 5px;
margin: 1rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
div.drilldown-filter:hover{
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
div.drilldown-filter:nth-of-type(odd) {
background: rgba(192,192,192,0.25);
}
/**************************************************/
/******** Structured List custom style ************/
/**************************************************/
.structuredList h1 {
background:rgba(153, 187, 255, 0.5);
}
.structuredList h2 {
background:rgba(153, 187, 255, 0.25);
}
/**************************************************/
/******************** hover list ******************/
/**************************************************/
.hoverList ul > li {
transition: opacity 0.2s ease-in-out;
}
.hoverList ul > li:hover {
background: rgba(192,192,192,0.25);
}
/**************************************************/
/************ Sticky table headers ****************/
/**************************************************/
.sticky-table {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 10px;
}
/**************************************************/
/********** Allow full width element **************/
/**************************************************/
.full-width {
width: 100vw;
margin-top: 0;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
/**************************************************/
/************ Customize Jumbotron *****************/
/**************************************************/
.jumbotron {
/* background-color:#006B99; */
margin-top: 0;
padding-top: 15%;
padding-bottom: 15%;
background-image:url("https://i.imgur.com/8O36OdH.jpg");
background-size: cover;
}
.jumbotronScroll a {
position: absolute;
bottom: 20px;
left: 50%;
z-index: 2;
display: inline-block;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
color: #fff;
font : normal 400 20px/1, sans-serif;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
}
.jumbotronScroll a:hover {
opacity: .5;
}
#section01 a {
padding-top: 60px;
}
#section01 a span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb01 2s infinite;
animation: sdb01 2s infinite;
box-sizing: border-box;
}
@-webkit-keyframes sdb01 {
0% {
-webkit-transform: rotate(-45deg) translate(0, 0);
}
20% {
-webkit-transform: rotate(-45deg) translate(-10px, 10px);
}
40% {
-webkit-transform: rotate(-45deg) translate(0, 0);
}
}
@keyframes sdb01 {
0% {
transform: rotate(-45deg) translate(0, 0);
}
20% {
transform: rotate(-45deg) translate(-10px, 10px);
}
40% {
transform: rotate(-45deg) translate(0, 0);
}
}
/****************************************************/
/** Hide information only needed for data editing **/
/**************************************************/
.private {
display: none;
}
.hide {
display: none;
}
/****************************************************/
/**** Override default bootstrap navbar sytling ****/
/***************************************************/
.navbar {
background-color:#006B99;
color:#ffffff;
margin: 0;
padding-bottom: 0;
padding-top: 0;
margin-bottom: 0;
background-image: none;
border: none;
}
.navbar .navbar-nav > li > a {
color:#fff;
}
.navbar .navbar-nav > .active > a {
color: #000000;
background-color:transparent;
}
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus,
.navbar .navbar-nav > .open >a {
text-decoration: none;
background-color: #D3D3D3;
color: #000000;
}
.navbar .navbar-toggle {
background-color:#D3D3D3;
}
.navbar .icon-bar {
background-color:#006B99;
}
/* for dropdowns only */
.navbar .navbar-nav .dropdown-menu {
background-color: #ffffff;
}
.navbar .navbar-nav .dropdown-menu>li>a {
color: #000000;
}
.navbar .navbar-nav .dropdown-menu>li.active>a {
color: #ffffff;
}
.navbar .navbar-nav .dropdown-menu>li>a:hover,.navbar .navbar-nav .dropdown-menu>li>a:focus {
color: #000000;
}
.navbar .navbar-nav .dropdown-menu>li>a:hover,.navbar .navbar-nav .dropdown-menu>li.dropdown.open>a:focus {
cbackground-color: #b91773;
}
.navbar a.navbar-brand {
font-weight:600;
color:#ffffff;
padding-right: 1em;
padding-left: 1em;
display: inline;
text-shadow: none;
font-size: 125%;
font-family: 'Montserrat', sans-serif;
}
.navbar .navbar-brand:hover {
font-weight: bold;
color:#ffffff;
}
/******************************/
/* Animate Stats on main page */
/******************************/
.stats {
text-align: center;
font-size: 20px;
font-weight: 700;
font-family: 'Open Sans', sans-serif;
}
.stats .fa {
color: #063d79;
font-size: 40px;
}
/**** end count stats ****/
/********************************/
/* Disable output of categories */
/********************************/
.mw-category-generated {
display: none;
}
/*************************************/
/* Styling SemanticDrilldown Buttons */
/************************************/
/* Global Button Styles */
a.drilldown-btn-test:link, a.drilldown-btn-test:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #000000;
font-size:14px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
border-radius: 0;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.drilldown-btn-test:link:after, a.drilldown-btn-test:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.drilldown-btn-test:link:hover, a.drilldown-btn-test:visited:hover {
color: #FFF;
text-shadow: none;
}
a.drilldown-btn-test:link:hover:after, a.drilldown-btn-test:visited:hover:after {
height: 450%;
}
a.drilldown-btn-test:link, a.drilldown-btn-test:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #000000;
font-size:14px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
/* Victoria Buttons */
a.drilldown-btn-test.victoria-two {
border: 2px solid #006B99;
}
a.drilldown-btn-test.victoria-two:after {
background: #006B99;
-moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
transform: translateX(-50%) translateY(-50%) rotate(25deg);
}
/* Thar Buttons */
a.drilldown-btn-test.thar-three {
color: #000;
cursor: pointer;
display: block;
position: relative;
border: 2px solid #006B99;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
0s;
}
a.drilldown-btn-test.thar-three:hover {
color: #fff !important;
background-color: transparent;
text-shadow: nthree;
}
a.drilldown-btn-test.thar-three:hover:before {
left: 0%;
right: auto;
width: 100%;
}
a.drilldown-btn-test.thar-three:before {
display: block;
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
z-index: -1;
content: '';
color: #fff !important;
background: #006B99;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
0s;
}
/***************************************************************/
/********************** Grid Divider **************************/
/**************************************************************/
@media ( min-width: 768px ) {
.grid-divider {
position: relative;
padding: 0;
}
.grid-divider>[class*='col-'] {
position: static;
}
.grid-divider>[class*='col-']:nth-child(n+2):before {
content: "";
border-left: 1px solid #DDD;
position: absolute;
top: 0;
bottom: 0;
}
.col-padding {
padding: 0 15px;
}
}
/***************************************************************/
/******************** Card material design *********************/
/**************************************************************/
.card {
background: #fff;
border-radius: 2px;
margin: 1rem;
padding: 5px;
}
.card-0 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card-1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card-1:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.card-2 {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.card-3 {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.card-4 {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.card-5 {
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card .heading {
position: relative;
height: 80px;
color: #fffff;
}
.card .heading h1 {
position: absolute;
bottom: 16px;
left: 16px;
font-size: 24px;
}
/******************************/
/**** Test loading screen ****/
/*****************************/
#page {
display: none;
}
#loading {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(255, 255, 255, 1);
background-repeat: no-repeat;
background-position: center;
}
.spinner {
width: 100px;
height: 100px;
position: relative;
margin: 250px auto;
}
.double-bounce1, .double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #006B99;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes sk-bounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bounce {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
/*******************************************/
/*********** Feedback button **************/
/******************************************/
.feedback {
background-color : #006B99;
color: white;
padding: 10px 20px;
border-radius: 4px;
border-color: #46b8da;
opacity: 0.5;
}
.feedback:hover {
opacity: 1;
color: white;
text-decoration: none;
}
.feedback:visited {
text-decoration: none;
color: white;
}
.feedback:link {
text-decoration: none;
color: white;
}
.feedback:active {
text-decoration: none;
color: white;
}
#sidebutton {
position: fixed;
top: 50%;
left: 0;
transform: translateX(-35%) rotate(-90deg);
}