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'); #footer-places-about { display: none; } #sfForm .select2-container-multi .select2-choices { min-height: 60px; } /* Tests */ .testPage{ font-family: 'Roboto', sans-serif; } /**************************************************/ /*************** Font and spacing *****************/ /**************************************************/ body{ line-height: 1.6; font-size: 170%; } /**************************************************/ /*************** Title fade in *******************/ /**************************************************/ #fadein { display:inline-block; color: white; margin-top: 10px; text-align: left; animation: fadein 3s; -moz-animation: fadein 3s; /* Firefox */ -webkit-animation: fadein 3s; /* Safari and Chrome */ -o-animation: fadein 3s; /* Opera */ } @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:nth-of-type(odd) { background: rgba(192,192,192,0.15); } /**************************************************/ /******** 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.15); } /**************************************************/ /************ 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; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } /**************************************************/ /************ Customize Jumbotron *****************/ /**************************************************/ .jumbotron { /* background-color:#006B99; */ 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; } .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-brand { color:#ffffff; } .navbar .navbar-toggle { background-color:#D3D3D3; } .navbar .icon-bar { background-color:#006B99; } .navbar{ background-image: none; } /* 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; } /******************************/ /* 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; } /**********************************/ /* Table styling for public skin */ /*********************************/ table.dark-th th{ background-color: #e6e6e6; } /*************************************/ /* Styling SemanticDrilldown Buttons */ /************************************/ /* Global Button Styles */ a.drilldown-btn:link, a.drilldown-btn:visited { position: relative; display: block; margin: 30px auto 0; padding: 14px 15px; color: #fff; 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:link:after, a.drilldown-btn: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:link:hover, a.drilldown-btn:visited:hover { color: #FFF; text-shadow: none; } a.drilldown-btn:link:hover:after, a.drilldown-btn:visited:hover:after { height: 450%; } a.drilldown-btn:link, a.drilldown-btn:visited { position: relative; display: block; margin: 30px auto 0; padding: 14px 15px; color: #fff; 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.victoria-one { border: 2px solid #D24D57; } a.drilldown-btn.victoria-one:after { background: #D24D57; -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); } a.drilldown-btn.victoria-two { border: 2px solid #D24D57; } a.drilldown-btn.victoria-two:after { background: #D24D57; -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); } a.drilldown-btn.victoria-three { border: 2px solid #D24D57; } a.drilldown-btn.victoria-three:after { background: #D24D57; opacity: .5; -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } a.drilldown-btn.victoria-three:hover:after { height: 140%; opacity: 1; } a.drilldown-btn.victoria-four { border: 2px solid #D24D57; } a.drilldown-btn.victoria-four:after { background: #D24D57; opacity: .5; -moz-transform: translateY(-50%) translateX(-50%) rotate(90deg); -ms-transform: translateY(-50%) translateX(-50%) rotate(90deg); -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg); transform: translateY(-50%) translateX(-50%) rotate(90deg); } a.drilldown-btn.victoria-four:hover:after { opacity: 1; height: 600% !important; } /* Sandy Buttons */ a.drilldown-btn.sandy-one { border: 2px solid #AEA8D3; color: #FFF; } a.drilldown-btn.sandy-one:after { border: 3px solid #AEA8D3; opacity: 0; -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } a.drilldown-btn.sandy-one:hover:after { height: 120% !important; opacity: 1; color: #FFF; } a.drilldown-btn.sandy-two { border: 2px solid #AEA8D3; color: #FFF; } a.drilldown-btn.sandy-two:after { border: 3px solid #AEA8D3; opacity: 0; -moz-transform: translateY(-50%) translateX(-50%) rotate(90deg); -ms-transform: translateY(-50%) translateX(-50%) rotate(90deg); -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg); transform: translateY(-50%) translateX(-50%) rotate(90deg); } a.drilldown-btn.sandy-two:hover:after { height: 600% !important; opacity: 1; color: #FFF; } a.drilldown-btn.sandy-three { border: 2px solid #AEA8D3; color: #FFF; } a.drilldown-btn.sandy-three:after { border: 3px solid #AEA8D3; opacity: 0; -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); } a.drilldown-btn.sandy-three:hover:after { height: 400% !important; opacity: 1; color: #FFF; } a.drilldown-btn.sandy-four { border: 2px solid #AEA8D3; color: #FFF; } a.drilldown-btn.sandy-four:after { border: 3px solid #AEA8D3; opacity: 0; -moz-transform: translateY(-50%) translateX(-50%) rotate(25deg); -ms-transform: translateY(-50%) translateX(-50%) rotate(25deg); -webkit-transform: translateY(-50%) translateX(-50%) rotate(25deg); transform: translateY(-50%) translateX(-50%) rotate(25deg); } a.drilldown-btn.sandy-four:hover:after { height: 400% !important; opacity: 1; color: #FFF; } /* Gibson Buttons */ a.drilldown-btn.gibson-one { border: 2px solid #65b37a; color: #FFF; } a.drilldown-btn.gibson-one:after { opacity: 0; background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%); background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%); background-size: 10px 10px; -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); } a.drilldown-btn.gibson-one:hover:after { height: 600% !important; opacity: 1; color: #FFF; } a.drilldown-btn.gibson-two { border: 2px solid #65b37a; color: #FFF; } a.drilldown-btn.gibson-two:after { opacity: 0; background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%); background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%); background-size: 10px 10px; -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); } a.drilldown-btn.gibson-two:hover:after { height: 600% !important; opacity: 1; color: #FFF; } a.drilldown-btn.gibson-three { border: 2px solid #65b37a; color: #FFF; } a.drilldown-btn.gibson-three:after { opacity: 0; background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%); background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%); background-size: 10px 10px; -moz-transform: translateX(-50%) translateY(-50%) rotate(90deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(90deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg); transform: translateX(-50%) translateY(-50%) rotate(90deg); } a.drilldown-btn.gibson-three:hover:after { height: 600% !important; opacity: 1; color: #FFF; } a.drilldown-btn.gibson-four { border: 2px solid #65b37a; color: #FFF; } a.drilldown-btn.gibson-four:after { opacity: 0; background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%); background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%); background-size: 10px 10px; -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%)); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } a.drilldown-btn.gibson-four:hover:after { height: 600% !important; opacity: 1; color: #FFF; } /* Thar Buttons */ a.drilldown-btn.thar-one { color: #fff; cursor: pointer; display: block; position: relative; border: 2px solid #F7CA18; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; } a.drilldown-btn.thar-one:hover { color: #000 !important; background-color: transparent; text-shadow: none; } a.drilldown-btn.thar-one:hover:before { bottom: 0%; top: auto; height: 100%; } a.drilldown-btn.thar-one:before { display: block; position: absolute; left: 0px; top: 0px; height: 0px; width: 100%; z-index: -1; content: ''; color: #000 !important; background: #F7CA18; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; } a.drilldown-btn.thar-two { color: #fff; cursor: pointer; display: block; position: relative; border: 2px solid #F7CA18; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; } a.drilldown-btn.thar-two:hover { color: #000 !important; background-color: transparent; text-shadow: ntwo; } a.drilldown-btn.thar-two:hover:before { top: 0%; bottom: auto; height: 100%; } a.drilldown-btn.thar-two:before { display: block; position: absolute; left: 0px; bottom: 0px; height: 0px; width: 100%; z-index: -1; content: ''; color: #000 !important; background: #F7CA18; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; } a.drilldown-btn.thar-three { color: #fff; cursor: pointer; display: block; position: relative; border: 2px solid #F7CA18; transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1); 0s; } a.drilldown-btn.thar-three:hover { color: #000 !important; background-color: transparent; text-shadow: nthree; } a.drilldown-btn.thar-three:hover:before { left: 0%; right: auto; width: 100%; } a.drilldown-btn.thar-three:before { display: block; position: absolute; top: 0px; right: 0px; height: 100%; width: 0px; z-index: -1; content: ''; color: #000 !important; background: #F7CA18; transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1); 0s; } a.drilldown-btn.thar-four { color: #fff; cursor: pointer; display: block; position: relative; border: 2px solid #F7CA18; transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1); 0s; } a.drilldown-btn.thar-four:hover { color: #000 !important; background-color: transparent; text-shadow: nfour; } a.drilldown-btn.thar-four:hover:before { right: 0%; left: auto; width: 100%; } a.drilldown-btn.thar-four:before { display: block; position: absolute; top: 0px; left: 0px; height: 100%; width: 0px; z-index: -1; content: ''; color: #000 !important; background: #F7CA18; transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1); 0s; }