Difference between revisions of "Template:Cologne-Duesseldorf/css"
| Line 22: | Line 22: | ||
background-color: #383838; | background-color: #383838; | ||
border-bottom: 2px solid black; | border-bottom: 2px solid black; | ||
| − | z-index: | + | z-index: 50; |
} | } | ||
#top_title { | #top_title { | ||
| Line 51: | Line 51: | ||
.pop_why_cover { | .pop_why_cover { | ||
display: none; | display: none; | ||
| − | z-index: | + | z-index: 50; |
margin-top: -65px; | margin-top: -65px; | ||
margin-left: -40px; | margin-left: -40px; | ||
| Line 71: | Line 71: | ||
border: 3px solid #4e606e; | border: 3px solid #4e606e; | ||
border-radius: 3px; | border-radius: 3px; | ||
| − | z-index: | + | z-index: 50; |
} | } | ||
| Line 78: | Line 78: | ||
************************************************************************/ | ************************************************************************/ | ||
* { | * { | ||
| − | box-sizing: border-box; | + | -webkit-box-sizing: border-box; |
| + | box-sizing: border-box; | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
| Line 153: | Line 154: | ||
bottom: 0; | bottom: 0; | ||
padding: 20px; | padding: 20px; | ||
| − | flex-direction:column; | + | -webkit-box-orient:vertical; |
| − | justify-content:space-around; | + | -webkit-box-direction:normal; |
| + | -ms-flex-direction:column; | ||
| + | flex-direction:column; | ||
| + | -ms-flex-pack:distribute; | ||
| + | justify-content:space-around; | ||
} | } | ||
@media (min-width: 1024px){ | @media (min-width: 1024px){ | ||
#ToC{ | #ToC{ | ||
| + | display:-webkit-box; | ||
| + | display:-ms-flexbox; | ||
display:flex; | display:flex; | ||
} | } | ||
| Line 174: | Line 181: | ||
position: fixed; | position: fixed; | ||
background-color: white; | background-color: white; | ||
| − | box-shadow: 0 5px 15px rgba(0,0,0,0.3); | + | -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.3); |
| + | box-shadow: 0 5px 15px rgba(0,0,0,0.3); | ||
left: 0; | left: 0; | ||
right: 0; | right: 0; | ||
top: 16px; | top: 16px; | ||
| − | z-index: | + | z-index: 50; |
} | } | ||
@media (min-width: 1024px) { | @media (min-width: 1024px) { | ||
#bodyContent nav{ | #bodyContent nav{ | ||
| + | display:-webkit-box; | ||
| + | display:-ms-flexbox; | ||
display:flex; | display:flex; | ||
} | } | ||
| Line 191: | Line 201: | ||
width:80%; | width:80%; | ||
margin:auto; | margin:auto; | ||
| + | display: -webkit-box; | ||
| + | display: -ms-flexbox; | ||
display: flex; | display: flex; | ||
| − | flex-direction: row; | + | -webkit-box-orient: horizontal; |
| − | justify-content: space-between; | + | -webkit-box-direction: normal; |
| − | align-items: center; | + | -ms-flex-direction: row; |
| + | flex-direction: row; | ||
| + | -webkit-box-pack: justify; | ||
| + | -ms-flex-pack: justify; | ||
| + | justify-content: space-between; | ||
| + | -webkit-box-align: center; | ||
| + | -ms-flex-align: center; | ||
| + | align-items: center; | ||
padding: 0 20px; | padding: 0 20px; | ||
} | } | ||
| Line 221: | Line 240: | ||
#bodyContent .menu li a { | #bodyContent .menu li a { | ||
| + | display: -webkit-box; | ||
| + | display: -ms-flexbox; | ||
display: flex; | display: flex; | ||
text-align: center; | text-align: center; | ||
| − | align-items:center; | + | -webkit-box-align:center; |
| + | -ms-flex-align:center; | ||
| + | align-items:center; | ||
text-decoration: none; | text-decoration: none; | ||
color: #777; | color: #777; | ||
| Line 246: | Line 269: | ||
content: "\f431"; | content: "\f431"; | ||
padding-left: 5px; | padding-left: 5px; | ||
| + | -webkit-transition: -webkit-transform 0.5s; | ||
| + | transition: -webkit-transform 0.5s; | ||
| + | -o-transition: transform 0.5s; | ||
transition: transform 0.5s; | transition: transform 0.5s; | ||
| + | transition: transform 0.5s, -webkit-transform 0.5s; | ||
} | } | ||
| Line 266: | Line 293: | ||
#bodyContent .sub-menu li { | #bodyContent .sub-menu li { | ||
| + | display: -webkit-box; | ||
| + | display: -ms-flexbox; | ||
display: flex; | display: flex; | ||
width: 340px; | width: 340px; | ||
| Line 277: | Line 306: | ||
#bodyContent nav ul ul ul { | #bodyContent nav ul ul ul { | ||
margin: 0 0 0 100%; | margin: 0 0 0 100%; | ||
| − | box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); | + | -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); |
| + | box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); | ||
} | } | ||
#bodyContent .menu-item-has-children .menu-item-has-children:hover > a:after { | #bodyContent .menu-item-has-children .menu-item-has-children:hover > a:after { | ||
| − | transform: rotate(-90deg); | + | -webkit-transform: rotate(-90deg); |
| − | transform-origin: 50% 60%; | + | -ms-transform: rotate(-90deg); |
| + | transform: rotate(-90deg); | ||
| + | -webkit-transform-origin: 50% 60%; | ||
| + | -ms-transform-origin: 50% 60%; | ||
| + | transform-origin: 50% 60%; | ||
} | } | ||
| Line 295: | Line 329: | ||
top: 16px; | top: 16px; | ||
right: 0; | right: 0; | ||
| + | display: -webkit-box; | ||
| + | display: -ms-flexbox; | ||
display: flex; | display: flex; | ||
| − | flex-direction: row; | + | -webkit-box-orient: horizontal; |
| − | justify-content: flex-end; | + | -webkit-box-direction: normal; |
| − | align-items: center; | + | -ms-flex-direction: row; |
| + | flex-direction: row; | ||
| + | -webkit-box-pack: end; | ||
| + | -ms-flex-pack: end; | ||
| + | justify-content: flex-end; | ||
| + | -webkit-box-align: center; | ||
| + | -ms-flex-align: center; | ||
| + | align-items: center; | ||
font-size: 24pt; | font-size: 24pt; | ||
cursor: pointer; | cursor: pointer; | ||
| Line 306: | Line 349: | ||
border: none; | border: none; | ||
border-radius: 0; | border-radius: 0; | ||
| − | box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3); | + | -webkit-box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3); |
| + | box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3); | ||
| + | -webkit-transition: border 1s ease; | ||
| + | -o-transition: border 1s ease; | ||
transition: border 1s ease; | transition: border 1s ease; | ||
} | } | ||
| Line 313: | Line 359: | ||
#bodyContent #sidebar-btn i { | #bodyContent #sidebar-btn i { | ||
| + | -webkit-transition: color 1s ease; | ||
| + | -o-transition: color 1s ease; | ||
transition: color 1s ease; | transition: color 1s ease; | ||
} | } | ||
| Line 327: | Line 375: | ||
left: 2vw; | left: 2vw; | ||
top: 4vw; | top: 4vw; | ||
| − | justify-content: center; | + | -webkit-box-pack: center; |
| + | -ms-flex-pack: center; | ||
| + | justify-content: center; | ||
background: #149375; | background: #149375; | ||
border: 3px solid white; | border: 3px solid white; | ||
| Line 357: | Line 407: | ||
visibility: hidden; | visibility: hidden; | ||
opacity: 0; | opacity: 0; | ||
| + | -webkit-transition: all 0.5s ease; | ||
| + | -o-transition: all 0.5s ease; | ||
transition: all 0.5s ease; | transition: all 0.5s ease; | ||
overflow-y: auto; | overflow-y: auto; | ||
| Line 370: | Line 422: | ||
#bodyContent #sidebar ul li { | #bodyContent #sidebar ul li { | ||
list-style: none; | list-style: none; | ||
| + | -webkit-transition: all 0.5s ease; | ||
| + | -o-transition: all 0.5s ease; | ||
transition: all 0.5s ease; | transition: all 0.5s ease; | ||
margin: 0; | margin: 0; | ||
| Line 390: | Line 444: | ||
padding: 10px; | padding: 10px; | ||
text-decoration: none; | text-decoration: none; | ||
| + | -webkit-transition: all 0.5s ease; | ||
| + | -o-transition: all 0.5s ease; | ||
transition: all 0.5s ease; | transition: all 0.5s ease; | ||
} | } | ||
| Line 404: | Line 460: | ||
padding: 10px; | padding: 10px; | ||
text-decoration: none; | text-decoration: none; | ||
| + | -webkit-transition: all 0.5s ease; | ||
| + | -o-transition: all 0.5s ease; | ||
transition: all 0.5s ease; | transition: all 0.5s ease; | ||
} | } | ||
| Line 429: | Line 487: | ||
visibility: hidden; | visibility: hidden; | ||
opacity: 0; | opacity: 0; | ||
| + | -webkit-transition: all 0.5s ease; | ||
| + | -o-transition: all 0.5s ease; | ||
transition: all 0.5s ease; | transition: all 0.5s ease; | ||
} | } | ||
| Line 436: | Line 496: | ||
} | } | ||
#bodyContent footer { | #bodyContent footer { | ||
| + | display: -webkit-box; | ||
| + | display: -ms-flexbox; | ||
display: flex; | display: flex; | ||
| − | flex-direction: row; | + | -webkit-box-orient: horizontal; |
| − | justify-content: center; | + | -webkit-box-direction: normal; |
| − | align-items: center; | + | -ms-flex-direction: row; |
| + | flex-direction: row; | ||
| + | -webkit-box-pack: center; | ||
| + | -ms-flex-pack: center; | ||
| + | justify-content: center; | ||
| + | -webkit-box-align: center; | ||
| + | -ms-flex-align: center; | ||
| + | align-items: center; | ||
height: 15vw; | height: 15vw; | ||
max-height: 250px; | max-height: 250px; | ||
| Line 448: | Line 517: | ||
padding: 20px; | padding: 20px; | ||
font-size: 5vw; | font-size: 5vw; | ||
| + | -webkit-transition: all 0.5s ease; | ||
| + | -o-transition: all 0.5s ease; | ||
transition: all 0.5s ease; | transition: all 0.5s ease; | ||
} | } | ||
| Line 632: | Line 703: | ||
#bodyContent .flex-row-2{ | #bodyContent .flex-row-2{ | ||
| + | display:-webkit-box; | ||
| + | display:-ms-flexbox; | ||
display:flex; | display:flex; | ||
| − | flex-direction: column; | + | -webkit-box-orient: vertical; |
| + | -webkit-box-direction: normal; | ||
| + | -ms-flex-direction: column; | ||
| + | flex-direction: column; | ||
} | } | ||
#bodyContent .flex-row-2 div{ | #bodyContent .flex-row-2 div{ | ||
| + | display:-webkit-box; | ||
| + | display:-ms-flexbox; | ||
display:flex; | display:flex; | ||
| − | flex-direction: column; | + | -webkit-box-orient: vertical; |
| − | justify-content: center; | + | -webkit-box-direction: normal; |
| − | align-items: center; | + | -ms-flex-direction: column; |
| + | flex-direction: column; | ||
| + | -webkit-box-pack: center; | ||
| + | -ms-flex-pack: center; | ||
| + | justify-content: center; | ||
| + | -webkit-box-align: center; | ||
| + | -ms-flex-align: center; | ||
| + | align-items: center; | ||
width: 50%; | width: 50%; | ||
} | } | ||
@media (min-width: 1024px) { | @media (min-width: 1024px) { | ||
#bodyContent .flex-row-2{ | #bodyContent .flex-row-2{ | ||
| − | flex-direction: row; | + | -webkit-box-orient: horizontal; |
| + | -webkit-box-direction: normal; | ||
| + | -ms-flex-direction: row; | ||
| + | flex-direction: row; | ||
} | } | ||
#bodyContent .flex-row-2 *{ | #bodyContent .flex-row-2 *{ | ||
| − | flex:1; | + | -webkit-box-flex:1; |
| + | -ms-flex:1; | ||
| + | flex:1; | ||
} | } | ||
} | } | ||
| Line 671: | Line 761: | ||
************************************************************************/ | ************************************************************************/ | ||
#bodyContent .tab { | #bodyContent .tab { | ||
| + | display:-webkit-box; | ||
| + | display:-ms-flexbox; | ||
display:flex; | display:flex; | ||
| − | flex-direction:row; | + | -webkit-box-orient:horizontal; |
| − | justify-content: center; | + | -webkit-box-direction:normal; |
| + | -ms-flex-direction:row; | ||
| + | flex-direction:row; | ||
| + | -webkit-box-pack: center; | ||
| + | -ms-flex-pack: center; | ||
| + | justify-content: center; | ||
} | } | ||
| Line 681: | Line 778: | ||
border-bottom:5px solid #ccc; | border-bottom:5px solid #ccc; | ||
outline:none; | outline:none; | ||
| + | -webkit-transition: 0.3s; | ||
| + | -o-transition: 0.3s; | ||
transition: 0.3s; | transition: 0.3s; | ||
width: 100%; | width: 100%; | ||
| Line 746: | Line 845: | ||
text-align: center; | text-align: center; | ||
outline: none; | outline: none; | ||
| + | -webkit-transition: all 0.5s ease; | ||
| + | -o-transition: all 0.5s ease; | ||
transition: all 0.5s ease; | transition: all 0.5s ease; | ||
} | } | ||
| Line 766: | Line 867: | ||
max-height: 0; | max-height: 0; | ||
overflow: hidden; | overflow: hidden; | ||
| + | -webkit-transition: max-height 0.5s ease-out; | ||
| + | -o-transition: max-height 0.5s ease-out; | ||
transition: max-height 0.5s ease-out; | transition: max-height 0.5s ease-out; | ||
} | } | ||
| Line 821: | Line 924: | ||
#bodyContent table tr{ | #bodyContent table tr{ | ||
background-color: rgba(0,0,0,0); | background-color: rgba(0,0,0,0); | ||
| + | -webkit-transition: all 0.5s ease; | ||
| + | -o-transition: all 0.5s ease; | ||
transition: all 0.5s ease; | transition: all 0.5s ease; | ||
} | } | ||
| Line 895: | Line 1,000: | ||
list-style-type: none; | list-style-type: none; | ||
color: #149375; | color: #149375; | ||
| + | -webkit-transition: all 0.5s ease; | ||
| + | -o-transition: all 0.5s ease; | ||
transition: all 0.5s ease; | transition: all 0.5s ease; | ||
} | } | ||
| Line 910: | Line 1,017: | ||
************************************************************************/ | ************************************************************************/ | ||
#bodyContent .flex-gallery { | #bodyContent .flex-gallery { | ||
| + | display: -webkit-box; | ||
| + | display: -ms-flexbox; | ||
display: flex; | display: flex; | ||
| − | flex-direction: column; | + | -webkit-box-orient: vertical; |
| − | flex-wrap: initial; | + | -webkit-box-direction: normal; |
| − | justify-content: flex-start; | + | -ms-flex-direction: column; |
| − | align-items: center; | + | flex-direction: column; |
| + | -ms-flex-wrap: initial; | ||
| + | flex-wrap: initial; | ||
| + | -webkit-box-pack: start; | ||
| + | -ms-flex-pack: start; | ||
| + | justify-content: flex-start; | ||
| + | -webkit-box-align: center; | ||
| + | -ms-flex-align: center; | ||
| + | align-items: center; | ||
} | } | ||
@media (min-width: 768px) { | @media (min-width: 768px) { | ||
#bodyContent .flex-gallery { | #bodyContent .flex-gallery { | ||
| − | flex-direction: row; | + | -webkit-box-orient: horizontal; |
| − | flex-wrap: wrap; | + | -webkit-box-direction: normal; |
| − | align-items: flex-end; | + | -ms-flex-direction: row; |
| − | justify-content: center; | + | flex-direction: row; |
| + | -ms-flex-wrap: wrap; | ||
| + | flex-wrap: wrap; | ||
| + | -webkit-box-align: end; | ||
| + | -ms-flex-align: end; | ||
| + | align-items: flex-end; | ||
| + | -webkit-box-pack: center; | ||
| + | -ms-flex-pack: center; | ||
| + | justify-content: center; | ||
} | } | ||
} | } | ||
| Line 927: | Line 1,052: | ||
@media (min-width: 768px) { | @media (min-width: 768px) { | ||
#bodyContent .center-gallery{ | #bodyContent .center-gallery{ | ||
| − | align-items: center; | + | -webkit-box-align: center; |
| + | -ms-flex-align: center; | ||
| + | align-items: center; | ||
} | } | ||
} | } | ||
| Line 934: | Line 1,061: | ||
width: 200px; | width: 200px; | ||
height: auto; | height: auto; | ||
| + | display:-webkit-box; | ||
| + | display:-ms-flexbox; | ||
display:flex; | display:flex; | ||
| − | flex-flow: column; | + | -webkit-box-orient: vertical; |
| − | justify-content: flex-end; | + | -webkit-box-direction: normal; |
| + | -ms-flex-flow: column; | ||
| + | flex-flow: column; | ||
| + | -webkit-box-pack: end; | ||
| + | -ms-flex-pack: end; | ||
| + | justify-content: flex-end; | ||
margin: 0 10px; | margin: 0 10px; | ||
} | } | ||
| Line 944: | Line 1,078: | ||
height: auto; | height: auto; | ||
margin: 0 auto 40px auto; | margin: 0 auto 40px auto; | ||
| − | filter: grayscale(100%); | + | -webkit-filter: grayscale(100%); |
| + | filter: grayscale(100%); | ||
| + | -webkit-transition: all 0.5s ease; | ||
| + | -o-transition: all 0.5s ease; | ||
transition: all 0.5s ease; | transition: all 0.5s ease; | ||
} | } | ||
#bodyContent .flex-gallery img:hover { | #bodyContent .flex-gallery img:hover { | ||
| − | filter: grayscale(0%); | + | -webkit-filter: grayscale(0%); |
| + | filter: grayscale(0%); | ||
} | } | ||
#bodyContent .modalDialog { | #bodyContent .modalDialog { | ||
| Line 957: | Line 1,095: | ||
left: 0; | left: 0; | ||
background: rgba(0, 0, 0, 0.8); | background: rgba(0, 0, 0, 0.8); | ||
| − | z-index: | + | z-index: 100; |
opacity: 0; | opacity: 0; | ||
| + | -webkit-transition: opacity 0.5s ease-in; | ||
| + | -o-transition: opacity 0.5s ease-in; | ||
transition: opacity 0.5s ease-in; | transition: opacity 0.5s ease-in; | ||
pointer-events: none; | pointer-events: none; | ||
| Line 967: | Line 1,107: | ||
} | } | ||
#bodyContent .modalDialog > div { | #bodyContent .modalDialog > div { | ||
| + | display:-webkit-box; | ||
| + | display:-ms-flexbox; | ||
display:flex; | display:flex; | ||
| − | flex-direction: row; | + | -webkit-box-orient: horizontal; |
| + | -webkit-box-direction: normal; | ||
| + | -ms-flex-direction: row; | ||
| + | flex-direction: row; | ||
position: absolute; | position: absolute; | ||
top: 15vh; | top: 15vh; | ||
| Line 985: | Line 1,130: | ||
right: 13vw; | right: 13vw; | ||
top: 11vh; | top: 11vh; | ||
| + | display: -webkit-box; | ||
| + | display: -ms-flexbox; | ||
display: flex; | display: flex; | ||
| − | flex-direction: row; | + | -webkit-box-orient: horizontal; |
| − | justify-content: center; | + | -webkit-box-direction: normal; |
| − | align-items: center; | + | -ms-flex-direction: row; |
| + | flex-direction: row; | ||
| + | -webkit-box-pack: center; | ||
| + | -ms-flex-pack: center; | ||
| + | justify-content: center; | ||
| + | -webkit-box-align: center; | ||
| + | -ms-flex-align: center; | ||
| + | align-items: center; | ||
width: 20px; | width: 20px; | ||
height: 20px; | height: 20px; | ||
| Line 995: | Line 1,149: | ||
border: 3px solid white; | border: 3px solid white; | ||
border-radius: 100%; | border-radius: 100%; | ||
| − | box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3); | + | -webkit-box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3); |
| + | box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3); | ||
} | } | ||
#bodyContent a.close { | #bodyContent a.close { | ||
background: #149375; | background: #149375; | ||
color: white; | color: white; | ||
| + | -webkit-transition: all 0.5s ease; | ||
| + | -o-transition: all 0.5s ease; | ||
transition: all 0.5s ease; | transition: all 0.5s ease; | ||
} | } | ||
| Line 1,020: | Line 1,177: | ||
} | } | ||
#bodyContent .slide{ | #bodyContent .slide{ | ||
| + | -webkit-transition: opacity 2s linear; | ||
| + | -o-transition: opacity 2s linear; | ||
transition: opacity 2s linear; | transition: opacity 2s linear; | ||
} | } | ||
| Line 1,058: | Line 1,217: | ||
text-decoration: none; | text-decoration: none; | ||
color: rgba(0, 0, 0, 0.6); | color: rgba(0, 0, 0, 0.6); | ||
| + | -webkit-transition: all 2s ease; | ||
| + | -o-transition: all 2s ease; | ||
transition: all 2s ease; | transition: all 2s ease; | ||
} | } | ||
Revision as of 11:19, 31 October 2017
