Benutzer:Col. o'neill/arcs.css: Unterschied zwischen den Versionen
aus Stargate Wiki, dem deutschsprachigen Stargate-Lexikon
Weitere Optionen
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
#arcs-wrapper { | #arcs-wrapper { | ||
display: block !important; | |||
overflow: hidden; | |||
} | } | ||
#arcs-temp { | #arcs-temp { | ||
display: none; | |||
} | } | ||
#arc-v1.arc { | #arc-v1.arc { | ||
height: 130px; | |||
margin-bottom: 50px; | |||
} | } | ||
#arc-v1 .arc-line { | #arc-v1 .arc-line { | ||
width: 100%; | |||
padding: 2px; | |||
box-sizing: border-box; | |||
background-color: #627499; | |||
} | } | ||
#arc-v1 .arc-event { | #arc-v1 .arc-event { | ||
display: inline-block; | |||
padding: 10px; | |||
border: 1px solid gray; | |||
border-radius: 3px; | |||
position: relative; | |||
line-height: 20px; | |||
} | } | ||
#arc-v1 .arc-event:nth-of-type(odd) { | #arc-v1 .arc-event:nth-of-type(odd) { | ||
margin-bottom: 20px; | |||
margin-right: 0px; | |||
} | } | ||
#arc-v1 .arc-event:nth-of-type(odd)::before { | #arc-v1 .arc-event:nth-of-type(odd)::before { | ||
content: ''; | |||
width: 0; | |||
height: 0; | |||
border: 10px solid gray; | |||
border-color: gray transparent transparent transparent; | |||
position: absolute; | |||
bottom: -20px; | |||
left: 5px; | |||
} | } | ||
#arc-v1 .arc-event:nth-of-type(odd)::after { | #arc-v1 .arc-event:nth-of-type(odd)::after { | ||
content: ''; | |||
width: 14px; | |||
height: 14px; | |||
border-radius: 100%; | |||
background-color: #627499; | |||
position: absolute; | |||
bottom: -30px; | |||
left: 8px; | |||
} | } | ||
#arc-v1 .arc-event:nth-of-type(even) { | #arc-v1 .arc-event:nth-of-type(even) { | ||
top: 86px; | |||
} | } | ||
#arc-v1 .arc-event:nth-of-type(even)::before { | #arc-v1 .arc-event:nth-of-type(even)::before { | ||
content: ''; | |||
width: 0; | |||
height: 0; | |||
border: 10px solid gray; | |||
border-color: transparent transparent gray transparent; | |||
position: absolute; | |||
top: -20px; | |||
left: 5px; | |||
} | } | ||
#arc-v1 .arc-event:nth-of-type(even)::after { | #arc-v1 .arc-event:nth-of-type(even)::after { | ||
content: ''; | |||
width: 14px; | |||
height: 14px; | |||
border-radius: 100%; | |||
background-color: #627499; | |||
position: absolute; | |||
top: -30px; | |||
left: 8px; | |||
} | } | ||
| Zeile 79: | Zeile 80: | ||
#arc-v2.arc { | #arc-v2.arc { | ||
height: | height: 60px; | ||
} | } | ||
#arc-v2 .arc-line { | #arc-v2 .arc-line { | ||
width: 100%; | |||
padding: 2px; | |||
box-sizing: border-box; | |||
background-color: #627499; | |||
} | |||
#arc-v2 .arc-event { | |||
display: inline-block; | |||
padding: 4px 8px; | |||
border: 1px solid #aaa; | |||
border-radius: 3px; | |||
position: relative; | |||
line-height: 19px; | |||
top: 18px; | |||
margin-right: 30px; | |||
margin-bottom: 10px; | |||
} | |||
#arc-v2 .arc-event::before { | |||
content: ''; | |||
width: 0; | |||
height: 0; | |||
border: 8px solid #919191; | |||
border-color: transparent transparent #919191 transparent; | |||
position: absolute; | |||
top: -17px; | |||
left: 7px; | |||
} | |||
#arc-v2 .arc-event::after { | |||
content: ''; | |||
width: 12px; | |||
height: 12px; | |||
border-radius: 100%; | |||
background-color: #627499; | |||
position: absolute; | |||
top: -27px; | |||
left: 9px; | |||
} | |||
#arc-v2 .arc-caption { | |||
display: inline-block; | |||
position: relative; | |||
top: -27px; | |||
font-size: 16px; | |||
color: #627499; | |||
font-weight: bold; | |||
margin-right: 50px; | |||
} | |||
#arc-v3.arc { | |||
padding-top: 25px; | |||
box-sizing: content-box; | |||
white-space: nowrap; | |||
position: relative; | |||
} | |||
#arc-v3 .arc-line { | |||
width: 100%; | width: 100%; | ||
padding: 2px; | padding: 2px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
background-color: # | background-color: #996262; | ||
z-index: 200; | |||
} | } | ||
#arc- | #arc-v3 .arc-caption { | ||
display: inline-block; | |||
position: relative; | |||
top: -27px; | |||
font-size: 16px; | |||
color: #627499; | |||
font-weight: bold; | |||
margin-right: 50px; | |||
vertical-align: top; | |||
} | |||
#arc-v3 .arc-events-view { | |||
display: inline-block; | |||
overflow: hidden; | |||
padding-top: 15px; | |||
top: -15px; | |||
position: relative; | |||
} | |||
#arc-v3 .arc-events-arrow-left { | |||
position: absolute; | |||
height: 100%; | |||
width: 50px; | |||
background-image: linear-gradient(to left, transparent 0%, white 50%); | |||
z-index: 100; | |||
top: 0; | |||
} | |||
#arc-v3 .arc-events-arrow-left::after { | |||
content: ''; | |||
width: 0; | |||
height: 0; | |||
border: 10px solid; | |||
border-color: transparent #bbb transparent transparent; | |||
position: absolute; | |||
top: 35px; | |||
} | |||
#arc-v3 .arc-events-arrow-right { | |||
position: absolute; | |||
height: 70px; | |||
width: 50px; | |||
background-image: linear-gradient(to right, transparent 0%, white 50%); | |||
z-index: 100; | |||
right: 0; | |||
margin-top: 14px; | |||
top: 0; | |||
} | |||
#arc-v3 .arc-events-arrow-right::after { | |||
content: ''; | |||
width: 0; | |||
height: 0; | |||
border: 10px solid; | |||
border-color: transparent transparent transparent #bbb; | |||
position: absolute; | |||
top: 35px; | |||
right: 0; | |||
} | |||
#arc-v3 .arc-events { | |||
transition: all .7s ease; | |||
padding-left: 50px; | |||
} | |||
#arc-v3 .arc-event { | |||
display: inline-block; | |||
padding: 4px 8px; | |||
border: 1px solid #aaa; | |||
border-radius: 3px; | |||
position: relative; | |||
line-height: 19px; | |||
margin-top: 18px; | |||
margin-right: 30px; | |||
margin-bottom: 10px; | |||
font-size: 13px; | |||
} | } | ||
#arc- | |||
#arc-v3 .arc-event::before { | |||
content: ''; | |||
width: 0; | |||
height: 0; | |||
border: 8px solid; | |||
border-color: transparent transparent #919191 transparent; | |||
position: absolute; | |||
top: -17px; | |||
left: 7px; | |||
} | } | ||
#arc- | #arc-v3 .arc-event::after { | ||
content: ''; | |||
width: 12px; | |||
height: 12px; | |||
border-radius: 100%; | |||
background-color: #627499; | |||
position: absolute; | |||
top: -27px; | |||
left: 9px; | |||
} | } | ||